/* ============================================================
   enhance-v9.css  ·  ROUND 4
   Loaded LAST on every page (after each page's bundle / theme-v8),
   so these rules win over the late bundle layers that re-introduced
   eyebrow dashes etc.

   Adds:
   - global: kill eyebrow dashes for good, loosen section rhythm
   - .sx-band  scattered-photo editorial section (reusable)
   - .svc-arrow circular up-right arrow on homepage service cards
   - water-toys: bigger cards, no horizontal scrollbar
   - .about-stack stacked image column for About
   - .evx redesign of the events "below hero" overview
   ============================================================ */

:root {
  --v9-navy: #102c54;
  --v9-navy-2: #1a4078;
  --v9-warm: #C97A3F;
  --v9-warm-soft: #E2A876;
  --v9-ink: #1B1F26;
  --v9-ink-3: #5C636C;
  --v9-off: #F5F1EA;
  --v9-hair: rgba(27,31,38,.12);
}

/* ============================================================
   0. GLOBAL — no dashes; the late bundle layers turned the
   eyebrow dash back on, so re-kill it here (loaded last).
   ============================================================ */
.h-eyebrow,
.cx-eyebrow,
.me-eyebrow,
.tx16-eyebrow,
.form-eyebrow,
.tc-eyebrow,
.act-intro .h-eyebrow,
.section-head .h-eyebrow {
  display: none !important;
}
.h-eyebrow::before,
.h-eyebrow span { display: none !important; }
/* pull the heading up where an eyebrow used to sit */
.section-head h2[style*="margin-top"],
.ev-overview .section-head h2,
.whatis h2 { margin-top: 0 !important; }

/* ============================================================
   1. SCATTERED-PHOTO EDITORIAL SECTION  (.sx-band)
   "A small crew who knows every cove" — loose, photographic,
   breaks the rigid grid.
   ============================================================ */
.sx-band {
  position: relative;
  background: var(--v9-off);
  overflow: hidden;
  padding: clamp(56px, 7vw, 110px) 0;
}
.sx-band.dark { background: var(--v9-navy); }
.sx-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
.sx-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.sx-band.rev .sx-grid { grid-template-columns: 1.08fr 0.92fr; }
.sx-band.rev .sx-copy { order: 2; }
.sx-band.rev .sx-photos { order: 1; }

