@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300..800;1,300..800&display=swap');

/* ===== styles.css ===== */
/* ============================================================
   Dubrovnik Boat Adventure — homepage styles
   Brand palette
   slate    #475261   primary dark text + UI
   mid-blue #5B829E   accent (links, hover, secondary fills)
   sand     #D9C7B8   warm accent / sand sections
   taupe    #9D8F83
   sky      #9FB9D6   subtle highlights
   ocean    #729BC5
   off      #F7F4EF   page background warm white
   ============================================================ */

:root {
  --slate:   #2C3744;
  --slate-2: #475261;
  --slate-3: #6B7585;
  --mid:     #5B829E;
  --ocean:   #729BC5;
  --sky:     #9FB9D6;
  --sand:    #D9B86A;
  --sand-2:  #EFE6DB;
  --olive:   #9A7A30;
  --taupe:   #9A7A30;
  --off:     #F7F4EF;
  --white:   #FFFFFF;
  --line:    rgba(71,82,97,.14);
  --line-2:  rgba(71,82,97,.28);

  --maxw: 1320px;
  --gutter: 28px;

  --r: 6px;
  --r-lg: 10px;

  --f-display: "Archivo", "Söhne", system-ui, sans-serif;
  --f-body: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--slate);
  background: var(--off);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ---------- Type ---------- */
.h-eyebrow {
  font-family: var(--f-body);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.h-eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--slate);
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(42px, 6.8vw, 96px); line-height: 0.96; letter-spacing: -0.04em; font-weight: 600; }
h2 { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.0; letter-spacing: -0.035em; font-weight: 600; }
h3 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
h4 { font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0; }
.lead { font-size: 19px; line-height: 1.5; color: var(--slate-2); max-width: 60ch; text-wrap: pretty; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
section { padding: clamp(80px, 9vw, 130px) 0; }
section.tight { padding: clamp(56px, 7vw, 96px) 0; }
.section-head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}
.section-head .lead { margin-top: 12px; }
@media (max-width: 800px) {
  .section-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
}

/* ---------- Buttons / links (no pills) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 26px;
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  text-transform: none;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--slate-2); color: var(--white); }
.btn-primary:hover { background: var(--slate); }
.btn-light { background: var(--white); color: var(--slate-2); border-color: var(--white); }
.btn-light:hover { background: var(--off); }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-outline { background: transparent; color: var(--slate-2); border: 1px solid var(--slate-2); }
.btn-outline:hover { background: var(--slate-2); color: var(--white); }
.btn .arrow { width: 18px; height: 10px; }
.btn-ghost { padding: 14px 0; color: var(--slate-2); border-bottom: 1px solid var(--slate-2); border-radius: 0; gap: 14px; }
.btn-ghost:hover { color: var(--mid); border-color: var(--mid); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500; font-size: 15px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  color: var(--slate-2);
  transition: color .2s ease, gap .2s ease;
}
.link-arrow:hover { color: var(--mid); gap: 14px; }

/* ---------- Sticky header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: 60;
  display: flex; align-items: center;
  height: 68px;
  transition: background .25s ease, border-color .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: var(--off);
  border-bottom-color: var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; width: 100%; }
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand img.mark { width: 38px; height: auto; filter: invert(1) brightness(1.4); transition: filter .25s; }
.site-header.is-solid .brand img.mark { filter: none; }
.brand .brand-text {
  font-family: var(--f-display);
  font-size: 14px; letter-spacing: -0.005em; line-height: 1.05; color: #fff; font-weight: 600;
  transition: color .25s;
}
.brand .brand-text small { display: block; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; opacity: .8; font-weight: 400; margin-top: 2px; }
.site-header.is-solid .brand .brand-text { color: var(--slate); }

.primary-nav { display: flex; gap: 22px; margin-left: 6px; flex: 1; justify-content: center; }
.primary-nav a {
  font-size: 13px; font-weight: 500; color: #fff;
  letter-spacing: 0.01em;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.site-header.is-solid .primary-nav a { color: var(--slate-2); }
.primary-nav a:hover { border-bottom-color: currentColor; }

.header-utils { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }

/* ---------- Header trust badges ---------- */
/* trust badges relocated into the top ribbon */
.top-ribbon .rb-badges { display: inline-flex; align-items: center; gap: 10px; margin-right: 2px; }
.top-ribbon .rb-badges .rb-b { width: auto; display: block; }
.top-ribbon .rb-badges .rb-ta { height: 25px; }
.top-ribbon .rb-badges .rb-bm { height: 22px; }
@media (max-width: 760px) { .top-ribbon .rb-badges { display: none; } }

/* ---------- Hero trust badges (in the hero, below the headings) ---------- */
.hero-trust { display: flex; align-items: center; gap: 10px; margin-top: 26px; }
.hero-trust img { height: 62px; width: auto; display: block; filter: drop-shadow(0 8px 18px rgba(0,0,0,.4)); }
.hero-trust .ht-bm { height: 54px; }
@media (max-width: 600px) { .hero-trust { gap: 8px; margin-top: 20px; } .hero-trust img { height: 52px; } .hero-trust .ht-bm { height: 46px; } }


.header-badges { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; margin-left: 4px; }
.header-badges .hb { height: 36px; width: auto; display: block; transition: transform .25s ease; }
.header-badges a { display: inline-flex; }
.header-badges a:hover .hb { transform: translateY(-2px); }
.header-badges .hb-ta { height: 38px; }
@media (max-width: 1240px) { .header-badges { display: none; } }

.lang-switch { display: flex; gap: 4px; font-size: 12px; letter-spacing: .14em; }
.lang-switch a { color: #fff; opacity: .65; padding: 4px 4px; }
.lang-switch a.active { opacity: 1; border-bottom: 1px solid currentColor; }
.site-header.is-solid .lang-switch a { color: var(--slate-2); }

.header-cta {
  padding: 10px 16px;
  background: var(--white);
  color: var(--slate-2);
  border-radius: var(--r);
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--white);
}
.header-cta:hover { background: var(--slate-2); color: #fff; border-color: var(--slate-2); }
.site-header.is-solid .header-cta { background: var(--slate-2); color: #fff; border-color: var(--slate-2); }
.site-header.is-solid .header-cta:hover { background: var(--slate); border-color: var(--slate); }

.menu-toggle {
  display: none;
  background: transparent; border: 0; padding: 6px;
  color: inherit; cursor: pointer;
}

@media (max-width: 1080px) {
  .primary-nav { display: none; }
}
@media (max-width: 1080px) {
  .menu-toggle { display: inline-flex; color: #fff; }
  .site-header.is-solid .menu-toggle { color: var(--slate-2, #47525E); }
  .header-cta { display: none; }
}
@media (max-width: 720px) {
  .header-cta { display: none; }
  .menu-toggle { display: inline-flex; color: #fff; }
  .site-header.is-solid .menu-toggle { color: var(--slate-2); }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  width: 100%;
  overflow: hidden;
  color: #fff;
  display: flex; flex-direction: column;
  padding: 0;
}
.hero .bg, .hero .bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,28,38,.55) 0%, rgba(20,28,38,0) 25%, rgba(20,28,38,0) 55%, rgba(20,28,38,.78) 100%),
    linear-gradient(90deg, rgba(20,28,38,.4) 0%, rgba(20,28,38,0) 60%);
}
.hero-inner {
  position: relative; z-index: 2;
  flex: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  padding-top: 120px;
  padding-bottom: 36px;
}
.hero-content { align-self: end; max-width: 1100px; }
.hero h1 {
  color: #fff;
  font-weight: 400;
}
.hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--sand);
}
.hero-sub {
  margin-top: 28px;
  max-width: 56ch;
  font-size: clamp(16px, 1.2vw, 19px);
  color: rgba(255,255,255,.86);
  line-height: 1.5;
}
.hero-ctas {
  margin-top: 40px;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.hero-ctas .btn-primary { background: var(--white); color: var(--slate-2); border-color: var(--white); }
.hero-ctas .btn-primary:hover { background: var(--sand); border-color: var(--sand); }

.hero-trust {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  border-top: 1px solid rgba(255,255,255,.22);
  padding-top: 28px;
}
.hero-trust-item {
  display: flex; align-items: center; gap: 14px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.hero-trust-item svg { width: 28px; height: 28px; flex: 0 0 28px; color: var(--sand); }
@media (max-width: 800px) {
  .hero-trust { grid-template-columns: 1fr 1fr; gap: 18px 24px; }
  .hero-inner { padding-top: 110px; }
}

.hero-scroll {
  position: absolute;
  right: var(--gutter); bottom: 36px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 12px;
  color: #fff;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
}
.hero-scroll .line { width: 60px; height: 1px; background: rgba(255,255,255,.6); }
@media (max-width: 800px) { .hero-scroll { display: none; } }

/* ---------- Trust bar (social proof) ---------- */
.trust-bar {
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 64px 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.trust-heading {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--slate);
  font-weight: 600;
}
.trust-heading em { font-style: italic; color: var(--mid); font-weight: 500; }

.trust-item {
  display: flex; flex-direction: column; gap: 14px;
  padding-left: 28px;
  border-left: 1px solid var(--line);
  min-height: 96px;
  justify-content: center;
}
.trust-item.badge-item { padding-left: 28px; }
.trust-item img.badge {
  height: 72px; width: auto; object-fit: contain;
  align-self: flex-start;
}
.trust-item .num {
  font-family: var(--f-display);
  font-size: 38px; line-height: 1; letter-spacing: -0.03em; color: var(--slate);
  font-weight: 600;
}
.trust-item .stars { display: inline-flex; gap: 2px; color: #F4A833; }
.trust-item .stars svg { width: 16px; height: 16px; }
.trust-item .src {
  font-size: 13px; color: var(--slate-3); letter-spacing: 0.01em;
  line-height: 1.45;
}
.trust-item .src strong { color: var(--slate-2); font-weight: 700; display: block; font-size: 14px; margin-bottom: 2px; }
@media (max-width: 1000px) {
  .trust-grid { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
  .trust-heading { grid-column: 1 / -1; }
  .trust-item { border-left: none; padding-left: 0; }
}

/* ---------- Service triage (icon-led cards) ---------- */
.services { background: var(--off); }
.service-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
}
.service-card {
  background: var(--off);
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: 36px 28px 32px;
  display: flex; flex-direction: column;
  position: relative;
  min-height: 320px;
  transition: background .25s ease;
}
.service-card:hover { background: var(--white); }
.service-card .num {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--f-body);
  font-size: 12px; letter-spacing: .18em;
  color: var(--slate-3);
  font-weight: 500;
}
.service-card .icon { color: var(--slate-2); margin-bottom: 22px; transition: transform .3s ease; }
.service-card:hover .icon { transform: translateY(-4px); }
.service-card .icon svg { width: 86px; height: 86px; stroke-width: 1.3; }
.service-card h3 { margin-bottom: 10px; font-size: 22px; }
.service-card p {
  font-size: 14.5px; color: var(--slate-3); line-height: 1.5;
  flex: 1;
  margin-bottom: 22px;
}
.service-card .link-arrow { font-size: 13.5px; color: var(--slate-2); border-color: var(--slate-2); }
@media (max-width: 1000px) { .service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .service-grid { grid-template-columns: 1fr; } }

/* ---------- Featured tours ---------- */
.featured { background: var(--white); }
.tour-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tour-card {
  background: var(--white);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform .25s ease;
}
.tour-card:hover { transform: translateY(-4px); }
.tour-card .img { aspect-ratio: 4/5; overflow: hidden; position: relative; border-radius: var(--r); }
.tour-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.tour-card:hover .img img { transform: scale(1.05); }

.tour-card .meta-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--olive);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
.tour-card .meta-row svg { width: 16px; height: 16px; flex: 0 0 16px; }
.tour-card .meta-row .sep { width: 1px; height: 12px; background: currentColor; opacity: .35; }

.tour-card .body { padding: 0; flex: 1; display: flex; flex-direction: column; }
.tour-card h3 { margin-top: 14px; margin-bottom: 8px; font-size: 24px; }
.tour-card .hook { font-size: 14.5px; color: var(--slate-3); line-height: 1.5; flex: 1; }
.tour-card .foot {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.tour-card .price {
  font-family: var(--f-display);
  font-size: 15px; color: var(--slate-2); letter-spacing: -0.01em;
  font-weight: 600;
}
.tour-card .price small { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--slate-3); margin-bottom: 2px; font-family: var(--f-body); font-weight: 500; }
.tour-card .check { font-size: 13px; color: var(--mid); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.section-foot { margin-top: 44px; display: flex; justify-content: center; }
@media (max-width: 1000px) { .tour-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tour-grid { grid-template-columns: 1fr; } }

/* ---------- Fleet snapshot (3 categories, yacht featured) ---------- */
.fleet { background: var(--off); }
.fleet-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.fleet-card-feat {
  background: var(--slate-2);
  color: #fff;
  border-radius: var(--r);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  min-height: 460px;
}
.fleet-card-feat .img {
  position: relative;
  overflow: hidden;
  min-height: 360px;
}
.fleet-card-feat .img img { width: 100%; height: 100%; object-fit: cover; }
.fleet-card-feat .img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,28,38,0) 60%, rgba(44,55,68,.6) 100%);
}
.fleet-card-feat .img .pill-top {
  position: absolute; top: 24px; left: 24px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--olive);
  color: #fff;
  padding: 8px 14px;
  border-radius: 4px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  z-index: 2;
}
.fleet-card-feat .body { padding: 44px 48px 44px; display: flex; flex-direction: column; justify-content: center; background: var(--slate-2); }
.fleet-card-feat .body .type {
  font-family: var(--f-body);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--sand);
  font-weight: 600;
}
.fleet-card-feat .body h3 { color: #fff; font-size: clamp(26px, 2.4vw, 36px); margin-top: 12px; letter-spacing: -0.025em; }
.fleet-card-feat .body .meta {
  display: flex; gap: 28px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.fleet-card-feat .body .meta div { display: flex; flex-direction: column; gap: 4px; }
.fleet-card-feat .body .meta .k { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 500; }
.fleet-card-feat .body .meta .v { font-family: var(--f-display); font-size: 17px; font-weight: 600; color: #fff; }
.fleet-card-feat .body p { margin-top: 20px; font-size: 15px; color: rgba(255,255,255,.82); line-height: 1.55; max-width: 42ch; }
.fleet-card-feat .body .view {
  margin-top: 24px; display: inline-flex; align-items: center; gap: 12px;
  color: #fff; font-size: 14px; font-weight: 600;
  border-bottom: 1px solid var(--sand); padding-bottom: 3px;
  align-self: flex-start;
}
.fleet-card-feat .body .view:hover { color: var(--sand); }

.fleet-row-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.fleet-card-sec {
  background: var(--white);
  border-radius: var(--r);
  overflow: hidden;
  display: grid; grid-template-columns: 1fr 1.1fr;
  border: 1px solid var(--line);
  min-height: 280px;
}
.fleet-card-sec .img { background-size: cover; background-position: center; min-height: 280px; }
.fleet-card-sec .body { padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.fleet-card-sec .body .type { font-family: var(--f-body); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--olive); font-weight: 700; }
.fleet-card-sec .body h3 { margin-top: 8px; font-size: 22px; }
.fleet-card-sec .body .count {
  margin-top: 6px;
  font-family: var(--f-display); font-size: 13.5px; color: var(--slate-3); font-weight: 500;
}
.fleet-card-sec .body p { margin-top: 14px; font-size: 14px; color: var(--slate-3); line-height: 1.5; }
.fleet-card-sec .body .view {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 10px;
  color: var(--slate-2); font-size: 13.5px; font-weight: 600;
  border-bottom: 1px solid var(--slate-2); padding-bottom: 3px;
  align-self: flex-start;
}
@media (max-width: 1000px) {
  .fleet-card-feat { grid-template-columns: 1fr; min-height: 0; }
  .fleet-card-feat .img { min-height: 280px; }
  .fleet-row-2 { grid-template-columns: 1fr; }
  .fleet-card-sec { grid-template-columns: 1fr; }
}

/* ---------- Yacht charter teaser (split band) ---------- */
.yacht-charter {
  background: var(--slate-2);
  color: #fff;
  padding: 0;
}
.yacht-grid { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 620px; }
.yacht-grid .img { background-size: cover; background-position: center; }
.yacht-grid .content {
  padding: clamp(48px, 6vw, 90px);
  display: flex; flex-direction: column; justify-content: center;
}
.yacht-grid h2 { color: #fff; margin-top: 22px; }
.yacht-grid h2 em { font-style: italic; color: var(--sand); font-weight: 300; }
.yacht-grid .lead { color: rgba(255,255,255,.86); margin-top: 22px; }
.duration-chips { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid rgba(255,255,255,.18); }
.duration-chips a {
  flex: 1; min-width: 130px;
  padding: 22px 6px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-display); font-size: 18px; letter-spacing: -0.01em;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  transition: background .25s ease;
}
.duration-chips a:last-child { border-right: none; }
.duration-chips a:hover { background: rgba(255,255,255,.08); }
.duration-chips a small { display: block; font-family: var(--f-body); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); font-weight: 500; }
.yacht-grid .btn-outline-light { margin-top: 36px; align-self: flex-start; }
@media (max-width: 900px) {
  .yacht-grid { grid-template-columns: 1fr; }
  .yacht-grid .img { min-height: 360px; }
}

/* ---------- Why book with us ---------- */
.why { background: var(--off); }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 60px; row-gap: 60px; }
.why-item {
  padding-top: 6px;
}
.why-item .ic { color: var(--slate-2); margin-bottom: 22px; }
.why-item .ic svg { width: 64px; height: 64px; stroke-width: 1.3; }
.why-item h3 { margin-bottom: 10px; font-size: 22px; }
.why-item p { font-size: 15px; color: var(--slate-3); line-height: 1.55; max-width: 38ch; }
@media (max-width: 1000px) { .why-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; } }
@media (max-width: 600px) { .why-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- Day trips ---------- */
.daytrips { background: var(--white); }
.daytrips .tour-grid .tour-card .img { aspect-ratio: 3/4; }

/* ---------- Transfers ---------- */
.transfers { background: var(--sand-2); }
.transfer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.transfer-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: grid; grid-template-rows: 280px 1fr;
}
.transfer-card .img { background-size: cover; background-position: center; }
.transfer-card .body { padding: 36px 36px 36px; }
.transfer-card .ic { color: var(--slate-2); margin-bottom: 18px; }
.transfer-card .ic svg { width: 56px; height: 56px; stroke-width: 1.3; }
.transfer-card h3 { margin-bottom: 14px; font-size: 26px; }
.transfer-card p { font-size: 15px; color: var(--slate-3); line-height: 1.55; }
.transfer-card .routes {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--slate-2);
  letter-spacing: 0.01em;
}
.transfer-card .routes span { color: var(--taupe); margin: 0 6px; }
.transfer-card .link-arrow { margin-top: 22px; }
@media (max-width: 900px) { .transfer-grid { grid-template-columns: 1fr; } }

/* ---------- Events & water sports ---------- */
.celebrate { background: var(--slate); color: #fff; padding: 0; }
.celebrate-grid { display: grid; grid-template-columns: 1fr 1fr; }
.celebrate-cell {
  position: relative;
  min-height: 540px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(40px, 5vw, 64px);
  overflow: hidden;
}
.celebrate-cell .bg { position: absolute; inset: 0; }
.celebrate-cell .bg img { width: 100%; height: 100%; object-fit: cover; }
.celebrate-cell .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,38,49,.1) 0%, rgba(30,38,49,.85) 100%); }
.celebrate-cell .content { position: relative; max-width: 460px; }
.celebrate-cell h3 { color: #fff; font-size: clamp(28px, 2.8vw, 38px); }
.celebrate-cell p { color: rgba(255,255,255,.86); margin-top: 14px; font-size: 15.5px; line-height: 1.55; }
.celebrate-cell .link-arrow { margin-top: 24px; color: #fff; border-color: rgba(255,255,255,.55); }
.celebrate-cell .link-arrow:hover { color: var(--sand); }
@media (max-width: 900px) { .celebrate-grid { grid-template-columns: 1fr; } }

/* ---------- Testimonials ---------- */
.testimonials { background: var(--off); }
.testi-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}
.testi-platform {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 26px;
  display: flex; align-items: center; gap: 18px;
}
.testi-platform .plat-logo {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.testi-platform .plat-logo img { height: 44px; width: auto; }
.testi-platform .plat-logo .glogo {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
}
.testi-platform .plat-info { display: flex; flex-direction: column; gap: 4px; }
.testi-platform .rate-row { display: inline-flex; align-items: baseline; gap: 8px; }
.testi-platform .rate { font-family: var(--f-display); font-size: 22px; line-height: 1; font-weight: 700; color: var(--slate); letter-spacing: -0.02em; }
.testi-platform .of { font-size: 12px; color: var(--slate-3); letter-spacing: 0.04em; }
.testi-platform .stars { display: inline-flex; gap: 1px; color: #F4A833; margin-top: 2px; }
.testi-platform .stars svg { width: 14px; height: 14px; }
.testi-platform .src { font-size: 12px; color: var(--slate-3); margin-top: 4px; }
.testi-platform .src strong { color: var(--slate); font-weight: 600; }

.testi-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.testi {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 34px 30px;
  display: flex; flex-direction: column;
}
.testi .stars { color: #F4A833; display: inline-flex; gap: 3px; margin-bottom: 16px; }
.testi .stars svg { width: 18px; height: 18px; }
.testi blockquote {
  font-family: var(--f-display);
  font-size: 21px; line-height: 1.3; letter-spacing: -0.015em;
  margin: 0;
  color: var(--slate);
  flex: 1;
  font-weight: 500;
}
.testi .who {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px;
}
.testi .avatar {
  width: 44px; height: 44px;
  background: var(--sand-2);
  color: var(--slate-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-size: 16px; font-weight: 600;
  border-radius: 4px;
}
.testi .who-meta { display: flex; flex-direction: column; gap: 2px; }
.testi .who-meta .name { font-weight: 600; font-size: 14px; color: var(--slate); }
.testi .who-meta .src { font-size: 12.5px; color: var(--slate-3); }
@media (max-width: 1000px) { .testi-rail, .testi-platforms { grid-template-columns: 1fr; } }

/* ---------- Blog ---------- */
.blog { background: var(--white); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card { display: flex; flex-direction: column; }
.blog-card .img { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r); }
.blog-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.blog-card:hover .img img { transform: scale(1.04); }
.blog-card .cat { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mid); margin-top: 22px; font-weight: 600; }
.blog-card h3 { margin-top: 10px; font-size: 22px; }
.blog-card .excerpt { margin-top: 12px; color: var(--slate-3); font-size: 14.5px; line-height: 1.55; }
.blog-card .meta { margin-top: 16px; font-size: 12.5px; color: var(--slate-3); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { background: var(--off); }
.faq-wrap { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; align-items: start; }
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-top: 1px solid var(--line-2);
  padding: 28px 0;
}
.faq-item:last-of-type { border-bottom: 1px solid var(--line-2); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  cursor: pointer; list-style: none;
  font-family: var(--f-display);
  font-size: 22px; letter-spacing: -0.01em;
  color: var(--slate);
  font-weight: 700;
  text-wrap: balance;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .marker {
  flex: 0 0 22px; width: 22px; height: 22px;
  position: relative;
  transition: transform .3s ease;
}
.faq-item .marker::before,
.faq-item .marker::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--slate-2);
  transition: transform .3s ease;
}
.faq-item .marker::before { width: 14px; height: 1.5px; transform: translate(-50%,-50%); }
.faq-item .marker::after  { width: 1.5px; height: 14px; transform: translate(-50%,-50%); }
.faq-item[open] .marker::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item .answer { margin-top: 14px; color: var(--slate-3); font-size: 15.5px; line-height: 1.6; max-width: 65ch; }
@media (max-width: 900px) { .faq-wrap { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Final conversion / Contact block (reusable) ---------- */
.final { background: var(--off); padding: clamp(80px, 9vw, 130px) 0; }
.contact-block-v2 {
  background: var(--slate);
  color: #fff;
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
}
.contact-block-v2 .topimg {
  height: 240px;
  background-size: cover; background-position: center;
  position: relative;
}
.contact-block-v2 .topimg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,28,38,.3) 0%, rgba(20,28,38,.85) 100%);
}
.contact-block-v2 .topimg .top-inner {
  position: absolute; left: clamp(36px, 5vw, 80px); bottom: 32px; right: clamp(36px, 5vw, 80px);
  display: flex; align-items: end; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.contact-block-v2 .topimg h2 { color: #fff; max-width: 18ch; font-size: clamp(28px, 3.4vw, 48px); }
.contact-block-v2 .topimg h2 em { font-style: italic; color: var(--sand); font-weight: 300; }
.contact-block-v2 .topimg .reply {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.85); font-weight: 500;
}
.contact-block-v2 .topimg .reply svg { width: 16px; height: 16px; color: var(--sand); }

.contact-block-v2 .inner {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 0;
}
.contact-block-v2 .form-side { padding: clamp(40px, 5vw, 72px); }
.contact-block-v2 .info-side {
  padding: clamp(40px, 5vw, 64px);
  background: rgba(0,0,0,.18);
  border-left: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 0;
}
.contact-block-v2 .info-side .ic-row {
  display: grid; grid-template-columns: 28px 1fr; gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  align-items: center;
}
.contact-block-v2 .info-side .ic-row:first-of-type { padding-top: 0; }
.contact-block-v2 .info-side .ic-row:last-of-type { border-bottom: none; padding-bottom: 4px; }
.contact-block-v2 .info-side .ic-row svg { width: 26px; height: 26px; color: var(--sand); stroke-width: 1.5; }
.contact-block-v2 .info-side .lbl { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6); display: block; margin-bottom: 4px; font-weight: 500; }
.contact-block-v2 .info-side .val { font-family: var(--f-display); font-size: 17px; color: #fff; line-height: 1.35; letter-spacing: -0.005em; font-weight: 500; }
.contact-block-v2 .info-side .val a { color: #fff; }
.contact-block-v2 .info-side .val a:hover { color: var(--sand); }
.contact-block-v2 .info-side .boarding-list {
  margin-top: 24px; padding: 18px 20px;
  background: rgba(159,143,110,.12);
  border-radius: var(--r);
}
.contact-block-v2 .info-side .boarding-list .lbl { font-size: 10px; margin-bottom: 8px; }
.contact-block-v2 .info-side .boarding-list .pts { font-family: var(--f-display); font-size: 14px; color: #fff; font-weight: 500; }
.contact-block-v2 .info-side .boarding-list .pts span { color: var(--sand); margin: 0 6px; }

/* ----- Homepage FAQ + Contact combined section ----- */
.faq-contact {
  background: var(--off);
  padding: clamp(80px, 9vw, 130px) 0;
}
.faq-contact .combined-card {
  background: var(--slate);
  color: #fff;
  border-radius: var(--r);
  overflow: hidden;
}
.faq-contact .top-banner {
  padding: clamp(36px, 5vw, 64px) clamp(40px, 5vw, 80px);
  background: linear-gradient(135deg, var(--slate) 0%, var(--slate-2) 100%);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.faq-contact .top-banner .left { max-width: 22ch; }
.faq-contact .top-banner .h-eyebrow { color: var(--sand); }
.faq-contact .top-banner h2 { color: #fff; margin-top: 16px; font-size: clamp(32px, 3.6vw, 52px); }
.faq-contact .top-banner h2 em { font-style: italic; color: var(--sand); font-weight: 300; }
.faq-contact .top-banner .reply {
  display: inline-flex; align-items: center; gap: 12px;
  color: rgba(255,255,255,.85); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500;
  padding: 14px 20px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r);
}
.faq-contact .top-banner .reply svg { width: 18px; height: 18px; color: var(--sand); }

.faq-contact .body {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 0;
}
.faq-contact .body .faq-side { padding: clamp(40px, 5vw, 64px); }
.faq-contact .body .info-side { padding: clamp(40px, 5vw, 56px); background: rgba(0,0,0,.2); border-left: 1px solid rgba(255,255,255,.08); }

.faq-contact .faq-side .section-label {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.55); font-weight: 600;
  margin-bottom: 22px;
  display: flex; align-items: center; gap: 12px;
}
.faq-contact .faq-side .section-label::before { content: ""; width: 24px; height: 1px; background: var(--sand); }

.faq-contact .faq-side .faq-item {
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 22px 0;
}
.faq-contact .faq-side .faq-item:last-of-type { border-bottom: 1px solid rgba(255,255,255,.14); }
.faq-contact .faq-side .faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  cursor: pointer; list-style: none;
  font-family: var(--f-display); font-size: 18px; font-weight: 500;
  color: #fff;
  letter-spacing: -0.01em;
}
.faq-contact .faq-side .faq-item summary::-webkit-details-marker { display: none; }
.faq-contact .faq-side .faq-item .marker {
  flex: 0 0 20px; width: 20px; height: 20px;
  position: relative;
  transition: transform .3s ease;
}
.faq-contact .faq-side .faq-item .marker::before,
.faq-contact .faq-side .faq-item .marker::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--sand);
  transition: transform .3s ease;
}
.faq-contact .faq-side .faq-item .marker::before { width: 12px; height: 1.5px; transform: translate(-50%,-50%); }
.faq-contact .faq-side .faq-item .marker::after  { width: 1.5px; height: 12px; transform: translate(-50%,-50%); }
.faq-contact .faq-side .faq-item[open] .marker::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-contact .faq-side .faq-item .answer { margin-top: 14px; color: rgba(255,255,255,.78); font-size: 14.5px; line-height: 1.6; max-width: 60ch; }

.faq-contact .info-side .ic-row {
  display: grid; grid-template-columns: 28px 1fr; gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  align-items: center;
}
.faq-contact .info-side .ic-row:first-of-type { padding-top: 0; }
.faq-contact .info-side .ic-row svg { width: 26px; height: 26px; color: var(--sand); stroke-width: 1.5; }
.faq-contact .info-side .lbl { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6); display: block; margin-bottom: 4px; font-weight: 500; }
.faq-contact .info-side .val { font-family: var(--f-display); font-size: 16px; color: #fff; line-height: 1.4; font-weight: 500; }
.faq-contact .info-side .val a { color: #fff; }
.faq-contact .info-side .val a:hover { color: var(--sand); }
.faq-contact .info-side .cta-stack { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.faq-contact .info-side .cta-stack .btn { width: 100%; justify-content: center; padding: 16px 22px; font-size: 14px; }
.faq-contact .info-side .cta-stack .btn-primary { background: var(--sand); color: #fff; border-color: var(--sand); }
.faq-contact .info-side .cta-stack .btn-primary:hover { background: var(--olive); border-color: var(--olive); }
.faq-contact .info-side .cta-stack .btn-wa { background: #25D366; color: #fff; border-color: #25D366; }
.faq-contact .info-side .cta-stack .btn-wa:hover { background: #1ebd57; }
.faq-contact .info-side .boarding-list {
  margin-top: 18px; padding: 16px 18px;
  background: rgba(159,143,110,.12);
  border-radius: var(--r);
}
.faq-contact .info-side .boarding-list .lbl { font-size: 10px; margin-bottom: 8px; color: rgba(255,255,255,.6); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.faq-contact .info-side .boarding-list .pts { font-family: var(--f-display); font-size: 13.5px; color: #fff; font-weight: 500; }
.faq-contact .info-side .boarding-list .pts span { color: var(--sand); margin: 0 6px; }

@media (max-width: 1000px) {
  .faq-contact .body { grid-template-columns: 1fr; }
  .faq-contact .body .info-side { border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
}

form.inquiry { display: grid; gap: 16px; margin-top: 0; }
form.inquiry .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
form.inquiry label {
  display: block;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.7); margin-bottom: 8px;
  font-weight: 500;
}
form.inquiry input,
form.inquiry select,
form.inquiry textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.32);
  padding: 12px 0 14px;
  font-family: var(--f-body);
  font-size: 16px;
  color: #fff;
  border-radius: 0;
  outline: none;
  transition: border-color .2s ease;
}
form.inquiry input::placeholder,
form.inquiry textarea::placeholder { color: rgba(255,255,255,.45); }
form.inquiry input:focus,
form.inquiry select:focus,
form.inquiry textarea:focus { border-bottom-color: var(--sand); }
form.inquiry select { appearance: none; -webkit-appearance: none; 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='%23ffffff' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 4px center; cursor: pointer; }
form.inquiry select option { color: var(--slate); background: #fff; }
form.inquiry textarea { resize: vertical; min-height: 90px; padding-bottom: 18px; }
form.inquiry .submit-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 16px; flex-wrap: wrap;
}
form.inquiry button[type=submit] {
  background: var(--sand);
  color: #fff;
  font-family: var(--f-body); font-size: 15px; font-weight: 600;
  border: 0; border-radius: var(--r);
  padding: 18px 28px;
  display: inline-flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: background .2s, transform .15s ease;
}
form.inquiry button[type=submit]:hover { background: var(--olive); transform: translateY(-1px); }
form.inquiry .alt {
  color: rgba(255,255,255,.75); font-size: 14px;
}
form.inquiry .alt a { color: #fff; border-bottom: 1px solid currentColor; }

@media (max-width: 900px) {
  .contact-block-v2 .inner { grid-template-columns: 1fr; }
  .contact-block-v2 .info-side { border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
}

/* ---------- Footer ---------- */
.site-footer { background: #1B232E; color: rgba(255,255,255,.7); padding: 90px 0 32px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 60px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-grid .col h4 { color: #fff; font-family: var(--f-body); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; margin-bottom: 22px; }
.footer-grid .col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-grid .col a { color: rgba(255,255,255,.7); font-size: 14px; }
.footer-grid .col a:hover { color: #fff; }
.footer-brand .brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.footer-brand img.mark { width: 92px; height: auto; filter: invert(1); }
.footer-brand .brand-text { font-family: var(--f-display); font-size: 22px; line-height: 1.05; color: #fff; font-weight: 600; letter-spacing: -0.02em; }
.footer-brand .brand-text small { display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: .65; font-weight: 400; margin-top: 4px; }
.footer-brand .descriptor { font-size: 14.5px; line-height: 1.55; max-width: 38ch; color: rgba(255,255,255,.7); }
.socials { display: flex; gap: 14px; margin-top: 28px; }
.socials a {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  transition: color .2s, transform .2s;
  border: 0; background: transparent;
}
.socials a:hover { color: var(--sand); transform: translateY(-2px); }
.socials svg { width: 22px; height: 22px; }

.nap .ic-line {
  display: grid; grid-template-columns: 18px 1fr;
  gap: 14px;
  font-size: 14.5px; line-height: 1.55;
  color: rgba(255,255,255,.78);
  padding: 10px 0;
  align-items: flex-start;
}
.nap .ic-line svg { width: 18px; height: 18px; color: var(--sand); margin-top: 3px; }
.nap .ic-line strong { color: #fff; font-weight: 600; display: block; }
.nap .ic-line a { color: rgba(255,255,255,.78); }
.nap .ic-line a:hover { color: #fff; }
.boarding-points {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13px;
}
.boarding-points .lbl { display: block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 8px; }
.boarding-points span { color: var(--sand); margin: 0 6px; }
.legal-bar {
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  font-size: 12.5px; color: rgba(255,255,255,.45);
}
.legal-bar .legal-links { display: flex; gap: 22px; }
.legal-bar a:hover { color: rgba(255,255,255,.85); }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .legal-bar { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Sticky WhatsApp ---------- */
.whatsapp-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366; color: #fff;
  padding: 14px 18px 14px 16px;
  border-radius: var(--r);
  font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(37,211,102,.6);
  transition: transform .2s ease;
}
.whatsapp-fab:hover { transform: translateY(-2px); }
.whatsapp-fab svg { width: 22px; height: 22px; }
@media (max-width: 600px) {
  .whatsapp-fab span { display: none; }
  .whatsapp-fab { padding: 14px; }
}

/* Decorative ship-wave divider (sparse) */
.wave-div {
  display: block;
  width: 100%; height: 22px;
  color: var(--line-2);
  margin: 0;
}

/* ============================================================
   DESKTOP — slightly bolder typography (per request)
   Applies only at >=1000px so mobile stays light.
   ============================================================ */
@media (min-width: 1000px) {
  body { font-weight: 500; }
  p, li, td, th, dd, dt,
  .lead, .sub, .desc, .meta, .meta-row, .meta-row span,
  blockquote, label, figcaption,
  .stat .l, .stat .v, .pill, .tag,
  .cta-lk, .link-arrow, .btn,
  .answer, .faq-accordion summary { font-weight: 500; }
  .h-eyebrow { font-weight: 600 !important; }
  h1, h2, h3 { font-weight: 700 !important; }
  h4, .section-head .lead { font-weight: 600; }
  .nav a, .primary-nav a { font-weight: 600; }
}

/* ============================================================
   Remove decorative overlay BADGE TITLES site-wide (per request).
   Keeps functional labels: duration tags, itinerary day tags,
   passport warnings.
   ============================================================ */
.ph-badge,
.feat-ribbon,
.tourtype-media .badge,
.badge-type,
.cboat-label,
.kindx-count,
.tfeat-badge,
.reqcard-svc,
.reqcard-rank,
.xfleet-ph span,
.vehx-badge,
.evx-chip,
.bc-tag,
.cat-count {
  display: none !important;
}

/* ============================================================
   Header hero stat strip removed across all pages (per request)
   ============================================================ */
.subhero .stat-bar,
.about-hero .stat-bar,
.stat-bar {
  display: none !important;
}



/* ===== pages-extra.css ===== */
/* ============================================================
   Extra styles for sub-pages
   ============================================================ */

/* Sub-hero (page header) */
.subhero {
  position: relative;
  margin-top: 0;
  padding: 0;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
.subhero .bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.subhero .bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,28,38,.55) 0%, rgba(20,28,38,.1) 35%, rgba(20,28,38,.85) 100%);
}
.subhero .wrap {
  position: relative; z-index: 2;
  padding-top: 130px; padding-bottom: 64px;
}
.subhero .crumbs {
  display: inline-flex; gap: 10px; align-items: center;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 22px;
}
.subhero .crumbs a { color: var(--sand); border-bottom: 1px solid transparent; }
.subhero .crumbs a:hover { border-bottom-color: var(--sand); }
.subhero .crumbs span { opacity: .5; }
.subhero h1 {
  color: #fff;
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
  max-width: 18ch;
}
.subhero h1 em { font-style: italic; color: var(--sand); font-weight: 300; }
.subhero .sub {
  margin-top: 22px;
  font-size: 17px; line-height: 1.55;
  color: rgba(255,255,255,.85);
  max-width: 56ch;
}
.subhero .stat-bar {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: 24px;
  max-width: 920px;
}
.subhero .stat { display: flex; flex-direction: column; gap: 4px; }
.subhero .stat .v {
  font-family: var(--f-display);
  font-size: 32px; font-weight: 600; line-height: 1; color: #fff; letter-spacing: -0.02em;
}
.subhero .stat .l {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
@media (max-width: 760px) {
  .subhero .stat-bar { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ============================================================
   Rent a Boat page — filter + boat grid + comparison + faq
   ============================================================ */
.rab-intro {
  background: var(--white);
  padding: 80px 0 60px;
}
.rab-types {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.rab-type {
  border: 1px solid var(--line);
  padding: 30px 28px;
  border-radius: var(--r);
  display: flex; gap: 22px; align-items: flex-start;
  position: relative;
  background: var(--white);
  transition: border-color .2s, transform .2s;
}
.rab-type:hover { border-color: var(--line-2); transform: translateY(-2px); }
.rab-type .ic { flex: 0 0 auto; color: var(--slate-2); }
.rab-type .ic svg { width: 64px; height: 64px; stroke-width: 1.3; }
.rab-type .info h3 { font-size: 22px; }
.rab-type .info .num { font-family: var(--f-body); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mid); font-weight: 600; margin-top: 4px; display: block; }
.rab-type .info p { margin-top: 12px; font-size: 14.5px; color: var(--slate-3); line-height: 1.5; }
@media (max-width: 900px) { .rab-types { grid-template-columns: 1fr; } }

/* Filter bar */
.rab-filters {
  background: var(--off);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
  position: sticky;
  top: 60px;
  z-index: 30;
}
.rab-filters .row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rab-filters .label { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--slate-3); font-weight: 600; }
.rab-filters .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rab-filters .chip {
  background: var(--white);
  border: 1px solid var(--line-2);
  color: var(--slate-2);
  padding: 8px 14px;
  font-family: var(--f-body); font-size: 13px; font-weight: 500;
  border-radius: var(--r);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.rab-filters .chip:hover, .rab-filters .chip.active {
  background: var(--slate-2); color: #fff; border-color: var(--slate-2);
}
.rab-filters .sep { color: var(--line-2); }

/* Boat grid */
.boats-section {
  background: var(--off);
  padding: 80px 0;
}
.boats-cat {
  margin-bottom: 72px;
}
.boats-cat-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
  margin-bottom: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-2);
}
.boats-cat-head .left { display: flex; flex-direction: column; gap: 6px; }
.boats-cat-head h2 { font-size: clamp(28px, 3.2vw, 42px); }
.boats-cat-head .label-row { display: inline-flex; align-items: center; gap: 12px; }
.boats-cat-head .badge-type {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  border-radius: 4px;
  color: #fff;
}
.boats-cat-head .badge-type.yacht { background: var(--mid); }
.boats-cat-head .badge-type.speed { background: #D9603F; }
.boats-cat-head .badge-type.cat { background: #5B9C7F; }
.boats-cat-head .count { font-family: var(--f-display); font-size: 14px; color: var(--slate-3); font-weight: 600; }

.boat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.boat-card {
  background: var(--white);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .25s ease, border-color .2s;
}
.boat-card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 22px 50px -30px rgba(20,30,46,.4); }
.boat-card .img { aspect-ratio: 4/3; overflow: hidden; position: relative; }
.boat-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.boat-card:hover .img img { transform: scale(1.04); }
.boat-card .img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,28,38,0) 70%, rgba(20,28,38,.45) 100%);
  pointer-events: none;
}
.boat-card .badge-type {
  position: absolute; left: 14px; top: 14px;
  padding: 6px 12px;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  border-radius: 4px;
  color: #fff;
  z-index: 2;
}
.boat-card .badge-type.yacht { background: var(--slate); }
.boat-card .badge-type.speed { background: var(--olive); }
.boat-card .badge-type.cat { background: var(--mid); }
.boat-card .body { padding: 26px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.boat-card .title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.boat-card h3 { font-size: 24px; letter-spacing: -0.025em; }
.boat-card .year { font-size: 12px; color: var(--slate-3); letter-spacing: .12em; font-weight: 600; }
.boat-card .sub { margin-top: 4px; font-size: 13.5px; color: var(--slate-3); letter-spacing: 0.01em; }
.boat-card .specs {
  margin-top: 18px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.boat-card .specs .spec {
  display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center;
  padding: 0 8px;
  border-right: 1px solid var(--line);
}
.boat-card .specs .spec:last-child { border-right: none; }
.boat-card .specs .spec svg { width: 28px; height: 28px; color: var(--olive); stroke-width: 1.5; }
.boat-card .specs .k { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate-3); font-weight: 600; }
.boat-card .specs .v { font-family: var(--f-display); font-size: 17px; font-weight: 700; color: var(--slate); letter-spacing: -0.01em; line-height: 1; }
.boat-card .features {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  font-size: 13px; color: var(--slate-2); font-weight: 500;
}
.boat-card .features span { display: inline-flex; align-items: center; gap: 6px; }
.boat-card .features svg { width: 14px; height: 14px; color: var(--olive); }
.boat-card .ctas {
  margin-top: 22px; display: flex; gap: 10px;
}
.boat-card .ctas .btn { padding: 13px 16px; font-size: 13px; flex: 1; justify-content: center; }
.boat-card .ctas .btn-primary { background: var(--slate); color: #fff; border-color: var(--slate); }
.boat-card .ctas .btn-primary:hover { background: var(--slate-2); border-color: var(--slate-2); }
@media (max-width: 900px) { .boat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .boat-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Individual Boat page
   ============================================================ */

/* Gallery at top of boat page */
.boat-gallery-top {
  padding-top: 100px;
  padding-bottom: 0;
  background: var(--white);
}
.boat-gallery-top .crumbs {
  display: inline-flex; gap: 10px; align-items: center;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--slate-3); margin-bottom: 20px;
}
.boat-gallery-top .crumbs a { color: var(--slate-2); }
.boat-gallery-top .crumbs a:hover { color: var(--olive); }
.boat-gallery-top .crumbs span { opacity: .5; }
.boat-gallery-top .gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 14px;
}
.boat-gallery-top .gallery-grid > a {
  background-size: cover; background-position: center;
  border-radius: var(--r);
  position: relative;
  transition: transform .3s ease;
  overflow: hidden;
}
.boat-gallery-top .gallery-grid > a:first-child { grid-row: 1 / span 2; }
.boat-gallery-top .gallery-grid > a:hover { transform: scale(1.005); }
.boat-gallery-top .gallery-grid .more {
  background: var(--slate-2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  font-family: var(--f-display); font-weight: 600;
}
.boat-gallery-top .gallery-grid .more .n { font-size: 32px; letter-spacing: -0.025em; }
.boat-gallery-top .gallery-grid .more .l { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.7); margin-top: 4px; }
@media (max-width: 800px) {
  .boat-gallery-top { padding-top: 88px; }
  .boat-gallery-top .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .boat-gallery-top .gallery-grid > a:first-child { grid-column: 1 / -1; height: 300px; }
}

/* Old gallery section (still used as deprecated) */
.boat-gallery {
  background: var(--white);
  padding: 60px 0 100px;
}
.boat-gallery .gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 14px;
}
.boat-gallery .gallery-grid > a {
  background-size: cover; background-position: center;
  border-radius: var(--r);
  position: relative;
  transition: transform .3s ease;
  overflow: hidden;
}
.boat-gallery .gallery-grid > a:first-child { grid-row: 1 / span 2; }
.boat-gallery .gallery-grid .more {
  background: var(--slate-2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  font-family: var(--f-display); font-weight: 600;
}
.boat-gallery .gallery-grid .more .n { font-size: 32px; letter-spacing: -0.025em; }
.boat-gallery .gallery-grid .more .l { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.7); margin-top: 4px; }
@media (max-width: 800px) { .boat-gallery .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .boat-gallery .gallery-grid > a:first-child { grid-column: 1 / -1; height: 280px; } }

/* Boat hero (now below gallery) */
.boat-hero {
  background: var(--white);
  padding: 64px 0 0;
}
.boat-hero-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: end;
}
.boat-hero .crumbs { margin-bottom: 18px; color: var(--slate-3); }
.boat-hero .crumbs a { color: var(--slate-2); border-bottom: 1px solid var(--slate-2); padding-bottom: 1px; }
.boat-hero h1 { font-size: clamp(40px, 5vw, 72px); }
.boat-hero .label { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--olive); font-weight: 700; margin-bottom: 14px; }
.boat-hero .tagline { margin-top: 18px; font-size: 19px; color: var(--slate-3); max-width: 60ch; line-height: 1.55; }

/* Icon-led KPI strip */
.boat-kpis-icon {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.boat-kpis-icon .kpi {
  display: flex; gap: 18px; align-items: center;
  padding: 24px 24px 24px 0;
  border-right: 1px solid var(--line);
}
.boat-kpis-icon .kpi:last-child { border-right: none; }
.boat-kpis-icon .kpi .ic {
  width: 48px; height: 48px; flex: 0 0 48px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--olive);
}
.boat-kpis-icon .kpi .ic svg { width: 40px; height: 40px; stroke-width: 1.4; }
.boat-kpis-icon .kpi .meta { display: flex; flex-direction: column; gap: 4px; }
.boat-kpis-icon .kpi .v { font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--slate); line-height: 1; }
.boat-kpis-icon .kpi .l { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--slate-3); font-weight: 500; }
@media (max-width: 900px) { .boat-kpis-icon { grid-template-columns: 1fr 1fr; } .boat-kpis-icon .kpi:nth-child(2) { border-right: none; } .boat-kpis-icon .kpi { padding-right: 16px; } }
.boat-hero .ctas { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Sticky quote sidebar */
.quote-sticky {
  background: var(--slate);
  color: #fff;
  border-radius: var(--r);
  padding: 30px 28px;
  position: sticky; top: 100px;
  display: flex; flex-direction: column; gap: 14px;
}
.quote-sticky .price-large {
  font-family: var(--f-display);
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--sand);
}
.quote-sticky .price-large small { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); font-family: var(--f-body); font-weight: 500; margin-bottom: 8px; }
.quote-sticky .incl { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.85); }
.quote-sticky .btn { width: 100%; justify-content: center; }
.quote-sticky .btn-light { background: var(--sand); color: var(--slate); border-color: var(--sand); }
.quote-sticky .btn-light:hover { background: #fff; border-color: #fff; }
.quote-sticky .alt-wa { color: rgba(255,255,255,.85); font-size: 13px; text-align: center; }
.quote-sticky .alt-wa a { color: var(--sand); border-bottom: 1px solid currentColor; }

/* Photo gallery */
.boat-gallery {
  background: var(--white);
  padding: 60px 0 100px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 14px;
}
.gallery-grid > a {
  background-size: cover; background-position: center;
  border-radius: var(--r);
  position: relative;
  transition: transform .3s ease;
  overflow: hidden;
}
.gallery-grid > a:first-child { grid-row: 1 / span 2; }
.gallery-grid > a:hover { transform: scale(1.005); }
.gallery-grid .more {
  background: var(--slate-2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  font-family: var(--f-display); font-weight: 600;
}
.gallery-grid .more .n { font-size: 32px; letter-spacing: -0.025em; }
.gallery-grid .more .l { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.7); margin-top: 4px; }
@media (max-width: 800px) { .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .gallery-grid > a:first-child { grid-column: 1 / -1; height: 280px; } }

/* Boat split content */
.boat-split {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 60px;
}
.boat-split .col h2 { margin-bottom: 22px; }
.boat-split .col p { margin-top: 12px; color: var(--slate-2); line-height: 1.6; font-size: 16px; max-width: 60ch; }

.specs-table {
  background: var(--off);
  border-radius: var(--r);
  padding: 28px 30px;
}
.specs-table h3 { margin-bottom: 16px; font-size: 18px; }
.specs-table dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
.specs-table dt {
  padding: 14px 0;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-3); font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.specs-table dd {
  padding: 14px 0; margin: 0;
  font-family: var(--f-display); font-size: 16px; font-weight: 600; color: var(--slate);
  border-bottom: 1px solid var(--line);
  text-align: right;
  letter-spacing: -0.01em;
}
.specs-table dt:last-of-type, .specs-table dd:last-of-type { border-bottom: none; }

/* Included list with icons */
.included-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px 30px;
  margin-top: 10px;
}
.included-grid .item { display: flex; gap: 14px; align-items: flex-start; }
.included-grid .item svg { width: 22px; height: 22px; color: var(--mid); flex: 0 0 22px; margin-top: 2px; }
.included-grid .item span { font-size: 14.5px; color: var(--slate-2); line-height: 1.45; }
@media (max-width: 700px) { .included-grid { grid-template-columns: 1fr; } }

/* Itinerary timeline */
.itinerary {
  margin-top: 0;
  background: var(--off);
  padding: 80px 0;
}
.itin-list {
  display: flex; flex-direction: column; gap: 0;
  border-left: 2px solid var(--sand);
  margin-left: 12px;
  padding-left: 32px;
}
.itin-item {
  position: relative;
  padding: 22px 0 22px 0;
  border-bottom: 1px solid var(--line);
}
.itin-item:last-child { border-bottom: none; }
.itin-item::before {
  content: ""; position: absolute;
  left: -41px; top: 28px;
  width: 18px; height: 18px;
  background: var(--sand);
  border-radius: 50%;
  border: 4px solid var(--off);
  box-shadow: 0 0 0 1px var(--sand);
}
.itin-item .t {
  font-family: var(--f-display); font-size: 14px; font-weight: 700;
  color: var(--mid);
  letter-spacing: .04em;
}
.itin-item h4 { margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.itin-item p { margin-top: 6px; font-size: 15px; color: var(--slate-3); line-height: 1.55; max-width: 70ch; }

/* ============================================================
   Blog page
   ============================================================ */
.blog-feed { background: var(--white); padding: 80px 0 100px; }
.blog-categories { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.blog-categories a {
  padding: 8px 14px;
  font-size: 12.5px; font-weight: 500;
  color: var(--slate-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  transition: background .15s, color .15s;
}
.blog-categories a:hover, .blog-categories a.active { background: var(--slate-2); color: #fff; }
.blog-feed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.blog-feed-grid .blog-card .img { aspect-ratio: 16/11; }
.featured-post {
  background: var(--off);
  border-radius: var(--r);
  overflow: hidden;
  display: grid; grid-template-columns: 1.2fr 1fr;
  margin-bottom: 60px;
  align-items: stretch;
}
.featured-post .img { background-size: cover; background-position: center; min-height: 380px; }
.featured-post .info { padding: clamp(36px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.featured-post .info .cat { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mid); font-weight: 700; }
.featured-post .info h2 { margin-top: 16px; }
.featured-post .info p { margin-top: 18px; font-size: 16px; color: var(--slate-2); line-height: 1.55; max-width: 50ch; }
.featured-post .info .meta { margin-top: 22px; font-size: 13px; color: var(--slate-3); }
.featured-post .info .read { margin-top: 28px; }
@media (max-width: 900px) { .blog-feed-grid { grid-template-columns: 1fr; } .featured-post { grid-template-columns: 1fr; } }

/* ============================================================
   Contact page (different look, light-card layout)
   ============================================================ */
.contact-page { background: var(--white); padding: 80px 0 100px; }
.contact-grid {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: start;
}
.contact-form-card {
  background: var(--off);
  border-radius: var(--r);
  padding: 48px 52px;
}
.contact-form-card h2 { margin-bottom: 16px; font-size: clamp(28px, 3vw, 40px); }
.contact-form-card .lead { color: var(--slate-2); margin-bottom: 32px; max-width: 50ch; font-size: 16px; }
.contact-form-card form.inquiry input,
.contact-form-card form.inquiry select,
.contact-form-card form.inquiry textarea {
  color: var(--slate);
  border-bottom-color: var(--line-2);
}
.contact-form-card form.inquiry input::placeholder,
.contact-form-card form.inquiry textarea::placeholder { color: var(--slate-3); }
.contact-form-card form.inquiry input:focus,
.contact-form-card form.inquiry select:focus,
.contact-form-card form.inquiry textarea:focus { border-bottom-color: var(--olive); }
.contact-form-card form.inquiry label { color: var(--slate-3); }
.contact-form-card 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>");
}
.contact-form-card form.inquiry button[type=submit] { background: var(--slate); color: #fff; }
.contact-form-card form.inquiry button[type=submit]:hover { background: var(--olive); }
.contact-form-card form.inquiry .alt { color: var(--slate-3); }
.contact-form-card form.inquiry .alt a { color: var(--slate-2); }

.contact-info-stack { display: flex; flex-direction: column; gap: 16px; }
.contact-info-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 28px;
  display: flex; gap: 18px; align-items: flex-start;
  transition: border-color .2s ease;
}
.contact-info-card:hover { border-color: var(--line-2); }
.contact-info-card .ic {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--olive);
  margin-top: 2px;
}
.contact-info-card .ic svg { width: 32px; height: 32px; stroke-width: 1.5; }
.contact-info-card .body h3 {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--slate-3); font-family: var(--f-body); font-weight: 600;
}
.contact-info-card .body p, .contact-info-card .body a {
  margin-top: 8px;
  font-family: var(--f-display); font-size: 17px; font-weight: 500; color: var(--slate); letter-spacing: -0.005em; line-height: 1.4;
  display: block;
}
.contact-info-card .body small {
  display: block; margin-top: 10px;
  font-size: 13px; color: var(--slate-3); font-family: var(--f-body); font-weight: 400; line-height: 1.5;
}
.contact-info-card .body a:hover { color: var(--olive); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .contact-form-card { padding: 36px 30px; } }

/* ============================================================
   FAQ page
   ============================================================ */
.faq-page { background: var(--off); padding: 80px 0 100px; }
.faq-cats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 56px;
}
.faq-cat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 22px;
  text-align: left;
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.faq-cat:hover { border-color: var(--slate-2); transform: translateY(-3px); }
.faq-cat .ic { color: var(--slate-2); }
.faq-cat .ic svg { width: 44px; height: 44px; stroke-width: 1.3; }
.faq-cat h3 { font-size: 16px; letter-spacing: -0.005em; }
.faq-cat .count { font-size: 12px; color: var(--slate-3); letter-spacing: 0.02em; }
@media (max-width: 900px) { .faq-cats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .faq-cats { grid-template-columns: 1fr; } }

.faq-block { margin-bottom: 60px; }
.faq-block h2 {
  font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line-2);
}

/* ============================================================
   Events page
   ============================================================ */
.events-types { background: var(--white); padding: 80px 0; }
.events-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.event-card {
  background: var(--off);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s ease;
}
.event-card:hover { transform: translateY(-4px); }
.event-card .img { aspect-ratio: 5/4; overflow: hidden; }
.event-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.event-card:hover .img img { transform: scale(1.04); }
.event-card .body { padding: 28px 28px 32px; flex: 1; display: flex; flex-direction: column; }
.event-card .ic { color: var(--slate-2); margin-bottom: 14px; }
.event-card .ic svg { width: 52px; height: 52px; stroke-width: 1.3; }
.event-card h3 { font-size: 24px; }
.event-card p { margin-top: 10px; font-size: 14.5px; color: var(--slate-3); line-height: 1.5; flex: 1; }
.event-card .lk { margin-top: 22px; }
@media (max-width: 900px) { .events-grid { grid-template-columns: 1fr; } }

/* Events how-it-works strip */
.how-strip {
  background: var(--slate-2);
  color: #fff;
  padding: 80px 0;
}
.how-strip h2 { color: #fff; }
.how-strip h2 em { font-style: italic; color: var(--sand); font-weight: 300; }
.how-strip .steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin-top: 50px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.how-strip .step {
  padding: 30px 24px 30px 0;
  border-right: 1px solid rgba(255,255,255,.2);
  display: flex; flex-direction: column; gap: 14px;
}
.how-strip .step:last-child { border-right: none; padding-right: 0; }
.how-strip .step .step-num {
  font-family: var(--f-display);
  font-size: 14px; letter-spacing: .22em;
  color: var(--sand); font-weight: 700;
}
.how-strip .step h4 { color: #fff; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.how-strip .step p { font-size: 14.5px; color: rgba(255,255,255,.78); line-height: 1.55; }
@media (max-width: 900px) { .how-strip .steps { grid-template-columns: 1fr 1fr; } .how-strip .step:nth-child(2) { border-right: none; } }
@media (max-width: 500px) { .how-strip .steps { grid-template-columns: 1fr; } .how-strip .step { border-right: none; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 24px; padding-right: 0; } }


/* ============================================================
   Private Boat Tours hub + category pages + individual tour
   ============================================================ */
.tours-intro { background: var(--white); padding: 80px 0 0; }

.tours-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 22px;
  padding-bottom: 60px;
}
.tours-split .split-card {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  min-height: 360px;
  color: #fff;
  display: flex; align-items: flex-end;
  padding: 38px 40px 40px;
  background-size: cover; background-position: center;
}
.tours-split .split-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,28,38,.1) 0%, rgba(20,28,38,.78) 100%);
}
.tours-split .split-card > * { position: relative; }
.tours-split .split-card .meta-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  padding: 6px 12px;
  background: var(--olive);
  color: #fff;
  border-radius: 4px;
  margin-bottom: 14px;
}
.tours-split .split-card h2 { font-size: clamp(32px, 3.6vw, 48px); color: #fff; letter-spacing: -0.03em; }
.tours-split .split-card p { color: rgba(255,255,255,.85); margin-top: 16px; font-size: 15.5px; line-height: 1.55; max-width: 42ch; }
.tours-split .split-card .lk {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 12px;
  color: #fff; font-size: 14px; font-weight: 600;
  border-bottom: 1px solid var(--sand); padding-bottom: 3px;
  align-self: flex-start;
}
@media (max-width: 800px) { .tours-split { grid-template-columns: 1fr; } }

/* Tour grid - hub & category pages */
.tours-section { padding: 80px 0; background: var(--off); }
.tours-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tour-listing-card {
  background: var(--white);
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  transition: transform .25s, border-color .2s, box-shadow .25s;
}
.tour-listing-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 20px 50px -30px rgba(20,30,46,.4); }
.tour-listing-card .img { aspect-ratio: 16/11; overflow: hidden; position: relative; }
.tour-listing-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.tour-listing-card:hover .img img { transform: scale(1.04); }
.tour-listing-card .duration-tag {
  position: absolute; top: 16px; left: 16px;
  background: rgba(255,255,255,.95);
  color: var(--slate);
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
}
.tour-listing-card .body { padding: 26px 26px 24px; flex: 1; display: flex; flex-direction: column; }
.tour-listing-card h3 { font-size: 24px; letter-spacing: -0.025em; }
.tour-listing-card .meta-row {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  font-size: 12.5px; color: var(--slate-3); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
}
.tour-listing-card .meta-row span { display: inline-flex; align-items: center; gap: 6px; }
.tour-listing-card .meta-row svg { width: 14px; height: 14px; color: var(--olive); }
.tour-listing-card p.desc { margin-top: 14px; font-size: 14.5px; color: var(--slate-2); line-height: 1.5; flex: 1; }
.tour-listing-card .stops {
  margin-top: 16px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.tour-listing-card .stops .pill {
  font-size: 12px; padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--slate-2); font-weight: 500;
}
.tour-listing-card .foot {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.tour-listing-card .price {
  font-family: var(--f-display); font-size: 15px; color: var(--slate-2); font-weight: 600; letter-spacing: -0.01em;
}
.tour-listing-card .price small { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate-3); margin-bottom: 2px; font-family: var(--f-body); font-weight: 600; }
.tour-listing-card .cta-lk { font-size: 13.5px; font-weight: 600; color: var(--mid); display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 1000px) { .tours-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .tours-grid { grid-template-columns: 1fr; } }

/* Individual tour page header */
.tour-hero {
  background: var(--white);
  padding: 96px 0 0;
}
.tour-hero .crumbs {
  display: inline-flex; gap: 10px; align-items: center;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--slate-3); margin-bottom: 20px;
}
.tour-hero .crumbs a { color: var(--slate-2); }
.tour-hero .crumbs a:hover { color: var(--olive); }
.tour-hero .crumbs span { opacity: .5; }

.tour-hero-grid {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 50px;
  align-items: end;
}
.tour-hero .label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--olive); font-weight: 700; margin-bottom: 14px;
}
.tour-hero h1 { font-size: clamp(40px, 5vw, 72px); }
.tour-hero h1 em { font-style: italic; color: var(--olive); font-weight: 300; }
.tour-hero .tagline { margin-top: 18px; font-size: 19px; color: var(--slate-3); max-width: 60ch; line-height: 1.55; }

.tour-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 30px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.tour-kpis .kpi {
  display: flex; gap: 16px; align-items: center;
  padding: 22px 18px 22px 0;
  border-right: 1px solid var(--line);
}
.tour-kpis .kpi:last-child { border-right: none; }
.tour-kpis .kpi .ic { color: var(--olive); flex: 0 0 36px; }
.tour-kpis .kpi .ic svg { width: 36px; height: 36px; stroke-width: 1.4; }
.tour-kpis .kpi .v { font-family: var(--f-display); font-size: 18px; font-weight: 700; color: var(--slate); letter-spacing: -0.015em; line-height: 1; }
.tour-kpis .kpi .l { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--slate-3); margin-top: 4px; font-weight: 600; }
@media (max-width: 900px) { .tour-kpis { grid-template-columns: 1fr 1fr; } .tour-kpis .kpi:nth-child(2) { border-right: none; } }

/* ============================================================
   Yacht Charter Hub — Duration comparison + Included table + Map
   ============================================================ */
.charter-value { background: var(--white); padding: 90px 0 80px; }
.charter-value .vp-grid {
  margin-top: 50px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.charter-value .vp {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 30px 26px 30px 0;
  border-right: 1px solid var(--line);
}
.charter-value .vp:last-child { border-right: none; padding-right: 0; }
.charter-value .vp .ic { flex: 0 0 44px; color: var(--olive); }
.charter-value .vp .ic svg { width: 40px; height: 40px; stroke-width: 1.4; }
.charter-value .vp h4 { font-size: 17px; }
.charter-value .vp p { margin-top: 8px; font-size: 14px; color: var(--slate-3); line-height: 1.55; }
@media (max-width: 900px) { .charter-value .vp-grid { grid-template-columns: 1fr 1fr; } .charter-value .vp:nth-child(2) { border-right: none; } }
@media (max-width: 560px) { .charter-value .vp-grid { grid-template-columns: 1fr; } .charter-value .vp { border-right: none; border-bottom: 1px solid var(--line); } }

.duration-decision { background: var(--off); padding: 90px 0; }
.duration-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.duration-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 36px 32px 32px;
  display: flex; flex-direction: column;
  transition: transform .25s, border-color .2s, box-shadow .25s;
}
.duration-card:hover { transform: translateY(-4px); border-color: var(--slate-2); box-shadow: 0 22px 50px -30px rgba(20,30,46,.4); }
.duration-card.featured {
  border-color: var(--slate);
  background: var(--slate);
  color: #fff;
}
.duration-card.featured h3, .duration-card.featured .num { color: #fff; }
.duration-card .pop-tag {
  position: absolute; top: -14px; left: 28px;
  background: var(--sand);
  color: var(--slate);
  padding: 7px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  border-radius: 4px;
}
.duration-card .num {
  font-family: var(--f-display);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  color: var(--mid);
}
.duration-card h3 {
  margin-top: 14px;
  font-size: 36px; line-height: 1; letter-spacing: -0.035em;
}
.duration-card h3 em { font-style: italic; font-weight: 300; color: var(--sand); }
.duration-card .route {
  margin-top: 18px;
  font-size: 14px; line-height: 1.5;
  color: var(--slate-2);
}
.duration-card.featured .route { color: rgba(255,255,255,.85); }
.duration-card .best-for {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--off);
  border-radius: var(--r);
  font-size: 13px; color: var(--slate-2);
}
.duration-card.featured .best-for { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); }
.duration-card .best-for strong { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--slate-3); margin-bottom: 4px; }
.duration-card.featured .best-for strong { color: var(--sand); }
.duration-card .price {
  margin-top: auto; padding-top: 24px;
  display: flex; align-items: end; gap: 10px;
}
.duration-card .price .v { font-family: var(--f-display); font-size: 22px; font-weight: 600; color: var(--slate); letter-spacing: -0.02em; }
.duration-card.featured .price .v { color: var(--sand); }
.duration-card .price .l { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--slate-3); font-weight: 600; padding-bottom: 3px; }
.duration-card.featured .price .l { color: rgba(255,255,255,.7); }
.duration-card .see {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 600; color: var(--mid);
  border-bottom: 1px solid var(--mid); padding-bottom: 3px;
  align-self: flex-start;
}
.duration-card.featured .see { color: var(--sand); border-bottom-color: var(--sand); }
@media (max-width: 900px) { .duration-grid { grid-template-columns: 1fr; } }

/* Charter fleet cards (compact) */
.charter-fleet { background: var(--white); padding: 90px 0; }
.cf-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.cf-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s, border-color .2s, box-shadow .25s;
}
.cf-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 20px 50px -30px rgba(20,30,46,.4); }
.cf-card .img { aspect-ratio: 4/3; overflow: hidden; }
.cf-card .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.cf-card:hover .img img { transform: scale(1.04); }
.cf-card .body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.cf-card .label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--olive); font-weight: 700; }
.cf-card h3 { font-size: 24px; }
.cf-card .sub { font-size: 14px; color: var(--slate-3); }
.cf-card .row {
  margin-top: 8px; padding-top: 16px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
.cf-card .row div { display: flex; flex-direction: column; gap: 4px; }
.cf-card .row .k { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate-3); font-weight: 600; }
.cf-card .row .v { font-family: var(--f-display); font-size: 15px; color: var(--slate); font-weight: 600; letter-spacing: -0.01em; }
.cf-card .lk {
  margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--mid);
  display: inline-flex; align-items: center; gap: 8px;
}
@media (max-width: 1000px) { .cf-grid { grid-template-columns: 1fr; } }

.cf-callout {
  margin-top: 30px;
  background: var(--off);
  border-radius: var(--r);
  padding: 24px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap;
}
.cf-callout .t { font-family: var(--f-display); font-size: 18px; font-weight: 600; color: var(--slate); }
.cf-callout .t small { display: block; font-size: 13px; color: var(--slate-3); font-weight: 400; margin-top: 4px; font-family: var(--f-body); }

/* Included / Mandatory / Optional 3-col table */
.incl-3col { background: var(--off); padding: 90px 0; }
.incl-grid {
  margin-top: 50px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.incl-col {
  background: var(--white);
  border-radius: var(--r);
  padding: 36px 32px 32px;
  border: 1px solid var(--line);
  position: relative;
}
.incl-col.included { border-top: 4px solid var(--olive); }
.incl-col.mandatory { border-top: 4px solid var(--mid); }
.incl-col.optional { border-top: 4px solid var(--sand); }
.incl-col h3 { font-size: 22px; }
.incl-col .tag {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
  display: inline-block;
}
.incl-col.included .tag { color: var(--olive); }
.incl-col.mandatory .tag { color: var(--mid); }
.incl-col.optional .tag { color: var(--sand); }
.incl-col ul { list-style: none; padding: 0; margin: 24px 0 0; }
.incl-col ul li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px; color: var(--slate-2);
}
.incl-col ul li:last-child { border-bottom: none; }
.incl-col ul li svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; }
.incl-col.included ul li svg { color: var(--olive); }
.incl-col.mandatory ul li svg { color: var(--mid); }
.incl-col.optional ul li svg { color: var(--sand); }
@media (max-width: 1000px) { .incl-grid { grid-template-columns: 1fr; } }

/* Sample route map */
.route-map { background: var(--white); padding: 90px 0; }
.route-vis {
  margin-top: 40px;
  background: var(--off);
  border-radius: var(--r);
  padding: 56px 48px;
  position: relative;
}
.route-vis svg.map { width: 100%; height: auto; }
.route-vis .island-grid {
  margin-top: 26px;
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  border-top: 1px solid var(--line-2);
  padding-top: 24px;
}
.route-vis .island {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding-right: 12px;
  border-right: 1px solid var(--line);
}
.route-vis .island:last-child { border-right: none; }
.route-vis .island .n { font-family: var(--f-display); font-size: 15px; font-weight: 600; color: var(--slate); letter-spacing: -0.01em; }
.route-vis .island .l { font-size: 11px; color: var(--slate-3); letter-spacing: .12em; text-transform: uppercase; font-weight: 500; }
.route-vis .teaser-row {
  margin-top: 30px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.route-vis .teaser {
  padding: 22px 22px;
  background: var(--white);
  border-radius: var(--r);
  border-left: 3px solid var(--sand);
}
.route-vis .teaser .d { font-family: var(--f-display); font-size: 15px; color: var(--mid); font-weight: 700; letter-spacing: .04em; }
.route-vis .teaser p { margin-top: 8px; font-size: 14px; color: var(--slate-2); line-height: 1.5; }
@media (max-width: 900px) { .route-vis .island-grid { grid-template-columns: repeat(2, 1fr); } .route-vis .island { border-right: none; border-bottom: 1px solid var(--line); padding-bottom: 8px; } .route-vis .teaser-row { grid-template-columns: 1fr; } }

/* ============================================================
   Day Trips Hub — Half/Full split, Tailor-made callout
   ============================================================ */
.dt-segment { background: var(--off); padding: 90px 0; }
.dt-segment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 48px; }
.dt-seg-card {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  min-height: 380px;
  color: #fff;
  display: flex; align-items: flex-end;
  padding: 40px 44px;
  background-size: cover; background-position: center;
}
.dt-seg-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,28,38,.1) 0%, rgba(20,28,38,.82) 100%);
}
.dt-seg-card > * { position: relative; z-index: 2; }
.dt-seg-card .meta {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  color: var(--sand); margin-bottom: 14px;
  display: inline-block;
}
.dt-seg-card h3 { color: #fff; font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.035em; }
.dt-seg-card p { color: rgba(255,255,255,.88); margin-top: 16px; font-size: 15.5px; line-height: 1.55; max-width: 42ch; }
.dt-seg-card .lk {
  margin-top: 26px;
  display: inline-flex; align-items: center; gap: 12px;
  color: #fff; font-size: 14px; font-weight: 600;
  border-bottom: 1px solid var(--sand); padding-bottom: 3px;
  align-self: flex-start;
}
@media (max-width: 800px) { .dt-segment-grid { grid-template-columns: 1fr; } }

/* Tailor-made callout banner */
.dt-tailor-banner {
  background: var(--slate);
  padding: 80px 0;
  color: #fff;
}
.dt-tailor-banner .inner {
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: center;
}
.dt-tailor-banner h2 { color: #fff; }
.dt-tailor-banner h2 em { font-style: italic; color: var(--sand); font-weight: 300; }
.dt-tailor-banner p { color: rgba(255,255,255,.85); margin-top: 20px; font-size: 17px; line-height: 1.55; max-width: 50ch; }
.dt-tailor-banner .ctas {
  display: flex; flex-direction: column; gap: 18px;
}
.dt-tailor-banner .btn-light {
  background: var(--sand); color: var(--slate); border-color: var(--sand);
  padding: 18px 26px; font-size: 15px;
  justify-content: space-between;
}
.dt-tailor-banner .btn-light:hover { background: #fff; border-color: #fff; }
.dt-tailor-banner .ctas .alt {
  color: rgba(255,255,255,.75); font-size: 14px; text-align: center;
}
.dt-tailor-banner .ctas .alt a { color: var(--sand); border-bottom: 1px solid currentColor; }
@media (max-width: 800px) { .dt-tailor-banner .inner { grid-template-columns: 1fr; gap: 30px; } }

/* Why private day trip */
.why-private { background: var(--white); padding: 90px 0; }
.why-private .why-grid {
  margin-top: 50px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.why-private .why-item {
  padding: 28px 0 0;
  border-top: 1px solid var(--line-2);
}
.why-private .why-item .ic { color: var(--olive); margin-bottom: 16px; }
.why-private .why-item .ic svg { width: 40px; height: 40px; stroke-width: 1.4; }
.why-private .why-item h4 { font-size: 18px; }
.why-private .why-item p { margin-top: 10px; font-size: 14.5px; color: var(--slate-3); line-height: 1.55; }
@media (max-width: 900px) { .why-private .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-private .why-grid { grid-template-columns: 1fr; } }

/* Tag with country / passport flag on trip card */
.tour-listing-card .passport {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.95);
  color: var(--mid);
  padding: 5px 9px;
  border-radius: 4px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  position: absolute; top: 16px; right: 16px;
}
.tour-listing-card .passport svg { width: 12px; height: 12px; }

/* ============================================================
   Tailor-Made — Build-your-trip form, examples, etc.
   ============================================================ */
.tm-intro { background: var(--white); padding: 90px 0 0; }
.tm-intro .three-step {
  margin-top: 60px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-2);
}
.tm-intro .three-step .step {
  padding: 36px 30px 36px 0;
  border-right: 1px solid var(--line);
  display: flex; gap: 20px; align-items: flex-start;
}
.tm-intro .three-step .step:last-child { border-right: none; padding-right: 0; }
.tm-intro .three-step .n {
  font-family: var(--f-display); font-size: 36px; font-weight: 600; color: var(--sand);
  line-height: 1; letter-spacing: -0.025em;
  flex: 0 0 auto;
}
.tm-intro .three-step .step h4 { font-size: 20px; }
.tm-intro .three-step .step p { margin-top: 10px; font-size: 14.5px; color: var(--slate-3); line-height: 1.55; }
@media (max-width: 900px) { .tm-intro .three-step { grid-template-columns: 1fr; } .tm-intro .three-step .step { border-right: none; border-bottom: 1px solid var(--line); padding-right: 0; } }

/* Example itineraries */
.tm-examples { background: var(--off); padding: 90px 0; }
.tm-examples-grid {
  margin-top: 50px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.tm-example {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s, border-color .2s, box-shadow .25s;
}
.tm-example:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 18px 40px -28px rgba(20,30,46,.4); }
.tm-example .img { aspect-ratio: 4/3; overflow: hidden; }
.tm-example .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.tm-example:hover .img img { transform: scale(1.04); }
.tm-example .body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.tm-example .label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--mid); font-weight: 700; }
.tm-example h4 { margin-top: 10px; font-size: 19px; letter-spacing: -0.015em; line-height: 1.2; }
.tm-example p { margin-top: 10px; font-size: 13.5px; color: var(--slate-3); line-height: 1.5; flex: 1; }
.tm-example .start {
  margin-top: 16px;
  font-size: 12.5px; font-weight: 600; color: var(--olive);
  display: inline-flex; align-items: center; gap: 8px;
}
@media (max-width: 900px) { .tm-examples-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tm-examples-grid { grid-template-columns: 1fr; } }

/* Build your trip form */
.tm-form-section { background: var(--white); padding: 90px 0; }
.tm-form-shell {
  background: var(--off);
  border-radius: var(--r);
  padding: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: 1fr 360px;
  gap: 50px;
}
.tm-form-shell .side-card {
  background: var(--slate);
  color: #fff;
  border-radius: var(--r);
  padding: 28px 28px;
  height: fit-content;
  position: sticky; top: 100px;
}
.tm-form-shell .side-card h4 { color: #fff; font-size: 18px; }
.tm-form-shell .side-card .lead { color: rgba(255,255,255,.85); margin-top: 14px; font-size: 14.5px; }
.tm-form-shell .side-card .rep { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.85); }
.tm-form-shell .side-card .rep svg { width: 16px; height: 16px; color: var(--sand); }
.tm-form-shell .side-card .wa {
  margin-top: 18px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: #25D366; color: #fff;
  border-radius: var(--r);
  font-weight: 600; font-size: 14px;
  justify-content: center;
}
.tm-form-shell .side-card .wa svg { width: 18px; height: 18px; }
.tm-form-shell .side-card .price-note {
  margin-top: 22px; padding: 14px 16px;
  background: rgba(159,143,110,.18);
  border-radius: var(--r);
  font-size: 13px;
  color: rgba(255,255,255,.85);
}
.tm-form-shell .side-card .price-note strong { display: block; color: var(--sand); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 6px; font-weight: 700; }

.tm-form {
  display: grid; gap: 26px;
}
.tm-form .field-group { display: grid; gap: 10px; }
.tm-form label.lbl {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-3); font-weight: 600;
}
.tm-form input[type=text],
.tm-form input[type=email],
.tm-form input[type=tel],
.tm-form input[type=number],
.tm-form input[type=date],
.tm-form select,
.tm-form textarea {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--slate);
  border-radius: var(--r);
  padding: 14px 16px;
  font: inherit;
  transition: border-color .2s;
}
.tm-form input:focus, .tm-form select:focus, .tm-form textarea:focus { border-color: var(--olive); outline: none; }
.tm-form textarea { min-height: 100px; resize: vertical; }
.tm-form .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tm-form .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.tm-form .chip-set { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-form .chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--slate-2);
  cursor: pointer;
  user-select: none;
  transition: all .15s;
}
.tm-form .chip input { display: none; }
.tm-form .chip svg { width: 14px; height: 14px; color: var(--slate-3); }
.tm-form .chip:hover { border-color: var(--slate-2); }
.tm-form .chip.is-on, .tm-form .chip:has(input:checked) {
  background: var(--slate);
  border-color: var(--slate);
  color: #fff;
}
.tm-form .chip.is-on svg, .tm-form .chip:has(input:checked) svg { color: var(--sand); }

.tm-form .pace-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tm-form .pace {
  flex: 1;
  padding: 16px 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--white);
  cursor: pointer;
  transition: all .15s;
}
.tm-form .pace input { display: none; }
.tm-form .pace strong { display: block; font-family: var(--f-display); font-size: 15px; color: var(--slate); }
.tm-form .pace small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--slate-3); }
.tm-form .pace:has(input:checked) {
  border-color: var(--olive);
  background: rgba(132,117,88,.06);
}
.tm-form .pace:has(input:checked) strong { color: var(--olive); }

.tm-form .check-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.tm-form .check {
  display: flex; gap: 10px; align-items: center;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 13.5px; color: var(--slate-2);
  cursor: pointer;
  transition: all .15s;
}
.tm-form .check input { accent-color: var(--olive); width: 16px; height: 16px; }
.tm-form .check:has(input:checked) {
  border-color: var(--olive);
  background: rgba(132,117,88,.06);
  color: var(--slate);
}

.tm-form .submit-bar {
  margin-top: 8px;
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.tm-form .submit-bar button {
  background: var(--slate);
  color: #fff;
  border: 0;
  padding: 18px 28px;
  font-family: var(--f-display); font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--r);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px;
  transition: background .2s, transform .15s;
}
.tm-form .submit-bar button:hover { background: var(--olive); transform: translateY(-1px); }
.tm-form .submit-bar .note { font-size: 13px; color: var(--slate-3); }
.tm-form .submit-bar .note strong { color: var(--olive); }

@media (max-width: 1000px) { .tm-form-shell { grid-template-columns: 1fr; } .tm-form-shell .side-card { position: static; } .tm-form .row-2, .tm-form .row-3 { grid-template-columns: 1fr; } .tm-form .check-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tm-form .check-grid { grid-template-columns: 1fr; } }

/* Tailor-made Always Included */
.tm-included { background: var(--off); padding: 80px 0; }
.tm-incl-grid {
  margin-top: 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.tm-incl-col {
  background: var(--white);
  border-radius: var(--r);
  padding: 32px 32px;
}
.tm-incl-col.yes { border-top: 4px solid var(--olive); }
.tm-incl-col.no { border-top: 4px solid var(--slate-3); }
.tm-incl-col h3 { font-size: 20px; }
.tm-incl-col ul { list-style: none; padding: 0; margin: 20px 0 0; }
.tm-incl-col li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--slate-2); }
.tm-incl-col li:last-child { border-bottom: none; }
.tm-incl-col li svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; }
.tm-incl-col.yes li svg { color: var(--olive); }
.tm-incl-col.no li svg { color: var(--slate-3); }
.tm-incl-col .rates {
  margin-top: 22px; padding: 16px 18px;
  background: var(--off);
  border-radius: var(--r);
  font-size: 13px; color: var(--slate-2);
}
.tm-incl-col .rates strong { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--slate-3); margin-bottom: 6px; font-weight: 700; }
@media (max-width: 760px) { .tm-incl-grid { grid-template-columns: 1fr; } }

/* FAQ accordion (reusable, light bg) — matches the homepage .ct3-q FAQ */
.faq-block-light { background: var(--white); padding: 80px 0; }
.faq-accordion {
  margin-top: clamp(30px, 3vw, 44px);
  border-top: 2px solid rgba(44, 55, 68, .5);
}
.faq-accordion details {
  border-bottom: 2px solid rgba(44, 55, 68, .5);
  padding: 0;
}
.faq-accordion summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(22px, 2.4vw, 28px) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(19px, 1.7vw, 26px); letter-spacing: -0.02em;
  color: var(--slate); transition: color .2s ease;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary:hover,
.faq-accordion details[open] summary { color: var(--mid, #3a4654); }
.faq-accordion summary::after {
  content: "+";
  flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--line-2, rgba(71, 82, 97, .28));
  display: grid; place-items: center;
  font-family: var(--f-body); font-weight: 400; font-size: 21px; line-height: 1;
  color: var(--slate-2);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .25s ease;
}
.faq-accordion summary:hover::after { border-color: var(--slate-2); }
.faq-accordion details[open] summary::after {
  content: "–"; background: var(--brass, #C19A4D); border-color: var(--brass, #C19A4D); color: #2A2008;
}
.faq-accordion .answer {
  padding: 0 0 28px 0;
  font-size: clamp(15px, 1.2vw, 16.5px); color: var(--slate-2); line-height: 1.65;
  max-width: 70ch; text-wrap: pretty;
}

/* faq.html (.faq-group .faq-item) — matched to the same homepage look */
.faq-group .faq-item { border-bottom: 2px solid rgba(44, 55, 68, .5) !important; padding: 0 !important; }
.faq-group .faq-item summary {
  padding: clamp(20px, 2.2vw, 26px) 0; gap: 28px;
  font-family: var(--f-display); font-weight: 800 !important;
  font-size: clamp(18px, 1.6vw, 24px) !important; letter-spacing: -0.02em; color: var(--slate);
  transition: color .2s ease;
}
.faq-group .faq-item[open] summary,
.faq-group .faq-item summary:hover { color: var(--mid, #3a4654); }
.faq-group .faq-item .marker {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--line-2, rgba(71, 82, 97, .28));
  transition: background .2s ease, border-color .2s ease, transform .25s ease;
}
.faq-group .faq-item .marker::before { width: 12px !important; height: 1.6px !important; background: var(--slate-2) !important; }
.faq-group .faq-item .marker::after { width: 1.6px !important; height: 12px !important; background: var(--slate-2) !important; }
.faq-group .faq-item[open] .marker { background: var(--brass, #C19A4D); border-color: var(--brass, #C19A4D); }
.faq-group .faq-item[open] .marker::before,
.faq-group .faq-item[open] .marker::after { background: #2A2008 !important; }
.faq-group .faq-item[open] .marker::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-group .faq-item .answer { margin-top: 0; padding: 0 0 26px; font-size: clamp(15px, 1.2vw, 16.5px); line-height: 1.65; color: var(--slate-2); max-width: 74ch; }

/* Tour gallery - same as boat gallery-top */
.tour-gallery { background: var(--off); padding: 60px 0 80px; }
.tour-gallery .gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 14px;
}
.tour-gallery .gallery-grid > a {
  background-size: cover; background-position: center;
  border-radius: var(--r);
  position: relative;
  overflow: hidden;
}
.tour-gallery .gallery-grid > a:first-child { grid-row: 1 / span 2; }
.tour-gallery .gallery-grid .more {
  background: var(--slate-2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  font-family: var(--f-display); font-weight: 600;
}
.tour-gallery .gallery-grid .more .n { font-size: 32px; letter-spacing: -0.025em; }
.tour-gallery .gallery-grid .more .l { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.7); margin-top: 4px; }
@media (max-width: 800px) { .tour-gallery .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .tour-gallery .gallery-grid > a:first-child { grid-column: 1 / -1; height: 280px; } }


/* ============================================================
   Events hub & leaf event pages (IA-07 ─ IA-12)
   ============================================================ */

/* Trust strip below hero */
.ev-trust { background: var(--white); border-bottom: 1px solid var(--line); padding: 26px 0; }
.ev-trust .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; align-items: center; }
.ev-trust .cell { display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--slate-2); letter-spacing: 0.01em; }
.ev-trust .cell svg { width: 24px; height: 24px; color: var(--sand); flex: 0 0 24px; }
.ev-trust .cell strong { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--slate); display: block; }
.ev-trust .cell small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-3); font-weight: 500; }
@media (max-width: 900px) { .ev-trust .row { grid-template-columns: 1fr 1fr; gap: 18px 22px; } }
@media (max-width: 520px) { .ev-trust .row { grid-template-columns: 1fr; } }

/* Events hub event-card improvements - keep existing but add chip */
.event-card .chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  padding: 6px 12px; background: var(--white); color: var(--slate-2);
  border-radius: 4px; align-self: flex-start; margin-bottom: 14px;
  border: 1px solid var(--line);
}

/* Always-included icon band */
.included-band { background: var(--off); padding: 80px 0; }
.included-band .icon-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 44px;
  border: 1px solid var(--line);
  background: var(--white);
}
.included-band .icon-row .it {
  padding: 28px 24px; display: flex; flex-direction: column; gap: 12px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.included-band .icon-row .it:nth-child(4n) { border-right: none; }
.included-band .icon-row .it:nth-last-child(-n+4) { border-bottom: none; }
.included-band .icon-row .it svg { width: 38px; height: 38px; color: var(--slate-2); stroke-width: 1.3; }
.included-band .icon-row .it strong { font-family: var(--f-display); font-weight: 600; font-size: 15.5px; color: var(--slate); }
.included-band .icon-row .it small { font-size: 13px; color: var(--slate-3); line-height: 1.5; }
.included-band .foot-note { margin-top: 18px; font-size: 13px; color: var(--slate-3); letter-spacing: 0.01em; }
@media (max-width: 900px) {
  .included-band .icon-row { grid-template-columns: 1fr 1fr; }
  .included-band .icon-row .it { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
  .included-band .icon-row .it:nth-child(2n) { border-right: none !important; }
  .included-band .icon-row .it:nth-last-child(-n+2) { border-bottom: none !important; }
}
@media (max-width: 560px) {
  .included-band .icon-row { grid-template-columns: 1fr; }
  .included-band .icon-row .it { border-right: none !important; }
}

/* Fleet teaser cards (3 boat-type cards) */
.fleet-teaser { background: var(--white); padding: 90px 0; }
.fleet-teaser .ft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.fleet-teaser .ft-card {
  position: relative; border-radius: var(--r); overflow: hidden;
  background: var(--off); display: flex; flex-direction: column;
}
.fleet-teaser .ft-card .img { aspect-ratio: 4/3; background-size: cover; background-position: center; }
.fleet-teaser .ft-card .body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fleet-teaser .ft-card .type {
  font-family: var(--f-body); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--slate-3); font-weight: 600;
}
.fleet-teaser .ft-card h3 { font-size: 22px; }
.fleet-teaser .ft-card .seats { font-size: 13.5px; color: var(--slate-3); font-family: var(--f-display); font-weight: 500; }
.fleet-teaser .ft-card p { font-size: 14.5px; color: var(--slate-2); line-height: 1.5; margin-top: 6px; flex: 1; }
.fleet-teaser .ft-card .lk { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; color: var(--slate-2); font-size: 13.5px; font-weight: 600; border-bottom: 1px solid var(--slate-2); padding-bottom: 3px; align-self: flex-start; }
@media (max-width: 900px) { .fleet-teaser .ft-grid { grid-template-columns: 1fr; } }

/* Add-ons teaser strip (hub + event pages) */
.addons-teaser { background: var(--sand-2); padding: 90px 0; }
.addons-teaser .at-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.addons-teaser .at-card {
  background: var(--white); border-radius: var(--r); padding: 28px 28px 30px;
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
}
.addons-teaser .at-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(44,55,68,.08); }
.addons-teaser .at-card .ic { color: var(--olive); }
.addons-teaser .at-card .ic svg { width: 40px; height: 40px; stroke-width: 1.3; }
.addons-teaser .at-card h4 { font-size: 19px; }
.addons-teaser .at-card p { font-size: 14px; color: var(--slate-3); line-height: 1.55; flex: 1; }
.addons-teaser .at-card .price-pill {
  align-self: flex-start;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700;
  padding: 5px 10px; background: var(--off); color: var(--slate-2); border-radius: 4px;
}
.addons-teaser .at-foot { margin-top: 30px; text-align: center; }
@media (max-width: 900px) { .addons-teaser .at-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Event leaf page (Birthdays, Bachelor, Engagements, etc)
   ============================================================ */

/* Event hero - photo + content side-by-side */
.event-hero { background: var(--off); padding-top: 96px; }
.event-hero .eh-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; align-items: stretch; min-height: 540px; }
.event-hero .eh-img { background-size: cover; background-position: center; min-height: 420px; }
.event-hero .eh-body { background: var(--slate); color: #fff; padding: 56px 56px 56px; display: flex; flex-direction: column; justify-content: center; }
.event-hero .crumbs { color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 22px; font-weight: 500; }
.event-hero .crumbs a { color: rgba(255,255,255,.7); border-bottom: 1px solid transparent; padding-bottom: 2px; }
.event-hero .crumbs a:hover { color: var(--sand); border-color: var(--sand); }
.event-hero .crumbs span { opacity: .5; margin: 0 8px; }
.event-hero .label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  padding: 6px 12px; background: var(--sand); color: var(--slate); border-radius: 4px;
  align-self: flex-start; margin-bottom: 22px;
}
.event-hero h1 { color: #fff; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 600; }
.event-hero h1 em { font-style: italic; color: var(--sand); font-weight: 300; }
.event-hero .tagline { margin-top: 22px; color: rgba(255,255,255,.85); font-size: 18px; line-height: 1.5; max-width: 50ch; }
.event-hero .key-facts {
  margin-top: 36px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding: 22px 0;
}
.event-hero .key-facts .kf { padding-right: 14px; border-right: 1px solid rgba(255,255,255,.18); display: flex; flex-direction: column; gap: 4px; }
.event-hero .key-facts .kf:last-child { border-right: none; }
.event-hero .key-facts .kf small { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.65); font-weight: 600; }
.event-hero .key-facts .kf strong { font-family: var(--f-display); font-weight: 600; font-size: 17px; color: #fff; letter-spacing: -0.01em; }
.event-hero .eh-ctas { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.event-hero .btn-primary { background: var(--sand); color: var(--slate); border-color: var(--sand); }
.event-hero .btn-primary:hover { background: #fff; border-color: #fff; }
@media (max-width: 1000px) {
  .event-hero .eh-wrap { grid-template-columns: 1fr; }
  .event-hero .eh-body { padding: 40px 28px; }
  .event-hero .key-facts { grid-template-columns: 1fr 1fr; gap: 14px 0; }
  .event-hero .key-facts .kf:nth-child(2) { border-right: none; }
}

/* Overview narrative + sidebar */
.ev-overview { background: var(--white); padding: 90px 0; }
.ev-overview .layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 60px; align-items: start; }
.ev-overview .body p { margin-top: 14px; color: var(--slate-2); line-height: 1.65; font-size: 16.5px; max-width: 60ch; }
.ev-overview .body p:first-of-type { margin-top: 0; }
.ev-overview .side .pic { aspect-ratio: 4/5; background-size: cover; background-position: center; border-radius: var(--r); overflow: hidden; }
.ev-overview .side .quote-card {
  margin-top: 22px; background: var(--off); padding: 28px 30px; border-radius: var(--r);
  font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.45;
  color: var(--slate); border-left: 3px solid var(--sand);
}
.ev-overview .side .quote-card cite { display: block; margin-top: 14px; font-style: normal; font-family: var(--f-body); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-3); font-weight: 600; }
@media (max-width: 900px) { .ev-overview .layout { grid-template-columns: 1fr; gap: 40px; } }

/* "Who it's for" + "The experience" combined */
.ev-experience { background: var(--off); padding: 90px 0; }
.ev-experience .layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 44px; }
.ev-experience .block h3 { font-size: 22px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }
.ev-experience .block h3 svg { width: 26px; height: 26px; color: var(--sand); }
.ev-experience .block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.ev-experience .block ul li { display: flex; gap: 14px; align-items: flex-start; font-size: 15.5px; color: var(--slate-2); line-height: 1.55; }
.ev-experience .block ul li::before {
  content: ""; flex: 0 0 6px; width: 6px; height: 6px; background: var(--sand); border-radius: 50%; margin-top: 9px;
}
.ev-experience .timeline { list-style: none; padding: 0; margin: 0; }
.ev-experience .timeline li {
  display: grid; grid-template-columns: 90px 1fr; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.ev-experience .timeline li:last-child { border-bottom: none; }
.ev-experience .timeline .t { font-family: var(--f-display); font-weight: 600; font-size: 14px; color: var(--sand); letter-spacing: 0.1em; text-transform: uppercase; padding-top: 2px; }
.ev-experience .timeline strong { font-family: var(--f-display); font-size: 16px; color: var(--slate); display: block; margin-bottom: 2px; }
.ev-experience .timeline small { font-size: 14px; color: var(--slate-3); line-height: 1.5; }
@media (max-width: 900px) { .ev-experience .layout { grid-template-columns: 1fr; gap: 40px; } }

/* Mid-page enquiry CTA - 2 columns: form + reassurance */
.ev-enquiry { background: var(--slate); color: #fff; padding: 90px 0; }
.ev-enquiry h2 { color: #fff; }
.ev-enquiry h2 em { color: var(--sand); font-weight: 300; font-style: italic; }
.ev-enquiry .layout { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 44px; }
.ev-enquiry form label { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 6px; font-weight: 600; }
.ev-enquiry form input, .ev-enquiry form select, .ev-enquiry form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05); color: #fff; border-radius: 4px; font-family: var(--f-body); font-size: 15px;
}
.ev-enquiry form textarea { min-height: 100px; resize: vertical; }
.ev-enquiry form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ev-enquiry form > div { margin-bottom: 14px; }
.ev-enquiry form .addon-checks {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px;
  background: rgba(255,255,255,.04); padding: 18px 18px; border-radius: 4px;
}
.ev-enquiry form .addon-checks label { font-size: 13px; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.92); margin: 0; display: inline-flex; align-items: center; gap: 10px; font-weight: 400; cursor: pointer; }
.ev-enquiry form .addon-checks input { width: 18px; height: 18px; accent-color: var(--sand); padding: 0; flex: 0 0 18px; }
.ev-enquiry form button {
  margin-top: 8px; padding: 16px 26px; background: var(--sand); color: var(--slate);
  border: none; border-radius: 4px; font-weight: 700; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 12px; letter-spacing: 0.02em;
}
.ev-enquiry form button:hover { background: #fff; }
.ev-enquiry .reassure { display: flex; flex-direction: column; gap: 22px; }
.ev-enquiry .reassure .item { display: flex; gap: 18px; align-items: flex-start; }
.ev-enquiry .reassure .item .ic {
  flex: 0 0 44px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sand); color: var(--slate); border-radius: 50%;
}
.ev-enquiry .reassure .item strong { font-family: var(--f-display); font-weight: 600; font-size: 17px; color: #fff; display: block; margin-bottom: 4px; }
.ev-enquiry .reassure .item p { font-size: 14.5px; color: rgba(255,255,255,.78); line-height: 1.55; }
.ev-enquiry .reassure .wa-cta {
  margin-top: 6px; padding: 18px 22px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18); border-radius: 4px;
  display: flex; align-items: center; gap: 14px;
}
.ev-enquiry .reassure .wa-cta svg { width: 28px; height: 28px; color: var(--sand); flex: 0 0 28px; }
.ev-enquiry .reassure .wa-cta a { color: #fff; font-weight: 600; border-bottom: 1px solid var(--sand); padding-bottom: 2px; }
@media (max-width: 900px) { .ev-enquiry .layout { grid-template-columns: 1fr; gap: 40px; } .ev-enquiry form .addon-checks { grid-template-columns: 1fr; } }

/* Related occasions - 3 thin cards */
.ev-related { background: var(--white); padding: 90px 0; }
.ev-related .rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.ev-related .rel { position: relative; border-radius: var(--r); overflow: hidden; min-height: 280px; display: flex; align-items: flex-end; padding: 26px 28px 28px; color: #fff; background-size: cover; background-position: center; }
.ev-related .rel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,28,38,.05) 0%, rgba(20,28,38,.82) 100%); }
.ev-related .rel > * { position: relative; }
.ev-related .rel h4 { color: #fff; font-size: 24px; }
.ev-related .rel p { color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.5; margin-top: 6px; max-width: 32ch; }
.ev-related .rel .lk { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--sand); padding-bottom: 3px; align-self: flex-start; }
@media (max-width: 900px) { .ev-related .rel-grid { grid-template-columns: 1fr; } }

/* Sticky bottom event bar (mobile-leaning, desktop visible too) */
.sticky-event-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--slate); color: #fff;
  padding: 12px 18px;
  display: none;
  align-items: center; gap: 14px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.18);
}
.sticky-event-bar.is-visible { display: flex; }
.sticky-event-bar .price { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--sand); flex: 1; }
.sticky-event-bar .price small { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); font-family: var(--f-body); font-weight: 500; }
.sticky-event-bar a.wa { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 4px; font-size: 13.5px; font-weight: 600; }
.sticky-event-bar a.wa svg { width: 18px; height: 18px; }
.sticky-event-bar a.cta { padding: 12px 18px; background: var(--sand); color: var(--slate); border-radius: 4px; font-size: 13.5px; font-weight: 700; }
@media (max-width: 700px) { .sticky-event-bar .price small { font-size: 9px; } .sticky-event-bar a.wa span { display: none; } }

/* ============================================================
   Water Sports & Add-Ons page
   ============================================================ */

/* Water toys catalogue - card with image + price */
.ws-catalogue { background: var(--white); padding: 90px 0; }
.ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; }
.ws-card {
  background: var(--off); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.ws-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(44,55,68,.10); }
.ws-card .img { aspect-ratio: 4/3; background-size: cover; background-position: center; position: relative; }
.ws-card .img .tag {
  position: absolute; top: 14px; left: 14px;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  padding: 6px 10px; background: rgba(255,255,255,.95); color: var(--slate);
  border-radius: 4px;
}
.ws-card .img .tag.included { background: var(--sand); color: var(--slate); }
.ws-card .body { padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ws-card h3 { font-size: 22px; }
.ws-card p { font-size: 14.5px; color: var(--slate-3); line-height: 1.55; flex: 1; }
.ws-card .foot { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.ws-card .price { font-family: var(--f-display); font-weight: 600; font-size: 14.5px; color: var(--slate); }
.ws-card .price small { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--slate-3); font-family: var(--f-body); font-weight: 500; margin-bottom: 2px; }
.ws-card .add-lk { color: var(--olive); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--olive); padding-bottom: 2px; }
@media (max-width: 900px) { .ws-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .ws-grid { grid-template-columns: 1fr; } }

/* Included note - honest band */
.ws-included-note {
  background: var(--sand-2); padding: 32px 36px;
  margin-top: 40px;
  border-radius: var(--r);
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
}
.ws-included-note svg { width: 38px; height: 38px; color: var(--olive); }
.ws-included-note p { font-size: 15px; color: var(--slate); line-height: 1.55; }
.ws-included-note strong { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--slate); display: block; margin-bottom: 4px; }

/* Personalized services (3 cards bigger, less catalogue-y) */
.ws-services { background: var(--off); padding: 90px 0; }
.ws-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; }
.ws-svc {
  background: var(--white); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
}
.ws-svc .img { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.ws-svc .body { padding: 28px 30px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ws-svc .ic { color: var(--olive); margin-bottom: 4px; }
.ws-svc .ic svg { width: 36px; height: 36px; stroke-width: 1.3; }
.ws-svc h3 { font-size: 22px; }
.ws-svc p { font-size: 14.5px; color: var(--slate-3); line-height: 1.55; flex: 1; }
.ws-svc .pill { align-self: flex-start; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; padding: 6px 10px; background: var(--off); color: var(--slate-2); border-radius: 4px; }
.ws-svc .cross-lk { font-size: 13px; color: var(--slate-2); display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--slate-2); padding-bottom: 2px; align-self: flex-start; margin-top: 6px; }
@media (max-width: 900px) { .ws-svc-grid { grid-template-columns: 1fr; } }

/* "Add this to a trip" - 3 routing cards */
.ws-attach { background: var(--white); padding: 90px 0; border-top: 1px solid var(--line); }
.ws-attach .at-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 44px; }
.ws-attach .at-card {
  position: relative; border-radius: var(--r); overflow: hidden;
  min-height: 320px; display: flex; align-items: flex-end;
  padding: 30px 32px 32px; color: #fff; background-size: cover; background-position: center;
}
.ws-attach .at-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,28,38,.05) 0%, rgba(20,28,38,.82) 100%); }
.ws-attach .at-card > * { position: relative; }
.ws-attach .at-card .meta { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--sand); margin-bottom: 10px; }
.ws-attach .at-card h3 { color: #fff; font-size: 26px; }
.ws-attach .at-card p { color: rgba(255,255,255,.85); font-size: 14.5px; line-height: 1.55; margin-top: 8px; max-width: 36ch; }
.ws-attach .at-card .lk { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--sand); padding-bottom: 3px; align-self: flex-start; }
@media (max-width: 900px) { .ws-attach .at-row { grid-template-columns: 1fr; } }

/* ===== pages-v3.css ===== */
/* ============================================================
   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: 4px;
  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: 4px;
  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: 700; }
@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: 6px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .55;
  transform: translateY(-1px);
  vertical-align: middle;
}
@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; }
}

/* ===== pages-v4.css ===== */
/* ============================================================
   pages-v4.css — header redesign + mobile fixes
   Loaded AFTER styles.css, pages-extra.css, pages-v3.css
   ============================================================ */

/* ============================================================
   1. TOP RIBBON — keep visible on mobile w/ review count next to stars
   ============================================================ */
.top-ribbon {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 65;
  background: var(--slate);
  color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.top-ribbon .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  height: 40px;
  flex-wrap: nowrap;
}
.top-ribbon .rb-stars svg { width: 14px; height: 14px; }
.top-ribbon .rb-rating { gap: 8px; }
.top-ribbon .rb-utility .it svg { color: var(--sand); }

/* show review count text on mobile (was hidden) */
@media (max-width: 880px) {
  .top-ribbon .wrap { height: 36px; }
  .top-ribbon .rb-utility .it:not(.it-wa) { display: none; }
}
@media (max-width: 560px) {
  .top-ribbon { font-size: 11.5px; }
  .top-ribbon .wrap { height: 36px; padding: 0 14px; gap: 8px; }
  .top-ribbon .rb-stars svg { width: 11px; height: 11px; }
  .top-ribbon .rb-rating { gap: 5px; }
  .top-ribbon .rb-rating .sep { display: none; }
  .top-ribbon .rb-rating strong { font-size: 12px; }
  /* keep review count visible — show shortened version */
  .top-ribbon .rb-rating .src {
    display: inline !important;
    color: rgba(255,255,255,.7);
    font-size: 11px;
    white-space: nowrap;
  }
  .top-ribbon .rb-utility { display: none; }
}

/* very-small phones — show only stars + reviews */
@media (max-width: 380px) {
  .top-ribbon .wrap { padding: 0 12px; }
  .top-ribbon .rb-stars svg { width: 10px; height: 10px; }
  .top-ribbon .rb-rating strong { font-size: 11.5px; }
  .top-ribbon .rb-rating .src { font-size: 10.5px; }
}

/* push header down for ribbon */
.site-header { top: 40px !important; }
@media (max-width: 880px) { .site-header { top: 36px !important; } }
@media (max-width: 560px) { .site-header { top: 36px !important; } }

/* ============================================================
   2. TRANSPARENT NAVBAR — including on mobile
   The header is already transparent until scroll. Ensure mobile keeps
   it transparent above the subhero too.
   ============================================================ */
.site-header {
  background: transparent;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(247,244,239,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--line);
}
/* on mobile keep menu-toggle icon white before scroll */
@media (max-width: 720px) {
  .menu-toggle { color: #fff; }
  .site-header.is-solid .menu-toggle { color: var(--slate-2); }
  .brand img.mark { filter: invert(1) brightness(1.4); }
  .site-header.is-solid .brand img.mark { filter: none; }
}

/* ============================================================
   3. SUBHERO — bigger bolder subheading + better hierarchy
   ============================================================ */
.subhero .sub {
  font-size: clamp(17px, 1.25vw, 20px) !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.94) !important;
  line-height: 1.55 !important;
  max-width: 60ch !important;
  margin-top: 22px !important;
  text-wrap: pretty;
}
@media (max-width: 760px) {
  .subhero .sub {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    margin-top: 16px !important;
  }
}

/* CTA row inside subhero — guarantee 2 buttons row */
.subhero .hero-ctas {
  margin-top: 30px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.subhero .hero-ctas .btn { padding: 16px 22px; font-size: 14.5px; font-weight: 600; }
.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); }
.subhero .hero-ctas .btn-outline-light { color: #fff; border-color: rgba(255,255,255,.7); }

/* ============================================================
   4. STAT-BAR — icon + value + label (bigger, bolder on desktop)
   Pre-existing CSS in v3 already handles .stat > .ic + .meta structure.
   We just ensure it renders properly when icons are present.
   ============================================================ */
.subhero .stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: rgba(20,28,38,.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  padding: 0;
  margin-top: 34px !important;
  max-width: 100%;
  overflow: hidden;
}
.subhero .stat-bar .stat {
  display: grid !important;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-right: 1px solid rgba(255,255,255,.14);
  min-height: 86px;
}
.subhero .stat-bar .stat:last-child { border-right: none; }
.subhero .stat-bar .stat .ic {
  width: 36px; height: 36px;
  flex: 0 0 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--sand);
}
.subhero .stat-bar .stat .ic svg {
  width: 32px; height: 32px;
  stroke-width: 2 !important;
}
.subhero .stat-bar .stat .meta {
  display: flex; flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.subhero .stat-bar .stat .v {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(19px, 1.6vw, 26px);
  font-weight: 700 !important;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.subhero .stat-bar .stat .l {
  display: block;
  font-size: 11px !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78) !important;
  font-weight: 700 !important;
  line-height: 1.1;
}

/* legacy stats without .ic — still readable */
.subhero .stat-bar .stat:not(:has(.ic)) {
  grid-template-columns: 1fr;
  gap: 6px;
}

@media (max-width: 1000px) {
  .subhero .stat-bar { grid-template-columns: 1fr 1fr; }
  .subhero .stat-bar .stat { padding: 14px 16px; min-height: 76px; }
  .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); }
  .subhero .stat-bar .stat .ic svg { width: 26px; height: 26px; }
  .subhero .stat-bar .stat .v { font-size: 17px; }
  .subhero .stat-bar .stat .l { font-size: 10px !important; letter-spacing: .18em; }
}
@media (max-width: 480px) {
  .subhero .stat-bar .stat { padding: 12px 14px; gap: 10px; grid-template-columns: 28px 1fr; min-height: 70px; }
  .subhero .stat-bar .stat .ic { width: 28px; height: 28px; flex: 0 0 28px; }
  .subhero .stat-bar .stat .ic svg { width: 22px; height: 22px; }
  .subhero .stat-bar .stat .v { font-size: 16px; }
  .subhero .stat-bar .stat .l { font-size: 9.5px !important; }
}

/* ============================================================
   5. SUBHERO sizing — give heading more breathing room
   ============================================================ */
.subhero { min-height: 88svh; }
.subhero .wrap {
  padding-top: 130px !important;
  padding-bottom: 56px !important;
}
@media (max-width: 760px) {
  .subhero { min-height: auto; }
  .subhero .wrap {
    padding-top: 100px !important;
    padding-bottom: 36px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  .subhero h1 {
    font-size: clamp(28px, 8.5vw, 40px) !important;
    line-height: 1.05 !important;
    max-width: 100% !important;
  }
  .subhero .stat-bar { margin-top: 22px !important; }
  .subhero .hero-ctas { margin-top: 22px; gap: 10px; }
  .subhero .hero-ctas .btn {
    flex: 1; min-width: 0;
    padding: 14px 14px;
    font-size: 13.5px;
    justify-content: center;
  }
}

/* ============================================================
   6. TOUR-HERO + BOAT-GALLERY-TOP mobile — same treatment
   ============================================================ */
@media (max-width: 760px) {
  .tour-hero { padding-top: 96px !important; }
  .tour-hero-grid { grid-template-columns: 1fr !important; gap: 22px; }
  .tour-hero h1 { font-size: clamp(28px, 8vw, 42px) !important; }
  .tour-hero .tagline { font-size: 16px !important; font-weight: 500; }

  .boat-gallery-top { padding-top: 90px !important; }
  .boat-gallery-top .gallery-grid {
    grid-template-rows: 220px !important;
    gap: 8px !important;
  }
  .boat-gallery-top .gallery-grid > a:first-child { height: 240px !important; }
  .boat-gallery-top .gallery-grid > a:not(:first-child) { height: 110px; }
  .boat-gallery-top .gallery-grid > a:nth-child(n+5) { display: none; }
  .boat-gallery-top .gallery-grid > a:nth-child(4) {
    grid-column: auto;
  }

  .boat-hero { padding: 28px 0 0; }
  .boat-hero-grid { grid-template-columns: 1fr !important; gap: 26px; }
  .boat-hero h1 { font-size: clamp(28px, 8vw, 42px) !important; line-height: 1.05; }
  .boat-hero .tagline { font-size: 16px !important; font-weight: 500; }
  .boat-hero .ctas { gap: 10px; }
  .boat-hero .ctas .btn { flex: 1; min-width: 0; padding: 14px 14px; font-size: 13.5px; justify-content: center; }
  .quote-sticky { position: static; padding: 24px 22px; }
}

/* ============================================================
   7. GLOBAL: tighter gutters on mobile (user: reduce gap to edges)
   ============================================================ */
@media (max-width: 760px) {
  :root { --gutter: 18px; }
  .wrap { padding-left: 18px; padding-right: 18px; }
  section { padding: 52px 0; }
  section.tight { padding: 40px 0; }
}
@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .wrap { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   8. RENT-A-BOAT — boats-cat-head & boat cards mobile redesign
   ============================================================ */
@media (max-width: 760px) {
  .boats-cat { margin-bottom: 48px; }
  .boats-cat-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding-bottom: 14px !important;
    margin-bottom: 22px !important;
  }
  .boats-cat-head .left { width: 100%; }
  .boats-cat-head .label-row {
    flex-wrap: wrap;
    gap: 10px !important;
    margin-bottom: 4px;
  }
  .boats-cat-head .badge-type {
    padding: 6px 12px;
    font-size: 10.5px;
    letter-spacing: .18em;
  }
  .boats-cat-head .count {
    font-size: 12.5px;
    white-space: normal;
    line-height: 1.3;
  }
  .boats-cat-head h2 {
    font-size: clamp(26px, 7.5vw, 34px) !important;
    margin-top: 4px;
    letter-spacing: -0.03em;
  }
  .boats-cat-head .lead {
    font-size: 14.5px;
    max-width: 100% !important;
    margin-top: 4px;
  }
  .boat-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* override inline 2-col grid on catamarans block */
  .boats-cat#catamarans .boat-grid {
    grid-template-columns: 1fr !important;
  }

  /* boat card: tighter padding + larger spec icons */
  .boat-card .body { padding: 18px 18px !important; }
  .boat-card h3 { font-size: 20px !important; }
  .boat-card .specs { padding: 14px 0; }
  .boat-card .specs .spec { padding: 0 4px; gap: 6px; }
  .boat-card .specs .spec svg { width: 22px; height: 22px; }
  .boat-card .specs .v { font-size: 15px; }
  .boat-card .specs .k { font-size: 9.5px; letter-spacing: .14em; }
  .boat-card .features { gap: 8px 12px; font-size: 12.5px; }
  .boat-card .ctas { gap: 8px; }
  .boat-card .ctas .btn { padding: 12px 14px; font-size: 12.5px; }
}

/* boat-card title-row — fix year crowding the title on mobile */
@media (max-width: 480px) {
  .boat-card .title-row {
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .boat-card .title-row h3 { font-size: 19px !important; }
  .boat-card .year { font-size: 11px; }
}

/* ============================================================
   9. RAB-TYPES (3 boat-type cards on top of rent-a-boat)
   ============================================================ */
@media (max-width: 760px) {
  .rab-intro { padding: 48px 0 36px; }
  .rab-types { gap: 10px; }
  .rab-type { padding: 20px 18px; gap: 14px; }
  .rab-type .ic svg { width: 46px !important; height: 46px !important; }
  .rab-type .info h3 { font-size: 18px; }
  .rab-type .info .num { font-size: 10.5px; }
  .rab-type .info p { font-size: 13.5px; margin-top: 8px; }
}

/* ============================================================
   10. CONTACT BLOCK (final / contact section) — mobile redesign
   ============================================================ */
@media (max-width: 760px) {
  .final { padding: 52px 0; }
  .final .wrap { padding: 0 14px; }
  .contact-block-v2 { border-radius: 8px; }
  .contact-block-v2 .topimg {
    height: 180px;
  }
  .contact-block-v2 .topimg .top-inner {
    left: 22px !important; right: 22px !important; bottom: 22px !important;
  }
  .contact-block-v2 .topimg h2 {
    font-size: 26px !important;
    max-width: 100% !important;
  }
  .contact-block-v2 .topimg .reply {
    font-size: 11px;
    letter-spacing: .12em;
    gap: 8px;
  }
  .contact-block-v2 .inner { grid-template-columns: 1fr !important; }
  .contact-block-v2 .form-side { padding: 28px 22px !important; }
  .contact-block-v2 .info-side {
    padding: 28px 22px !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .contact-block-v2 .info-side .ic-row {
    grid-template-columns: 26px 1fr !important;
    gap: 14px !important;
    padding: 14px 0 !important;
  }
  .contact-block-v2 .info-side .ic-row svg { width: 22px; height: 22px; }
  .contact-block-v2 .info-side .val { font-size: 15px; }
  .contact-block-v2 .info-side .boarding-list { margin-top: 18px; padding: 14px 16px; }

  form.inquiry { gap: 12px; }
  form.inquiry .row { grid-template-columns: 1fr !important; gap: 12px !important; }
  form.inquiry input,
  form.inquiry select,
  form.inquiry textarea { font-size: 15px; padding: 10px 0 12px; }
  form.inquiry label { font-size: 10.5px; margin-bottom: 6px; }
  form.inquiry button[type=submit] { padding: 14px 22px; font-size: 14px; width: 100%; justify-content: center; }
  form.inquiry .submit-row { flex-direction: column; align-items: stretch; gap: 14px; }
  form.inquiry .alt { text-align: center; }
}

/* ============================================================
   11. HOMEPAGE FAQ + CONTACT combined card — fix cramped mobile
   ============================================================ */
@media (max-width: 760px) {
  .faq-contact { padding: 52px 0 !important; }
  .faq-contact .wrap { padding: 0 14px !important; }
  .faq-contact .combined-card { border-radius: 8px; }
  .faq-contact .top-banner {
    flex-direction: column;
    align-items: flex-start !important;
    padding: 26px 20px !important;
    gap: 16px;
  }
  .faq-contact .top-banner .left { max-width: 100%; }
  .faq-contact .top-banner .h-eyebrow { font-size: 10.5px; }
  .faq-contact .top-banner h2 {
    font-size: clamp(24px, 7vw, 32px) !important;
    margin-top: 10px !important;
  }
  .faq-contact .top-banner .reply {
    font-size: 11px;
    padding: 11px 14px;
    letter-spacing: .12em;
    gap: 8px;
  }
  .faq-contact .top-banner .reply svg { width: 14px; height: 14px; }
  .faq-contact .body { grid-template-columns: 1fr !important; }
  .faq-contact .body .faq-side,
  .faq-contact .body .info-side {
    padding: 24px 20px !important;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .faq-contact .faq-side .faq-item { padding: 16px 0 !important; }
  .faq-contact .faq-side .faq-item summary { font-size: 15px !important; gap: 14px !important; }
  .faq-contact .faq-side .faq-item .marker { flex: 0 0 18px; width: 18px; height: 18px; }
  .faq-contact .faq-side .faq-item .answer { font-size: 13.5px; margin-top: 10px; }
  .faq-contact .info-side .ic-row { padding: 14px 0 !important; gap: 12px !important; }
  .faq-contact .info-side .ic-row svg { width: 22px; height: 22px; }
  .faq-contact .info-side .val { font-size: 15px !important; }
  .faq-contact .info-side .cta-stack { margin-top: 18px !important; gap: 8px !important; }
  .faq-contact .info-side .cta-stack .btn { padding: 14px 18px !important; font-size: 13px !important; }
  .faq-contact .info-side .boarding-list { margin-top: 16px; padding: 14px 16px; }
}

/* ============================================================
   12. HORIZONTAL SLIDER on mobile for card grids
   Used on rent-a-boat individual sections, tour cards, day-trips, etc.
   ============================================================ */
@media (max-width: 760px) {
  /* tour-listing cards: snap horizontal scroll */
  .tours-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px !important;
    padding: 4px 16px 18px !important;
    margin: 0 -18px;
    scrollbar-width: none;
  }
  .tours-grid::-webkit-scrollbar { display: none; }
  .tours-grid > .tour-listing-card {
    flex: 0 0 84%;
    min-width: 280px;
    scroll-snap-align: start;
  }
  .tour-listing-card .body { padding: 18px 18px 18px; }
  .tour-listing-card h3 { font-size: 20px; }
  .tour-listing-card .meta-row { font-size: 11px; letter-spacing: .12em; }
  .tour-listing-card p.desc { font-size: 13.5px; }
  .tour-listing-card .stops .pill { font-size: 11px; padding: 4px 8px; }
  .tour-listing-card .cta-lk { padding: 9px 14px !important; font-size: 11.5px !important; }

  /* tm-examples cards slider */
  .tm-examples-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px !important;
    padding: 4px 16px 18px !important;
    margin: 0 -18px;
    scrollbar-width: none;
  }
  .tm-examples-grid::-webkit-scrollbar { display: none; }
  .tm-examples-grid > .tm-example {
    flex: 0 0 78%;
    min-width: 260px;
    scroll-snap-align: start;
  }
}

/* tablet narrow (around iPad portrait) */
@media (min-width: 761px) and (max-width: 1000px) {
  .tours-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .boat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tm-examples-grid { grid-template-columns: repeat(2, 1fr); }
  .why-v2 .why-grid-v2 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   13. DAY-TRIPS, EVENTS, BLOG mobile sliders
   ============================================================ */
@media (max-width: 760px) {
  .events-grid,
  .blog-grid,
  .blog-feed-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px !important;
    padding: 4px 16px 18px !important;
    margin: 0 -18px;
    scrollbar-width: none;
  }
  .events-grid::-webkit-scrollbar,
  .blog-grid::-webkit-scrollbar,
  .blog-feed-grid::-webkit-scrollbar { display: none; }
  .events-grid > .event-card,
  .blog-grid > .blog-card,
  .blog-feed-grid > .blog-card {
    flex: 0 0 80%;
    min-width: 260px;
    scroll-snap-align: start;
  }

  /* tour-grid (homepage featured) */
  .tour-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px !important;
    padding: 4px 16px 18px !important;
    margin: 0 -18px;
    scrollbar-width: none;
  }
  .tour-grid::-webkit-scrollbar { display: none; }
  .tour-grid > .tour-card,
  .tour-grid > .home-featured-card {
    flex: 0 0 80%;
    min-width: 260px;
    scroll-snap-align: start;
  }
}

/* ============================================================
   14. HOMEPAGE hero CTA — make 2 buttons readable on mobile
   ============================================================ */
@media (max-width: 760px) {
  .hero .hero-ctas { gap: 10px; }
  .hero .hero-ctas .btn {
    flex: 1; min-width: 0;
    padding: 14px 12px;
    font-size: 13px;
    justify-content: center;
  }
}

/* ============================================================
   15. SUBHERO scrim — fix legibility (the heading was washed out)
   ============================================================ */
.subhero .bg::after {
  background:
    linear-gradient(180deg, rgba(20,28,38,.5) 0%, rgba(20,28,38,.2) 30%, rgba(20,28,38,.88) 100%),
    linear-gradient(90deg, rgba(20,28,38,.35) 0%, rgba(20,28,38,0) 60%);
}

/* ============================================================
   16. CRUMBS — slightly larger on mobile, more contrast
   ============================================================ */
@media (max-width: 760px) {
  .subhero .crumbs,
  .tour-hero .crumbs,
  .boat-gallery-top .crumbs {
    font-size: 10.5px !important;
    letter-spacing: .16em !important;
    margin-bottom: 14px !important;
  }
}

/* ============================================================
   17. FAQ page mobile — service-group accordion tweaks
   ============================================================ */
@media (max-width: 760px) {
  .faq-page { padding: 48px 0 64px; }
  .faq-cats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-bottom: 32px !important; }
  .faq-cat { padding: 18px 14px !important; gap: 8px !important; }
  .faq-cat .ic svg { width: 34px !important; height: 34px !important; }
  .faq-cat h3 { font-size: 14px !important; }
  .faq-cat .count { font-size: 11px; }
  .faq-group { padding: 22px 18px !important; }
  .faq-group-head { gap: 12px !important; padding-bottom: 16px !important; }
  .faq-group-head .ic { width: 44px; height: 44px; }
  .faq-group-head .ic svg { width: 22px !important; height: 22px !important; }
  .faq-group-head h2 { font-size: 19px !important; }
  .faq-group .faq-item summary { font-size: 14.5px !important; }
  .faq-group .faq-item .answer { font-size: 14px !important; line-height: 1.55; }
}

/* ============================================================
   18. CONTACT PAGE individual cards mobile
   ============================================================ */
@media (max-width: 760px) {
  .contact-page { padding: 48px 0 64px; }
  .contact-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .contact-form-card { padding: 26px 22px !important; border-radius: 8px; }
  .contact-form-card h2 { font-size: 26px !important; }
  .contact-form-card .lead { font-size: 14.5px; margin-bottom: 22px; }
  .contact-info-card { padding: 18px 18px !important; gap: 14px !important; }
  .contact-info-card .ic { width: 36px; height: 36px; flex: 0 0 36px; }
  .contact-info-card .ic svg { width: 26px !important; height: 26px !important; }
  .contact-info-card .body h3 { font-size: 11px !important; }
  .contact-info-card .body p,
  .contact-info-card .body a { font-size: 15px !important; }
  .contact-info-card .body small { font-size: 12.5px; }
}

/* ============================================================
   19. WHATSAPP FAB mobile — keep but tinier
   ============================================================ */
@media (max-width: 760px) {
  .whatsapp-fab {
    right: 14px; bottom: 14px;
    padding: 12px;
    box-shadow: 0 10px 24px -10px rgba(37,211,102,.55);
  }
  .whatsapp-fab svg { width: 20px; height: 20px; }
  .whatsapp-fab span { display: none; }
}

/* ============================================================
   20. SERVICES grid mobile — slider too
   ============================================================ */
@media (max-width: 760px) {
  .service-grid {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px !important;
    padding: 4px 16px 18px !important;
    margin: 0 -18px;
    border: none;
    scrollbar-width: none;
  }
  .service-grid::-webkit-scrollbar { display: none; }
  .service-grid > .service-card {
    flex: 0 0 80%;
    min-width: 260px;
    scroll-snap-align: start;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    background: var(--white);
  }
}

/* ============================================================
   21. RAB filter strip mobile — horizontal scroll
   ============================================================ */
@media (max-width: 760px) {
  .rab-filters { position: static; padding: 14px 0; }
  .rab-filters .wrap { padding: 0 18px; }
  .rab-filters .row { flex-wrap: nowrap; overflow-x: auto; gap: 8px; scrollbar-width: none; padding-bottom: 4px; }
  .rab-filters .row::-webkit-scrollbar { display: none; }
  .rab-filters .label { display: none; }
  .rab-filters .sep { display: none; }
  .rab-filters .chips { flex-wrap: nowrap; }
  .rab-filters .chip { white-space: nowrap; padding: 8px 12px; font-size: 12.5px; }
}

/* ============================================================
   22. CTA visibility — ensure subhero CTAs ARE visible (was rendering
   under stat-bar in some pages due to z-index quirks)
   ============================================================ */
.subhero .wrap > * { position: relative; }

/* ============================================================
   23. TWO-CTA on tour-hero, boat-hero, contact-page, etc.
   ============================================================ */
.tour-hero .ctas,
.boat-hero .ctas {
  margin-top: 26px;
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* ============================================================
   24. SECTION TITLE - mobile-friendly margins
   ============================================================ */
@media (max-width: 760px) {
  .section-head { margin-bottom: 24px; }
  .section-head h2 { font-size: clamp(24px, 6.5vw, 32px) !important; line-height: 1.05 !important; }
  .section-head .lead { font-size: 15px; }
}

/* ===== pages-v5.css ===== */
/* ============================================================
   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; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* WhatsApp FAB color is fine as green */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ===== theme-v8.css ===== */
/* ============================================================
   theme-v8.css — client feedback round

   GLOBAL CHANGES
   1. Less dark overlay on every header (hero + subhero)
   2. Remove WhatsApp CTA from every header (top ribbon + hero btn)
   3. Remove the eyebrow dash-and-label ("— A FLEET OF NINE") above
      section titles, sitewide
   4. Mobile dvh → svh (no scroll glitch when chrome hides)
   5. Tighter vertical section spacing — less corporate / more
      small family-charter rhythm
   6. Smaller padding inside cards on mobile (less wasted space)
   7. Remove "Plan your day on the Adriatic" footer-CTA banner
   8. Remove the big "Questions, answered. Quote within hours."
      banner above the contact-us section
   9. Soften aesthetic — bigger radii, lighter shadows, warmer tone

   Loaded LAST.
   ============================================================ */

/* ============================================================
   1. HEADER OVERLAY — much lighter scrim everywhere
   ============================================================ */
.hero .scrim {
  background:
    linear-gradient(180deg, rgba(15,28,50,.32) 0%, rgba(15,28,50,.0) 30%, rgba(15,28,50,.55) 100%),
    linear-gradient(90deg, rgba(15,28,50,.22) 0%, rgba(15,28,50,0) 55%) !important;
}
.subhero .bg::after {
  background:
    linear-gradient(180deg, rgba(15,28,50,.35) 0%, rgba(15,28,50,.08) 30%, rgba(15,28,50,.62) 100%),
    linear-gradient(90deg, rgba(15,28,50,.18) 0%, rgba(15,28,50,0) 55%) !important;
}

/* ============================================================
   2. STRIP WHATSAPP FROM HEADERS
   - top utility ribbon WhatsApp item
   - hero / subhero CTA "WhatsApp" outlined button
   The phone number + sticky WA-FAB at the bottom-right stay,
   so the contact path still works.
   ============================================================ */
.top-ribbon .rb-utility .it.it-wa { display: none !important; }

.hero-ctas .btn-outline-light[href*="wa.me"],
.subhero .hero-ctas .btn-outline-light[href*="wa.me"],
.subhero .hero-ctas a[href*="wa.me"] { display: none !important; }

/* ============================================================
   3. REMOVE EYEBROW DASH-AND-LABEL EVERYWHERE
   No dashes anywhere; section h2 carries the meaning.
   ============================================================ */
.h-eyebrow {
  display: none !important;
}
/* Tighten the gap left behind */
.section-head h2,
.yacht-grid h2,
.celebrate-cell h3,
.contact-block-v2 .form-side h2 {
  margin-top: 0 !important;
}

/* ============================================================
   4. MOBILE — svh (not dvh) to stop the resize jitter when
   browser chrome shows/hides. Override pages-v6.css which set
   `min-height: 100dvh !important` *after* the 100svh line.
   ============================================================ */
@media (max-width: 760px) {
  .subhero,
  .hero {
    min-height: 100svh !important;
    height: 100svh !important;
  }
  .subhero .wrap,
  .hero .hero-inner {
    min-height: 100svh !important;
  }
}
/* Belt-and-braces: kill any leftover dvh declaration */
@supports (height: 100svh) {
  .hero, .subhero,
  .hero .hero-inner, .subhero .wrap {
    /* nothing — the svh rule above wins because it comes later */
  }
}

/* ============================================================
   5. SECTION SPACING — tighter sitewide, family-charter rhythm
   ============================================================ */
section {
  padding: clamp(48px, 5.5vw, 80px) 0 !important;
}
section.tight,
.trust-bar {
  padding: clamp(36px, 4vw, 56px) 0 !important;
}
.faq-contact {
  padding: clamp(48px, 5.5vw, 80px) 0 !important;
}

/* sections that bring their own padding via theme-v7 etc. */
.celebrate { padding: clamp(48px, 5.5vw, 80px) 0 !important; }

.section-head { margin-bottom: clamp(28px, 3.5vw, 40px) !important; }

@media (max-width: 760px) {
  section,
  .featured, .services, .fleet, .why, .daytrips, .transfers,
  .celebrate, .testimonials, .faq-contact, .blog-feed {
    padding: 42px 0 !important;
  }
  .trust-bar { padding: 34px 0 !important; }
  .section-head { margin-bottom: 18px !important; }
  /* keep hero / subhero anchored - their own padding rules apply */
  .hero, .subhero { padding: 0 !important; }
}

/* ============================================================
   6. KILL THE TWO "BANNER" SECTIONS THE USER FLAGGED
   - .footer-cta inside <footer> (the "Plan your day..." strip)
   - .faq-contact .top-banner (the "Questions, answered. Quote
     within hours." big blue banner above the FAQ + contact card)
   ============================================================ */
.site-footer .footer-cta { display: none !important; }
.faq-contact .top-banner { display: none !important; }

/* Round the combined card back nicely now the banner is gone */
.faq-contact .combined-card {
  border-radius: 16px !important;
}
.faq-contact .body { border-top: none !important; }

/* ============================================================
   7. SMALLER INTERNAL CARD GAPS ON MOBILE
   The user pointed out a lot of dead space inside the
   fleet/secondary cards — tighten padding, line-height,
   and the meta line spacing on phones.
   ============================================================ */
@media (max-width: 760px) {
  /* Fleet secondary cards (speed boats, catamarans) */
  .fleet-card-sec .body { padding: 16px 18px 18px !important; }
  .fleet-card-sec .body .type { font-size: 10.5px !important; letter-spacing: .18em !important; }
  .fleet-card-sec .body h3 { font-size: 19px !important; margin-top: 4px !important; }
  .fleet-card-sec .body .count { margin-top: 2px !important; font-size: 12.5px !important; }
  .fleet-card-sec .body p { margin-top: 8px !important; font-size: 13.5px !important; line-height: 1.45 !important; }
  .fleet-card-sec .body .view { margin-top: 12px !important; font-size: 13px !important; }
  .fleet-card-sec .img { min-height: 180px !important; }

  /* Featured / hero card */
  .fleet-card-feat .body { padding: 22px 22px 24px !important; }
  .fleet-card-feat .body h3 { font-size: 22px !important; margin-top: 6px !important; }
  .fleet-card-feat .body .meta { margin-top: 14px !important; padding-top: 14px !important; gap: 18px !important; }
  .fleet-card-feat .body p { margin-top: 12px !important; font-size: 14px !important; }
  .fleet-card-feat .body .view { margin-top: 16px !important; }

  /* Tour cards */
  .tour-card .body { gap: 0 !important; }
  .tour-card h3 { margin-top: 10px !important; font-size: 19px !important; }
  .tour-card .hook { font-size: 13.5px !important; line-height: 1.45 !important; }
  .tour-card .foot { margin-top: 12px !important; padding-top: 10px !important; }

  /* Service cards */
  .service-card { padding: 16px 14px 14px !important; min-height: 0 !important; }
  .service-card h3 { font-size: 15px !important; }
  .service-card p { margin-bottom: 8px !important; }

  /* Transfer cards */
  .transfer-card .body { padding: 20px 20px 22px !important; }
  .transfer-card h3 { font-size: 19px !important; margin-bottom: 8px !important; }
  .transfer-card p { font-size: 13.5px !important; line-height: 1.45 !important; }
  .transfer-card .routes { margin-top: 12px !important; padding-top: 10px !important; font-size: 12.5px !important; }
  .transfer-card .link-arrow { margin-top: 14px !important; }

  /* Why cards */
  .wcard { padding: 14px !important; }
  .why-grid-v2 { gap: 10px !important; }

  /* Testimonials */
  .testi { padding: 22px 20px !important; }
  .testi blockquote { font-size: 17px !important; line-height: 1.35 !important; }
  .testi .who { margin-top: 16px !important; padding-top: 14px !important; }

  /* Blog cards */
  .blog-card .cat { margin-top: 12px !important; }
  .blog-card h3 { margin-top: 6px !important; font-size: 18px !important; }
  .blog-card .excerpt { margin-top: 8px !important; font-size: 13.5px !important; line-height: 1.45 !important; }
  .blog-card .meta { margin-top: 10px !important; }

  /* Celebrate cells */
  .celebrate-cell .content { padding: 18px 18px 20px !important; }
  .celebrate-cell h3 { margin-top: 8px !important; font-size: 20px !important; }
  .celebrate-cell p { margin-top: 8px !important; font-size: 13.5px !important; line-height: 1.45 !important; }
  .celebrate-cell .link-arrow { margin-top: 14px !important; }

  /* Day-trip / inland cards */
  .tour-card .body .foot { gap: 8px !important; }
}

/* ============================================================
   8. SOFTER LOOK — less corporate
   ============================================================ */
.btn { border-radius: 8px !important; }
.tour-card .img,
.blog-card .img,
.fleet-card-feat,
.fleet-card-sec,
.transfer-card,
.testi,
.testi-platform,
.celebrate-cell,
.contact-block-v2 { border-radius: 12px !important; }

/* trust bar — less rigid borders, more breathing */
.trust-grid { gap: 0 !important; }
.trust-heading {
  font-weight: 600 !important;
  font-style: normal !important;
}

/* ============================================================
   9. HERO TYPE — slightly softer, less corporate copy weight
   ============================================================ */
.hero h1 { letter-spacing: -0.035em !important; }
.hero h1 em { font-weight: 300 !important; }

/* ============================================================
   10. ABOUT / SUBHERO CTAs that referenced WhatsApp — drop the
   solo WA outline button. Phone number stays in ribbon.
   ============================================================ */
.subhero .hero-ctas { gap: 12px !important; }

/* ============================================================
   11. RIBBON — hide rb-utility entirely on mobile (it’s busy)
   ============================================================ */
@media (max-width: 760px) {
  .top-ribbon .rb-utility { display: none !important; }
  .top-ribbon { padding: 6px 0 !important; }
}

/* ============================================================
   12. Remove the "Reach the crew" subtitle eyebrow line in the
   info-side that mirrors the eyebrow style — keep it; only the
   pre-h2 dash-eyebrows were called out.
   ============================================================ */

/* ============================================================
   13. HOMEPAGE — REDESIGNED MULTI-DAY YACHT-CHARTER CARD
   (markup change made in index.html; styles here)
   ============================================================ */
.charter-band {
  background: var(--navy-deep);
  color: #fff;
  padding: 0 !important;
}
.charter-band .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: clamp(48px, 6vw, 96px) clamp(20px, 4vw, 64px) !important;
  max-width: 1320px;
  margin: 0 auto;
}
.charter-band .intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: end;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.charter-band .intro h2 {
  color: #fff;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 500;
}
.charter-band .intro h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold, #c19a4d);
}
.charter-band .intro p {
  color: rgba(255,255,255,.78);
  font-size: 16px;
  line-height: 1.55;
  max-width: 48ch;
}
.charter-trip-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.charter-trip {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.charter-trip:hover {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-2px);
}
.charter-trip .nights {
  font-family: var(--f-display);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.charter-trip .nights small {
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  font-family: var(--f-body);
}
.charter-trip h3 {
  color: #fff;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
.charter-trip h3 em {
  font-style: italic;
  color: var(--gold, #c19a4d);
  font-weight: 300;
}
.charter-trip p {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.7);
  margin: 0;
}
.charter-trip .route-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  margin-top: auto;
}
.charter-trip .route-line span:not(:last-child)::after {
  content: "·";
  margin-left: 8px;
  color: rgba(255,255,255,.35);
}
.charter-trip.is-featured {
  background: rgba(193,154,77,.10);
  border-color: rgba(193,154,77,.45);
}
.charter-trip.is-featured .tag {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--gold, #c19a4d);
  color: #fff;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 4px;
}
.charter-band .foot {
  margin-top: clamp(28px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.charter-band .foot p {
  color: rgba(255,255,255,.7);
  font-size: 14px;
  margin: 0;
  max-width: 52ch;
}
.charter-band .foot .btn-outline-light {
  border-color: rgba(255,255,255,.4);
  color: #fff;
}
@media (max-width: 900px) {
  .charter-band .intro { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .charter-trip-row { grid-template-columns: 1fr; gap: 12px; }
  .charter-trip { padding: 22px 20px 20px; gap: 12px; }
  .charter-trip .nights { font-size: 44px; }
  .charter-band .foot { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   14. YACHT-CHARTER PAGE — REDESIGNED 3 / 5 / 7-day CARDS
   ============================================================ */
.duration-card {
  background: #fff !important;
  border: 1px solid var(--hairline, rgba(27,31,38,.12)) !important;
  border-radius: 16px !important;
  padding: 32px 30px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  box-shadow: 0 1px 0 rgba(16,44,84,.04) !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.duration-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(16,44,84,.28) !important;
  box-shadow: 0 24px 48px -28px rgba(16,44,84,.28) !important;
}
.duration-card .pop-tag {
  position: absolute !important;
  top: -14px !important;
  left: 24px !important;
  background: var(--gold, #c19a4d) !important;
  color: #fff !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  font-weight: 700 !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}
.duration-card .num {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--f-body) !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--brand-warm, #C19A4D) !important;
  font-weight: 600 !important;
}
.duration-card .num::before { content: none !important; }

.duration-card h3 {
  font-family: var(--f-display) !important;
  font-size: clamp(36px, 3.6vw, 52px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.04em !important;
  font-weight: 500 !important;
  color: var(--ink, #1B1F26) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}
.duration-card h3 em {
  font-style: italic !important;
  font-weight: 300 !important;
  color: var(--brand-warm, #C19A4D) !important;
  font-size: 0.5em !important;
  letter-spacing: 0 !important;
}
.duration-card .route {
  margin: 0 !important;
  padding: 0 0 14px 0 !important;
  border-bottom: 1px solid var(--hairline, rgba(27,31,38,.10)) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--ink-3, #5C636C) !important;
}
.duration-card .best-for {
  background: #f7f4ee !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  color: var(--ink-2, #2B313A) !important;
  line-height: 1.4 !important;
}
.duration-card .best-for strong {
  display: block !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--brand-warm, #C19A4D) !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}
.duration-card .price {
  margin-top: auto !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--hairline, rgba(27,31,38,.10)) !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}
.duration-card .price .v {
  font-family: var(--f-display) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--ink, #1B1F26) !important;
  letter-spacing: -0.025em !important;
}
.duration-card .price .l {
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft, #8A8F96) !important;
  font-weight: 500 !important;
}
.duration-card .see {
  margin-top: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--brand, #102c54) !important;
  border-bottom: 1px solid var(--brand, #102c54) !important;
  padding-bottom: 4px !important;
  align-self: flex-start !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: gap .2s ease, color .2s ease, border-color .2s ease !important;
}
.duration-card:hover .see {
  color: var(--brand-warm, #C19A4D) !important;
  border-color: var(--brand-warm, #C19A4D) !important;
  gap: 14px !important;
}

/* Featured variant — warm cream not aggressive dark navy */
.duration-card.featured {
  background: linear-gradient(180deg, #fffaf3 0%, #fff 60%) !important;
  border-color: rgba(193,154,77,.45) !important;
  color: var(--ink) !important;
}
.duration-card.featured h3 { color: var(--ink, #1B1F26) !important; }
.duration-card.featured .route { color: var(--ink-3, #5C636C) !important; }
.duration-card.featured .best-for {
  background: rgba(193,154,77,.10) !important;
  color: var(--ink-2, #2B313A) !important;
}
.duration-card.featured .best-for strong { color: var(--brand-warm) !important; }
.duration-card.featured .price .v { color: var(--ink) !important; }
.duration-card.featured .price .l { color: var(--ink-soft) !important; }
.duration-card.featured .see { color: var(--brand-warm, #C19A4D) !important; border-color: var(--brand-warm) !important; }

.duration-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
}
@media (max-width: 900px) {
  .duration-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .duration-card { padding: 24px 22px 22px !important; gap: 14px !important; }
  .duration-card h3 { font-size: 34px !important; }
}

/* ============================================================
   15. FLEET — THREE CATEGORY TILES (clear at-a-glance grid)
   ============================================================ */
.fleet-cats { background: var(--off, #f7f4ef); }
.cats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.cat-card {
  background: #fff;
  border: 1px solid var(--hairline, rgba(27,31,38,.10));
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(16,44,84,.25);
  box-shadow: 0 22px 48px -28px rgba(16,44,84,.32);
}
.cat-img {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.cat-card:hover .cat-img img { transform: scale(1.04); }
.cat-img .cat-count {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(16,44,84,.92);
  color: #fff;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
  backdrop-filter: blur(6px);
}
.cat-body {
  padding: 22px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.cat-kicker {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand-warm, #C19A4D);
}
.cat-body h3 {
  font-size: clamp(24px, 2.4vw, 30px);
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-weight: 500;
  color: var(--ink, #1B1F26);
}
.cat-specs {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--hairline);
}
.cat-specs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 13px;
}
.cat-specs li span {
  color: var(--ink-soft, #8A8F96);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.cat-specs li strong {
  color: var(--ink, #1B1F26);
  font-weight: 600;
  font-family: var(--f-display, "Archivo", system-ui);
  letter-spacing: -0.01em;
  font-size: 14px;
}
.cat-link {
  margin-top: 8px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand, #102c54);
  border-bottom: 1px solid var(--brand, #102c54);
  padding-bottom: 4px;
  transition: gap .2s ease, color .2s ease, border-color .2s ease;
}
.cat-card:hover .cat-link {
  gap: 14px;
  color: var(--brand-warm, #C19A4D);
  border-color: var(--brand-warm, #C19A4D);
}
@media (max-width: 900px) {
  .cats-grid { grid-template-columns: 1fr; gap: 14px; }
  .cat-img { aspect-ratio: 16/10; }
  .cat-body { padding: 18px 20px 20px; gap: 10px; }
}

/* ============================================================
   16. TRUST BAR v2 — bigger hero stat row
   ============================================================ */
.trust-bar-v2 { background: #fff !important; }
.trust-bar-v2 .trust-grid { display: none !important; } /* hide old grid if any */
.trust-bar-v2 .trust-hd {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(28px, 3vw, 40px);
}
.trust-bar-v2 .trust-hd h2 {
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink, #1B1F26);
  margin: 0;
}
.trust-bar-v2 .trust-hd p {
  margin: 14px 0 0;
  color: var(--ink-3, #5C636C);
  font-size: 16px;
}
.trust-bar-v2 .trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.trust-bar-v2 .trust-stat {
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  border-right: 1px solid var(--hairline);
  min-height: 168px;
  justify-content: center;
}
.trust-bar-v2 .trust-stat:last-child { border-right: none; }
.trust-bar-v2 .trust-stat .big {
  font-family: var(--f-display, "Archivo", system-ui);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink, #1B1F26);
  font-weight: 500;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.trust-bar-v2 .trust-stat .big small {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.trust-bar-v2 .trust-stat .stars {
  display: inline-flex;
  gap: 2px;
  color: var(--gold, #c19a4d);
}
.trust-bar-v2 .trust-stat .stars svg { width: 16px; height: 16px; }
.trust-bar-v2 .trust-stat .lbl {
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trust-bar-v2 .trust-stat .lbl strong {
  color: var(--ink, #1B1F26);
  font-weight: 600;
  font-size: 14px;
}
.trust-bar-v2 .trust-stat .badge {
  height: 56px;
  width: auto;
  object-fit: contain;
}
@media (max-width: 900px) {
  .trust-bar-v2 .trust-row { grid-template-columns: 1fr 1fr; }
  .trust-bar-v2 .trust-stat:nth-child(2) { border-right: none; }
  .trust-bar-v2 .trust-stat:nth-child(3) { border-bottom: none; border-top: 1px solid var(--hairline); }
  .trust-bar-v2 .trust-stat:nth-child(4) { border-top: 1px solid var(--hairline); }
  .trust-bar-v2 .trust-stat:nth-child(1),
  .trust-bar-v2 .trust-stat:nth-child(2) { border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
  .trust-bar-v2 .trust-row { grid-template-columns: 1fr; }
  .trust-bar-v2 .trust-stat { border-right: none !important; border-bottom: 1px solid var(--hairline) !important; min-height: 0; padding: 22px 22px; }
  .trust-bar-v2 .trust-stat:last-child { border-bottom: none !important; }
  .trust-bar-v2 .trust-stat .big { font-size: 44px; }
  .trust-bar-v2 .trust-stat .badge { height: 48px; }
}

/* ============================================================
   17. CHARTER BAND — dimmed background image
   ============================================================ */
.charter-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.charter-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('images/yacht-charter.jpg');
  background-size: cover;
  background-position: center;
  opacity: .28;
  z-index: -2;
  filter: saturate(.8) contrast(1.05);
}
.charter-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,32,60,.55) 0%, rgba(15,32,60,.85) 100%);
  z-index: -1;
}

/* ============================================================
   18. CELEBRATE v3 — Events big, Add-ons small
   ============================================================ */
.celebrate-v3 {
  background: var(--off, #f7f4ef) !important;
  padding: clamp(48px, 5.5vw, 80px) 0 !important;
}
.celebrate-v3 .celebrate-grid { display: none !important; } /* hide any stale legacy markup if present */

.celebrate-v3 .wrap-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--gutter, 28px);
}
.cv3-grid {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: 22px;
  align-items: stretch;
}

/* === Events featured card === */
.cv3-events {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  min-height: 460px;
}
.cv3-events:hover {
  transform: translateY(-3px);
  border-color: rgba(16,44,84,.25);
  box-shadow: 0 32px 60px -36px rgba(16,44,84,.36);
}
.cv3-events-img {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.cv3-events-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s ease;
}
.cv3-events:hover .cv3-events-img img { transform: scale(1.05); }
.cv3-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(255,255,255,.96);
  color: var(--ink, #1B1F26);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.cv3-events-body {
  padding: 32px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cv3-events-body h3 {
  font-size: clamp(26px, 2.6vw, 38px);
  letter-spacing: -0.025em;
  line-height: 1.04;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.cv3-events-body > p {
  color: var(--ink-3, #5C636C);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  max-width: 44ch;
}
.cv3-types {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.cv3-types li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-3);
}
.cv3-types li svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--brand, #102c54);
  margin-top: 1px;
}
.cv3-types li strong {
  display: block;
  color: var(--ink, #1B1F26);
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  font-size: 14px;
  margin-bottom: 2px;
}
.cv3-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand, #102c54);
  border-bottom: 1px solid var(--brand);
  padding-bottom: 4px;
  transition: gap .2s ease, color .2s ease, border-color .2s ease;
}
.cv3-events:hover .cv3-link,
.cv3-addons:hover .cv3-link {
  gap: 14px;
  color: var(--brand-warm, #C19A4D);
  border-color: var(--brand-warm, #C19A4D);
}

/* === Add-ons compact card === */
.cv3-addons {
  background: var(--brand, #102c54);
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.cv3-addons:hover {
  transform: translateY(-3px);
  box-shadow: 0 32px 60px -36px rgba(16,44,84,.36);
}
.cv3-addons-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.cv3-addons-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s ease;
  opacity: .88;
}
.cv3-addons:hover .cv3-addons-img img { transform: scale(1.05); opacity: 1; }
.cv3-addons-body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.cv3-kicker {
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold, #c19a4d);
  font-weight: 700;
}
.cv3-addons h3 {
  font-size: clamp(22px, 2vw, 28px);
  color: #fff;
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.06;
  font-weight: 500;
}
.cv3-chips {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cv3-chips li {
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 30px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.04);
}
.cv3-addons .cv3-link {
  margin-top: auto;
  color: #fff;
  border-bottom-color: rgba(255,255,255,.55);
}
.cv3-addons:hover .cv3-link {
  color: var(--gold, #c19a4d);
  border-color: var(--gold, #c19a4d);
}

@media (max-width: 1000px) {
  .cv3-grid { grid-template-columns: 1fr; }
  .cv3-events { grid-template-columns: 1fr; min-height: 0; }
  .cv3-events-img { aspect-ratio: 16/10; min-height: 0; }
  .cv3-types { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .cv3-events-body { padding: 22px 22px 22px; gap: 12px; }
  .cv3-events-body h3 { font-size: 22px; }
  .cv3-types { grid-template-columns: 1fr; gap: 12px; }
  .cv3-addons-body { padding: 20px 20px 22px; gap: 12px; }
}

/* ============================================================
   19. TRUST ROW v3 — borderless, lighter, less corporate
   ============================================================ */
.trust-bar-v2 .trust-row {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.trust-bar-v2 .trust-stat {
  border: none !important;
  padding: 18px 22px !important;
  min-height: 0 !important;
  text-align: left;
  gap: 8px;
}
@media (max-width: 900px) {
  .trust-bar-v2 .trust-row { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .trust-bar-v2 .trust-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .trust-bar-v2 .trust-stat { padding: 12px 8px !important; min-height: 0; }
  .trust-bar-v2 .trust-stat .big { font-size: 36px; }
}

/* ============================================================
   20. BOAT CATEGORY CARDS — kicker removed (via HTML);
       turn the link into a button
   ============================================================ */
.cat-link {
  background: var(--brand, #102c54) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 18px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background .2s ease, gap .2s ease !important;
}
.cat-link svg { stroke: currentColor; }
.cat-card:hover .cat-link {
  background: var(--brand-warm, #C19A4D) !important;
  color: #fff !important;
  border-color: transparent !important;
  gap: 14px !important;
}
.cat-body h3 { margin-top: 0 !important; }
.cat-body { gap: 16px; }

/* ============================================================
   21. SERVICES — REDESIGN with colored top + illustrated icon
   ============================================================ */
.services .service-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px !important;
  border: none !important;
}
.services .service-card {
  background: #fff !important;
  border: 1px solid var(--hairline, rgba(27,31,38,.10)) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
}
.services .service-card:hover {
  transform: translateY(-3px);
  border-color: rgba(16,44,84,.25);
  box-shadow: 0 22px 48px -28px rgba(16,44,84,.32);
}
.services .service-card .num {
  position: absolute !important;
  top: 14px !important;
  right: 16px !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  color: rgba(255,255,255,.7) !important;
  z-index: 2;
  font-weight: 600;
}
.services .service-card .icon {
  margin: 0 !important;
  padding: 28px 22px 24px !important;
  background: var(--svc-tone, linear-gradient(180deg, #ddeaf5 0%, #c6d8eb 100%));
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  color: var(--svc-ink, #102c54) !important;
  border-bottom: 1px solid var(--hairline, rgba(27,31,38,.08));
}
.services .service-card .icon svg {
  width: 80px !important;
  height: 80px !important;
  stroke-width: 1.3;
}
.services .service-card:nth-child(8n+1) { --svc-tone: linear-gradient(180deg, #e6efff 0%, #c4d8f4 100%); --svc-ink: #1a4078; }
.services .service-card:nth-child(8n+2) { --svc-tone: linear-gradient(180deg, #f8e9d8 0%, #ecd3b4 100%); --svc-ink: #8a5a2d; }
.services .service-card:nth-child(8n+3) { --svc-tone: linear-gradient(180deg, #ddeaf5 0%, #b8d0e6 100%); --svc-ink: #1a4078; }
.services .service-card:nth-child(8n+4) { --svc-tone: linear-gradient(180deg, #e4ecde 0%, #c2d3b6 100%); --svc-ink: #4d6638; }
.services .service-card:nth-child(8n+5) { --svc-tone: linear-gradient(180deg, #f3e8de 0%, #e0cfbc 100%); --svc-ink: #8a5a2d; }
.services .service-card:nth-child(8n+6) { --svc-tone: linear-gradient(180deg, #e0e4ec 0%, #c4cad7 100%); --svc-ink: #2c3744; }
.services .service-card:nth-child(8n+7) { --svc-tone: linear-gradient(180deg, #ecdfe8 0%, #d7c1d2 100%); --svc-ink: #6b3d5d; }
.services .service-card:nth-child(8n+8) { --svc-tone: linear-gradient(180deg, #d5e6e3 0%, #b1ccc8 100%); --svc-ink: #2a5854; }

.services .service-card h3 {
  font-size: 18px !important;
  margin: 18px 18px 0 !important;
  letter-spacing: -0.02em;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink, #1B1F26);
}
.services .service-card p {
  margin: 8px 18px 16px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--ink-3, #5C636C) !important;
  flex: 1;
}
.services .service-card .link-arrow {
  margin: 0 18px 18px !important;
  align-self: flex-start;
  color: var(--brand, #102c54) !important;
  border-color: var(--brand, #102c54) !important;
  font-size: 12.5px !important;
}
@media (max-width: 1100px) {
  .services .service-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 760px) {
  .services .service-grid { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .services .service-card .icon { min-height: 110px; padding: 22px 16px 20px !important; }
  .services .service-card .icon svg { width: 60px !important; height: 60px !important; }
  .services .service-card h3 { font-size: 15px !important; margin: 14px 14px 0 !important; }
  .services .service-card p { margin: 6px 14px 12px !important; font-size: 12.5px !important; }
  .services .service-card .link-arrow { margin: 0 14px 14px !important; font-size: 11.5px !important; }
}

/* ============================================================
   22. CELEBRATE — bigger Events card; more occasions
   ============================================================ */
.cv3-grid {
  grid-template-columns: 2.5fr 1fr !important;
}
.cv3-events {
  min-height: 560px !important;
  grid-template-columns: 1.2fr 1fr !important;
}
.cv3-events-body {
  padding: 40px 44px 40px !important;
  gap: 18px !important;
}
.cv3-events-body h3 {
  font-size: clamp(28px, 2.8vw, 42px) !important;
}
.cv3-types {
  grid-template-columns: 1fr 1fr !important;
  gap: 18px 22px !important;
}
@media (max-width: 1100px) {
  .cv3-grid { grid-template-columns: 1.8fr 1fr !important; }
}
@media (max-width: 1000px) {
  .cv3-grid { grid-template-columns: 1fr !important; }
  .cv3-events { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .cv3-events-body { padding: 28px 28px 30px !important; }
}

/* ============================================================
   23. SOCIAL FEED
   ============================================================ */
.social-feed {
  background: var(--off, #f7f4ef);
  padding: clamp(48px, 5vw, 80px) 0 !important;
}
.social-feed .wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter, 28px); }
.social-feed .sf-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.social-feed .sf-head h2 {
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 500;
  margin: 0;
}
.social-feed .sf-head .sf-handles {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--ink-3, #5C636C);
  font-size: 14px;
}
.social-feed .sf-head .sf-handles a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand, #102c54);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}
.social-feed .sf-head .sf-handles a:hover { color: var(--brand-warm, #C19A4D); }
.sf-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.sf-tile {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 8px;
  background: #1a1a1a;
  display: block;
  text-decoration: none;
  color: #fff;
  transition: transform .25s ease;
}
.sf-tile:hover { transform: translateY(-3px); }
.sf-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease, opacity .3s ease;
}
.sf-tile:hover img { transform: scale(1.05); opacity: .82; }
.sf-tile .sf-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  background: rgba(0,0,0,.55);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  color: #fff;
}
.sf-tile .sf-badge svg { width: 14px; height: 14px; }
.sf-tile.is-video::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-left: 22px solid rgba(255,255,255,.92);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
  opacity: 0;
  transition: opacity .25s ease;
}
.sf-tile.is-video { background: linear-gradient(180deg, #20242b 0%, #0e1115 100%); }
.sf-tile.is-video img { opacity: .82; }
.sf-tile:hover.is-video::after { opacity: 1; }
.sf-tile .sf-meta {
  position: absolute;
  left: 10px; bottom: 10px;
  font-size: 11px;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.55);
  padding: 4px 8px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  backdrop-filter: blur(6px);
}
.sf-tile .sf-meta svg { width: 10px; height: 10px; }
@media (max-width: 1000px) {
  .sf-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .sf-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   24. FOOTER — tighter line-height between links
   ============================================================ */
.site-footer .footer-grid .col ul {
  gap: 4px !important;
}
.site-footer .footer-grid .col ul a {
  display: block;
  padding: 3px 0;
  line-height: 1.3 !important;
  font-size: 13.5px !important;
}
.site-footer .footer-grid .col h4 { margin-bottom: 14px !important; }
.site-footer .footer-grid { padding-bottom: 38px !important; gap: 40px !important; }
.site-footer { padding: 60px 0 28px !important; }
.site-footer .nap .ic-line { padding: 6px 0 !important; font-size: 13.5px !important; line-height: 1.35 !important; }

/* ============================================================
   25. ITINERARY — bigger time markers with colored dot,
       compact text
   ============================================================ */
.itin-list .itin-item {
  position: relative;
  padding-left: 90px !important;
}
.itin-list .itin-item .t {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute;
  left: 0;
  top: 0;
  width: 70px;
  height: 70px;
  background: var(--brand, #102c54);
  color: #fff !important;
  border-radius: 50%;
  font-family: var(--f-display, "Archivo", system-ui);
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.itin-list .itin-item h4 {
  font-size: 18px !important;
  margin: 4px 0 6px !important;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.itin-list .itin-item p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--ink-3, #5C636C);
  max-width: 56ch;
}
.itin-list .itin-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 70px;
  bottom: -16px;
  width: 2px;
  background: var(--hairline, rgba(27,31,38,.10));
}
.itin-list { display: flex; flex-direction: column; gap: 28px !important; }

/* ============================================================
   26. HALF-DAY / FULL-DAY TOUR LISTING CARDS — redesigned
   ============================================================ */
.tours-grid .tour-listing-card,
.tour-listing-card {
  background: #fff !important;
  border: 1px solid var(--hairline, rgba(27,31,38,.10)) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 0 !important;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
  align-items: stretch;
}
.tour-listing-card:hover {
  transform: translateY(-3px);
  border-color: rgba(16,44,84,.25);
  box-shadow: 0 22px 48px -28px rgba(16,44,84,.32);
}
.tour-listing-card > .img {
  position: relative;
  min-height: 200px;
  aspect-ratio: auto !important;
  overflow: hidden;
}
.tour-listing-card > .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.tour-listing-card:hover > .img img { transform: scale(1.05); }
.tour-listing-card > .img .duration-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,.96);
  color: var(--ink, #1B1F26);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}
.tour-listing-card > .body {
  padding: 26px 28px !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.tour-listing-card .body h3 {
  font-size: clamp(22px, 2vw, 26px) !important;
  margin: 0 !important;
  letter-spacing: -0.025em;
  line-height: 1.08;
  font-weight: 500;
}
.tour-listing-card .body p {
  margin: 0 !important;
  color: var(--ink-3, #5C636C) !important;
  font-size: 14px !important;
  line-height: 1.5;
  max-width: 58ch;
}
.tour-listing-card .body .row,
.tour-listing-card .body .meta-row,
.tour-listing-card .body .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.tour-listing-card .body .row > *,
.tour-listing-card .body .meta-row > *,
.tour-listing-card .body .meta > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tour-listing-card .cta,
.tour-listing-card .body .cta {
  margin-top: 6px;
  align-self: flex-start;
  background: var(--brand, #102c54);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .2s ease, gap .2s ease;
}
.tour-listing-card:hover .cta {
  background: var(--brand-warm, #C19A4D);
  gap: 14px;
}
@media (max-width: 760px) {
  .tour-listing-card { grid-template-columns: 1fr !important; }
  .tour-listing-card > .img { min-height: 200px; aspect-ratio: 16/10 !important; }
  .tour-listing-card > .body { padding: 18px 20px 20px !important; }
}

/* ============================================================
   27. EXTRA BOTTOM PADDING / SECTION TIGHTNESS
   ============================================================ */
.section-head { margin-bottom: clamp(20px, 2.5vw, 32px) !important; }
.section-foot { margin-top: clamp(24px, 2.5vw, 36px) !important; }

/* h2 marginTop hooks left by inline style="margin-top:18px;" — neutralise */
section h2[style*="margin-top:18px"] { margin-top: 0 !important; }

/* ============================================================
   28. GENERIC GALLERY (used on day-trips)
   ============================================================ */
.gallery-strip {
  background: var(--off, #f7f4ef);
}
.gallery-strip .wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter, 28px); }
.gallery-strip .gs-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.gallery-strip .gs-head h2 {
  font-size: clamp(28px, 3vw, 44px);
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 500;
}
.gallery-strip .gs-head p {
  margin: 0;
  color: var(--ink-3, #5C636C);
  font-size: 14.5px;
  max-width: 38ch;
}
.gs-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 220px 220px;
  gap: 10px;
}
.gs-grid > a {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: block;
}
.gs-grid > a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.gs-grid > a:hover img { transform: scale(1.04); }
.gs-grid > a:nth-child(1) { grid-row: 1 / 3; }
.gs-grid > a:nth-child(4) { grid-column: 2 / 4; }
@media (max-width: 760px) {
  .gs-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px 160px; }
  .gs-grid > a:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 3; }
  .gs-grid > a:nth-child(4) { grid-column: 1 / 3; }
}

/* ===== pages-v9.css ===== */
/* ============================================================
   pages-v9.css — May 2026 redesign pass
   - Warmer complementary palette (cream/peach/mint/lavender tints)
   - Fixed broken horizontal tour-listing-card → vertical
   - Removed star tag from home featured tours
   - Rebuilt service grid (numbered icon image tiles + tags)
   - Better-looking pill tags (color-coded)
   - Expanded events + add-ons block, copy reduced
   - Boat-transfer-detail "What's included" + FAQ redesign
   ============================================================ */

:root {
  --warm:        #C19A4D;
  --warm-soft:   #EADFC4;
  --warm-tint:   #FBF3E8;
  --peach-tint:  #FCEBE0;
  --mint-tint:   #E6EFE4;
  --sky-tint:    #E6EEF6;
  --lavender-tint:#EFE7F0;
  --ink:         #102C54;
  --ink-2:       #2B313A;
  --ink-3:       #5C636C;
  --hairline:    rgba(27,31,38,.10);
}

/* ============================================================
   TAGS / PILLS — friendlier, color-coded
   ============================================================ */
.tour-listing-card .stops .pill,
.tour-listing-card .pill,
.pill {
  background: var(--warm-tint) !important;
  border: 1px solid rgba(193,154,77,.20) !important;
  color: var(--ink-2, #2B313A) !important;
  font-family: var(--f-body, "Manrope", system-ui);
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* color-rotate pills inside a card */
.tour-listing-card .stops .pill:nth-child(4n+1),
.pill-warm { background: var(--peach-tint) !important; border-color: rgba(193,154,77,.18) !important; }
.tour-listing-card .stops .pill:nth-child(4n+2),
.pill-sky { background: var(--sky-tint) !important; border-color: rgba(91,130,158,.20) !important; }
.tour-listing-card .stops .pill:nth-child(4n+3),
.pill-mint { background: var(--mint-tint) !important; border-color: rgba(95,138,90,.22) !important; }
.tour-listing-card .stops .pill:nth-child(4n+4),
.pill-lav { background: var(--lavender-tint) !important; border-color: rgba(120,90,140,.22) !important; }

/* ============================================================
   FIX: .tour-listing-card → vertical layout
   The card was horizontal (280px image | 1fr body) but it lives in a
   3-col grid, so each card was ~400px wide → image hogged the row and
   body was crushed. Force vertical at all widths inside .tours-grid.
   ============================================================ */
.tours-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
}
.tours-grid[style*="repeat(2"] { grid-template-columns: repeat(2, 1fr) !important; }
.tours-grid[style*="repeat(3"] { grid-template-columns: repeat(3, 1fr) !important; }

.tours-grid .tour-listing-card,
.tour-listing-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  background: #fff !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  text-decoration: none;
  color: inherit;
  transition: transform .28s ease, border-color .25s ease, box-shadow .25s ease !important;
  box-shadow: 0 1px 0 rgba(16,44,84,.02);
}
.tour-listing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(193,154,77,.35);
  box-shadow: 0 26px 48px -28px rgba(16,44,84,.30);
}
.tour-listing-card > .img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
  overflow: hidden;
  flex: 0 0 auto;
}
.tour-listing-card > .img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.tour-listing-card:hover > .img img { transform: scale(1.05); }
.tour-listing-card > .img .duration-tag {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,.96);
  color: var(--ink, #102C54);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 6px 11px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(16,44,84,.08);
}

.tour-listing-card > .body {
  padding: 22px 22px 22px !important;
  display: flex; flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}
.tour-listing-card .body h3 {
  font-size: 22px !important;
  letter-spacing: -0.02em;
  margin: 0 !important;
  font-weight: 600;
  line-height: 1.15;
}
.tour-listing-card .body .meta-row,
.tour-listing-card .body .row,
.tour-listing-card .body .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
  padding-bottom: 0;
  border: none;
}
.tour-listing-card .body .meta-row > span,
.tour-listing-card .body .row > * {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tour-listing-card .body .meta-row svg,
.tour-listing-card .body .row svg {
  color: var(--warm);
  width: 16px; height: 16px;
}
.tour-listing-card .body p,
.tour-listing-card .body p.desc {
  margin: 0 !important;
  color: var(--ink-3) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  max-width: none;
}
.tour-listing-card .stops {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.tour-listing-card .foot {
  margin-top: auto !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.tour-listing-card .foot .price {
  font-family: var(--f-display, "Archivo", system-ui);
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 600;
}
.tour-listing-card .foot .price small {
  display: block;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
  font-family: var(--f-body, "Manrope", system-ui);
  font-weight: 500;
}
.tour-listing-card .cta-lk {
  background: var(--ink, #102C54) !important;
  color: #fff !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  border: none !important;
  transition: background .2s ease, gap .2s ease !important;
}
.tour-listing-card .cta-lk svg { stroke: #fff !important; }
.tour-listing-card:hover .cta-lk {
  background: var(--warm, #C19A4D) !important;
  gap: 12px !important;
}

@media (max-width: 1000px) {
  .tours-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .tours-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   HOMEPAGE — Most popular boat tours: kill star rating chip
   ============================================================ */
.home-featured-card .review-tag { display: none !important; }
.home-featured-card .duration-tag {
  background: rgba(255,255,255,.96) !important;
  color: var(--ink, #102C54) !important;
  border: 1px solid rgba(16,44,84,.08);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: .14em;
}

/* Add neat little tag row below hook on home featured card */
.home-featured-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.home-featured-card .tags .tg {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--warm-tint);
  border: 1px solid rgba(193,154,77,.18);
  color: var(--ink-2);
  letter-spacing: 0;
  text-transform: none;
}
.home-featured-card .tags .tg:nth-child(3n+2) { background: var(--sky-tint); border-color: rgba(91,130,158,.22); }
.home-featured-card .tags .tg:nth-child(3n+3) { background: var(--mint-tint); border-color: rgba(95,138,90,.22); }

/* ============================================================
   HOMEPAGE — "Find your perfect day" service grid
   New tile layout w/ icon image, tags, slight peach hover
   ============================================================ */
.services-v9 { background: var(--off, #F7F4EF) !important; padding: clamp(48px, 5.5vw, 88px) 0; }
.svc-grid-v9 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.svc-card-v9 {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  overflow: hidden;
}
.svc-card-v9::after {
  /* tiny warm accent stripe at top to differentiate vs cold corp look */
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--warm-soft), transparent);
  opacity: .55;
  pointer-events: none;
}
.svc-card-v9:hover {
  transform: translateY(-4px);
  border-color: rgba(193,154,77,.35);
  box-shadow: 0 26px 48px -32px rgba(16,44,84,.28);
}
.svc-card-v9 .num {
  position: absolute;
  top: 18px; right: 20px;
  font-family: var(--f-body, "Manrope", system-ui);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ink-3, #5C636C);
  font-weight: 500;
  background: var(--off, #F7F4EF);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 3px 8px;
  z-index: 2;
}
.svc-card-v9 .ic-wrap {
  width: 88px;
  height: 88px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--warm-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 88px;
  transition: transform .35s ease;
}
.svc-card-v9:hover .ic-wrap { transform: translateY(-2px) rotate(-2deg); }
.svc-card-v9 .ic-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.svc-card-v9 h3 {
  font-family: var(--f-display, "Archivo", system-ui);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink, #102C54);
  line-height: 1.15;
  margin: 6px 0 0;
}
.svc-card-v9 p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-3, #5C636C);
}
.svc-card-v9 .svc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.svc-card-v9 .svc-tags .tg {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--warm-tint);
  border: 1px solid rgba(193,154,77,.20);
  color: var(--ink-2);
}
.svc-card-v9 .svc-tags .tg:nth-child(3n+2) { background: var(--sky-tint); border-color: rgba(91,130,158,.22); }
.svc-card-v9 .svc-tags .tg:nth-child(3n+3) { background: var(--mint-tint); border-color: rgba(95,138,90,.22); }
.svc-card-v9 .svc-link {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink, #102C54);
  transition: gap .2s ease, color .2s ease;
}
.svc-card-v9:hover .svc-link { color: var(--warm, #C19A4D); gap: 14px; }
.svc-card-v9 .svc-link svg { width: 14px; height: 10px; }

@media (max-width: 1080px) { .svc-grid-v9 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .svc-grid-v9 { grid-template-columns: 1fr; } }

/* ============================================================
   HOMEPAGE — Events + Add-ons block (expanded events, compact text)
   ============================================================ */
.celebrate-v9 {
  background: linear-gradient(180deg, var(--off, #F7F4EF) 0%, #FBF3E8 100%);
  padding: clamp(56px, 6vw, 96px) 0;
}
.cv9-head {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 36px;
}
.cv9-head h2 {
  font-size: clamp(36px, 4.2vw, 56px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin: 12px 0 0;
}
.cv9-head h2 em { font-style: italic; font-weight: 300; color: var(--warm); }
.cv9-head .lead { color: var(--ink-3); }

.cv9-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
}

/* Events — feature card with photo + event tiles */
.cv9-events {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  display: grid;
  grid-template-rows: 320px auto;
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease, box-shadow .3s ease;
}
.cv9-events:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 60px -34px rgba(16,44,84,.30);
}
.cv9-events .photo {
  position: relative;
  overflow: hidden;
  background: #ddd;
}
.cv9-events .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.cv9-events:hover .photo img { transform: scale(1.04); }
.cv9-events .photo .badge {
  position: absolute;
  top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.96);
  color: var(--ink, #102C54);
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.cv9-events .photo .badge svg { width: 14px; height: 14px; color: var(--warm); }
.cv9-events .photo .ovl {
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 24px 22px;
  background: linear-gradient(0deg, rgba(16,28,46,.78), rgba(16,28,46,0));
  color: #fff;
}
.cv9-events .photo .ovl h3 {
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  line-height: 1.05;
}
.cv9-events .photo .ovl h3 em { font-style: italic; font-weight: 300; color: var(--warm-soft); }

.cv9-events .body {
  padding: 22px 24px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  border-top: 1px solid var(--hairline);
}
.cv9-events .body .occ {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 14px;
  background: var(--off, #F7F4EF);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  transition: background .2s ease, border-color .2s ease;
}
.cv9-events:hover .body .occ { background: #fff; border-color: rgba(193,154,77,.22); }
.cv9-events .body .occ svg {
  width: 20px; height: 20px;
  color: var(--warm, #C19A4D);
  stroke-width: 1.6;
}
.cv9-events .body .occ strong {
  font-family: var(--f-display);
  font-size: 14px;
  color: var(--ink, #102C54);
  font-weight: 600;
}
.cv9-events .body .occ span {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}

.cv9-events .foot {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
}
.cv9-events .foot .cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: background .2s ease, gap .2s ease;
}
.cv9-events:hover .foot .cta { background: var(--warm); gap: 14px; }
.cv9-events .foot .cta svg { stroke: #fff; }
.cv9-events .foot .note {
  font-size: 12.5px;
  color: var(--ink-3);
}

/* Add-ons — compact card */
.cv9-addons {
  background: var(--ink, #102C54);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}
.cv9-addons:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 60px -34px rgba(16,44,84,.40);
}
.cv9-addons .photo {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.cv9-addons .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .85;
}
.cv9-addons .body {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.cv9-addons .kicker {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warm-soft);
  font-weight: 600;
}
.cv9-addons h3 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
  line-height: 1.05;
}
.cv9-addons h3 em { font-style: italic; font-weight: 300; color: var(--warm-soft); }
.cv9-addons .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cv9-addons .chips li {
  list-style: none;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.cv9-addons .cta-row {
  margin-top: auto;
  padding-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--warm-soft);
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 1px solid rgba(244,232,216,.4);
  padding-bottom: 5px;
  align-self: flex-start;
  transition: gap .2s ease;
}
.cv9-addons:hover .cta-row { gap: 14px; }

@media (max-width: 980px) {
  .cv9-head { grid-template-columns: 1fr; gap: 18px; }
  .cv9-grid { grid-template-columns: 1fr; }
  .cv9-events { grid-template-rows: 260px auto; }
  .cv9-events .body { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cv9-events .body { grid-template-columns: 1fr; }
}

/* Hide the old celebrate-v3 block when v9 is present */
.has-celebrate-v9 .celebrate-v3 { display: none !important; }

/* ============================================================
   BOAT-TRANSFER-DETAIL — Included + FAQ redesign
   ============================================================ */
.bt-included {
  background: linear-gradient(180deg, #FBF3E8 0%, #fff 100%);
  padding: clamp(56px, 6vw, 96px) 0;
}
.bt-included .wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.bt-included .head {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 40px;
}
.bt-included .head h2 {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin: 12px 0 0;
}
.bt-included .head h2 em { font-style: italic; font-weight: 300; color: var(--warm); }
.bt-included .head .eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warm);
  font-weight: 700;
}
.bt-included .head .lead {
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1.55;
}

.bt-inc-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.bt-inc-list {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: 32px 32px 28px;
}
.bt-inc-list h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  color: var(--ink);
}
.bt-inc-list .sub {
  font-size: 14px;
  color: var(--ink-3);
  margin: 0 0 24px;
}
.bt-inc-list ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
}
.bt-inc-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.bt-inc-list li .tick {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--warm-tint);
  color: var(--warm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bt-inc-list li .tick svg { width: 12px; height: 12px; stroke-width: 2.2; }

.bt-inc-extras {
  background: var(--ink);
  color: #fff;
  border-radius: 22px;
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
}
.bt-inc-extras .kicker {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warm-soft);
  font-weight: 600;
}
.bt-inc-extras h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 10px 0 6px;
  line-height: 1.1;
}
.bt-inc-extras h3 em { font-style: italic; font-weight: 300; color: var(--warm-soft); }
.bt-inc-extras p.intro {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  margin: 0 0 20px;
  line-height: 1.5;
}
.bt-inc-extras ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bt-inc-extras li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 13.5px;
  line-height: 1.4;
}
.bt-inc-extras li .ic {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--warm);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.bt-inc-extras .foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
}

@media (max-width: 980px) {
  .bt-included .head { grid-template-columns: 1fr; gap: 14px; }
  .bt-inc-layout { grid-template-columns: 1fr; }
  .bt-inc-list ul { grid-template-columns: 1fr; }
}

/* --- FAQ redesign --- */
.bt-faq {
  background: var(--off, #F7F4EF);
  padding: clamp(56px, 6vw, 96px) 0;
}
.bt-faq .wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.bt-faq .head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 40px;
}
.bt-faq .head .eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--warm);
  font-weight: 700;
}
.bt-faq .head h2 {
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.0;
  margin: 12px 0 0;
}
.bt-faq .head h2 em { font-style: italic; font-weight: 300; color: var(--warm); }
.bt-faq .head .lead {
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1.55;
}
.bt-faq-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.bt-q {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .2s ease, transform .2s ease;
}
.bt-q:hover { border-color: rgba(193,154,77,.35); transform: translateY(-2px); }
.bt-q .q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.25;
}
.bt-q .q .num {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--warm-tint);
  color: var(--warm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}
.bt-q .a {
  margin: 0 0 0 40px;
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.55;
}
.bt-faq-aside {
  grid-column: 1/-1;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bt-faq-aside .txt strong {
  display: block;
  font-family: var(--f-display);
  font-size: 16px;
  color: var(--ink);
  font-weight: 600;
}
.bt-faq-aside .txt span {
  font-size: 13.5px;
  color: var(--ink-3);
}
.bt-faq-aside .acts {
  display: flex;
  gap: 10px;
}
.bt-faq-aside .acts a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.bt-faq-aside .acts a.wa { background: #25D366; }
.bt-faq-aside .acts a:hover { background: var(--warm); }
.bt-faq-aside .acts a.wa:hover { background: #1da851; }
@media (max-width: 980px) {
  .bt-faq .head { grid-template-columns: 1fr; gap: 14px; }
  .bt-faq-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   Hide old sections we are replacing on the boat-transfer-detail page
   ============================================================ */
.has-bt-v9 #legacy-bt-included,
.has-bt-v9 #legacy-bt-faq { display: none !important; }

/* ===== redesign-v10.css ===== */
/* ============================================================
   redesign-v10.css — "less corporate, more Mediterranean"
   Loaded LAST on every page (after pages-v9.css).
   - Soft pill buttons everywhere
   - Warmer terracotta primary actions
   - Friendlier service cards w/ tinted illustration tiles
   - Richer yacht-charter package cards
   - Icon-led on-water extras
   ============================================================ */

:root {
  --warm-strong: #9A7A30;
  --teal:        #C19A4D;
  --teal-bright: #D9B86A;
  --tint-peach:  #FCEBE0;
  --tint-sky:    #E6EEF6;
  --tint-mint:   #E6EFE4;
  --tint-lav:    #EFE7F0;
  --tint-coral:  #FBE3DC;

  /* Font — Google Sans-like geometric sans, sitewide */
  --f-display: "Outfit", system-ui, -apple-system, sans-serif;
  --f-body:    "Outfit", system-ui, -apple-system, sans-serif;
}

/* ============================================================
   1. SOFT PILL BUTTONS — sitewide
   ============================================================ */
.btn {
  border-radius: 999px !important;
  padding: 15px 28px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}
.btn-primary {
  background: var(--warm, #C19A4D) !important;
  border-color: var(--warm, #C19A4D) !important;
  color: var(--ink, #102C54) !important;
  font-weight: 700 !important;
}
.btn-primary:hover {
  background: var(--ink, #102C54) !important;
  border-color: var(--ink, #102C54) !important;
  color: #fff !important;
}
/* hero keeps a light primary on the photo, just rounded */
.hero-ctas .btn-primary {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--ink, #102C54) !important;
}
.hero-ctas .btn-primary:hover {
  background: var(--warm, #C19A4D) !important;
  border-color: var(--warm, #C19A4D) !important;
  color: var(--ink, #102C54) !important;
}
.btn-outline:hover {
  background: var(--warm, #C19A4D) !important;
  border-color: var(--warm, #C19A4D) !important;
  color: var(--ink, #102C54) !important;
}
.header-cta { border-radius: 999px !important; }
.whatsapp-fab { border-radius: 999px !important; }
form.inquiry button[type="submit"] { border-radius: 999px !important; }
.btn-ghost { border-radius: 0 !important; }

/* ============================================================
   2. SERVICE CARDS — "Find your perfect day"
   warmer, friendlier, tinted illustration tiles + pill CTA
   ============================================================ */
.services-v9 .cv9-head { margin-bottom: clamp(28px, 3.5vw, 44px); }

.svc-card-v9 {
  border-radius: 22px !important;
  padding: 24px 22px 22px !important;
  gap: 10px !important;
  background: #fff !important;
}
/* drop the cold corporate top stripe */
.svc-card-v9::after { display: none !important; }

.svc-card-v9 .ic-wrap {
  width: 92px !important;
  height: 92px !important;
  flex: 0 0 92px !important;
  border-radius: 22px !important;
  margin-bottom: 2px;
}
.svc-card-v9.sv-tint-1 .ic-wrap { background: var(--tint-peach) !important; }
.svc-card-v9.sv-tint-2 .ic-wrap { background: var(--tint-sky) !important; }
.svc-card-v9.sv-tint-3 .ic-wrap { background: var(--tint-mint) !important; }
.svc-card-v9.sv-tint-4 .ic-wrap { background: var(--tint-lav) !important; }
.svc-card-v9:hover .ic-wrap { transform: translateY(-3px) rotate(-3deg); }

.svc-card-v9 .num {
  background: transparent !important;
  border: none !important;
  color: rgba(16,44,84,.28) !important;
  font-family: var(--f-display, "Archivo", system-ui) !important;
  font-size: 22px !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  top: 20px !important;
  right: 22px !important;
  padding: 0 !important;
}
.svc-card-v9 h3 { font-size: 21px !important; }
.svc-card-v9 p { font-size: 13.5px !important; }

/* DISTINCT filled CTA — stands clearly apart from chips + icon */
.svc-card-v9 .svc-link {
  margin-top: auto !important;
  padding: 12px 18px !important;
  border-top: none !important;
  align-self: stretch;
  justify-content: center;
  background: var(--warm, #C19A4D) !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--ink, #102C54) !important;
  box-shadow: 0 8px 18px -10px rgba(193,154,77,.7);
}
.svc-card-v9 .svc-link svg { stroke: var(--ink, #102C54) !important; }
.svc-card-v9:hover .svc-link {
  background: var(--ink, #102C54) !important;
  color: #fff !important;
  gap: 12px;
}
.svc-card-v9:hover .svc-link svg { stroke: #fff !important; }

/* ============================================================
   3. YACHT CHARTER — package cards
   ============================================================ */
.charter-v10 .intro { align-items: end; }
.charter-v10 .intro .h-eyebrow { color: var(--warm-soft, #EADFC4) !important; }

.charter-v10 .charter-trip {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 22px !important;
  padding: 26px 26px 24px !important;
  gap: 14px !important;
}
.charter-v10 .charter-trip:hover {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(255,255,255,.28) !important;
}
.charter-v10 .charter-trip.is-featured {
  background: rgba(193,154,77,.14) !important;
  border-color: rgba(193,154,77,.55) !important;
}
.charter-v10 .charter-trip.is-featured .tag {
  border-radius: 999px !important;
  background: var(--warm, #C19A4D) !important;
  padding: 6px 13px !important;
  letter-spacing: .12em !important;
}
.charter-v10 .ctop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.charter-v10 .ctop .cicon {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--warm-soft, #EADFC4);
}
.charter-v10 .ctop .cicon svg { width: 22px; height: 22px; }
.charter-v10 .charter-trip.is-featured .ctop .cicon {
  background: rgba(193,154,77,.25);
  border-color: rgba(193,154,77,.5);
  color: #fff;
}
.charter-v10 .charter-trip h3 {
  font-size: 22px !important;
  margin: 2px 0 0 !important;
}
.charter-v10 .trip-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 999px;
  transition: background .2s ease, gap .2s ease, border-color .2s ease;
}
.charter-v10 .trip-cta svg { width: 14px; height: 9px; }
.charter-v10 .charter-trip:hover .trip-cta {
  background: var(--warm, #C19A4D);
  border-color: var(--warm, #C19A4D);
  gap: 13px;
}
.charter-v10 .foot { align-items: center !important; }
.charter-v10 .foot .incl {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 22px !important;
  max-width: none !important;
}
.charter-v10 .foot .incl span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.85);
  font-size: 13.5px;
  font-weight: 500;
}
.charter-v10 .foot .incl span svg {
  width: 16px; height: 16px;
  color: var(--warm-soft, #EADFC4);
}
.charter-v10 .foot .btn-outline-light { border-radius: 999px !important; }

/* ============================================================
   4. ON-WATER EXTRAS — icon grid
   ============================================================ */
.cv9-addons-v10 .photo { height: 168px !important; }
.cv9-addons-v10 .addon-grid {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.cv9-addons-v10 .addon-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 14px 6px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  transition: background .2s ease, border-color .2s ease;
}
.cv9-addons-v10:hover .addon-grid li {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}
.cv9-addons-v10 .addon-grid .ai {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(193,154,77,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--warm-soft, #EADFC4);
}
.cv9-addons-v10 .addon-grid .ai svg { width: 19px; height: 19px; }
.cv9-addons-v10 .cta-row { border-bottom: none !important; }

/* ============================================================
   5. MEDITERRANEAN WARMTH — small touches
   ============================================================ */
/* warmer eyebrow accent rule */
.h-eyebrow { color: var(--warm-strong) !important; }
.charter-v10 .h-eyebrow, .cv9-addons .kicker { color: var(--warm-soft, #EADFC4) !important; }

@media (max-width: 980px) {
  .cv9-addons-v10 .addon-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .cv9-addons-v10 .addon-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   6. ADRIATIC TEAL — accent polish
   ============================================================ */
/* bright accent for italic display words on dark photos */
.hero h1 em,
.subhero h1 em { color: var(--teal-bright) !important; }

/* review stars stay warm gold — teal everywhere else is intentional */

/* ============================================================
   7. MORE COLOUR — tinted icons & accents across all pages
   ============================================================ */
/* "Why" value icons → soft teal coins */
.why-item .ic,
.why-grid-v2 .wcard .ic-circle,
.why-private .wp-item .ic,
.transfer-card .ic,
.service-card .icon {
  color: var(--teal) !important;
}
.why-grid-v2 .wcard .ic-circle {
  background: #F5ECD6 !important;
  border-color: #E7D7AE !important;
}
/* subhero stat coins get a tinted ring */
.subhero .stat .ic {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--teal-bright) !important;
}
/* rotate soft tints through generic card badges + counts */
.cat-card .cat-count,
.tour-card .badge,
.tour-listing-card .duration-tag,
.daytrips .tour-card .badge {
  background: #F5ECD6 !important;
  color: var(--warm-strong) !important;
  border: 1px solid #E7D7AE !important;
}
/* gentle tinted surfaces so pages feel less flat-white */
.why, .why-private, .charter-value, .incl-3col, .faq-block-light {
  background: linear-gradient(180deg, #FAF6EC 0%, var(--off, #F7F4EF) 70%) !important;
}
/* FAQ plus/minus markers → teal */
.faq-item .marker::before,
.faq-item .marker::after { background: var(--teal) !important; }

/* eyebrow line accent stays teal */
.h-eyebrow::before { background: currentColor; }

/* ============================================================
   8. UX & ACCESSIBILITY — sitewide
   ============================================================ */
/* visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--teal-bright) !important;
  outline-offset: 2px !important;
  border-radius: 8px;
}
/* form fields get a real focus cue, not just removed outline */
form.inquiry input:focus,
form.inquiry select:focus,
form.inquiry textarea:focus {
  border-bottom-color: var(--teal-bright) !important;
}

/* anchored sections clear the sticky header when jumped to */
section[id],
[id].subhero,
#routes, #faq, #inquiry, #contact, #fleet, #services {
  scroll-margin-top: 88px;
}

/* clearer current-page + hover state in nav */
.primary-nav a[aria-current="page"],
.primary-nav a.is-current {
  border-bottom-color: var(--teal-bright) !important;
  color: var(--teal) !important;
}

/* comfortable tap targets on mobile */
@media (max-width: 720px) {
  .primary-nav a,
  .footer-grid .col a,
  .lang-switch a { padding-top: 8px; padding-bottom: 8px; }
  /* top ribbon was cramped / clipped on small screens */
  .top-ribbon .wrap { flex-wrap: wrap; gap: 6px 14px; row-gap: 6px; }
  .top-ribbon .rb-utility .it:not(.it-wa) { display: none; }
  .top-ribbon .rb-rating .src { display: none; }
}

/* respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  *:hover { transform: none !important; }
}

/* ============================================================
   9. ICONS — strip backgrounds, borders & rings (sitewide)
   Just the glyph; gold accent colour.
   ============================================================ */
.why-grid-v2 .wcard .ic-circle,
.why-v2 .wcard .ic-circle,
.how-v2 .h-card .ic-circle,
.how-strip .ic-circle,
.faq-group-head .ic,
.subhero .stat-bar .stat .ic,
.subhero .stat .ic,
.charter-v10 .ctop .cicon,
.charter-v10 .charter-trip.is-featured .ctop .cicon,
.cv9-addons-v10 .addon-grid .ai,
.bt-inc-list li .tick,
.bt-inc-extras li .ic,
.ev-enquiry .reassure .item .ic,
.included-band .ib .ic,
.tm-included .inc-item .ic {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* keep glyphs visible in the right tone */
.why-grid-v2 .wcard .ic-circle,
.why-v2 .wcard .ic-circle,
.how-v2 .h-card .ic-circle,
.faq-group-head .ic,
.bt-inc-list li .tick {
  color: var(--warm, #C19A4D) !important;
}
.charter-v10 .ctop .cicon,
.cv9-addons-v10 .addon-grid .ai,
.subhero .stat-bar .stat .ic,
.subhero .stat .ic {
  color: var(--teal-bright, #D9B86A) !important;
}
.bt-inc-extras li .ic { color: var(--warm, #C19A4D) !important; }

/* ============================================================
   10. CARD BREATHING ROOM — a touch more height inside cards
   ============================================================ */
.svc-card-v9 { padding: 30px 24px 26px !important; gap: 13px !important; }
.tour-listing-card > .body { padding: 28px 26px 26px !important; gap: 15px !important; }
.tour-card .body { padding-top: 4px; }
.tour-card h3 { margin-top: 18px !important; }
.cat-body { padding: 34px 32px !important; }
.transfer-card .body { padding: 42px 38px !important; }
.charter-v10 .charter-trip { padding: 32px 28px 28px !important; gap: 17px !important; }
.cv9-events .body .occ { padding: 18px 16px !important; }
.cv9-addons-v10 .body { padding: 30px 28px 30px !important; gap: 17px !important; }
.cv9-addons-v10 .addon-grid li { padding: 18px 6px !important; }
.duration-card { padding: 32px 28px !important; }
.testi { padding: 40px 34px !important; }
.bt-q { padding: 26px 26px !important; gap: 12px !important; }
.bt-inc-list { padding: 38px 34px 34px !important; }
.bt-inc-list ul { gap: 18px 24px !important; }
.why-grid-v2 .wcard { padding: 30px 26px !important; }
.svc-card-v9 .svc-tags { margin-bottom: 4px; }

/* ===== redesign-v11.css ===== */
/* ============================================================
   redesign-v11.css — reference-inspired luxury charter look
   Loaded LAST (after redesign-v10.css).
   - No prices communicated anywhere
   - Solid (non-glass) yacht cards w/ photo + spec row
   - Photo-overlay review cards
   - "Talk to a Charter Specialist" lead band
   - Bolder display headings
   ============================================================ */

/* ============================================================
   0. NO PRICES — hide every price display sitewide
   ============================================================ */
.price,
.foot .price,
.duration-card .price,
.sticky-event-bar .price,
.tour-listing-card .foot .price { display: none !important; }
/* let the CTA sit naturally once price is gone */
.tour-listing-card .foot,
.tour-card .foot { justify-content: flex-end !important; }
.water-sports .foot { justify-content: flex-end !important; }

/* ============================================================
   1. BOLDER DISPLAY HEADINGS (echo the reference)
   ============================================================ */
h1 { font-weight: 800 !important; letter-spacing: -0.035em !important; }
h2 { font-weight: 800 !important; letter-spacing: -0.03em !important; }
.subhero h1, .hero h1 { font-weight: 800 !important; }

/* ============================================================
   2. YACHT CHARTER — solid yacht cards (image 4)
   White cards on the dark navy band; photo top + spec row.
   ============================================================ */
.yacht-charter-v11 .yacht-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 22px !important;
  min-height: 0 !important;
}
.yacht-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ink, #102C54);
  text-decoration: none;
  box-shadow: 0 30px 60px -34px rgba(0,0,0,.55);
  transition: transform .28s ease, box-shadow .28s ease;
}
.yacht-card:hover { transform: translateY(-5px); box-shadow: 0 40px 70px -30px rgba(0,0,0,.6); }

.yacht-card .yc-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.yacht-card .yc-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.yacht-card:hover .yc-photo img { transform: scale(1.05); }
.yacht-card .yc-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,28,46,.28) 0%, rgba(16,28,46,0) 38%, rgba(16,28,46,.82) 100%);
}
.yacht-card .yc-loc {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.92);
  color: var(--ink, #102C54);
  font-size: 11.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.yacht-card .yc-loc svg { width: 13px; height: 13px; color: var(--warm, #C19A4D); }
.yacht-card .yc-arrow {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink, #102C54);
  transition: background .2s ease, transform .2s ease;
}
.yacht-card .yc-arrow svg { width: 17px; height: 17px; }
.yacht-card:hover .yc-arrow { background: var(--warm, #C19A4D); transform: rotate(8deg); }
.yacht-card .yc-head {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.yacht-card .yc-head h3 {
  color: #fff; margin: 0;
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
}
.yacht-card .yc-head .yc-tag {
  flex: 0 0 auto;
  color: var(--warm, #C19A4D);
  font-size: 12px; font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.yacht-card .yc-body {
  padding: 22px 24px 24px;
  display: flex; flex-direction: column; gap: 16px;
  flex: 1;
}
.yacht-card .yc-class {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--ink-3, #5C636C); font-weight: 600;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--hairline, rgba(27,31,38,.10));
}
.yacht-card .yc-class .cat {
  letter-spacing: .14em; text-transform: uppercase; font-size: 11px;
  color: var(--ink-2, #2B313A); font-weight: 700;
}
.yacht-card .yc-specs { display: flex; flex-wrap: wrap; gap: 8px; }
.yacht-card .yc-specs span {
  display: inline-flex; align-items: center; gap: 8px;
  background: #F3F5F8;
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 11.5px; color: var(--ink-3, #5C636C); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.yacht-card .yc-specs span svg { width: 17px; height: 17px; color: var(--ink, #102C54); }
.yacht-card .yc-specs span b { color: var(--ink, #102C54); font-size: 14px; letter-spacing: -0.01em; }
.yacht-card .yc-body p {
  margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-3, #5C636C);
}
.yacht-card .yc-view {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hairline, rgba(27,31,38,.10));
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 800; font-size: 14px; color: var(--ink, #102C54);
  transition: color .2s ease;
}
.yacht-card .yc-view svg { width: 18px; height: 11px; transition: transform .2s ease; }
.yacht-card:hover .yc-view { color: var(--warm, #C19A4D); }
.yacht-card:hover .yc-view svg { transform: translateX(5px); }

.yacht-charter-v11 .foot .btn-light { border-radius: 999px !important; }

@media (max-width: 980px) {
  .yacht-charter-v11 .yacht-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .yacht-charter-v11 .yacht-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   3. REVIEWS — photo-overlay cards (image 2)
   ============================================================ */
.testimonials .testi-rail .testi {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  border: none !important;
  color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px 28px !important;
  background: #1a2433;
}
.testimonials .testi-rail .testi::before {
  content: "";
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .8s ease;
}
.testimonials .testi-rail .testi:nth-child(3n+1)::before { background-image: url('images/gallery-1.jpg'); }
.testimonials .testi-rail .testi:nth-child(3n+2)::before { background-image: url('images/gallery-3.jpg'); }
.testimonials .testi-rail .testi:nth-child(3n+3)::before { background-image: url('images/gallery-5.jpg'); }
.testimonials .testi-rail .testi::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,28,46,.10) 0%, rgba(16,28,46,.55) 48%, rgba(16,28,46,.92) 100%);
}
.testimonials .testi-rail .testi:hover::before { transform: scale(1.05); }
.testimonials .testi-rail .testi > * { position: relative; z-index: 2; }
.testimonials .testi-rail .testi .stars { color: #F4C24B !important; margin-bottom: 14px; }
.testimonials .testi-rail .testi blockquote {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.testimonials .testi-rail .testi .who { border-top-color: rgba(255,255,255,.22) !important; }
.testimonials .testi-rail .testi .who .name { color: #fff !important; }
.testimonials .testi-rail .testi .who .src { color: rgba(255,255,255,.72) !important; }
.testimonials .testi-rail .testi .avatar {
  background: rgba(255,255,255,.16) !important;
  color: #fff !important;
}

/* ============================================================
   4. LEAD BAND — "Consult with our charter specialists" (image 5)
   ============================================================ */
.lead-band {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: clamp(56px, 7vw, 110px) 0;
  isolation: isolate;
}
.lead-band .bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; }
.lead-band .scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(12,24,42,.86) 0%, rgba(12,24,42,.66) 50%, rgba(12,24,42,.35) 100%);
}
.lead-band .lead-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.lead-band .lead-copy h2 {
  color: #fff; margin: 14px 0 0;
  font-size: clamp(34px, 4.2vw, 56px); line-height: 1.0;
}
.lead-band .lead-copy h2 em { font-style: italic; font-weight: 300; color: var(--warm, #C19A4D); }
.lead-band .lead-copy > p {
  margin: 18px 0 0; max-width: 48ch;
  font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.82);
}
.lead-band .advisor {
  display: flex; align-items: center; gap: 14px;
  margin-top: 28px;
}
.lead-band .advisor .ava {
  width: 54px; height: 54px; border-radius: 50%; overflow: hidden;
  flex: 0 0 54px;
  border: 2px solid var(--warm, #C19A4D);
}
.lead-band .advisor .ava img { width: 100%; height: 100%; object-fit: cover; }
.lead-band .advisor strong { display: block; font-family: var(--f-display); font-size: 16px; color: #fff; }
.lead-band .advisor span { font-size: 13px; color: rgba(255,255,255,.7); }
.lead-band .lead-stat {
  margin-top: 30px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.lead-band .lead-stat .big {
  font-family: var(--f-display); font-weight: 800; font-size: 40px;
  letter-spacing: -0.03em; color: var(--warm, #C19A4D); line-height: 1;
}
.lead-band .lead-stat .lbl {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.65); max-width: 24ch;
}

.lead-band .lead-form {
  background: #fff;
  color: var(--ink, #102C54);
  border-radius: 22px;
  padding: clamp(28px, 3vw, 40px);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.6);
}
.lead-band .lead-form h3 { font-size: 24px; font-weight: 800; margin: 0; color: var(--ink, #102C54); }
.lead-band .lead-form .sub { margin: 8px 0 22px; font-size: 14px; color: var(--ink-3, #5C636C); line-height: 1.5; }
.lead-band .lead-form form { display: flex; flex-direction: column; gap: 12px; }
.lead-band .lead-form input[type="text"],
.lead-band .lead-form input[type="tel"],
.lead-band .lead-form input[type="email"] {
  width: 100%;
  background: #F3F5F8;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 15px 16px;
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--ink, #102C54);
  outline: none;
  transition: border-color .2s ease, background .2s ease;
}
.lead-band .lead-form input::placeholder { color: #9aa2ac; }
.lead-band .lead-form input:focus { background: #fff; border-color: var(--warm, #C19A4D); }
.lead-band .lead-form .consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: var(--ink-3, #5C636C); line-height: 1.4;
  margin: 2px 0;
}
.lead-band .lead-form .consent input { margin-top: 2px; accent-color: var(--warm, #C19A4D); }
.lead-band .lead-form button[type="submit"] {
  width: 100%;
  justify-content: center;
  background: var(--warm, #C19A4D) !important;
  border: none !important;
  color: var(--ink, #102C54) !important;
  font-weight: 800 !important;
  padding: 17px 24px !important;
  border-radius: 999px !important;
  font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
}
.lead-band .lead-form button[type="submit"]:hover { background: var(--ink, #102C54) !important; color: #fff !important; transform: translateY(-1px); }
.lead-band .lead-form button[type="submit"] svg { width: 16px; height: 10px; }
.lead-band .lead-form .lead-trust {
  margin-top: 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink-3, #5C636C);
}
.lead-band .lead-form .lead-trust svg { width: 16px; height: 16px; color: var(--warm, #C19A4D); }
@media (max-width: 900px) {
  .lead-band .lead-inner { grid-template-columns: 1fr; }
}

/* ===== redesign-v12.css ===== */
/* ============================================================
   redesign-v12.css — reference card language + condensed display
   Loaded LAST (after redesign-v11.css).
   ============================================================ */

/* ============================================================
   1. DISPLAY FONT → bold condensed (Oswald), body stays Outfit
   ============================================================ */
:root {
  --f-display: "Oswald", "Outfit", system-ui, sans-serif;
}
h1, h2, h3, h4,
.brand .brand-text,
.h-eyebrow { font-family: var(--f-display) !important; }
h1 { letter-spacing: -0.005em !important; font-weight: 700 !important; }
h2 { letter-spacing: 0 !important; font-weight: 700 !important; }
h3 { letter-spacing: 0 !important; font-weight: 600 !important; }
/* Oswald is tall/condensed — give headings a touch more line height */
.hero h1, .subhero h1 { line-height: 1.02 !important; }

/* ============================================================
   2. NEW CARD LANGUAGE — tour / trip / transfer listing cards
   Solid white, photo top, spec tiles, full-width "View" link.
   ============================================================ */
.tour-listing-card {
  border-radius: 22px !important;
  box-shadow: 0 18px 40px -30px rgba(16,44,84,.35) !important;
}
.tour-listing-card > .img { aspect-ratio: 4 / 3 !important; }
.tour-listing-card > .img .duration-tag {
  background: rgba(255,255,255,.94) !important;
  font-weight: 700 !important;
}
.tour-listing-card .body h3 {
  font-size: 23px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* meta-row → gray spec tiles like the reference */
.tour-listing-card .body .meta-row {
  gap: 8px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.tour-listing-card .body .meta-row > span {
  background: #F3F5F8;
  border-radius: 12px;
  padding: 9px 13px;
  font-size: 11px !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--ink-3, #5C636C) !important;
  font-weight: 600;
}
.tour-listing-card .body .meta-row > span svg { color: var(--ink, #102C54) !important; }

/* footer: full-width plain bold "View" link with arrow at the right */
.tour-listing-card .foot { justify-content: stretch !important; }
.tour-listing-card .cta-lk {
  background: transparent !important;
  color: var(--ink, #102C54) !important;
  padding: 0 !important;
  width: 100%;
  justify-content: space-between !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .01em !important;
  border-radius: 0 !important;
}
.tour-listing-card .cta-lk svg { stroke: var(--ink, #102C54) !important; transition: transform .2s ease; }
.tour-listing-card:hover .cta-lk { background: transparent !important; color: var(--warm, #C19A4D) !important; gap: 0 !important; }
.tour-listing-card:hover .cta-lk svg { stroke: var(--warm, #C19A4D) !important; transform: translateX(6px); }

/* homepage featured + day-trip cards: bolder titles, arrow link */
.home-featured-card .body h3,
.tour-card .body h3 { font-weight: 600 !important; }
.tour-card .foot .check { font-weight: 700 !important; color: var(--ink, #102C54) !important; }
.tour-card:hover .foot .check { color: var(--warm, #C19A4D) !important; }

/* fleet category cards → match */
.cat-card { border-radius: 22px !important; }
.cat-card .cat-img .cat-count {
  background: rgba(255,255,255,.94) !important;
  color: var(--ink, #102C54) !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
}

/* ============================================================
   3. TRUST STRIP — guest avatars in the top ribbon (all pages)
   ============================================================ */
.rb-avatars {
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
}
.rb-avatars img {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--off, #F7F4EF);
  margin-left: -7px;
  background: #ccc;
}
.rb-avatars img:first-child { margin-left: 0; }
.rb-avatars .more {
  width: 26px; height: 22px;
  border-radius: 999px;
  background: var(--warm, #C19A4D);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: -7px;
  border: 2px solid var(--off, #F7F4EF);
  position: relative; z-index: 1;
}
@media (max-width: 720px) { .rb-avatars { display: none; } }

/* ============================================================
   4. ACTIVITIES PHOTO GRID (image 3) — dark section, labelled tiles
   ============================================================ */
.activities-band {
  background: var(--ink, #102C54);
  color: #fff;
  padding: clamp(56px, 6.5vw, 104px) 0;
}
.activities-band .wrap {
  display: grid;
  grid-template-columns: .9fr 1.4fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.activities-band .act-intro { position: sticky; top: 96px; }
.activities-band .act-intro h2 {
  color: #fff;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.02;
  text-transform: uppercase;
  margin: 14px 0 0;
}
.activities-band .act-intro .h-eyebrow { color: var(--warm, #C19A4D) !important; }
.activities-band .act-intro p {
  margin: 18px 0 26px;
  font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,.78);
  max-width: 42ch;
}
.activities-band .act-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.activity-tile {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  display: block;
  background: #1a2433;
}
.activity-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.activity-tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,28,46,.05) 30%, rgba(16,28,46,.88) 100%);
}
.activity-tile:hover img { transform: scale(1.06); }
.activity-tile .label {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2;
  color: #fff;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: .01em;
}
.activity-tile.more {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(193,154,77,.5);
}
.activity-tile.more::after { display: none; }
.activity-tile.more .big {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 46px;
  color: var(--warm, #C19A4D);
  line-height: .9;
}
.activity-tile.more .mlabel {
  position: absolute; bottom: 20px; left: 0; right: 0;
  text-align: center;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.8); font-weight: 600;
}
@media (max-width: 900px) {
  .activities-band .wrap { grid-template-columns: 1fr; }
  .activities-band .act-intro { position: static; }
}
@media (max-width: 600px) {
  .activities-band .act-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   5. RENT-A-BOAT FLEET — image-4 yacht cards (name on photo)
   ============================================================ */
.boat-card.bc-v2 {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid var(--hairline, rgba(27,31,38,.10)) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 44px -30px rgba(16,44,84,.4) !important;
  transition: transform .28s ease, box-shadow .28s ease !important;
}
.boat-card.bc-v2:hover { transform: translateY(-5px); box-shadow: 0 34px 60px -30px rgba(16,44,84,.45) !important; }

.boat-card.bc-v2 .img {
  position: relative !important;
  aspect-ratio: 4 / 3 !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden;
  border-radius: 0 !important;
}
.boat-card.bc-v2 .img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.boat-card.bc-v2:hover .img img { transform: scale(1.05); }
.boat-card.bc-v2 .img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(16,28,46,.30) 0%, rgba(16,28,46,0) 36%, rgba(16,28,46,.85) 100%);
  z-index: 1;
}
.boat-card.bc-v2 .img .badge-type {
  position: absolute !important; top: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,.92) !important;
  color: var(--ink, #102C54) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important;
  backdrop-filter: blur(6px);
}
.boat-card.bc-v2 .bc-arrow {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.92);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink, #102C54);
  transition: background .2s ease, transform .2s ease;
}
.boat-card.bc-v2 .bc-arrow svg { width: 17px; height: 17px; }
.boat-card.bc-v2:hover .bc-arrow { background: var(--warm, #C19A4D); transform: rotate(8deg); }
.boat-card.bc-v2 .bc-head {
  position: absolute; left: 18px; right: 18px; bottom: 15px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
}
.boat-card.bc-v2 .bc-head .bc-year {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--warm, #C19A4D);
}
.boat-card.bc-v2 .bc-head h3 {
  color: #fff; margin: 0;
  font-size: 24px; font-weight: 600; letter-spacing: .01em;
  text-transform: uppercase; line-height: 1.0;
}
.boat-card.bc-v2 .bc-head .bc-sub {
  color: rgba(255,255,255,.82); font-size: 12.5px; font-weight: 500;
}

.boat-card.bc-v2 .body {
  padding: 22px 22px 22px !important;
  display: flex; flex-direction: column; gap: 16px;
  flex: 1;
}
.boat-card.bc-v2 .specs {
  display: flex !important; gap: 8px !important; flex-wrap: nowrap !important;
  margin: 0 !important; border: none !important; padding: 0 !important;
}
.boat-card.bc-v2 .specs .spec {
  flex: 1 1 0; min-width: 0;
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 1px;
  background: #F3F5F8; border-radius: 12px; padding: 11px 12px;
  border: none !important;
}
.boat-card.bc-v2 .specs .spec svg { width: 18px; height: 18px; color: var(--ink, #102C54); margin-bottom: 4px; order: 0; }
.boat-card.bc-v2 .specs .spec .v { font-family: var(--f-display); font-size: 15px; font-weight: 700; color: var(--ink, #102C54); order: 1; }
.boat-card.bc-v2 .specs .spec .k { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3, #5C636C); order: 2; }

.boat-card.bc-v2 .features {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  margin: 0 !important;
}
.boat-card.bc-v2 .features span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-3, #5C636C); font-weight: 500;
}
.boat-card.bc-v2 .features span svg { width: 14px; height: 14px; color: var(--warm, #C19A4D); }
.boat-card.bc-v2 .bc-view {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--hairline, rgba(27,31,38,.10));
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-display);
  font-weight: 600; font-size: 15px; color: var(--ink, #102C54);
  letter-spacing: .02em;
}
.boat-card.bc-v2 .bc-view svg { width: 18px; height: 11px; transition: transform .2s ease; }
.boat-card.bc-v2:hover .bc-view { color: var(--warm, #C19A4D); }
.boat-card.bc-v2:hover .bc-view svg { transform: translateX(5px); }

/* ============================================================
   6. ADVISOR CARD + IMAGE-FILL HEADING (image 1)
   ============================================================ */
.img-fill {
  background-image: url('images/subhero-tours.jpg');
  background-size: cover;
  background-position: center 40%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.advisor-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--hairline, rgba(27,31,38,.10));
  border-radius: 22px;
  padding: 20px 24px;
  box-shadow: 0 22px 46px -32px rgba(16,44,84,.35);
  margin-bottom: 44px;
}
.advisor-card .ac-left { display: flex; flex-direction: column; gap: 12px; }
.advisor-card .ac-label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--warm-strong, #9A7A30); font-weight: 700;
}
.advisor-card .ac-person { display: flex; align-items: center; gap: 14px; }
.advisor-card .ac-ava {
  position: relative;
  width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--warm, #C19A4D);
}
.advisor-card .ac-ava img { width: 100%; height: 100%; object-fit: cover; }
.advisor-card .ac-ava .dot {
  position: absolute; bottom: 1px; right: 1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #25D366; border: 2px solid #fff;
}
.advisor-card .ac-person strong { display: block; font-family: var(--f-display); font-size: 17px; color: var(--ink, #102C54); }
.advisor-card .ac-person span { font-size: 13px; color: var(--ink-3, #5C636C); }
.advisor-card .ac-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.advisor-card .ac-wa,
.advisor-card .ac-call {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-weight: 700; font-size: 14px;
  transition: transform .15s ease, background .2s ease;
}
.advisor-card .ac-wa { background: #25D366; color: #fff; }
.advisor-card .ac-wa:hover { background: #1da851; transform: translateY(-1px); }
.advisor-card .ac-wa svg { width: 18px; height: 18px; }
.advisor-card .ac-call { background: #fff; color: var(--ink, #102C54); border: 1px solid var(--hairline, rgba(27,31,38,.14)); }
.advisor-card .ac-call:hover { border-color: var(--warm, #C19A4D); color: var(--warm, #C19A4D); }
.advisor-card .ac-call svg { width: 17px; height: 17px; }
@media (max-width: 640px) {
  .advisor-card { flex-direction: column; align-items: stretch; }
  .advisor-card .ac-actions .ac-wa, .advisor-card .ac-actions .ac-call { flex: 1; justify-content: center; }
}
.faq-wordmark {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(76px, 13vw, 184px);
  line-height: .82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

/* ===== redesign-v13.css ===== */
/* ============================================================
   REDESIGN v13 — Homepage refresh
   - Fix yacht-charter checkmark glitch
   - Image-led service cards
   - Featured-tour cards (title-over-photo, like charter cards)
   - More visual "why us" cards
   - Richer sea/land transfer cards
   - Events-focused activities band + new Water Sports section
   - Photo gallery band
   - Review-source logos on testimonials
   ============================================================ */

/* ---------- 1. FIX: yacht-charter foot checkmarks (was unscoped → huge) ---- */
.yacht-charter-v11 .foot { align-items: center; }
.yacht-charter-v11 .foot .incl {
  display: flex; flex-wrap: wrap; gap: 12px 26px; max-width: none;
}
.yacht-charter-v11 .foot .incl span {
  display: inline-flex; align-items: center; gap: 9px;
  color: rgba(255,255,255,.86); font-size: 14px; font-weight: 500; margin: 0;
}
.yacht-charter-v11 .foot .incl span svg {
  width: 17px; height: 17px; flex: 0 0 17px;
  color: var(--warm, #C19A4D); stroke-width: 2.2;
}

/* ============================================================
   2. SERVICE CARDS — image-led
   ============================================================ */
.svc-grid-v13 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.svc-tile {
  position: relative; display: block; border-radius: 16px; overflow: hidden;
  min-height: 360px; background: #0f2240;
  box-shadow: 0 18px 42px -30px rgba(16,44,84,.55);
  transition: transform .3s ease, box-shadow .3s ease;
}
.svc-tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .8s ease;
}
.svc-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,24,44,.12) 0%, rgba(11,24,44,.22) 34%, rgba(9,20,38,.92) 100%);
}
.svc-tile:hover { transform: translateY(-6px); box-shadow: 0 36px 64px -32px rgba(16,44,84,.62); }
.svc-tile:hover img { transform: scale(1.06); }
.svc-tile .svc-num {
  position: absolute; top: 15px; right: 17px; z-index: 2;
  font-family: var(--f-display); font-weight: 700; font-size: 12px;
  letter-spacing: .2em; color: rgba(255,255,255,.62);
}
.svc-tile-body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 22px 20px 22px; color: #fff;
}
.svc-tile-body h3 {
  font-family: var(--f-display); font-size: 23px; font-weight: 800;
  letter-spacing: -.02em; margin: 0; color: #fff;
}
.svc-tile-body p {
  margin: 8px 0 0; font-size: 13.5px; line-height: 1.5;
  color: rgba(255,255,255,.82); max-width: 32ch;
}
.svc-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.svc-chips span {
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.22); color: #fff;
}
.svc-go {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 16px;
  font-family: var(--f-display); font-size: 13px; font-weight: 700;
  letter-spacing: .01em; color: var(--warm-soft, #EADFC4); transition: gap .2s ease;
}
.svc-go svg { width: 17px; height: 10px; }
.svc-tile:hover .svc-go { gap: 14px; }
@media (max-width: 1080px) { .svc-grid-v13 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .svc-grid-v13 { grid-template-columns: 1fr; } .svc-tile { min-height: 320px; } }

/* ============================================================
   3. FEATURED TOUR CARDS — title over photo
   ============================================================ */
.tourx-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tourx {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 38px -28px rgba(16,44,84,.42);
  display: flex; flex-direction: column;
  transition: transform .28s ease, box-shadow .28s ease;
}
.tourx:hover { transform: translateY(-6px); box-shadow: 0 34px 62px -32px rgba(16,44,84,.5); }
.tourx .ph { position: relative; aspect-ratio: 4 / 3.15; overflow: hidden; }
.tourx .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.tourx:hover .ph img { transform: scale(1.06); }
.tourx .ph::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,24,44,0) 42%, rgba(10,21,40,.82) 100%);
}
.tourx .dur {
  position: absolute; top: 13px; left: 13px; z-index: 2;
  background: rgba(255,255,255,.96); color: var(--ink, #102C54);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
}
.tourx .ph h3 {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; margin: 0;
  color: #fff; font-family: var(--f-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em;
}
.tourx .bd { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.tourx .bd p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3, #5C636C); flex: 1; }
.tourx .meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--hairline, rgba(27,31,38,.1));
}
.tourx .meta .it { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.tourx .meta svg { width: 19px; height: 19px; color: var(--warm, #C19A4D); stroke-width: 1.6; }
.tourx .meta .k { font-family: var(--f-display); font-weight: 700; font-size: 13px; color: var(--ink, #102C54); line-height: 1; }
.tourx .meta .l { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3, #5C636C); font-weight: 600; line-height: 1; }
.tourx .go {
  margin-top: 16px; display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-display); font-size: 13px; font-weight: 700; color: var(--ink, #102C54);
}
.tourx .go svg { width: 19px; height: 11px; transition: transform .2s ease, color .2s ease; }
.tourx:hover .go svg { transform: translateX(5px); color: var(--warm, #C19A4D); }
@media (max-width: 980px) { .tourx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tourx-grid { grid-template-columns: 1fr; } }

/* ============================================================
   4. WHY-US CARDS — more visual
   ============================================================ */
.why-v2 .why-grid-v2 { gap: 16px; }
.why-v2 .wcard {
  background: #fff; border: 1px solid var(--hairline, rgba(27,31,38,.1));
  border-radius: 22px; padding: 32px 28px 28px; position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.why-v2 .wcard:hover {
  transform: translateY(-5px); border-color: transparent;
  box-shadow: 0 28px 54px -34px rgba(16,44,84,.45);
}
.why-v2 .wcard .num {
  position: absolute; top: 16px; right: 22px; z-index: 0;
  font-family: var(--f-display); font-size: 58px; font-weight: 800;
  color: var(--warm-tint, #FBF3E8); letter-spacing: -.04em; line-height: 1;
}
.why-v2 .wcard .ic-circle {
  position: relative; z-index: 1;
  width: 62px; height: 62px; border-radius: 16px;
  background: linear-gradient(150deg, var(--warm-tint, #FBF3E8), #fff);
  border: 1px solid var(--warm-soft, #EADFC4);
  color: var(--warm, #C19A4D);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.why-v2 .wcard:hover .ic-circle {
  background: linear-gradient(150deg, var(--warm, #C19A4D), var(--warm-strong, #9A7A30));
  color: #fff; border-color: transparent;
}
.why-v2 .wcard .ic-circle svg { width: 30px; height: 30px; stroke-width: 1.6; }
.why-v2 .wcard h3 { position: relative; z-index: 1; font-size: 20px; letter-spacing: -.02em; margin: 0 0 8px; }
.why-v2 .wcard p { position: relative; z-index: 1; font-size: 14.5px; color: var(--ink-3, #5C636C); line-height: 1.55; margin: 0; }

/* ============================================================
   5. TRANSFER CARDS — sea & land
   ============================================================ */
.xfer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.xfer-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-radius: 22px; overflow: hidden;
  box-shadow: 0 16px 42px -32px rgba(16,44,84,.4);
  transition: transform .28s ease, box-shadow .28s ease;
}
.xfer-card:hover { transform: translateY(-5px); box-shadow: 0 34px 62px -34px rgba(16,44,84,.5); }
.xfer-ph { position: relative; aspect-ratio: 16 / 8.6; overflow: hidden; }
.xfer-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.xfer-card:hover .xfer-ph img { transform: scale(1.05); }
.xfer-ph::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,24,44,.5) 0%, rgba(11,24,44,0) 45%, rgba(11,24,44,.55) 100%);
}
.xfer-kind {
  position: absolute; top: 15px; left: 15px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.94); color: var(--ink, #102C54);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px;
}
.xfer-kind svg { width: 15px; height: 15px; color: var(--warm, #C19A4D); }
.xfer-bd { padding: 28px 30px 30px; display: flex; flex-direction: column; flex: 1; }
.xfer-bd h3 { margin: 0; font-size: 25px; letter-spacing: -.02em; }
.xfer-bd p { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-3, #5C636C); line-height: 1.55; }
.xfer-routes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.xfer-routes span {
  font-size: 12px; font-weight: 600; color: var(--ink-2, #2B313A);
  padding: 6px 12px; border-radius: 999px; background: var(--off, #F7F4EF);
  border: 1px solid var(--hairline, rgba(27,31,38,.1));
}
.xfer-go {
  margin-top: auto; padding-top: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-size: 14px; font-weight: 700; color: var(--ink, #102C54);
}
.xfer-go svg { width: 19px; height: 11px; transition: transform .2s ease, color .2s ease; }
.xfer-card:hover .xfer-go { color: var(--warm, #C19A4D); }
.xfer-card:hover .xfer-go svg { transform: translateX(5px); }
@media (max-width: 860px) { .xfer-grid { grid-template-columns: 1fr; } }

/* ============================================================
   6b. WATER SPORTS SECTION (new, split out of activities)
   ============================================================ */
.watersports-band { background: var(--off, #F7F4EF); padding: clamp(48px, 5.5vw, 88px) 0; }
.ws-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: stretch; }
.ws-photo { position: relative; border-radius: 22px; overflow: hidden; min-height: 380px; }
.ws-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(11,24,44,0) 45%, rgba(11,24,44,.55) 100%); }
.ws-photo .ws-badge {
  position: absolute; left: 22px; bottom: 22px; z-index: 2; color: #fff;
  font-family: var(--f-display); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 10px;
}
.ws-photo .ws-badge::before { content: ""; width: 26px; height: 1px; background: var(--warm, #C19A4D); }
.ws-content { display: flex; flex-direction: column; justify-content: center; }
.ws-content h2 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.02em; margin: 14px 0 0; }
.ws-content > p { margin: 16px 0 4px; font-size: 15.5px; color: var(--ink-3, #5C636C); line-height: 1.6; max-width: 46ch; }
.ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 26px 0 0; }
.ws-item {
  background: #fff; border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-radius: 16px;
  padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; align-items: flex-start;
  transition: transform .2s ease, border-color .2s ease;
}
.ws-item:hover { transform: translateY(-3px); border-color: var(--warm-soft, #EADFC4); }
.ws-item .ic {
  width: 42px; height: 42px; border-radius: 12px; background: var(--warm-tint, #FBF3E8);
  color: var(--warm, #C19A4D); display: flex; align-items: center; justify-content: center;
}
.ws-item .ic svg { width: 22px; height: 22px; stroke-width: 1.6; }
.ws-item span { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--ink, #102C54); letter-spacing: -.01em; }
.ws-item small { font-size: 12px; color: var(--ink-3, #5C636C); line-height: 1.4; }
.ws-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.ws-note { font-size: 13px; color: var(--ink-3, #5C636C); display: inline-flex; align-items: center; gap: 8px; }
.ws-note svg { width: 16px; height: 16px; color: var(--warm, #C19A4D); }
@media (max-width: 900px) { .ws-split { grid-template-columns: 1fr; } .ws-photo { min-height: 280px; } }
@media (max-width: 540px) { .ws-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   7. GALLERY BAND
   ============================================================ */
.gallery-band { background: #fff; padding: clamp(48px, 5.5vw, 88px) 0; }
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 12px;
}
.gallery-grid figure { margin: 0; position: relative; overflow: hidden; border-radius: 16px; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.gallery-grid figure:hover img { transform: scale(1.07); }
.gallery-grid .g-wide { grid-column: span 2; }
.gallery-grid .g-tall { grid-row: span 2; }
.gallery-grid figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,24,44,0) 60%, rgba(11,24,44,.32) 100%);
  opacity: 0; transition: opacity .3s ease;
}
.gallery-grid figure:hover::after { opacity: 1; }
@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery-grid .g-wide { grid-column: span 2; }
}

/* ============================================================
   8. TESTIMONIAL SOURCE LOGOS
   ============================================================ */
.testi { position: relative; }
.testi .testi-src-logo {
  position: absolute; top: 26px; right: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; opacity: .9;
}
.testi .testi-src-logo svg { height: 24px; width: 24px; }
.testi .testi-src-logo img { height: 24px; width: auto; }
.testi .who .src .src-platform { display: none; }

/* ============================================================
   RENT-A-BOAT — "find your kind of boat" image tiles
   ============================================================ */
.kindx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kindx {
  background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--hairline, rgba(27,31,38,.1));
  box-shadow: 0 14px 38px -28px rgba(16,44,84,.42);
  transition: transform .28s ease, box-shadow .28s ease;
}
.kindx:hover { transform: translateY(-6px); box-shadow: 0 34px 62px -32px rgba(16,44,84,.5); }
.kindx-ph { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; }
.kindx-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.kindx:hover .kindx-ph img { transform: scale(1.06); }
.kindx-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,24,44,0) 40%, rgba(10,21,40,.85) 100%); }
.kindx-count {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(255,255,255,.95); color: var(--ink, #102C54);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
}
.kindx-ph h3 { position: absolute; left: 16px; bottom: 14px; z-index: 2; margin: 0; color: #fff; font-family: var(--f-display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.kindx-bd { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.kindx-bd p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-3, #5C636C); flex: 1; }
.kindx-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.kindx-tags span { font-size: 11.5px; font-weight: 600; color: var(--ink-2, #2B313A); padding: 5px 11px; border-radius: 999px; background: var(--off, #F7F4EF); border: 1px solid var(--hairline, rgba(27,31,38,.1)); }
.kindx-go { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 13px; font-weight: 700; color: var(--ink, #102C54); }
.kindx-go svg { width: 19px; height: 11px; transition: transform .2s ease, color .2s ease; }
.kindx:hover .kindx-go { color: var(--warm, #C19A4D); }
.kindx:hover .kindx-go svg { transform: translateX(5px); }
@media (max-width: 880px) { .kindx-grid { grid-template-columns: 1fr; } }

/* ============================================================
   STEPS — connected icon flow (light + dark band variants)
   ============================================================ */
.stepsx { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 36px; position: relative; }
.stepx { position: relative; }
.stepx-ic {
  position: relative; width: 64px; height: 64px; border-radius: 16px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center; color: var(--warm, #C19A4D); margin-bottom: 18px;
}
.stepx-ic svg { width: 30px; height: 30px; }
.stepx-n {
  position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--warm, #C19A4D); color: #102035; font-family: var(--f-display); font-weight: 800; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.stepx h4 { margin: 0 0 8px; font-size: 19px; }
.stepx p { margin: 0; font-size: 14px; line-height: 1.55; }
.how-strip .stepx p { opacity: .8; }
.stepsx::before {
  content: ""; position: absolute; top: 32px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); z-index: 0;
}
.stepx > * { position: relative; z-index: 1; }
@media (max-width: 880px) { .stepsx { grid-template-columns: 1fr 1fr; gap: 28px; } .stepsx::before { display: none; } }
@media (max-width: 480px) { .stepsx { grid-template-columns: 1fr; } }
/* light-band variant */
.steps-light .stepx-ic { background: var(--warm-tint, #FBF3E8); border-color: var(--warm-soft, #EADFC4); }
.steps-light .stepx h4 { color: var(--ink, #102C54); }
.steps-light .stepx p { color: var(--ink-3, #5C636C); opacity: 1; }
.steps-light.stepsx::before { background: linear-gradient(90deg, transparent, var(--warm-soft, #EADFC4), transparent); }

/* ============================================================
   INDIVIDUAL BOAT — "What is included" (visual)
   ============================================================ */
.incl-v13 { background: var(--off, #F7F4EF); padding: clamp(48px, 5.5vw, 84px) 0; }
.incl-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(20px, 3vw, 44px); align-items: stretch; }
.incl-photo { position: relative; border-radius: 22px; overflow: hidden; min-height: 420px; }
.incl-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.incl-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,24,44,0) 45%, rgba(11,24,44,.7) 100%); }
.incl-photo-tag { position: absolute; left: 22px; bottom: 22px; z-index: 2; color: #fff; display: flex; flex-direction: column; gap: 3px; }
.incl-photo-tag strong { font-family: var(--f-display); font-size: 22px; letter-spacing: -.01em; }
.incl-photo-tag span { font-size: 13.5px; color: rgba(255,255,255,.85); }
.incl-features { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.incl-feat {
  background: #fff; border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-radius: 16px;
  padding: 16px 16px; display: flex; gap: 13px; align-items: flex-start;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.incl-feat:hover { transform: translateY(-3px); border-color: var(--warm-soft, #EADFC4); box-shadow: 0 16px 32px -26px rgba(16,44,84,.4); }
.incl-feat .ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; background: var(--warm-tint, #FBF3E8); color: var(--warm, #C19A4D); display: flex; align-items: center; justify-content: center; }
.incl-feat .ic svg { width: 23px; height: 23px; }
.incl-feat strong { display: block; font-family: var(--f-display); font-size: 14.5px; color: var(--ink, #102C54); letter-spacing: -.01em; margin-bottom: 3px; }
.incl-feat small { font-size: 12.5px; color: var(--ink-3, #5C636C); line-height: 1.4; }
.addons-v13 { margin-top: 30px; }
.addons-label { display: inline-block; font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3, #5C636C); margin-bottom: 14px; }
.addons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.addon { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px dashed var(--warm-soft, #EADFC4); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; font-weight: 600; color: var(--ink-2, #2B313A); }
.addon svg { width: 22px; height: 22px; color: var(--warm, #C19A4D); flex: 0 0 22px; }
@media (max-width: 900px) { .incl-layout { grid-template-columns: 1fr; } .incl-photo { min-height: 260px; } .addons-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .incl-features { grid-template-columns: 1fr; } .addons-grid { grid-template-columns: 1fr; } }

/* ============================================================
   PHOTO REVIEW CARDS (competitor-style, with source logo)
   ============================================================ */
.previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.preview {
  position: relative; border-radius: 16px; overflow: hidden; min-height: 380px;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 16px 42px -30px rgba(16,44,84,.5);
}
.preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,24,44,.05) 30%, rgba(9,18,34,.92) 100%); }
.preview-logo { position: absolute; top: 16px; right: 16px; z-index: 2; background: #fff; border-radius: 8px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 6px; height: 28px; }
.preview-logo svg { height: 18px; width: auto; }
.preview-logo.tripadvisor { background: #fff; }
.preview-logo.tripadvisor span { font-family: var(--f-display); font-weight: 800; font-size: 13px; color: #000; letter-spacing: -.02em; }
.preview-logo.google span { font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.preview-body { position: relative; z-index: 2; padding: 22px 22px 24px; color: #fff; }
.preview-stars { display: flex; gap: 3px; margin-bottom: 12px; }
.preview-stars svg { width: 17px; height: 17px; fill: #34E0A1; }
.preview-body blockquote { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #fff; font-family: var(--f-body); font-style: normal; }
.preview-who { display: flex; align-items: center; gap: 11px; }
.preview-who .av { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 700; font-size: 13px; color: #fff; }
.preview-who .nm { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: #fff; }
.preview-who .lo { font-size: 12px; color: rgba(255,255,255,.72); }
@media (max-width: 900px) { .previews { grid-template-columns: 1fr; } }

/* ============================================================
   PRIVATE TOURS — half/full day editorial cards (no 01/02)
   ============================================================ */
.daysplit { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.daycard {
  background: #fff; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--hairline, rgba(27,31,38,.1));
  box-shadow: 0 16px 42px -32px rgba(16,44,84,.42);
  transition: transform .28s ease, box-shadow .28s ease;
}
.daycard:hover { transform: translateY(-6px); box-shadow: 0 36px 64px -34px rgba(16,44,84,.5); }
.daycard-ph { position: relative; aspect-ratio: 16 / 9.5; overflow: hidden; }
.daycard-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.daycard:hover .daycard-ph img { transform: scale(1.05); }
.daycard-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,24,44,0) 42%, rgba(10,21,40,.85) 100%); }
.daycard-dur { position: absolute; top: 15px; left: 15px; z-index: 2; background: rgba(255,255,255,.95); color: var(--ink, #102C54); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.daycard-ph h3 { position: absolute; left: 18px; bottom: 16px; z-index: 2; margin: 0; color: #fff; font-family: var(--f-display); font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.daycard-bd { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.daycard-bd p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-3, #5C636C); flex: 1; }
.daycard-meta { display: flex; gap: 22px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline, rgba(27,31,38,.1)); }
.daycard-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2, #2B313A); }
.daycard-meta svg { width: 18px; height: 18px; color: var(--warm, #C19A4D); }
.daycard-lk { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 14px; font-weight: 700; color: var(--ink, #102C54); }
.daycard-lk svg { width: 19px; height: 11px; transition: transform .2s ease, color .2s ease; }
.daycard:hover .daycard-lk { color: var(--warm, #C19A4D); }
.daycard:hover .daycard-lk svg { transform: translateX(5px); }
@media (max-width: 760px) { .daysplit { grid-template-columns: 1fr; } }

/* ============================================================
   YACHT CHARTER — fleet boat cards (image-led, homepage style)
   ============================================================ */
.cboat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cboat {
  background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--hairline, rgba(27,31,38,.1));
  box-shadow: 0 14px 38px -28px rgba(16,44,84,.42);
  transition: transform .28s ease, box-shadow .28s ease;
}
.cboat:hover { transform: translateY(-6px); box-shadow: 0 34px 62px -32px rgba(16,44,84,.5); }
.cboat-ph { position: relative; aspect-ratio: 16 / 10.5; overflow: hidden; }
.cboat-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.cboat:hover .cboat-ph img { transform: scale(1.06); }
.cboat-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,24,44,0) 40%, rgba(10,21,40,.86) 100%); }
.cboat-label { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255,255,255,.95); color: var(--ink, #102C54); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; }
.cboat-ph h3 { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; margin: 0; color: #fff; font-family: var(--f-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.cboat-bd { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.cboat-bd p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-3, #5C636C); flex: 1; }
.cboat-spec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--hairline, rgba(27,31,38,.1)); }
.cboat-spec > div { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.cboat-spec svg { width: 20px; height: 20px; color: var(--warm, #C19A4D); }
.cboat-spec .v { font-family: var(--f-display); font-weight: 700; font-size: 13px; color: var(--ink, #102C54); line-height: 1; }
.cboat-spec .k { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3, #5C636C); font-weight: 600; }
.cboat-lk { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 13px; font-weight: 700; color: var(--ink, #102C54); }
.cboat-lk svg { width: 19px; height: 11px; transition: transform .2s ease, color .2s ease; }
.cboat:hover .cboat-lk { color: var(--warm, #C19A4D); }
.cboat:hover .cboat-lk svg { transform: translateX(5px); }
@media (max-width: 900px) { .cboat-grid { grid-template-columns: 1fr; } }

/* ============================================================
   YACHT CHARTER — duration cards (3/5/7 nights)
   ============================================================ */
.durx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.durx {
  position: relative; display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-radius: 22px; padding: 26px 26px 28px;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.durx:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -36px rgba(16,44,84,.5); border-color: transparent; }
.durx.featured { background: linear-gradient(165deg, var(--ink, #102C54), #0a1c38); border-color: transparent; box-shadow: 0 30px 60px -34px rgba(10,28,56,.6); }
.durx-pop { position: absolute; top: -12px; left: 26px; background: var(--warm, #C19A4D); color: #102035; font-family: var(--f-display); font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; }
.durx-top { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--hairline, rgba(27,31,38,.1)); }
.durx.featured .durx-top { border-color: rgba(255,255,255,.15); }
.durx-tag { font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--warm, #C19A4D); }
.durx-num { display: flex; align-items: baseline; gap: 7px; }
.durx-num .big { font-family: var(--f-display); font-weight: 800; font-size: 52px; line-height: .9; letter-spacing: -.03em; color: var(--ink, #102C54); }
.durx-num .unit { font-size: 14px; font-weight: 600; color: var(--ink-3, #5C636C); }
.durx.featured .durx-num .big { color: #fff; }
.durx.featured .durx-num .unit { color: rgba(255,255,255,.7); }
.durx-route { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; }
.durx-route span { font-size: 11.5px; font-weight: 600; color: var(--ink-2, #2B313A); padding: 4px 10px; border-radius: 999px; background: var(--off, #F7F4EF); }
.durx.featured .durx-route span { background: rgba(255,255,255,.1); color: rgba(255,255,255,.88); }
.durx-best { margin: 18px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3, #5C636C); flex: 1; }
.durx-best strong { display: block; font-family: var(--f-display); color: var(--ink, #102C54); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.durx.featured .durx-best { color: rgba(255,255,255,.78); }
.durx.featured .durx-best strong { color: #fff; }
.durx-see { margin-top: 20px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-display); font-size: 13px; font-weight: 700; color: var(--ink, #102C54); }
.durx-see svg { width: 18px; height: 10px; transition: transform .2s ease; }
.durx.featured .durx-see { color: var(--warm-soft, #EADFC4); }
.durx:hover .durx-see svg { transform: translateX(5px); }
@media (max-width: 860px) { .durx-grid { grid-template-columns: 1fr; } .durx-pop { left: 50%; transform: translateX(-50%); } }

/* ============================================================
   YACHT CHARTER — cruise itinerary builder
   ============================================================ */
.cruise-builder { padding: clamp(48px, 5.5vw, 88px) 0; background: var(--off, #F7F4EF); }
.cb-tabs { display: inline-flex; gap: 6px; background: #fff; border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-radius: 999px; padding: 6px; margin-bottom: 26px; }
.cb-tab { display: inline-flex; align-items: baseline; gap: 7px; border: none; background: transparent; cursor: pointer; font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--ink-3, #5C636C); padding: 10px 22px; border-radius: 999px; transition: background .2s ease, color .2s ease; }
.cb-tab .n { font-size: 19px; }
.cb-tab.active { background: var(--ink, #102C54); color: #fff; }
.cb-panel { display: grid; grid-template-columns: 280px 1fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.cb-map { position: sticky; top: 96px; background: #fff; border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-radius: 16px; padding: 24px; }
.cb-start { display: flex; flex-direction: column; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3, #5C636C); font-weight: 600; margin-bottom: 18px; }
.cb-start strong { font-family: var(--f-display); font-size: 22px; letter-spacing: -.01em; color: var(--ink, #102C54); text-transform: none; }
.cb-route { display: flex; flex-direction: column; gap: 0; }
.cb-stop { font-family: var(--f-display); font-weight: 600; font-size: 15px; color: var(--ink-2, #2B313A); padding: 7px 0 7px 22px; position: relative; }
.cb-stop::before { content: ""; position: absolute; left: 4px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--warm, #C19A4D); }
.cb-stop.end::before { background: var(--warm, #C19A4D); }
.cb-arrow { display: none; }
.cb-route::before { content: ""; position: absolute; }
.cb-route { position: relative; }
.cb-route::after { content: ""; position: absolute; left: 8px; top: 14px; bottom: 14px; width: 2px; background: linear-gradient(var(--warm-soft, #EADFC4), var(--warm, #C19A4D)); z-index: 0; }
.cb-stop { z-index: 1; }
.cb-summary { display: block; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline, rgba(27,31,38,.1)); font-size: 13.5px; line-height: 1.5; color: var(--ink-3, #5C636C); }
.cb-timeline { display: flex; flex-direction: column; gap: 14px; }
.cb-day { display: grid; grid-template-columns: 168px 1fr; background: #fff; border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-radius: 16px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.cb-day:hover { transform: translateY(-3px); box-shadow: 0 20px 42px -30px rgba(16,44,84,.45); }
.cb-day-ph { position: relative; min-height: 130px; }
.cb-day-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cb-day-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,24,44,.05), rgba(11,24,44,.4)); }
.cb-day-tag { position: absolute; top: 11px; left: 11px; z-index: 2; background: rgba(255,255,255,.95); color: var(--ink, #102C54); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.cb-day-bd { padding: 18px 20px 18px; }
.cb-day-bd h4 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.01em; }
.cb-day-bd p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3, #5C636C); }
.cb-stops { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cb-stops span { font-size: 11px; font-weight: 600; color: var(--ink-2, #2B313A); padding: 4px 10px; border-radius: 999px; background: var(--off, #F7F4EF); border: 1px solid var(--hairline, rgba(27,31,38,.1)); }
.cb-note { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding: 18px 22px; background: #fff; border: 1px dashed var(--warm-soft, #EADFC4); border-radius: 16px; font-size: 13.5px; color: var(--ink-3, #5C636C); }
.cb-note svg { width: 20px; height: 20px; color: var(--warm, #C19A4D); flex: 0 0 20px; }
.cb-note .link-arrow { margin-left: auto; }
@media (max-width: 860px) { .cb-panel { grid-template-columns: 1fr; } .cb-map { position: static; } .cb-route { flex-direction: row; flex-wrap: wrap; } .cb-route::after { display: none; } .cb-stop { padding-left: 16px; } }
@media (max-width: 540px) { .cb-day { grid-template-columns: 1fr; } .cb-day-ph { min-height: 150px; } }

/* ============================================================
   DAY TRIPS — vehicle fleet cards
   ============================================================ */
.vehx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.vehx {
  background: #fff; border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-radius: 16px; overflow: hidden;
  box-shadow: 0 14px 38px -30px rgba(16,44,84,.4);
  transition: transform .26s ease, box-shadow .26s ease;
}
.vehx:hover { transform: translateY(-5px); box-shadow: 0 32px 58px -34px rgba(16,44,84,.5); }
.vehx-top {
  position: relative; aspect-ratio: 16 / 8; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #16335c 0%, #0c1f3c 100%); color: rgba(255,255,255,.92);
}
.vehx-top.combo { background: linear-gradient(160deg, #1d4a5e 0%, #0c2a3c 100%); }
.vehx-car { width: 72%; max-width: 240px; height: auto; }
.vehx-badge {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.vehx-bd { padding: 22px 22px 24px; }
.vehx-bd h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.01em; }
.vehx-bd p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3, #5C636C); }
.vehx-spec { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hairline, rgba(27,31,38,.1)); }
.vehx-spec span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2, #2B313A); background: var(--off, #F7F4EF); border: 1px solid var(--hairline, rgba(27,31,38,.1)); padding: 6px 11px; border-radius: 999px; }
.vehx-spec svg { width: 16px; height: 16px; color: var(--warm, #C19A4D); }
@media (max-width: 900px) { .vehx-grid { grid-template-columns: 1fr; } }

/* ============================================================
   TRANSFERS HUB — land & vehicle section
   ============================================================ */
.xfer-pick { padding: clamp(40px, 5vw, 72px) 0; }
.land-xfer { background: var(--off, #F7F4EF); padding: clamp(48px, 5.5vw, 84px) 0; }
.land-layout { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(20px, 3vw, 40px); align-items: start; }
.land-vehicles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.land-veh { background: #fff; border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-radius: 16px; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.land-veh:hover { transform: translateY(-5px); box-shadow: 0 28px 52px -34px rgba(16,44,84,.5); }
.land-veh-top { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #16335c, #0c1f3c); color: rgba(255,255,255,.92); }
.land-veh-top .vehx-car { width: 74%; max-width: 200px; }
.land-veh-bd { padding: 16px 18px 18px; }
.land-veh-bd h3 { margin: 0 0 5px; font-size: 18px; letter-spacing: -.01em; }
.land-veh-bd p { margin: 0; font-size: 12.5px; color: var(--ink-3, #5C636C); line-height: 1.45; }
.land-routes-card { background: #fff; border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-radius: 16px; padding: 26px 28px; }
.land-routes-card h4 { margin: 0 0 12px; font-size: 17px; }
.land-routes { list-style: none; margin: 0 0 18px; padding: 0; }
.land-routes li a { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--hairline, rgba(27,31,38,.08)); font-family: var(--f-display); font-weight: 600; font-size: 14.5px; color: var(--ink, #102C54); transition: color .2s ease, padding-left .2s ease; }
.land-routes li a:hover { color: var(--warm, #C19A4D); padding-left: 6px; }
.land-routes .t { font-family: var(--f-body); font-size: 12.5px; font-weight: 600; color: var(--ink-3, #5C636C); }
.land-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.land-feats span { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-2, #2B313A); background: var(--off, #F7F4EF); border: 1px solid var(--hairline, rgba(27,31,38,.1)); padding: 6px 11px; border-radius: 999px; }
.land-feats svg { width: 15px; height: 15px; color: var(--warm, #C19A4D); }
@media (max-width: 860px) { .land-layout { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .land-vehicles { grid-template-columns: 1fr; } }

.land-dropnote { margin-top: 26px; background: #fff; border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-left: 3px solid var(--warm, #C19A4D); border-radius: 0 16px 16px 0; padding: 20px 24px; }
.land-dropnote strong { display: block; font-family: var(--f-display); font-size: 15px; color: var(--ink, #102C54); margin-bottom: 6px; }
.land-dropnote p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-3, #5C636C); max-width: 70ch; }

/* ============================================================
   EVENTS — image-led occasion cards
   ============================================================ */
.evx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.evx { background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--hairline, rgba(27,31,38,.1)); box-shadow: 0 14px 38px -28px rgba(16,44,84,.42); transition: transform .28s ease, box-shadow .28s ease; text-decoration: none; }
.evx:hover { transform: translateY(-6px); box-shadow: 0 34px 62px -32px rgba(16,44,84,.5); }
.evx-ph { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }
.evx-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.evx:hover .evx-ph img { transform: scale(1.06); }
.evx-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,24,44,0) 38%, rgba(10,21,40,.88) 100%); }
.evx-chip { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(255,255,255,.95); color: var(--ink, #102C54); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; }
.evx-chip.gold { background: var(--warm, #C19A4D); color: #102035; position: static; display: inline-block; margin-bottom: 16px; }
.evx-ph h3 { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; margin: 0; color: #fff; font-family: var(--f-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.evx-bd { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.evx-bd p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3, #5C636C); flex: 1; }
.evx-lk { margin-top: 16px; display: inline-flex; align-items: center; gap: 9px; font-family: var(--f-display); font-size: 13px; font-weight: 700; color: var(--ink, #102C54); }
.evx-lk svg { width: 18px; height: 10px; transition: transform .2s ease, color .2s ease; }
.evx:hover .evx-lk { color: var(--warm, #C19A4D); }
.evx:hover .evx-lk svg { transform: translateX(5px); }
.evx-cta { background: linear-gradient(165deg, var(--ink, #102C54), #0a1c38); border-color: transparent; }
.evx-cta-bd { padding: 32px 28px; display: flex; flex-direction: column; height: 100%; justify-content: center; }
.evx-cta-bd h3 { margin: 0 0 12px; color: #fff; font-family: var(--f-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.evx-cta-bd p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.8); }
.evx-lk.light { color: var(--warm-soft, #EADFC4); margin-top: 20px; }
@media (max-width: 980px) { .evx-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .evx-grid { grid-template-columns: 1fr; } }

/* ============================================================
   EVENT DETAIL PAGES — hero, who-for, programme, contact, related
   ============================================================ */
/* Hero → full-bleed image with overlay (was split slate panel) */
.event-hero { padding-top: 0 !important; background: var(--ink, #102C54) !important; }
.event-hero .eh-wrap { position: relative; grid-template-columns: 1fr !important; min-height: 600px !important; }
.event-hero .eh-img { position: absolute !important; inset: 0; width: 100%; height: 100%; min-height: 0 !important; }
.event-hero .eh-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(8,18,36,.9) 0%, rgba(8,18,36,.62) 45%, rgba(8,18,36,.25) 100%); }
.event-hero .eh-body { position: relative; z-index: 2; background: transparent !important; padding: 96px 0 56px !important; max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; padding-left: clamp(20px, 4vw, 64px) !important; padding-right: clamp(20px, 4vw, 64px) !important; }
.event-hero .eh-body > * { max-width: 640px; }
.event-hero .key-facts { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 16px; padding: 20px 24px !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); max-width: 640px; }
.event-hero .label { background: var(--warm, #C19A4D); color: #102035; padding: 7px 14px; border-radius: 999px; }
.event-hero h1 em { color: var(--warm-soft, #EADFC4); }
.event-hero .tagline { max-width: 46ch; }
@media (max-width: 1000px) { .event-hero .eh-wrap { min-height: 520px !important; } .event-hero .eh-body { padding-top: 80px !important; } }

/* Who it's for — dedicated section */
.ev-whofor { background: #fff; padding: clamp(48px,5.5vw,84px) 0; }
.whofor-wrap { margin-top: 40px; }
.whofor-wrap .block h3 { display: none; }
.whofor-wrap .block ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.whofor-wrap .block ul li {
  display: flex; gap: 14px; align-items: flex-start; font-size: 15px; color: var(--ink-2, #2B313A); line-height: 1.5;
  background: var(--off, #F7F4EF); border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-radius: 16px; padding: 20px 22px;
  transition: transform .2s ease, border-color .2s ease;
}
.whofor-wrap .block ul li:hover { transform: translateY(-3px); border-color: var(--warm-soft, #EADFC4); }
.whofor-wrap .block ul li::before { content: ""; flex: 0 0 38px; width: 38px; height: 38px; margin: 0; border-radius: 12px; background: var(--warm-tint, #FBF3E8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23C19A4D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='7' r='3'/%3E%3Cpath d='M2 21v-1a6 6 0 0 1 12 0v1'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M14 21v-1a4 4 0 0 1 7 0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; }
@media (max-width: 640px) { .whofor-wrap .block ul { grid-template-columns: 1fr; } }

/* Programme — example day, distinct from who-for */
.ev-program { background: var(--off, #F7F4EF); padding: clamp(48px,5.5vw,84px) 0; }
.program-wrap { margin-top: 40px; }
.program-wrap .block { background: #fff; border: 1px solid var(--hairline, rgba(27,31,38,.1)); border-radius: 22px; padding: 32px clamp(24px,3vw,44px); box-shadow: 0 18px 46px -34px rgba(16,44,84,.4); }
.program-wrap .block > h3 { display: flex; align-items: center; gap: 12px; font-size: 21px; margin: 0 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--hairline, rgba(27,31,38,.1)); }
.program-wrap .block > h3 svg { width: 26px; height: 26px; color: var(--warm, #C19A4D); }
.ex-tag { margin-left: auto; font-family: var(--f-body); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--warm-strong, #9A7A30); background: var(--warm-tint, #FBF3E8); border: 1px solid var(--warm-soft, #EADFC4); padding: 5px 12px; border-radius: 999px; }
.program-wrap .timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.program-wrap .timeline li { display: grid; grid-template-columns: 96px 1fr; gap: 22px; padding: 16px 0 16px 0; position: relative; }
.program-wrap .timeline li:not(:last-child) { border-bottom: 1px solid var(--hairline, rgba(27,31,38,.07)); }
.program-wrap .timeline .t { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--warm-strong, #9A7A30); letter-spacing: .04em; padding-top: 2px; }
.program-wrap .timeline strong { font-family: var(--f-display); font-size: 16px; color: var(--ink, #102C54); display: block; margin-bottom: 3px; }
.program-wrap .timeline small { font-size: 13.5px; color: var(--ink-3, #5C636C); line-height: 1.55; }
@media (max-width: 540px) { .program-wrap .timeline li { grid-template-columns: 72px 1fr; gap: 14px; } }

/* Contact / enquiry — warmer, refined */
.ev-enquiry { background: linear-gradient(165deg, var(--ink, #102C54), #0a1c38) !important; }
.ev-enquiry form input:focus, .ev-enquiry form select:focus, .ev-enquiry form textarea:focus { outline: none; border-color: var(--warm, #C19A4D); background: rgba(255,255,255,.09); }
.ev-enquiry form { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 30px clamp(22px,2.6vw,34px); }
.ev-enquiry form input, .ev-enquiry form select, .ev-enquiry form textarea { border-radius: 8px !important; }
.ev-enquiry form button { border-radius: 999px !important; background: var(--warm, #C19A4D) !important; }
.ev-enquiry form button:hover { background: var(--warm-soft, #EADFC4) !important; }
.ev-enquiry .reassure .item .ic { background: var(--warm, #C19A4D) !important; border-radius: 12px !important; }
.ev-enquiry .reassure .wa-cta { border-radius: 16px !important; }
.ev-enquiry .reassure .wa-cta svg, .ev-enquiry .reassure .wa-cta a { color: var(--warm-soft, #EADFC4); border-color: var(--warm, #C19A4D); }

/* Related "Not quite right" — card redesign */
.ev-related .rel { border-radius: 16px !important; min-height: 320px !important; box-shadow: 0 16px 42px -30px rgba(16,44,84,.5); transition: transform .28s ease, box-shadow .28s ease; }
.ev-related .rel:hover { transform: translateY(-6px); box-shadow: 0 36px 64px -34px rgba(16,44,84,.55); }
.ev-related .rel img { transition: transform .8s ease; }
.ev-related .rel::after { background: linear-gradient(180deg, rgba(11,24,44,0) 35%, rgba(9,18,34,.9) 100%) !important; }
.ev-related .rel h4 { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; }
.ev-related .rel .lk { border-bottom: none !important; gap: 9px; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; }
.ev-related .rel .lk svg { transition: transform .2s ease; }
.ev-related .rel:hover .lk svg { transform: translateX(5px); }

/* ===== redesign-v14.css ===== */
/* ============================================================
   REDESIGN v14 — "strip the SaaS tells" refinement pass
   Keeps the type system + navy/sand/brass palette.
   Removes: glassmorphism, floating number badges, soft
   drop-shadowed white cards, generic pill rows.
   Adds: solid tonal blocks, hairline separation, integrated
   brass numerals, editorial asymmetry, custom-icon sizing.
   Loads LAST — overrides earlier layers.
   ============================================================ */

:root {
  --navy:        #102C54;   /* ink / structural navy */
  --navy-2:      #0d2342;   /* deeper panel */
  --navy-3:      #16335c;   /* footer / band navy */
  --navy-block:  #13294d;   /* solid block on dark photos */
  --brass:       #C19A4D;
  --brass-soft:  #EADFC4;
  --edge:        rgba(27,31,38,.14);
  --edge-2:      rgba(27,31,38,.22);
  --edge-light:  rgba(255,255,255,.16);
}

/* ============================================================
   0. CUSTOM ICON PLACEHOLDER
   ============================================================ */
.nico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.nico svg { width: 100%; height: 100%; display: block; }
/* default size when not governed by a parent rule */
.nico:not([style*="width"]) svg { width: 1.4em; height: 1.4em; }

/* ============================================================
   1. KILL GLASSMORPHISM  → solid tonal blocks / hairlines
   ============================================================ */
.svc-chips span {
  background: var(--navy-block) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 4px !important;
}
.vehx-badge,
.event-hero .label {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.vehx-badge {
  background: var(--navy-block) !important; border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 4px !important;
}
.event-hero .key-facts {
  background: rgba(8,18,36,.62) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,.14) !important; border-radius: 4px !important;
}

/* ============================================================
   2. PROCESS STEPS  ("From an idea to anchor down")
   → no glass box, no corner badge. A single descending flow
     with oversized inline brass numerals + custom icon.
   ============================================================ */
.stepsx {
  grid-template-columns: repeat(4, 1fr);
  gap: 26px !important;
  align-items: start;
}
.stepsx::before { display: none !important; }     /* drop the old centred rule */

.stepx {
  position: relative;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.22);
}
/* descending / staggered: each column drops a little lower */
.how-strip .stepsx .stepx:nth-child(2) { margin-top: 30px; }
.how-strip .stepsx .stepx:nth-child(3) { margin-top: 60px; }
.how-strip .stepsx .stepx:nth-child(4) { margin-top: 90px; }
/* first + last read differently: brass top rule book-ends the flow */
.how-strip .stepsx .stepx:first-child,
.how-strip .stepsx .stepx:last-child { border-top-color: var(--brass); }

.stepx-ic {
  position: static !important;
  width: auto !important; height: auto !important;
  background: none !important; border: none !important; border-radius: 0 !important;
  margin: 0 0 14px !important;
  display: flex !important; align-items: baseline; gap: 14px;
  color: var(--brass);
}
.stepx-ic .nico { width: 30px; height: 30px; flex: 0 0 30px; align-self: center; }
.stepx-ic svg { width: 30px; height: 30px; }
/* the numeral, formerly a floating circle badge */
.stepx-n {
  position: static !important;
  width: auto !important; height: auto !important;
  background: none !important; border-radius: 0 !important;
  color: var(--brass) !important;
  font-family: var(--f-display); font-weight: 800 !important;
  font-size: 46px !important; line-height: .8 !important;
  letter-spacing: -.04em;
  order: -1;
}
.how-strip .stepx h4 { color: #fff; font-size: 20px; }
.how-strip .stepx p { color: rgba(255,255,255,.78); opacity: 1; }

@media (max-width: 880px) {
  .stepsx { grid-template-columns: 1fr 1fr; }
  .how-strip .stepsx .stepx:nth-child(2),
  .how-strip .stepsx .stepx:nth-child(3),
  .how-strip .stepsx .stepx:nth-child(4) { margin-top: 0; }
  .how-strip .stepsx .stepx:nth-child(3) { margin-top: 22px; }
  .how-strip .stepsx .stepx:nth-child(4) { margin-top: 22px; }
}
@media (max-width: 520px) { .stepsx { grid-template-columns: 1fr; } }

/* ============================================================
   3. FLAT BLOCKS  — kill soft rounded drop-shadowed white cards
     Named: transfer cards, what's-included, add-ons, water-toys,
     contact info cards. Sharp-ish corners + real borders.
   ============================================================ */
.xfer-card,
.incl-feat,
.ws-item,
.contact-info-card,
.addons-teaser .at-card {
  border-radius: 4px !important;
  box-shadow: none !important;
  border: 1px solid var(--edge) !important;
  transition: border-color .22s ease, background .22s ease, transform .22s ease !important;
}
.xfer-card:hover,
.incl-feat:hover,
.ws-item:hover,
.contact-info-card:hover,
.addons-teaser .at-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--brass) !important;
}
.xfer-ph { border-radius: 0 !important; }
.incl-feat .ic,
.ws-item .ic { border-radius: 4px !important; }

/* what's-included icon tiles: solid brass-tint block, square-ish */
.incl-feat .ic { background: var(--brass-soft) !important; }

/* ============================================================
   4. TRANSFER CARDS — break the identical twins (asymmetry)
     Sea card larger w/ tag overlapping image; land card narrower
     editorial, image bleeding to one edge.
   ============================================================ */
.xfer-grid { grid-template-columns: 1.32fr 1fr !important; align-items: stretch; }

/* Sea card: label tag sits low on the photo (overlapping the image) */
.xfer-card.sea .xfer-ph { aspect-ratio: 16 / 10; }
.xfer-card.sea .xfer-kind {
  top: auto; bottom: 18px; left: 18px;
}
.xfer-card.sea .xfer-bd { padding-top: 30px; }

/* Land card: editorial split — image left, copy right */
.xfer-card.land { flex-direction: row; }
.xfer-card.land .xfer-ph { flex: 0 0 42%; aspect-ratio: auto; }
.xfer-card.land .xfer-ph img { height: 100%; }
.xfer-card.land .xfer-bd { flex: 1; }

/* shared: square tag, no glass */
.xfer-kind {
  border-radius: 4px !important;
  background: #fff !important;
  border: 1px solid var(--edge) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

@media (max-width: 860px) {
  .xfer-grid { grid-template-columns: 1fr !important; }
  .xfer-card.land { flex-direction: column; }
  .xfer-card.land .xfer-ph { flex: none; aspect-ratio: 16 / 8.6; }
  .xfer-card.sea .xfer-kind { left: 18px; }
}

/* ============================================================
   5. DE-PILL  — route tags become a bracketed ticker row,
     not rounded chips.
   ============================================================ */
.xfer-routes {
  gap: 0 !important;
  border-top: 1px solid var(--edge);
  margin-top: 22px !important; padding-top: 16px;
}
.xfer-routes span {
  background: none !important; border: none !important; border-radius: 0 !important;
  padding: 0 !important;
  font-family: var(--f-display); font-weight: 600;
  font-size: 13px !important; color: var(--ink-2, #2B313A) !important;
  letter-spacing: -.01em;
  display: inline-flex; align-items: center;
}
.xfer-routes span:not(:last-child)::after {
  content: "·";
  margin: 0 9px; color: var(--brass); font-weight: 700;
}

/* ============================================================
   6. BOARDING-POINTS BOX  — solid tonal navy block, no glass
   ============================================================ */
.boarding-list,
.boarding-points {
  background: rgba(255,255,255,.05) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-left: 3px solid var(--brass) !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 16px 18px !important;
}
.boarding-list .lbl,
.boarding-points .lbl {
  color: var(--brass) !important; font-weight: 700 !important;
}
.boarding-list span,
.boarding-points span { color: rgba(255,255,255,.55) !important; }

/* ============================================================
   7. OPTIONAL EXTRAS / ADD-ONS  — flat, no glass, de-pilled CTA
   ============================================================ */
.addon {
  border-style: solid !important;
  border-color: var(--edge) !important;
  border-radius: 4px !important;
  background: #fff !important;
}
/* "Request price / menu" — was a rounded uppercase pill → bracketed link */
.addons-teaser .at-card .price-pill,
.price-pill {
  align-self: flex-start;
  background: none !important; border: none !important;
  border-radius: 0 !important; padding: 0 !important;
  color: var(--brass) !important;
  border-bottom: 1px solid var(--brass) !important;
  padding-bottom: 2px !important;
  letter-spacing: .14em !important;
}
.addons-teaser .at-card {
  border: 1px solid var(--edge) !important; border-radius: 4px !important;
}
.addons-teaser .at-card .ic svg { stroke-width: 1.5 !important; }

/* ============================================================
   8. WHAT'S ON BOARD — unify the two panels (incl / not-incl)
     into one confident language: matching flat navy panels.
   ============================================================ */
.incl-split, .inc-exc, .included-grid { /* defensive: common wrappers */ }
.boat-included .panel,
.inc-panel, .exc-panel {
  border-radius: 4px !important; box-shadow: none !important;
}

/* ============================================================
   9. CONTACT — break the rigid 50/50; form dominant, details
     a narrower offset column, brass as structural accent.
   ============================================================ */
/* homepage combined card → full-bleed navy band (blends with the page) */
.faq-contact, .final { background: var(--navy-3, #16335c) !important; }
.faq-contact .combined-card,
.final .contact-block-v2 {
  background: transparent !important; border: none !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.final .contact-block-v2 .form-side,
.final .contact-block-v2 .info-side { background: transparent !important; }
.final .contact-block-v2 .info-side { border-left-color: rgba(255,255,255,.12) !important; }
.faq-contact .combined-card .body { grid-template-columns: 1.25fr .9fr !important; }
.faq-contact .info-side {
  border-left: 1px solid rgba(255,255,255,.12);
}
.faq-contact .boarding-list { margin-top: 22px; }

/* dedicated contact page */
.contact-grid { grid-template-columns: 1.5fr .82fr !important; align-items: start; gap: clamp(20px,2.6vw,40px) !important; }
.contact-form-card {
  border-radius: 4px !important;
  border-left: 3px solid var(--brass) !important;
}
.contact-info-card {
  background: #fff !important;
}
.contact-info-card .ic { color: var(--brass) !important; }
@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .faq-contact .body { grid-template-columns: 1fr !important; }
}

/* ============================================================
   10. FOOTER — editorial character (shared markup, all pages)
   ============================================================ */
.site-footer {
  background: var(--navy-3) !important;
  padding: 0 0 30px !important;
  border-top: none !important;
}
.site-footer .wrap { position: relative; z-index: 1; }
.site-footer::before { display: none !important; }   /* drop old wave bg illustration */

/* brass hairline + horizon rule across the top */
.site-footer .footer-grid {
  position: relative;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.3fr !important;
  gap: 30px 48px !important;
  padding: 64px 0 44px !important;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.site-footer .footer-grid::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--brass) 0%, var(--brass) 90px, rgba(255,255,255,.12) 90px, rgba(255,255,255,.12) 100%);
}

/* column headings → brass, ticked, editorial */
.site-footer .footer-grid .col h4 {
  color: #fff !important;
  font-size: 12px !important; letter-spacing: .2em !important; text-transform: uppercase;
  font-weight: 700; font-family: var(--f-body) !important;
  margin-bottom: 16px !important;
}
.site-footer .footer-grid .col h4::before { display: none !important; content: none !important; }
.site-footer .footer-grid .col ul a {
  color: rgba(255,255,255,.66) !important; font-size: 14px !important;
  transition: color .18s ease, padding-left .18s ease;
}
.site-footer .footer-grid .col ul a:hover { color: #fff !important; padding-left: 5px; }

/* brand column */
.site-footer .footer-brand .descriptor { color: rgba(255,255,255,.6); max-width: 38ch; }
.site-footer .footer-brand .brand-text { color: #fff; }

/* contact column ("Visit Us"): make phone + email prominent */
.site-footer .nap .ic-line { align-items: flex-start; gap: 12px !important; }
.site-footer .nap .ic-line a { color: #fff !important; font-weight: 600; }
.site-footer .nap .ic-line strong { color: #fff; }
.site-footer .nap .ic-line svg,
.site-footer .nap .ic-line .nico { color: var(--brass); width: 18px; height: 18px; flex: 0 0 18px; }

/* socials → square brass-outline buttons (echo reference) */
.site-footer .socials { gap: 10px !important; }
.site-footer .socials a {
  width: 40px !important; height: 40px !important; border-radius: 4px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.85) !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.site-footer .socials a:hover {
  border-color: var(--brass) !important; color: #fff !important;
  background: rgba(193,154,77,.14) !important;
}
.site-footer .socials a svg { width: 18px; height: 18px; }

/* legal bar */
.site-footer .legal-bar {
  padding-top: 24px !important;
  color: rgba(255,255,255,.5);
  border-top: none !important;
}
.site-footer .legal-bar .legal-links a { color: rgba(255,255,255,.55); }
.site-footer .legal-bar .legal-links a:hover { color: #fff; }

@media (max-width: 900px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .site-footer .footer-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   11. HERO TRUST + WHY-US — custom icon sizing (icons swapped
       to nautical set inline in markup)
   ============================================================ */
.hero-trust-item .nico { width: 30px; height: 30px; }
.ic-row .nico { width: 24px; height: 24px; }

/* ============================================================
   12. KILL GLASSMORPHISM EVERYWHERE (catch-all)
   ============================================================ */
*, *::before, *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ============================================================
   13. FOOTER — fix the double brass line under headings
   ============================================================ */
.footer-grid .col h4::after { display: none !important; content: none !important; }
.footer-grid .col h4 { padding-bottom: 0 !important; }

/* ============================================================
   14. ICON TILES → no background, larger icons (desktop)
       Drop the brass-tint circles/squares; let the brass line
       icon carry it at a bigger size.
   ============================================================ */
.why-v2 .wcard .ic-circle,
.incl-feat .ic,
.ws-item .ic,
.contact-info-card .ic {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important; height: auto !important;
  flex: 0 0 auto !important;
  color: var(--brass) !important;
  margin-bottom: 12px;
  justify-content: flex-start !important;
}
.why-v2 .wcard:hover .ic-circle { background: none !important; color: var(--brass) !important; }
.why-v2 .wcard .ic-circle svg,
.why-v2 .wcard .ic-circle .nico { width: 44px !important; height: 44px !important; stroke-width: 1.5 !important; }
.incl-feat { align-items: center !important; }
.incl-feat .ic svg,
.incl-feat .ic .nico { width: 32px !important; height: 32px !important; }
.ws-item .ic svg,
.ws-item .ic .nico { width: 34px !important; height: 34px !important; }
.contact-info-card .ic svg { width: 34px !important; height: 34px !important; }
@media (max-width: 600px) {
  .why-v2 .wcard .ic-circle svg,
  .why-v2 .wcard .ic-circle .nico { width: 38px !important; height: 38px !important; }
}

/* ============================================================
   15. LAND TRANSFER CARD — robust editorial split (image left)
   ============================================================ */
.xfer-card.land { flex-direction: row !important; align-items: stretch !important; }
.xfer-card.land .xfer-ph {
  flex: 0 0 44% !important; aspect-ratio: auto !important;
  position: relative; overflow: hidden; min-height: 100%;
}
.xfer-card.land .xfer-ph img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}
.xfer-card.land .xfer-bd { flex: 1 1 auto; }
@media (max-width: 860px) {
  .xfer-card.land { flex-direction: column !important; }
  .xfer-card.land .xfer-ph { flex: none !important; aspect-ratio: 16 / 8.6 !important; min-height: 0; }
}

/* ============================================================
   16. FOOTER — socials without box (bigger), rating + payments
   ============================================================ */
.site-footer .socials a {
  width: auto !important; height: auto !important;
  background: none !important; border: none !important;
  border-radius: 0 !important; padding: 4px !important;
  color: rgba(255,255,255,.72) !important;
}
.site-footer .socials a:hover { background: none !important; color: var(--brass) !important; }
.site-footer .socials a svg { width: 26px !important; height: 26px !important; }

.footer-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 22px 36px;
  padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.fs-rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fs-rating .fs-stars { display: inline-flex; gap: 2px; color: var(--brass); }
.fs-rating .fs-stars svg { width: 18px; height: 18px; fill: currentColor; }
.fs-rating .fs-rate { color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 15px; }
.fs-rating .fs-rate strong { font-size: 19px; letter-spacing: -.01em; }
.fs-rating .fs-src { color: rgba(255,255,255,.55); font-size: 13px; }
.fs-rating .fs-div { color: var(--brass); opacity: .7; }

.fs-pay { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fs-pay-lbl { color: rgba(255,255,255,.5); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.fs-pay .pays { display: flex; gap: 7px; align-items: center; }
.pay {
  height: 26px; min-width: 42px; padding: 0 9px;
  background: #fff; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 800; font-size: 12px;
  letter-spacing: .02em; color: #16335c;
}
.pay.pv { color: #1434CB; font-style: italic; }
.pay.amex { color: #2E77BC; }
.pay.pp { color: #003087; }
.pay.pp em { color: #009CDE; font-style: italic; }
.pay.circ { gap: 0; }
.pay.circ i { width: 13px; height: 13px; border-radius: 50%; display: block; }
.pay.mc i:first-child { background: #EB001B; }
.pay.mc i:last-child { background: #F79E1B; margin-left: -6px; mix-blend-mode: multiply; }
.pay.ms i:first-child { background: #0099DF; }
.pay.ms i:last-child { background: #ED0006; margin-left: -6px; mix-blend-mode: multiply; }
@media (max-width: 720px) { .footer-strip { gap: 16px; } .fs-rating .fs-src { display: none; } }

/* ============================================================
   17. REVIEW SOURCE BADGES — clean white chip, top-right,
       never overlapping the quote (fixes floating badge)
   ============================================================ */
.testi { position: relative !important; }
.testi .testi-src-logo,
.testimonials .testi-rail .testi .testi-src-logo {
  position: absolute !important;
  top: 16px !important; right: 16px !important; left: auto !important; bottom: auto !important;
  width: 34px !important; height: 34px !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: #fff !important; border-radius: 8px; padding: 4px; box-sizing: border-box;
  box-shadow: 0 4px 14px rgba(8,18,36,.22); z-index: 6; opacity: 1;
}
.testi .testi-src-logo svg,
.testi .testi-src-logo img { width: 100% !important; height: 100% !important; }

/* ============================================================
   19. TYPOGRAPHIC CONTRAST — bigger display headlines, let the
       condensed display + italic do more work; tighter leads.
   ============================================================ */
h2 { font-size: clamp(36px, 4.9vw, 70px); line-height: .98; letter-spacing: -.035em; }
.section-head .lead, .intro p, .cv9-head .lead { font-size: 17.5px; max-width: 46ch; }
.h-eyebrow { font-weight: 600; }

/* about-page value icons → nautical set, brass, no tile */
.value-card .ic { background: none !important; color: var(--brass) !important; }
.value-card .ic .nico { width: 44px; height: 44px; display: inline-flex; }
.value-card .ic .nico svg { width: 100%; height: 100%; }

/* faq category icons → nautical set, brass, larger, no tile */
.faq-cat .ic { background: none !important; color: var(--brass) !important; }
.faq-cat .ic .nico { width: 40px; height: 40px; display: inline-flex; }
.faq-cat .ic .nico svg { width: 100%; height: 100%; }

/* ============================================================
   20. DE-PILL route/place-name chips everywhere → dot ticker
       (functional spec chips like capacity/speed stay as-is)
   ============================================================ */
.durx-route, .cb-stops { gap: 0 !important; }
.durx-route span, .cb-stops span {
  background: none !important; border: none !important;
  border-radius: 0 !important; padding: 0 !important;
  font-family: var(--f-display); font-weight: 600; font-size: 12.5px !important;
  color: var(--ink-2, #2B313A) !important; letter-spacing: -.01em;
}
.durx-route span:not(:last-child)::after,
.cb-stops span:not(:last-child)::after {
  content: "·"; margin: 0 8px; color: var(--brass); font-weight: 700;
}
.durx.featured .durx-route span { color: rgba(255,255,255,.85) !important; }
.durx.featured .durx-route span::after { color: var(--brass-soft) !important; }

/* ============================================================
   18. FLAT CARDS SITE-WIDE — kill soft drop-shadows + big radii
       on every recurring card family. Minimally-rounded blocks
       with real borders / color separation; no hover lift.
   ============================================================ */
.tourx, .kindx, .cboat, .evx, .daycard, .vehx, .durx, .svc-tile,
.preview, .land-veh, .ft-card, .tour-card, .yacht-card, .cat-card,
.blog-card, .at-card, .post-card, .related-card, .boat-card {
  border-radius: 4px !important;
  box-shadow: none !important;
}
.tourx:hover, .kindx:hover, .cboat:hover, .evx:hover, .daycard:hover,
.vehx:hover, .durx:hover, .svc-tile:hover, .preview:hover, .land-veh:hover,
.ft-card:hover, .tour-card:hover, .yacht-card:hover, .cat-card:hover,
.blog-card:hover, .at-card:hover, .post-card:hover, .related-card:hover,
.boat-card:hover {
  transform: none !important;
  box-shadow: none !important;
}
/* bordered light cards → brass hairline on hover instead of a lift */
.tourx:hover, .kindx:hover, .cboat:hover, .evx:hover, .daycard:hover,
.vehx:hover, .durx:hover, .land-veh:hover, .tour-card:hover,
.cat-card:hover, .blog-card:hover, .boat-card:hover {
  border-color: var(--brass) !important;
}
/* image-led cards keep a subtle photo zoom on hover (already defined),
   just drop the rounded inner corners so they read as flat blocks */
.tourx .ph, .kindx-ph, .cboat-ph, .evx-ph, .daycard-ph, .svc-tile img,
.yc-photo, .cat-img, .tour-card .img, .ft-card .img {
  border-radius: 0 !important;
}

/* ============================================================
   21. CATCH REMAINING ROUNDED CARDS + their tags (match homepage)
   ============================================================ */
.tour-listing-card, .home-featured-card, .duration-card, .bt-q, .bt-inc-list,
.value-card, .team-card, .about-badge-card, .at-card, .blog-card, .post-card,
.faq-cat, .cv9-card, .stat, .info-card, .price-card, .duration-card,
.tm-example, .related-card, .ws-attach .at-card {
  border-radius: 4px !important;
  box-shadow: none !important;
}
.tour-listing-card:hover, .home-featured-card:hover, .duration-card:hover,
.value-card:hover, .team-card:hover, .at-card:hover, .blog-card:hover,
.faq-cat:hover, .tm-example:hover {
  transform: none !important; box-shadow: none !important;
  border-color: var(--brass) !important;
}
.tour-listing-card > .img, .home-featured-card .img, .blog-card .img,
.related-card .img, .tm-example .img { border-radius: 0 !important; }

/* squared label/duration tags (were rounded 999px pills over photos) */
.duration-tag, .cv9-card .badge, .home-featured-card .tg,
.tour-listing-card .duration-tag, .blog-card .tag, .post-card .tag,
.bc-v2 .bc-tag, .cboat-label, .kindx-count, .evx-chip, .tourx .dur,
.daycard-dur, .xfer-kind, .cat-count { border-radius: 4px !important; }

/* place / stop pills inside listing cards → dot ticker (match homepage) */
.tours-grid .tour-listing-card,
.tour-listing-card.tour-listing-card { border-radius: 4px !important; }
.tour-listing-card .stops {
  gap: 0 !important; border-top: 1px solid var(--edge);
  margin-top: 6px !important; padding-top: 14px !important;
}
.tour-listing-card .stops .pill, .tour-listing-card .pill,
.tour-listing-card .stops .pill:nth-child(4n+1),
.tour-listing-card .stops .pill:nth-child(4n+2),
.tour-listing-card .stops .pill:nth-child(4n+3),
.tour-listing-card .stops .pill:nth-child(4n+4) {
  background: none !important; border: none !important;
  border-radius: 0 !important; padding: 0 !important;
  color: var(--ink-2, #2B313A) !important;
  font-family: var(--f-display); font-weight: 600; font-size: 12.5px !important;
  letter-spacing: -.01em;
}
.tour-listing-card .stops .pill:not(:last-child)::after {
  content: "·"; margin: 0 8px; color: var(--brass); font-weight: 700;
}
/* spec/meta chips → squared, restrained (not soft pills) */
.tour-listing-card .meta-row > span, .tour-listing-card .body .meta > *,
.tour-listing-card .body .row > * {
  border-radius: 4px !important;
}

/* ============================================================
   22. PARTNERS BAND — above the footer, every page
   ============================================================ */
.partners-band { background: var(--off, #F7F4EF); border-top: 1px solid var(--edge); padding: clamp(34px, 4vw, 54px) 0; }
.partners-band .wrap { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.partners-label {
  font-family: var(--f-body); font-size: 11.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ink-3, #5C636C); font-weight: 600;
  display: inline-flex; align-items: center; gap: 12px;
}
.partners-label::before, .partners-label::after { content: ""; width: 26px; height: 1px; background: var(--brass); }
.partners-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 40px;
}
.partner {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-display); font-weight: 700; font-size: 17px;
  letter-spacing: -.01em; color: #2C3744;
  opacity: .62; transition: opacity .2s ease, color .2s ease;
}
.partner:hover { opacity: 1; }
.partner svg { width: 22px; height: 22px; }
.partner .pm { color: var(--brass); }
@media (max-width: 640px) { .partners-row { gap: 16px 26px; } .partner { font-size: 15px; } }

/* ============================================================
   23. REVIEWS PAGE (social proof)
   ============================================================ */
.rev-summary { background: var(--navy-3, #16335c); color: #fff; padding: clamp(40px,5vw,76px) 0; }
.rev-summary .wrap { display: grid; grid-template-columns: auto 1fr; gap: clamp(28px,5vw,72px); align-items: center; }
.rev-score { display: flex; flex-direction: column; gap: 5px; }
.rev-score .big { font-family: var(--f-display); font-weight: 800; font-size: clamp(76px,10vw,132px); line-height: .8; letter-spacing: -.04em; }
.rev-score .out { color: rgba(255,255,255,.5); font-family: var(--f-display); font-size: 20px; }
.rev-score .rev-stars { color: var(--brass); font-size: 22px; letter-spacing: 3px; margin-top: 4px; }
.rev-score .rev-sub { color: rgba(255,255,255,.6); font-size: 14px; }
.rev-sources { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.rev-source { border: 1px solid rgba(255,255,255,.16); border-left: 3px solid var(--brass); padding: 20px 22px; display: flex; flex-direction: column; gap: 7px; }
.rev-source .rs-top { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; }
.rev-source .rs-top svg { width: 26px; height: 26px; }
.rev-source .rs-score { font-family: var(--f-display); font-weight: 800; font-size: 26px; letter-spacing: -.02em; }
.rev-source .rs-meta { color: rgba(255,255,255,.6); font-size: 13px; }
@media (max-width: 860px) { .rev-summary .wrap { grid-template-columns: 1fr; } .rev-sources { grid-template-columns: 1fr; } }

.rev-videos { padding: clamp(48px,5.5vw,84px) 0; background: #fff; }
.rev-video-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 36px; }
.rev-video { position: relative; aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; display: block; }
.rev-video img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.rev-video:hover img { transform: scale(1.05); }
.rev-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,24,44,.05) 38%, rgba(9,18,34,.85) 100%); }
.rev-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform .2s ease, background .2s ease; }
.rev-video:hover .rev-play { background: #fff; transform: translate(-50%,-50%) scale(1.07); }
.rev-play svg { width: 22px; height: 22px; color: var(--navy, #102C54); margin-left: 3px; }
.rev-video .rv-meta { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; color: #fff; }
.rev-video .rv-meta strong { font-family: var(--f-display); font-size: 17px; display: block; letter-spacing: -.01em; }
.rev-video .rv-meta span { font-size: 13px; color: rgba(255,255,255,.82); }
.rev-video .rv-len { position: absolute; top: 14px; right: 14px; z-index: 2; background: rgba(8,18,36,.7); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 4px 8px; border-radius: 4px; }
@media (max-width: 860px) { .rev-video-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rev-video-grid { grid-template-columns: 1fr; } }

.rev-text { padding: clamp(48px,5.5vw,84px) 0; background: var(--off, #F7F4EF); }
.rev-grid { columns: 3; column-gap: 16px; margin-top: 36px; }
.rev-grid .testi { break-inside: avoid; margin-bottom: 16px; border-radius: 4px !important; box-shadow: none !important; width: 100%; }
@media (max-width: 900px) { .rev-grid { columns: 2; } }
@media (max-width: 600px) { .rev-grid { columns: 1; } }

/* ============================================================
   24. SOCIAL / INSTAGRAM FEED
   ============================================================ */
.social-feed { background: #fff; padding: clamp(48px,5.5vw,84px) 0; }
.sf-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.sf-handle { display: flex; align-items: center; gap: 14px; }
.sf-ig { width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg,#F58529,#DD2A7B 52%,#8134AF 80%,#515BD4); }
.sf-ig svg { width: 26px; height: 26px; }
.sf-handle strong { font-family: var(--f-display); font-size: 21px; display: block; letter-spacing: -.01em; color: var(--ink, #102C54); }
.sf-handle span { color: var(--ink-3, #5C636C); font-size: 14px; }
.sf-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
.sf-tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 4px; display: block; }
.sf-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.sf-tile:hover img { transform: scale(1.08); }
.sf-tile .sf-ov { position: absolute; inset: 0; background: rgba(9,18,34,.46); opacity: 0; transition: opacity .2s ease; display: flex; align-items: center; justify-content: center; gap: 16px; color: #fff; font-family: var(--f-display); font-weight: 700; font-size: 13px; }
.sf-tile:hover .sf-ov { opacity: 1; }
.sf-ov span { display: inline-flex; align-items: center; gap: 6px; }
.sf-ov svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .sf-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 520px) { .sf-grid { grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   25. EVENT/TAILOR-MADE included vs not-included → unified flat
   ============================================================ */
.tm-incl-col {
  background: #fff !important; border: 1px solid var(--edge) !important;
  border-radius: 4px !important; box-shadow: none !important;
}
.tm-incl-col.yes { border-top: 3px solid var(--brass) !important; }
.tm-incl-col.no  { border-top: 3px solid var(--edge-2) !important; }
.tm-incl-col.yes li svg { color: var(--brass) !important; }
.tm-incl-col .rates { border-radius: 4px !important; }
/* event overview aside quote → flat, brass rule */
.ev-overview .quote-card { border-radius: 4px !important; box-shadow: none !important; border-left: 3px solid var(--brass); }
.ev-overview .pic, .ev-program .block, .ev-whofor .whofor-wrap .block ul li { border-radius: 4px !important; }
.ev-program .block { box-shadow: none !important; border-radius: 4px !important; }

/* ============================================================
   v15 ADDITIONS
   ============================================================ */

/* ---- normalize over-rounded detail-page cards to the 4px standard ---- */
.incl-photo,
.incl-photo-tag,
.incl-feat,
.quote-sticky,
.specs-table,
.addons-v13 .addon,
.boat-gallery-top .gallery-grid > a,
.faq-wrap,
.faq .faq-item { border-radius: 4px !important; }

/* ============================================================
   EVENT DETAIL HEADER — refined to the squared editorial system,
   breadcrumbs lifted out into a bar below the hero
   ============================================================ */
.event-hero .eh-img::after {
  background: linear-gradient(100deg, rgba(8,18,36,.92) 0%, rgba(8,18,36,.66) 48%, rgba(8,18,36,.30) 100%) !important;
}
.event-hero .eh-body { padding: 100px 0 64px !important; }
.event-hero .label {
  background: var(--brass, #C19A4D) !important; color: #0d1f33 !important;
  border-radius: 4px !important; padding: 7px 13px !important;
  font-size: 11px !important; letter-spacing: .2em !important; font-weight: 700 !important;
  text-transform: uppercase;
}
.event-hero h1 { font-size: clamp(40px, 5.2vw, 66px) !important; letter-spacing: -.035em; }
.event-hero .tagline { color: rgba(255,255,255,.9) !important; }
.event-hero .key-facts {
  background: rgba(8,18,36,.58) !important; border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 4px !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* breadcrumb bar, directly under the header */
.event-crumbs { background: var(--off, #F7F4EF); border-bottom: 1px solid var(--edge, rgba(27,31,38,.12)); }
.event-crumbs .wrap { max-width: var(--maxw, 1320px); margin: 0 auto; padding: 15px var(--gutter, 28px); }
.event-crumbs .crumbs {
  display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate-3, #6B7585); font-weight: 600; margin: 0;
}
.event-crumbs .crumbs a { color: var(--slate-2, #475261); transition: color .2s ease; }
.event-crumbs .crumbs a:hover { color: var(--olive, #9A7A30); }
.event-crumbs .crumbs span { opacity: .45; margin: 0; }

/* ============================================================
   SOCIAL MOMENTS — homepage (replaces the .social-feed tile grid)
   ============================================================ */
.social-moments { background: var(--off, #F7F4EF); padding: clamp(64px,7vw,112px) 0; }
.social-moments .wrap { max-width: var(--maxw, 1320px); margin: 0 auto; padding: 0 var(--gutter, 28px); }
.sm-head { text-align: center; max-width: 760px; margin: 0 auto 38px; display: flex; flex-direction: column; align-items: center; }
.sm-eyebrow {
  font-family: var(--f-body); font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--brass, #C19A4D); font-weight: 600; margin-bottom: 20px;
  display: inline-flex; flex-direction: column; align-items: center; gap: 14px;
}
.sm-eyebrow::after { content: ""; width: 36px; height: 2px; background: var(--brass, #C19A4D); }
.sm-head h2 { font-family: var(--f-display); color: var(--ink, #102C54); font-weight: 600; font-size: clamp(30px,3.7vw,52px); line-height: 1.03; letter-spacing: -.035em; }
.sm-head p { margin-top: 18px; color: var(--slate-2, #475261); font-size: 17px; line-height: 1.55; text-wrap: pretty; }

.sm-tabs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 0 auto 38px; }
.sm-tab {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px;
  font-family: var(--f-display); font-weight: 600; font-size: 14.5px; color: var(--slate-2,#475261);
  background: none; border: 1px solid transparent; border-radius: 4px; cursor: pointer; text-decoration: none;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.sm-tab .sm-ico { width: 22px; height: 22px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; overflow: hidden; }
.sm-tab .sm-ico svg { width: 22px; height: 22px; display: block; }
.sm-tab.is-active { color: var(--ink,#102C54); border-color: var(--brass,#C19A4D); background: #fff; }
.sm-tab:not(.is-active):hover { color: var(--ink,#102C54); }
.sm-tab-sep { width: 1px; height: 20px; background: var(--edge, rgba(27,31,38,.16)); margin: 0 6px; }

.sm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sm-card {
  position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 27/40;
  background: #fff; border: 1px solid var(--edge, rgba(27,31,38,.1));
  display: flex; flex-direction: column; text-decoration: none;
  box-shadow: 0 18px 42px -34px rgba(16,44,84,.5);
  transition: transform .26s ease, box-shadow .26s ease;
}
.sm-card:hover { transform: translateY(-5px); box-shadow: 0 32px 58px -34px rgba(16,44,84,.55); }
.sm-badge { position: absolute; top: 12px; left: 12px; z-index: 3; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.sm-badge svg { width: 18px; height: 18px; }
.sm-count { position: absolute; top: 14px; right: 12px; z-index: 3; background: rgba(8,18,36,.55); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }

/* light / instagram card */
.sm-card.sm-ig .sm-photo { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sm-card.sm-ig .sm-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.sm-card.sm-ig:hover .sm-photo img { transform: scale(1.05); }
.sm-ig .sm-foot { padding: 12px 13px 13px; }
.sm-ig .sm-user { display: flex; align-items: center; gap: 9px; }
.sm-ig .sm-ava { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: 0 0 28px; }
.sm-ig .sm-handle { font-family: var(--f-display); font-weight: 700; font-size: 13px; color: var(--ink,#102C54); display: inline-flex; align-items: center; gap: 4px; }
.sm-ig .sm-handle svg { width: 13px; height: 13px; color: #3897F0; flex: 0 0 13px; }
.sm-ig .sm-time { margin-left: auto; font-size: 12px; color: var(--slate-3,#6B7585); }
.sm-ig .sm-cap { margin-top: 9px; font-size: 13px; line-height: 1.45; color: var(--slate-2,#475261); }
.sm-ig .sm-stats { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--edge, rgba(27,31,38,.1)); display: flex; align-items: center; gap: 15px; color: var(--slate-3,#6B7585); font-size: 12.5px; font-weight: 600; }
.sm-ig .sm-stats span { display: inline-flex; align-items: center; gap: 5px; }
.sm-ig .sm-stats svg { width: 15px; height: 15px; }
.sm-ig .sm-stats .sm-save { margin-left: auto; }

/* dark / video card */
.sm-card.sm-video { background: #0d1f33; }
.sm-card.sm-video > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.sm-card.sm-video:hover > img { transform: scale(1.05); }
.sm-card.sm-video::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,18,36,.4) 0%, rgba(8,18,36,0) 28%, rgba(8,18,36,.78) 100%); }
.sm-rail { position: absolute; right: 12px; bottom: 72px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 15px; color: #fff; }
.sm-rail .sm-act { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; }
.sm-rail .sm-act svg { width: 24px; height: 24px; }
.sm-railava { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; }
.sm-video .sm-cap { position: absolute; left: 14px; right: 54px; bottom: 16px; z-index: 3; color: #fff; }
.sm-video .sm-handle { font-family: var(--f-display); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; }
.sm-video .sm-handle svg { width: 13px; height: 13px; color: var(--brass,#C19A4D); flex: 0 0 13px; }
.sm-video .sm-captext { margin-top: 5px; font-size: 12.5px; line-height: 1.42; color: rgba(255,255,255,.92); }
.sm-mute { position: absolute; right: 14px; bottom: 16px; z-index: 3; color: rgba(255,255,255,.92); }
.sm-mute svg { width: 18px; height: 18px; }

.sm-foot-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 44px; }
.sm-note { font-size: 14px; color: var(--slate-3,#6B7585); }

@media (max-width: 960px) { .sm-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .sm-grid { grid-template-columns: 1fr; } .sm-tab-sep { display: none; } .sm-tabs { gap: 4px; } }

/* ============================================================
   PARTNERS — homepage feature ("Book with trusted partners")
   ============================================================ */
.partners-band.partners-feature { padding: clamp(60px,7vw,104px) 0; border-top: none; background: var(--off, #F7F4EF); }
.partners-feature .wrap { gap: 0; }
.partners-feature .pf-eyebrow {
  font-family: var(--f-body); font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--brass, #C19A4D); font-weight: 600; margin-bottom: 18px;
}
.partners-feature h2 { font-family: var(--f-display); color: var(--ink,#102C54); font-weight: 600; font-size: clamp(30px,3.7vw,52px); letter-spacing: -.035em; margin: 0 0 clamp(40px,5vw,68px); }
.pf-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(30px,5vw,76px); }
.pf-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 800; font-size: clamp(18px,1.7vw,24px); letter-spacing: -.01em;
  transition: transform .2s ease, opacity .2s ease;
}
.pf-logo:hover { transform: translateY(-2px); }
.pf-logo svg { display: block; }
@media (max-width: 640px) { .pf-logos { gap: 26px 38px; } }

/* combined birthdays: who-tends-to-book block folded into the overview */
.ev-whofor-inline { margin-top: clamp(40px,5vw,64px); padding-top: clamp(34px,4vw,52px); border-top: 1px solid var(--edge, rgba(27,31,38,.12)); }
.ev-subhead { font-family: var(--f-display); font-weight: 600; font-size: clamp(21px,2.1vw,28px); letter-spacing: -.02em; color: var(--ink,#102C54); margin: 0; }
.ev-whofor-inline .whofor-wrap { margin-top: 24px; }

/* ===== redesign-v17.css ===== */
/* ============================================================
   REDESIGN v17
   Global (all pages):
     • Remove the brass/sand eyebrow "dash" accents everywhere
     • Squared corners + clean hairline borders (per the line ref)
   Homepage sections:
     • Services tiles — bigger, button CTA, no numbers, big headings
     • Featured tours — bold full-bleed image cards
     • Events tiles — no numbers, bigger headings
     • Gallery — larger + "see more" button
     • FAQ + Contact — bolder, brass-accented, mobile-tuned
   ============================================================ */
:root {
  --v17-navy:   #0C2244;
  --v17-navy-2: #081A36;
  --v17-brass:  #C9A35A;
  --v17-brass-2:#E4CB94;
  --v17-cream:  #F7F4EF;
  --v17-ink:    #102C54;
  --v17-hair:   rgba(16,44,84,.12);
}

/* ============================================================
   GLOBAL 1 — remove every eyebrow dash / accent tick
   ============================================================ */
.h-eyebrow::before,
.cx-eyebrow::before,
.me-eyebrow::before,
.proof-eyebrow::before,
.sm-eyebrow::before,
.pf-eyebrow::before,
.legal-toc-label::before,
.legal-meta .lm-badge::before,
.tx16-eyebrow::before,
.svc16 .cv9-head .h-eyebrow::before,
.cx16 .contact-form-card .h-eyebrow::before,
.form-eyebrow::before,
.faq-contact .faq-side .section-label::before {
  display: none !important;
  content: none !important;
}
/* eyebrows: drop the now-empty leading gap */
.h-eyebrow, .cx-eyebrow, .me-eyebrow, .proof-eyebrow,
.sm-eyebrow, .pf-eyebrow, .tx16-eyebrow { gap: 0 !important; }

/* ============================================================
   GLOBAL 2 — RADIUS SYSTEM with proper nesting
   The existing site radii (14–20px cards) are kept. We only:
     • harmonise the new v16/v17 cards onto the same scale, and
     • compute INNER radii as (outer − padding) so corners stay
       concentric instead of looking pinched or pointy.
   Concentric rule:  r_inner = r_outer − gap_between_edges
   ============================================================ */
:root {
  --r-card:  16px;   /* outer card */
  --r-panel: 12px;   /* a panel nested inside a card */
  --r-img:   16px;   /* media that fills a card edge-to-edge → match card */
  --r-chip:  8px;    /* small tag/badge inside a card */
  --r-btn:   10px;   /* button (concentric inside ~24px-padded card) */
}

/* harmonise the bold image cards I built onto the card radius */
.tx16-card, .ftx16-card { border-radius: var(--r-card) !important; }
/* their images fill inset:0, so they share the card radius (card clips overflow) */
.svc16 .svc-tile { border-radius: var(--r-card) !important; }
.ws-catalogue .ws-card { border-radius: var(--r-card) !important; }
/* media that sits flush at the TOP of a card: round only where it meets a corner */
.ws-catalogue .ws-card .img { border-radius: var(--r-card) var(--r-card) 0 0 !important; }

/* inner pieces: concentric, smaller than the parent */
.tx16-tag, .ftx16-card .ftx16-dur,
.ws-catalogue .ws-card .img .tag { border-radius: var(--r-chip) !important; }
.svc16 .svc-go, .ftx16-btn, .tx16-go { border-radius: var(--r-btn) !important; }

/* the homepage contact panel + inline form get the card scale too */
.faq-contact .combined-card { border-radius: var(--r-card) !important; }
.cx16 .contact-form-card { border-radius: var(--r-card) !important; }
.cx16 .contact-form-card form.inquiry input,
.cx16 .contact-form-card form.inquiry select,
.cx16 .contact-form-card form.inquiry textarea,
.cx16 .contact-form-card form.inquiry button[type=submit] { border-radius: var(--r-btn) !important; }
.cx16 .advisor-card, .cx16 .contact-info-card { border-radius: var(--r-panel) !important; }

/* ============================================================
   A) SERVICES — bigger tiles, button CTA, no numbers, big headings
   ============================================================ */
.svc16 .svc-grid-v13 { grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.6vw, 22px); }
.svc16 .svc-tile { min-height: clamp(420px, 33vw, 520px); }
.svc16 .svc-tile .svc-num { display: none !important; }
.svc16 .svc-tile-body { padding: 30px 28px 28px; }
.svc16 .svc-tile-body h3 { font-size: clamp(27px, 2.5vw, 36px); font-weight: 800; line-height: 1; }
.svc16 .svc-tile-body p { font-size: 15px; margin-top: 12px; max-width: 34ch; }
/* CTA → real button */
.svc16 .svc-go {
  margin-top: 20px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--v17-brass); color: var(--v17-navy-2);
  font-family: var(--f-display); font-weight: 700; font-size: 14px;
  padding: 13px 20px; opacity: 1;
  transition: background .2s ease, gap .25s ease;
}
.svc16 .svc-go svg { color: var(--v17-navy-2); width: 18px; height: 11px; }
.svc16 .svc-tile:hover .svc-go { background: var(--v17-brass-2); gap: 14px; }

@media (max-width: 980px) { .svc16 .svc-grid-v13 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .svc16 .svc-grid-v13 { grid-template-columns: 1fr; }
  .svc16 .svc-tile { min-height: 380px; }
  .svc16 .svc-go { width: 100%; justify-content: center; }
}

/* ============================================================
   B) FEATURED TOURS — bold full-bleed image cards (fresh classes)
   ============================================================ */
.featured .ftx16-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.4vw, 20px); margin-top: clamp(36px, 4vw, 54px);
}
.ftx16-card {
  position: relative; display: block; isolation: isolate;
  min-height: clamp(440px, 38vw, 560px);
  overflow: hidden; color: #fff; text-decoration: none;
  border: 1px solid rgba(8,18,36,.12);
}
.ftx16-card img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .85s cubic-bezier(.2,.7,.2,1);
}
.ftx16-card:hover img { transform: scale(1.06); }
.ftx16-card .ftx16-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,18,36,.06) 0%, rgba(8,18,36,.34) 46%, rgba(6,16,32,.92) 100%);
}
.ftx16-card .ftx16-dur {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  background: var(--v17-brass); color: var(--v17-navy-2);
  font-family: var(--f-body); font-weight: 700;
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 12px;
}
.ftx16-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  height: 100%; justify-content: flex-end; gap: 14px;
  padding: clamp(22px, 1.8vw, 30px);
}
.ftx16-card h3 {
  margin: 0; color: #fff;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(24px, 2vw, 30px); line-height: 1.02; letter-spacing: -.02em;
  text-wrap: balance;
}
.ftx16-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); width: 100%;
}
.ftx16-meta span {
  font-family: var(--f-body); font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.92);
  display: inline-flex; align-items: center;
}
.ftx16-meta span:not(:last-child)::after {
  content: "·"; margin: 0 9px; color: var(--v17-brass-2); font-weight: 700;
}
.ftx16-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--v17-brass); color: var(--v17-navy-2);
  font-family: var(--f-display); font-weight: 700; font-size: 13.5px;
  padding: 12px 18px; transition: background .2s ease, gap .25s ease;
}
.ftx16-btn svg { width: 18px; height: 11px; }
.ftx16-card:hover .ftx16-btn { background: var(--v17-brass-2); gap: 14px; }

@media (max-width: 980px) { .featured .ftx16-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .featured .ftx16-grid { grid-template-columns: 1fr; }
  .ftx16-card { min-height: 420px; }
  .ftx16-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   C) EVENTS — remove numbers, bigger headings
   ============================================================ */
.cx-mosaic .cx-num { display: none !important; }
.cx-mosaic .cx-tile .cx-label {
  font-size: clamp(23px, 2.5vw, 34px); font-weight: 800; line-height: 1.02;
}
.cx-mosaic .cx-tile .cx-cap { gap: 8px; }

/* ============================================================
   D) GALLERY — larger tiles + "see more" button
   ============================================================ */
.gallery-band .gallery-grid {
  grid-auto-rows: clamp(220px, 21vw, 300px);
  gap: clamp(14px, 1.4vw, 18px);
}
.gallery-band .gallery-foot {
  display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 44px);
}
@media (max-width: 760px) {
  .gallery-band .gallery-grid { grid-auto-rows: 180px; }
}

/* ============================================================
   E) FAQ + CONTACT — bolder, brass-accented, mobile-tuned
   ============================================================ */
.faq-contact .combined-card { position: relative; }
.faq-contact .combined-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--v17-brass) 0%, var(--v17-brass-2) 100%);
  z-index: 3;
}
.faq-contact .body { padding-top: 8px; }
/* a bolder section intro inside the faq side */
.faq-contact .faq-side .section-label {
  font-family: var(--f-body); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--v17-brass-2); font-weight: 700;
}
.faq-contact .faq-side .faq-item summary {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(17px, 1.4vw, 20px); letter-spacing: -.01em;
}
.faq-contact .faq-side .faq-item .marker { color: var(--v17-brass-2); }
.faq-contact .faq-side .faq-item[open] summary { color: #fff; }
/* ---------- INFO SIDE: bold contact redesign ---------- */
.faq-contact .info-side {
  border-left: 1px solid rgba(255,255,255,.12);
  display: flex; flex-direction: column;
}
/* bolder "Reach the crew" intro */
.faq-contact .info-side .section-label {
  font-size: 12px !important; letter-spacing: .22em !important;
  color: var(--v17-brass-2) !important; font-weight: 700 !important;
  margin-bottom: 20px !important;
}

/* contact rows → tappable cards with a brass icon chip */
.faq-contact .info-side .ic-row {
  display: grid; grid-template-columns: 46px 1fr; align-items: center;
  gap: 16px; padding: 14px; margin-bottom: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-panel);
  transition: border-color .2s ease, background .2s ease;
}
.faq-contact .info-side .ic-row:hover {
  border-color: rgba(201,163,90,.55); background: rgba(255,255,255,.06);
}
.faq-contact .info-side .ic-row > svg,
.faq-contact .info-side .ic-row .nico {
  width: 46px !important; height: 46px !important; flex: none;
  padding: 12px; box-sizing: border-box;
  background: rgba(201,163,90,.16); color: var(--v17-brass-2) !important;
  border-radius: calc(var(--r-panel) - 8px); /* concentric: 12 − ~6 chip inset */
}
.faq-contact .info-side .ic-row .lbl {
  font-size: 10px !important; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.55) !important; font-weight: 600;
}
.faq-contact .info-side .ic-row .val {
  font-size: 16px !important; font-weight: 600 !important; color: #fff !important;
}

/* inline form → distinct brass-edged panel */
.faq-contact .info-side .contact-form-inline {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-top: 3px solid var(--v17-brass);
  border-radius: var(--r-panel);
  padding: 24px 22px; margin-top: 22px;
}
.faq-contact .info-side .contact-form-inline h3 {
  font-size: clamp(21px, 1.9vw, 26px) !important; font-weight: 800 !important;
  letter-spacing: -.02em; margin-bottom: 18px !important;
}
.faq-contact .info-side .contact-form-inline form.inquiry input,
.faq-contact .info-side .contact-form-inline form.inquiry select,
.faq-contact .info-side .contact-form-inline form.inquiry textarea {
  min-height: 46px;
}
.faq-contact .info-side .contact-form-inline form.inquiry button[type=submit] {
  background: var(--v17-brass) !important; color: var(--v17-navy-2) !important;
  font-weight: 700; min-height: 52px;
}
.faq-contact .info-side .contact-form-inline form.inquiry button[type=submit]:hover {
  background: var(--v17-brass-2) !important;
}
.faq-contact .info-side .boarding-list { border-radius: var(--r-panel) !important; }

/* ---- FAQ + Contact: tablet ---- */
@media (max-width: 860px) {
  .faq-contact .combined-card .body { grid-template-columns: 1fr !important; }
  .faq-contact .info-side {
    border-left: none; border-top: 1px solid rgba(255,255,255,.12);
  }
  /* two-up contact rows on tablet to use the width */
  .faq-contact .info-side .ic-row { margin-bottom: 0; }
  .faq-contact .info-side .ic-row-wrap,
  .faq-contact .info-side { gap: 10px; }
}
/* ---- FAQ + Contact: mobile ---- */
@media (max-width: 600px) {
  .faq-contact .info-side .ic-row { grid-template-columns: 42px 1fr; gap: 13px; padding: 13px; }
  .faq-contact .info-side .ic-row > svg,
  .faq-contact .info-side .ic-row .nico { width: 42px !important; height: 42px !important; padding: 11px; }
  .faq-contact .info-side .contact-form-inline { padding: 20px 16px; }
  .faq-contact .info-side .contact-form-inline form.inquiry .row { grid-template-columns: 1fr; gap: 12px; }
  .faq-contact .info-side .contact-form-inline form.inquiry input,
  .faq-contact .info-side .contact-form-inline form.inquiry select,
  .faq-contact .info-side .contact-form-inline form.inquiry textarea { font-size: 16px; }
  .faq-contact .info-side .contact-form-inline form.inquiry button[type=submit] { width: 100%; justify-content: center; }
  .faq-contact .info-side .contact-form-inline .submit-row { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* ===== redesign-v18.css ===== */
/* ============================================================
   REDESIGN v18 — CHIP SYSTEM (Vanilla design-guidelines aligned)
   Principles applied:
     • Chips are compact READ-ONLY metadata (1–3 words) — no CTA.
     • Dense: ~5px/11px padding, 6px internal gap, subtle outline.
     • Truncate, never wrap.
     • Semantic colour: neutral (gray), positive (green),
       info (blue), caution (amber).
     • No hover/active on read-only chips.
   Loaded last → wins over earlier !important rules.
   ============================================================ */
:root {
  --chip-radius: 7px;
  --chip-pad-y: 5px;
  --chip-pad-x: 11px;
  --chip-gap: 6px;
  --chip-fz: 12px;
  /* neutral */
  --chip-neutral-bg:   #F2F5F9;
  --chip-neutral-bd:   rgba(16,44,84,.14);
  --chip-neutral-ink:  #33445C;
  /* positive */
  --chip-pos-bg:  #ECF5EE;
  --chip-pos-bd:  rgba(58,122,74,.30);
  --chip-pos-ink: #2F6B40;
  /* info */
  --chip-info-bg:  #ECF1F8;
  --chip-info-bd:  rgba(43,92,158,.28);
  --chip-info-ink: #2B5C9E;
  /* caution */
  --chip-warn-bg:  #FBF1E2;
  --chip-warn-bd:  rgba(168,118,30,.32);
  --chip-warn-ink: #91671A;
  /* brand (over-light) */
  --chip-brand-bg:  #F7EFDD;
  --chip-brand-bd:  rgba(201,163,90,.34);
  --chip-brand-ink: #8A6A1E;
}

/* ============================================================
   1) ROUTE-STOP CHIPS  (.stops .pill) — read-only categorisation
      v14 had stripped these to dot-separated text; restore as
      proper, refined chips.
   ============================================================ */
.tour-listing-card .stops,
.yc-dest-card .stops {
  display: flex !important; flex-wrap: wrap; gap: var(--chip-gap) !important;
  margin-top: 6px;
}
.tour-listing-card .stops .pill,
.tour-listing-card .pill,
.yc-dest-card .stops .pill,
.tour-listing-card .stops .pill:nth-child(4n+1),
.tour-listing-card .stops .pill:nth-child(4n+2),
.tour-listing-card .stops .pill:nth-child(4n+3),
.tour-listing-card .stops .pill:nth-child(4n+4) {
  display: inline-flex !important; align-items: center;
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--chip-neutral-bg) !important;
  border: 1px solid var(--chip-neutral-bd) !important;
  border-radius: var(--chip-radius) !important;
  padding: var(--chip-pad-y) var(--chip-pad-x) !important;
  margin: 0 !important;
  font-family: var(--f-body) !important;
  font-size: var(--chip-fz) !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  line-height: 1.3 !important; color: var(--chip-neutral-ink) !important;
}
/* kill the v14 dot separator */
.tour-listing-card .stops .pill:not(:last-child)::after,
.yc-dest-card .stops .pill:not(:last-child)::after { content: none !important; margin: 0 !important; }

/* ============================================================
   2) OVER-IMAGE METADATA CHIPS — duration / event status
      Solid (no glass) light chip with strong contrast.
   ============================================================ */
.tour-listing-card .duration-tag,
.home-featured-card .duration-tag,
.tour-card .duration-tag,
.cv9-card .badge,
.cat-card .cat-count,
.daycard .daycard-dur,
.evx .evx-chip,
.cb-day .cb-day-tag {
  display: inline-flex !important; align-items: center; gap: var(--chip-gap);
  background: #fff !important;
  color: var(--ink, #102C54) !important;
  border: 1px solid rgba(16,44,84,.08) !important;
  border-radius: var(--chip-radius) !important;
  padding: var(--chip-pad-y) var(--chip-pad-x) !important;
  font-family: var(--f-body) !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  letter-spacing: .02em !important; text-transform: none !important;
  line-height: 1.3 !important;
  box-shadow: 0 2px 10px -4px rgba(8,18,36,.35);
  white-space: nowrap;
}
/* duration tag keeps its brass clock accent */
.tour-listing-card .duration-tag svg,
.home-featured-card .duration-tag svg { color: var(--brass, #C9A35A) !important; }
/* the gold "Not sure?" event chip stays brand-filled & in-flow */
.evx .evx-chip.gold {
  background: var(--brass, #C9A35A) !important;
  color: #102035 !important; border-color: transparent !important;
  box-shadow: none;
}
/* passport flag over inland tour images → caution chip */
.tour-listing-card .passport {
  display: inline-flex !important; align-items: center; gap: 5px;
  background: var(--chip-warn-bg) !important;
  color: var(--chip-warn-ink) !important;
  border: 1px solid var(--chip-warn-bd) !important;
  border-radius: var(--chip-radius) !important;
  padding: var(--chip-pad-y) 10px !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  box-shadow: 0 2px 10px -4px rgba(8,18,36,.3);
}
.tour-listing-card .passport svg { width: 13px; height: 13px; }

/* ============================================================
   3) SEMANTIC STATUS CHIPS  (.incl-col .tag) — filled, coloured
   ============================================================ */
.incl-col .tag {
  display: inline-flex !important; align-items: center; gap: var(--chip-gap);
  border-radius: var(--chip-radius) !important;
  padding: var(--chip-pad-y) var(--chip-pad-x) !important;
  font-family: var(--f-body) !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  letter-spacing: .02em !important; text-transform: none !important;
  line-height: 1.3 !important;
  border: 1px solid transparent !important;
}
.incl-col.included .tag {
  background: var(--chip-pos-bg) !important; color: var(--chip-pos-ink) !important;
  border-color: var(--chip-pos-bd) !important;
}
.incl-col.mandatory .tag {
  background: var(--chip-warn-bg) !important; color: var(--chip-warn-ink) !important;
  border-color: var(--chip-warn-bd) !important;
}
.incl-col.optional .tag {
  background: var(--chip-info-bg) !important; color: var(--chip-info-ink) !important;
  border-color: var(--chip-info-bd) !important;
}

/* ============================================================
   4) LABEL CHIPS  (.durx-tag, .lm-badge) — neutral read-only
   ============================================================ */
.durx-tag {
  display: inline-flex !important; align-items: center;
  background: var(--chip-brand-bg) !important;
  color: var(--chip-brand-ink) !important;
  border: 1px solid var(--chip-brand-bd) !important;
  border-radius: var(--chip-radius) !important;
  padding: var(--chip-pad-y) var(--chip-pad-x) !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  letter-spacing: .02em !important; text-transform: none !important;
}
.durx.featured .durx-tag {
  background: rgba(201,163,90,.18) !important;
  color: var(--brass-2, #E4CB94) !important;
  border-color: rgba(201,163,90,.4) !important;
}
.legal-meta .lm-badge {
  display: inline-flex !important; align-items: center;
  background: var(--chip-neutral-bg) !important;
  color: var(--chip-neutral-ink) !important;
  border: 1px solid var(--chip-neutral-bd) !important;
  border-radius: var(--chip-radius) !important;
  padding: 4px 10px !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: .02em !important; text-transform: none !important;
}

/* ============================================================
   5) Responsive — keep chips dense & scannable on small screens
   ============================================================ */
@media (max-width: 600px) {
  :root { --chip-pad-x: 10px; --chip-fz: 11.5px; }
  .tour-listing-card .stops { gap: 6px !important; }
  .tour-listing-card .stops .pill { max-width: 14ch; }
}

/* ============================================================
   6) REMAINING LABELS — unify everything onto the chip system
   ============================================================ */
/* 6a. over-image labels (charter / fleet / day-trip badges) */
.cboat-label,
.kindx-count,
.daytrips .tour-card .badge,
.tour-card .badge {
  display: inline-flex !important; align-items: center; gap: var(--chip-gap);
  background: #fff !important;
  color: var(--ink, #102C54) !important;
  border: 1px solid rgba(16,44,84,.08) !important;
  border-radius: var(--chip-radius) !important;
  padding: var(--chip-pad-y) var(--chip-pad-x) !important;
  font-family: var(--f-body) !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  letter-spacing: .02em !important; text-transform: none !important;
  line-height: 1.3 !important;
  box-shadow: 0 2px 10px -4px rgba(8,18,36,.35);
  white-space: nowrap;
}

/* 6b. "Most booked" ribbon on the featured charter card → brand chip */
.durx-pop {
  display: inline-flex !important; align-items: center;
  background: var(--brass, #C9A35A) !important; color: #102035 !important;
  border-radius: var(--chip-radius) !important;
  padding: 5px 12px !important;
  font-family: var(--f-body) !important;
  font-size: 11px !important; font-weight: 800 !important;
  letter-spacing: .02em !important; text-transform: none !important;
  box-shadow: 0 6px 16px -8px rgba(10,28,56,.55);
}

/* 6c. card tag groups (.tg) → neutral read-only chips */
.home-featured-card .tags .tg,
.home-featured-card .tg,
.svc-card-v9 .svc-tags .tg {
  display: inline-flex !important; align-items: center;
  background: var(--chip-neutral-bg) !important;
  color: var(--chip-neutral-ink) !important;
  border: 1px solid var(--chip-neutral-bd) !important;
  border-radius: var(--chip-radius) !important;
  padding: var(--chip-pad-y) var(--chip-pad-x) !important;
  font-family: var(--f-body) !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  line-height: 1.3 !important;
}

/* 6d. "Request menu / Request price" — visually a brand chip.
   (The whole .at-card is the link, so the chip stays read-only.) */
.addons-teaser .at-card .price-pill,
.at-card .price-pill,
.price-pill {
  display: inline-flex !important; align-items: center; gap: 5px;
  align-self: flex-start;
  background: var(--chip-brand-bg) !important;
  color: var(--chip-brand-ink) !important;
  border: 1px solid var(--chip-brand-bd) !important;
  border-radius: var(--chip-radius) !important;
  padding: var(--chip-pad-y) var(--chip-pad-x) !important;
  font-family: var(--f-body) !important;
  font-size: 11.5px !important; font-weight: 700 !important;
  letter-spacing: .02em !important; text-transform: none !important;
  line-height: 1.3 !important;
  transition: background .18s ease, border-color .18s ease;
}
.at-card:hover .price-pill {
  background: #F0E3C6 !important; border-color: rgba(201,163,90,.5) !important;
}

/* ===== redesign-v20.css ===== */
/* ============================================================
   REDESIGN v20 — Responsive scale + spacing rhythm refinement
   Site-wide, conservative (spacing/scale only — no colour/layout
   rewrites). Goals:
     • Calmer vertical rhythm on tablet/mobile (sections were
       bottoming out at 80px even on phones → cavernous gaps).
     • Comfortable mobile gutters + body line-height ("breathe").
     • Headings scale down enough to avoid overflow, stay bold.
     • Tighten oversized internal gaps on section heads.
   Loaded last on every page.
   ============================================================ */

/* ---------- TABLET (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  section { padding: clamp(56px, 8vw, 96px) 0; }
  .final, .faq-contact { padding: clamp(56px, 8vw, 96px) 0; }
}

/* ---------- LARGE PHONE / SMALL TABLET (≤ 768px) ---------- */
@media (max-width: 768px) {
  :root { --gutter: 22px; }
  body { line-height: 1.6; }

  /* calmer, consistent section rhythm — no cavernous voids */
  section { padding: clamp(46px, 11vw, 66px) 0; }
  .final, .faq-contact { padding: clamp(46px, 11vw, 66px) 0; }

  /* section heads: tighter stack, lead sits close to the title */
  .section-head,
  .cv9-head,
  .me-head,
  .tx16-head,
  .cx-head,
  .intro { gap: 12px !important; margin-bottom: 28px !important; }
  .section-head .lead,
  .cv9-head .lead,
  .intro p { margin-top: 8px !important; }

  /* heading scale — bold but contained */
  .section-head h2,
  .cv9-head h2,
  .me-head h2,
  .tx16-head h2,
  .intro h2,
  .cx-title,
  .sm-head h2,
  .lead-copy h2 { font-size: clamp(27px, 7.6vw, 36px) !important; line-height: 1.1 !important; }
  .hero h1 { font-size: clamp(31px, 9vw, 44px) !important; line-height: 1.07 !important; }
  /* body copy comfortable, not tiny */
  .lead, .hero-sub, .section-head .lead, .me-head p, .tx16-lead { font-size: 15.5px !important; line-height: 1.55 !important; }
}

/* ---------- PHONE (≤ 560px) ---------- */
@media (max-width: 560px) {
  :root { --gutter: 18px; }

  /* cards breathe: a touch more internal padding where it was tight,
     and kill the leftover voids from desktop-sized paddings */
  .value-card,
  .vp,
  .me-card,
  .ws-card .body,
  .ws-svc,
  .cboat-bd,
  .tourx .bd,
  .ftx16-body,
  .durx19 .durx,
  .contact-info-card,
  .faq-cat { padding: 22px 20px !important; }

  /* grids: single column with breathing gaps */
  .values-grid,
  .vp-grid,
  .team-grid,
  .me-grid,
  .stat-bar,
  .pf-logos { gap: 14px !important; }

  /* drop oversized <br> stacking from cramping headings */
  .section-head h2 br,
  .cv9-head h2 br,
  .me-head h2 br,
  .tx16-head h2 br,
  .cx-title br { display: none; }

  /* hero: comfortable padding, content not glued to edges */
  .hero-inner { padding-top: 18px; padding-bottom: 28px; }
  .hero-sub { max-width: 36ch; }

  /* eyebrows a touch smaller so they don't shout on small screens */
  .h-eyebrow, .cx-eyebrow, .me-eyebrow, .tx16-eyebrow, .sm-eyebrow, .pf-eyebrow { font-size: 11px !important; }
}

/* ===== redesign-v21.css ===== */
/* ============================================================
   REDESIGN v21 — responsive polish + scroll FX
   Loads last, so it wins where it overlaps earlier layers.
     1. Social Moments  → horizontal slider on mobile
     2. Taller mobile cards (services + featured tours)
     3. Taller "Getting around" transfer cards (all sizes)
     4. Nicer mobile occasions mosaic (homepage)
     5. Add-ons sized like "What's included"
     6. Taller blog cards
     7. Rent-a-boat: count line under the headline
     8. Scroll-reveal + parallax primitives
   ============================================================ */

/* ---------------- 1. SOCIAL MOMENTS — MOBILE SLIDER ---------------- */
@media (max-width: 640px) {
  .social-moments .sm-grid {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 14px;
  }
  .social-moments .sm-grid::-webkit-scrollbar { display: none; }
  .social-moments .sm-grid > .sm-card {
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: start;
  }
  .social-moments .sm-foot-cta { margin-top: 26px; }
}

/* ---------------- 2. TALLER MOBILE CARDS ---------------- */
@media (max-width: 560px) {
  .svc16 .svc-tile { min-height: 440px; }
}
@media (max-width: 520px) {
  .featured .ftx16-grid > .ftx16-card,
  .ftx16-card { min-height: 510px; }
}

/* ---------------- 3. "GETTING AROUND" CARDS — TALLER ---------------- */
.tx16-card { min-height: clamp(520px, 47vw, 660px); }
@media (max-width: 860px) { .tx16-card { min-height: 540px; } }
@media (max-width: 480px) { .tx16-card { min-height: 480px; } }

/* ---------------- 4. OCCASIONS MOSAIC — NICER ON MOBILE ---------------- */
@media (max-width: 560px) {
  .cx-mosaic {
    grid-template-columns: 1fr 1fr !important;
    grid-auto-rows: 168px !important;
    gap: 12px !important;
  }
  .cx-feature {
    grid-column: 1 / 3 !important;
    grid-row: span 2 !important;
    aspect-ratio: auto !important;
  }
  /* touch devices have no hover — keep the caption + kicker readable */
  .cx-mosaic .cx-kicker { opacity: 1 !important; transform: none !important; }
  .cx-tile::after {
    background: linear-gradient(177deg, rgba(8,18,36,0) 24%, rgba(8,18,36,.44) 58%, rgba(7,16,33,.93) 100%) !important;
  }
  .cx-cap { left: 15px; right: 15px; bottom: 14px; gap: 6px; }
  .cx-mosaic .cx-tile .cx-label { font-size: 21px !important; }
  .cx-feature .cx-label { font-size: 28px !important; }
  .cx-more { min-height: 168px; gap: 6px; }
  .cx-more-num { font-size: 44px; }
}
@media (max-width: 380px) {
  .cx-mosaic { grid-auto-rows: 152px !important; }
}

/* ---------------- 5. ADD-ONS SIZED LIKE "WHAT'S INCLUDED" ---------------- */
.addons-v13 .addons-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px;
}
.addons-v13 .addon {
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  min-height: 76px;
  border-style: solid !important;
  border-color: var(--hairline, rgba(27,31,38,.1)) !important;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.35;
}
.addons-v13 .addon > svg {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--warm-tint, #FBF3E8);
  color: var(--warm, #C19A4D);
}
@media (max-width: 540px) {
  .addons-v13 .addons-grid { grid-template-columns: 1fr !important; }
}

/* ---------------- 6. TALLER BLOG CARDS ---------------- */
.blog-feed-grid .blog-card .img,
.blog-grid .blog-card .img { aspect-ratio: 4 / 5 !important; }

/* ---------------- 7. RENT-A-BOAT — count under the headline ---------------- */
.boats-cat-head .left .count {
  display: block;
  margin-top: 10px;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--slate-2, #475261);
}

/* ---------------- HERO RATING — big 4.9 above the CTA buttons ---------------- */
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  margin: 26px 0 2px;
}
.hero .hero-rating { margin-top: 22px; }
.hero-rating .hr-num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(42px, 4.8vw, 58px);
  line-height: .82;
  letter-spacing: -.03em;
  color: #fff;
}
.hero-rating .hr-col { display: flex; flex-direction: column; gap: 6px; }
.hero-rating .hr-stars { display: inline-flex; gap: 3px; color: var(--v15-brass-2, #E4CB94); }
.hero-rating .hr-stars svg { width: 19px; height: 19px; }
.hero-rating .hr-cap {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  color: rgba(255,255,255,.85);
}
/* ink variant on the light tour/detail heroes */
.tour-hero .hero-rating .hr-num { color: var(--ink, #102C54); }
.tour-hero .hero-rating .hr-stars { color: var(--warm, #C19A4D); }
.tour-hero .hero-rating .hr-cap { color: var(--slate-2, #475261); }
@media (max-width: 760px) {
  .hero-rating { gap: 13px; margin: 20px 0 2px; }
  .hero-rating .hr-num { font-size: 44px; }
  .hero-rating .hr-stars svg { width: 17px; height: 17px; }
}

/* ============================================================
   8. SCROLL-REVEAL + PARALLAX PRIMITIVES
   ============================================================ */
.has-fx .fx-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.has-fx .fx-reveal.fx-in { opacity: 1; transform: none; }

/* parallax: oversize the layers so the translate never exposes an edge */
.has-fx .subhero .bg {
  top: -9%;
  bottom: -9%;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}
.has-fx .hero .bg img,
.has-fx .me-bg img {
  transform: translate3d(0, var(--py, 0px), 0) scale(1.12);
  will-change: transform;
}
.has-fx [data-parallax] {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

@media print {
  .fx-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   CERTIFICATES & AWARDS — official Tripadvisor + Booking Manager
   ============================================================ */

/* ---- Footer trust strip: small certificate lockup ---- */
.footer-strip .fs-certs {
  display: flex; align-items: center; gap: 18px;
}
.footer-strip .fs-certs .fs-cert { height: 46px; width: auto; display: block; }
.footer-strip .fs-certs .fs-cert-seal { height: 56px; }
@media (max-width: 720px) {
  .footer-strip .fs-certs { gap: 14px; width: 100%; justify-content: center; order: 3; }
  .footer-strip .fs-certs .fs-cert { height: 40px; }
  .footer-strip .fs-certs .fs-cert-seal { height: 48px; }
}

/* ---- Awards band (About + Reviews) ---- */
.awards-band { background: var(--navy-2, #0d2b3a); color: #fff; }
.awards-band .wrap { padding: 64px 0; }
.awards-band .aw-head { text-align: center; max-width: 60ch; margin: 0 auto 40px; }
.awards-band .aw-head .h-eyebrow { color: var(--brass, #c79a5b); }
.awards-band .aw-head h2 { margin-top: 14px; color: #fff; }
.awards-band .aw-head p { margin-top: 14px; color: rgba(255,255,255,.7); }
.awards-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
  max-width: 760px; margin: 0 auto;
}
.aw-card {
  flex: 0 1 340px; background: #fff; border-radius: 16px; padding: 34px 26px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
}
.aw-card .aw-img { height: 124px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.aw-card .aw-img img { max-height: 124px; max-width: 100%; width: auto; display: block; }
.aw-card h3 { font-family: var(--f-display, "Archivo", sans-serif); font-size: 19px; color: #14323f; margin: 0 0 8px; letter-spacing: -.01em; }
.aw-card p { font-size: 14px; line-height: 1.5; color: #5a6b72; margin: 0; }
.aw-card .aw-year { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass, #c79a5b); font-weight: 700; margin-bottom: 6px; white-space: nowrap; }
@media (max-width: 860px) {
  .awards-grid { grid-template-columns: 1fr; max-width: 460px; }
  .awards-band .wrap { padding: 48px 0; }
}

/* ---- Compact awards row beside the About timeline ---- */
.aw-inline {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  margin-top: 36px; padding-top: 30px; border-top: 1px solid rgba(0,0,0,.1);
}
.aw-inline .aw-inline-lbl { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass, #c79a5b); font-weight: 700; }
.aw-inline img { height: 62px; width: auto; display: block; }
.aw-inline img.aw-seal { height: 72px; }
@media (max-width: 640px) { .aw-inline { gap: 22px; justify-content: center; } .aw-inline img { height: 52px; } .aw-inline img.aw-seal { height: 60px; } }

/* ===== redesign-v22.css ===== */
/* ============================================================
   REDESIGN v22 — Bolder, more legible type (site-wide)
   + 320 / 375px mobile optimisation
   Goals from feedback:
     1. Headings, subheadings & header texts read bolder/easier.
     2. Optimise tiny phones (320 & 375px): pull content closer
        to the screen edges (less wasted side margin) while
        giving the layout MORE vertical breathing room so it
        stops feeling cluttered.
   Loaded LAST on every page, so it wins the cascade.
   ============================================================ */

/* ============================================================
   1. BOLDER TYPE — all viewports
   ============================================================ */
h1 { font-weight: 700 !important; }
h2 { font-weight: 700 !important; }
h3 { font-weight: 700 !important; }
h4 { font-weight: 800 !important; }

/* Eyebrows / kickers a touch stronger */
.h-eyebrow,
.cx-eyebrow, .me-eyebrow, .tx16-eyebrow, .sm-eyebrow, .pf-eyebrow,
.svc16 .svc-eyebrow { font-weight: 700 !important; }

/* Subheadings & lead/intro copy — heavier so they read at a glance */
.lead,
.section-head .lead,
.intro p,
.me-head p,
.tx16-lead { font-weight: 500 !important; }

.subhero .sub,
.tour-hero .sub,
.boat-gallery-top .sub,
.hero .hero-sub,
.hero-sub { font-weight: 600 !important; }

/* Header texts — nav, CTA, language switch, top ribbon */
.primary-nav a { font-weight: 600 !important; }
.header-cta { font-weight: 600 !important; }
.lang-switch a { font-weight: 600 !important; }
.top-ribbon { font-weight: 600 !important; }
.top-ribbon .src,
.top-ribbon .it,
.top-ribbon strong { font-weight: 600 !important; }

/* Dropdown menu labels + mobile menu links */
.drop strong,
.mm-flat, .mm-toggle, .mm-sub a, .mm-cta, .mm-langs a { font-weight: 600 !important; }

/* Common card titles already use h3/h4, but a few use custom classes */
.tl-row h4,
.value-card h3,
.team-card h4,
.faq-cat h3,
.svc-tile h3 { font-weight: 700 !important; }

/* ============================================================
   2. SMALL PHONES — tighter side gutters (content to the edges)
   Progressive: the narrower the screen, the less side margin
   we waste, so the content column gets the width back.
   ============================================================ */
@media (max-width: 480px) {
  :root { --gutter: 16px !important; }
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: 100% !important;
  }
}
@media (max-width: 400px) {
  :root { --gutter: 14px !important; }
  .wrap {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}
@media (max-width: 350px) {
  :root { --gutter: 12px !important; }
  .wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Guard against accidental horizontal scroll at 320px */
@media (max-width: 480px) {
  html, body { max-width: 100%; overflow-x: clip; }
}

/* ============================================================
   3. MORE BREATHING ROOM — vertical rhythm on phones so the
   tighter gutters don't read as "cluttered".
   ============================================================ */
@media (max-width: 560px) {
  /* a little more air between the section title and its body */
  .section-head,
  .cv9-head, .me-head, .tx16-head, .cx-head, .intro {
    margin-bottom: 30px !important;
  }

  /* grids: roomier gaps between stacked cards */
  .values-grid,
  .vp-grid,
  .team-grid,
  .me-grid,
  .tours-grid,
  .tour-grid,
  .events-grid,
  .blog-grid,
  .svc-grid-v9,
  .svc16 .svc-grid-v13,
  .awards-grid,
  .duration-grid { gap: 18px !important; }

  /* cards: comfortable internal padding (not glued to their edge) */
  .value-card,
  .team-card .body,
  .faq-cat,
  .aw-card,
  .at-card,
  .tl-row { padding-left: 0; }

  .aw-card { padding: 24px 22px !important; }

  /* timeline: stacked rows need a touch more vertical room */
  .tl-row { padding: 22px 0 !important; gap: 8px !important; }
  .tl-row .y { font-size: 22px !important; }

  /* stat-bar on a hero: roomier cells */
  .subhero .stat-bar { gap: 0 !important; margin-top: 26px !important; }

  /* hero CTAs: clearer spacing, full-width tap targets */
  .subhero .hero-ctas,
  .hero .hero-ctas { gap: 12px !important; }
}

/* ============================================================
   4. 375px & 320px FINE-TUNING
   ============================================================ */
@media (max-width: 400px) {
  /* headings: contained but still bold */
  .subhero h1,
  .tour-hero h1,
  .hero h1 { font-size: clamp(30px, 8.6vw, 38px) !important; line-height: 1.08 !important; }
  .section-head h2,
  .cv9-head h2, .me-head h2, .tx16-head h2, .intro h2 {
    font-size: clamp(25px, 7.4vw, 32px) !important;
    line-height: 1.12 !important;
  }
  /* drop manual <br> in headings so lines wrap naturally, no awkward gaps */
  h1 br, h2 br { display: none !important; }

  /* contact / inquiry form rows stack with breathing room */
  .inquiry .row,
  .contact-grid,
  .cx16 .contact-info-stack { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* buttons comfortable on the narrowest screens */
  .btn { padding: 16px 20px !important; }
}

@media (max-width: 350px) {
  /* keep stat-bar legible at 320 — single column avoids cramping */
  .subhero .stat-bar { grid-template-columns: 1fr !important; }
  .subhero .stat-bar .stat { border-right: none !important; }
}

/* ===== redesign-v27.css ===== */
/* ============================================================
   redesign-v27.css — SITE-WIDE breathing rhythm
   Shared by the homepage and every inner page. Spacing only —
   no colour, type-family or layout rewrites. Goal: relieve the
   "cramped / overcrowded" feel, with the most relief on phones.
   Loaded last on every page.
   ============================================================ */

/* ---------- TABLET (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  section { padding: clamp(68px, 10vw, 112px) 0; }
  .final, .faq-contact { padding: clamp(68px, 10vw, 112px) 0; }
}

/* ---------- LARGE PHONE / SMALL TABLET (≤ 768px) ---------- */
@media (max-width: 768px) {
  body { line-height: 1.64; }

  /* more air between major sections (was bottoming out ~66px) */
  section { padding: clamp(60px, 15vw, 96px) 0; }
  .final, .faq-contact { padding: clamp(60px, 15vw, 96px) 0; }

  /* section heads: clearer separation from the content below them */
  .section-head,
  .cv9-head,
  .me-head,
  .tx16-head,
  .cx-head,
  .sm-head,
  .lead-copy,
  .intro { margin-bottom: 38px !important; }

  /* paragraphs / leads breathe a little more */
  .section-head .lead,
  .intro p,
  .me-head p,
  .tx16-lead { margin-top: 14px !important; }
}

/* ---------- PHONE (≤ 560px) ---------- */
@media (max-width: 560px) {
  /* card grids: roomier gutters between stacked cards */
  .values-grid,
  .vp-grid,
  .team-grid,
  .me-grid,
  .boat-grid,
  .tour-grid,
  .blog-grid,
  .faq-cats { gap: 18px !important; }

  /* a touch more internal padding so card content isn't pinched */
  .value-card,
  .vp,
  .me-card,
  .ws-card .body,
  .ws-svc,
  .cboat-bd,
  .tourx .bd,
  .ftx16-body,
  .durx19 .durx,
  .contact-info-card,
  .faq-cat { padding: 24px 22px !important; }

  /* lists and stacked info rows get a hair more line spacing */
  .boarding-list li,
  .incl-list li,
  .feature-list li { margin-bottom: 4px; }
}

/* ---------- VERY SMALL (≤ 380px) ---------- */
@media (max-width: 380px) {
  section { padding: 52px 0; }
}

/* ===== redesign-final.css ===== */
/* ============================================================
   redesign-final.css  — loaded LAST on every page
   1. Typeface   → Inter everywhere
   2. Light-blue accent text → deep navy
   3. Unified corner-radius scale
   4. Stronger parallax / reveal primitives
   ============================================================ */

/* ---------- 1. Typeface: Inter Tight ---------- */
:root {
  --f-display: "Inter Tight", system-ui, -apple-system, sans-serif;
  --f-body:    "Inter Tight", system-ui, -apple-system, sans-serif;
}
html, body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, em, strong, small, label, input, select, textarea, button,
.btn, .brand-text, blockquote, summary, figcaption {
  font-family: "Inter Tight", system-ui, -apple-system, sans-serif;
}
/* Inter Tight is condensed — keep display tracking tight */
h1, h2, h3 { letter-spacing: -0.028em; }

/* ---------- 2. Light-blue text → deep navy ----------
   pages-v6.css had remapped the palette to a saturated blue with !important
   (--mid #20477d, --slate-2 #2b5a99, --slate-3 #4a6f9e). Those bluish text
   tones are what reads as "light blue" — pull them down to a deep, dark navy. */
:root {
  --mid:     #15314f !important;  /* eyebrows, links, em accents, icons */
  --slate-2: #1d3a5b !important;  /* primary/secondary body + dark panels */
  --slate-3: #3a5675 !important;  /* muted/caption text — darker, still legible */
  --ocean:   #2a5588 !important;
}
/* hard-coded light blues used as TEXT */
[style*="color:#5B829E"], [style*="color: #5B829E"],
[style*="color:#20477d"], [style*="color: #20477d"] { color: var(--mid) !important; }

/* ---------- 3. Unified radius scale ---------- */
:root {
  --r:    10px;   /* buttons, inputs, small chips, badges */
  --r-lg: 16px;   /* cards, media, panels */
}
.btn, .btn-primary, .btn-wa, .btn-light, .btn-outline, .btn-outline-light,
.btn-ghost, .ct3-submit, .howbook-form button, .i1-ctf button,
input, select, textarea,
.duration-tag, .feat-ribbon, .ttx-badge, .tfeat-badge, .badge-type {
  border-radius: 8px;
}
/* cards / media / large panels → 16px */
[class*="-card"], [class*="card-"], .card,
.route-card, .boat-card, .cf-card, .team-card, .tm-example, .blog-card,
.tour-listing-card, .duration-card, .related-card, .incl-v2-item,
.featured-post, .contact-block-v2, .combined-card, .ttx, .i1-rvc,
.i1-ct-form-card, .price-card, .info-card, figure.cx-tile {
  border-radius: 16px;
}
/* keep genuinely circular / pill elements as-is */
.whatsapp-fab, [class*="circ"], .pay.circ, .socials a,
.dtw-ic, .i1-wcard .ic, .ct3-q .mk { border-radius: 999px; }

/* ---------- 4. Stronger parallax + reveal ---------- */
/* oversize the parallax layers a little more so the larger travel never shows an edge */
.has-fx .subhero .bg { top: -13%; bottom: -13%; }
.has-fx .hero .bg img,
.has-fx .me-bg img { transform: translate3d(0, var(--py, 0px), 0) scale(1.2); }

/* a slightly longer, smoother reveal */
.has-fx .fx-reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.22,.7,.2,1), transform .8s cubic-bezier(.22,.7,.2,1);
}
.has-fx .fx-reveal.fx-in { opacity: 1; transform: none; }
@media print { .fx-reveal { opacity: 1 !important; transform: none !important; } }

/* ---------- 5. Brand spec/amenity icons (uploaded SVG set) ---------- */
.boat-card.bc-v2 .specs .spec .bc-spec-ico {
  width: 22px; height: 22px; flex: none; object-fit: contain;
  order: 0; margin-bottom: 4px;
}

/* ---------- 6. Reduce heading sizes globally ---------- */
/* Display / hero titles (were up to ~78px) */
.hero h1, .subhero h1, .tour-hero h1, .boat-hero h1,
.tx16-head h2, .tmcombo-head h2, .cv9-head h2 {
  font-size: clamp(30px, 4vw, 54px) !important;
}
/* Section heads (were up to ~56–72px) */
.section-head h2,
.lead-band .lead-copy h2, .charter-band .intro h2,
.trust-bar-v2 .trust-hd h2, .social-feed .sf-head h2,
.gallery-strip .gs-head h2, .trust-heading,
.ttx-plate h3, .charter-band h2 {
  font-size: clamp(25px, 2.7vw, 40px) !important;
}
/* Big mid-level display numbers/titles */
.duration-card h3 { font-size: clamp(30px, 3vw, 42px) !important; }
.cv3-events-body h3 { font-size: clamp(24px, 2.4vw, 34px) !important; }
.tours-grid .tour-listing-card.is-featured .body h3 { font-size: clamp(26px, 2.7vw, 38px) !important; }
@media (max-width: 760px) {
  .hero h1, .subhero h1, .tour-hero h1, .boat-hero h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  .section-head h2 { font-size: clamp(23px, 6vw, 32px) !important; }
}

/* ---------- 7. FAQ / hero stat cards — larger, more legible ---------- */
.subhero .stat-bar .stat .v { font-size: clamp(21px, 1.9vw, 29px) !important; line-height: 1.05; }
.subhero .stat-bar .stat .l { font-size: 12.5px !important; letter-spacing: .14em !important; }
@media (min-width: 1101px) {
  .subhero .stat-bar .stat .v { font-size: clamp(24px, 2vw, 30px) !important; }
}

/* ---------- 8. Event detail hero — one clean full-bleed design ---------- */
.event-hero { padding-top: 0 !important; background: var(--slate, #1d3a5b) !important; }
.event-hero .eh-wrap { position: relative !important; display: block !important; min-height: clamp(440px, 58vh, 600px) !important; }
.event-hero .eh-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-height: 0 !important; }
.event-hero .eh-img::after { content: "" !important; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,18,36,.34) 0%, rgba(8,18,36,.5) 48%, rgba(8,18,36,.85) 100%) !important; }
.event-hero .eh-body { position: relative !important; z-index: 2 !important; background: transparent !important; max-width: 1180px; margin: 0 auto; width: 100%; padding: 130px 40px 54px !important; justify-content: flex-end !important; }
.event-hero .key-facts { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 16px !important; padding: 18px 10px !important; max-width: 660px; }
@media (max-width: 1000px) {
  .event-hero .eh-body { padding: 116px 22px 38px !important; }
  .event-hero .key-facts { grid-template-columns: 1fr 1fr !important; }
}

/* ---------- 9. Event overview — declutter the section below the hero ---------- */
.ev-overview .side .pic { border-radius: 16px !important; }
.ev-overview .side .quote-card { border-radius: 16px !important; }
.ev-whofor-inline .whofor-wrap .block ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.ev-whofor-inline .whofor-wrap .block ul li {
  position: relative; background: var(--off, #F7F4EF); border: 1px solid var(--line, rgba(71,82,97,.12));
  border-radius: 12px !important; padding: 16px 18px 16px 44px !important; margin: 0 !important;
  font-size: 14.5px; line-height: 1.45; color: var(--slate-2);
}
.ev-whofor-inline .whofor-wrap .block ul li::before {
  content: ""; position: absolute; left: 16px; top: 17px; width: 18px; height: 18px;
  background: var(--mid); border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/></svg>") center/72% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/></svg>") center/72% no-repeat;
}
@media (max-width: 560px) { .ev-whofor-inline .whofor-wrap .block ul { grid-template-columns: 1fr !important; } }

/* ============================================================
   10. TYPE UNIFICATION — one consistent scale across every page
   ============================================================ */
/* Eyebrows / kickers → 12px, wide tracking, navy */
.h-eyebrow, .eyebrow, [class*="-eyebrow"], .addons-label, .addons-v13 .addons-label,
.tx16-eyebrow, .tmcombo-eyebrow, .ac-label, .more-kicker, .tcardx-idx {
  font-size: 12px !important; letter-spacing: .15em !important; text-transform: uppercase;
  font-weight: 600 !important;
}
/* Hero/section eyebrows keep their own colour over photos; default eyebrows → navy */
.section-head .h-eyebrow, .whatis .h-eyebrow { color: var(--mid) !important; }

/* Lead / sub-intro paragraphs → consistent size & rhythm */
.lead, .sub, .tx16-lead, .section-head .lead, .tmcombo-head > p, .whatis-copy > p:first-of-type {
  font-size: clamp(15.5px, 1.15vw, 17.5px) !important; line-height: 1.6 !important;
}

/* Editorial body copy in content sections → 16px / 1.65 */
.ev-overview .body p, .boat-split .col p, .intro-cols > p, .services .boat-split p,
.tm-copy p, .pf-copy p, .about-body p {
  font-size: 16px !important; line-height: 1.65 !important;
}

/* Generic card titles → one h3 size (display/number cards already capped above) */
.related-card h3, .info-card h3, .price-card h3, .blog-card h3,
.cf-card h3, .at-card h3, .xfer-card h3, .ws-card h3, .svc16 .svc-tile-body h3,
.reltrip-bd h3, .tcardx-pop-t, .tour-listing-card .body h3 {
  font-size: clamp(19px, 1.6vw, 23px) !important; letter-spacing: -.02em !important; line-height: 1.12 !important;
}

/* Sub-headings (h4-level) → consistent */
.ev-subhead, .incl-feat strong, .tmcombo-flow h4, .rb2-flow h4, .hb-steps h4 {
  font-size: clamp(15.5px, 1.2vw, 17px) !important; letter-spacing: -.01em;
}

/* Small print / captions → 13px */
.micro, .rb2-micro, .ct3-fineprint, .footer-legal, figcaption, .desc small {
  font-size: 13px !important;
}

/* ===== redesign-v35.css ===== */
/* ============================================================
   redesign-v35 — Event pages + tour-listing refresh
   Loads LAST (after redesign-final.css).

   Covers:
   1. Event detail hero — cleaner, more premium
   2. ev-overview "About this occasion" — kill the dead whitespace
   3. ev-whofor "Is this day for your group" — real cards
   4. tm-included "Included / Not included" — icon badges
   5. ev-related "Not quite right" — readable text over images
   6. Featured tour card — prominent "Most booked" badge
   7. onepriceband "One price, whole boat" — incl / only-if-you-ask
   ============================================================ */

:root {
  --v35-green: #2E7D5B;
  --v35-brass: #C19A4D;
  --v35-slate: #2C3744;
  --v35-line:  rgba(71, 82, 97, .16);
}

/* ============================================================
   1. EVENT DETAIL HERO
   ============================================================ */
.event-hero .eh-wrap {
  min-height: clamp(500px, 64vh, 660px) !important;
}
.event-hero .eh-img::after {
  background: linear-gradient(94deg, rgba(8,18,34,.86) 0%, rgba(8,18,34,.6) 42%, rgba(8,18,34,.24) 72%, rgba(8,18,34,.42) 100%) !important;
}
.event-hero .eh-body {
  justify-content: flex-end !important;
  padding: 120px 40px 56px !important;
  gap: 0;
}
.event-hero .label {
  background: var(--v35-brass) !important; color: #102C54 !important;
  border-radius: 999px !important;
  font-size: 11.5px !important; letter-spacing: .2em !important;
  padding: 9px 16px !important; font-weight: 800 !important;
}
.event-hero h1 {
  font-family: var(--f-display) !important;
  font-weight: 800 !important;
  font-size: clamp(40px, 5.4vw, 72px) !important;
  line-height: .96 !important; letter-spacing: -.04em !important;
  margin-top: 20px !important; text-wrap: balance;
}
.event-hero h1 em { font-weight: 300 !important; }
.event-hero .tagline {
  margin-top: 20px !important;
  font-size: clamp(17px, 1.5vw, 20px) !important; line-height: 1.5 !important;
  color: rgba(255,255,255,.9) !important; max-width: 54ch !important;
}

/* key-facts: drop the heavy glass box for a clean divided strip */
.event-hero .key-facts {
  background: transparent !important;
  border: 0 !important; border-top: 2px solid rgba(193,154,77,.55) !important;
  border-radius: 0 !important;
  margin-top: 34px !important; padding: 22px 0 0 !important;
  max-width: 820px !important;
  gap: 0 !important;
}
.event-hero .key-facts .kf {
  padding: 0 clamp(14px, 1.8vw, 28px) !important;
  border-right: 1px solid rgba(255,255,255,.22) !important;
  gap: 7px !important;
}
.event-hero .key-facts .kf:first-child { padding-left: 0 !important; }
.event-hero .key-facts .kf:last-child { border-right: 0 !important; }
.event-hero .key-facts .kf small {
  color: var(--v35-brass) !important;
  font-size: 10.5px !important; letter-spacing: .18em !important; font-weight: 800 !important;
}
.event-hero .key-facts .kf strong {
  font-family: var(--f-display) !important; font-weight: 800 !important;
  font-size: clamp(18px, 1.7vw, 23px) !important; letter-spacing: -.02em !important;
  color: #fff !important; line-height: 1.05 !important;
}
.event-hero .eh-ctas { margin-top: 34px !important; }

@media (max-width: 1000px) {
  .event-hero .eh-body { padding: 108px 22px 38px !important; }
  .event-hero .key-facts { grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
  .event-hero .key-facts .kf { padding: 14px clamp(12px,3vw,20px) !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; }
  .event-hero .key-facts .kf:nth-child(2) { border-right: 0 !important; }
  .event-hero .key-facts .kf:first-child { padding-left: clamp(12px,3vw,20px) !important; }
}

/* ============================================================
   2. EV-OVERVIEW — "About this occasion"
   Kill the dead whitespace, balance the two columns.
   ============================================================ */
.ev-overview { padding: clamp(64px, 7vw, 104px) 0 !important; }

/* section head: stacked, left, tight — not a wide split with a gap */
.ev-overview .section-head {
  display: block !important;
  max-width: 760px !important;
  margin-bottom: clamp(34px, 4vw, 52px) !important;
}
.ev-overview .section-head .lead {
  margin-top: 18px !important;
  max-width: 60ch !important;
  font-size: clamp(17px, 1.4vw, 20px) !important; line-height: 1.55 !important;
}

.ev-overview .layout {
  grid-template-columns: 1.05fr .95fr !important;
  gap: clamp(36px, 4.5vw, 68px) !important;
  align-items: center !important;
}
.ev-overview .body { align-self: center !important; }
.ev-overview .body p {
  font-size: clamp(16.5px, 1.35vw, 18.5px) !important;
  line-height: 1.7 !important; color: var(--slate-2, #475261) !important;
  max-width: 56ch !important;
}
.ev-overview .body p + p { margin-top: 18px !important; }

/* image: fill the column height so there's no tall tower beside short text */
.ev-overview .side { align-self: stretch !important; display: flex !important; flex-direction: column; }
.ev-overview .side .pic {
  aspect-ratio: auto !important;
  flex: 1 1 auto !important;
  min-height: clamp(360px, 38vw, 480px) !important;
  border-radius: 16px !important;
}
.ev-overview .side .quote-card {
  margin-top: 16px !important;
  background: var(--v35-slate) !important; color: #fff !important;
  border-left: 4px solid var(--v35-brass) !important;
  border-radius: 12px !important;
  padding: 22px 26px !important;
  font-family: var(--f-display) !important; font-style: italic !important;
  font-size: clamp(16px, 1.3vw, 19px) !important; line-height: 1.45 !important;
}

@media (max-width: 900px) {
  .ev-overview .layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ev-overview .side .pic { min-height: clamp(280px, 60vw, 380px) !important; }
}

/* ============================================================
   3. EV-WHOFOR — "Is this day for your group?"  → real cards
   Works for both the dedicated section and the birthdays inline block
   ============================================================ */
.ev-whofor { padding: clamp(56px, 6vw, 92px) 0 !important; }

.ev-whofor .whofor-wrap .block ul,
.ev-whofor-inline .whofor-wrap .block ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: clamp(14px, 1.6vw, 22px) !important;
  list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.ev-whofor .whofor-wrap .block ul li,
.ev-whofor-inline .whofor-wrap .block ul li {
  position: relative !important;
  display: flex !important; align-items: flex-start !important; gap: 16px !important;
  background: #fff !important;
  border: 1px solid var(--v35-line) !important;
  border-radius: 16px !important;
  padding: 22px 24px 22px 22px !important; margin: 0 !important;
  font-size: clamp(15px, 1.2vw, 16.5px) !important; line-height: 1.5 !important;
  color: var(--slate-2, #475261) !important;
  box-shadow: 0 18px 40px -34px rgba(16,44,84,.5) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.ev-whofor .whofor-wrap .block ul li:hover,
.ev-whofor-inline .whofor-wrap .block ul li:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(193,154,77,.5) !important;
  box-shadow: 0 30px 52px -34px rgba(16,44,84,.4) !important;
}
/* brass icon chip in front of each card */
.ev-whofor .whofor-wrap .block ul li::before,
.ev-whofor-inline .whofor-wrap .block ul li::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 42px !important; height: 42px !important; margin: 0 !important; top: auto !important; left: auto !important;
  position: relative !important;
  border-radius: 12px !important;
  background-color: rgba(193,154,77,.14) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23C19A4D' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><path d='M2.8 20v-1a6 6 0 0 1 12 0v1'/><circle cx='17.6' cy='9' r='2.4'/><path d='M16.4 20v-1a4.2 4.2 0 0 1 5-3.6'/></svg>") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: 24px 24px !important;
  -webkit-mask: none !important; mask: none !important;
}
.ev-whofor-inline { margin-top: clamp(44px,5vw,68px) !important; padding-top: clamp(38px,4vw,56px) !important; }
.ev-subhead { font-size: clamp(22px,2.2vw,30px) !important; font-weight: 800 !important; }

@media (max-width: 640px) {
  .ev-whofor .whofor-wrap .block ul,
  .ev-whofor-inline .whofor-wrap .block ul { grid-template-columns: 1fr !important; }
}

/* ============================================================
   4. TM-INCLUDED (event) — "Included / Not included" icon badges
   ============================================================ */
.tm-included .tm-incl-grid { gap: clamp(20px, 2.4vw, 32px) !important; margin-top: clamp(32px,3.6vw,48px) !important; }
.tm-included .tm-incl-col {
  background: #fff !important;
  border: 1px solid var(--v35-line) !important;
  border-radius: 16px !important;
  padding: clamp(26px, 2.6vw, 38px) !important;
  box-shadow: 0 24px 54px -40px rgba(16,44,84,.45) !important;
}
.tm-included .tm-incl-col.yes { border-top: 4px solid var(--v35-green) !important; }
.tm-included .tm-incl-col.no  { border-top: 4px solid var(--v35-brass) !important; }
.tm-included .tm-incl-col h3 {
  font-family: var(--f-display) !important; font-weight: 800 !important;
  font-size: clamp(20px, 1.8vw, 26px) !important; letter-spacing: -.02em !important;
  margin: 0 0 6px !important; display: flex; align-items: center; gap: 12px;
}
.tm-included .tm-incl-col.yes h3::before,
.tm-included .tm-incl-col.no h3::before {
  content: ""; width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto;
  background-repeat: no-repeat; background-position: center; background-size: 20px;
}
.tm-included .tm-incl-col.yes h3::before {
  background-color: rgba(46,125,91,.14);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232E7D5B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4 4 10-10'/></svg>");
}
.tm-included .tm-incl-col.no h3::before {
  background-color: rgba(193,154,77,.16);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23C19A4D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>");
}
.tm-included .tm-incl-col ul { margin: 22px 0 0 !important; padding: 0 !important; list-style: none !important; display: flex; flex-direction: column; gap: 14px !important; }
.tm-included .tm-incl-col li {
  display: flex !important; align-items: flex-start !important; gap: 14px !important;
  font-size: clamp(14.5px, 1.15vw, 16px) !important; line-height: 1.45 !important;
  color: var(--slate-2, #475261) !important; padding: 0 !important;
}
/* turn the inline check/x SVG into a filled circular badge */
.tm-included .tm-incl-col li svg {
  flex: 0 0 auto !important; width: 26px !important; height: 26px !important; margin-top: -1px !important;
  border-radius: 50% !important; padding: 4px !important; box-sizing: border-box !important;
  stroke-width: 2.6 !important;
}
.tm-included .tm-incl-col.yes li svg { background: var(--v35-green) !important; color: #fff !important; }
.tm-included .tm-incl-col.no  li svg { background: rgba(193,154,77,.16) !important; color: var(--v35-brass) !important; }
.tm-included .tm-incl-col .rates {
  margin-top: 24px !important; padding-top: 22px !important;
  border-top: 1px solid var(--v35-line) !important;
  font-size: 13.5px !important; line-height: 1.55 !important; color: var(--slate-3, #6B7585) !important;
}
.tm-included .tm-incl-col .rates strong { color: var(--v35-brass) !important; }

/* ============================================================
   5. EV-RELATED — "Not quite right?"  readable text over images
   ============================================================ */
.ev-related .rel {
  min-height: clamp(340px, 34vw, 400px) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  justify-content: flex-end !important;
  padding: 28px 28px 30px !important;
}
/* much stronger scrim so the copy is always legible */
.ev-related .rel::after {
  background: linear-gradient(178deg, rgba(8,18,34,0) 22%, rgba(8,18,34,.55) 52%, rgba(8,18,34,.92) 100%) !important;
}
.ev-related .rel > div { position: relative; z-index: 2; }
.ev-related .rel h4 {
  font-family: var(--f-display) !important; font-weight: 800 !important;
  font-size: clamp(22px, 2vw, 28px) !important; letter-spacing: -.02em !important;
  color: #fff !important; text-shadow: 0 2px 18px rgba(0,0,0,.5) !important;
}
.ev-related .rel p {
  color: rgba(255,255,255,.92) !important; margin-top: 9px !important;
  font-size: 14.5px !important; line-height: 1.55 !important; max-width: 36ch !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.45) !important;
}
.ev-related .rel .lk {
  margin-top: 16px !important;
  display: inline-flex !important; align-items: center; gap: 9px;
  padding: 10px 16px !important; border-radius: 999px !important;
  background: rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.34) !important;
  color: #fff !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  transition: background .2s ease;
}
.ev-related .rel:hover .lk { background: var(--v35-brass) !important; border-color: var(--v35-brass) !important; color: #102C54 !important; }

/* ============================================================
   6. FEATURED TOUR CARD — prominent "Most booked" badge
   ============================================================ */
/* hide the small duplicate text label injected by v33 */
.tours-grid .tour-listing-card.is-featured .body::before { content: none !important; display: none !important; }

.tours-grid .tour-listing-card.is-featured .feat-ribbon {
  top: 18px !important; left: 18px !important; right: auto !important;
  display: inline-flex !important; align-items: center; gap: 9px !important;
  background: var(--v35-brass) !important; color: #102C54 !important;
  font-family: var(--f-display) !important; font-weight: 800 !important;
  font-size: 14px !important; letter-spacing: .04em !important;
  padding: 11px 20px 11px 16px !important; border-radius: 999px !important;
  text-transform: uppercase;
  box-shadow: 0 14px 30px -12px rgba(193,154,77,.7), 0 2px 0 rgba(0,0,0,.08) !important;
}
.tours-grid .tour-listing-card.is-featured .feat-ribbon svg {
  width: 18px !important; height: 18px !important; color: #102C54 !important;
}

/* ============================================================
   7. ONEPRICEBAND — "One price, whole boat"
   ============================================================ */
.tm-included .onepriceband {
  grid-template-columns: .82fr 1.18fr !important;
  gap: clamp(28px, 3vw, 52px) !important;
  align-items: stretch !important;
  margin-top: clamp(32px, 3.6vw, 50px) !important;
}
.tm-included .onepriceband-fig {
  position: relative; margin: 0; border-radius: 16px !important; overflow: hidden !important;
  min-height: 100% !important;
}
.tm-included .onepriceband-fig img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; min-height: 340px; }
.tm-included .onepriceband-tag {
  position: absolute !important; left: 20px; right: 20px; bottom: 20px;
  background: rgba(16,28,46,.78) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 16px !important; padding: 18px 22px !important; color: #fff !important;
  display: block;
}
.tm-included .onepriceband-tag strong { display: block; color: #fff !important; font-family: var(--f-display); font-size: clamp(17px,1.5vw,21px) !important; font-weight: 800 !important; letter-spacing: -.01em; }
.tm-included .onepriceband-tag span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.8) !important; }

.tm-included .onepriceband-lists {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: clamp(22px, 2.4vw, 38px) !important; align-content: start;
}
.tm-included .onepriceband-lists .opl {
  background: #fff !important;
  border: 1px solid var(--v35-line) !important;
  border-radius: 16px !important;
  padding: clamp(24px, 2.4vw, 32px) !important;
  box-shadow: 0 24px 54px -40px rgba(16,44,84,.45) !important;
}
.tm-included .onepriceband-lists .opl.yes { border-top: 4px solid var(--v35-green) !important; }
.tm-included .onepriceband-lists .opl.no  { border-top: 4px solid var(--v35-brass) !important; }
.tm-included .onepriceband-lists .opl h4 {
  font-family: var(--f-display) !important; font-weight: 800 !important;
  font-size: clamp(18px, 1.6vw, 23px) !important; letter-spacing: -.02em !important;
  margin: 0 0 18px !important; display: flex; align-items: center; gap: 12px;
}
.tm-included .onepriceband-lists .opl h4 svg {
  width: 30px !important; height: 30px !important; border-radius: 8px; padding: 4px; box-sizing: border-box; stroke-width: 2.4 !important;
}
.tm-included .onepriceband-lists .opl.yes h4 svg { background: rgba(46,125,91,.14) !important; color: var(--v35-green) !important; }
.tm-included .onepriceband-lists .opl.no  h4 svg { background: rgba(193,154,77,.16) !important; color: var(--v35-brass) !important; }
.tm-included .onepriceband-lists .opl ul { margin: 0 !important; padding: 0 !important; list-style: none !important; display: flex; flex-direction: column; gap: 15px !important; }
.tm-included .onepriceband-lists .opl li {
  display: flex !important; align-items: flex-start !important; gap: 13px !important;
  font-size: clamp(14.5px, 1.15vw, 16px) !important; line-height: 1.45 !important;
  color: var(--slate-2, #475261) !important;
}
.tm-included .onepriceband-lists .opl li svg {
  flex: 0 0 auto !important; width: 24px !important; height: 24px !important; margin-top: 0 !important;
  stroke-width: 1.9 !important;
}
.tm-included .onepriceband-lists .opl.yes li svg { color: var(--v35-green) !important; }
.tm-included .onepriceband-lists .opl.no  li svg { color: var(--v35-brass) !important; }

@media (max-width: 900px) {
  .tm-included .onepriceband { grid-template-columns: 1fr !important; }
  .tm-included .onepriceband-lists { grid-template-columns: 1fr !important; }
  .tm-included .onepriceband-fig img { min-height: 280px; }
}

/* ===== redesign-v36.css ===== */
/* ============================================================
   redesign-v36 — global polish (loads LAST on every page)
   - Deeper navy for body/heading text
   - Larger header text on large desktops
   - Footer: bolder type + more top breathing room
   - Homepage hero-trust without icons
   ============================================================ */

/* ---------- 1. Deeper blue text tokens (override earlier !important) ---------- */
:root {
  --slate:   #15335B !important;   /* deeper navy-blue for headings & dark text */
  --slate-2: #1B3550 !important;   /* deeper secondary text */
}

/* ---------- 2. Larger header text on large desktops ---------- */
@media (min-width: 1100px) {
  .subhero h1 { font-size: clamp(48px, 4.8vw, 80px) !important; line-height: .98 !important; }
  .subhero .sub { font-size: clamp(18px, 1.5vw, 22px) !important; }
  .hero h1 { font-size: clamp(52px, 5.4vw, 96px) !important; }
  .event-hero h1 { font-size: clamp(48px, 5vw, 84px) !important; }
  .event-hero .tagline { font-size: clamp(18px, 1.6vw, 22px) !important; }
}

/* ---------- 3. Footer — bolder type + more spacing on top ---------- */
.site-footer { padding-top: clamp(72px, 6.5vw, 108px) !important; }
.site-footer .footer-cta { margin-bottom: clamp(40px, 4vw, 60px) !important; }
.site-footer .footer-grid .col h4 { font-weight: 800 !important; }
.site-footer .footer-grid .col ul a,
.site-footer .footer-grid .col a {
  font-weight: 600 !important; color: rgba(255,255,255,.8) !important;
}
.site-footer .footer-grid .col ul a:hover,
.site-footer .footer-grid .col a:hover { color: #fff !important; }
.site-footer .descriptor { font-weight: 500 !important; color: rgba(255,255,255,.78) !important; }
.site-footer .nap .ic-line { font-weight: 500 !important; }
.site-footer .nap .ic-line strong { font-weight: 800 !important; }
.site-footer .boarding-points { font-weight: 600 !important; }
.site-footer .legal-bar { font-weight: 500 !important; }

/* ---------- 4. Homepage hero-trust without icons ---------- */
.hero-trust--text .hero-trust-item { gap: 0 !important; }
.hero-trust--text .hero-trust-item div {
  font-weight: 700 !important; letter-spacing: .01em;
}

/* ---------- 5. Section sub-lead UNDER the heading (was right column) ---------- */
/* Stack every two-column section head so the subheading sits below the title,
   left-aligned, with a tighter line-height. Applies on all viewports. */
.section-head,
.cv9-head,
.charter-band .intro,
.i1-head {
  display: block !important;
}
.section-head > div,
.cv9-head > div,
.charter-band .intro > div,
.i1-head > div { max-width: none !important; }

.section-head .lead,
.cv9-head .lead,
.charter-band .intro > p,
.i1-head .lead {
  margin-top: 14px !important;
  max-width: 66ch !important;
  line-height: 1.4 !important;
}
.i1-head .i1-head-r { display: block !important; margin-top: 14px !important; }
.i1-head .i1-head-r .lead { margin-top: 0 !important; }

/* ---------- 6. Soften the heavy gold-bordered highlight cards (.tmcombo bands) ---------- */
/* Replace the loud 2px full-brass outline with a single brass accent edge,
   a subtle hairline, larger radius and a soft glow. Covers EN + HR. */
.tmcombo-price {
  border: 1px solid rgba(193,154,77,.28) !important;
  border-left: 4px solid var(--brass, #C19A4D) !important;
  border-radius: 16px !important;
  background: linear-gradient(150deg, rgba(193,154,77,.12), rgba(193,154,77,.02)) !important;
  box-shadow: 0 26px 60px -42px rgba(193,154,77,.55) !important;
}
.ch-costs .ch-cost { border-radius: 12px !important; }
.ch-costs .ch-cost.included {
  border: 1px solid rgba(193,154,77,.28) !important;
  border-top: 3px solid var(--brass, #C19A4D) !important;
  background: linear-gradient(160deg, rgba(193,154,77,.12), rgba(193,154,77,.02)) !important;
  box-shadow: 0 26px 60px -42px rgba(193,154,77,.55) !important;
}

/* ---------- 7. Rent-a-boat cards: bigger included check icons ---------- */
.boat-card.bc-v2 .features span svg { width: 21px !important; height: 21px !important; }

/* ---------- 8. Featured "Most booked" card: gold hover + badge clear of the pill ---------- */
.tours-grid .tour-listing-card.is-featured {
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}
.tours-grid .tour-listing-card.is-featured:hover {
  border-color: var(--brass, #C19A4D) !important;
  box-shadow: 0 52px 100px -54px rgba(193,154,77,.6) !important;
  transform: translateY(-4px);
}
/* duration-tag sits top-left → move the Most-booked ribbon to the top-right */
.tours-grid .tour-listing-card.is-featured .feat-ribbon { left: auto !important; right: 18px !important; }

/* ---------- 9. "How to book" sections: background photo + scrim ---------- */
.contactband::before {
  background-image: linear-gradient(150deg, rgba(9,20,36,.92) 0%, rgba(9,20,36,.84) 100%), url('images/photo-sunset-wake.webp') !important;
  background-size: cover !important; background-position: center !important; opacity: 1 !important;
}
.how-strip { position: relative; isolation: isolate; background: #0c1f38 !important; overflow: hidden; }
.how-strip > * { position: relative; z-index: 1; }
.how-strip::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(150deg, rgba(9,20,36,.9) 0%, rgba(9,20,36,.8) 100%), url('images/photo-bow-islands-wide.jpg');
  background-size: cover; background-position: center;
}

/* ---------- 10. "One price, whole boat" — push further (hover + depth) ---------- */
.tm-included .onepriceband-fig { box-shadow: 0 44px 84px -52px rgba(16,44,84,.6); }
.tm-included .onepriceband-lists .opl {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.tm-included .onepriceband-lists .opl:hover {
  transform: translateY(-4px);
  border-color: rgba(193,154,77,.42) !important;
  box-shadow: 0 36px 64px -42px rgba(16,44,84,.42) !important;
}
.tm-included .onepriceband-lists .opl li { transition: transform .15s ease; }
.tm-included .onepriceband-lists .opl li:hover { transform: translateX(3px); }

/* ---------- 11. Mobile/tablet: guard against stray horizontal overflow ---------- */
/* Uses overflow-x:clip (won't break the sticky header the way overflow:hidden can).
   Inner scroll containers (fleet-spec table, carousels) keep their own scroll. */
@media (max-width: 960px) {
  body { overflow-x: hidden; overflow-x: clip; }
}

/* ---------- 12. Event detail: combined About + Who-it's-for section ---------- */
.ev-overview .ev-whofor-inline {
  margin-top: clamp(40px, 5vw, 66px) !important;
  padding-top: clamp(34px, 4vw, 54px) !important;
  border-top: 1px solid rgba(71,82,97,.16) !important;
}
.ev-overview .ev-subhead {
  position: relative; font-family: var(--f-display) !important; font-weight: 800 !important;
  font-size: clamp(23px, 2.4vw, 33px) !important; letter-spacing: -.025em !important;
  color: var(--slate, #15335B) !important; margin: 0 0 clamp(22px, 2.4vw, 32px) !important;
}
.ev-overview .ev-subhead em { font-style: italic; font-weight: 300; color: var(--brass, #C19A4D); }

/* ---------- 13. Event "Not quite right" related cards — unified ---------- */
.ev-related .rel-grid { align-items: stretch !important; }
.ev-related .rel { height: 100% !important; }

/* ---------- 14. Event enquiry/contact: background photo + borderless bigger icons ---------- */
.ev-enquiry {
  position: relative; isolation: isolate;
  background-image: linear-gradient(158deg, rgba(10,26,46,.9) 0%, rgba(8,20,38,.94) 100%), url('images/event-celebrate.jpg') !important;
  background-size: cover !important; background-position: center !important;
}
.ev-enquiry .reassure .item .ic {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  width: auto !important; height: auto !important; flex: 0 0 auto !important;
  color: var(--sand, #C19A4D) !important;
}
.ev-enquiry .reassure .item .ic svg { width: 36px !important; height: 36px !important; }

/* ---------- 15. Form card textarea (extended day-trips / contact forms) ---------- */
.formcard textarea {
  width: 100%; box-sizing: border-box;
  background: #F3F5F8; border: 1px solid rgba(71,82,97,.16);
  border-radius: 12px; padding: 14px 16px;
  font-family: var(--f-body); font-size: 15px; color: var(--slate, #15335B);
  min-height: 98px; resize: vertical;
}
.formcard textarea::placeholder { color: #9AA1AB; }
.formcard textarea:focus { outline: none; border-color: var(--brass, #C19A4D); background: #fff; }


/* ===== ux-polish.css ===== */
/* ============================================================
   ux-polish.css  —  site-wide UX, accessibility & mobile polish
   Loaded LAST on every page. Deliberately additive and low-risk:
   it lifts the floor (focus states, tap targets, anchor offsets,
   form affordances, motion hygiene) without repainting the
   bespoke per-page designs. 2026 refresh.
   ============================================================ */

/* ---- 1. Anchor jumps clear the sticky header -------------------
   In-page links (#trips, #faq, #inquiry, #contact …) were landing
   under the fixed header. Offset every scroll target. */
html { scroll-padding-top: 96px; }
@media (max-width: 860px) { html { scroll-padding-top: 70px; } }

/* ---- 2. Accessibility — visible keyboard focus (was absent) --- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sand, #D9B86A);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---- 3. Mobile safety — kill stray horizontal scroll ---------- */
html, body { overflow-x: clip; }
img, svg, video { max-width: 100%; }

/* ---- 4. Form fields — one consistent, on-brand focus ring ----- */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--sand, #D9B86A) !important;
  box-shadow: 0 0 0 3px rgba(217, 184, 106, .18);
}

/* ---- 5. Comfortable tap targets + no iOS zoom on phones ------- */
@media (max-width: 560px) {
  /* 16px text on controls stops iOS Safari from auto-zooming */
  input, select, textarea,
  button, .btn { font-size: 16px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea { min-height: 48px; }
  .btn, button[type="submit"] { min-height: 50px; }
  /* mobile-menu rows get a real 44px hit area */
  .mm-flat, .mm-cta, .mm-toggle, .mm-sub a { min-height: 44px; }
  .mm-flat, .mm-cta, .mm-toggle { display: flex; align-items: center; }
}

/* ---- 6. Snappier, consistent button feedback ------------------ */
.btn { transition: transform .2s ease, background .2s ease,
                   border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.btn:active { transform: translateY(0) scale(.985); }

/* ---- 7. Smoother native details/summary (FAQ) affordance ------ */
summary { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* ---- 8. Motion hygiene — honour reduced-motion globally ------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ===== lighten-v37.css ===== */
/* ============================================================
   lighten-v37.css — site-wide: lighter background images +
   stronger card shadows. Loads LAST so it wins the cascade.
   Added to every page. Keeps enough bottom gradient that
   white text stays legible, but lifts the heavy mid/overall murk.
   ============================================================ */

/* ---------- HERO (homepage) ---------- */
.hero .scrim {
  background:
    linear-gradient(180deg, rgba(14,26,46,.30) 0%, rgba(14,26,46,.02) 34%, rgba(14,26,46,.58) 100%),
    linear-gradient(90deg, rgba(14,26,46,.26) 0%, rgba(14,26,46,0) 58%) !important;
}

/* ---------- SUBHERO (interior page heroes) ---------- */
.subhero .bg::after {
  background:
    linear-gradient(180deg, rgba(14,26,46,.26) 0%, rgba(14,26,46,.02) 34%, rgba(14,26,46,.62) 100%),
    linear-gradient(90deg, rgba(14,26,46,.18) 0%, rgba(14,26,46,0) 60%) !important;
}

/* ---------- generic full-bleed band scrims ---------- */
.lead-band .scrim {
  background: linear-gradient(90deg, rgba(12,24,42,.74) 0%, rgba(12,24,42,.48) 50%, rgba(12,24,42,.18) 100%) !important;
}
.rb2 .rb2-bg::after,
.rentbook .rb2-bg::after { background: linear-gradient(180deg, rgba(10,22,42,.62) 0%, rgba(10,22,42,.5) 100%) !important; }

/* ---------- IMAGE CARDS: lighter overlays so the photo reads ---------- */
.svc16 .svc-tile::after { background: linear-gradient(180deg, rgba(8,18,36,.04) 0%, rgba(8,18,36,.16) 42%, rgba(6,16,32,.82) 100%) !important; }
.tx16-card .tx16-scrim   { background: linear-gradient(180deg, rgba(8,18,36,.06) 0%, rgba(8,18,36,.18) 46%, rgba(6,16,32,.8) 100%) !important; }
.tcardx-media::after     { background: linear-gradient(180deg, rgba(11,24,40,.16) 0%, rgba(11,24,40,0) 34%, rgba(11,24,40,0) 56%, rgba(11,24,40,.56) 100%) !important; }
.daycard-ph::after       { background: linear-gradient(180deg, rgba(8,18,34,0) 42%, rgba(8,18,34,.66) 100%) !important; }
.yacht-card .yc-photo::before { background: linear-gradient(180deg, rgba(16,28,46,.14) 0%, rgba(16,28,46,0) 42%, rgba(16,28,46,.7) 100%) !important; }
.charter-fleet .ycard-ph::after { background: linear-gradient(180deg, rgba(16,28,46,.16) 0%, rgba(16,28,46,0) 40%, rgba(16,28,46,.74) 100%) !important; }
.tours-split .split-card::after { background: linear-gradient(180deg, rgba(20,28,38,.04) 0%, rgba(20,28,38,.64) 100%) !important; }
.dt-seg-card::after      { background: linear-gradient(180deg, rgba(20,28,38,.04) 0%, rgba(20,28,38,.68) 100%) !important; }
.ev-related .rel::after  { background: linear-gradient(180deg, rgba(20,28,38,.02) 0%, rgba(20,28,38,.70) 100%) !important; }
.ws-attach .at-card::after { background: linear-gradient(180deg, rgba(20,28,38,.02) 0%, rgba(20,28,38,.70) 100%) !important; }
.boat-card .img::after   { background: linear-gradient(180deg, rgba(20,28,38,0) 64%, rgba(20,28,38,.4) 100%) !important; }
.tcardx-media::after, .daycard-ph::after { transition: background .4s ease; }
.rev-video::after        { background: linear-gradient(180deg, rgba(11,24,44,.04) 42%, rgba(9,18,34,.72) 100%) !important; }
.sm-card.sm-video::after { background: linear-gradient(180deg, rgba(8,18,36,.22) 0%, rgba(8,18,36,0) 30%, rgba(8,18,36,.64) 100%) !important; }
.dt-time-card::before    { background: linear-gradient(180deg, rgba(20,28,38,0) 38%, rgba(20,28,38,.8) 100%) !important; }

/* event hero & ct3 aside — lift the murk */
.event-hero .eh-img::after { background: linear-gradient(180deg, rgba(8,18,36,.22) 0%, rgba(8,18,36,.36) 48%, rgba(8,18,36,.72) 100%) !important; }
.ct3-aside::after { background: linear-gradient(180deg, rgba(18,26,34,.32) 0%, rgba(18,26,34,.08) 30%, rgba(18,26,34,.58) 72%, rgba(16,23,30,.82) 100%) !important; }

/* ============================================================
   STRONGER CARD SHADOWS — give the key cards real depth
   ============================================================ */
.service-card,
.tour-card,
.tour-listing-card,
.cat-card,
.fleet-card-sec,
.daycard,
.boat-card,
.tcardx,
.dt-seg-card,
.aw-card,
.tx16-card,
.svc16 .svc-tile,
.testi-platform,
.review-card,
.blog-card {
  box-shadow: 0 28px 56px -30px rgba(10, 22, 44, .42), 0 8px 20px -12px rgba(10, 22, 44, .22) !important;
}
.service-card:hover,
.tour-card:hover,
.tour-listing-card:hover,
.cat-card:hover,
.daycard:hover,
.boat-card:hover,
.tcardx:hover,
.blog-card:hover {
  box-shadow: 0 44px 84px -34px rgba(10, 22, 44, .5), 0 14px 30px -16px rgba(10, 22, 44, .28) !important;
}

/* ===== refine-v38.css ===== */
/* ============================================================
   refine-v38.css — global refinements (loads LAST, after
   lighten-v37 / tours-hub / boatpage / recognised / rentboat)
   1. Background images a touch darker (they were too visible)
   2. Remove golden decorative BORDERS + golden hover ANIMATIONS
      (gold stays only as text / icon / button accent)
   ============================================================ */

/* ---------- 1. images a notch darker ---------- */
.hero .scrim {
  background:
    linear-gradient(180deg, rgba(13,24,44,.42) 0%, rgba(13,24,44,.12) 34%, rgba(13,24,44,.68) 100%),
    linear-gradient(90deg, rgba(13,24,44,.34) 0%, rgba(13,24,44,0) 58%) !important;
}
.subhero .bg::after {
  background:
    linear-gradient(180deg, rgba(13,24,44,.40) 0%, rgba(13,24,44,.14) 34%, rgba(13,24,44,.72) 100%),
    linear-gradient(90deg, rgba(13,24,44,.26) 0%, rgba(13,24,44,0) 60%) !important;
}
.svc16 .svc-tile::after { background: linear-gradient(180deg, rgba(8,18,36,.14) 0%, rgba(8,18,36,.30) 42%, rgba(6,16,32,.88) 100%) !important; }
.tx16-card .tx16-scrim   { background: linear-gradient(180deg, rgba(8,18,36,.14) 0%, rgba(8,18,36,.30) 46%, rgba(6,16,32,.86) 100%) !important; }
.tcardx-media::after     { background: linear-gradient(180deg, rgba(11,24,40,.22) 0%, rgba(11,24,40,.04) 34%, rgba(11,24,40,.04) 52%, rgba(11,24,40,.66) 100%) !important; }
.daycard-ph::after       { background: linear-gradient(180deg, rgba(8,18,34,.04) 36%, rgba(8,18,34,.74) 100%) !important; }
.yacht-card .yc-photo::before { background: linear-gradient(180deg, rgba(16,28,46,.20) 0%, rgba(16,28,46,.02) 42%, rgba(16,28,46,.76) 100%) !important; }
.charter-fleet .ycard-ph::after { background: linear-gradient(180deg, rgba(16,28,46,.22) 0%, rgba(16,28,46,.04) 40%, rgba(16,28,46,.80) 100%) !important; }
.tours-split .split-card::after { background: linear-gradient(180deg, rgba(20,28,38,.10) 0%, rgba(20,28,38,.70) 100%) !important; }
.dt-seg-card::after      { background: linear-gradient(180deg, rgba(20,28,38,.10) 0%, rgba(20,28,38,.74) 100%) !important; }
.ev-related .rel::after  { background: linear-gradient(180deg, rgba(20,28,38,.08) 0%, rgba(20,28,38,.76) 100%) !important; }
.ws-attach .at-card::after { background: linear-gradient(180deg, rgba(20,28,38,.08) 0%, rgba(20,28,38,.76) 100%) !important; }
.ttype-media::after      { background: linear-gradient(180deg, rgba(8,18,36,.10) 0%, rgba(8,18,36,0) 30%, rgba(8,18,36,.50) 100%) !important; }
.rbg::after              { background: linear-gradient(180deg, rgba(8,18,36,.04) 42%, rgba(8,18,36,.72) 100%) !important; }
.ba-fig figcaption, .rbg figcaption { } /* unchanged */

/* ---------- 2a. remove golden HOVER ANIMATIONS ---------- */
.svc16 .svc-tile::before { display: none !important; }      /* gold line reveal */
.tx16-card .tx16-go { border-bottom: 0 !important; }         /* gold underline */
.ws-catalogue .ws-card:hover { border-color: rgba(16,44,84,.16) !important; }

/* ---------- 2b. remove golden DECORATIVE BORDERS / dashes ---------- */
/* dashed-gold dividers I introduced -> quiet neutral hairline */
.ba-block-head::after {
  background: var(--line-2, rgba(71,82,97,.22)) !important;
  height: 1px !important;
}
.ttype:not(.is-dark) + .ttype:not(.is-dark)::before {
  background: var(--line-2, rgba(71,82,97,.16)) !important;
  height: 1px !important;
}
/* the outlined "gold border" big numbers -> soft solid fill, no stroke */
.ttype-no {
  -webkit-text-stroke: 0 !important; text-stroke: 0 !important;
  color: rgba(12,34,68,.13) !important; opacity: 1 !important;
}
.ttype.is-dark .ttype-no { color: rgba(255,255,255,.16) !important; }

/* gold left-rail accents on cards -> remove the gold border */
.cx16 .advisor-card,
.cx16 .contact-info-card { border-left: 0 !important; }
.svc16 .svc-tile .svc-num::before { background: rgba(255,255,255,.5) !important; }

/* gold seal/hover border on recognised cards -> neutral */
.rec-card:hover { box-shadow: 0 44px 80px -34px rgba(4,12,28,.9), inset 0 0 0 1px rgba(255,255,255,.16) !important; }

/* ---------- "Make it yours" add-ons: rebuilt readable ----------
   4-class selectors so they beat the page's inline <style> (which
   loads later but is lower specificity). */
.incl-v13 .wrap .addons-v13 {
  background: #fff !important;
  border: 1px solid rgba(71,82,97,.14) !important;
  box-shadow: 0 30px 64px -40px rgba(10,22,44,.45) !important;
  border-radius: 16px !important;
  padding: 26px clamp(22px,2.4vw,30px) 28px !important;
}
.incl-v13 .wrap .addons-v13 .addons-label {
  color: var(--slate, #2C3744) !important;
  font-family: var(--f-display) !important; font-weight: 700 !important;
  font-size: 15px !important; letter-spacing: -.01em !important;
}
.incl-v13 .wrap .addons-v13 .addons-grid { gap: 12px !important; }
.incl-v13 .wrap .addons-v13 .addon {
  background: var(--off, #F7F4EF) !important;
  border: 1px solid rgba(71,82,97,.12) !important;
  box-shadow: 0 14px 30px -22px rgba(10,22,44,.4) !important;
  border-radius: 16px !important; padding: 18px !important;
  flex-direction: column !important; align-items: flex-start !important; gap: 12px !important;
}
.incl-v13 .wrap .addons-v13 .addon svg {
  width: 42px !important; height: 42px !important; padding: 10px; box-sizing: border-box;
  border-radius: 50%; background: #FBF3E8;
  color: var(--brass, #C19A4D) !important;
}
.incl-v13 .wrap .addons-v13 .addon span {
  color: var(--slate, #2C3744) !important;
  font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.4 !important;
}

/* ---------- yacht charter: better-positioned fit boxes ---------- */
.cruise-builder #cb-fit .cb-fit-row .f {
  justify-content: center !important; align-items: center !important; text-align: center;
  padding: 18px 14px !important; gap: 6px !important;
}
.cruise-builder #cb-fit .cb-fit-row .fv { font-size: 22px !important; line-height: 1 !important; }
.cruise-builder #cb-fit .cb-fit-row .fk { font-size: 10px !important; letter-spacing: .12em !important; }

/* ---------- "How to book" contact band: image less dark ---------- */
.contactband::before {
  background-image:
    linear-gradient(100deg, rgba(9,20,36,.85) 0%, rgba(9,20,36,.58) 46%, rgba(9,20,36,.32) 100%),
    url('images/photo-sunset-wake.webp') !important;
}

/* ---------- "One price, whole boat" — bolder, more pop ---------- */
.tm-included .onepriceband-lists .opl {
  padding: clamp(26px, 2.4vw, 34px) !important;
  border-radius: 16px !important;
  box-shadow: 0 36px 72px -42px rgba(16,44,84,.55), 0 10px 24px -16px rgba(16,44,84,.32) !important;
}
.tm-included .onepriceband-lists .opl.yes { border-top: 5px solid #2E7D5B !important; }
.tm-included .onepriceband-lists .opl.no  { border-top: 5px solid #14406e !important; }
.tm-included .onepriceband-lists .opl.no h4 svg { background: rgba(20,64,110,.12) !important; color: #14406e !important; }
.tm-included .onepriceband-lists .opl.no h4 { color: #14406e !important; }
.tm-included .onepriceband-lists .opl.no li svg { color: #14406e !important; }
.tm-included .onepriceband-lists .opl h4 { font-size: clamp(20px, 1.8vw, 25px) !important; }
.tm-included .onepriceband-lists .opl li {
  font-size: clamp(15px, 1.2vw, 16.5px) !important; font-weight: 500 !important;
  color: var(--slate-2, #475261) !important;
}
.tm-included .onepriceband-tag { background: rgba(12,28,50,.82) !important; border-radius: 16px !important; }
.tm-included .onepriceband-tag strong { font-size: clamp(19px, 1.7vw, 24px) !important; }

/* ============================================================
   FORMS — nicer, tighter, less generic (.formcard + .tm-form)
   ============================================================ */
/* shared white form card (day-trips / transfers / half+full-day tours) */
.formcard { box-shadow: 0 34px 70px -40px rgba(10,22,44,.5), 0 10px 26px -18px rgba(10,22,44,.3) !important; }
.formcard input, .formcard select, .formcard textarea {
  background: #FAFBFC !important; border: 1.5px solid rgba(12,34,68,.12) !important;
  border-radius: 12px !important; font-size: 14.5px !important;
}
.formcard input { height: 48px !important; }
.formcard select {
  height: 48px !important; -webkit-appearance: none; appearance: none;
  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='%239AA1AB' stroke-width='1.7'/></svg>");
  background-repeat: no-repeat; background-position: right 15px center; padding-right: 38px !important;
}
.formcard textarea { min-height: 82px !important; }
.formcard input:focus, .formcard select:focus, .formcard textarea:focus {
  background: #fff !important; border-color: var(--brass, #C19A4D) !important;
  box-shadow: 0 0 0 4px rgba(193,154,77,.16), 0 10px 24px -16px rgba(193,154,77,.5) !important;
  transform: translateY(-1px);
}
.formcard button[type=submit] {
  min-height: 54px !important; border-radius: 12px !important;
  background: linear-gradient(180deg, #E2C173 0%, #C19A4D 100%) !important; color: #0C2244 !important;
  font-weight: 700 !important; box-shadow: 0 16px 32px -16px rgba(193,154,77,.7) !important;
  transition: transform .18s, box-shadow .18s, filter .18s !important;
}
.formcard button[type=submit]:hover { transform: translateY(-2px); filter: brightness(1.03); }

/* tailor-made build form: tighter + gold-accented, less bulky */
.tm-form { gap: 18px !important; }
.tm-form .field-group { gap: 9px !important; padding-top: 18px; border-top: 1px solid rgba(71,82,97,.12); }
.tm-form .field-group:first-child { padding-top: 0; border-top: 0; }
.tm-form label.lbl { color: var(--olive, #9A7A30) !important; font-weight: 700 !important; }
.tm-form input[type=text], .tm-form input[type=email], .tm-form input[type=tel],
.tm-form input[type=number], .tm-form input[type=date], .tm-form select, .tm-form textarea {
  background: #FAFBFC !important; border: 1.5px solid rgba(12,34,68,.12) !important;
  border-radius: 12px !important; padding: 12px 14px !important;
}
.tm-form textarea { min-height: 84px !important; }
.tm-form input:focus, .tm-form select:focus, .tm-form textarea:focus {
  background: #fff !important; border-color: var(--brass, #C19A4D) !important;
  box-shadow: 0 0 0 4px rgba(193,154,77,.15) !important; outline: none;
}
.tm-form .check-grid { grid-template-columns: repeat(3, 1fr); gap: 8px !important; }
.tm-form .check, .tm-form .chip { border-radius: 8px !important; padding: 10px 13px !important; }
.tm-form .submit-bar button {
  background: linear-gradient(180deg, #E2C173 0%, #C19A4D 100%) !important; color: #0C2244 !important;
  border-radius: 12px !important; box-shadow: 0 16px 32px -16px rgba(193,154,77,.7) !important;
}
.tm-form .submit-bar button:hover { filter: brightness(1.03); }
.tm-form-shell { gap: 38px !important; padding: clamp(24px,2.6vw,38px) !important; }

/* tailor-made: bold navy contact aside (matches the redesigned contacts) */
.tm-form-shell .side-card {
  background: linear-gradient(165deg, #123A6B 0%, #0C2342 78%) !important;
  border-radius: 22px !important;
  box-shadow: 0 44px 90px -50px rgba(8,20,44,.7), inset 0 0 0 1px rgba(255,255,255,.07) !important;
}
.tm-form-shell .side-card .contact-line {
  background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important; padding: 13px 16px !important;
}
.tm-form-shell .side-card .contact-line .ci {
  width: 40px !important; height: 40px !important; border-radius: 12px !important;
  background: rgba(201,163,90,.16) !important; color: #E4CB94 !important;
  display: grid !important; place-items: center !important;
}
.tm-form-shell .side-card .contact-line .ci svg { width: 20px !important; height: 20px !important; }
.tm-form-shell .side-card .price-note { background: rgba(201,163,90,.16) !important; }
.tm-form-shell .side-card .price-note strong { color: #E4CB94 !important; }

/* ============================================================
   Individual tour pages — transfer block, gallery, contact pop
   ============================================================ */
.tourxfer { background: var(--off, #F7F4EF); padding: clamp(40px,4.6vw,64px) 0; }
.tourxfer .wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.tourxfer-card {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px,2.4vw,34px); align-items: center;
  background: linear-gradient(160deg, #123A6B 0%, #0C2342 75%); color: #fff;
  border-radius: 22px; padding: clamp(26px,3vw,40px);
  box-shadow: 0 44px 90px -50px rgba(8,20,44,.7), inset 0 0 0 1px rgba(255,255,255,.07);
}
.tourxfer .txf-ic {
  width: clamp(64px,7vw,92px); height: clamp(64px,7vw,92px); border-radius: 16px; flex: 0 0 auto;
  display: grid; place-items: center; background: rgba(201,163,90,.16); color: #E4CB94;
}
.tourxfer .txf-ic svg { width: 52%; height: 52%; }
.tourxfer .txf-k { font-family: var(--f-body); font-weight: 700; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #E4CB94; }
.tourxfer .txf-tx h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px,2.2vw,30px); letter-spacing: -.025em; margin: 10px 0 0; color: #fff; }
.tourxfer .txf-tx p { margin: 12px 0 0; font-size: clamp(14.5px,1.1vw,16.5px); line-height: 1.6; color: rgba(226,235,247,.78); max-width: 64ch; }
.tourxfer .txf-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tourxfer .txf-chips span {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap;
}
.tourxfer .txf-chips span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E4CB94; }
@media (max-width: 680px) { .tourxfer-card { grid-template-columns: 1fr; } }

/* tour gallery mosaic */
.tourgal { background: #fff; padding: clamp(48px,5.4vw,78px) 0; }
.tourgal .wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.tourgal-grid { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 150px; gap: 14px; grid-auto-flow: dense; margin-top: clamp(26px,3vw,42px); }
.tourgal .tg { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: #dfe5ea; box-shadow: 0 28px 56px -36px rgba(10,22,44,.5); }
.tourgal .tg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.tourgal .tg:hover img { transform: scale(1.06); }
.tourgal .tg.big { grid-column: span 2; grid-row: span 2; }
.tourgal .tg.wide { grid-column: span 2; }
.tourgal .tg.tall { grid-row: span 2; }
@media (max-width: 760px) { .tourgal-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 130px; } .tourgal .tg.big { grid-column: span 2; } }

/* contact-block-v2 input pop (tour/inland detail pages) */
.contact-block-v2 .form-side input,
.contact-block-v2 .form-side select,
.contact-block-v2 .form-side textarea {
  transition: border-color .18s, box-shadow .18s, background .18s !important;
}
.contact-block-v2 .form-side input:focus,
.contact-block-v2 .form-side select:focus,
.contact-block-v2 .form-side textarea:focus {
  border-color: var(--sand, #D9B86A) !important;
  box-shadow: 0 0 0 4px rgba(217,184,106,.2) !important; outline: none !important;
}

/* ===== blue-v40.css ===== */
/* ============================================================
   blue-v40.css — loads LAST
   1. Light-beige section backgrounds  →  super light blue
   2. Tours-hub card refinements (numbers, image sizes, bold icons)
   ============================================================ */

/* ---------- 1. beige → super light blue ---------- */
:root {
  --off: #ECF3FC;        /* was warm beige #F7F4EF */
  --sand-2: #DFEAF7;     /* warm tint → light blue tint */
}
body { background: #ECF3FC; }
/* common literal beige section backgrounds */
.rbgal, .tourxfer, .tourgal { background: #ECF3FC !important; }
.tm-included { background: #ECF3FC !important; }
/* keep pure-white and navy sections as they are; only the beige bands shift */

/* ---------- 2. Tours hub (.ttype) refinements ---------- */
/* remove the 01 / 02 / 03 index numbers */
.ttype-no { display: none !important; }
.ttype-kicker { margin-top: 0 !important; }

/* the big band image: smaller height */
.ttype-media { aspect-ratio: 5 / 4 !important; align-self: start; }

/* most-booked feature card: larger image + a touch bigger overall */
.ttype-feature { padding: 16px 18px !important; }
.ttype-feature .ttf-thumb { width: 92px !important; height: 92px !important; border-radius: 16px !important; }
.ttype-feature .ttf-tx b { font-size: 19px !important; }
.ttype-feature .ttf-flag { font-size: 11px !important; }

/* stat icons → bold gold tiles (matching the bold-redesign icon style) */
.ttype-stats li svg {
  width: 44px !important; height: 44px !important; padding: 10px !important; box-sizing: border-box !important;
  border-radius: 12px !important; background: rgba(193,154,77,.14) !important;
  color: var(--gold-deep, #9A7A30) !important; stroke-width: 1.8 !important;
}
.ttype.is-dark .ttype-stats li svg { background: rgba(201,163,90,.18) !important; color: #E4CB94 !important; }
.ttype-stats li { gap: 14px !important; }

/* ===== polish-v41.css ===== */
/* ============================================================
   polish-v41.css — loads LAST. Site-wide refinements:
   1. lighter blue + white backgrounds, no beige
   2. no gold borders, no bold full-coloured top-bars
   3. soft shadows on chips/pills + flat cards
   4. bold gold-tile icon treatment on key icon groups
   5. softer section-to-section transitions (rounded bold bands)
   ============================================================ */

/* ---------- 1. lighter blue + white; kill beige ---------- */
:root { --off: #F1F6FD; --sand-2: #E7EFFA; }
body { background: #F1F6FD; }
.rbgal, .tourxfer, .tourgal, .tm-included { background: #F1F6FD !important; }
/* beige form / panels → white */
.tc-form, .ycc-form, .rb2-form { background: #FFFFFF !important; }
.incl-v13 .wrap .addons-v13 .addon { background: #F1F6FD !important; }

/* ---------- 2. remove gold borders + bold coloured top-bars ---------- */
.rec-card::before { display: none !important; }
.tm-included .onepriceband-lists .opl.yes,
.tm-included .onepriceband-lists .opl.no { border-top: 1px solid rgba(16,40,72,.08) !important; }
.tm-incl-col[style], .tm-incl-col, .incl-col { border-top-color: rgba(16,40,72,.1) !important; }
.tx16-go { border-bottom: 0 !important; }
/* any leftover brass/gold rails */
.cx16 .advisor-card, .cx16 .contact-info-card { border-left: 0 !important; }
.rb2 .rb2-method { border-left: 1px solid rgba(255,255,255,.1) !important; }

/* ---------- 3. soft shadows on chips & pills ---------- */
.pill, .ttype-chips span, .tbcard-chips span, .tb-meta span, .tbcard-dur,
.duration-tag, .ba-eq, .ba-mini-kpis .k, .stops .pill, .ycc-chip, .tc-form-head .seal,
.chip, .cat-tags span, .i1-dt-badge, .feat-ribbon, .tcardx-badge,
.tcardx-chips span, .route-dur {
  box-shadow: 0 9px 20px -10px rgba(10,22,44,.34), inset 0 0 0 1px rgba(71,82,97,.08) !important;
}
.tbfeat-chips span, .txf-chips span, .ttype.is-dark .ttype-chips span,
.toursbold .tbcard-chips span {
  box-shadow: 0 9px 20px -10px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.16) !important;
}

/* ---------- 4. soft shadow on flat cards ---------- */
.cat-card, .fleet-card-sec, .review-card, .blog-card, .reltrip, .nextcard,
.tour-listing-card, .i1-dt, .route-card, .ev-card, .me-card, .aw-card,
.incl-col, .tm-incl-col, .opl, .rec-card, .testi, .sf-tile, .cv9-events .photo,
.daycard, .boat-card, .yacht-card {
  box-shadow: 0 28px 56px -32px rgba(10,22,44,.42), 0 6px 16px -10px rgba(10,22,44,.2) !important;
}

/* ---------- 5. bold gold-tile icons on key groups ---------- */
.ba-spec > svg, .yc-contact .ycc-row .ycc-ic, .contact-line .ci, .ic-row svg,
.txf-step .txf-ic, .tc-method .mi, .rb2-method .mi {
  background: rgba(193,154,77,.14) !important; color: var(--gold-deep, #9A7A30) !important;
}
.ba-spec > svg {
  width: 44px !important; height: 44px !important; padding: 10px !important; box-sizing: border-box !important;
  border-radius: 12px !important;
}
.ic-row svg, .yc-contact .ycc-row .ycc-ic {
  width: 42px !important; height: 42px !important; padding: 9px !important; box-sizing: border-box !important;
  border-radius: 12px !important; display: inline-flex !important;
}
/* dark-context tiles keep the warm-gold glyph */
.txf-step .txf-ic, .tc-method .mi, .rb2-method .mi, .contact-line .ci { color: #E4CB94 !important; background: rgba(201,163,90,.16) !important; }

/* ---------- 7. EVENTS page ---------- */
.ev-why .icon-row { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(26px,3vw,38px); }
.ev-why .icon-row .it {
  background: #fff; border-radius: 16px; padding: 26px 24px;
  box-shadow: 0 28px 56px -32px rgba(10,22,44,.42), 0 6px 16px -10px rgba(10,22,44,.2);
  display: flex; flex-direction: column; gap: 11px;
}
.ev-why .icon-row .it svg {
  width: 50px; height: 50px; padding: 11px; box-sizing: border-box; border-radius: 16px;
  background: rgba(193,154,77,.14); color: var(--gold-deep, #9A7A30);
}
.ev-why .icon-row .it strong { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--navy, #0C2342); }
.ev-why .icon-row .it small { font-size: 13.5px; line-height: 1.5; color: var(--slate-2, #475261); }
@media (max-width: 900px) { .ev-why .icon-row { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .ev-why .icon-row { grid-template-columns: 1fr; } }
/* bigger occasion cards + headings */
.events-types .evx-ph { min-height: 320px !important; }
.events-types .evx-ph h3 { font-size: clamp(22px, 2.1vw, 29px) !important; }
.events-types .evx-bd p { font-size: 15.5px !important; line-height: 1.6 !important; }
.events-types .evx-cta-bd h3 { font-size: clamp(26px, 2.6vw, 36px) !important; }

/* ---------- 8. FAQ page — bold ---------- */
.faq-page .faq-cats { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; }
.faq-page .faq-cat {
  background: #fff !important; border: 0 !important; border-radius: 16px !important; padding: 22px 20px !important;
  box-shadow: 0 26px 52px -32px rgba(10,22,44,.42), 0 6px 16px -10px rgba(10,22,44,.2) !important;
  display: flex !important; flex-direction: column !important; gap: 9px !important;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s !important;
}
.faq-page .faq-cat:hover { transform: translateY(-5px) !important; box-shadow: 0 40px 72px -34px rgba(10,22,44,.5) !important; }
.faq-page .faq-cat .ic {
  width: 50px !important; height: 50px !important; border-radius: 16px !important; margin: 0 !important;
  background: rgba(193,154,77,.14) !important; color: var(--gold-deep, #9A7A30) !important;
  display: grid !important; place-items: center !important;
}
.faq-page .faq-cat .ic svg, .faq-page .faq-cat .ic .nico { width: 26px !important; height: 26px !important; }
.faq-page .faq-cat h3 { font-family: var(--f-display) !important; font-weight: 700 !important; font-size: 17px !important; letter-spacing: -.015em !important; color: var(--navy, #0C2342) !important; margin: 0 !important; }
.faq-page .faq-cat .count { font-size: 12px !important; color: var(--slate-3, #6B7585) !important; }
.faq-page .faq-group-head h2 { font-family: var(--f-display) !important; font-weight: 800 !important; font-size: clamp(24px, 2.4vw, 34px) !important; letter-spacing: -.025em !important; color: var(--navy, #0C2342) !important; }
.faq-page .advisor-card { box-shadow: 0 34px 70px -40px rgba(10,22,44,.5) !important; border-radius: 16px !important; }
@media (max-width: 900px) { .faq-page .faq-cats { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 520px) { .faq-page .faq-cats { grid-template-columns: 1fr !important; } }

/* ---------- 9. tailor-made: faint background image behind build form ---------- */
.tm-form-section {
  background-image: linear-gradient(rgba(236,243,252,.93), rgba(236,243,252,.96)), url('images/tour-tailormade.jpg') !important;
  background-size: cover !important; background-position: center !important; background-attachment: fixed;
}

/* ---------- 6. softer section transitions ---------- */
.toursbold, .tourcontact, .recognised {
  border-top-left-radius: clamp(22px, 3vw, 46px) !important;
  border-top-right-radius: clamp(22px, 3vw, 46px) !important;
}

/* ===== bold-v42.css ===== */
/* ============================================================
   bold-v42.css — loads LAST on every page (EN + HR).
   1. Only two backgrounds site-wide: white + super-light blue
   2. NO rounded section transitions — crisp edges, gold hairlines
   3. Softer section-to-section blends + nautical SVG textures
   4. Bold-redesign elements everywhere: bar-eyebrows, big display
      headings, gold-tile icons, dark "Adriatic" bands
   5. "Check availability" contact form card (all form variants)
   6. New components: .duel (comparison), .ledger (price),
      .triprail (trip rows), .snapband (photo strips)
   ============================================================ */

:root {
  --off: #F1F6FD;
  --sand-2: #E7EFFA;
  --v42-blue: #F1F6FD;
  --v42-navy: #0C2342;
  --v42-ink: #14315E;
  --v42-slate: #475261;
  --v42-gold: #C9A35A;
  --v42-gold2: #E4CB94;
  --v42-golddeep: #9A7A30;
}

/* ------------------------------------------------------------
   1. BACKGROUNDS — white + super light blue only, never beige
   ------------------------------------------------------------ */
body { background: #F1F6FD; }
.tc-form, .ycc-form, .rb2-form, .formcard { background: #FFFFFF !important; }
.tbcard-chips span, .stops .pill { background: #F1F6FD !important; }

/* ------------------------------------------------------------
   2. NO ROUNDED SECTION TRANSITIONS
   ------------------------------------------------------------ */
.toursbold, .tourcontact, .recognised, .tm-included, .tm-recs,
.faq-block-light, .charter-value, .testimonials, .incl-3col,
.awards-band, .final, .contactband, .bsec, .how-strip {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ------------------------------------------------------------
   3. SECTION BACKGROUNDS — plain white / light-blue / navy only.
   No illustration textures. Gentle white→blue melts keep light
   bands flowing; dark bands get a crisp 3px gold waterline.
   ------------------------------------------------------------ */

/* light sections that flow seamlessly into white neighbours */
.tm-recs, .rbgal, .tourgal, .tourxfer,
.tm-included, .ledger, .faq-block-light, .tours-section {
  background:
    linear-gradient(180deg, #FFFFFF 0%, rgba(241,246,253,0) 220px),
    linear-gradient(0deg, #FFFFFF 0%, rgba(241,246,253,0) 220px),
    #F1F6FD !important;
}
.charter-value, .testimonials, .incl-3col { background: #FFFFFF !important; }

/* .recognised stays a DARK Adriatic band */
.recognised {
  border-top: 3px solid var(--v42-gold) !important;
  background:
    radial-gradient(90% 130% at 90% -20%, rgba(201,163,90,.22) 0%, rgba(201,163,90,0) 50%),
    linear-gradient(160deg, #123A6B 0%, #0C2342 58%, #081A33 100%) !important;
}

/* .toursbold → light-blue band (no longer dark navy), navy text */
.toursbold {
  border-top: 0 !important;
  background: #E7EFFA !important;
  color: var(--v42-navy) !important;
}
.toursbold::before { display: none !important; }
.toursbold .tb-head h2 { color: var(--v42-navy) !important; }
.toursbold .tb-head h2 em { color: var(--v42-golddeep) !important; }
.toursbold .tb-head .h-eyebrow { color: var(--v42-golddeep) !important; }
.toursbold .tb-head p { color: var(--v42-slate) !important; }
.toursbold.light { background: #FFFFFF !important; }

/* .duel comparison stays dark navy (no texture) */
.duel {
  background:
    radial-gradient(90% 130% at 10% -10%, rgba(201,163,90,.16) 0%, rgba(201,163,90,0) 52%),
    linear-gradient(160deg, #123A6B 0%, #0C2342 56%, #081A33 100%) !important;
}
.tourcontact, .awards-band, .contactband, .final, .bsec {
  border-top: 3px solid var(--v42-gold) !important;
}

/* ------------------------------------------------------------
   4. BOLD ELEMENTS — bar eyebrows, display headings, gold tiles
   ------------------------------------------------------------ */
.h-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  letter-spacing: .24em !important;
  text-transform: uppercase;
  color: var(--v42-golddeep) !important;
}
.h-eyebrow::before {
  content: "";
  width: 30px;
  height: 3px;
  flex: none;
  background: var(--v42-gold);
}
/* heroes keep their clean look — no eyebrows over photos */
.subhero .h-eyebrow, .hero .h-eyebrow { display: none !important; }
/* dark contexts — warm gold */
.toursbold .h-eyebrow, .tourcontact .h-eyebrow, .final .h-eyebrow,
.awards-band .h-eyebrow, .contact-block-v2 .h-eyebrow,
.how-strip .h-eyebrow, .contactband .h-eyebrow, .faq-contact .h-eyebrow {
  color: var(--v42-gold2) !important;
}
/* restore the gap the hidden eyebrow used to leave */
.section-head h2, .yacht-grid h2, .contact-block-v2 .form-side h2 { margin-top: 16px !important; }

/* big display headings */
.section-head h2 {
  font-family: var(--f-display) !important;
  font-weight: 800 !important;
  font-size: clamp(34px, 4.2vw, 58px) !important;
  line-height: .97 !important;
  letter-spacing: -.03em !important;
  text-wrap: balance;
}
.section-head .lead { font-size: clamp(16px, 1.25vw, 18.5px) !important; line-height: 1.55 !important; }

/* FAQ accordions — clean white cards, low pop, proper spacing */
/* FAQ accordions — match the homepage .ct3-q FAQ: borderless list,
   bold display questions, a circular +/− toggle, hairline dividers. */
.faq-accordion {
  border-top: 2px solid rgba(44,55,68,.5) !important;
  display: block !important;
  gap: 0 !important;
}
.faq-accordion details {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(44,55,68,.5) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.faq-accordion details[open] { box-shadow: none !important; }
.faq-accordion summary {
  list-style: none !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 28px !important;
  width: 100% !important;
  padding: 26px 0 !important;
  font-family: var(--f-display) !important;
  font-weight: 800 !important;
  font-size: clamp(19px, 1.7vw, 26px) !important;
  letter-spacing: -.02em !important;
  color: var(--slate, #15335B) !important;
  transition: color .2s ease !important;
}
.faq-accordion summary::-webkit-details-marker { display: none !important; }
.faq-accordion summary:hover,
.faq-accordion details[open] summary { color: var(--mid, #3a4654) !important; }
/* circular +/− marker */
.faq-accordion summary::after {
  content: "+" !important;
  flex: none !important;
  width: 36px !important; height: 36px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(44,55,68,.32) !important;
  background: transparent !important;
  color: var(--slate-2, #475261) !important;
  font-family: var(--f-body) !important; font-weight: 400 !important; font-size: 22px !important;
  line-height: 1 !important;
  transition: background .2s ease, border-color .2s ease, transform .25s ease, color .2s ease !important;
}
.faq-accordion summary:hover::after { border-color: var(--v42-gold) !important; }
.faq-accordion details[open] summary::after {
  content: "–" !important;
  background: var(--v42-gold) !important;
  border-color: var(--v42-gold) !important;
  color: #2A2008 !important;
}
.faq-accordion .answer {
  padding: 0 0 28px 0 !important;
  max-width: 64ch !important;
  font-size: 15.5px !important; line-height: 1.65 !important;
  color: var(--slate-2, #475261) !important;
}

/* charter-value icons → gold tiles (bold icon language) */
.charter-value .vp .ic {
  width: 56px !important; height: 56px !important;
  border-radius: 16px !important;
  display: grid !important; place-items: center !important;
  background: rgba(193,154,77,.14) !important;
  color: var(--v42-golddeep) !important;
}
.charter-value .vp .ic svg { width: 30px !important; height: 30px !important; }
.charter-value .vp h4 {
  font-family: var(--f-display) !important; font-weight: 800 !important;
  font-size: 19px !important; letter-spacing: -.015em !important;
}

/* incl-3col cards — bolder, flatter, no colored top bars */
.incl-col {
  border-top: 0 !important;
  border-radius: 16px !important;
  background: #fff !important;
}
.incl-col .tag {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(193,154,77,.14);
  color: var(--v42-golddeep) !important;
  font-family: var(--f-display); font-weight: 800;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.incl-col h3 {
  font-family: var(--f-display) !important; font-weight: 800 !important;
  letter-spacing: -.02em !important;
}

/* ------------------------------------------------------------
   5. "CHECK AVAILABILITY" FORM CARD — every variant
   ------------------------------------------------------------ */
.tc-form, .ycc-form, .rb2-form, .formcard, .contact-form-card {
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: 26px !important;
  padding: clamp(30px, 3vw, 50px) !important;
  box-shadow: 0 60px 120px -56px rgba(0,0,0,.72) !important;
}
/* headline */
.tc-form-head h3, .ycc-form-head h3, .formcard h3 {
  font-family: var(--f-display) !important;
  font-weight: 800 !important;
  font-size: clamp(26px, 2.3vw, 34px) !important;
  letter-spacing: -.03em !important;
  color: var(--v42-ink) !important;
}
.tc-form-head .sub, .ycc-form-head .sub, .formcard .sub {
  font-size: clamp(15px, 1.2vw, 17.5px) !important;
  color: #3D5577 !important;
  margin-top: 8px !important;
}
/* rating seal pill */
.tc-form-head .seal, .ycc-form-head .seal {
  background: #fff !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-family: var(--f-display) !important;
  font-weight: 800 !important;
  font-size: 13.5px !important;
  color: var(--v42-ink) !important;
  box-shadow: 0 12px 26px -12px rgba(10,22,44,.35), inset 0 0 0 1px rgba(71,82,97,.1) !important;
}
.tc-form-head .seal svg, .ycc-form-head .seal svg { color: #E8B64C !important; width: 15px !important; height: 15px !important; }
/* labels */
.tc-field label, .ycc-field label, .rb2-field label, .contact-form-card label {
  font-family: var(--f-body) !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #51698C !important;
  margin-bottom: 9px !important;
}
/* inputs */
.tc-form input, .tc-form select, .tc-form textarea,
.ycc-form input, .ycc-form select, .ycc-form textarea,
.rb2-form input, .rb2-form select, .rb2-form textarea,
.formcard input, .formcard select, .formcard textarea,
.contact-form-card input, .contact-form-card select, .contact-form-card textarea {
  background: #FFFFFF !important;
  border: 1.5px solid #BBCBE2 !important;
  border-radius: 12px !important;
  min-height: 54px !important;
  padding: 14px 17px !important;
  font-size: 15.5px !important;
  color: var(--v42-ink) !important;
  box-shadow: none !important;
}
.tc-form textarea, .ycc-form textarea, .rb2-form textarea,
.formcard textarea, .contact-form-card textarea { min-height: 118px !important; }
.tc-form input::placeholder, .tc-form textarea::placeholder,
.ycc-form input::placeholder, .ycc-form textarea::placeholder,
.rb2-form input::placeholder, .rb2-form textarea::placeholder,
.formcard input::placeholder, .formcard textarea::placeholder,
.contact-form-card input::placeholder, .contact-form-card textarea::placeholder { color: #9FB0C8 !important; }
.tc-form input:focus, .tc-form select:focus, .tc-form textarea:focus,
.ycc-form input:focus, .ycc-form select:focus, .ycc-form textarea:focus,
.rb2-form input:focus, .rb2-form select:focus, .rb2-form textarea:focus,
.formcard input:focus, .formcard select:focus, .formcard textarea:focus,
.contact-form-card input:focus, .contact-form-card select:focus, .contact-form-card textarea:focus {
  border-color: var(--v42-gold) !important;
  box-shadow: 0 0 0 4px rgba(201,163,90,.16) !important;
  outline: none !important;
}
/* the gold send button */
.tc-submit, .ycc-submit, .rb2-submit, .formcard button[type="submit"],
.contact-form-card button[type="submit"] {
  width: 100% !important;
  min-height: 62px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, #E9D2A0 0%, #C9A35A 100%) !important;
  color: var(--v42-ink) !important;
  font-family: var(--f-display) !important;
  font-weight: 800 !important;
  font-size: clamp(16px, 1.3vw, 19px) !important;
  letter-spacing: -.01em !important;
  box-shadow: 0 26px 50px -22px rgba(201,163,90,.85) !important;
  transition: transform .2s, filter .2s !important;
}
.tc-submit:hover, .ycc-submit:hover, .rb2-submit:hover,
.formcard button[type="submit"]:hover, .contact-form-card button[type="submit"]:hover {
  transform: translateY(-2px); filter: brightness(1.04);
}
/* micro reassurance line — centered, green shield */
.tc-micro, .formcard .micro, .ycc-form-foot {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  text-align: center !important;
  font-size: 14px !important;
  color: #3D5577 !important;
}
.tc-micro svg, .formcard .micro svg { color: #1F8A5B !important; width: 17px !important; height: 17px !important; flex: none; }

/* --- contact-block-v2 (HR + a few EN pages) → white card --- */
.contact-block-v2 { border-radius: 26px !important; overflow: hidden !important; }
.contact-block-v2 .inner { background: #FFFFFF !important; }
.contact-block-v2 .form-side .h-eyebrow { color: var(--v42-golddeep) !important; }
.contact-block-v2 .form-side h2 { color: var(--v42-ink) !important; }
.contact-block-v2 .form-side .lead, .contact-block-v2 .form-side p.lead { color: #3D5577 !important; }
.contact-block-v2 .inquiry label {
  font-weight: 800 !important;
  font-size: 11.5px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #51698C !important;
}
.contact-block-v2 .inquiry input, .contact-block-v2 .inquiry select, .contact-block-v2 .inquiry textarea {
  background: #FFFFFF !important;
  border: 1.5px solid #BBCBE2 !important;
  border-radius: 12px !important;
  min-height: 54px !important;
  padding: 14px 17px !important;
  color: var(--v42-ink) !important;
  font-size: 15.5px !important;
}
.contact-block-v2 .inquiry input::placeholder, .contact-block-v2 .inquiry textarea::placeholder { color: #9FB0C8 !important; }
.contact-block-v2 .inquiry input:focus, .contact-block-v2 .inquiry select:focus, .contact-block-v2 .inquiry textarea:focus {
  border-color: var(--v42-gold) !important;
  box-shadow: 0 0 0 4px rgba(201,163,90,.16) !important;
  outline: none !important;
}
.contact-block-v2 .inquiry .submit-row button {
  border: 0 !important;
  border-radius: 16px !important;
  min-height: 60px !important;
  padding: 0 30px !important;
  background: linear-gradient(180deg, #E9D2A0 0%, #C9A35A 100%) !important;
  color: var(--v42-ink) !important;
  font-family: var(--f-display) !important;
  font-weight: 800 !important;
  font-size: 16.5px !important;
  box-shadow: 0 26px 50px -22px rgba(201,163,90,.85) !important;
}
.contact-block-v2 .inquiry .submit-row .alt { color: #3D5577 !important; }
.contact-block-v2 .inquiry .submit-row .alt a { color: var(--v42-golddeep) !important; font-weight: 700; }
.contact-block-v2 .info-side {
  background: linear-gradient(165deg, #123A6B 0%, #0C2342 70%) !important;
  border-left: 0 !important;
}
.contact-block-v2 .info-side .lbl { color: var(--v42-gold2) !important; }

/* ------------------------------------------------------------
   6A. DUEL — bold half-day vs full-day comparison band
   ------------------------------------------------------------ */
.duel {
  position: relative;
  padding: clamp(60px, 7vw, 110px) 0;
  border-top: 3px solid var(--v42-gold);
  background:
    radial-gradient(90% 130% at 10% -10%, rgba(201,163,90,.16) 0%, rgba(201,163,90,0) 52%),
    linear-gradient(160deg, #123A6B 0%, #0C2342 56%, #081A33 100%);
  color: #fff;
}
.duel .wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.duel-head { max-width: 860px; }
.duel-head .h-eyebrow { color: var(--v42-gold2) !important; }
.duel-head h2 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: .96; letter-spacing: -.035em;
  color: #fff; margin: 16px 0 0; text-wrap: balance;
}
.duel-head h2 em { font-style: italic; font-weight: 500; color: var(--v42-gold2); }
.duel-head p { margin: 18px 0 0; max-width: 56ch; font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.55; color: rgba(226,235,247,.78); }
.duel-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(34px, 4vw, 54px);
}
.duel-card {
  border-radius: 22px;
  padding: clamp(26px, 2.6vw, 40px);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  display: flex; flex-direction: column;
}
.duel-card.is-pick {
  background: #FFFFFF;
  color: var(--v42-navy);
  box-shadow: 0 50px 100px -50px rgba(0,0,0,.8);
}
.duel-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  font-family: var(--f-display); font-weight: 800;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
}
.duel-card.is-pick .duel-tag {
  background: linear-gradient(180deg, var(--v42-gold2), var(--v42-gold));
  color: var(--v42-navy);
  box-shadow: 0 14px 28px -12px rgba(201,163,90,.8);
}
.duel-card h3 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(26px, 2.6vw, 40px);
  letter-spacing: -.03em; line-height: 1;
  margin: 18px 0 0; color: inherit;
}
.duel-card h3 small { display: block; margin-top: 7px; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; color: rgba(226,235,247,.66); font-family: var(--f-body); }
.duel-card.is-pick h3 small { color: #6B7585; }
.duel-card ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 13px; flex: 1; }
.duel-card li { display: flex; align-items: flex-start; gap: 13px; font-size: 14.5px; line-height: 1.45; font-weight: 500; color: rgba(235,242,250,.88); }
.duel-card.is-pick li { color: var(--v42-slate); }
.duel-card li .tik {
  width: 34px; height: 34px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(228,203,148,.16); color: var(--v42-gold2);
}
.duel-card.is-pick li .tik { background: rgba(193,154,77,.14); color: var(--v42-golddeep); }
.duel-card li .tik svg { width: 17px; height: 17px; }
.duel-card .duel-cta {
  margin-top: 26px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font-family: var(--f-display); font-weight: 800; font-size: 14.5px;
  text-decoration: none;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.26);
  color: #fff;
  transition: transform .2s;
}
.duel-card.is-pick .duel-cta {
  background: linear-gradient(180deg, var(--v42-gold2), var(--v42-gold));
  color: var(--v42-navy);
  box-shadow: 0 18px 36px -14px rgba(201,163,90,.85);
}
.duel-cta:hover { transform: translateY(-2px); }
.duel-cta svg { width: 19px; height: 11px; }
.duel-vs { display: grid; place-items: center; }
.duel-vs span {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--v42-gold2), var(--v42-gold));
  color: var(--v42-navy);
  font-family: var(--f-display); font-weight: 800; font-size: 15px;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 22px 44px -16px rgba(201,163,90,.9);
}
@media (max-width: 920px) {
  .duel-grid { grid-template-columns: 1fr; }
  .duel-vs { padding: 4px 0; }
}

/* ------------------------------------------------------------
   6B. LEDGER — transparent price / honest extras
   ------------------------------------------------------------ */
.ledger {
  padding: clamp(60px, 7vw, 104px) 0;
  background:
    linear-gradient(180deg, #FFFFFF 0%, rgba(241,246,253,0) 240px),
    linear-gradient(0deg, #FFFFFF 0%, rgba(241,246,253,0) 240px),
    #F1F6FD;
}
.ledger .wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.ledger-tiers {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: clamp(30px, 3.6vw, 46px);
}
.ledger-tier {
  display: flex; align-items: center; gap: 18px;
  background: #fff; border-radius: 22px;
  padding: 22px 26px;
  box-shadow: 0 28px 56px -32px rgba(10,22,44,.42), 0 6px 16px -10px rgba(10,22,44,.2);
}
.ledger-tier .seats {
  width: 64px; height: 64px; flex: none; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--v42-gold2), var(--v42-gold));
  color: var(--v42-navy);
  font-family: var(--f-display); font-weight: 800; font-size: 17px;
  letter-spacing: -.02em;
  box-shadow: 0 16px 30px -14px rgba(201,163,90,.8);
}
.ledger-tier strong { display: block; font-family: var(--f-display); font-weight: 800; font-size: 19px; letter-spacing: -.015em; color: var(--v42-navy); }
.ledger-tier span.note { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--v42-slate); }
.ledger-card {
  margin-top: 16px;
  display: grid; grid-template-columns: 1.04fr .96fr;
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 50px 100px -50px rgba(10,22,44,.55), 0 10px 24px -14px rgba(10,22,44,.22);
}
.ledger-col { padding: clamp(26px, 2.8vw, 44px); }
.ledger-col + .ledger-col { border-left: 1px solid rgba(16,40,72,.08); }
.ledger-col h4 {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 20px;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(18px, 1.6vw, 23px); letter-spacing: -.02em;
  color: var(--v42-navy);
}
.ledger-col h4 .hic {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(193,154,77,.14); color: var(--v42-golddeep);
}
.ledger-col.no h4 .hic { background: rgba(71,82,97,.1); color: var(--v42-slate); }
.ledger-col h4 .hic svg { width: 21px; height: 21px; }
.ledger-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.ledger-col li { display: flex; align-items: center; gap: 13px; font-size: 14.5px; font-weight: 600; color: var(--v42-slate); line-height: 1.4; }
.ledger-col li .tik {
  width: 36px; height: 36px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(193,154,77,.14); color: var(--v42-golddeep);
}
.ledger-col.no li .tik { background: rgba(71,82,97,.08); color: #6B7585; }
.ledger-col li .tik svg { width: 18px; height: 18px; }
.ledger-strap {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 14px;
  padding: 20px clamp(26px, 2.8vw, 44px);
  background: linear-gradient(160deg, #123A6B 0%, #0C2342 100%);
  color: #fff;
}
.ledger-strap .sic {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(228,203,148,.18); color: var(--v42-gold2);
}
.ledger-strap .sic svg { width: 22px; height: 22px; }
.ledger-strap b { font-family: var(--f-display); font-weight: 800; letter-spacing: -.01em; }
.ledger-strap span { font-size: 14px; color: rgba(226,235,247,.8); }
@media (max-width: 880px) {
  .ledger-card { grid-template-columns: 1fr; }
  .ledger-col + .ledger-col { border-left: 0; border-top: 1px solid rgba(16,40,72,.08); }
  .ledger-tiers { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   6C. TRIPRAIL — trips shown as bold alternating rows
   ------------------------------------------------------------ */
.triprail { display: grid; gap: clamp(18px, 2vw, 26px); margin-top: clamp(32px, 3.6vw, 50px); }
.triprow {
  position: relative;
  display: grid; grid-template-columns: 1.02fr .98fr;
  background: #fff; border-radius: 22px; overflow: hidden;
  text-decoration: none; color: var(--v42-navy);
  box-shadow: 0 50px 96px -48px rgba(2,8,22,.8);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s;
}
.triprow:hover { transform: translateY(-6px); box-shadow: 0 70px 120px -52px rgba(2,8,22,.9); }
.triprow:nth-child(even) .trip-media { order: 2; }
.trip-media { position: relative; min-height: clamp(280px, 30vw, 400px); overflow: hidden; }
.trip-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.triprow:hover .trip-media img { transform: scale(1.05); }
.trip-no {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(44px, 4.6vw, 68px); line-height: 1; letter-spacing: -.04em;
  color: #fff; opacity: .92;
  text-shadow: 0 10px 30px rgba(2,8,22,.6);
}
.trip-dur {
  position: absolute; bottom: 16px; left: 18px; z-index: 2;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(12,34,68,.84); color: #fff;
  font-family: var(--f-body); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.trip-body {
  padding: clamp(26px, 3vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
}
.trip-flag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 999px;
  background: linear-gradient(180deg, var(--v42-gold2), var(--v42-gold));
  color: var(--v42-navy);
  font-family: var(--f-body); font-weight: 800; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 14px 28px -12px rgba(201,163,90,.75);
  margin-bottom: 16px;
}
.trip-flag svg { width: 13px; height: 13px; }
.trip-body h3 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: .98; letter-spacing: -.03em;
  margin: 0; color: var(--v42-navy);
}
.trip-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 13px; font-size: 13.5px; font-weight: 600; color: #6B7585; }
.trip-meta span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.trip-meta svg { width: 16px; height: 16px; color: var(--v42-gold); }
.trip-body p { margin: 14px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.55; color: var(--v42-slate); }
.trip-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.trip-chips span {
  padding: 7px 13px; border-radius: 999px;
  background: #F1F6FD;
  box-shadow: 0 9px 20px -10px rgba(10,22,44,.3), inset 0 0 0 1px rgba(71,82,97,.08);
  font-size: 12.5px; font-weight: 600; color: var(--v42-slate);
}
.trip-cta {
  margin-top: 22px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 800; font-size: 15px;
  color: var(--v42-golddeep);
}
.trip-cta svg { width: 20px; height: 12px; transition: transform .25s; }
.triprow:hover .trip-cta svg { transform: translateX(5px); }
@media (max-width: 760px) {
  .triprow { grid-template-columns: 1fr; }
  .triprow:nth-child(even) .trip-media { order: 0; }
  .trip-media { min-height: 230px; }
}

/* ------------------------------------------------------------
   7. SNAPBAND — clean "moments" gallery strip (injected by
   photo-sprinkle-v42.js). Flat, uniform, low-pop: a captioned
   header + an even row of images with a soft hover zoom.
   ------------------------------------------------------------ */
.snapband {
  padding: clamp(48px, 5.6vw, 88px) 0;
  background: #F6F1E9;
}
.snapband .wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.snapband-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: clamp(22px, 2.4vw, 32px); flex-wrap: wrap;
}
.snapband-head .se {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--f-display); font-weight: 700;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--v42-golddeep);
}
.snapband-head .se::before { content: ""; width: 28px; height: 3px; background: var(--v42-gold); }
.snapband-head h3 {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -.025em;
  color: var(--v42-navy); margin: 12px 0 0; line-height: 1;
}
.snapband-head .sn {
  font-size: 13.5px; font-weight: 600; color: #51698C; white-space: nowrap;
}
.snapgrid {
  column-count: 4;
  column-gap: clamp(11px, 1.1vw, 16px);
}
.snap {
  position: relative; margin: 0 0 clamp(11px, 1.1vw, 16px);
  border-radius: 16px; overflow: hidden;
  break-inside: avoid; display: block;
  box-shadow: 0 18px 40px -28px rgba(10,22,44,.45);
}
.snap img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.snap:nth-child(5n+1) img { aspect-ratio: 4 / 5; }
.snap:nth-child(5n+2) img { aspect-ratio: 4 / 3; }
.snap:nth-child(5n+3) img { aspect-ratio: 1 / 1; }
.snap:nth-child(5n+4) img { aspect-ratio: 5 / 4; }
.snap:nth-child(5n+5) img { aspect-ratio: 3 / 4; }
.snap:hover img { transform: scale(1.05); }
.snap figcaption {
  position: absolute; left: 12px; bottom: 11px; right: 12px;
  font-family: var(--f-display); font-weight: 700;
  font-size: 12.5px; letter-spacing: .01em; color: #fff;
  text-shadow: 0 2px 12px rgba(2,8,22,.7);
}
.snap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(4,12,28,.5) 0%, rgba(4,12,28,0) 42%);
}
@media (max-width: 900px) {
  .snapgrid { column-count: 3; }
}
@media (max-width: 620px) {
  .snapgrid { column-count: 2; }
}

/* ------------------------------------------------------------
   8. LESS 3D POP — flatter tour cards on the boat-tour listing
   pages (.tbcard / .tbfeat), calmer dark band glow.
   ------------------------------------------------------------ */
.tbcard {
  box-shadow: 0 18px 40px -28px rgba(10,22,44,.45) !important;
}
.tbcard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 26px 50px -30px rgba(10,22,44,.5) !important;
}
.tbfeat {
  min-height: clamp(380px, 40vw, 500px) !important;
  box-shadow: 0 30px 66px -46px rgba(2,8,22,.7) !important;
}
.tbfeat-cta, .tbcard-go { box-shadow: none !important; }
.tbfeat-cta {
  box-shadow: 0 12px 24px -14px rgba(201,163,90,.7) !important;
}

/* ------------------------------------------------------------
   9. TOURS HUB (.ttype) — image fills its column height to match
   the text beside it (absolute fill avoids the natural-height
   blow-up), and the "most booked" card tucks inside the photo.
   ------------------------------------------------------------ */
@media (min-width: 921px) {
  .ttype-media {
    position: relative !important;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    height: auto !important;
    overflow: hidden !important;
  }
  .ttype-media > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* keep the most-booked card tucked inside the image bottom */
  .ttype-feature { bottom: clamp(16px, 1.8vw, 24px) !important; }
}

/* ------------------------------------------------------------
   10. EVENTS — light-blue field behind the all-inclusive grid
   ------------------------------------------------------------ */
.ev-why { background: #F1F6FD !important; }
.ev-why .icon-row {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.ev-why .icon-row .it { background: #FFFFFF !important; }

/* ------------------------------------------------------------
   11. INDIVIDUAL EVENT PAGES — "About this occasion" + "Who tends
   to book this day" unified into one calm light-blue section.
   ------------------------------------------------------------ */
.ev-overview { background: #F1F6FD !important; }
.ev-overview .section-head { margin-bottom: clamp(30px, 3.4vw, 46px) !important; }
/* narrative + image */
.ev-overview .side .pic { border-radius: 16px !important; }
.ev-overview .side .quote-card {
  background: #fff !important; color: var(--v42-navy) !important;
  border: 0 !important; border-left: 3px solid var(--v42-gold) !important;
  border-radius: 16px !important; box-shadow: 0 18px 40px -28px rgba(10,22,44,.4) !important;
  font-family: var(--f-display) !important; font-style: italic !important; font-weight: 400 !important;
}
/* the "who tends to book" block — joined to the narrative, not a 2nd section */
.ev-overview .ev-whofor-inline {
  margin-top: clamp(34px, 3.6vw, 50px) !important;
  padding-top: clamp(32px, 3.4vw, 46px) !important;
  border-top: 1px solid rgba(16,40,72,.12) !important;
}
.ev-overview .ev-subhead {
  font-family: var(--f-display) !important; font-weight: 800 !important;
  font-size: clamp(21px, 2.1vw, 30px) !important; letter-spacing: -.025em !important;
  color: var(--v42-navy) !important; margin: 0 0 clamp(20px, 2.2vw, 28px) !important;
}
.ev-overview .ev-subhead em { font-style: italic !important; font-weight: 400 !important; color: var(--v42-golddeep) !important; }
.ev-overview .ev-whofor-inline .whofor-wrap .block ul {
  display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important; list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.ev-overview .ev-whofor-inline .whofor-wrap .block ul li {
  position: relative !important;
  display: flex !important; align-items: flex-start !important; gap: 14px !important;
  background: #fff !important; border: 1px solid rgba(16,40,72,.08) !important;
  border-radius: 16px !important; padding: 18px 20px 18px 50px !important; margin: 0 !important;
  font-size: 14.5px !important; line-height: 1.45 !important; color: var(--v42-slate) !important;
  box-shadow: 0 14px 30px -24px rgba(10,22,44,.34) !important;
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.ev-overview .ev-whofor-inline .whofor-wrap .block ul li:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 22px 44px -28px rgba(10,22,44,.42) !important;
}
.ev-overview .ev-whofor-inline .whofor-wrap .block ul li::before {
  content: "" !important; position: absolute !important; left: 16px !important; top: 18px !important;
  width: 22px !important; height: 22px !important; border-radius: 8px !important;
  background: var(--v42-gold) !important;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/></svg>") center / 64% no-repeat !important;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5z'/></svg>") center / 64% no-repeat !important;
}
@media (max-width: 640px) {
  .ev-overview .ev-whofor-inline .whofor-wrap .block ul { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------------
   12. UNIFIED CONTACT BAND (.tourcontact) — base structural rules
   ported here so the section is styled site-wide, even on pages
   that don't link tourpage-v39.css. Form-card visuals come from
   section 5 above; this provides the dark Adriatic band + left
   column + 2-col grid.
   ------------------------------------------------------------ */
.tourcontact { position: relative; overflow: hidden; padding: clamp(60px,7vw,106px) 0; color: #fff; isolation: isolate; }
.tourcontact .tc-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.tourcontact::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(118deg, rgba(6,16,34,.96) 0%, rgba(6,16,34,.88) 40%, rgba(8,24,50,.6) 78%, rgba(8,24,50,.42) 100%); }
.tourcontact .wrap { position: relative; z-index: 1; max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.tourcontact .tc-grid { display: grid; grid-template-columns: 1fr 1.04fr; gap: clamp(30px,4vw,64px); align-items: start; }
.tourcontact .tc-eyebrow { display: inline-flex; align-items: center; gap: 11px; font-family: var(--f-display); font-weight: 700; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #E4CB94; }
.tourcontact .tc-eyebrow::before { content: ""; width: 30px; height: 2px; background: #C9A35A; }
.tourcontact .tc-left h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(30px,3.8vw,52px); line-height: 1; letter-spacing: -.03em; margin: 16px 0 0; color: #fff; text-wrap: balance; }
.tourcontact .tc-left h2 em { font-style: italic; font-weight: 500; color: #E4CB94; }
.tourcontact .tc-left > p { margin: 16px 0 0; max-width: 46ch; font-size: clamp(15px,1.15vw,17px); line-height: 1.6; color: rgba(226,235,247,.82); }
.tourcontact .tc-advisor { display: flex; align-items: center; gap: 15px; margin: 28px 0 0; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); }
.tourcontact .tc-ava { position: relative; width: 58px; height: 58px; border-radius: 50%; flex: 0 0 auto; padding: 3px; background: linear-gradient(135deg,#C9A35A,#E4CB94); }
.tourcontact .tc-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #0A1E3C; }
.tourcontact .tc-ava .on { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #46d39a; border: 2.5px solid #0A1E3C; }
.tourcontact .tc-advisor strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: 17px; color: #fff; }
.tourcontact .tc-advisor .r { display: block; font-size: 13px; color: rgba(255,255,255,.62); margin-top: 2px; }
.tourcontact .tc-advisor .s { display: inline-flex; gap: 6px; align-items: center; margin-top: 5px; color: #E4CB94; font-size: 13px; font-weight: 700; }
.tourcontact .tc-advisor .s svg { width: 14px; height: 14px; }
.tourcontact .tc-methods { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.tourcontact .tc-method { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 12px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); text-decoration: none; color: #fff; transition: background .2s; }
.tourcontact a.tc-method:hover { background: rgba(255,255,255,.1); }
.tourcontact .tc-method .mi { width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(201,163,90,.16); color: #E4CB94; }
.tourcontact .tc-method .mi svg { width: 21px; height: 21px; }
.tourcontact .tc-method .mk { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); font-weight: 700; }
.tourcontact .tc-method .mv { display: block; font-family: var(--f-display); font-weight: 700; font-size: 15.5px; color: #fff; margin-top: 2px; }
.tourcontact .tc-boarding { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13.5px; color: rgba(226,235,247,.82); }
.tourcontact .tc-boarding svg { width: 18px; height: 18px; color: #E4CB94; flex: 0 0 auto; }
.tourcontact .tc-boarding b { color: #fff; font-weight: 700; }
.tourcontact .tc-form form { display: flex; flex-direction: column; gap: 13px; }
.tourcontact .tc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.tourcontact .tc-field { display: flex; flex-direction: column; gap: 6px; }
.tourcontact .tc-form select {
  -webkit-appearance: none; appearance: none;
  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='%239AA1AB' stroke-width='1.7'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 38px !important;
}
@media (max-width: 900px) {
  .tourcontact .tc-grid { grid-template-columns: 1fr; }
  .tourcontact .tc-row { grid-template-columns: 1fr; }
}

/* ===== polish-v43.css ===== */
/* ============================================================
   polish-v43.css  —  loads LAST
   1. Footer: gold column titles + mobile 2-col compact grid
   2. Subtle nautical line-art illustrations behind sections
   3. De-generic "bold" accent details
   url() paths are relative to THIS file (project root) so the
   same rules work for /pages/*, /hr/* and /hr/pages/* alike.
   ============================================================ */

:root {
  --ill-gold: #C19A4D;
  --ill-gold-2: #D9B871;
}

/* ============================================================
   1. FOOTER — gold two-line column titles
   ============================================================ */
.site-footer .footer-grid .col h4,
.site-footer .nap h4 {
  color: var(--ill-gold-2) !important;
  letter-spacing: .2em !important;
  font-weight: 800 !important;
  position: relative;
}

/* Mobile: index1-style compact 2-column link grid */
@media (max-width: 760px) {
  .site-footer { padding: 48px 0 26px !important; }
  .site-footer .wrap { padding-left: 18px !important; padding-right: 18px !important; }

  .site-footer .footer-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px !important;
    text-align: left;
    margin-bottom: 36px !important;
  }
  .site-footer .footer-cta .cta-row { width: 100%; display: flex; gap: 10px; }
  .site-footer .footer-cta .cta-row .btn { flex: 1; justify-content: center; padding: 14px 14px; }

  .site-footer .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 30px 22px !important;
    padding-bottom: 32px !important;
  }
  /* brand block spans both columns at the top */
  .site-footer .footer-grid .footer-brand { grid-column: 1 / -1; }
  /* the three link columns sit two-up; "Visit Us" napkin spans full width */
  .site-footer .footer-grid .nap { grid-column: 1 / -1; }

  .site-footer .footer-grid .col h4 { margin-bottom: 12px !important; font-size: 11px !important; }
  .site-footer .footer-grid .col ul { gap: 2px !important; }
  .site-footer .footer-grid .col ul a { font-size: 13.5px !important; padding: 4px 0 !important; }

  .site-footer .footer-brand .descriptor { font-size: 13.5px !important; max-width: 100% !important; }
  .site-footer .socials { margin-top: 20px !important; }
  .site-footer .legal-bar { gap: 12px !important; }
}

/* ============================================================
   2. NAUTICAL ILLUSTRATION BACKGROUNDS  (6–12% opacity)
   Applied via ::before/::after so they never block content.
   ============================================================ */

/* --- Footer: faint waves crowning the top edge + compass watermark --- */
.site-footer { position: relative; overflow: hidden; }
.site-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 150px;
  background: url(illustrations/waves-light.svg) repeat-x top center / auto 150px;
  opacity: .07;
  pointer-events: none;
  z-index: 0;
}
.site-footer::after {
  content: "";
  position: absolute; right: -120px; bottom: -120px;
  width: 460px; height: 460px;
  background: url(illustrations/compass.svg) no-repeat center / contain;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
.site-footer .wrap { position: relative; z-index: 1; }

/* --- Dark contact / conversion bands: compass watermark --- */
.contact-block-v2,
.faq-contact .combined-card,
.dt-tailor-banner,
.how-strip {
  position: relative;
  overflow: hidden;
}
.contact-block-v2 > *,
.faq-contact .combined-card > *,
.dt-tailor-banner > *,
.how-strip > * { position: relative; z-index: 1; }
.contact-block-v2::after,
.faq-contact .combined-card::after,
.dt-tailor-banner::after,
.how-strip::after {
  content: "";
  position: absolute; right: -100px; top: -90px;
  width: 380px; height: 380px;
  background: url(illustrations/compass.svg) no-repeat center / contain;
  opacity: .08;
  pointer-events: none;
  z-index: 0;
}

/* --- Light editorial sections: coastline contour in a corner --- */
.tours-intro,
.rab-intro,
.about-intro,
.charter-value,
.events-types {
  position: relative;
  overflow: hidden;
}
.tours-intro > .wrap,
.rab-intro > .wrap,
.about-intro > .wrap,
.charter-value > .wrap,
.events-types > .wrap { position: relative; z-index: 1; }
.tours-intro::before,
.rab-intro::before,
.about-intro::before,
.charter-value::before,
.events-types::before {
  content: "";
  position: absolute; left: -60px; bottom: 20px;
  width: 520px; height: 200px;
  background: url(illustrations/coastline-navy.svg) no-repeat left center / contain;
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}

/* --- Subhero: faint compass over the photo (adds brand texture) --- */
.subhero .bg::before {
  content: "";
  position: absolute; right: 4%; top: 16%;
  width: clamp(220px, 26vw, 420px); aspect-ratio: 1;
  background: url(illustrations/compass.svg) no-repeat center / contain;
  opacity: .14;
  pointer-events: none;
}
@media (max-width: 760px) {
  .subhero .bg::before { right: -8%; top: 9%; width: 200px; opacity: .12; }
}

/* ============================================================
   3. DE-GENERIC BOLD DETAILS
   ============================================================ */

/* Eyebrows get a gold tick + heavier tracking everywhere */
.h-eyebrow {
  color: var(--ill-gold) !important;
  font-weight: 800 !important;
  letter-spacing: .24em !important;
}
.h-eyebrow::before { background: var(--ill-gold) !important; height: 2px !important; width: 30px !important; }

/* Italic <em> accents in big headings lean on the gold serif feel */
.subhero h1 em,
.tour-hero h1 em,
.boat-hero h1 em { color: var(--ill-gold-2) !important; }

/* Section numbering corner flourish on intros for editorial rhythm */
.tours-intro .section-head,
.rab-intro .section-head { position: relative; }

/* Primary subhero CTA: solid gold for a confident, branded button */
.subhero .hero-ctas .btn-primary {
  background: var(--ill-gold) !important;
  border-color: var(--ill-gold) !important;
  color: #14202E !important;
  font-weight: 700 !important;
}
.subhero .hero-ctas .btn-primary:hover {
  background: var(--ill-gold-2) !important;
  border-color: var(--ill-gold-2) !important;
}

/* Stat-bar icons pick up gold (already sand) — make value heavier */
.subhero .stat-bar .stat .v { font-weight: 800 !important; }
.subhero .stat-bar .stat .ic { color: var(--ill-gold-2) !important; }

/* Top ribbon stars + rating: warm gold, slightly bolder */
.top-ribbon .rb-stars { color: var(--ill-gold-2) !important; }
.top-ribbon .rb-rating strong { font-weight: 800 !important; }

/* ===== revamp-v44.css ===== */
/* ============================================================
   revamp-v44.css  —  loads LAST (after polish-v43.css)
   1. Whole footer → two columns
   2. Kill remaining beige / warm backgrounds → light blue / white
   3. Soft, non-straight transitions between some sections
   ============================================================ */

:root { --lblue: #ECF3FC; --lblue-2: #DFEAF7; }

/* ============================================================
   1. FOOTER — desktop unchanged (original layout); two columns
   ONLY on mobile (handled in polish-v43.css). No rounded top.
   ============================================================ */
@media (max-width: 760px) {
  .site-footer .footer-grid { gap: 30px 22px !important; }
}

/* ============================================================
   2. NO BEIGE / BROWN / GOLD BACKGROUNDS — only light blue + white
   (gold stays only as a text / icon / line accent, never a fill)
   ============================================================ */
:root {
  --off: #ECF3FC !important;
  --sand-2: #DFEAF7 !important;
}
body { background: var(--lblue) !important; }

/* warm gradient & literal beige section fills → flat light blue */
.ct3,
.celebrate-v9,
.celebrate-v3,
.fleet-cats,
.services-v9,
.social-feed,
.gallery-strip,
.bt-faq,
.tourboats,
.tm-included,
.rbgal, .tourxfer, .tourgal {
  background: var(--lblue) !important;
}

/* tours-hub warm radial glow → cool blue glow */
.ttypes,
.tours-hub-v37,
[class*="tourshub"] {
  background:
    radial-gradient(120% 90% at 88% -8%, rgba(91,130,158,.10) 0%, rgba(91,130,158,0) 46%),
    var(--lblue) !important;
}

/* small warm icon tiles → cool blue tiles */
.cx16 .contact-info-card .ic { background: var(--lblue-2) !important; color: #2A6F93 !important; }

/* warm chip / pill fills → cool blue */
.tcardx-chips span,
.tb-meta span,
.xbold .tags span,
.ttype-chips span,
.boat-card .features span {
  background: var(--lblue) !important;
}

/* gold tile behind tours-hub stat icons → cool blue tile (icon stays gold) */
.ttype-stats li svg {
  background: rgba(91,130,158,.14) !important;
  color: #2A6F93 !important;
}

/* my own coastline illustration used navy on light — keep, but ensure
   no gold illustration fills sit on warm; all good (gold = line accent only) */

/* ============================================================
   3. SOFT SECTION TRANSITIONS — curved (not strict straight lines)
   Dark / accent bands rise over the lighter section above them with
   a gently curved top edge. Light page background shows in the curve.
   ============================================================ */
.ct3,
.faq-contact,
.how-strip,
.dt-tailor-banner,
.celebrate,
.yacht-charter {
  border-top-left-radius: clamp(30px, 5vw, 72px);
  border-top-right-radius: clamp(30px, 5vw, 72px);
  position: relative;
}

/* Footer keeps a straight top edge (no rounded corners). */

/* On smaller screens dial the curve radius down a touch */
@media (max-width: 600px) {
  .ct3, .faq-contact, .how-strip, .dt-tailor-banner,
  .celebrate, .yacht-charter {
    border-top-left-radius: 26px;
    border-top-right-radius: 26px;
  }
}

/* ============================================================
   4. EDITORIAL INTERLUDE — full-bleed photo + one short line.
   Refined: slow Ken-Burns drift, diagonal scrim for legibility,
   a gold hairline rule, and a centred editorial text column.
   ============================================================ */
.interlude {
  position: relative;
  min-height: clamp(360px, 46vw, 600px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: #0C2342;
  width: min(1400px, calc(100% - clamp(24px, 6vw, 80px)));
  margin: clamp(14px, 2.2vw, 34px) auto;
  border-radius: clamp(16px, 2.4vw, 34px);
  box-shadow: 0 34px 70px -44px rgba(12,35,66,.65);
}
/* inset gold hairline frame */
.interlude::before {
  content: "";
  position: absolute;
  inset: clamp(12px, 1.6vw, 22px);
  border: 1px solid rgba(217,184,113,.55);
  border-radius: clamp(8px, 1.6vw, 22px);
  z-index: 3;
  pointer-events: none;
}
.interlude > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  z-index: 0;
  transform: scale(1.06);
  animation: interludeDrift 22s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .interlude > img { animation: none; transform: none; }
}
@keyframes interludeDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -2%, 0); }
}
.interlude::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(8,24,46,.86) 0%, rgba(8,24,46,.52) 42%, rgba(8,24,46,.12) 72%, rgba(8,24,46,.30) 100%),
    linear-gradient(0deg, rgba(8,24,46,.45) 0%, rgba(8,24,46,0) 40%);
  z-index: 1;
}
.interlude .wrap {
  position: relative; z-index: 4;
  width: 100%; max-width: 1320px; margin: 0 auto;
  padding: clamp(40px, 6vw, 90px) clamp(34px, 5vw, 72px);
}
.interlude .ku {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--f-body);
  font-size: 12px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ill-gold-2, #D9B871);
  margin: 0 0 18px;
}
.interlude .ku::before { content: ""; width: 34px; height: 2px; background: currentColor; }
.interlude h2 {
  color: #fff;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.0;
  letter-spacing: -.035em;
  max-width: 16ch;
  margin: 0;
  text-wrap: balance;
}
.interlude h2 em {
  font-style: italic; font-weight: 400;
  color: var(--ill-gold-2, #D9B871);
}
.interlude p {
  color: rgba(255,255,255,.92);
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.55;
  max-width: 46ch;
  margin: 22px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(217,184,113,.5);
  font-weight: 500;
}
@media (max-width: 600px) {
  .interlude { min-height: 360px; align-items: flex-end; border-radius: 16px; }
  .interlude::before { inset: 10px; border-radius: 8px; }
  .interlude .wrap { padding: 32px 26px; }
  .interlude p { padding-top: 16px; margin-top: 16px; }
}

/* ============================================================
   6. HOMEPAGE — social section gets its own (navy) background
   so it reads distinctly from the light-blue FAQ band.
   ============================================================ */
.social-moments { background: #0C2342 !important; }
.social-moments .sm-head h2 { color: #fff !important; }
.social-moments .sm-head p { color: rgba(255,255,255,.82) !important; }
.social-moments .sm-handles { color: rgba(255,255,255,.66) !important; }
.social-moments .sm-handles a { color: var(--ill-gold-2, #D9B871) !important; }
.social-moments .sm-handles strong { color: #fff !important; }
.social-moments .sm-foot-cta .btn-outline {
  color: #fff !important;
  border-color: rgba(255,255,255,.6) !important;
}
.social-moments .sm-foot-cta .btn-outline:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: #fff !important;
}
.social-moments .sm-note { color: rgba(255,255,255,.6) !important; }

/* ============================================================
   5. UI BUG FIXES
   ============================================================ */
/* "Send enquiry" arrow ballooned on pages where tourpage-v39.css
   wasn't loaded (inline SVG had no intrinsic size). Constrain it
   everywhere. */
.tc-submit svg {
  width: 20px !important;
  height: 12px !important;
  flex: 0 0 auto !important;
}
.tc-micro svg,
.tc-form-head .seal svg {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto !important;
}

/* ============================================================
   7. KILL REMAINING WARM (beige / tan / gold) FILLS sitewide.
   Gold stays only as text / line / icon-stroke accent, never a
   background fill. Soft gold tiles → cool blue; brown dots/badges
   → navy/blue.
   ============================================================ */
/* soft brass/gold icon tiles → cool blue tile (icon stroke unchanged) */
.txf-step .txf-ic,
.tc-method .mi,
.rb2 .rb2-method .mi,
.rentbook-method .mi,
.rentbook-method2 .mi {
  background: rgba(159,185,214,.16) !important;
}
/* gold-tinted "featured / not-included" surfaces → cool neutral */
.charter-trip.is-featured,
.duration-card.featured .best-for {
  background: rgba(91,130,158,.10) !important;
  border-color: rgba(91,130,158,.4) !important;
}
.tm-included .tm-incl-col.no li svg,
.tm-included .onepriceband-lists .opl.no h4 svg {
  background: rgba(91,130,158,.16) !important;
  color: #5B829E !important;
}
/* brown (--sand #9F8F6E) solid fills → navy/blue */
.ev-enquiry .reassure .item .ic {
  background: rgba(159,185,214,.18) !important;
  color: #9FB9D6 !important;
}
.ev-experience .block ul li::before,
.itin-item::before { background: var(--mid, #5B829E) !important; }
.duration-card .pop-tag,
.ws-card .img .tag.included,
.tours-split .split-card .meta-tag {
  background: var(--slate, #2C3744) !important;
  color: #fff !important;
}
/* timeline rail dot ring colour */
.itin-item::before { box-shadow: 0 0 0 1px var(--mid, #5B829E) !important; }

/* ============================================================
   8. PRIMARY BUTTONS — global gold fill (.btn-primary from
   redesign-v10) is a sitewide gold background. Neutralise to the
   navy brand colour on light surfaces; white on dark surfaces.
   Gold remains only as text / line / icon accents.
   ============================================================ */
.btn-primary {
  background: var(--slate, #2C3744) !important;
  border-color: var(--slate, #2C3744) !important;
  color: #fff !important;
}
.btn-primary:hover {
  background: #1B242E !important;
  border-color: #1B242E !important;
}
/* on dark/photographic surfaces a navy button would vanish → white */
.hero .hero-ctas .btn-primary,
.subhero .hero-ctas .btn-primary,
.site-footer .btn-primary,
.ct3 .btn-primary,
.faq-contact .btn-primary,
.dt-tailor .btn-primary,
.dt-tailor-banner .btn-primary,
.how-strip .btn-primary,
.crewx .btn-primary,
.interlude .btn-primary,
.celebrate .btn-primary,
.yacht-charter .btn-primary {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--slate, #2C3744) !important;
}
.hero .hero-ctas .btn-primary:hover,
.subhero .hero-ctas .btn-primary:hover,
.site-footer .btn-primary:hover,
.ct3 .btn-primary:hover,
.dt-tailor .btn-primary:hover,
.how-strip .btn-primary:hover,
.interlude .btn-primary:hover {
  background: var(--lblue, #ECF3FC) !important;
  border-color: var(--lblue, #ECF3FC) !important;
  color: var(--slate, #2C3744) !important;
}

/* ============================================================
   EVENT DETAIL PAGES — full-bleed image hero (no flat colour band),
   drop the eyebrow label, and merge About + Who-it's-for into one
   simpler section.
   ============================================================ */
/* hero becomes one full-bleed photo with the copy overlaid */
.event-hero { padding-top: 0 !important; background: #0C2342 !important; }
.event-hero .eh-wrap {
  position: relative !important; display: block !important;
  min-height: clamp(540px, 76vh, 740px) !important;
}
.event-hero .eh-img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; min-height: 0 !important;
}
.event-hero .eh-img::after {
  content: "" !important; position: absolute !important; inset: 0 !important;
  background: linear-gradient(96deg, rgba(8,18,34,.9) 0%, rgba(8,18,34,.62) 44%, rgba(8,18,34,.28) 74%, rgba(8,18,34,.5) 100%) !important;
}
.event-hero .eh-body {
  position: relative !important; z-index: 2 !important;
  background: transparent !important;
  max-width: 1200px !important; margin: 0 auto !important; width: 100% !important;
  justify-content: flex-end !important;
  padding: clamp(150px, 18vh, 210px) clamp(22px, 5vw, 64px) clamp(46px, 7vh, 76px) !important;
}
.event-hero .eh-body > * { max-width: 760px; }
/* drop the "Most-booked / Bespoke / Sunset slot" eyebrow label */
.event-hero .label { display: none !important; }
@media (max-width: 1000px) {
  .event-hero .eh-wrap { min-height: clamp(460px, 70vh, 620px) !important; }
  .event-hero .eh-body { padding: clamp(120px,16vh,150px) 22px 40px !important; }
}

/* About + Who-it's-for read as ONE section: no divider, modest subhead */
.ev-overview .ev-whofor-inline {
  margin-top: clamp(22px, 2.6vw, 34px) !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
.ev-overview .ev-subhead {
  font-family: var(--f-display) !important; font-weight: 800 !important;
  font-size: clamp(14px, 1.3vw, 17px) !important; letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--slate-3, #6B7585) !important;
  margin: 0 0 clamp(14px, 1.6vw, 20px) !important;
}
.ev-overview .ev-subhead em { font-style: normal; color: var(--brass, #C19A4D); }

/* ============================================================
   MOBILE / TABLET — tighter gutters so elements use more width,
   safer card stacking, and gentle on-load motion (reduced-motion safe)
   ============================================================ */
@media (max-width: 1024px) {
  :root { --gutter: 20px; }
  .wrap { padding-left: var(--gutter, 20px); padding-right: var(--gutter, 20px); }
}
@media (max-width: 600px) {
  :root { --gutter: 15px !important; }
  .wrap { padding-left: 15px !important; padding-right: 15px !important; }
  /* common two-up blocks collapse so each card takes the full width */
  .xfull-eu, .opwb-grid, .binc-grid, .bfleet-grid, .vehfleet .bfleet-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: no-preference) {
  /* staggered entrance for hero copy — ends fully visible, JS-free */
  .subhero .wrap > *,
  .event-hero .eh-body > * { animation: rvUp .7s cubic-bezier(.2,.7,.2,1) both; }
  .subhero .wrap > *:nth-child(2),
  .event-hero .eh-body > *:nth-child(2) { animation-delay: .06s; }
  .subhero .wrap > *:nth-child(3),
  .event-hero .eh-body > *:nth-child(3) { animation-delay: .12s; }
  .subhero .wrap > *:nth-child(4),
  .event-hero .eh-body > *:nth-child(4) { animation-delay: .18s; }
  .subhero .wrap > *:nth-child(5) { animation-delay: .24s; }
  @keyframes rvUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}


/* ============================================================
   HERO TRUST BADGES — bigger, sit right next to each other,
   no divider line above (overrides legacy pages-v6 .hero-trust)
   ============================================================ */
.hero-trust{display:flex !important;align-items:center !important;gap:6px !important;margin-top:24px !important;border-top:0 !important;padding-top:0 !important;grid-template-columns:none !important;}
.hero-trust img{height:84px !important;width:auto !important;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4));}
.hero-trust .ht-bm{height:74px !important;}
@media(max-width:600px){.hero-trust{gap:4px !important;margin-top:20px !important;}.hero-trust img{height:64px !important;}.hero-trust .ht-bm{height:56px !important;}}

/* ===== mobile-fill-v45.css ===== */
/* ============================================================
   MOBILE FILL v45
   Optimise small phones (320–375px, with a softer tier up to 480px):
   - shrink the outer page gutter so sections/cards sit nearer the edge
   - shrink inner horizontal padding on nested card/panel bodies so
     content fills the width regardless of how deeply it is nested
   - tighten grid/flex gaps between collapsed cards

   Loaded LAST on every page. Selectors are prefixed with `html` so they
   out-specify (and beat in source order) the page-level <style> blocks
   that live in <body> and use !important.
   ============================================================ */

/* ---------- SOFT TIER: ≤ 480px (390 / 393 / 430 phones too) ---------- */
@media (max-width: 480px) {
  :root { --gutter: 11px !important; }

  /* Outer page gutter — sections & cards move toward the screen edge */
  html .wrap {
    padding-left: 11px !important;
    padding-right: 11px !important;
    max-width: 100% !important;
  }

  /* Nested card / panel BODIES — trim side padding so text fills width.
     Catches the project's naming conventions: .body, .bd and anything
     ending in -body / -bd (single- or multi-class). */
  html .body,
  html .bd,
  html [class$="-body"], html [class*="-body "],
  html [class$="-bd"],   html [class*="-bd "],
  html .content,
  /* directly-padded text panels / cards */
  html .aw-card, html .at-card, html .rab-type,
  html .tbveh, html .tbwhy-card, html .bwhy-card, html .tbpass-top,
  html .value-card, html .team-card .body,
  html .contact-form-card, html .contact-info-card,
  html .specs-table, html .boat-equip,
  html .quote-card, html .ev-overview .side .quote-card,
  html .tm-incl-col, html .ws-included-note,
  html .celebrate-cell .content, html .cv3-events-body,
  html .trust-bar-v2 .trust-stat, html .charter-value .vp,
  html .included-band .icon-row .it,
  html .incl-v13 .incl-features,
  html .bt-inc-list, html .cf-card .body, html .ws-card .body,
  html .ws-svc .body, html .at-card, html .event-card .body,
  html .tour-listing-card > .body, html .boat-card .body,
  html .fleet-teaser .ft-card .body, html .addons-teaser .at-card {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Tighten gaps between stacked cards/grids so they don't waste space */
  html .why-grid, html .bwhy-grid, html .bfleet-grid,
  html .binc-grid, html .opwb-grid, html .at-grid, html .rel-grid,
  html .cv3-grid, html .duration-grid, html .contact-grid {
    gap: 14px !important;
  }
}

/* ---------- TIGHT TIER: ≤ 375px (320–375 target range) ---------- */
@media (max-width: 375px) {
  :root { --gutter: 8px !important; }

  html .wrap {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  html .body,
  html .bd,
  html [class$="-body"], html [class*="-body "],
  html [class$="-bd"],   html [class*="-bd "],
  html .content,
  html .aw-card, html .at-card, html .rab-type,
  html .tbveh, html .tbwhy-card, html .bwhy-card, html .tbpass-top,
  html .value-card, html .team-card .body,
  html .contact-form-card, html .contact-info-card,
  html .specs-table, html .boat-equip,
  html .quote-card, html .ev-overview .side .quote-card,
  html .tm-incl-col, html .ws-included-note,
  html .celebrate-cell .content, html .cv3-events-body,
  html .trust-bar-v2 .trust-stat, html .charter-value .vp,
  html .included-band .icon-row .it,
  html .incl-v13 .incl-features,
  html .bt-inc-list, html .cf-card .body, html .ws-card .body,
  html .ws-svc .body, html .event-card .body,
  html .tour-listing-card > .body, html .boat-card .body,
  html .fleet-teaser .ft-card .body, html .addons-teaser .at-card {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  html .why-grid, html .bwhy-grid, html .bfleet-grid,
  html .binc-grid, html .opwb-grid, html .at-grid, html .rel-grid,
  html .cv3-grid, html .duration-grid, html .contact-grid {
    gap: 12px !important;
  }
}

/* ===== mobile-fill-v46.css ===== */
/* ============================================================
   MOBILE FILL v46  —  small-screen fit & centering
   Builds on mobile-fill-v45. Loaded last.

   A. Contact / "Check availability" forms: stop the ~7–17px
      right-edge bleed at ≤375px. Cause = date/number inputs keep a
      browser-default min-width, forcing the single grid track wider
      than its container. Fix: min-width:0 so tracks/controls shrink,
      plus tighter form padding on phones.
   B. Horizontal scroll rails (tour / review carousels): centre the
      focused card so the slider reads as centred on mobile.
   C. iOS input-zoom guard: 16px form fields.
   D. Extra-small gutter tier (≤360px) + long-word safety.
   ============================================================ */

/* ---------- A. CONTACT / ENQUIRY FORMS — fit the width ---------- */
@media (max-width: 600px) {
  /* allow every track / field / control to shrink below content min-width */
  html .tc-grid, html .tc-row, html .tc-field, html .tc-left,
  html .tc-form, html .tc-methods, html .tc-method, html .tc-advisor,
  html .ycc-grid, html .ycc-row, html .ycc-field, html .ycc-form,
  html .rb2-grid, html .rb2-row, html .rb2-field, html .rb2-form,
  html .formcard, html .contact-form-card, html .contact-grid,
  html .contact-block-v2, html .faq-contact .combined-card {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* form controls: shrinkable + 16px to stop iOS focus-zoom */
  html input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  html select,
  html textarea {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 16px !important;
  }

  /* trim the generous form-card padding so fields fill the narrow width */
  html .tc-form, html .ycc-form, html .rb2-form,
  html .formcard, html .contact-form-card {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* long unbroken strings (emails) must not force width */
  html .tc-method, html .tc-method .mv, html .tc-methods,
  html .tc-boarding, html .tc-advisor,
  html .contact-info-card .body, html .contact-info-card a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 375px) {
  html .tc-form, html .ycc-form, html .rb2-form,
  html .formcard, html .contact-form-card {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---------- B. SCROLL RAILS — centre the focused card ---------- */
@media (max-width: 760px) {
  html .featured .ftx16-card,
  html .featured .ftx16-grid > *,
  html .proof-cards .proof-card,
  html .proof-cards > *,
  html .tours-grid > *, html .tm-examples-grid > *,
  html .blog-feed-grid > *, html .tour-grid > *,
  html .service-grid > *,
  html .bx-rail > * {
    scroll-snap-align: center !important;
  }

  html .featured .ftx16-grid,
  html .proof-cards,
  html .tours-grid, html .tm-examples-grid,
  html .blog-feed-grid, html .tour-grid, html .service-grid,
  html .bx-rail {
    scroll-padding-left: var(--gutter, 12px) !important;
    scroll-padding-right: var(--gutter, 12px) !important;
  }
}

/* ---------- C/D. EXTRA-SMALL TIER + word safety (≤360px) ---------- */
@media (max-width: 360px) {
  :root { --gutter: 6px !important; }
  html .wrap { padding-left: 6px !important; padding-right: 6px !important; }
}

@media (max-width: 480px) {
  /* never let a single long word push the layout wider than the screen */
  html h1, html h2, html h3 { overflow-wrap: break-word; }
}

/* ===== mobile-fill-v47.css ===== */
/* ============================================================
   MOBILE FILL v47  —  blog-card redesign + type & nesting polish
   Loaded last. Builds on v45 / v46.

   A. Blog cards become a clean horizontal LIST on phones (thumbnail
      left, text right), and the blog feed stops being a side-scroller
      so an index of articles scrolls vertically like a list should.
   B. Type polish: balanced/pretty wrapping, a small minimum size so
      nothing is unreadable, smooth scaling on the blog card title.
   C. Nesting: trim a few more nested wrappers so content fills width.
   ============================================================ */

/* ---------- A. BLOG CARDS — horizontal list on phones ---------- */
@media (max-width: 600px) {
  /* feed = vertical list, not a horizontal carousel */
  html .blog-feed-grid, html .blog-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html .blog-feed-grid::after,
  html .blog-grid::after { content: none !important; display: none !important; }

  /* the card itself — a finished surface (bg, hairline, soft shadow) */
  html .blog-card {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid rgba(16,44,84,.10) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 0 rgba(16,44,84,.04), 0 18px 34px -26px rgba(10,22,44,.45) !important;
    scroll-snap-align: none !important;
  }

  /* thumbnail — full-bleed on the left, fills the card height.
     High-specificity selectors beat redesign-v21's `aspect-ratio:4/5 !important`. */
  html .blog-feed-grid .blog-card > .img,
  html .blog-grid .blog-card > .img,
  html .grid > .blog-card > .img,
  html .blog-card > .img {
    flex: 0 0 38% !important;
    width: auto !important;
    max-width: 140px !important;
    aspect-ratio: auto !important;
    height: auto !important;
    align-self: stretch !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
  }
  html .blog-card > .img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }

  /* text column — vertically centred beside the thumbnail */
  html .blog-card .bc-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 15px !important;
  }
  html .blog-card .cat { margin: 0 !important; font-size: 10px !important; letter-spacing: .14em !important; }
  html .blog-card h3 {
    margin: 7px 0 0 !important;
    font-size: clamp(15px, 4.4vw, 17.5px) !important;
    line-height: 1.22 !important;
    letter-spacing: -.012em !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  html .blog-card .excerpt {
    margin: 7px 0 0 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* foot row: meta on the left, circular "read" arrow on the right */
  html .blog-card .bc-foot {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 11px !important;
  }
  html .blog-card .meta { margin: 0 !important; font-size: 11px !important; }
  html .blog-card .bc-arrow {
    flex: 0 0 auto;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #eef3f9; color: #102C54;
    transition: transform .25s ease, background .25s ease;
  }
  html .blog-card .bc-arrow svg { width: 13px; height: 13px; }
  html .blog-card:active { transform: scale(.992); }
  html .blog-card:active .bc-arrow { background: #102C54; color: #fff; }
}

/* very small phones: tighten the thumbnail, drop excerpt to stay compact */
@media (max-width: 360px) {
  html .blog-card > .img { flex-basis: 36% !important; max-width: 116px !important; }
  html .blog-card .excerpt { display: none !important; }
  html .blog-card .bc-body { padding: 12px 13px !important; }
}

/* the arrow only belongs in the mobile horizontal layout */
html .bc-arrow { display: none; }
@media (max-width: 600px) { html .blog-card .bc-arrow { display: inline-flex; } }

/* ---------- B. TYPE POLISH (safe, scoped to phones) ---------- */
@media (max-width: 600px) {
  /* nicer line breaks for headings/paragraphs */
  html h1, html h2, html h3, html h4 { text-wrap: balance; }
  html p, html li { text-wrap: pretty; }
  /* readability floor — nothing below 11px on a phone */
  html small, html .meta, html .sub, html .eyebrow,
  html .cat, html label { font-size: max(11px, 1em); }
}

/* ---------- C. NESTING — fill more width on phones ---------- */
@media (max-width: 480px) {
  /* a few more nested text wrappers trimmed so they reach the edges */
  html .post-body, html .article-body, html .legal-body,
  html .answer, html .faq-item .answer,
  html .bt-q, html .info-card, html .price-card {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}
@media (max-width: 375px) {
  html .post-body, html .article-body, html .legal-body,
  html .bt-q, html .info-card, html .price-card {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
}

/* ---------- D. HERO sections — stretch closer to the edge too ----------
   Hero content wraps use a `padding` shorthand (e.g. 86px 16px 28px) at a
   higher specificity than the global gutter rule, so they kept ~16–18px
   sides. Override just the horizontal padding (keep the top spacing that
   clears the fixed header). Slightly roomier than body sections so the
   large hero type isn't flush against the glass. */
@media (max-width: 480px) {
  html .subhero .wrap, html .hero .hero-inner,
  html .event-hero .eh-body, html .tbhero .wrap, html .proband .wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 375px) {
  html .subhero .wrap, html .hero .hero-inner,
  html .event-hero .eh-body, html .tbhero .wrap, html .proband .wrap {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }
}

/* ---------- E. CHARTER BAND (homepage) — match the site gutter ----------
   .charter-band .wrap hardcodes `padding: … clamp(20px,4vw,64px)` so its
   sides stayed ~20px on phones, wider than every other section. Override
   the horizontal padding only (keep the vertical rhythm). */
@media (max-width: 480px) {
  html .charter-band .wrap { padding-left: 11px !important; padding-right: 11px !important; }
}
@media (max-width: 375px) {
  html .charter-band .wrap { padding-left: 8px !important; padding-right: 8px !important; }
}
@media (max-width: 360px) {
  html .charter-band .wrap { padding-left: 6px !important; padding-right: 6px !important; }
}

/* ===== mobile-motion-v48.css ===== */
/* ============================================================
   MOBILE MOTION v48  —  tasteful scroll-driven card motion
   Mobile & tablet only (≤1024px), gated on reduced-motion and on
   native CSS scroll-driven-animation support (Chromium / most Android).
   Where unsupported (e.g. iOS Safari) the site's existing JS scroll
   reveal handles entrances, so nothing is lost.

   One light touch, "here and there" — not on every card: cards rise +
   scale up from slightly behind, settling into place as they scroll in,
   so groups of cards read as assembling/stacking into view.
   ============================================================ */

@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {

    /* ---- scroll-driven entrance: cards assemble as they enter ---- */
    .blog-feed-grid .blog-card,
    .svc-grid-v13 .svc-tile,
    .dtw-card,
    .yc-grid .yc-card,
    .charter-fleet .ycard,
    .events-grid .event-card,
    .tourboats-grid .tourboat {
      animation: v48CardIn linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 26%;
      transform-origin: 50% 90%;
      will-change: transform, opacity;
    }
    @keyframes v48CardIn {
      from { opacity: 0; transform: translateY(42px) scale(.93); }
      to   { opacity: 1; transform: none; }
    }

    /* keep the JS reveal from double-hiding the same nodes on Chromium */
    .has-fx .blog-feed-grid .blog-card.fx-reveal,
    .has-fx .svc-grid-v13 .svc-tile.fx-reveal,
    .has-fx .yc-grid .yc-card.fx-reveal,
    .has-fx .charter-fleet .ycard.fx-reveal {
      opacity: 1;
    }
  }
}

/* ===== mobile-fill-v50.css ===== */
/* ============================================================
   MOBILE FILL v50  —  included-section fix, section breathing room,
   bigger mobile navbar + lower header content.  Loaded last.
   ============================================================ */

/* ---------- 0. ALL CARDS — a gentle baseline shadow (all viewports) ----
   Low specificity so cards with their own (stronger) shadows keep them;
   flat cards pick up a subtle lift. Plus a soft shadow on chips/pills. */
.route-card, .preview, .rel, .at-card, .daycard, .blog-card, .post-card,
.team-card, .value-card, .yc-card, .yacht-card, .cat-card, .ws-card,
.rec-card, .info-card, .price-card, .related-card, .reltrip, .ft-card,
.tour-card, .land-veh, .review-card, .feature-card, .stat-card,
.tcardx, .kindx, .tourx, .evx, .blog-feature {
  box-shadow: 0 16px 36px -26px rgba(16,44,84,.42), 0 2px 5px rgba(16,44,84,.05);
}
.trip-chips span, .duel .duel-tag, .incl-col .tag, .bfleet-spec span,
.tm-incl-col .tag, .key-facts .kf, .chip, .tag-pill {
  box-shadow: 0 6px 14px -8px rgba(16,44,84,.4);
}


/* ---------- A. "WHAT IS INCLUDED" (individual boat) — mobile fix ----------
   The .incl-layout grid never collapsed on phones: the inline base rule
   `grid-template-columns: .82fr 1.18fr !important` kept the photo and the
   feature list squished side-by-side (~141px + ~202px). Collapse to a
   single column and give the photo a sensible height + the feature grid
   two readable columns. */
@media (max-width: 760px) {
  html .incl-v13 .incl-layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  html .incl-v13 .incl-photo {
    position: static !important;
    min-height: 220px !important;
    height: 220px !important;
  }
  html .incl-v13 .incl-features {
    grid-template-columns: 1fr 1fr !important;
    padding: 20px 18px !important;
    gap: 0 22px !important;
  }
  /* last two cells lose their divider on a 2-col grid */
  html .incl-v13 .incl-features .incl-feat:nth-last-child(-n+2) {
    border-bottom: none !important;
  }
}
/* very small phones: one feature per row so the text never wraps oddly */
@media (max-width: 440px) {
  html .incl-v13 .incl-features { grid-template-columns: 1fr !important; }
  html .incl-v13 .incl-features .incl-feat:nth-last-child(-n+2) {
    border-bottom: 1px solid rgba(71,82,97,.08) !important;
  }
  html .incl-v13 .incl-features .incl-feat:last-child { border-bottom: none !important; }
}

/* ---------- B. SECTION BREATHING ROOM — a little more top/bottom ----------
   Content sections were ~42px top/bottom on phones, which read crowded.
   Bump to a calmer rhythm. Heroes, the contact band, the charter band and
   the footer keep their own spacing. */
@media (max-width: 760px) {
  html body section:not([class*="hero"]):not(.subhero):not(.boat-gallery-top):not(.charter-band):not(.tourcontact):not(.site-footer):not(.footer-cta) {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

/* ---------- C. MOBILE NAVBAR — slightly bigger logo & bar ---------- */
@media (max-width: 760px) {
  html body .site-header { height: 66px !important; }
  html body .brand img.mark { width: 36px !important; }
  html body .brand .brand-text { font-size: 14.5px !important; }
  html body .brand .brand-text small { font-size: 9.5px !important; }
}

/* ---------- D. HEADER CONTENT — push headings/sub/CTA lower (mobile) ----
   Per feedback the hero text block + CTA sat too high. Hero content is
   top-flowed, so extra top padding moves the whole block (eyebrow, h1,
   sub and buttons) down, also clearing the taller navbar. */
@media (max-width: 760px) {
  html body .hero .hero-inner {
    padding-top: 120px !important;
  }
  html body .subhero .wrap {
    padding-top: 118px !important;
  }
  html body .tour-hero {
    padding-top: 124px !important;
  }
}
@media (max-width: 420px) {
  html body .hero .hero-inner { padding-top: 112px !important; }
  html body .subhero .wrap { padding-top: 110px !important; }
}

/* ---------- E. HOMEPAGE HERO — more space between heading, sub, badges
   and CTAs so the buttons sit lower with room to breathe (mobile). ---- */
@media (max-width: 760px) {
  html body .hero .hero-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
  html body .hero .hero-content h1 { margin: 0 0 0 !important; }
  html body .hero .hero-content .hero-sub { margin-top: 22px !important; margin-bottom: 0 !important; }
  html body .hero .hero-content .hero-trust { margin: 32px 0 0 !important; }
  html body .hero .hero-content .hero-ctas { margin: 60px 0 0 !important; }
}
@media (max-width: 420px) {
  html body .hero .hero-content .hero-sub { margin-top: 18px !important; }
  html body .hero .hero-content .hero-trust { margin-top: 26px !important; }
  html body .hero .hero-content .hero-ctas { margin-top: 48px !important; }
}

/* ---------- F. MOBILE — let cards stack full-width here & there (not
   everywhere — a calmer single-column rhythm on small phones) and a
   gentle entrance so the stacking feels intentional. ---------- */
@media (max-width: 560px) {
  html .routes-grid, html .rel-grid, html .at-grid, html .daysplit,
  html .tm-examples-grid, html .bfleet-grid, html .yc-grid,
  html .xborder-grid, html .vt-driver .dispo, html .duel-grid {
    grid-template-columns: 1fr !important;
  }
  /* a touch of staggered inset so stacked cards read 'here and there'
     (kept under 100% width so nothing overflows the viewport) */
  html .routes-grid > *, html .rel-grid > *, html .tm-examples-grid > * {
    width: 94%;
  }
  html .routes-grid > *:nth-child(even),
  html .rel-grid > *:nth-child(even),
  html .tm-examples-grid > *:nth-child(even) { justify-self: end; }
  html .routes-grid > *:nth-child(odd),
  html .rel-grid > *:nth-child(odd),
  html .tm-examples-grid > *:nth-child(odd) { justify-self: start; }
}

/* ===== event-v51.css ===== */
/* ============================================================
   event-v51.css — Individual event pages, round of refinements
   Loads LAST. Builds on redesign-v35.css.

   1. Overview + "who tends to book" — tighter, one coherent
      block, with distinct icons per card.
   2. "How the day unfolds" — proper connected timeline.
   ============================================================ */

/* ---------- 1. OVERVIEW — smaller, unified with "who books" ---------- */
.ev-overview { padding: clamp(50px, 5vw, 78px) 0 !important; }
.ev-overview .section-head { margin-bottom: clamp(28px, 3vw, 40px) !important; }
.ev-overview .body p { font-size: clamp(15.5px, 1.25vw, 17.5px) !important; line-height: 1.62 !important; }
.ev-overview .side .pic { min-height: clamp(300px, 32vw, 400px) !important; }

/* join "who tends to book" to the narrative as one calm block */
.ev-overview .ev-whofor-inline {
  margin-top: clamp(30px, 3.2vw, 44px) !important;
  padding-top: clamp(26px, 2.8vw, 38px) !important;
  border-top: 1px solid var(--v35-line, rgba(71,82,97,.16)) !important;
}
.ev-overview .ev-subhead {
  font-size: clamp(16px, 1.5vw, 20px) !important; font-weight: 800 !important;
  letter-spacing: -.01em !important; margin: 0 0 clamp(16px, 1.8vw, 22px) !important;
  display: flex; align-items: center; gap: 11px;
}
.ev-overview .ev-subhead::before {
  content: ""; flex: 0 0 auto; width: 24px; height: 3px; border-radius: 2px;
  background: var(--v35-brass, #C19A4D);
}
/* compact cards: 4 across on desktop, tighter padding */
.ev-overview .ev-whofor-inline .whofor-wrap .block ul {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
}
.ev-overview .ev-whofor-inline .whofor-wrap .block ul li {
  flex-direction: column !important; align-items: flex-start !important;
  gap: 12px !important; padding: 18px 18px 20px !important;
  font-size: 14px !important; line-height: 1.45 !important;
}
.ev-overview .ev-whofor-inline .whofor-wrap .block ul li::before {
  width: 40px !important; height: 40px !important; border-radius: 12px !important;
  background-size: 22px 22px !important;
}
/* distinct icon per card */
.ev-overview .ev-whofor-inline .whofor-wrap .block ul li:nth-child(1)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23C19A4D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><path d='M2.8 20v-1a6 6 0 0 1 12 0v1'/><circle cx='17.6' cy='9' r='2.4'/><path d='M16.4 20v-1a4.2 4.2 0 0 1 5-3.6'/></svg>") !important;
}
.ev-overview .ev-whofor-inline .whofor-wrap .block ul li:nth-child(2)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23C19A4D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21v-1a4 4 0 0 1 4-4h2a4 4 0 0 1 4 4v1'/><circle cx='8' cy='7' r='3'/><path d='M15.5 21v-1a3.5 3.5 0 0 1 3.5-3.5h.5a3 3 0 0 1 3 3v1.5'/><circle cx='18.5' cy='8.5' r='2.4'/><circle cx='13.5' cy='12' r='1.6'/></svg>") !important;
}
.ev-overview .ev-whofor-inline .whofor-wrap .block ul li:nth-child(3)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23C19A4D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l2.5 5 5.5.8-4 3.9 1 5.5L12 16.5 7 18.2l1-5.5-4-3.9 5.5-.8z'/></svg>") !important;
}
.ev-overview .ev-whofor-inline .whofor-wrap .block ul li:nth-child(4)::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23C19A4D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M5 21l2.2-8.5h9.6L19 21z'/><path d='M9 12.5V8a3 3 0 0 1 6 0v4.5'/><path d='M12 3.5v1.5'/></svg>") !important;
}
@media (max-width: 900px) {
  .ev-overview .ev-whofor-inline .whofor-wrap .block ul { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 520px) {
  .ev-overview .ev-whofor-inline .whofor-wrap .block ul { grid-template-columns: 1fr !important; }
  .ev-overview .ev-whofor-inline .whofor-wrap .block ul li { flex-direction: row !important; align-items: center !important; }
}

/* ---------- 2. "HOW THE DAY UNFOLDS" — connected timeline ---------- */
.ev-program { padding: clamp(52px, 5.5vw, 84px) 0 !important; }
.ev-program .program-wrap { max-width: 880px; margin: 0 auto; }
.ev-program .program-wrap .block {
  background: #fff !important; border: 1px solid var(--v35-line, rgba(71,82,97,.16)) !important;
  border-radius: 22px !important; padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 42px) !important;
  box-shadow: 0 24px 54px -40px rgba(16,44,84,.45) !important;
}
.ev-program .program-wrap .block > h3 {
  display: flex !important; align-items: center; gap: 12px;
  font-family: var(--f-display) !important; font-weight: 800 !important;
  font-size: clamp(19px, 1.7vw, 24px) !important; letter-spacing: -.02em !important;
  margin: 0 0 6px !important; padding-bottom: clamp(18px,2vw,24px) !important;
  border-bottom: 1px solid var(--v35-line, rgba(71,82,97,.16)) !important;
}
.ev-program .program-wrap .block > h3 svg { width: 26px; height: 26px; color: var(--v35-brass, #C19A4D); flex: 0 0 auto; }
.ev-program .program-wrap .block > h3 .ex-tag {
  margin-left: auto; font-family: var(--f-text, inherit); font-weight: 700;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--v35-brass, #C19A4D); background: rgba(193,154,77,.12);
  padding: 6px 12px; border-radius: 999px;
}
.ev-program ul.timeline {
  list-style: none !important; margin: clamp(20px,2.4vw,28px) 0 0 !important; padding: 0 !important;
  position: relative;
}
.ev-program ul.timeline li {
  position: relative !important; display: grid !important;
  grid-template-columns: 78px 1fr !important; gap: 22px !important;
  padding: 0 0 clamp(22px, 2.4vw, 30px) !important; margin: 0 !important;
}
/* the connecting line + node */
.ev-program ul.timeline li::before {
  content: ""; position: absolute; left: 88px; top: 22px; bottom: -2px;
  width: 2px; background: var(--v35-line, rgba(71,82,97,.18));
}
.ev-program ul.timeline li:last-child { padding-bottom: 0 !important; }
.ev-program ul.timeline li:last-child::before { display: none; }
.ev-program ul.timeline li::after {
  content: ""; position: absolute; left: 83px; top: 7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--v35-brass, #C19A4D);
  box-shadow: 0 0 0 4px rgba(193,154,77,.12);
}
.ev-program ul.timeline li .t {
  grid-column: 1; align-self: start; text-align: right;
  font-family: var(--f-display) !important; font-weight: 800 !important;
  font-size: 14px !important; letter-spacing: -.01em !important;
  color: var(--v35-slate, #2C3744) !important; padding-top: 2px;
  white-space: nowrap;
}
.ev-program ul.timeline li > div { grid-column: 2; padding-left: 14px; }
.ev-program ul.timeline li strong {
  display: block; font-size: clamp(15.5px, 1.3vw, 17px) !important; letter-spacing: -.01em;
  color: var(--v35-slate, #2C3744) !important; margin-bottom: 4px;
}
.ev-program ul.timeline li small {
  display: block; font-size: 13.5px !important; line-height: 1.55 !important;
  color: var(--slate-2, #475261) !important;
}
@media (max-width: 560px) {
  .ev-program ul.timeline li { grid-template-columns: 58px 1fr !important; gap: 14px !important; }
  .ev-program ul.timeline li::before { left: 66px; }
  .ev-program ul.timeline li::after { left: 61px; }
  .ev-program ul.timeline li > div { padding-left: 10px; }
}

/* ===== mobile-fill-v54.css ===== */
/* ============================================================
   MOBILE FILL v54  —  NESTED-GUTTER TRIM (tablet + mobile)
   Loaded last on every page.

   Goal: on tablet and phone widths, content sits inside several
   nested padded wrappers (page .wrap gutter → section panel →
   card → card body). Those paddings STACK and squeeze content into
   a narrow centre column. Here we trim the *inner* horizontal
   padding of the commonly-nested wrappers so elements reclaim width.

   Scope: HORIZONTAL padding only (padding-left / padding-right).
   Vertical rhythm (top/bottom padding) is left untouched so the
   card heights and section breathing room stay as designed.
   ============================================================ */

/* ----------------------------------------------------------------
   The nested wrappers we trim. These are content/body panels that
   carry their own side padding on top of the page gutter:
     .body / .bc-body / .content  — card content areas (site-wide)
     .info-side / .faq-side       — the FAQ contact split panels
     overlay & info cards         — text inset over an image/surface
     text & detail panels         — answers, post/legal/article body,
                                     spec/include columns, price cards
   Each breakpoint repeats the list with a tighter side value.
   ---------------------------------------------------------------- */

/* ---------- TABLET  (≤ 1024px) ---------- */
@media (max-width: 1024px) {
  html .body, html .bc-body, html .content,
  html .info-side, html .faq-side,
  html .info-card, html .price-card, html .related-card,
  html .rel, html .preview, html .value-card, html .review-card,
  html .feature-card, html .stat-card, html .land-veh, html .yc-card,
  html .rec-card, html .svc-card-v9,
  html .incl-col, html .tm-incl-col, html .key-facts, html .duel,
  html .post-body, html .article-body, html .legal-body,
  html .answer, html .faq-item .answer, html .bt-q {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ---------- SMALL TABLET  (≤ 768px) ---------- */
@media (max-width: 768px) {
  html .body, html .bc-body, html .content,
  html .info-side, html .faq-side,
  html .info-card, html .price-card, html .related-card,
  html .rel, html .preview, html .value-card, html .review-card,
  html .feature-card, html .stat-card, html .land-veh, html .yc-card,
  html .rec-card, html .svc-card-v9,
  html .incl-col, html .tm-incl-col, html .key-facts, html .duel,
  html .post-body, html .article-body, html .legal-body,
  html .answer, html .faq-item .answer, html .bt-q {
    padding-left: 17px !important;
    padding-right: 17px !important;
  }
}

/* ---------- LARGE PHONE  (≤ 600px) ---------- */
@media (max-width: 600px) {
  html .body, html .bc-body, html .content,
  html .info-side, html .faq-side,
  html .info-card, html .price-card, html .related-card,
  html .rel, html .preview, html .value-card, html .review-card,
  html .feature-card, html .stat-card, html .land-veh, html .yc-card,
  html .rec-card, html .svc-card-v9,
  html .incl-col, html .tm-incl-col, html .key-facts, html .duel,
  html .post-body, html .article-body, html .legal-body,
  html .answer, html .faq-item .answer, html .bt-q {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* ---------- PHONE  (≤ 480px) ---------- */
@media (max-width: 480px) {
  html .body, html .bc-body, html .content,
  html .info-side, html .faq-side,
  html .info-card, html .price-card, html .related-card,
  html .rel, html .preview, html .value-card, html .review-card,
  html .feature-card, html .stat-card, html .land-veh, html .yc-card,
  html .rec-card, html .svc-card-v9,
  html .incl-col, html .tm-incl-col, html .key-facts, html .duel,
  html .post-body, html .article-body, html .legal-body,
  html .answer, html .faq-item .answer, html .bt-q {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ---------- SMALL PHONE  (≤ 375px) ---------- */
@media (max-width: 375px) {
  html .body, html .bc-body, html .content,
  html .info-side, html .faq-side,
  html .info-card, html .price-card, html .related-card,
  html .rel, html .preview, html .value-card, html .review-card,
  html .feature-card, html .stat-card, html .land-veh, html .yc-card,
  html .rec-card, html .svc-card-v9,
  html .incl-col, html .tm-incl-col, html .key-facts, html .duel,
  html .post-body, html .article-body, html .legal-body,
  html .answer, html .faq-item .answer, html .bt-q {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ============================================================
   TAILOR-MADE "BUILD YOUR TRIP" / CONTACT SECTION — mobile fit
   The .tm-form-shell wrapper uses padding: clamp(40px,5vw,64px),
   so on phones it kept a hefty 40px inner inset on every side —
   stacked on top of the page gutter that left the form fields and
   the dark contact side-card squeezed into a narrow centre strip.
   Trim the shell inset, tighten the column gap, make the contact
   card and submit button sit comfortably full-width on small screens.
   (Shell collapses to one column at ≤1000px already.)
   ============================================================ */
@media (max-width: 1000px) {
  html .tm-form-shell { padding: 30px !important; gap: 30px !important; }
  /* Root-cause fix for the narrow-phone overflow: grid/flex items default to
     min-width:auto and refuse to shrink below their content's intrinsic size,
     so the inputs ran past the shell's right padding. Let them collapse to the
     available track width. */
  html .tm-form, html .tm-form .field-group,
  html .tm-form .row-2, html .tm-form .row-3 { min-width: 0 !important; }
  html .tm-form input, html .tm-form select, html .tm-form textarea {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  /* "Destinations you'd like to include", "Interests", "Your pace" —
     these inner grids/flex rows also defaulted to min-width:auto, so their
     items (e.g. "Pelješac wine country") refused to shrink and pushed past
     the shell edge. Let the containers AND items collapse, and wrap text. */
  html .tm-form .check-grid, html .tm-form .chip-set,
  html .tm-form .pace-row { min-width: 0 !important; }
  html .tm-form .check, html .tm-form .chip, html .tm-form .pace {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 760px) {
  html .tm-form-shell { padding: 22px 18px !important; gap: 24px !important; }
  html .tm-form { gap: 22px !important; }
}
@media (max-width: 600px) {
  html .tm-form-shell { padding: 18px 14px !important; gap: 22px !important; }
  html .tm-form-shell .side-card { padding: 22px 18px !important; }
  /* submit row: button goes full-width, helper note sits beneath it */
  html .tm-form .submit-bar { gap: 12px !important; }
  html .tm-form .submit-bar button { width: 100% !important; justify-content: center !important; }
  html .tm-form .submit-bar .note { flex: 1 0 100% !important; text-align: center !important; }
  /* pace options stack so each reads on one line */
  html .tm-form .pace-row { flex-direction: column !important; }
  html .tm-form .pace { width: 100% !important; }
}
@media (max-width: 420px) {
  html .tm-form-shell { padding: 15px 11px !important; }
  html .tm-form-shell .side-card { padding: 20px 15px !important; }
}

/* ============================================================
   TAILOR-MADE CALLOUT BANDS (.dt-tailor on day-trips & elsewhere)
   The overlay copy keeps clamp(36px,5vw,72px) padding and a row of
   CTAs that don't wrap gracefully on phones. Trim the inset, stack
   the buttons full-width, and let the copy reach more width.
   ============================================================ */
@media (max-width: 760px) {
  html .dt-tailor-copy { padding: 30px 22px !important; max-width: 100% !important; }
  html .dt-tailor-copy p { font-size: 15.5px !important; }
}
@media (max-width: 600px) {
  html .dt-tailor-copy { padding: 26px 16px !important; }
  html .dt-tailor-ctas { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; }
  html .dt-tailor-ctas .btn { width: 100% !important; justify-content: center !important; }
  html .dt-tailor-ctas .alt { text-align: center !important; }
}
@media (max-width: 420px) {
  html .dt-tailor-copy { padding: 22px 13px !important; }
}

/* ===== interactive-v55.css ===== */
/* ============================================================
   INTERACTIVE v55  —  richer micro-interactions site-wide +
   stronger card / section stacking on tablet & mobile.
   Loaded last. Fully gated on prefers-reduced-motion and print,
   so nothing moves for users who opt out or when printing.

   A. TOUCH PRESS FEEDBACK — cards, chips and buttons dip slightly
      when tapped, so the whole site feels responsive under a finger.
   B. HOVER LIFT — on real pointer devices, cards rise on hover.
      Declared with :where() (zero specificity) so any element that
      already has its own hover treatment keeps it untouched.
   C. STRONGER STACKING — on tablet & phone widths the scroll-reveal
      cards and sections travel a little further, so groups read as
      assembling / stacking into place more clearly.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- A. TOUCH / PRESS FEEDBACK ---------- */
  .route-card, .preview, .at-card, .daycard, .blog-card, .tour-listing-card,
  .tcardx, .tourx, .kindx, .evx, .event-card, .yc-card, .yacht-card, .ws-card,
  .ws-svc, .cf-card, .ft-card, .tm-example, .vh-card, .related-card, .rel,
  .value-card, .team-card, .review-card, .transfer-card, .cat-card,
  .fleet-card-sec, .svc-card-v9, .duration-card, .info-card, .price-card,
  .contact-line, .duel, .boat-card, .cboat {
    transition: transform .45s cubic-bezier(.2,.7,.2,1),
                box-shadow .45s cubic-bezier(.2,.7,.2,1);
  }
  .route-card:active, .preview:active, .at-card:active, .daycard:active,
  .blog-card:active, .tour-listing-card:active, .tcardx:active, .tourx:active,
  .kindx:active, .evx:active, .event-card:active, .yc-card:active,
  .yacht-card:active, .ws-card:active, .ws-svc:active, .cf-card:active,
  .ft-card:active, .tm-example:active, .vh-card:active, .related-card:active,
  .rel:active, .value-card:active, .team-card:active, .review-card:active,
  .transfer-card:active, .cat-card:active, .fleet-card-sec:active,
  .svc-card-v9:active, .duration-card:active, .info-card:active,
  .price-card:active, .contact-line:active, .boat-card:active, .cboat:active {
    transform: scale(.984);
  }
  /* small tappables get a crisper press */
  .chip:active, .check:active, .pace:active, .faq-item summary:active,
  .btn:active, button:active, .header-cta:active, .mm-cta:active {
    transform: scale(.96);
  }

  /* ---------- B. HOVER LIFT (real pointer devices only) ----------
     :where() keeps specificity at 0 so a card with its own :hover wins. */
  @media (hover: hover) and (pointer: fine) {
    :where(.route-card, .preview, .at-card, .daycard, .tour-listing-card,
      .tcardx, .tourx, .kindx, .evx, .event-card, .yc-card, .yacht-card,
      .ws-card, .ws-svc, .cf-card, .ft-card, .tm-example, .vh-card,
      .related-card, .value-card, .team-card, .review-card, .transfer-card,
      .cat-card, .fleet-card-sec, .svc-card-v9, .duration-card,
      .info-card, .price-card, .boat-card, .cboat):hover {
      transform: translateY(-6px);
      box-shadow: 0 34px 60px -32px rgba(16,44,84,.5), 0 4px 10px rgba(16,44,84,.06);
    }
    /* contact rows nudge toward you on hover */
    :where(.contact-line):hover { transform: translateX(3px); }
  }

  /* ---------- C. STRONGER STACKING ON TABLET & MOBILE ----------
     Override the JS-injected reveal transforms with a longer travel so
     the assemble/stack reads more clearly on smaller screens. */
  @media (max-width: 1024px) {
    html.has-fx .fx-reveal { transform: translate3d(0,40px,0) scale(.98); }
    html.has-fx .fx-reveal.fx-stack { transform: translate3d(0,64px,0) scale(.9); }
    html.has-fx .fx-reveal.fx-from-left { transform: translate3d(-34px,26px,0) scale(.985); }
    html.has-fx .fx-reveal.fx-from-right { transform: translate3d(34px,26px,0) scale(.985); }
    html.has-fx .fx-sec { transform: translate3d(0,46px,0); }
    html.has-fx .fx-reveal.fx-in,
    html.has-fx .fx-sec.fx-in { transform: none; }
  }
}

@media print {
  .fx-reveal, .fx-sec { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   MOBILE BURGER MENU — smoother open, scroll-locked, polished.
   The drawer previously snapped open via display:none→flex (no
   transition) and left the page behind it scrollable. Make it
   slide + fade, lock the body scroll, enlarge the close target,
   add press feedback, and stagger the items in.
   These structural bits run regardless of motion preference; only
   the slide/stagger is gated on reduced-motion.
   ============================================================ */
/* lock the page behind the open drawer */
html:has(.mobile-menu.is-open) { overflow: hidden; }

.mobile-menu {
  display: flex !important;          /* always laid out so it can transition */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(7%);
  transition: opacity .3s ease,
              transform .44s cubic-bezier(.2,.8,.2,1),
              visibility .3s;
  padding-top: max(74px, env(safe-area-inset-top));
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  gap: 1px;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu { transition: opacity .15s linear, visibility .15s; transform: none; }
}

/* bigger, friendlier close button */
.mobile-menu .mm-close {
  top: 16px; right: 16px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  transition: background .2s ease, transform .2s ease;
}
.mobile-menu .mm-close:active { background: rgba(255,255,255,.2); transform: scale(.9); }
/* press feedback on rows */
.mobile-menu a:active { opacity: .6; }
.mobile-menu .mm-section > .mm-toggle:active { opacity: .6; }

/* staggered entrance of the menu items */
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu .mm-flat, .mobile-menu .mm-section,
  .mobile-menu .mm-cta, .mobile-menu .mm-langs, .mobile-menu .mm-contact {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  }
  .mobile-menu.is-open .mm-flat, .mobile-menu.is-open .mm-section,
  .mobile-menu.is-open .mm-cta, .mobile-menu.is-open .mm-langs,
  .mobile-menu.is-open .mm-contact { opacity: 1; transform: none; }
  .mobile-menu.is-open > :nth-child(2)  { transition-delay: .04s; }
  .mobile-menu.is-open > :nth-child(3)  { transition-delay: .075s; }
  .mobile-menu.is-open > :nth-child(4)  { transition-delay: .11s; }
  .mobile-menu.is-open > :nth-child(5)  { transition-delay: .145s; }
  .mobile-menu.is-open > :nth-child(6)  { transition-delay: .18s; }
  .mobile-menu.is-open > :nth-child(7)  { transition-delay: .215s; }
  .mobile-menu.is-open > :nth-child(8)  { transition-delay: .25s; }
  .mobile-menu.is-open > :nth-child(9)  { transition-delay: .285s; }
  .mobile-menu.is-open > :nth-child(10) { transition-delay: .32s; }
  .mobile-menu.is-open > :nth-child(11) { transition-delay: .355s; }
  .mobile-menu.is-open > :nth-child(12) { transition-delay: .39s; }
  .mobile-menu.is-open > :nth-child(13) { transition-delay: .425s; }
}

/* ===== custom-2026.css ===== */
/* ============================================================
   custom-2026.css  —  TOP-LAYER OVERRIDE (load LAST)
   One revertible file. Delete this <link> + the Spectral/Hanken
   <link> to restore the previous look. Touches no accumulated CSS.
   Implements teardown items T-02,03,04,05,06,09,10 + chrome cuts.
   ============================================================ */

/* ----------------------------------------------------------------
   T-10 · REVERTED on request — fonts restored to the site originals:
   Archivo (display) + Manrope (body), as defined in styles.css :root.
   Every other rule in this file uses var(--f-display/--f-body), so
   they all resolve back to the old fonts automatically. The injected
   Spectral/Hanken <link> tags are now unreferenced (browser won't
   fetch them), so they're harmless to leave.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   T-02 · Kill the eyebrow label (— UPPERCASE LETTERSPACED)
   Every known variant across EN + HR.
   ---------------------------------------------------------------- */
.h-eyebrow,
.crewx-eyebrow,.tx16-eyebrow,.me-eyebrow,.proof-eyebrow,.sm-eyebrow,
.rec-eyebrow,.tc-eyebrow,.beyebrow,.vbf-eyebrow,
.addons-v51-head .eyebrow,
.tb-head .h-eyebrow,.duel-head .h-eyebrow{
  display:none !important;
}
/* reclaim the space the eyebrow used to push down */
.section-head h2,.boat-split h2,.tb-head h2,.duel-head h2,
.ba-intro h2,.faq-wrap h2,.layout h2,.cv9-head h2{ margin-top:0 !important; }

/* ----------------------------------------------------------------
   T-03 · Break the rigid "heading-left / lead-right" section header
   Collapse to a calmer stacked editorial entrance, left-aligned.
   ---------------------------------------------------------------- */
.section-head,
.cv9-head,
.charter-band .intro,
.tx16-head,
.i1-head{
  display:block !important;
  max-width:none !important;
  margin-bottom:clamp(34px,4vw,52px) !important;
}
.section-head > div,.cv9-head > div,.i1-head > div{ max-width:22ch; }
.section-head .lead,
.cv9-head .lead,
.charter-band .intro p,
.tx16-lead,
.i1-head .lead{
  margin-top:18px !important;
  max-width:54ch !important;
  font-size:clamp(18px,1.5vw,20px) !important;
  color:var(--slate-2,#475261) !important;
}
/* the homepage hero band heads read better centred-left and bigger */
.tx16-head h2,.me-head h2{ max-width:18ch; }

/* ----------------------------------------------------------------
   T-04 · Trust the photography
   Remove the uniform hover-lift + gold ring; soften the blanket scrim.
   ---------------------------------------------------------------- */
.svc-tile:hover,.ftx16-card:hover,.tx16-card:hover,.i1-dt:hover,
.cat-card:hover,.yacht-card:hover,.tour-listing-card:hover,
.i1-ev:hover,.reltrip:hover,.route-card:hover,.proof-plat:hover,
.g-tall:hover,.gallery-grid figure:hover{
  transform:none !important;
  box-shadow:0 24px 50px -34px rgba(16,30,54,.42) !important;
}
.svc-tile:hover{ box-shadow:0 28px 56px -34px rgba(16,30,54,.5) !important; }
/* gentler image zoom instead of the 1.08 lurch */
.svc-tile:hover img,.ftx16-card:hover img,.tx16-card:hover img,
.i1-dt:hover img,.cat-card:hover img,.tour-listing-card:hover img{
  transform:scale(1.035) !important;
}
/* lighten the murky bottom-third gradient so the Adriatic light survives */
.ftx16-scrim,.tx16-scrim{
  background:linear-gradient(to top, rgba(11,21,38,.62), rgba(11,21,38,.06) 58%, transparent) !important;
}

/* ----------------------------------------------------------------
   T-05 · Pills, balanced — keep the useful ones, quiet them all,
   drop the redundant service-tile chips.
   ---------------------------------------------------------------- */
/* refined, typographic pill: hairline, no heavy fill */
.stops .pill,.tour-listing-card .pill,.boat-split .pill,
.spec-pills span,.incl-pills span{
  background:transparent !important;
  border:1px solid rgba(71,82,97,.26) !important;
  color:var(--slate-2,#475261) !important;
  font-size:11.5px !important;
  letter-spacing:.04em !important;
  padding:5px 11px !important;
  font-weight:500 !important;
}
/* the homepage service-tile chips just repeat the description — cut them */
.svc-chips{ display:none !important; }

/* ----------------------------------------------------------------
   T-06 · The "View →" link, redesigned
   Quiet text + draw-on-hover underline + arrow that slides.
   Card is the real target, so the link is an affordance, not a button.
   ---------------------------------------------------------------- */
.cta-lk,.cat-link,.yc-view,.i1-dt-go,.tx16-go,.link-arrow,
.ftx16-btn,.me-cta,.gallery-foot .btn-outline{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.5em !important;
  background:none !important;
  border:0 !important;
  padding:0 !important;
  font-family:var(--f-body) !important;
  font-weight:600 !important;
  font-size:14px !important;
  letter-spacing:.005em !important;
  color:var(--slate,#2C3744) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  box-shadow:none !important;
}
/* the underline rule */
.cta-lk::after,.cat-link::after,.yc-view::after,.i1-dt-go::after,
.tx16-go::after,.link-arrow::after,.ftx16-btn::after{
  content:"" !important;
  position:absolute; left:0; bottom:-4px;
  width:100%; height:1.5px;
  background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
/* draw the underline + nudge the arrow when the card (or link) is hovered */
a:hover .cta-lk::after,a:hover .cat-link::after,a:hover .yc-view::after,
a:hover .i1-dt-go::after,a:hover .tx16-go::after,a:hover .ftx16-btn::after,
.cta-lk:hover::after,.cat-link:hover::after,.link-arrow:hover::after{
  transform:scaleX(1);
}
.cta-lk svg,.cat-link svg,.yc-view svg,.i1-dt-go svg,.tx16-go svg,
.link-arrow svg,.ftx16-btn svg{
  transition:transform .4s cubic-bezier(.2,.8,.2,1) !important;
}
a:hover .cta-lk svg,a:hover .cat-link svg,a:hover .yc-view svg,
a:hover .i1-dt-go svg,a:hover .tx16-go svg,a:hover .ftx16-btn svg,
.cta-lk:hover svg,.cat-link:hover svg,.link-arrow:hover svg{
  transform:translateX(5px) !important;
}

/* ----------------------------------------------------------------
   T-09 · Drop the decorative 01–08 tile numerals everywhere
   ---------------------------------------------------------------- */
.svc-num,.svc-tile .svc-num{ display:none !important; }

/* ----------------------------------------------------------------
   GLOBAL CHROME · cut the top ribbon (duplicates the header/footer)
   Revert by deleting this file. The phone/WhatsApp it held already
   live in the header and the sticky FAB.
   ---------------------------------------------------------------- */
.top-ribbon{ display:none !important; }

/* NAVBAR GLITCH FIX — the ribbon is gone (T-01), but pages-v4.css still
   pushes the header down 40px to clear it (`.site-header{ top:40px !important }`,
   plus 36/32px variants). That left a transparent strip at the top of every
   page that the content scrolled through. Re-pin the navbar flush to the top
   at every breakpoint (this file loads last, so it wins the !important race). */
.site-header{ top:0 !important; }
@media (max-width:880px){ .site-header{ top:0 !important; } }
@media (max-width:560px){ .site-header{ top:0 !important; } }
/* anchor jumps were offset for header + ribbon (~96px); header alone is 68px */
html{ scroll-padding-top:84px !important; }

/* presence only once the header is solid — no stray 1px hairline floating
   over the hero image while the navbar is still transparent */
.site-header.is-solid{ box-shadow:0 1px 0 rgba(28,46,58,.08); }

/* ----------------------------------------------------------------
   EVENTS · warmer, more editorial captions (most emotional product)
   Lift the gradient caption off the image; let the headline breathe.
   ---------------------------------------------------------------- */
.i1-ev-cap{
  background:linear-gradient(to top, rgba(10,18,30,.78), rgba(10,18,30,.12) 62%, transparent) !important;
}
.i1-ev-cap .lab{ font-family:var(--f-display) !important; font-style:normal !important; letter-spacing:-.01em !important; }
.ev-incl-head h2 em,.events h1 em,.event-hero h1 em{ color:var(--sand,#D9B86A) !important; }

/* ----------------------------------------------------------------
   PROOF / REVIEWS · fewer stars, more voice
   Quiet the repeated rating chrome; let the quote lead.
   ---------------------------------------------------------------- */
.proof blockquote,.pf-body blockquote,.proof-card blockquote{
  font-family:var(--f-display) !important;
  font-weight:400 !important;
  font-style:normal !important;
  letter-spacing:-.005em !important;
  line-height:1.4 !important;
}
.pf-mark{ font-family:var(--f-display) !important; }

/* ----------------------------------------------------------------
   FLEET · calmer cards, refined spec type
   ---------------------------------------------------------------- */
.yc-specs b,.cat-specs strong{ font-family:var(--f-body) !important; }
.cat-count,.yc-tag,.duration-tag,.feat-ribbon{
  font-family:var(--f-body) !important; letter-spacing:.02em !important;
}

/* ----------------------------------------------------------------
   Subhero headlines (sub-pages) — let the serif scale up
   ---------------------------------------------------------------- */
.subhero h1{ letter-spacing:-.012em !important; line-height:1.0 !important; }
.subhero .sub{ font-family:var(--f-body) !important; }

/* ================================================================
   PATCH — follow-up asks (events redesign, proof, chrome).
   Re-targets the REAL class names found on events.html / reviews.html
   that the first pass guessed wrong, so the redesign actually lands.
   ================================================================ */

/* --- PROOF / REVIEWS, for real (T-07 spirit: fewer stars, more voice) ---
   The written-review + homepage testimonial cards are .testi, not .proof-card.
   Let the Spectral quote lead; mute the repeated gold stars instead of
   five bright ones shouting on every card. */
.testi blockquote,.rev-text .testi p,.testimonials .testi blockquote{
  font-family:var(--f-display) !important;
  font-weight:400 !important;
  font-style:normal !important;
  letter-spacing:-.005em !important;
  line-height:1.42 !important;
}
.testi .stars{ opacity:.85 !important; color:#C39B49 !important; }
.testi .stars svg{ width:14px !important; height:14px !important; }

/* --- EVENTS occasion cards — the CTA is .evx-lk (give it the T-06 link) --- */
.evx-lk,.ev-incl .link-arrow,.ecx-lead + .ev-link{
  position:relative !important;
  display:inline-flex !important; align-items:center !important; gap:.5em !important;
  background:none !important; border:0 !important; padding:0 !important;
  font-family:var(--f-body) !important; font-weight:600 !important;
  font-size:14px !important; letter-spacing:.005em !important;
}
.evx-lk::after{
  content:"" !important; position:absolute; left:0; bottom:-4px;
  width:100%; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.evx:hover .evx-lk::after{ transform:scaleX(1); }
.evx-lk svg{ transition:transform .4s cubic-bezier(.2,.8,.2,1) !important; }
.evx:hover .evx-lk svg{ transform:translateX(5px) !important; }
/* occasion card headings ride the serif like the rest of the site */
.evx h3,.ev-why h2,.events-types h2,.evx-cta h3{ font-family:var(--f-display) !important; }

/* --- GLOBAL CHROME · footer · calm the uppercase-letterspaced heading tell ---
   Same tell we killed in the eyebrows; soften it here for consistency. */
.footer-grid .col h4{
  letter-spacing:.1em !important;
  font-size:11px !important;
  color:rgba(255,255,255,.5) !important;
  font-weight:600 !important;
}
.site-footer .footer-grid{ row-gap:38px; }
/* the footer wordmark can take the display serif — it reads as a sign-off */
.footer-brand .brand-text{ font-family:var(--f-display) !important; letter-spacing:-.01em !important; }
.footer-brand .brand-text small{ font-family:var(--f-body) !important; }

/* ================================================================
   STICKY OFFSET FIXES — these bars were offset for the OLD chrome
   height: fixed header (68px) + top-ribbon (40px) ≈ 108px. With the
   ribbon removed (T-01), the navbar is just 68px tall, so anything
   pinned with top < 68px now slides UNDER the navbar instead of
   sticking below it. Re-seat the broken ones just under the navbar.
   (Sidebars already at top:90–110px still clear the navbar fine, so
   they're left as-is.)
   ================================================================ */
/* rent-a-boat filter bar — was top:60px → tucked under the navbar */
.rab-filters{ top:76px !important; }
/* fleet-spec sticky table header — was top:0 → hidden under the navbar */
.fleetspec-table thead th{ top:76px !important; }

/* ================================================================
   EVENT PAGES — overview trim, "Who is it for", itinerary block,
   and pills/chips (solid fills + drop shadow, no glass / gradient)
   ================================================================ */

/* --- First section: balanced now that copy is shorter --- */
.ev-overview .layout{ align-items:center; }
.ev-overview .body p{ font-size:17.5px !important; line-height:1.7 !important; max-width:48ch !important; }
.ev-overview .side .pic{ aspect-ratio:4/3.3 !important; }

/* --- "Who is it for" — solid white cards, soft drop shadow (no flat cream) --- */
.ev-whofor-inline .ev-subhead{ font-size:clamp(22px,2.2vw,30px); }
.ev-whofor-inline .whofor-wrap{ margin-top:26px; }
.ev-whofor-inline .whofor-wrap .block ul{ gap:16px; }
.ev-whofor-inline .whofor-wrap .block ul li{
  background:#fff !important;
  border:1px solid rgba(16,44,84,.10) !important;
  border-radius:8px !important;
  box-shadow:0 16px 34px -22px rgba(16,44,84,.5), 0 3px 8px -4px rgba(16,44,84,.16) !important;
  padding:20px 22px !important;
  font-size:15.5px !important;
}
.ev-whofor-inline .whofor-wrap .block ul li:hover{
  transform:translateY(-3px);
  border-color:rgba(193,154,77,.55) !important;
  box-shadow:0 24px 44px -22px rgba(16,44,84,.55), 0 5px 12px -5px rgba(16,44,84,.2) !important;
}
.ev-whofor-inline .whofor-wrap .block ul li::before{
  box-shadow:0 8px 16px -9px rgba(16,44,84,.5);
}

/* --- "Day itinerary example" — bigger, wider timeline block --- */
.ev-program .program-wrap{ margin-top:34px; }
.ev-program .program-wrap .block{
  padding:clamp(30px,3.6vw,54px) clamp(28px,4vw,58px) !important;
  border-radius:8px !important;
  border:1px solid rgba(16,44,84,.08) !important;
  box-shadow:0 30px 64px -38px rgba(16,44,84,.55) !important;
}
.ev-program .program-wrap .block > h3{ font-size:clamp(20px,2vw,24px) !important; margin-bottom:26px; padding-bottom:20px; }
.ev-program .program-wrap .block > h3 svg{ width:28px; height:28px; }
.ev-program .program-wrap .timeline li{ grid-template-columns:120px 1fr !important; gap:30px !important; padding:22px 0 !important; }
.ev-program .program-wrap .timeline .t{ font-size:16px !important; }
.ev-program .program-wrap .timeline strong{ font-size:18.5px !important; margin-bottom:5px !important; }
.ev-program .program-wrap .timeline small{ font-size:15px !important; line-height:1.65 !important; }
@media(max-width:540px){ .ev-program .program-wrap .timeline li{ grid-template-columns:84px 1fr !important; gap:16px !important; } }

/* --- Pills & chips: solid fills + drop shadow, no glass / gradient --- */
.event-hero .label{
  background:var(--brass,#C19A4D) !important;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.55) !important;
}
.ex-tag{
  background:var(--warm-tint,#FBF3E8) !important;
  color:var(--warm-strong,#9A7A30) !important;
  border-radius:8px !important;
  box-shadow:0 8px 18px -10px rgba(16,44,84,.45) !important;
}
.event-hero .key-facts{
  background:rgba(8,18,36,.78) !important;
  box-shadow:0 22px 46px -26px rgba(0,0,0,.6) !important;
}
.tm-incl-col .rates{ box-shadow:0 16px 34px -24px rgba(16,44,84,.4) !important; }

/* ================================================================
   EVENT PAGES — round 2: hero spacing, overview empty space,
   "Who is it for" with icons, real-cost list + Vary-by-vessel
   ================================================================ */

/* --- Hero: tighter, less empty space --- */
.event-hero .eh-body{ padding-top:clamp(80px,8.5vw,102px) !important; padding-bottom:46px !important; }
.event-hero .key-facts{ margin-top:28px !important; }
.event-hero .hero-trust{ margin-top:24px !important; }
.event-hero .eh-ctas{ margin-top:26px !important; }

/* --- Overview first section: balanced, no dead space (drop the echo pull-quote) --- */
.ev-overview{ padding:clamp(48px,5vw,74px) 0 !important; }
.ev-overview .layout{ align-items:center !important; gap:clamp(32px,4vw,56px) !important; }
.ev-overview .body{ display:flex !important; flex-direction:column; justify-content:center; }
.ev-overview .body p{ font-size:18.5px !important; line-height:1.78 !important; max-width:46ch !important; }
.ev-overview .side .quote-card{ display:none !important; }
.ev-overview .side .pic{ aspect-ratio:16/10 !important; }

/* --- "Who is it for": clean 2-col cards, each with a navy circle icon
       (boosted specificity to beat the earlier 4-across per-child layer) --- */
.ev-overview .ev-whofor-inline .whofor-wrap .block ul{ grid-template-columns:repeat(2,1fr) !important; gap:16px !important; }
.ev-overview .ev-whofor-inline .whofor-wrap .block ul li{
  flex-direction:row !important; align-items:center !important;
  background:#fff !important; border:1px solid rgba(16,44,84,.10) !important; border-radius:8px !important;
  box-shadow:0 16px 34px -22px rgba(16,44,84,.5), 0 3px 8px -4px rgba(16,44,84,.16) !important;
  padding:18px 20px !important; gap:16px !important; font-size:15px !important;
}
.ev-overview .ev-whofor-inline .whofor-wrap .block ul li:nth-child(n)::before{
  content:"" !important; position:static !important; flex:0 0 44px !important; width:44px !important; height:44px !important;
  margin:0 !important; border-radius:50% !important;
  -webkit-mask:none !important; mask:none !important;
  background-color:#102c54 !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' 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='M14 21v-1a4 4 0 0 1 7 0v1'/></svg>") !important;
  background-repeat:no-repeat !important; background-position:center !important; background-size:23px !important;
  box-shadow:0 8px 16px -8px rgba(16,44,84,.5) !important;
}
@media(max-width:560px){ .ev-overview .ev-whofor-inline .whofor-wrap .block ul{ grid-template-columns:1fr !important; } }

/* --- "Honest about the real cost": more air between rows + bolder Vary-by-vessel --- */
.tm-included .tm-incl-col ul{ gap:18px !important; }
.tm-included .tm-incl-col li{ padding:3px 0 !important; border-bottom:none !important; }
.tm-included .tm-incl-col .rates{
  margin-top:26px !important; padding:20px 22px !important;
  background:rgba(193,154,77,.09) !important; border:none !important;
  border-left:4px solid var(--brass,#C19A4D) !important; border-radius:8px !important;
  box-shadow:0 14px 30px -22px rgba(16,44,84,.4) !important;
  font-size:14px !important; line-height:1.6 !important; color:var(--slate-2,#475261) !important;
}
.tm-included .tm-incl-col .rates strong{
  font-family:var(--f-display) !important; font-size:15.5px !important; font-weight:800 !important;
  letter-spacing:0 !important; text-transform:none !important; color:var(--ink,#102C54) !important; margin-bottom:7px !important;
}
/* addons pill — solid + soft shadow */
.addons-teaser .at-card .price-pill{ box-shadow:0 8px 18px -10px rgba(16,44,84,.4) !important; }

/* ================================================================
   EVENT PAGES — round 3: cleaner hero, cohesive first section,
   simpler itinerary, flat shadowed pills, simple related cards
   ================================================================ */

/* (event-hero markup replaced by standard .subhero — old hero overrides retired) */

/* --- First section: editorial 2-col (rich copy + image collage),
       with "Who is it for" full-width below a divider --- */
.ev-overview{ padding:clamp(54px,6vw,86px) 0 !important; }
.ev-overview .layout{ display:grid !important; grid-template-columns:1.04fr .96fr !important; gap:clamp(34px,4.6vw,70px) !important; align-items:start !important; }
.ev-overview .body{ display:block !important; max-width:none !important; }
.ev-overview .body p{ max-width:54ch !important; font-size:17.5px !important; line-height:1.75 !important; color:var(--slate-2,#3d4b5c) !important; }
.ev-overview .body p + p{ margin-top:1.05em !important; }
.ev-overview .side{ display:block !important; position:relative; }
.ev-overview .ev-collage{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ev-overview .ev-collage .pic{ background-size:cover; background-position:center; border-radius:16px; min-height:150px; box-shadow:0 26px 50px -30px rgba(16,44,84,.55); }
.ev-overview .ev-collage .pic-main{ grid-column:1 / -1; aspect-ratio:16/10; min-height:0; }
.ev-overview .side .pic{ border-radius:16px !important; }
.ev-overview .side .quote-card{
  position:relative !important; margin-top:16px !important; border-radius:16px !important;
  box-shadow:0 18px 38px -24px rgba(16,44,84,.5) !important;
}
.ev-overview .ev-whofor-inline{
  margin-top:clamp(36px,4.2vw,58px) !important;
  padding-top:clamp(30px,3.2vw,44px) !important;
  border-top:1px solid var(--line,rgba(16,44,84,.12)) !important;
}
@media(max-width:900px){ .ev-overview .layout{ grid-template-columns:1fr !important; } }

/* --- "Day itinerary example": simpler, lighter block --- */
.ev-program .program-wrap .block{
  box-shadow:0 16px 40px -30px rgba(16,44,84,.45) !important;
  padding:clamp(26px,3vw,42px) !important;
}
.ev-program .program-wrap .timeline li{ grid-template-columns:92px 1fr !important; gap:22px !important; padding:16px 0 !important; }
.ev-program .program-wrap .timeline strong{ font-size:16.5px !important; }
.ev-program .program-wrap .timeline small{ font-size:14px !important; line-height:1.55 !important; }

/* --- All event-page pills/chips: no gradient/border, clean radius + shadow --- */
.ex-tag, .event-hero .label,
.addons-teaser .at-card .price-pill, .tm-incl-col .rates{
  background-image:none !important;
}
.ex-tag{ border:none !important; border-radius:8px !important; box-shadow:0 8px 18px -10px rgba(16,44,84,.45) !important; }

/* --- "Not quite right? These are close." cards: simple, bg-image, soft shadow --- */
.ev-related .rel{
  border-radius:12px !important;
  box-shadow:0 22px 46px -26px rgba(16,44,84,.5) !important;
  border:none !important;
}
.ev-related .rel::before, .ev-related .rel::after{ background-image:none; }
.ev-related .rel > div{ padding:clamp(22px,2.4vw,30px) !important; }