.sx-copy .sx-kicker {
  display: inline-block;
  font: 600 12px/1 var(--f-body, "Manrope", sans-serif);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--v9-warm);
  margin-bottom: 16px;
}
.sx-band.dark .sx-copy .sx-kicker { color: var(--v9-warm-soft); }
.sx-copy h2 {
  font-family: var(--f-display, "Archivo", sans-serif);
  font-size: clamp(30px, 3.5vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--v9-ink);
  margin: 0;
}
.sx-copy h2 em { font-style: italic; font-weight: 300; color: var(--v9-warm); }
.sx-band.dark .sx-copy h2 { color: #fff; }
.sx-band.dark .sx-copy h2 em { color: var(--v9-warm-soft); }
.sx-copy p {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--v9-ink-3);
  max-width: 42ch;
}
.sx-band.dark .sx-copy p { color: rgba(255,255,255,.78); }
.sx-copy .sx-sign {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--v9-ink);
  font-weight: 500;
}
.sx-band.dark .sx-copy .sx-sign { color: #fff; }
.sx-copy .sx-sign .dot { width: 30px; height: 1px; background: var(--v9-warm); display: inline-block; }
.sx-cta {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--v9-navy);
  color: #fff !important;
  padding: 13px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, gap .2s ease;
}
.sx-cta:hover { background: var(--v9-warm); gap: 14px; }
.sx-band.dark .sx-cta { background: #fff; color: var(--v9-navy) !important; }
.sx-band.dark .sx-cta:hover { background: var(--v9-warm-soft); }

/* photo cluster — absolute, tilted, "pinned" */
.sx-photos {
  position: relative;
  height: clamp(360px, 34vw, 480px);
}
.sx-photos figure {
  position: absolute;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 26px 54px -26px rgba(15,28,50,.55);
  background: #ccd;
}
.sx-band.dark .sx-photos figure { border-color: #16335c; }
.sx-photos figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-photos .p1 { width: 50%; height: 64%; left: 0; top: 6%; transform: rotate(-4deg); z-index: 2; }
.sx-photos .p2 { width: 44%; height: 52%; right: 2%; top: 0; transform: rotate(3deg); z-index: 3; }
.sx-photos .p3 { width: 40%; height: 46%; right: 8%; bottom: 2%; transform: rotate(-3deg); z-index: 4; }
.sx-photos .p4 { width: 30%; height: 34%; left: 16%; bottom: 0; transform: rotate(5deg); z-index: 5; }
.sx-photos figure:hover { transform: rotate(0deg) scale(1.03); z-index: 9; transition: transform .35s ease; }

@media (max-width: 860px) {
  .sx-grid, .sx-band.rev .sx-grid { grid-template-columns: 1fr; gap: 26px; }
  .sx-band.rev .sx-copy { order: 1; }
  .sx-band.rev .sx-photos { order: 2; }
  .sx-photos {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .sx-photos figure {
    position: static;
    transform: none !important;
    width: auto !important; height: auto !important;
    aspect-ratio: 4/3;
    border-width: 4px;
    box-shadow: 0 14px 30px -18px rgba(15,28,50,.5);
  }
  .sx-photos .p4 { display: none; }
}

/* ============================================================
   2. HOMEPAGE SERVICE CARDS — circular up-right arrow
   (matches the rent-a-boat .bc-arrow language)
   ============================================================ */
.services .service-card { position: relative; }
.services .service-card .num { left: 16px !important; right: auto !important; }
.svc-arrow {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(16,44,84,.92);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease;
}
.svc-arrow svg { width: 17px; height: 17px; }
.service-card:hover .svc-arrow {
  background: var(--v9-warm);
  transform: rotate(8deg);
}

/* ============================================================
   3. WATER TOYS — bigger cards, no horizontal scrollbar
   ============================================================ */
.ws-catalogue { overflow: hidden; }
.ws-catalogue .ws-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: clamp(18px, 2vw, 28px) !important;
  overflow: visible !important;
  margin-top: clamp(28px, 3vw, 44px) !important;
}
.ws-catalogue .ws-card { width: auto !important; }
.ws-catalogue .ws-card .img { aspect-ratio: 16 / 10 !important; }
.ws-catalogue .ws-card .body { padding: 28px 30px 30px !important; }
.ws-catalogue .ws-card h3 { font-size: clamp(23px, 2vw, 28px) !important; }
.ws-catalogue .ws-card p { font-size: 15px !important; }
@media (max-width: 720px) {
  .ws-catalogue .ws-grid { grid-template-columns: 1fr !important; }
  .ws-catalogue .ws-card .img { aspect-ratio: 16/10 !important; }
}

/* ============================================================
   4. ABOUT — stacked image column + extra gallery
   ============================================================ */
.about-stack {
  display: grid;
  gap: 16px;
}
.about-stack figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 22px 48px -28px rgba(15,28,50,.4);
}
.about-stack figure img { width: 100%; display: block; }
.about-stack figure:nth-child(odd) { transform: rotate(-1deg); }
.about-stack figure:nth-child(even) { transform: rotate(1deg); }

/* scattered gallery row used to break long pages */
.sx-row {
  background: var(--v9-off);
  padding: clamp(18px, 3vw, 40px) 0;
  overflow: hidden;
}
.sx-row .sx-row-track {
  display: flex;
  gap: 14px;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
.sx-row figure {
  margin: 0;
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: 0 18px 38px -24px rgba(15,28,50,.45);
}
.sx-row figure:nth-child(2) { margin-top: 26px; }
.sx-row figure:nth-child(4) { margin-top: 26px; }
.sx-row figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s ease; }
.sx-row figure:hover img { transform: scale(1.05); }
@media (max-width: 700px) {
  .sx-row figure:nth-child(n+4) { display: none; }
  .sx-row figure { margin-top: 0 !important; }
}

/* ============================================================
   5. EVENTS — redesigned "below hero" overview (.ev-overview)
   Bolder editorial split + photo cluster + floating quote.
   Targets the shared markup on every event page.
   ============================================================ */
.ev-overview .layout {
  display: grid !important;
  grid-template-columns: 1.05fr 0.95fr !important;
  gap: clamp(32px, 5vw, 72px) !important;
  align-items: center !important;
}
.ev-overview .layout .body { max-width: none !important; }
.ev-overview .layout .side { position: relative !important; }
.ev-overview .layout .body p {
  font-size: 16.5px !important;
  line-height: 1.65 !important;
  color: var(--v9-ink-3) !important;
}
.ev-overview .layout .body p:first-child::first-letter {
  font-family: var(--f-display, "Archivo", sans-serif);
  font-size: 3.4em;
  font-weight: 600;
  float: left;
  line-height: .8;
  margin: 6px 12px 0 0;
  color: var(--v9-warm);
}
/* photo cluster */
.ev-overview .ev-collage {
  position: relative !important;
  display: block !important;
  height: clamp(380px, 36vw, 500px) !important;
}
.ev-overview .ev-collage .pic {
  position: absolute !important;
  border-radius: 16px !important;
  border: 7px solid #fff !important;
  box-shadow: 0 30px 60px -30px rgba(15,28,50,.55) !important;
  background-size: cover !important;
  background-position: center !important;
}
.ev-overview .ev-collage .pic:nth-of-type(1) {
  width: 62% !important; height: 68% !important;
  left: 0 !important; top: 6% !important;
  transform: rotate(-2.5deg) !important;
  z-index: 2 !important;
}
.ev-overview .ev-collage .pic { transition: transform .4s cubic-bezier(.2,.7,.2,1) !important; }
.ev-overview .ev-collage .pic:hover { transform: rotate(0deg) scale(1.04) !important; z-index: 9 !important; }
.ev-overview .ev-collage .pic:nth-of-type(2) {
  width: 48% !important; height: 50% !important;
  right: 0 !important; top: 0 !important;
  transform: rotate(3deg) !important;
  z-index: 3 !important;
}
.ev-overview .ev-collage .pic:nth-of-type(3) {
  width: 46% !important; height: 46% !important;
  right: 4% !important; bottom: 2% !important;
  transform: rotate(-3deg) !important;
  z-index: 4 !important;
}
.ev-overview .ev-collage .pic:nth-of-type(4) {
  width: 32% !important; height: 34% !important;
  left: 12% !important; bottom: 0 !important;
  transform: rotate(5deg) !important;
  z-index: 5 !important;
}
.ev-overview .quote-card {
  position: absolute !important;
  right: 4% !important; bottom: -6% !important;
  z-index: 6 !important;
  max-width: 260px !important;
  background: var(--v9-navy) !important;
  color: #fff !important;
  padding: 20px 22px !important;
  border-radius: 16px !important;
  font-family: var(--f-display, "Archivo", sans-serif) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  box-shadow: 0 26px 54px -26px rgba(15,28,50,.6) !important;
}
/* who-for → icon cards */
.ev-overview .ev-whofor-inline { margin-top: clamp(36px, 4vw, 60px) !important; }
.ev-overview .ev-whofor-inline .ev-subhead {
  font-family: var(--f-display, "Archivo", sans-serif);
  font-size: 13px; letter-spacing: .04em;
  text-transform: none; color: var(--v9-ink); font-weight: 600;
  margin-bottom: 18px;
}
.ev-overview .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-overview .whofor-wrap .block ul li {
  background: #fff !important;
  border: 1px solid var(--v9-hair) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: var(--v9-ink) !important;
  position: relative !important;
  padding-left: 44px !important;
}
.ev-overview .whofor-wrap .block ul li::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important; top: 17px !important;
  width: 16px !important; height: 16px !important;
  border-radius: 50% !important;
  background: var(--v9-warm) !important;
}
@media (max-width: 900px) {
  .ev-overview .layout { grid-template-columns: 1fr !important; }
  .ev-overview .ev-collage { height: auto !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .ev-overview .ev-collage .pic {
    position: static !important; transform: none !important;
    width: auto !important; height: auto !important;
    aspect-ratio: 4/3 !important; border-width: 4px !important;
  }
  .ev-overview .ev-collage .pic:nth-of-type(1) { grid-column: 1 / -1 !important; aspect-ratio: 16/9 !important; }
  .ev-overview .quote-card { position: static !important; max-width: none !important; margin-top: 12px !important; }
  .ev-overview .whofor-wrap .block ul { grid-template-columns: 1fr !important; }
}

/* ============================================================
   6b. CREW STRIP on About — styles live only in stale theme-v8,
   re-declared here (odd figures collapsed with no aspect-ratio).
   ============================================================ */
.crew-strip{ background:var(--off,#f3f6f9) !important; padding:clamp(48px,5.5vw,88px) 0 !important; }
.crew-strip .wrap{ max-width:1320px; margin:0 auto; padding:0 var(--gutter,28px); }
.crew-strip .cs-head{ max-width:640px; margin-bottom:clamp(24px,3vw,40px); }
.crew-strip .cs-head h2{ font-family:var(--f-display,"Archivo",sans-serif); font-size:clamp(26px,3vw,42px); letter-spacing:-.03em; line-height:1.05; font-weight:600; margin:0; color:var(--v9-ink,#16202d); }
.crew-strip .cs-head h2 em{ font-style:italic; font-weight:300; color:var(--v9-warm,#c97a3f); }
.crew-strip .cs-head p{ margin:14px 0 0; color:var(--v9-ink-3,#5c636c); font-size:16px; line-height:1.6; max-width:52ch; }
.crew-strip .cs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.crew-strip .cs-grid figure{ margin:0; border-radius:16px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 18px 40px -26px rgba(16,44,84,.45); background:#dde6f0; }
.crew-strip .cs-grid figure:nth-child(even){ transform:translateY(20px); }
.crew-strip .cs-grid figure img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s ease; }
.crew-strip .cs-grid figure:hover img{ transform:scale(1.05); }
@media(max-width:760px){
  .crew-strip .cs-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .crew-strip .cs-grid figure{ aspect-ratio:4/3; }
  .crew-strip .cs-grid figure:nth-child(even){ transform:none; }
}

/* ============================================================
   5b. ABOUT — stacked masonry gallery ("Life aboard")
   ============================================================ */
.about-gallery { background: #fff; padding: clamp(40px, 5vw, 80px) 0; }
.about-gallery .wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.about-gallery .ag-head { max-width: 60ch; margin: 0 0 26px; }
.about-gallery .ag-head h2 {
  font-family: var(--f-display, "Archivo", sans-serif);
  font-size: clamp(28px, 3.2vw, 46px);
  letter-spacing: -0.03em; line-height: 1.03; font-weight: 600; margin: 0;
  color: var(--v9-ink);
}
.about-gallery .ag-head h2 em { font-style: italic; font-weight: 300; color: var(--v9-warm); }
.about-gallery .ag-head p { margin: 14px 0 0; color: var(--v9-ink-3); font-size: 16px; max-width: 46ch; }
.ab-masonry { column-count: 3; column-gap: 14px; }
.ab-masonry figure {
  margin: 0 0 14px;
  break-inside: avoid;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 40px -26px rgba(15,28,50,.45);
}
.ab-masonry figure img { width: 100%; display: block; transition: transform .7s ease; }
.ab-masonry figure:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .ab-masonry { column-count: 2; } }
@media (max-width: 540px) { .ab-masonry { column-count: 1; } }

/* ============================================================
   6. LOOSEN — gentle organic rounding on big section media
   so the site reads less like a corporate template.
   ============================================================ */
.subhero .bg { border-bottom-left-radius: 0; }


/* ============================================================
   7. R7 — remove small eyebrow labels above section headings
   sitewide; enlarge the main section heading.
   ============================================================ */
.h-eyebrow{ display:none !important; }
.section-head h2, .tb-head h2, .ag-head h2, .ws-catalogue .section-head h2 { font-size:clamp(30px,3.8vw,52px) !important; line-height:1.03 !important; }


/* ============================================================
   8. R7 — Recognised: cleaner unified trust row (no gradient
   blob, flat dividers instead of separate cards).
   ============================================================ */
.recognised::before{ display:none !important; }
.recognised .rec-grid{ border:1px solid rgba(255,255,255,.14); border-radius:22px; overflow:hidden; gap:0 !important; }
.recognised .rec-card{ border-radius:0 !important; border-left:1px solid rgba(255,255,255,.14) !important; box-shadow:none !important; background:transparent !important; padding:clamp(30px,2.8vw,44px) clamp(16px,1.6vw,24px) !important; }
.recognised .rec-card:first-child{ border-left:0 !important; }
.recognised .rec-card:hover{ box-shadow:none !important; background:transparent !important; }
.recognised .rec-stat-num{ font-size:clamp(44px,4.4vw,60px) !important; }
@media(max-width:880px){ .recognised .rec-card{ border-left:0 !important; } .recognised .rec-card:nth-child(2n){ border-left:1px solid rgba(255,255,255,.14) !important; } }
@media(max-width:440px){ .recognised .rec-card:nth-child(2n){ border-left:0 !important; } }


/* ============================================================
   9. R7 — EVENT overview: compact COMBINED section. Heading +
   intro + "who is it for" flow in one column; media beside.
   Applies to all event-*.html (shared .ev-overview markup).
   ============================================================ */
.ev-overview{ padding-top:clamp(40px,4.5vw,68px) !important; padding-bottom:clamp(40px,4.5vw,68px) !important; }
.ev-overview .wrap{ display:grid !important; grid-template-columns:1.05fr .95fr !important; column-gap:clamp(28px,4vw,58px) !important; align-items:start !important; }
.ev-overview .section-head{ display:block !important; grid-column:1 !important; margin-bottom:0 !important; }
.ev-overview .section-head .lead{ margin-top:12px !important; }
.ev-overview .layout{ display:contents !important; }
.ev-overview .layout .body{ grid-column:1 !important; margin-top:16px !important; }
.ev-overview .layout .body p:first-child::first-letter{ float:none !important; font-size:inherit !important; font-weight:inherit !important; margin:0 !important; color:inherit !important; }
.ev-overview .layout .side{ grid-column:2 !important; grid-row:1 / span 6 !important; align-self:start !important; }
.ev-overview .ev-collage{ height:clamp(320px,30vw,430px) !important; }
.ev-overview .ev-whofor-inline{ grid-column:1 !important; margin-top:22px !important; }
.ev-overview .ev-whofor-inline .ev-subhead{ margin-bottom:12px !important; }
.ev-overview .whofor-wrap .block ul{ grid-template-columns:1fr !important; gap:8px !important; }
.ev-overview .whofor-wrap .block ul li{ padding:11px 14px 11px 40px !important; font-size:13.5px !important; }
.ev-overview .whofor-wrap .block ul li::before{ left:14px !important; top:14px !important; width:13px !important; height:13px !important; }
@media(max-width:860px){
  .ev-overview .wrap{ grid-template-columns:1fr !important; }
  .ev-overview .layout .side{ grid-column:1 !important; grid-row:auto !important; margin-top:18px; }
}