/* =========================================================
   WAOW CHARTERS — Homepage V1
   Brand system: Abyss / Open Sea / Sea Foam / Sail Linen /
   Yellaow / Ironwood — "quiet, never loud".
   ========================================================= */

:root {
  /* --- Brand palette --- */
  --abyss: #10233F;
  --open-sea: #4E7495;
  --sea-foam: #AFC2D2;
  --sail-linen: #F4EFE4;
  --yellaow: #FFE000;
  --ironwood: #8A6A4A;

  /* Derived surfaces (Combo 2 — light dominant, blue in accent) */
  --bg-page: var(--sail-linen);
  --bg-linen-deep: #ECE4D3;
  --bg-panel: #E7EEF1;      /* sea-foam tinted panel, never carries body text */
  --bg-warm: #EFE6D8;       /* ironwood-tinted panel, bridges heritage sections */
  --bg-dark: var(--abyss);
  --white: #FFFFFF;

  --ink: var(--abyss);
  --ink-soft: var(--open-sea);
  --paper: var(--sail-linen);
  --paper-soft: rgba(244, 239, 228, 0.78);

  /* Status colours — functional, not brand accents. Used only for
     availability indicators (cabin map), so they read as a signal
     rather than a fourth palette. */
  --status-available: #5E8C61;
  --status-unavailable: #9A9488;

  /* --- Typography ---
     Lemon Milk (headings/labels/CTAs) and Have Heart Two (script accents)
     are the client's licensed brand fonts, self-hosted below via @font-face
     (fonts/). Fraunces (body copy, everywhere) comes from Google Fonts. */
  --font-display: 'Lemon Milk', 'Century Gothic', 'Futura', sans-serif;
  --font-body: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-script: 'Have Heart Two', 'Segoe Script', cursive;

  --fs-h1: clamp(2.5rem, 1.4rem + 4.6vw, 4.6rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.1vw, 2.75rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  --fs-body: clamp(1rem, 0.94rem + 0.2vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --tracking-eyebrow: 0.16em;
  --tracking-caps: 0.08em;

  /* --- Layout --- */
  --container-w: 1272px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-pad: clamp(4rem, 3rem + 4vw, 8rem);
  --radius-sm: 4px;
  --radius-md: 10px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =========================================================
   Brand fonts (self-hosted)
   ========================================================= */
@font-face { font-family: 'Lemon Milk'; src: url('fonts/LEMONMILK-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lemon Milk'; src: url('fonts/LEMONMILK-LightItalic.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lemon Milk'; src: url('fonts/LEMONMILK-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lemon Milk'; src: url('fonts/LEMONMILK-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
/* Most headings in the site ask for weight 600/700 ("bold"); the true Bold
   cut of Lemon Milk reads too heavy at heading size, so 500-800 all load
   the Medium cut instead — visibly lighter without touching every rule
   that sets font-weight. The true Bold stays available at 900, for
   anywhere that deliberately wants the heaviest cut. */
@font-face { font-family: 'Lemon Milk'; src: url('fonts/LEMONMILK-Regular.woff2') format('woff2'); font-weight: 500 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lemon Milk'; src: url('fonts/LEMONMILK-MediumItalic.woff2') format('woff2'); font-weight: 500 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Lemon Milk'; src: url('fonts/LEMONMILK-Bold.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lemon Milk'; src: url('fonts/LEMONMILK-BoldItalic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }
/* single-weight script face — declared over the full weight range so every
   existing font-weight:600/700 rule written for the old Caveat stand-in
   still resolves to it instead of a synthetic bold */
@font-face { font-family: 'Have Heart Two'; src: url('fonts/HaveHeartTwo.woff2') format('woff2'), url('fonts/HaveHeartTwo.woff') format('woff'); font-weight: 100 900; font-style: normal; font-display: swap; }

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
input { font: inherit; }
svg { display: block; }

body {
  background: var(--bg-page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--abyss);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--abyss); color: var(--paper);
  padding: 0.75rem 1.25rem; border-radius: var(--radius-sm);
  z-index: 999; transition: top 0.2s var(--ease);
  font-family: var(--font-display); font-size: var(--fs-small);
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--open-sea);
  outline-offset: 3px;
}

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.container {
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); position: relative; }
.section--dark { background: var(--abyss); color: var(--paper); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); }
.section--panel { background: var(--bg-panel); }
.section--warm { background: var(--bg-warm); }
.section--tight { padding-block: clamp(3rem, 2.5rem + 2vw, 5rem); }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; margin-bottom: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
}
.section-head h2 { max-width: 20ch; }
.section-head__lead { flex: 0 0 100%; max-width: 46ch; color: var(--ink-soft); font-size: var(--fs-small); }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head--center h2 { max-width: 26ch; }

/* =========================================================
   Type helpers
   ========================================================= */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-display); font-size: var(--fs-eyebrow);
  font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--open-sea); margin-bottom: 0.9rem;
}
.eyebrow__rule { display: inline-block; width: 22px; height: 2px; background: var(--yellaow); }
.eyebrow--on-dark { color: var(--yellaow); }

.script-title {
  font-family: var(--font-script); font-weight: 700;
  color: var(--open-sea); font-size: clamp(2.4rem, 1.9rem + 2.4vw, 3.4rem);
  line-height: 1; margin-bottom: 0.75rem;
}

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps);
  color: var(--abyss); padding-bottom: 2px;
  /* underline the words themselves (not a border on the box, which ran past the text
     whenever the link had a fixed width or was centred in a wider box) */
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-skip-ink: none;
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease); }
.link-arrow:hover { color: var(--open-sea); gap: 0.75rem; }
.link-arrow:hover svg { transform: translateX(2px); }
.link-arrow--head { margin-bottom: 0.4rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  padding: 0.9em 1.7em; border-radius: 999px; transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn--solid { background: var(--abyss); color: var(--paper); }
.btn--solid:hover { background: var(--open-sea); transform: translateY(-1px); }

/* =========================================================
   Decorative: dot icons, stamp, torn edge, tape
   ========================================================= */
.dot-icon { width: 40px; height: auto; overflow: visible; }

/* Ambient sea-life — a few pointillist fish drifting in the neutral
   margins of each section, never pinned to a photo. Position/rotation
   set per-instance inline so each sighting feels one-off, not a pattern. */
.sea-life { position: absolute; pointer-events: none; z-index: 1; }
@media (max-width: 1099px) {
  /* Layouts stack or run tight below this breakpoint — keep the flow
     clear rather than chase collisions across every reflow. */
  .sea-life { display: none; }
}

.stamp-mark {
  position: absolute; top: 6%; right: -4%; width: clamp(90px, 12vw, 132px); height: auto;
  color: var(--abyss); opacity: 0.82; transform: rotate(-6deg);
  filter: drop-shadow(0 2px 6px rgba(16, 35, 63, 0.25));
}

.torn-edge {
  clip-path: polygon(0.0% 0.4%, 6.7% 0.0%, 13.3% 0.8%, 20.0% 0.0%, 26.7% 0.6%, 33.3% 0.0%, 40.0% 0.2%, 46.7% 0.0%, 53.3% 0.1%, 60.0% 0.0%, 66.7% 0.2%, 73.3% 0.0%, 80.0% 0.5%, 86.7% 0.3%, 93.3% 0.2%, 99.1% 0.0%, 100.0% 7.7%, 99.8% 15.4%, 100.0% 23.1%, 99.3% 30.8%, 100.0% 38.5%, 98.9% 46.2%, 100.0% 53.8%, 99.2% 61.5%, 99.6% 69.2%, 99.0% 76.9%, 99.8% 84.6%, 99.7% 92.3%, 100.0% 99.1%, 93.3% 100.0%, 86.7% 99.5%, 80.0% 99.9%, 73.3% 99.4%, 66.7% 99.6%, 60.0% 99.0%, 53.3% 99.7%, 46.7% 99.6%, 40.0% 99.9%, 33.3% 99.2%, 26.7% 100.0%, 20.0% 99.4%, 13.3% 99.8%, 6.7% 99.7%, 0.8% 100.0%, 0.0% 92.3%, 0.7% 84.6%, 0.0% 76.9%, 1.0% 69.2%, 0.2% 61.5%, 0.4% 53.8%, 0.5% 46.2%, 0.2% 38.5%, 0.0% 30.8%, 0.9% 23.1%, 0.0% 15.4%, 0.6% 7.7%);
}

/* Real photos filling the polaroid/portrait/card frames */
.polaroid__photo, .crew-portrait__photo, .crew-card__photo, .itinerary-entry__photo .polaroid__photo {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  background: var(--sea-foam);
}
.polaroid__photo picture, .crew-portrait__photo picture, .crew-card__photo picture {
  display: block; width: 100%; height: 100%;
}
.polaroid__photo img, .crew-portrait__photo img, .crew-card__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Polaroid */
.polaroid {
  display: inline-flex; flex-direction: column; gap: 0.85rem;
  background: var(--white); padding: 0.85rem 0.85rem 1.1rem;
  box-shadow: 0 14px 30px -12px rgba(16, 35, 63, 0.35);
  border-radius: 2px;
}
.polaroid--tilt-left { transform: rotate(-2.6deg); }
.polaroid--tilt-right { transform: rotate(2.4deg); }
.polaroid:hover { transform: rotate(0deg) translateY(-4px); transition: transform 0.35s var(--ease); }
.polaroid__photo { aspect-ratio: 4 / 5; }
.polaroid--lg .polaroid__photo { aspect-ratio: 4 / 3; }
.polaroid figcaption {
  font-family: var(--font-script); font-size: 1.15rem; color: var(--ink-soft);
  text-align: center; padding-inline: 0.25rem;
}
.polaroid--tape { position: relative; }
.polaroid--tape::before {
  content: ""; position: absolute; top: -14px; left: 50%; width: 76px; height: 26px;
  transform: translateX(-50%) rotate(-4deg);
  background: repeating-linear-gradient(45deg, rgba(231,199,122,0.55) 0 6px, rgba(231,199,122,0.4) 6px 12px);
  opacity: 0.85; box-shadow: 0 2px 4px rgba(16,35,63,0.15);
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244, 239, 228, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: rgba(16, 35, 63, 0.12);
  box-shadow: 0 8px 24px -18px rgba(16, 35, 63, 0.4);
}
.site-header__row {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.1rem; gap: 1.5rem;
}

.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 38px; width: auto; }

.nav__list { display: flex; gap: clamp(1.2rem, 1vw + 0.8rem, 2.4rem); }
.nav__list a {
  font-family: var(--font-display); font-size: 0.8125rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--abyss);
  position: relative; padding-bottom: 4px;
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--yellaow); transition: right 0.25s var(--ease);
}
.nav__list a:hover::after { right: 0; }
.nav__list a.is-active { color: var(--open-sea); }
.nav__list a.is-active::after { right: 0; background: var(--ironwood); }

.mobile-nav a.is-active,
.site-footer__nav a.is-active { color: var(--open-sea); text-decoration: underline; text-decoration-color: var(--yellaow); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.site-footer__nav a.is-active { color: var(--yellaow); }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; padding: 6px;
}
.burger span { display: block; width: 100%; height: 1.5px; background: var(--abyss); transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav { display: none; }

@media (max-width: 900px) {
  .nav { display: none; }
  .site-header__actions .btn--solid { padding: 0.7em 1.2em; font-size: 0.75rem; }
  .burger { display: flex; }
  .mobile-nav {
    border-top: 1px solid rgba(16,35,63,0.1);
    background: var(--paper);
  }
  .mobile-nav ul { padding: 1.25rem var(--gutter) 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; }
  .mobile-nav a {
    font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-caps);
    text-transform: uppercase; font-size: 0.95rem;
  }
  .mobile-nav .btn { margin-top: 0.5rem; width: fit-content; }
}
@media (max-width: 480px) {
  .logo img { height: 30px; }
  .site-header__actions .btn--solid span { display: none; }
}

/* =========================================================
   Hero
   ========================================================= */
.hero { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) clamp(4rem, 3rem + 4vw, 7rem); position: relative; }
.hero__grid {
  display: grid; grid-template-columns: 1fr; gap: clamp(2.5rem, 2rem + 3vw, 4rem);
  align-items: center;
}
.hero__title { margin-bottom: 1.25rem; }
.hero__lead { font-size: var(--fs-lead); color: var(--ink); max-width: 40ch; margin-bottom: 2rem; }

.hero__visual { position: relative; }
.hero__photo {
  position: relative; background: var(--white); padding: 0.9rem 0.9rem 1.3rem;
  box-shadow: 0 30px 60px -24px rgba(16, 35, 63, 0.45);
  transform: rotate(1.4deg);
}
.hero__photo picture { display: block; aspect-ratio: 1874 / 839; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

.hero__coral { position: absolute; width: 90px; height: 90px; left: -14%; bottom: -12%; opacity: 0.85; z-index: 1; }

.coordinates {
  position: absolute; right: -6%; top: 8%; bottom: 8%;
  writing-mode: vertical-rl; font-family: var(--font-display); font-size: 0.7rem;
  letter-spacing: 0.18em; color: var(--open-sea); display: flex; align-items: center; justify-content: center; gap: 1rem;
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 0.85fr 1.15fr; }
}

/* =========================================================
   Waow Spirit
   ========================================================= */
.spirit__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); align-items: center; }
.spirit__copy p { margin-bottom: 1.75rem; }
.spirit__collage {
  position: relative; display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem; padding-block: 1rem;
}
.spirit__collage .polaroid--lg { grid-column: 1 / -1; max-width: 420px; }

@media (min-width: 900px) {
  .spirit__grid { grid-template-columns: 0.9fr 1.1fr; }
}
@media (max-width: 560px) {
  .spirit__collage { grid-template-columns: 1fr; justify-items: center; }
  .spirit__collage .polaroid--lg { max-width: 320px; }
}

/* =========================================================
   The Boat — ship's-papers ledger, not another photo-and-text split
   ========================================================= */
.boat-panel { overflow: hidden; }
.boat-panel__ledger {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgba(175,194,210,0.07) 0 1px, transparent 1px 44px);
}
.boat-panel__inner {
  position: relative; display: flex; flex-direction: column;
  gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}
.boat-panel__content { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(2rem, 1.6rem + 2vw, 3rem); }
.boat-panel__head { max-width: 48ch; }
.boat-panel__head .eyebrow { margin-bottom: 0.9rem; }
.boat-panel__head h2 { margin-bottom: 1rem; }
.boat-panel__lead { color: var(--sea-foam); font-size: var(--fs-lead); max-width: 50ch; }

.boat-panel__visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 220px; padding-block: 1rem;
}
.boat-id-photo {
  position: relative; z-index: 2; width: clamp(220px, 30vw, 360px);
  background: var(--white); padding: 12px 12px 32px;
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.55);
  transform: rotate(-3deg);
}
.boat-id-photo picture { display: block; aspect-ratio: 1686 / 933; overflow: hidden; }
.boat-id-photo img { width: 100%; height: 100%; object-fit: cover; }
.boat-id-photo__pin {
  position: absolute; top: -22px; left: 50%; width: 26px; height: 44px;
  transform: translateX(-65%) rotate(-10deg); color: var(--yellaow); z-index: 3;
}

.stamp-row { display: flex; flex-wrap: wrap; gap: 1.5rem clamp(1.25rem, 1rem + 1vw, 2.25rem); }
.stamp-badge {
  width: clamp(92px, 11vw, 124px); aspect-ratio: 1; border-radius: 50%; flex-shrink: 0;
  border: 1.5px dashed var(--yellaow); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.2rem; text-align: center;
}
.stamp-badge__value { font-family: var(--font-display); font-weight: 700; color: var(--paper); line-height: 1; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.stamp-badge__label { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--sea-foam); }
.stamp-badge--r1 { transform: rotate(-6deg); }
.stamp-badge--r2 { transform: rotate(3deg); margin-top: 1.3rem; }
.stamp-badge--r3 { transform: rotate(-3deg); margin-top: -0.5rem; }
.stamp-badge--r4 { transform: rotate(5deg); margin-top: 0.9rem; }

.boat-note {
  font-family: var(--font-script); font-size: 1.3rem; color: var(--sea-foam);
  transform: rotate(-1.4deg); max-width: 34ch;
}

.boat-legend { display: grid; gap: 0.9rem; max-width: 640px; }
.boat-legend li {
  font-size: var(--fs-small); color: rgba(244, 239, 228, 0.82);
  padding-top: 0.9rem; border-top: 1px dashed rgba(175, 194, 210, 0.25);
}
.boat-legend li:first-child { border-top: 0; padding-top: 0; }
.boat-legend strong { font-family: var(--font-display); color: var(--paper); letter-spacing: 0.02em; }

@media (min-width: 640px) {
  .boat-legend { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .boat-panel__inner { flex-direction: row; align-items: center; gap: clamp(2.5rem, 2vw + 1.5rem, 4.5rem); }
  .boat-panel__content { flex: 1.15 1 0; }
  .boat-panel__visual { flex: 0.85 1 0; min-height: 320px; }
}

/* Full-width variant: a ledger section with no photo column (e.g. a
   standalone specifications page/section, nothing to balance visually). */
.boat-panel__inner--stacked,
.boat-panel__inner--stacked.boat-panel__inner {
  display: block;
}
.boat-panel__inner--stacked .boat-panel__head { max-width: 60ch; }
.boat-panel__inner--stacked .stamp-row { margin-top: 2.5rem; }
.boat-panel__inner--stacked .boat-note { margin-top: 2rem; }
.boat-panel__inner--stacked .boat-legend { margin-top: 1.5rem; max-width: 900px; }

/* =========================================================
   Destinations
   ========================================================= */
.destination-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  justify-items: center;
}
.destination-grid .polaroid { width: 100%; max-width: 300px; }
.polaroid figcaption strong { display: block; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--abyss); }
.polaroid figcaption span { display: block; font-size: 0.8rem; color: var(--ink-soft); font-family: var(--font-body); font-style: italic; }

@media (min-width: 760px) {
  .destination-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================
   Diving / Logbook
   ========================================================= */
.logbook { display: grid; gap: 1.75rem; }
.logbook__entry {
  position: relative; background: var(--white); padding: 2rem 1.75rem;
  border-radius: var(--radius-md); box-shadow: 0 10px 26px -18px rgba(16,35,63,0.3);
}
.logbook__entry h3 { margin-bottom: 0.35rem; }
.logbook__entry h3 span { font-family: var(--font-body); font-style: italic; font-weight: 400; color: var(--ink-soft); font-size: 0.85em; }
.logbook__meta {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ironwood);
  margin-bottom: 0.75rem;
}

@media (min-width: 860px) {
  .logbook { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   Four Pillars
   ========================================================= */
.pillar-grid { display: grid; gap: 2.25rem; }
.pillar-card { text-align: center; padding-inline: 0.5rem; }
.pillar-card__icon { width: 64px; height: 64px; margin-inline: auto; margin-bottom: 1.1rem; }
.pillar-card h3 { margin-bottom: 0.6rem; }
.pillar-card p { margin-inline: auto; font-size: var(--fs-small); }

@media (min-width: 720px) {
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .pillar-grid { grid-template-columns: repeat(4, 1fr); }
  .pillar-card { border-right: 1px solid rgba(16,35,63,0.1); }
  .pillar-card:last-child { border-right: 0; }
}

/* =========================================================
   Crew
   ========================================================= */
.crew__grid { display: grid; gap: clamp(2.5rem, 2rem + 3vw, 4rem); align-items: center; }
.crew__copy p { margin-bottom: 1.25rem; }
.crew__portraits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1.25rem; }
.crew-portrait__photo { aspect-ratio: 1 / 1; border-radius: var(--radius-md); }
.crew-portrait figcaption {
  margin-top: 0.6rem; font-family: var(--font-display); font-size: 0.75rem;
  font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ironwood);
  text-align: center;
}

@media (min-width: 900px) {
  .crew__grid { grid-template-columns: 1.1fr 0.9fr; }
}

/* =========================================================
   Postcards / Logbook testimonials
   ========================================================= */
.postcard-grid { display: grid; gap: 1.75rem; }
.postcard {
  position: relative; background: var(--white); padding: 2.25rem 1.75rem 1.75rem;
  box-shadow: 0 12px 28px -18px rgba(16,35,63,0.3); border-radius: 2px;
}
.postcard blockquote {
  font-family: var(--font-script); font-size: 1.4rem; line-height: 1.35; color: var(--abyss);
  margin-bottom: 1.1rem; max-width: none;
}
.postcard figcaption { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-soft); }

@media (min-width: 860px) {
  .postcard-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   Reserve / Newsletter
   ========================================================= */
.reserve__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.reserve__itinerary p { margin-block: 1rem 1.5rem; }
.reserve__stamp { display: flex; justify-content: center; }
.postcard-photo {
  position: relative; width: 100%; max-width: 220px; aspect-ratio: 3/4;
  display: flex; align-items: flex-end; padding: 1.1rem; transform: rotate(-3deg);
  box-shadow: 0 18px 34px -16px rgba(16,35,63,0.4); overflow: hidden;
}
.postcard-photo picture { position: absolute; inset: 0; }
.postcard-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.postcard-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(16,35,63,0.85), rgba(16,35,63,0.05) 55%);
}
.postcard-photo__label {
  position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper);
}

.reserve__newsletter {
  background: var(--abyss); color: var(--paper); padding: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  border-radius: var(--radius-md);
}
.reserve__newsletter h3 { color: var(--paper); margin-bottom: 0.6rem; }
.reserve__newsletter > p { color: var(--sea-foam); margin-bottom: 1.5rem; max-width: 40ch; }

.newsletter-form { display: flex; border-bottom: 1.5px solid var(--sea-foam); padding-bottom: 0.6rem; gap: 0.75rem; }
.newsletter-form input {
  flex: 1; background: transparent; border: 0; color: var(--paper); font-size: 1rem;
  font-family: var(--font-body);
}
.newsletter-form input::placeholder { color: rgba(244,239,228,0.55); }
.newsletter-form button { color: var(--yellaow); flex-shrink: 0; }
.newsletter-form button svg { width: 22px; height: 22px; transition: transform 0.2s var(--ease); }
.newsletter-form button:hover svg { transform: translateX(3px); }
.newsletter-form__note { font-size: 0.85rem; color: var(--yellaow); margin-top: 0.75rem; min-height: 1.2em; }

.social-row { display: flex; gap: 1rem; margin-top: 2rem; }
.social-row svg { width: 20px; height: 20px; color: var(--sea-foam); transition: color 0.2s var(--ease); }
.social-row a:hover svg { color: var(--yellaow); }

@media (min-width: 900px) {
  .reserve__grid { grid-template-columns: 1.1fr 0.7fr 1fr; align-items: center; }
}
@media (max-width: 899px) {
  .reserve__stamp { order: -1; }
}

/* =========================================================
   Gallery strip
   ========================================================= */
.gallery-strip {
  display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px;
}
.gallery-strip__item {
  aspect-ratio: 1/1; scroll-snap-align: start; position: relative;
  display: block; overflow: hidden; width: 100%; min-width: 0;
}
.gallery-strip__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease); }
.gallery-strip__item:hover img { transform: scale(1.05); }
@media (min-width: 900px) {
  .gallery-strip { grid-template-columns: repeat(8, 1fr); overflow-x: visible; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer { background: var(--abyss); color: var(--paper); padding-block: 3.5rem 1.5rem; position: relative; overflow: hidden; }
.site-footer__grid {
  display: grid; gap: 2.25rem; padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(244,239,228,0.15);
}
.site-footer__brand p { color: var(--sea-foam); margin-top: 0.75rem; font-style: italic; }
.site-footer__contact { margin-top: 1.1rem; display: grid; gap: 0.35rem; }
.site-footer__contact a { color: var(--paper); font-size: var(--fs-small); }
.site-footer__contact a:hover { color: var(--yellaow); }
.site-footer__contact address { font-style: normal; color: rgba(244, 239, 228, 0.7); font-size: var(--fs-small); line-height: 1.4; }
.site-footer__nav a { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--sea-foam); }
.site-footer__nav a:hover { color: var(--yellaow); }
.site-footer__nav ul { display: flex; flex-direction: column; gap: 0.85rem; }

.site-footer__lang select {
  background: transparent; border: 1px solid rgba(244,239,228,0.3); color: var(--paper);
  padding: 0.5em 0.9em; border-radius: 999px; font-family: var(--font-display);
  font-size: 0.75rem; letter-spacing: var(--tracking-caps);
}

.site-footer__legal { padding-top: 1.5rem; }
.site-footer__legal p { color: rgba(244,239,228,0.55); font-size: 0.8rem; }

@media (min-width: 780px) {
  .site-footer__grid { grid-template-columns: 1.3fr 0.85fr 0.85fr 0.85fr 0.7fr; }
}

/* =========================================================
   Wander — scrapbook-style photo/text breaks between sections.
   Three distinct compositions, reused loosely so the scroll never
   settles into one predictable rhythm of section/photo/section.
   ========================================================= */
.wander { padding-block: clamp(2.5rem, 2rem + 2vw, 4.5rem); overflow: hidden; }
.wander__media { box-shadow: 0 20px 40px -20px rgba(16, 35, 63, 0.4); }
.wander__media img { width: 100%; display: block; }
.wander__text p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) {
  font-family: var(--font-body); font-style: italic; color: var(--ink);
  font-size: var(--fs-lead); line-height: 1.55; max-width: 40ch;
}

/* --- wander--1: image bleeds to the viewport edge, text alongside --- */
.wander--1 .wander__row { display: flex; flex-direction: column; gap: 1.75rem; }
.wander--1 .wander__media { transform: rotate(-1.2deg); }
.wander--1 .wander__text { padding-inline: var(--gutter); }
@media (min-width: 760px) {
  .wander--1 .wander__row { flex-direction: row; align-items: center; gap: clamp(2rem, 4vw, 4rem); }
  .wander--1 .wander__media { flex: 1 1 55%; }
  .wander--1 .wander__text { flex: 1 1 40%; padding-inline: 0; padding-right: clamp(1.5rem, 4vw, 4rem); }
}

/* --- wander--2: text one side, a small scattered cluster the other --- */
.wander--2 { background: var(--bg-panel); }
.wander--2 .wander__row {
  max-width: var(--container-w); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; flex-direction: column; gap: 2.5rem;
}
.wander--2 .wander__cluster { position: relative; height: clamp(220px, 32vw, 320px); }
.wander--2 .wander__media--a {
  position: absolute; width: 62%; top: 0; left: 6%; transform: rotate(-4deg); z-index: 2;
}
.wander--2 .wander__media--b {
  position: absolute; width: 44%; bottom: 0; right: 2%; transform: rotate(5deg); z-index: 1;
}
@media (min-width: 760px) {
  .wander--2 .wander__row { flex-direction: row; align-items: center; gap: clamp(2rem, 4vw, 4rem); }
  .wander--2 .wander__text { flex: 1 1 45%; }
  .wander--2 .wander__cluster { flex: 1 1 45%; }
}

/* --- wander--3: two uneven photos, one centred caption beneath --- */
.wander--3 .wander__row {
  max-width: var(--container-w); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem); margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}
.wander--3 .wander__media--a { width: min(56%, 460px); transform: rotate(-2.4deg); }
.wander--3 .wander__media--b { width: min(30%, 240px); transform: rotate(3.4deg); margin-bottom: clamp(0.5rem, 2vw, 2rem); }
.wander__caption {
  font-family: var(--font-script); font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  color: var(--ink-soft); text-align: center; max-width: 42ch; margin-inline: auto;
}

/* =========================================================
   Page hero — a smaller, quieter header band for interior pages
   (The Boat, Itineraries, Booking, News), echoing the homepage
   hero without repeating its full scale.
   ========================================================= */
.page-hero { padding-block: clamp(3rem, 2.4rem + 3vw, 5.5rem) clamp(2.5rem, 2rem + 2vw, 4rem); position: relative; }
.page-hero--tight { padding-block: clamp(2rem, 1.6rem + 1.5vw, 3rem) clamp(2.5rem, 2rem + 2vw, 4rem); }
.page-hero__inner { max-width: 62ch; }
.page-hero__lead { font-size: var(--fs-lead); max-width: 46ch; margin-top: 1rem; }
.page-hero .breadcrumb {
  font-family: var(--font-display); font-size: 0.75rem; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.25rem; display: block;
}
.page-hero .breadcrumb a { border-bottom: 1px solid transparent; }
.page-hero .breadcrumb a:hover { border-color: currentColor; }

/* =========================================================
   Crew cards — fuller "logbook" portraits than the homepage's
   compact teaser grid. Name + role + one line, never a CV.
   ========================================================= */
/* Service gallery — a cleaner, more hospitality/editorial photo
   treatment than the site's usual polaroids, to open "Service Aboard"
   before dropping into the individual crew cards below. */
.service-gallery {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: end;
}
.service-gallery__photo {
  margin: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: 0 14px 30px -20px rgba(16, 35, 63, 0.4);
}
.service-gallery__photo picture, .service-gallery__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.service-gallery__caption {
  grid-column: 1 / -1; font-family: var(--font-script); font-size: 1.3rem;
  line-height: 1.35; color: var(--ink-soft); max-width: 56ch;
}
@media (max-width: 640px) {
  .service-gallery { grid-template-columns: 1fr 1fr; }
}

.crew-card-grid {
  display: grid; gap: clamp(2rem, 1.6rem + 1.5vw, 3rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.crew-card { display: flex; flex-direction: column; align-items: flex-start; }
.crew-card__photo {
  width: 100%; max-width: 260px; aspect-ratio: 4/5; margin-bottom: 1.1rem;
}
.crew-card:nth-child(3n+1) .crew-card__photo { transform: rotate(-2deg); }
.crew-card:nth-child(3n+2) .crew-card__photo { transform: rotate(1.6deg); }
.crew-card:nth-child(3n+3) .crew-card__photo { transform: rotate(-1.2deg); }
.crew-card__name { margin-bottom: 0.15rem; }
.crew-card__role {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ironwood);
  margin-bottom: 0.6rem;
}
.crew-card__note { font-size: var(--fs-small); font-style: italic; color: var(--ink); }

/* =========================================================
   Itinerary entries — one route per "journal page", alternating
   sides so the list never reads like a product grid.
   ========================================================= */
.itinerary-entry {
  display: grid; gap: clamp(1.75rem, 1.4rem + 1.5vw, 3rem); align-items: center;
  padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.itinerary-entry + .itinerary-entry { border-top: 1px dashed rgba(16, 35, 63, 0.14); }
.itinerary-entry__photo { position: relative; }
.itinerary-entry__photo .polaroid { width: 100%; max-width: 420px; }
.itinerary-entry__meta {
  display: flex; flex-wrap: wrap; gap: 0.6em 1.4em; margin-block: 0.9rem 1.25rem;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ironwood);
}
.itinerary-entry__meta span { color: var(--ink-soft); font-weight: 500; }
.itinerary-entry__body p:not(.itinerary-entry__meta) { margin-bottom: 1.5rem; }
.itinerary-entry__actions { display: flex; flex-wrap: wrap; gap: 1rem 1.75rem; align-items: center; }

@media (min-width: 860px) {
  .itinerary-entry { grid-template-columns: 0.85fr 1.15fr; }
  .itinerary-entry:nth-child(even) .itinerary-entry__photo { order: 2; }
}

/* =========================================================
   Cabin map — a stylised deck plan, "cinema seating chart"
   in spirit. Illustration only: no selection logic behind it.
   ========================================================= */
.cabin-map__deck { margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem); }
.cabin-map__deck-label {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-display); font-size: 0.75rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 1.25rem;
}
.cabin-map__deck-label::after { content: ""; flex: 1; height: 1px; background: rgba(16,35,63,0.15); }
.cabin-map__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }

.cabin-slot {
  position: relative; background: var(--white); border-radius: var(--radius-md);
  padding: 1.1rem 1rem; box-shadow: 0 8px 20px -14px rgba(16,35,63,0.35);
  border-top: 3px solid var(--status-available); scroll-margin-top: 100px;
  transition: box-shadow 0.2s var(--ease);
}
.cabin-slot.is-linked { box-shadow: 0 0 0 3px var(--yellaow), 0 8px 20px -14px rgba(16,35,63,0.35); }
.cabin-slot--flash { animation: cabin-slot-flash 1.5s var(--ease); }
@keyframes cabin-slot-flash {
  0% { background: rgba(231, 199, 122, 0.55); }
  100% { background: var(--white); }
}
.cabin-slot--unavailable { border-top-color: var(--status-unavailable); }
.cabin-slot__status {
  display: inline-flex; align-items: center; gap: 0.4em; margin-bottom: 0.6rem;
  font-family: var(--font-display); font-size: 0.65rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--status-available);
}
.cabin-slot__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--status-available); }
.cabin-slot--unavailable .cabin-slot__status { color: var(--status-unavailable); }
.cabin-slot--unavailable .cabin-slot__status::before { background: var(--status-unavailable); }
.cabin-slot--unavailable .cabin-slot__name,
.cabin-slot--unavailable .cabin-slot__detail { opacity: 0.65; }
.cabin-slot__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--abyss); margin-bottom: 0.2rem; }
.cabin-slot__detail { font-size: 0.8rem; color: var(--ink-soft); }
.cabin-map__legend { display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; margin-top: 0.5rem; }
.cabin-map__legend li {
  display: flex; align-items: center; gap: 0.5em;
  font-family: var(--font-display); font-size: 0.75rem; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--ink-soft);
}
.cabin-map__legend li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--status-available); }
.cabin-map__legend li:nth-child(2)::before { background: var(--status-unavailable); }

/* =========================================================
   Booking search — a small, honest search engine, not a
   flight-comparator. Search bar + filters, a hand-drawn
   calendar, and a results list of real departures.
   ========================================================= */
.booking-search { margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem); }
.booking-search__bar {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--white); border: 1.5px solid rgba(16, 35, 63, 0.16); border-radius: 999px;
  padding: 0.85rem 1.4rem; margin-bottom: 1.25rem; transition: border-color 0.2s var(--ease);
}
.booking-search__bar:focus-within { border-color: var(--ironwood); }
.booking-search__bar svg { width: 20px; height: 20px; color: var(--ink-soft); flex-shrink: 0; }
.booking-search__bar input {
  flex: 1; border: none; background: none; font-family: var(--font-body); font-size: 1rem;
  color: var(--abyss);
}
.booking-search__bar input:focus { outline: none; }
.booking-search__bar input::placeholder { color: var(--ink-soft); opacity: 0.75; }

.booking-search__filters { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; }
.booking-search__filter { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 170px; min-width: 150px; }
.booking-search__filter span {
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-soft);
}
.booking-search__filter select {
  appearance: none; -webkit-appearance: none; font-family: var(--font-body); font-size: 0.9rem;
  color: var(--abyss); background: var(--white)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="%238A6A4A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>')
    no-repeat right 0.85rem center / 16px;
  border: 1.5px solid rgba(16, 35, 63, 0.16); border-radius: 10px; padding: 0.65rem 2.2rem 0.65rem 0.9rem;
  transition: border-color 0.2s var(--ease);
}
.booking-search__filter select:focus { outline: none; border-color: var(--ironwood); }

/* --- Calendar --- */
.booking-calendar {
  border: 1.5px dashed rgba(16, 35, 63, 0.22); border-radius: var(--radius-md);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem); margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}
.booking-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.booking-calendar__month {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--abyss);
}
.booking-calendar__nav { display: flex; gap: 0.6rem; }
.booking-calendar__nav button {
  width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ironwood);
  color: var(--abyss); display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.booking-calendar__nav button:disabled { opacity: 0.3; cursor: default; }
.booking-calendar__nav button:not(:disabled):hover { background: var(--abyss); color: var(--paper); }
.booking-calendar__nav button svg { width: 16px; height: 16px; }
.booking-calendar__weekdays, .booking-calendar__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem;
}
.booking-calendar__weekdays {
  font-family: var(--font-display); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); text-align: center;
  margin-bottom: 0.5rem;
}
.booking-calendar__day {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 0.82rem; color: var(--ink-soft); position: relative;
}
.booking-calendar__day--empty { visibility: hidden; }
.booking-calendar__day--has-departure {
  cursor: pointer; color: var(--abyss); font-weight: 600; border: 1.5px solid var(--yellaow);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.booking-calendar__day--has-departure:hover { background: rgba(231, 199, 122, 0.3); }
.booking-calendar__day--has-departure::after {
  content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ironwood); margin-top: 1px;
}
.booking-calendar__day--selected { background: var(--abyss); color: var(--paper); border-color: var(--abyss); }
.booking-calendar__day--selected::after { background: var(--paper); }
.booking-calendar__hint {
  font-size: 0.78rem; font-style: italic; color: var(--ink-soft); margin-top: 1rem; text-align: center;
}
.booking-calendar__clear {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--open-sea); text-decoration: underline; text-underline-offset: 3px;
}

/* --- Results --- */
.booking-results__count { font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: 1.25rem; }
.booking-results__empty {
  font-size: var(--fs-small); font-style: italic; color: var(--ink-soft);
  padding: 2rem 0; text-align: center;
}
.booking-results { display: flex; flex-direction: column; gap: 1.1rem; }

.cruise-card {
  background: var(--white); border-radius: var(--radius-md);
  box-shadow: 0 8px 22px -16px rgba(16, 35, 63, 0.35); overflow: hidden;
}
.cruise-card__head {
  width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  display: grid; grid-template-columns: 1.6fr auto auto auto; align-items: center;
  gap: 1rem 1.5rem; padding: 1.25rem 1.5rem; font: inherit; color: inherit;
}
.cruise-card__name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--abyss); }
.cruise-card__meta { display: block; font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.2rem; }
.cruise-card__avail {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--status-available); white-space: nowrap;
}
.cruise-card__avail--low { color: var(--ironwood); }
.cruise-card__avail--none { color: var(--status-unavailable); }
.cruise-card__mini { display: flex; gap: 3px; }
.cruise-card__mini span {
  width: 10px; height: 18px; border-radius: 3px; background: var(--status-available);
}
.cruise-card__mini span[data-status="unavailable"] { background: var(--status-unavailable); }
.cruise-card__toggle {
  display: inline-flex; align-items: center; gap: 0.4rem; justify-self: end;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--open-sea);
  border: 1.5px solid var(--open-sea); border-radius: 999px; padding: 0.5em 1em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.cruise-card__toggle svg { width: 13px; height: 13px; transition: transform 0.25s var(--ease); }
.cruise-card__head:hover .cruise-card__toggle,
.cruise-card__head:focus-visible .cruise-card__toggle { background: var(--open-sea); color: var(--paper); }
.cruise-card__head[aria-expanded="true"] .cruise-card__toggle svg { transform: rotate(180deg); }
.cruise-card__panel {
  padding: 0 1.5rem 1.5rem; border-top: 1px dashed rgba(16, 35, 63, 0.14);
}
.cruise-card__panel .cabin-map__row {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 1.25rem;
}
.cruise-card__panel .cabin-slot { box-shadow: none; border: 1px solid rgba(16, 35, 63, 0.1); }

@media (max-width: 700px) {
  .cruise-card__head { grid-template-columns: 1fr auto; }
  .cruise-card__mini { grid-column: 1 / -1; order: 3; }
  .cruise-card__toggle { grid-column: 1 / -1; order: 4; justify-self: start; }
}

/* =========================================================
   Journal / news entries — logbook pages, not blog cards.
   ========================================================= */
.journal-grid {
  display: grid; gap: clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.journal-entry { display: flex; flex-direction: column; }
.journal-entry__date {
  font-family: var(--font-display); font-size: 0.7rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ironwood);
  margin-bottom: 0.75rem;
}
.journal-entry__photo { margin-bottom: 1.1rem; }
.journal-entry__photo .polaroid { width: 100%; }
.journal-entry h3 { margin-bottom: 0.5rem; }
.journal-entry p { font-size: var(--fs-small); }
.journal-entry__quote {
  font-family: var(--font-script); font-size: 1.3rem; color: var(--ink-soft);
  margin-top: 0.75rem; max-width: none;
}
.journal-entry--tilt-a { transform: rotate(-1deg); }
.journal-entry--tilt-b { transform: rotate(0.8deg); }

/* --- Events strip: a distinct, calmer treatment for what's ahead --- */
.event-strip { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.event-card {
  display: flex; gap: 1.25rem; align-items: center; background: var(--white);
  padding: 1.5rem; border-radius: var(--radius-md); box-shadow: 0 10px 26px -18px rgba(16,35,63,0.3);
}
.event-card__date {
  flex-shrink: 0; width: 66px; height: 66px; border-radius: 50%;
  border: 1.5px dashed var(--yellaow); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.event-card__date b { font-family: var(--font-display); font-size: 1.3rem; color: var(--abyss); line-height: 1; }
.event-card__date span { font-family: var(--font-display); font-size: 0.6rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ironwood); }
.event-card h3 { font-size: 1.05rem; margin-bottom: 0.3rem; color: var(--abyss); }
.event-card p { font-size: 0.85rem; color: var(--ink-soft); }

/* =========================================================
   Route sketch — a stylised (non-functional) map flourish for
   the itineraries page: a dashed course between four stops.
   ========================================================= */
.route-sketch { color: var(--ironwood); width: 100%; height: auto; }
.route-sketch text {
  font-family: var(--font-display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; fill: var(--ink-soft);
}

/* --- Trip map: illustrated, clickable, not a real chart. Large and
   full-bleed-ish — the map is the centrepiece of the Itineraries page,
   not a small inset. --- */
.trip-map-wrap { max-width: 1800px; margin-inline: auto; padding-inline: clamp(12px, 3vw, 48px); }
.trip-map { position: relative; margin-block: 0.5rem 0.75rem; border-radius: var(--radius-lg, 20px); overflow: hidden; box-shadow: 0 24px 60px -30px rgba(16, 35, 63, 0.45); }
.trip-map__canvas { display: block; width: 100%; height: auto; color: var(--ironwood); }
.trip-map__island { fill: #8A9873; fill-opacity: 0.92; stroke: #5F6B47; stroke-width: 2; }
.trip-map__island--faint { fill-opacity: 0.55; stroke-opacity: 0.6; }
.trip-map__islet { fill: #5F6B47; fill-opacity: 0.7; }
.trip-map__sea-label {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; fill: var(--paper); opacity: 0.75;
}
.trip-map__compass { color: var(--paper); opacity: 0.7; }
.trip-map__compass text { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.06em; fill: currentColor; }

.trip-map__stop {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  padding: 0.35rem; pointer-events: none;
}
.trip-map__dot {
  width: 13px; height: 13px; border-radius: 50%; background: var(--yellaow);
  border: 1.5px solid var(--abyss);
}
.trip-map__label {
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--abyss);
  white-space: nowrap; background: var(--paper); padding: 0.15em 0.65em; border-radius: 4px;
  box-shadow: 0 4px 12px -6px rgba(16, 35, 63, 0.5);
}
.trip-map__hint { font-size: 0.8rem; font-style: italic; color: var(--ink-soft); text-align: center; }

/* The route itself is the clickable element — not a port pin. Twenty of
   these, fanned near their region, each linking to its own itinerary
   card below. */
.trip-map__route { cursor: pointer; }
.trip-map__route-hit { fill: none; stroke: var(--paper); stroke-opacity: 0; stroke-width: 16; pointer-events: stroke; }
.trip-map__route-line {
  fill: none; stroke: var(--yellaow); stroke-width: 2.25; stroke-dasharray: 1 6; stroke-linecap: round;
  pointer-events: none; transition: stroke-width 0.2s var(--ease), opacity 0.2s var(--ease);
}
.trip-map__route-mark {
  fill: var(--yellaow); stroke: var(--abyss); stroke-width: 1.2; pointer-events: none;
  transition: transform 0.2s var(--ease), fill 0.2s var(--ease); transform-box: fill-box; transform-origin: center;
}
.trip-map__route:hover .trip-map__route-line,
.trip-map__route:focus-visible .trip-map__route-line { stroke-width: 3.5; }
.trip-map__route:hover .trip-map__route-mark,
.trip-map__route:focus-visible .trip-map__route-mark { fill: var(--paper); transform: scale(1.4); }
.trip-map__route:focus-visible { outline: none; }
.trip-map__route:focus-visible .trip-map__route-hit { stroke-opacity: 0.15; }

@media (max-width: 560px) {
  .trip-map__label { font-size: 0.65rem; padding: 0.1em 0.5em; }
}

/* =========================================================
   Itinerary grid — twenty routes as small flip cards. Tap to
   reveal a one-line preview, tap again to open the full route.
   ========================================================= */
.itin-grid__intro {
  max-width: 56ch; margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  color: var(--ink-soft); font-size: var(--fs-small);
}
.itin-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.itin-grid--loading { min-height: 240px; }

.itin-card { perspective: 1400px; scroll-margin-top: 100px; border-radius: var(--radius-md); }
.itin-card:target { animation: itin-card-flash 1.8s var(--ease); }
@keyframes itin-card-flash {
  0% { box-shadow: 0 0 0 4px var(--yellaow); }
  100% { box-shadow: 0 0 0 0 rgba(231, 199, 122, 0); }
}
.itin-card__inner {
  position: relative; width: 100%; height: 360px;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d;
}
.itin-card.itin-card--flipped .itin-card__inner,
.itin-card__inner.is-flipped { transform: rotateY(180deg); }

.itin-card__face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-md);
  background: var(--white); box-shadow: 0 12px 28px -18px rgba(16, 35, 63, 0.35);
  overflow: hidden;
}
.itin-card__face--front {
  display: flex; flex-direction: column; text-align: left; cursor: pointer;
  border: none; padding: 0; width: 100%; font: inherit; color: inherit;
  appearance: none; -webkit-appearance: none; background: var(--white);
  transition: box-shadow 0.2s var(--ease);
}
.itin-card__face--front:hover, .itin-card__face--front:focus-visible { box-shadow: 0 18px 34px -18px rgba(16, 35, 63, 0.45); }
.itin-card__photo { display: block; aspect-ratio: 4 / 3; background: var(--sea-foam); }
.itin-card__photo picture, .itin-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.itin-card__front-body { padding: 0.9rem 1rem 0.4rem; flex: 1; }
.itin-card__eyebrow {
  display: block; font-family: var(--font-display); font-size: 0.62rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ironwood); margin-bottom: 0.3rem;
}
.itin-card__name {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.98rem;
  color: var(--abyss); line-height: 1.25; margin-bottom: 0.35rem;
}
.itin-card__meta {
  display: block; font-size: 0.72rem; color: var(--ink-soft); font-style: italic;
}
.itin-card__flip-hint {
  display: block; font-size: 0.66rem; font-style: italic; color: var(--ink-soft);
  opacity: 0.7; padding: 0 1rem 0.8rem; text-align: left;
}

.itin-card__face--back { transform: rotateY(180deg); background: var(--bg-warm); }
.itin-card__unflip {
  position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-display); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--paper); border: 1px solid rgba(16, 35, 63, 0.14); border-radius: 999px;
  padding: 0.3em 0.65em 0.3em 0.5em; transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.itin-card__unflip svg { width: 12px; height: 12px; }
.itin-card__unflip:hover { color: var(--abyss); border-color: var(--ironwood); }
.itin-card__back-link {
  position: absolute; inset: 0; z-index: 1; padding: 2.75rem 1.1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.itin-card__back-link .itin-card__eyebrow { margin-bottom: 0; }
.itin-card__back-link .itin-card__name { font-size: 1.05rem; }
.itin-card__teaser {
  display: block; font-family: var(--font-script); font-size: 1.15rem; line-height: 1.25; color: var(--ink-soft); flex: 1;
}
.itin-card__back-link .itin-card__meta { font-style: normal; }
.itin-card__link {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--open-sea);
  transition: gap 0.2s var(--ease);
}
.itin-card__link svg { width: 15px; height: 15px; }
.itin-card__back-link:hover .itin-card__link, .itin-card__back-link:focus-visible .itin-card__link { gap: 0.65rem; }

/* Brief highlight when a route is reached via the trip map or a direct link */
.itinerary-entry { scroll-margin-top: 100px; border-radius: var(--radius-md); }
.itinerary-entry:target { animation: itinerary-highlight 1.8s var(--ease); }
@keyframes itinerary-highlight {
  0% { background: rgba(231, 199, 122, 0.4); }
  100% { background: rgba(231, 199, 122, 0); }
}

/* =========================================================
   Build carousel — flip cards you scroll through, not a
   corporate progress bar. Tap/click flips a card in place;
   the arrows (or a swipe) move along the sequence.
   ========================================================= */
.build-carousel__hint {
  font-size: 0.8rem; font-style: italic; color: var(--ink-soft);
  margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem); margin-bottom: 1.5rem; text-align: center;
}
.build-carousel { position: relative; }
.build-carousel__track {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0.5rem 0.25rem 1.25rem;
}
.build-card {
  flex: 0 0 auto; width: min(72vw, 250px); scroll-snap-align: start;
  perspective: 1300px; cursor: pointer;
}
.build-card__inner {
  position: relative; width: 100%; height: 290px;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d;
}
.build-card.is-flipped .build-card__inner { transform: rotateY(180deg); }
.build-card__face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: var(--radius-md);
  background: var(--white); box-shadow: 0 12px 28px -18px rgba(16, 35, 63, 0.35);
  padding: 1.75rem 1.5rem; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 0.9rem;
  transition: box-shadow 0.2s var(--ease);
}
.build-card:hover .build-card__face, .build-card:focus-visible .build-card__face {
  box-shadow: 0 18px 34px -18px rgba(16, 35, 63, 0.45);
}
.build-card__face--back { transform: rotateY(180deg); background: var(--bg-warm); }
.build-card__stamp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; border: 1.5px dashed var(--ironwood);
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--abyss);
}
.build-card__stamp--sm { width: 46px; height: 46px; font-size: 0.58rem; }
.build-card__teaser { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--abyss); }
.build-card__detail { font-family: var(--font-script); font-size: 1.3rem; line-height: 1.3; color: var(--ink-soft); }
.build-card__flip-hint { font-size: 0.68rem; font-style: italic; color: var(--ink-soft); opacity: 0.75; }

/* Cabin-type cards reuse the exact .build-card flip mechanic (and
   build-timeline.js, which wires up every .build-card on the page), just
   laid out in a static grid instead of a scrolling carousel. */
.cabin-type-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.cabin-type-grid .build-card { width: 100%; }
.cabin-type-grid .build-card__inner { height: 240px; }
.cabin-type-grid .build-card__detail { font-size: 1.1rem; }

.build-carousel__nav { display: flex; justify-content: center; gap: 1rem; margin-top: 0.25rem; }
.build-carousel__arrow {
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ironwood);
  color: var(--abyss); display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.build-carousel__arrow svg { width: 18px; height: 18px; }
.build-carousel__arrow:hover { background: var(--abyss); color: var(--paper); }

/* =========================================================
   Boat explorer — a clickable deck-plan illustration.
   ========================================================= */
.boat-explorer { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3rem); align-items: center; }
.boat-explorer__diagram { position: relative; }
.boat-explorer__hull { display: block; width: 100%; height: auto; color: var(--ironwood); }

.boat-explorer__hotspot {
  position: absolute; transform: translate(-50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(244, 239, 228, 0.92); border: 1.5px solid var(--ironwood);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.boat-explorer__hotspot-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellaow); transition: background 0.2s var(--ease); }
.boat-explorer__hotspot:hover, .boat-explorer__hotspot:focus-visible { transform: translate(-50%, -50%) scale(1.15); }
.boat-explorer__hotspot.is-active { background: var(--abyss); border-color: var(--abyss); box-shadow: 0 0 0 5px rgba(16, 35, 63, 0.15); }
.boat-explorer__hotspot.is-active .boat-explorer__hotspot-dot { background: var(--yellaow); }

.boat-explorer__detail {
  background: var(--white); border-radius: var(--radius-md); overflow: hidden;
  display: flex; flex-direction: column; min-height: 150px;
  box-shadow: 0 10px 26px -18px rgba(16, 35, 63, 0.3);
}
.boat-explorer__detail-photo { display: block; aspect-ratio: 16 / 10; background: var(--sea-foam); }
.boat-explorer__detail-photo picture, .boat-explorer__detail-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.boat-explorer__detail-text { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.boat-explorer__detail p:last-child { margin-bottom: 0; }
.boat-explorer__hint { font-size: 0.8rem; font-style: italic; color: var(--ink-soft); text-align: center; margin-top: 1.25rem; }

@media (min-width: 860px) {
  .boat-explorer { grid-template-columns: 1.3fr 0.7fr; }
}

/* =========================================================
   CTA split — a simple two-up closer, reused at the foot of
   interior pages to point at the next logical step.
   ========================================================= */
.cta-split { display: grid; gap: clamp(2rem, 1.6rem + 1.5vw, 3rem); }
.cta-split > div p { margin-block: 0.75rem 1.25rem; }
@media (min-width: 700px) {
  .cta-split { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   Scroll reveal
   ========================================================= */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1.is-visible { transition-delay: 0.1s; }
.reveal--delay-2.is-visible { transition-delay: 0.2s; }
.reveal--delay-3.is-visible { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================================
   HOMEPAGE v2 — rebuilt from the Canva mockup (HOMEPAGE-WAOW2.png).
   Every color below was colour-picked directly from that export; all of
   them turned out to match the existing brand tokens exactly, so this
   block reuses --abyss / --open-sea / --sea-foam / --sail-linen / --yellaow
   / --ironwood rather than inventing new hex values. Classes are prefixed
   "hp-" since this section's layout language (striped backgrounds,
   overlapping photo pairs, postal stamps, postcards) is specific to this
   page and not meant to leak into the shared site vocabulary above.
   ========================================================================= */

.btn--outline {
  background: none; color: var(--abyss); border: 1.5px solid var(--abyss); border-radius: 0;
}
.btn--outline:hover { background: var(--abyss); color: var(--paper); }

.hp-divider {
  height: 6px; background:
    repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) top / 100% 1.5px no-repeat,
    repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) bottom / 100% 1.5px no-repeat;
}

/* --- Hero: full photo + square postal-stamp mark --- */
.hp-hero { padding-block: 20px; }
.hp-hero__photo { position: relative; border-radius: var(--radius-md); overflow: hidden; }
.hp-hero__photo picture, .hp-hero__photo img { display: block; width: 100%; height: auto; }
.hp-stamp {
  position: absolute; left: clamp(1.25rem, 4vw, 3rem); top: 50%; transform: translateY(-50%);
  width: clamp(120px, 13vw, 168px); aspect-ratio: 1; color: var(--paper);
}
.hp-stamp rect { fill: none; stroke: currentColor; stroke-width: 1.4; }
.hp-stamp text { font-family: var(--font-display); fill: currentColor; text-anchor: middle; }
.hp-stamp__ship { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; }

/* --- Intro: "Indonesia, beyond the surface" --- */
.hp-intro { padding-block: var(--section-pad); }
.hp-intro__grid { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: center; }
.hp-intro__copy h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  color: var(--open-sea); line-height: 1.05; letter-spacing: 0.01em;
  font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); margin-bottom: 1.5rem;
}
.hp-intro__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); font-size: var(--fs-body); line-height: 1.6; }
.hp-intro__copy p + p { margin-top: 1.1rem; }
.hp-intro__copy .link-arrow { color: var(--open-sea); margin-top: 1.75rem; }
.hp-intro__visual { position: relative; min-height: clamp(280px, 34vw, 460px); }
.hp-intro__photo { position: absolute; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 20px 40px -22px rgba(16, 35, 63, 0.4); }
.hp-intro__photo picture, .hp-intro__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-intro__photo--a { width: 62%; top: 0; right: 0; aspect-ratio: 4 / 5; z-index: 1; }
.hp-intro__photo--b { width: 46%; left: 0; bottom: 0; aspect-ratio: 1 / 1.05; z-index: 2; }
.hp-postmark { position: absolute; right: 6%; bottom: -8%; width: clamp(70px, 8vw, 110px); color: var(--yellaow); z-index: 3; }
@media (min-width: 860px) { .hp-intro__grid { grid-template-columns: 0.95fr 1.1fr; } }

/* --- The Boat: striped panel + overlapping photos + stats --- */
.hp-boat { position: relative; padding-block: var(--section-pad); overflow: hidden;}
.hp-boat__stripes {
  position: absolute; inset: 0 42% 0 0; z-index: 0;
  background-image: repeating-linear-gradient(90deg, var(--sea-foam) 0 8px, var(--bg-page) 8px 19px);
}
.hp-boat__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; }
.hp-boat__collage { position: relative; min-height: clamp(280px, 32vw, 420px); }
.hp-boat__photo { position: absolute; box-shadow: 0 18px 36px -20px rgba(16, 35, 63, 0.45); overflow: hidden; }
.hp-boat__photo picture, .hp-boat__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-boat__photo--a { width: 68%; top: 0; left: 4%; aspect-ratio: 4 / 5; z-index: 1; }
.hp-boat__photo--b { width: 46%; bottom: 0; right: 0; aspect-ratio: 1 / 1.05; z-index: 2; }
.hp-boat__script {
  font-family: var(--font-script); color: var(--open-sea); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  text-align: center; line-height: 1.5; text-orientation: mixed;
  justify-self: center; display: none;
}
.hp-boat__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); line-height: 1.05; margin-bottom: 1.25rem;
}
.hp-boat__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { color: var(--abyss); font-family: var(--font-body); max-width: 40ch; }
.hp-boat__copy .link-arrow { color: var(--open-sea); margin-top: 1.25rem; }
.hp-boat__stats { display: flex; gap: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem); }
.hp-boat__stats li { text-align: center; }
.hp-boat__stats span { display: block; font-family: var(--font-display); font-weight: 700; color: var(--open-sea); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); }
.hp-boat__stats li { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--abyss); }
@media (min-width: 900px) {
  .hp-boat__grid { grid-template-columns: 1.1fr 0.2fr 1.1fr; gap: 10%; }
  .hp-boat__script { display: block; }
}

/* --- Life Onboard: three photo columns --- */
.hp-life { padding-block: var(--section-pad); }
.hp-eyebrow-script {
  font-family: var(--font-script); font-weight: 700; color: var(--ironwood);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}
.hp-life__grid { display: grid; gap: clamp(2rem, 1.6rem + 1.5vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hp-life__grid figure { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3.6; margin-bottom: 1.25rem; }
.hp-life__grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-life__grid h3 { font-family: var(--font-display); font-weight: 700; color: var(--open-sea); text-transform: uppercase; font-size: 1.05rem; margin-bottom: 0.6rem; }
.hp-life__grid p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { color: var(--abyss); font-family: var(--font-body); font-size: var(--fs-small); line-height: 1.6; }
.hp-life__link { display: flex; justify-content: flex-end; color: var(--ironwood); margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }

/* --- A Family Affair --- */
.hp-family { position: relative; background: var(--open-sea); color: var(--paper); padding-block: var(--section-pad); overflow: hidden; }
.hp-family__stripes {
  position: absolute; inset: 0 0 0 auto; width: clamp(60px, 8vw, 130px); z-index: 0;
  background-image: repeating-linear-gradient(90deg, var(--sea-foam) 0 10px, var(--open-sea) 10px 24px);
}
.hp-family__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; }
.hp-family__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--sea-foam);
  font-size: clamp(2.2rem, 1.6rem + 3vw, 3.2rem); line-height: 1.05; margin-bottom: 1.25rem;
}
.hp-family__script { font-family: var(--font-script); color: var(--paper); font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); margin-bottom: 1.5rem; }
.hp-family__copy p:not(.hp-family__script) { color: var(--paper); font-family: var(--font-body); max-width: 46ch; line-height: 1.7; }
.hp-family__link { color: var(--paper); margin-top: 1.75rem; }
.hp-family__link:hover { color: var(--sea-foam); }
.hp-family__visual { position: relative; }
.hp-family__visual figure { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3.4; box-shadow: 0 20px 44px -22px rgba(16, 35, 63, 0.5); }
.hp-family__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-family__visual .dot-icon { position: absolute; left: -6%; bottom: -12%; width: clamp(90px, 10vw, 130px); }
@media (min-width: 860px) { .hp-family__grid { grid-template-columns: 1fr 1fr; } }

/* --- Dive into Indonesia --- */
.hp-dive { padding-block: var(--section-pad); }
.hp-dive__grid { display: grid; gap: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); align-items: start; }
.hp-dive__col { position: relative; }
.hp-dive__photo { position: relative; border-radius: var(--radius-sm); aspect-ratio: 3 / 4; }
.hp-dive__photo--left { overflow: hidden; }
.hp-dive__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-dive__photo--left figcaption {
  position: absolute; left: 1.25rem; bottom: 1.25rem; right: 1.25rem;
  font-family: var(--font-script); color: var(--paper); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); line-height: 1.3;
  text-shadow: 0 2px 10px rgba(16, 35, 63, 0.5);
}
.hp-dive__caption-out {
  font-family: var(--font-script); color: var(--open-sea); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  margin-top: 0.6rem;
}
.hp-dive__photo--right { overflow: visible; }
.hp-dive__photo-inner { display: block; width: 100%; height: 100%; border-radius: var(--radius-sm); overflow: hidden; }
.hp-dive__mask-icon {
  position: absolute; left: -26%; top: -22%; width: clamp(150px, 17vw, 210px); z-index: 2;
}
.hp-dive__copy { text-align: center; }
.hp-dive__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--open-sea);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem); line-height: 1.1; margin-bottom: 1.5rem;
}
.hp-dive__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { color: var(--abyss); font-family: var(--font-body); max-width: 38ch; margin-inline: auto; }
.hp-dive__copy p + p { margin-top: 1.1rem; }
.hp-dive__copy .link-arrow { justify-content: center; color: var(--open-sea); margin-top: 1.5rem; }
@media (min-width: 900px) {
  .hp-dive__grid {
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: stretch;
    min-height: clamp(560px, 42vw, 760px);
  }
  /* Staggered/diagonal placement: left photo pinned top, right photo
     pinned bottom, the copy column centered between them. */
  .hp-dive__col:first-child { align-self: start; }
  .hp-dive__col:last-child { align-self: end; }
  .hp-dive__copy { align-self: center; }
}

/* --- Safety First --- */
.hp-safety { padding-block: var(--section-pad); }
.hp-safety__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; }
.hp-safety__photo { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3.5; }
.hp-safety__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-safety__photo .dot-icon { position: absolute; right: -8%; bottom: -12%; width: clamp(80px, 9vw, 120px); }
.hp-safety__copy { text-align: center; }
.hp-safety__title {
  font-family: var(--font-script); font-weight: 700; color: var(--abyss);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-bottom: 1.25rem;
}
.hp-safety__copy p:not(.hp-safety__title) { color: var(--abyss); font-family: var(--font-body); max-width: 32ch; margin-inline: auto; }
.hp-safety__copy .link-arrow { justify-content: center; color: var(--open-sea); margin-top: 1.5rem; }
@media (min-width: 780px) { .hp-safety__grid { grid-template-columns: 1fr 1fr; } .hp-safety__copy { text-align: left; } .hp-safety__copy p, .hp-safety__copy .link-arrow { margin-inline: 0; } }

/* --- Explore Indonesia (dark) --- */
.hp-explore { background: var(--abyss); color: var(--paper); padding-block: var(--section-pad); }
.hp-explore__head { text-align: center; max-width: 60ch; margin-inline: auto; }
.hp-explore__head h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--sea-foam);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); line-height: 1.1; margin-bottom: 1.25rem;
}
.hp-explore__head p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { color: var(--paper); font-family: var(--font-body); }
.hp-explore__head .link-arrow { justify-content: center; color: var(--sea-foam); margin-top: 1.5rem; }

.hp-stamp-row { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 0.8rem + 1vw, 1.75rem); margin-top: clamp(3rem, 2.4rem + 2.5vw, 4.5rem); }
.hp-dest-stamp { width: 132px; color: var(--sea-foam); }
.hp-dest-stamp rect { fill: rgba(175, 194, 210, 0.08); stroke: currentColor; stroke-width: 1; stroke-dasharray: 1.5 3; }
.hp-dest-stamp text { font-family: var(--font-display); fill: currentColor; text-anchor: middle; }

.hp-coming-next { margin-top: clamp(3.5rem, 2.8rem + 3vw, 5.5rem); }
.hp-coming-next__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.hp-coming-next__track {
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem;
}
.hp-coming-next__card { flex: 0 0 auto; width: min(70vw, 260px); scroll-snap-align: start; }
.hp-coming-next__card figure { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3.2; margin-bottom: 0.85rem; }
.hp-coming-next__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-coming-next__card figcaption {
  position: absolute; inset: auto 1rem 1rem 1rem; font-family: var(--font-script); font-weight: 700;
  color: var(--paper); font-size: 1.25rem; line-height: 1.25; text-shadow: 0 2px 10px rgba(16, 35, 63, 0.6);
}
.hp-coming-next__card p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); font-style: italic; color: var(--sea-foam); font-size: var(--fs-small); }
.hp-coming-next__nav {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--sea-foam); color: var(--sea-foam);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.hp-coming-next__nav:hover { background: var(--sea-foam); color: var(--abyss); }
.hp-coming-next__nav svg { width: 18px; height: 18px; }
.hp-coming-next__row { display: flex; align-items: center; gap: 1rem; }

/* --- Memories of WAOW 1 --- */
.hp-memories { padding-block: var(--section-pad); text-align: center; }
.hp-memories__head { max-width: 62ch; margin-inline: auto; }
.hp-memories h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--abyss);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.5rem); margin-bottom: 1.5rem;
}
.hp-memories p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { color: var(--abyss); font-family: var(--font-body); }
.hp-memories p + p { margin-top: 1rem; }
.hp-memories .link-arrow { justify-content: center; color: var(--open-sea); margin-top: 1.75rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }

.hp-postcards { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); text-align: left; }
.hp-postcard {
  position: relative; background: var(--white); padding: 1.75rem 1.5rem; min-height: 200px;
  box-shadow: 0 14px 30px -20px rgba(16, 35, 63, 0.35);
}
.hp-postcard:nth-child(odd) { transform: rotate(-1.4deg); }
.hp-postcard:nth-child(even) { transform: rotate(1.2deg); }
.hp-postcard__stamp {
  position: absolute; top: 1.5rem; right: 1.5rem; width: 46px; height: 58px;
  border: 1.5px dashed rgba(16, 35, 63, 0.35);
}
.hp-postcard__meta {
  font-family: var(--font-script); font-weight: 700; color: var(--abyss); font-size: 1.05rem; max-width: 60%;
}
.hp-postcard__quote {
  font-family: var(--font-script); color: var(--abyss); font-size: 1.2rem; line-height: 1.4;
  margin-top: 2.25rem; max-width: 75%;
}
.hp-postcard__author {
  font-family: var(--font-script); color: var(--ink-soft); font-size: 0.95rem; text-align: right; margin-top: 1.5rem;
}

/* --- Newsletter --- */
.hp-newsletter { background: var(--abyss); padding-block: clamp(2rem, 1.6rem + 1.5vw, 3rem); border-top: 3px double var(--yellaow); }
.hp-newsletter__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.hp-newsletter__row p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { color: var(--paper); font-family: var(--font-body); font-size: var(--fs-body); }
.hp-newsletter__form { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hp-newsletter__form input {
  background: var(--paper); border: none; border-radius: var(--radius-sm); padding: 0.9em 1.2em;
  font-family: var(--font-body); font-size: var(--fs-small); min-width: 220px;
}
.hp-newsletter__form input:focus { outline: 2px solid var(--yellaow); outline-offset: 1px; }
.hp-newsletter__form button {
  background: none; border: 1.5px solid var(--paper); color: var(--paper); border-radius: var(--radius-sm);
  padding: 0.9em 1.6em; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.hp-newsletter__form button:hover { background: var(--paper); color: var(--abyss); }

/* --- Footer v2 (page-scoped: different from the shared dark .site-footer
   used elsewhere, to match this specific mockup) --- */
.hp-footer { background: var(--bg-page); padding-block: clamp(2.5rem, 2rem + 2vw, 4rem) 0;}
.hp-footer__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); height: 200px !important;}
.hp-footer__grid h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--abyss); font-size: 1.1rem; margin-bottom: 0.6rem; }
.hp-footer__grid a { color: var(--abyss); }
.hp-footer__grid address { font-style: normal; color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.4; margin-top: 0.5rem; display: block; }
.hp-footer__grid nav ul { display: flex; flex-direction: column; gap: 0.9rem; }
.hp-footer__grid nav a { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-size: 0.85rem; }
.hp-footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.5rem; font-size: var(--fs-small); color: var(--abyss); }
.hp-footer__legal p { line-height: 1.4; }
.hp-footer__policies { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.hp-footer__policies a, .hp-footer__lang-select { color: var(--abyss); font-size: var(--fs-small); }
.hp-footer__lang-select { background: none; border: none; font-family: inherit; }
.hp-footer__social { display: flex; gap: 0.9rem; }
.hp-footer__social a { color: var(--abyss); display: flex; }
.hp-footer__social svg { width: 20px; height: 20px; }

@media (max-width: 640px) {
  .hp-boat__stripes { inset: 0; }
  .hp-family__stripes { display: none; }
  .hp-postcard { transform: none !important; }
}

/* =========================================================================
   THE BOAT PAGE v2 — rebuilt from the designer's Canva export
   (THE BOAT.png), same fidelity approach as the homepage: colours
   colour-picked from the export (all matched existing tokens again), the
   footer/header/.btn--outline/.hp-divider/.link-arrow are reused as-is.
   Classes here are prefixed "" (The Boat Page) since the layout
   language is specific to this page.

   Content note: the mockup's own numbers conflict with the site's
   established facts (60m/11 cabins/20 guests/5 guides vs. the 32m/6
   cabins/12 guests/10 crew used everywhere else, incl. the booking
   engine's cabin roster). Kept the mockup's layout, used the established
   numbers and the existing 4 cabin categories (Upper Deck Suite / Main
   Deck Double / Twin, Sea View / Twin, Porthole) instead of Canva's
   Master/Superior/Single/Deluxe. Also fixed the Outdoor/Indoor Spaces
   copy, which was duplicated verbatim under both headings in the export.
   ========================================================================= */

.tbp-hero { padding-block: clamp(3rem, 2.4rem + 3vw, 5.5rem) clamp(2rem, 1.6rem + 1.5vw, 3rem); text-align: center; }
.tbp-hero h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(2.2rem, 1.7rem + 2.6vw, 3.4rem); margin-bottom: 1.5rem;
}
.tbp-hero p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); font-style: italic; color: var(--ironwood); max-width: 52ch; margin-inline: auto; font-size: var(--fs-lead); }
.tbp-hero p + p { margin-top: 1rem; }

.tbp-intro { padding-bottom: var(--section-pad); }
/* Block 2: one photo composition, not two side-by-side photos — a large
   photo with a smaller one overlapping its bottom-right corner, same
   proportions as the homepage's "The Boat." teaser collage. */
.tbp-intro__collage {
  position: relative; max-width: 720px; margin-inline: auto;
  min-height: clamp(320px, 34vw, 460px); margin-bottom: 240px;
}
.tbp-intro__photo { position: absolute; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.4); }
.tbp-intro__photo picture, .tbp-intro__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbp-intro__photo--a { left: 4%; top: 0; width: 68%; aspect-ratio: 4 / 5; z-index: 1; }
.tbp-intro__photo--b { right: 0; bottom: 0; width: 46%; aspect-ratio: 1 / 1.05; z-index: 2; }
/* Block 3: the two-column paragraph, its own row below the photos. */
.tbp-intro__copy { display: grid; gap: 2rem; }
.tbp-intro__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--ironwood); }
@media (min-width: 780px) { .tbp-intro__copy { grid-template-columns: 1fr 1fr; } }

/* --- Ship diagram --- */
/* --- 3D model placeholder: a clear stand-in, not a rushed 3D build --- */
.tbp-model { padding-bottom: var(--section-pad); }
.tbp-model__box {
  max-width: 920px; margin-inline: auto; aspect-ratio: 16 / 7; min-height: 220px;
  border: 1.5px dashed var(--ironwood); border-radius: var(--radius-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.85rem;
  background: rgba(175, 194, 210, 0.14); text-align: center; padding: 2rem;
}
.tbp-model__box svg { width: 52px; height: 52px; color: var(--ironwood); opacity: 0.65; }
.tbp-model__box p {
  font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; font-size: 0.85rem; color: var(--ironwood);
}
.tbp-model__box span { font-family: var(--font-body); font-style: italic; color: var(--ink-soft); font-size: var(--fs-small); }

.tbp-diagram { background: var(--open-sea); color: var(--paper); padding-block: var(--section-pad); }
.tbp-diagram__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; }
.tbp-diagram__lead { font-family: var(--font-body); color: var(--paper); max-width: 34ch; }
.tbp-diagram__art { position: relative; }
.tbp-diagram__art svg.tbp-hull { width: 100%; height: auto; color: var(--paper); }
.tbp-diagram__sketch { display: block; width: 100%; height: auto; border: none !important; }
.tbp-diagram__callout {
  position: absolute; font-family: var(--font-script); font-weight: 700; font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem);
  color: var(--abyss); white-space: nowrap;
}
@media (min-width: 900px) { .tbp-diagram__grid { grid-template-columns: 1fr 2fr; } }

/* --- Key Figures --- */
.tbp-figures { padding-block: var(--section-pad); text-align: center; }
.tbp-figures h2 {
  font-family: var(--font-script); font-weight: 700; color: var(--open-sea);
  font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.4rem); margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}
.tbp-figures__frame { border: 1px solid var(--abyss); padding: 3px; max-width: 920px; margin-inline: auto; }
.tbp-figures__inner { border: 1px solid var(--abyss); padding: clamp(2rem, 1.6rem + 2vw, 3.5rem); }
.tbp-figures__grid { display: grid; gap: 2.5rem 1.5rem; grid-template-columns: repeat(2, 1fr); }
.tbp-figures__grid dt { font-family: var(--font-display); font-weight: 700; color: var(--open-sea); font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.3rem); line-height: 1; }
.tbp-figures__grid .tbp-figures__label {
  display: block; font-family: var(--font-display); font-size: 0.7rem; font-weight: 600;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--abyss); margin-top: 0.4rem;
}
.tbp-figures__grid dd { font-family: var(--font-body); font-style: italic; color: var(--ink-soft); font-size: var(--fs-small); margin-top: 0.6rem; }
@media (min-width: 640px) { .tbp-figures__grid { grid-template-columns: repeat(4, 1fr); } }

/* --- Deck plan selector --- */
.tbp-deckplan { background: var(--abyss); color: var(--paper); padding-block: var(--section-pad); }
.tbp-deckplan__tabs { display: flex; justify-content: center; gap: clamp(1.5rem, 1.2rem + 1.5vw, 3rem); margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.tbp-deckplan__tab {
  background: none; border: none; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: rgba(244, 239, 228, 0.55);
  padding-bottom: 0.5rem; border-bottom: 1.5px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tbp-deckplan__tab:hover { color: var(--paper); }
.tbp-deckplan__tab.is-active { color: var(--paper); border-color: var(--paper); }
.tbp-deckplan__stage { position: relative; max-width: 920px; margin-inline: auto; aspect-ratio: 16 / 7; }
.tbp-deckplan__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.35s var(--ease); border: none !important; }
.tbp-deckplan__img.is-active { opacity: 1; }

/* --- The Making of Waow 2 (timeline) --- */
.tbp-timeline { padding-block: var(--section-pad); text-align: center; }
.tbp-timeline h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: 1.25rem;
}
.tbp-timeline__lead { font-family: var(--font-body); color: var(--ironwood); max-width: 62ch; margin-inline: auto; }
.tbp-timeline__lead + .tbp-timeline__lead { margin-top: 0.5rem; }
.tbp-timeline__cta { color: var(--ironwood); justify-content: center; margin-top: 1.5rem; margin-bottom: clamp(3rem, 2.4rem + 2.5vw, 5rem); }

.tbp-slider { position: relative; }
.tbp-slider__track {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center;
  padding-block: clamp(90px, 9vw, 120px);
}
.tbp-slider__baseline { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ironwood); opacity: 0.45; }
.tbp-slider__baseline span {
  position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ironwood); transform: translate(-50%, -50%);
}
.tbp-slider__step {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
}
/* while a step's stack is exploded (below), lift the whole step above its
   neighbours so the enlarged photos never paint under a sibling step's text */
.tbp-slider__step:hover, .tbp-slider__step:focus-within { z-index: 40; }
.tbp-slider__step--above { transform: translateY(calc(-1 * clamp(90px, 9vw, 120px))); }
.tbp-slider__step--below { transform: translateY(clamp(90px, 9vw, 120px)); }
.tbp-slider__step::after {
  content: ""; position: absolute; left: 50%; width: 1px; background: var(--ironwood); opacity: 0.45;
  height: clamp(90px, 9vw, 120px);
}
.tbp-slider__step--above::after { top: 100%; }
.tbp-slider__step--below::after { bottom: 100%; }
.tbp-slider__date { font-family: var(--font-script); font-weight: 700; color: var(--ironwood); font-size: 1.1rem; margin-bottom: 0.75rem; text-align: center; }
.tbp-slider__step--below .tbp-slider__date { order: 2; margin-bottom: 0; margin-top: 0.75rem; }
.tbp-slider__desc { font-family: var(--font-body); color: var(--abyss); font-size: var(--fs-small); max-width: 26ch; margin-top: 0.75rem; text-align: center; }
.tbp-slider__step--below .tbp-slider__desc { order: 3; }

.tbp-stack { position: relative; width: 140px; height: 170px; cursor: pointer; }
.tbp-stack__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3px;
  box-shadow: 0 10px 22px -14px rgba(16, 35, 63, 0.45); background: var(--white); padding: 6px 6px 18px;
  box-sizing: border-box; transition: transform 0.35s var(--ease), z-index 0s;
}
.tbp-stack__photo:nth-child(1) { transform: rotate(-9deg) translate(-17px, 7px); z-index: 1; }
.tbp-stack__photo:nth-child(2) { transform: rotate(-3deg) translate(-6px, 2px); z-index: 2; }
.tbp-stack__photo:nth-child(3) { transform: rotate(4deg) translate(6px, -2px); z-index: 3; }
.tbp-stack__photo:nth-child(4) { transform: rotate(10deg) translate(16px, -6px); z-index: 4; }
/* Hovering/focusing the stack bursts the four photos outward to scattered,
   noticeably larger, unevenly-rotated spots — an "explosion", not a tidy
   fan or a separate popup. .tbp-slider__step lifts itself above its
   neighbours on hover (above) so the burst always paints over any
   surrounding text. */
.tbp-stack__photo { transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1), z-index 0s; }
.tbp-stack:hover .tbp-stack__photo:nth-child(1), .tbp-stack:focus-within .tbp-stack__photo:nth-child(1) { transform: rotate(-16deg) translate(-96px, -66px) scale(1.7); z-index: 6; }
.tbp-stack:hover .tbp-stack__photo:nth-child(2), .tbp-stack:focus-within .tbp-stack__photo:nth-child(2) { transform: rotate(12deg) translate(78px, -88px) scale(1.5); z-index: 7; }
.tbp-stack:hover .tbp-stack__photo:nth-child(3), .tbp-stack:focus-within .tbp-stack__photo:nth-child(3) { transform: rotate(6deg) translate(-72px, 84px) scale(1.65); z-index: 8; }
.tbp-stack:hover .tbp-stack__photo:nth-child(4), .tbp-stack:focus-within .tbp-stack__photo:nth-child(4) { transform: rotate(-9deg) translate(98px, 58px) scale(1.55); z-index: 9; }

.tbp-slider__nav { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.tbp-slider__arrow {
  width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--ironwood); color: var(--ironwood);
  display: flex; align-items: center; justify-content: center; transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.tbp-slider__arrow:hover:not(:disabled) { background: var(--ironwood); color: var(--paper); }
.tbp-slider__arrow:disabled { opacity: 0.3; cursor: default; }
.tbp-slider__arrow svg { width: 18px; height: 18px; }

@media (max-width: 780px) {
  .tbp-slider__track { grid-template-columns: 1fr; gap: 3.5rem; padding-block: 1rem; }
  .tbp-slider__step--above, .tbp-slider__step--below { transform: none; }
  .tbp-slider__step::after, .tbp-slider__baseline { display: none; }
}

/* --- The Cabins --- */
.tbp-cabins { padding-block: var(--section-pad); }
.tbp-cabins h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(2rem, 1.6rem + 2vw, 2.8rem); margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}
.tbp-cabins__grid { display: grid; gap: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tbp-cabins__grid figure { aspect-ratio: 4 / 3.4; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1rem; }
.tbp-cabins__grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbp-cabins__plan { background: none; }
.tbp-cabins__plan img { object-fit: contain; border: none !important; }
.tbp-cabins__grid h3 { font-family: var(--font-display); font-weight: 700; color: var(--ironwood); text-transform: uppercase; font-size: 0.95rem; margin-bottom: 0.5rem; text-align: center; }
.tbp-cabins__grid p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); font-size: var(--fs-small); text-align: center; }
.tbp-cabins__link { display: flex; justify-content: center; color: var(--open-sea); margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem); }

/* --- Full-bleed sections (Outdoor / Indoor Spaces): deliberately NOT
   wrapped in .container, so the photos can reach the true viewport
   edges regardless of the site's fixed-width container elsewhere. --- */
/* Mobile-first: a plain stacked flow (photo, copy, photo), full width,
   no absolute positioning — the fancy edge-to-edge overlap composition
   only kicks in once there's room for it, at the 780px breakpoint. */
.tbp-fullbleed__photo { display: block; width: 100%; aspect-ratio: 4 / 3; }
.tbp-fullbleed__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbp-fullbleed__copy {
  position: relative; z-index: 2; max-width: 44ch; margin-inline: auto; text-align: center;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding-inline: var(--gutter);
}
.tbp-fullbleed__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem); margin-bottom: 1.25rem;
}
.tbp-fullbleed__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); }
.tbp-fullbleed__copy p + p { margin-top: 1rem; }
.tbp-fullbleed .dot-icon { display: none; }

@media (min-width: 780px) {
  .tbp-fullbleed { position: relative; min-height: clamp(520px, 58vw, 780px); overflow: hidden; display: flex; align-items: center; }
  .tbp-fullbleed__photo {
    position: absolute; width: clamp(260px, 27vw, 420px); aspect-ratio: 3 / 4;
    box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.4);
  }
  .tbp-fullbleed__photo--tl { top: 0; left: 0; }
  .tbp-fullbleed__photo--br { bottom: 0; right: 0; }
  .tbp-fullbleed__photo--tr { top: 0; right: 0; }
  .tbp-fullbleed__photo--bl { bottom: 0; left: 0; }
  .tbp-fullbleed__copy { flex: 1; padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem); }
  .tbp-fullbleed .dot-icon { display: block; position: absolute; z-index: 3; width: clamp(70px, 8vw, 110px); }

  /* Indoor Spaces: a partial-height photo (not the full section), with
     real breathing room above it instead of butting against Outdoor
     Spaces' photo right below it. */
  .tbp-fullbleed--indoor { min-height: auto; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: flex-start; }
  .tbp-fullbleed--indoor .tbp-fullbleed__copy { margin-inline: 0 auto; text-align: left; padding-inline-start: clamp(2rem, 4vw, 6rem); align-self: center; }
  .tbp-fullbleed__photo--full-right {
    position: relative; top: 0; right: 0; width: clamp(320px, 38vw, 560px); aspect-ratio: 4 / 3.2;
    box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.4); margin-block: clamp(2rem, 1.6rem + 1.5vw, 3rem);
  }
}

/* --- Made for Divers --- */
.tbp-divers { position: relative; padding-block: var(--section-pad); overflow: hidden; }
.tbp-divers__stripes {
  position: absolute; inset: 0 55% 0 0; z-index: 0;
  background-image: repeating-linear-gradient(90deg, var(--abyss) 0 16px, var(--bg-page) 16px 34px);
}
.tbp-divers__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; }
.tbp-divers__collage { position: relative; min-height: clamp(320px, 32vw, 440px); }
.tbp-divers__photo { position: absolute; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.5); overflow: hidden; }
.tbp-divers__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbp-divers__photo--a { top: 0; left: 6%; width: 62%; aspect-ratio: 1 / 1; z-index: 1; }
.tbp-divers__photo--b { bottom: 0; right: 0; width: 46%; aspect-ratio: 3 / 4; z-index: 2; }
.tbp-divers__caption {
  position: absolute; left: 4%; bottom: 12%; z-index: 3; font-family: var(--font-script); font-weight: 700;
  color: var(--yellaow); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.25;
  text-shadow: 0 2px 8px rgba(16, 35, 63, 0.6);
}
.tbp-divers__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--open-sea);
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); line-height: 1.05; margin-bottom: 1.25rem;
}
.tbp-divers__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); max-width: 42ch; }
.tbp-divers__copy p + p { margin-top: 1.1rem; }
.tbp-divers__copy .link-arrow { color: var(--open-sea); margin-top: 1.5rem; }
@media (min-width: 860px) { .tbp-divers__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tbp-divers__stripes { display: none; } }

/* --- Life at Sea --- */
.tbp-life { padding-block: var(--section-pad); }
.tbp-life__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; text-align: center; }
.tbp-life__copy h2 { font-family: var(--font-script); font-weight: 700; color: var(--open-sea); font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.4rem); margin-bottom: 1.25rem; }
.tbp-life__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); }
.tbp-life__copy .link-arrow { justify-content: center; color: var(--open-sea); margin-top: 1.5rem; }
.tbp-life__visual { position: relative; max-width: 320px; margin-inline: auto; }
.tbp-life__visual figure { aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.4); }
.tbp-life__visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbp-life__visual .dot-icon { position: absolute; left: -14%; bottom: -10%; width: clamp(70px, 8vw, 100px); }
@media (min-width: 780px) { .tbp-life__grid { grid-template-columns: 1.1fr 0.9fr; text-align: left; } .tbp-life__copy { text-align: left; } .tbp-life__copy .link-arrow { justify-content: flex-start; } }

/* --- Reference frise: a simple reference thumbnail strip, not a
   polished feature — the client's own photo reference for what's ahead. --- */
.tbp-frise { background: var(--sea-foam); padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.tbp-frise h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem); margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}
.tbp-frise__track { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 0.75rem; }
.tbp-frise__item { flex: 0 0 auto; width: 130px; text-align: center; }
.tbp-frise__item figure { aspect-ratio: 3 / 4; border-radius: 3px; overflow: hidden; margin-bottom: 0.6rem; }
.tbp-frise__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tbp-frise__item p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); font-size: 0.72rem; color: var(--abyss); line-height: 1.3; }
.tbp-frise__item .tbp-frise__date { font-family: var(--font-script); font-weight: 700; color: var(--ironwood); font-size: 0.8rem; display: block; margin-bottom: 0.15rem; }

/* =========================================================================
   THE CABINS PAGE — rebuilt from the designer's Canva export (CABINS.pdf).
   Reached only from "The Boat" page's Cabins grid "sea more" CTA, not from
   the primary nav. Reuses the established overlap-photo collage language
   (see .tbp-intro__collage / .hp-boat__photo) and the site's script-font
   stand-in (--font-script, a Have Heart Two placeholder — see the notice
   near the top of this file) for every handwritten annotation. Floor plans
   are dashed-border placeholders — TODO: swap in the real hand-drawn plans
   once delivered, keeping their spot, size, and the photo-overlap treatment.
   ========================================================================= */

.cb-hero { padding-block: clamp(3rem, 2.4rem + 3vw, 5.5rem) 0; text-align: center; }
.cb-hero h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(2.2rem, 1.7rem + 2.6vw, 3.4rem); margin-bottom: 1rem;
}
.cb-hero__lead {
  font-family: var(--font-body); font-style: italic; color: var(--ironwood);
  max-width: 46ch; margin-inline: auto; font-size: var(--fs-lead);
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.cb-hero__collage {
  position: relative; max-width: 720px; margin-inline: auto;
  min-height: clamp(320px, 34vw, 460px); margin-bottom: 240px;
}
.cb-hero__photo { position: absolute; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.4); }
.cb-hero__photo picture, .cb-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-hero__photo--a { left: 4%; top: 0; width: 68%; aspect-ratio: 4 / 5; z-index: 1; }
.cb-hero__photo--b { right: 0; bottom: 0; width: 46%; aspect-ratio: 1 / 1.05; z-index: 2; }

/* --- A place to come back to --- */
.cb-return { padding-block: var(--section-pad); }
.cb-return__grid { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: center; }
.cb-return__collage { position: relative; min-height: clamp(280px, 32vw, 420px); }
.cb-return__photo { position: absolute; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.45); }
.cb-return__photo picture, .cb-return__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-return__photo--a { top: 0; left: 6%; width: 62%; aspect-ratio: 1 / 1; z-index: 1; }
.cb-return__photo--b { bottom: 0; right: 0; width: 46%; aspect-ratio: 3 / 4; z-index: 2; }
.cb-return__icon { width: 34px; height: 34px; color: var(--ironwood); margin-bottom: 1.1rem; }
.cb-return__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.4rem); margin-bottom: 1.1rem;
}
.cb-return__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); max-width: 44ch; }
.cb-return__copy p + p { margin-top: 0.85rem; }
.cb-return__amenities {
  display: inline-block; margin-top: 1.75rem; padding: 1.1rem 1.6rem;
  background: var(--white); box-shadow: 0 14px 30px -18px rgba(16, 35, 63, 0.35);
  border-radius: 2px; transform: rotate(-1.2deg);
}
.cb-return__amenities li {
  font-family: var(--font-script); font-weight: 700; color: var(--ink-soft); font-size: 1.15rem; line-height: 1.5;
}
.cb-return__amenities li::before { content: "\00b7\0020"; }
@media (min-width: 860px) { .cb-return__grid { grid-template-columns: 1fr 1fr; } }

/* --- Cabin categories: four sections, zigzag left/right via DOM order --- */
.cb-cabin { padding-block: var(--section-pad); }
.cb-cabin__grid { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: center; }
.cb-cabin__annotation {
  font-family: var(--font-script); font-weight: 700; color: var(--ironwood);
  font-size: 1.2rem; line-height: 1.45; margin-bottom: 1.1rem;
}
.cb-cabin__frame { position: relative; max-width: 380px; }
.cb-cabin__plan {
  position: relative; width: 100%; aspect-ratio: 1 / 1.05;
  border: 1.5px dashed var(--ironwood); border-radius: var(--radius-md);
  background: rgba(175, 194, 210, 0.14);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  text-align: center; padding: 1.5rem;
}
.cb-cabin__plan svg { width: 44px; height: 44px; color: var(--ironwood); opacity: 0.6; }
.cb-cabin__plan span { font-family: var(--font-body); font-style: italic; color: var(--ink-soft); font-size: var(--fs-small); }
.cb-cabin__plan.cb-cabin__plan--img,
.cb-page .cb-cabin__plan.cb-cabin__plan--img {
  border: none !important; background: none !important; box-shadow: none; padding: 0;
}
.cb-cabin__plan--img picture { display: block; width: 100%; height: 100%; }
.cb-cabin__plan--img img { width: 100%; height: 100%; object-fit: contain; border: none !important; }
.cb-cabin__photo {
  position: absolute; right: 0; bottom: -8%; width: 48%; aspect-ratio: 4 / 3.4;
  border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 36px -18px rgba(16, 35, 63, 0.45); z-index: 2;
}
.cb-cabin__photo picture, .cb-cabin__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cb-cabin--reverse .cb-cabin__photo { right: auto; left: 0; }
.cb-cabin__deck {
  font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; font-size: 0.75rem; color: var(--open-sea); margin-bottom: 0.5rem;
}
.cb-cabin__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.4rem); margin-bottom: 1rem;
}
.cb-cabin__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); max-width: 42ch; }
.cb-cabin__copy p + p { margin-top: 0.85rem; }
.cb-cabin__copy .link-arrow { color: var(--open-sea); margin-top: 1.5rem; }
@media (min-width: 860px) { .cb-cabin__grid { grid-template-columns: 1fr 1fr; } }

/* --- Between one dive and the next (closing) --- */
.cb-closing { padding-block: var(--section-pad); }
.cb-closing__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; }
.cb-closing__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.8rem, 1.5rem + 1.8vw, 2.4rem); margin-bottom: 1.25rem;
}
.cb-closing__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); max-width: 42ch; }
.cb-closing__copy p + p { margin-top: 0.85rem; }
.cb-closing__copy .link-arrow { color: var(--open-sea); margin-top: 1.5rem; }
.cb-closing__photo { aspect-ratio: 4 / 3.2; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.4); }
.cb-closing__photo picture, .cb-closing__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 780px) { .cb-closing__grid { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   THE EXPERIENCE PAGE — rebuilt from the designer's Canva export
   (EXPERIENCE.pdf). Linked from the site-wide "Experience" nav item
   (header + footer, every page) — see the href="experience.html" swap
   next to each ".xp-" rule's use below. Reuses the established overlap-
   photo collage language and the --open-sea "blue section" treatment
   already used for .tbp-diagram / .hp-family (paper text, paper→sea-foam
   link-arrow on hover, dot-icon needs no dark-mode variant — .hp-family
   already proves the default glyph colors read fine on --open-sea).
   ========================================================================= */

/* --- The Waow Experience (hero) --- */
.xp-hero { padding-block: clamp(3rem, 2.4rem + 3vw, 5.5rem) 0; text-align: center; }
.xp-hero h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(2.2rem, 1.7rem + 2.6vw, 3.4rem); margin-bottom: 1rem;
}
.xp-hero__subtitle {
  font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--open-sea); font-size: var(--fs-eyebrow); margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}
.xp-hero__lead { font-family: var(--font-body); color: var(--abyss); max-width: 62ch; margin-inline: auto; margin-bottom: 100px;}
.xp-hero__lead p + p { margin-top: 0.85rem; }
.xp-hero__collage {
  position: relative; max-width: 720px; margin-inline: auto; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  min-height: clamp(320px, 34vw, 460px); margin-bottom: 70px;
}
.xp-hero__photo { position: absolute; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.4); }
.xp-hero__photo picture, .xp-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xp-hero__photo--a { left: 0; bottom: 0; width: 68%; aspect-ratio: 4 / 3; z-index: 1; }
.xp-hero__photo--b { right: 0; top: 0; width: 42%; aspect-ratio: 1 / 1.05; z-index: 2; }
.xp-hero__collage .dot-icon { position: absolute; right: -6%; top: -8%; width: clamp(48px, 5vw, 64px); z-index: 3; }

/* --- Diving (blue) --- */
.xp-diving { background: var(--open-sea); color: var(--paper); padding-block: var(--section-pad); }
.xp-diving__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; }
.xp-diving h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--paper);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); line-height: 1.05; margin-bottom: 1rem;
}
.xp-diving__tagline { font-family: var(--font-body); font-style: italic; color: var(--sea-foam); font-size: var(--fs-lead); margin-bottom: 1.25rem; }
.xp-diving__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title):not(.p) { font-family: var(--font-body); color: var(--paper); max-width: 46ch; }
.xp-diving__copy p.p { font-family: var(--font-body); color: var(--paper); }
.xp-diving__copy p + p { margin-top: 0.85rem; }
.xp-diving .link-arrow { color: var(--paper); margin-top: 1.5rem; }
.xp-diving .link-arrow:hover { color: var(--sea-foam); }
.xp-diving__visual { position: relative; }
.xp-diving__photo { aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 20px 44px -22px rgba(16, 35, 63, 0.5); }
.xp-diving__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xp-diving__visual .dot-icon { position: absolute; left: -6%; bottom: -10%; width: clamp(70px, 8vw, 100px); }
.xp-diving__outro {
  font-family: var(--font-body); font-style: italic; color: var(--paper); opacity: 0.9;
  max-width: 62ch; margin: clamp(2.5rem, 2rem + 2vw, 4rem) auto 0; text-align: center;
}
@media (min-width: 860px) { .xp-diving__grid { grid-template-columns: 1.1fr 0.9fr; } }

/* --- Life between the dives (thin transition strip) --- */
.xp-lifebetween { padding-block: clamp(2rem, 1.6rem + 1.5vw, 3rem); text-align: center; }
.xp-lifebetween p {
  font-family: var(--font-script); font-weight: 700; color: var(--ironwood);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem);
}

/* --- Gastronomy --- */
.xp-gastro { padding-block: var(--section-pad); }
.xp-gastro__grid { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: center; }
.xp-gastro__collage { position: relative; min-height: clamp(280px, 32vw, 420px); }
.xp-gastro__photo { position: absolute; top: 0; left: 6%; width: 66%; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.45); }
.xp-gastro__photo picture, .xp-gastro__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xp-gastro__menu {
  position: absolute; right: 0; bottom: 0; width: 52%; z-index: 2;
  background: var(--white); padding: 1.1rem 1.25rem; box-shadow: 0 14px 30px -18px rgba(16, 35, 63, 0.4);
  border-radius: 2px; transform: rotate(1.4deg);
}
.xp-gastro__menu p { font-family: var(--font-script); font-weight: 700; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }
.xp-gastro__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: 1.1rem;
}
.xp-gastro__copy > p { font-family: var(--font-body); color: var(--abyss); max-width: 48ch; }
.xp-gastro__moments {
  display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  margin-top: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}
.xp-gastro__moments h3 {
  font-family: var(--font-display); font-weight: 700; color: var(--open-sea); text-transform: uppercase;
  font-size: 0.85rem; letter-spacing: var(--tracking-caps); margin-bottom: 0.4rem;
}
.xp-gastro__moments p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--ink-soft); font-size: var(--fs-small); }
.xp-gastro__copy > p.xp-gastro__quote {
  font-family: var(--font-script); font-weight: 700; color: var(--ironwood);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); line-height: 1.35;
  margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}
@media (min-width: 860px) { .xp-gastro__grid { grid-template-columns: 1fr 1.1fr; } }

/* --- Hotel Service --- */
.xp-hotel { padding-block: var(--section-pad); }
.xp-hotel__grid { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: center; }
.xp-hotel h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}
.xp-hotel__list { display: grid; gap: 1.5rem; }
.xp-hotel__list h3 {
  font-family: var(--font-display); font-weight: 700; color: var(--open-sea); text-transform: uppercase;
  font-size: 0.9rem; letter-spacing: var(--tracking-caps); margin-bottom: 0.35rem;
}
.xp-hotel__list p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); font-size: var(--fs-small); max-width: 36ch; }
.xp-hotel__collage { position: relative; min-height: clamp(300px, 34vw, 440px); }
.xp-hotel__photo { position: absolute; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.45); }
.xp-hotel__photo picture, .xp-hotel__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xp-hotel__photo--main { top: 0; right: 0; width: 72%; aspect-ratio: 4 / 3; z-index: 1; }
.xp-hotel__photo--a { left: 0; bottom: 0; width: 42%; aspect-ratio: 1 / 1; z-index: 2; }
.xp-hotel__photo--b { left: 26%; bottom: 14%; width: 40%; aspect-ratio: 4 / 3.3; z-index: 3; }
.xp-hotel__caption {
  position: absolute; left: 26%; bottom: -6%; z-index: 4; font-family: var(--font-script); font-weight: 700;
  color: var(--ink-soft); font-size: 0.95rem; line-height: 1.3; max-width: 44%;
  background: var(--white); padding: 0.5rem 0.85rem; border-radius: 2px;
  box-shadow: 0 10px 22px -14px rgba(16, 35, 63, 0.4); transform: rotate(-1deg);
}
@media (min-width: 860px) { .xp-hotel__grid { grid-template-columns: 0.9fr 1.1fr; } }

/* --- Beyond Diving --- */
.xp-beyond { padding-block: var(--section-pad); }
.xp-beyond__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3rem); align-items: center; }
.xp-beyond__photo { aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.4); }
.xp-beyond__photo picture, .xp-beyond__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xp-beyond__copy { text-align: center; position: relative; }
.xp-beyond__copy .dot-icon { margin-inline: auto; width: clamp(44px, 5vw, 56px); margin-bottom: 1rem; }
.xp-beyond__copy .eyebrow { justify-content: center; }
.xp-beyond__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: 1rem;
}
.xp-beyond__copy p:not(.px-annot) { font-family: var(--font-body); color: var(--abyss); max-width: 42ch; margin-inline: auto; }
.xp-beyond__tags {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.1rem;
  margin-top: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}
.xp-beyond__tags span {
  font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  font-size: 0.72rem; color: var(--open-sea); padding-block: 0.35em;
}
@media (min-width: 900px) { .xp-beyond__grid { grid-template-columns: 1fr 1.3fr 1fr; } }

/* --- One evening ashore --- */
.xp-ashore { padding-block: var(--section-pad); text-align: center; }
.xp-ashore h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem); margin-bottom: 1.25rem;
}
.xp-ashore p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title):not(.p) { font-family: var(--font-body); font-style: normal; color: var(--abyss); max-width: 58ch; margin-inline: auto; }
.xp-ashore p.p { font-family: var(--font-body); font-style: normal; color: var(--abyss); }
.xp-ashore p + p { margin-top: 0.85rem; }

/* --- What's Included (blue) --- */
.xp-included { background: var(--open-sea); color: var(--paper); padding-block: var(--section-pad); }
.xp-included__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3rem); }
.xp-included h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--paper);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}
.xp-included__col h3 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--sea-foam); font-size: 0.8rem; margin-bottom: 1rem;
}
.xp-included__col ul { display: grid; gap: 0.6rem; }
.xp-included__col li { font-family: var(--font-body); color: var(--paper); font-size: var(--fs-small); }
.xp-included .link-arrow { color: var(--paper); margin-top: 1.75rem; }
.xp-included .link-arrow:hover { color: var(--sea-foam); }
.xp-included__visual { position: relative; }
.xp-included__photo { aspect-ratio: 4 / 4.6; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 20px 44px -22px rgba(16, 35, 63, 0.5); }
.xp-included__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xp-included__visual .dot-icon {
  position: absolute; right: -8%; top: -8%; width: clamp(60px, 7vw, 84px); color: var(--paper);
  background: var(--open-sea); border-radius: 50%; padding: 8px;
}
@media (min-width: 900px) { .xp-included__grid { grid-template-columns: 1fr 1fr 1fr; align-items: center; } }

/* --- Make Waow Yours --- */
.xp-make { padding-block: var(--section-pad); }
.xp-make__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3rem); align-items: center; }
.xp-make h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: 1rem;
}
.xp-make__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); max-width: 40ch; }
.xp-make__copy p + p { margin-top: 0.85rem; }
.xp-make__eyebrow { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--open-sea); font-size: var(--fs-eyebrow); margin-bottom: 1rem; }
.xp-make__photo { aspect-ratio: 4 / 4.6; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.4); }
.xp-make__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.xp-make__aside p { font-family: var(--font-script); font-weight: 700; color: var(--ironwood); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); line-height: 1.4; }
.xp-make__aside .link-arrow { color: var(--open-sea); margin-top: 1.5rem; }
@media (min-width: 900px) { .xp-make__grid { grid-template-columns: 1fr 1fr 1fr; align-items: center; } }

/* --- Ready for the next dive? (closing) --- */
.xp-closing { padding-block: clamp(3rem, 2.4rem + 2.5vw, 5rem); text-align: center; }
.xp-closing h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem); margin-bottom: 1rem;
}
.xp-closing p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title):not(.p) { font-family: var(--font-body); color: var(--ironwood); font-style: italic; max-width: 56ch; margin-inline: auto; }
.xp-closing p.p { font-family: var(--font-body); color: var(--ironwood); font-style: italic; }
.xp-closing .link-arrow { justify-content: center; color: var(--open-sea); margin-top: 1.5rem; }

/* =========================================================================
   THE DIVE DEEP PAGE — rebuilt from the designer's Canva export
   (DIVING.pdf). Reached only from the Experience page's "dive deeper"
   link, so nav highlights "Experience" (same sub-page pattern as Cabins
   highlighting "The Boat"). Header nav label ("News", not "Events") and
   CTA text ("Pre-Bookings", not "Rates & Dates") intentionally do NOT
   match this mockup — per instruction, the mockup is stale on those two
   items and the site's already-decided values win. The "Safety First"
   section reuses .hp-safety verbatim (already shared across pages).
   ========================================================================= */

/* --- Dive Deep Into Indonesia (hero) --- */
.dd-hero { padding-block: clamp(3rem, 2.4rem + 3vw, 5.5rem) 0; text-align: center; }
.dd-hero h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(2.2rem, 1.7rem + 2.6vw, 3.4rem); margin-bottom: 1rem;
}
.dd-hero__tagline { font-family: var(--font-body); font-style: italic; color: var(--ironwood); font-size: var(--fs-lead); margin-bottom: 0.85rem; }
.dd-hero__lead p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title):not(.p) { font-family: var(--font-body); color: var(--abyss); max-width: 58ch; margin-inline: auto; }
.dd-hero__lead p.p { font-family: var(--font-body); color: var(--abyss); }
.dd-hero__collage {
  position: relative; max-width: 720px; margin-inline: auto; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  min-height: clamp(320px, 34vw, 460px); margin-bottom: 240px;
}
.dd-hero__photo { position: absolute; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.4); }
.dd-hero__photo picture, .dd-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dd-hero__photo--a { left: 0; top: 0; width: 68%; aspect-ratio: 4 / 3; z-index: 1; }
.dd-hero__photo--b { right: 0; bottom: 0; width: 46%; aspect-ratio: 1 / 1.05; z-index: 2; }

/* --- New Sites. Every Day. (blue) --- */
.dd-newsites { background: var(--open-sea); color: var(--paper); padding-block: var(--section-pad); }
.dd-newsites__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; }
.dd-newsites__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--paper);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: 1.1rem;
}
.dd-newsites__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--paper); max-width: 46ch; }
.dd-newsites__copy p + p { margin-top: 0.85rem; }
.dd-newsites__visual { position: relative; min-height: clamp(280px, 30vw, 400px); }
.dd-newsites__photo { position: absolute; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.45); }
.dd-newsites__photo picture, .dd-newsites__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dd-newsites__photo--a { top: 0; right: 0; width: 66%; aspect-ratio: 4 / 3; z-index: 1; }
.dd-newsites__photo--b { bottom: 0; left: 0; width: 44%; aspect-ratio: 1 / 1; z-index: 2; }
.dd-newsites__visual .dot-icon { position: absolute; left: -6%; bottom: -10%; width: clamp(60px, 7vw, 84px); }
@media (min-width: 860px) { .dd-newsites__grid { grid-template-columns: 1.1fr 0.9fr; } }

/* --- Less People. More Ocean. --- */
.dd-groups { padding-block: var(--section-pad); }
.dd-groups__grid { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: center; }
.dd-groups__visual { position: relative; min-height: clamp(280px, 30vw, 400px); }
.dd-groups__photo { border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.45); aspect-ratio: 4 / 3.6; }
.dd-groups__photo picture, .dd-groups__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dd-groups__stats {
  position: absolute; right: -6%; bottom: -10%; z-index: 2;
  background: var(--white); padding: 1rem 1.4rem; box-shadow: 0 14px 30px -18px rgba(16, 35, 63, 0.4);
  border-radius: 2px; transform: rotate(-1.4deg);
}
.dd-groups__stats p { font-family: var(--font-script); font-weight: 700; color: var(--ink-soft); font-size: 1.15rem; line-height: 1.45; }
.dd-groups__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: 1.1rem;
}
.dd-groups__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title):not(.p) { font-family: var(--font-body); color: var(--abyss); max-width: 46ch; }
.dd-groups__copy p.p { font-family: var(--font-body); color: var(--abyss); }
.dd-groups__copy .link-arrow { color: var(--open-sea); margin-top: 1.5rem; }
@media (min-width: 860px) { .dd-groups__grid { grid-template-columns: 1fr 1fr; } }

/* --- Built for Diving. (striped) --- */
.dd-built { position: relative; padding-block: var(--section-pad); overflow: hidden; }
.dd-built__stripes {
  position: absolute; inset: 0 0 0 55%; z-index: 0;
  background-image: repeating-linear-gradient(90deg, var(--sea-foam) 0 16px, var(--bg-page) 16px 38px);
}
.dd-built__head { position: relative; z-index: 1; max-width: 62ch; margin-bottom: clamp(2rem, 1.6rem + 1.5vw, 3rem); }
.dd-built__head h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: 0.85rem;
}
.dd-built__head p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--paper); }
.dd-built__grid { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; }
.dd-built__items { display: grid; gap: 1.5rem; }
.dd-built__items h3 {
  font-family: var(--font-display); font-weight: 700; color: var(--open-sea); text-transform: uppercase;
  font-size: 0.9rem; letter-spacing: var(--tracking-caps); margin-bottom: 0.35rem;
}
.dd-built__items p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--paper); font-size: var(--fs-small); max-width: 34ch; }
.dd-built__visual { position: relative; min-height: clamp(280px, 30vw, 400px); }
.dd-built__photo { position: absolute; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.45); }
.dd-built__photo picture, .dd-built__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dd-built__photo--a { top: 0; left: 0; width: 62%; aspect-ratio: 4 / 3; z-index: 1; }
.dd-built__photo--b { bottom: 0; right: 0; width: 46%; aspect-ratio: 1 / 1.05; z-index: 2; }
.dd-built__caption {
  position: absolute; right: 4%; bottom: -8%; z-index: 3; font-family: var(--font-script); font-weight: 700;
  color: var(--ink-soft); font-size: 1rem; line-height: 1.3; text-align: center; max-width: 46%;
  background: var(--white); padding: 0.6rem 0.9rem; border-radius: 2px;
  box-shadow: 0 10px 22px -14px rgba(16, 35, 63, 0.4); transform: rotate(1.4deg);
}
@media (min-width: 860px) { .dd-built__grid { grid-template-columns: 0.9fr 1.1fr; } }

/* --- Dive Longer. Learn Along the Way. (dark navy) --- */
.dd-longer { background: var(--abyss); color: var(--paper); padding-block: var(--section-pad); }
.dd-longer__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; }
.dd-longer__visual { position: relative; min-height: clamp(280px, 30vw, 400px); }
.dd-longer__photo { position: absolute; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(0, 0, 0, 0.5); }
.dd-longer__photo picture, .dd-longer__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dd-longer__photo--a { top: 0; left: 0; width: 62%; aspect-ratio: 4 / 3; z-index: 1; }
.dd-longer__photo--b { bottom: 0; right: 0; width: 48%; aspect-ratio: 1 / 1.05; z-index: 2; }
.dd-longer__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--paper);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: 0.85rem;
}
.dd-longer__copy > p { font-family: var(--font-body); color: var(--paper); max-width: 48ch; margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.dd-longer__items { display: grid; gap: 1.5rem; }
.dd-longer__items h3 {
  font-family: var(--font-display); font-weight: 700; color: var(--sea-foam); text-transform: uppercase;
  font-size: 0.9rem; letter-spacing: var(--tracking-caps); margin-bottom: 0.35rem;
}
.dd-longer__items p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--paper); opacity: 0.9; font-size: var(--fs-small); max-width: 42ch; }
@media (min-width: 860px) { .dd-longer__grid { grid-template-columns: 0.9fr 1.1fr; } }

/* --- Our Philosophy. --- */
.dd-philosophy { padding-block: var(--section-pad); text-align: center; }
.dd-philosophy__head { max-width: 62ch; margin-inline: auto; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.dd-philosophy__head h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: 1rem;
}
.dd-philosophy__head p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); }
.dd-philosophy__grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dd-philosophy__grid h3 {
  font-family: var(--font-display); font-weight: 700; color: var(--open-sea); text-transform: uppercase;
  font-size: 0.95rem; letter-spacing: var(--tracking-caps); margin-bottom: 0.6rem;
}
.dd-philosophy__grid p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); font-size: var(--fs-small); }

/* --- The Underwater World (dark navy) --- */
.dd-underwater { background: var(--abyss); color: var(--paper); padding-block: var(--section-pad); }
.dd-underwater__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; }
.dd-underwater__visual { position: relative; }
.dd-underwater__photo { aspect-ratio: 4 / 3.6; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.55); }
.dd-underwater__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dd-underwater__caption {
  position: absolute; left: 6%; bottom: 8%; z-index: 2; font-family: var(--font-script); font-weight: 700;
  color: var(--paper); font-size: 1.1rem; line-height: 1.3; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.dd-underwater__copy .dd-icon { width: 32px; height: 32px; color: var(--sea-foam); margin-bottom: 1rem; }
.dd-underwater__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--paper);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: 1rem;
}
.dd-underwater__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--paper); max-width: 46ch; }
.dd-underwater__copy .link-arrow { color: var(--paper); margin-top: 1.5rem; }
.dd-underwater__copy .link-arrow:hover { color: var(--sea-foam); }
@media (min-width: 860px) { .dd-underwater__grid { grid-template-columns: 1.1fr 0.9fr; } }

/* --- Ready for your next descent? (closing) --- */
.dd-closing { padding-block: clamp(3rem, 2.4rem + 2.5vw, 5rem); text-align: center; }
.dd-closing h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem); margin-bottom: 1rem;
}
.dd-closing p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title):not(.p) { font-family: var(--font-body); color: var(--ironwood); font-style: italic; max-width: 56ch; margin-inline: auto; }
.dd-closing p.p { font-family: var(--font-body); color: var(--ironwood); font-style: italic; }
.dd-closing .link-arrow { justify-content: center; color: var(--open-sea); margin-top: 1.5rem; }

/* =========================================================================
   THE GIVING BACK PAGE — rebuilt from the designer's Canva export
   (ENGAGEMENT.pdf). Not linked from the primary nav — the mockup shipped
   with no CTA anywhere pointing to it (a designer oversight), so per
   instruction the only entry point is a new "Engagement" item added to
   the shared footer nav, site-wide (see the "Experience / About Us" footer
   column and the "Contact Us" postal address on every page). Header here
   carries no active nav item, matching that this page isn't a sub-page of
   any single nav destination. Section 5 duplicates dive-deep.html's
   closing section verbatim, exactly as the export has it (own ".gb-
   closing" copy, kept separate per this project's one-class-per-page
   convention even though the rules are identical to .dd-closing).
   "Fond brun/terracotta" reuses --ironwood — already the closest brand
   token to the mockup's colour, no new hex value needed.
   ========================================================================= */

/* --- Giving Back (hero) --- */
.gb-hero { padding-block: clamp(3rem, 2.4rem + 3vw, 5.5rem) 0; text-align: center; }
.gb-hero h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(2.2rem, 1.7rem + 2.6vw, 3.4rem); margin-bottom: 1rem;
}
.gb-hero__subtitle { font-family: var(--font-body); font-style: italic; color: var(--ironwood); font-size: var(--fs-lead); }
.gb-hero__collage {
  position: relative; max-width: 720px; margin-inline: auto; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  min-height: clamp(320px, 34vw, 460px); margin-bottom: 240px;
}
.gb-hero__photo { position: absolute; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.4); }
.gb-hero__photo picture, .gb-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gb-hero__photo--a { left: 0; top: 0; width: 68%; aspect-ratio: 4 / 3; z-index: 1; }
.gb-hero__photo--b { right: 0; bottom: 0; width: 46%; aspect-ratio: 1 / 1.05; z-index: 2; }

/* --- Giving Back to the Forest. (ironwood/terracotta) --- */
.gb-forest { background: var(--ironwood); color: var(--paper); padding-block: var(--section-pad); }
.gb-forest__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3rem); align-items: center; }
.gb-forest__photo { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(0, 0, 0, 0.4); }
.gb-forest__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gb-forest__photo .dot-icon { position: absolute; right: -14%; top: -10%; width: clamp(56px, 6vw, 76px); color: var(--yellaow); }
.gb-forest__photo--right .dot-icon { display: none; }
.gb-forest__caption {
  position: absolute; left: 8%; bottom: 8%; z-index: 2; font-family: var(--font-script); font-weight: 700;
  color: var(--paper); font-size: 1.05rem; line-height: 1.3; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.gb-forest__copy { text-align: center; }
.gb-forest__copy h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--paper);
  font-size: clamp(1.7rem, 1.4rem + 1.5vw, 2.2rem); margin-bottom: 1.1rem;
}
.gb-forest__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--paper); max-width: 42ch; margin-inline: auto; }
.gb-forest__logo {
  display: flex; align-items: center; gap: 0.65rem; justify-content: center;
  margin-top: clamp(2rem, 1.6rem + 1.5vw, 3rem);
}
.gb-forest__logo svg { width: 38px; height: 38px; color: var(--paper); }
.gb-forest__logo span {
  font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--paper); font-size: 0.75rem; line-height: 1.35; text-align: left;
}
@media (min-width: 900px) { .gb-forest__grid { grid-template-columns: 1fr 1.3fr 1fr; } }

/* --- Our Promise --- */
.gb-promise { position: relative; padding-block: var(--section-pad); overflow: hidden; }
.gb-promise__stripes {
  position: absolute; inset: 0 0 0 82%; z-index: 0;
  background-image: repeating-linear-gradient(90deg, var(--ironwood) 0 10px, var(--bg-page) 10px 24px);
  opacity: 0.55;
}
.gb-promise__grid { position: relative; z-index: 1; display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); align-items: center; }
.gb-promise h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem); margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
}
.gb-promise__items { display: grid; gap: 1.75rem; }
.gb-promise__items h3 {
  font-family: var(--font-display); font-weight: 700; color: var(--open-sea); text-transform: uppercase;
  font-size: 0.9rem; letter-spacing: var(--tracking-caps); margin-bottom: 0.5rem;
}
.gb-promise__items p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--abyss); max-width: 44ch; }
.gb-promise__items p + p { margin-top: 0.5rem; }
.gb-promise__visual { position: relative; }
.gb-promise__photo { aspect-ratio: 4 / 4.6; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 38px -20px rgba(16, 35, 63, 0.4); }
.gb-promise__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gb-promise__caption {
  position: absolute; left: 8%; bottom: 8%; z-index: 2; font-family: var(--font-script); font-weight: 700;
  color: var(--yellaow); font-size: 1.1rem; line-height: 1.3; text-shadow: 0 2px 10px rgba(16, 35, 63, 0.6);
}
@media (min-width: 860px) { .gb-promise__grid { grid-template-columns: 1fr 0.9fr; } }

/* --- Ready for your next descent? (closing) --- */
.gb-closing { padding-block: clamp(3rem, 2.4rem + 2.5vw, 5rem); text-align: center; }
.gb-closing h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem); margin-bottom: 1rem;
}
.gb-closing p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title) { font-family: var(--font-body); color: var(--ironwood); font-style: italic; max-width: 56ch; margin-inline: auto; }
.gb-closing .link-arrow { justify-content: center; color: var(--open-sea); margin-top: 1.5rem; }

/* =========================================================================
   THE DESTINATIONS PAGE — rebuilt from the designer's Canva export
   (DESTINATIONS.pdf). Centerpiece is an interactive map (see
   destinations-map.js): full-bleed PNG background, 5 clickable region
   labels, click-to-zoom + a slide-in itinerary panel. This page is the
   site-wide "Destinations" nav target (repointed from itineraries.html
   everywhere, per instruction); itineraries.html still exists as the
   bookable-routes/search page, and this page's own "find your route" /
   "explore the [region]" links point there on purpose.
   The newsletter band reuses .hp-newsletter verbatim (same #newsletter-
   form/#newsletter-note ids main.js already wires up — no new JS needed
   for that part).
   ========================================================================= */

.dst-hero { padding-block: clamp(3rem, 2.4rem + 3vw, 5.5rem) clamp(2rem, 1.6rem + 1.5vw, 3rem); text-align: center; }
.dst-hero h1 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(2.2rem, 1.7rem + 2.6vw, 3.4rem); margin-bottom: 1rem;
}
.dst-hero__subtitle {
  font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--open-sea); font-size: var(--fs-eyebrow);
}

/* --- Interactive map: full-bleed, not wrapped in .container ---
   A stack of same-size images (faint base + one highlighted image per region);
   clicking a label cross-fades to that region's image and slides a small
   itinerary list over the map from the right (nothing moves or zooms). */
.dst-map {
  --stage-w: min(100vw, calc((100vh - 50px) * 1.5406)); /* keep the whole map on screen */
  position: relative; width: 100%; overflow: hidden; background: var(--bg-page);
  margin-bottom: 50px;
}
.dst-map__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.dst-map__img--region { opacity: 0; transition: opacity 0.45s var(--ease); pointer-events: none; }
.dst-map__img--region.is-peek { opacity: 0.55; }
.dst-map__img--region.is-on { opacity: 1; }
/* single-itinerary highlight: sits above the region layers, shown on hover/focus of a route in the side panel */
.dst-map__img--itinerary { z-index: 1; opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; }
.dst-map__img--itinerary.is-on { opacity: 1; }
.dst-map__label {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  background: none; border: 0; padding: 0.4em 0.7em; cursor: pointer;
  font-family: var(--font-script); font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; font-size: clamp(0.75rem, calc(var(--stage-w) * 0.0154), 1.35rem); color: var(--open-sea);
  text-shadow: 0 0 6px var(--bg-page), 0 0 3px var(--bg-page), 0 0 2px var(--bg-page);
  transition: color 0.2s var(--ease);
}
.dst-map__label:hover, .dst-map__label:focus-visible, .dst-map__label.is-active { color: var(--abyss); }
.dst-map__label.is-active { text-decoration: underline; text-decoration-color: var(--yellaow); text-underline-offset: 6px; text-decoration-thickness: 2px; }
@media (max-width: 640px) { .dst-map__label { padding: 0.3em 0.3em; letter-spacing: 0.02em; } }
.dst-map__panel {
  position: absolute; z-index: 4; top: 50%; left: clamp(0.75rem, 2vw, 2rem);
  width: clamp(260px, calc(var(--stage-w) * 0.26), 330px); max-height: calc(100% - 2rem); overflow-y: auto;
  background: #FBF8F1; border: 1px solid rgba(16, 35, 63, 0.35); box-shadow: 0 18px 36px -22px rgba(16, 35, 63, 0.45);
  padding: 1.25rem 1.25rem 1.1rem;
  opacity: 0; visibility: hidden; transform: translate(28px, -50%);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.45s;
}
.dst-map.is-open .dst-map__panel { opacity: 1; visibility: visible; transform: translate(0, -50%); transition-delay: 0s; }
/* Sulawesi and Sunda Islands: the list opens on the right (JS adds .is-right) */
.dst-map__panel.is-right { left: auto; right: clamp(0.75rem, 2vw, 2rem); transform: translate(-28px, -50%); }
.dst-map.is-open .dst-map__panel.is-right { transform: translate(0, -50%); }
.dst-map__panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--yellaow); }
.dst-map__panel-eyebrow {
  font-family: var(--font-display); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--open-sea); font-size: 0.62rem; margin: 0.2rem 0 0.15rem;
}
.dst-map__panel-title { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--abyss); font-size: 1.55rem; line-height: 1.1; margin: 0 0 0.6rem; padding-right: 1.8rem; }
.dst-map__close {
  position: absolute; top: 0.7rem; right: 0.7rem; width: 26px; height: 26px; border: 1px solid var(--abyss); background: none;
  color: var(--abyss); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.dst-map__close:hover { background: var(--abyss); color: var(--paper); }
.dst-map__close svg { width: 12px; height: 12px; }
.dst-map__panel-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(16, 35, 63, 0.18); }
.dst-map__panel-list li { border-bottom: 1px dotted rgba(16, 35, 63, 0.3); }
.dst-map__panel-list a {
  display: grid; grid-template-columns: 1fr auto; column-gap: 0.75rem; align-items: center; padding: 0.6rem 0.1rem; text-decoration: none; color: var(--abyss);
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.dst-map__panel-list a:hover, .dst-map__panel-list a:focus-visible { color: var(--ironwood); padding-left: 0.4rem; }
.dst-map__row-name { font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; line-height: 1.25; }
.dst-map__row-meta { grid-column: 1; font-family: var(--font-body); font-style: italic; font-size: 0.74rem; color: var(--open-sea); }
.dst-map__panel-list svg { grid-row: 1 / span 2; grid-column: 2; width: 15px; height: 15px; opacity: 0.6; }
.dst-map__panel .dst-map__region-link {
  display: inline-block; margin-top: 0.85rem; font-family: var(--font-body); font-size: 0.85rem; color: var(--abyss);
  text-decoration: none; border-bottom: 1px solid var(--yellaow); padding-bottom: 2px; text-transform: none; letter-spacing: 0;
}
.dst-map__panel .dst-map__region-link:hover { color: var(--ironwood); }
.dst-map__stage { position: relative; width: var(--stage-w); max-width: 100%; aspect-ratio: 2200 / 1428; margin-inline: auto; }
@media (max-width: 700px) {
  /* phones: the list opens in flow under the map so the highlighted map stays fully visible */
  .dst-map { --stage-w: 100%; overflow: visible; padding-bottom: 0; margin-bottom: 40px; }
  .dst-map__label { font-size: 0.7rem; }
  .dst-map__panel { position: relative; top: auto; right: auto; width: auto; max-height: none; margin: 0.75rem 1rem 1.25rem; transform: none; display: none; }
  .dst-map.is-open .dst-map__panel, .dst-map.is-open .dst-map__panel.is-right { display: block; transform: none; }
  .dst-map__panel.is-right { left: auto; right: auto; transform: none; }
}

/* --- Intro paragraph (blue) --- */
.dst-intro { background: var(--open-sea); color: var(--paper); padding-block: var(--section-pad); text-align: center; }
.dst-intro p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title):not(.p) { font-family: var(--font-body); color: var(--paper); max-width: 68ch; margin-inline: auto; }
.dst-intro p.p { font-family: var(--font-body); color: var(--paper); }
.dst-intro p + p { margin-top: 0.85rem; }
.dst-intro .link-arrow { justify-content: center; color: var(--paper); margin-top: 1.5rem; }
.dst-intro .link-arrow:hover { color: var(--sea-foam); }

/* --- Five Regions --- */
.dst-regions { padding-block: var(--section-pad); }
.dst-regions__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.dst-regions__head h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--ironwood);
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem);
}
.dst-region { padding-block: clamp(2rem, 1.6rem + 1.5vw, 3rem); }
.dst-region__grid { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); align-items: center; }
.dst-region__copy h3 {
  font-family: var(--font-script); font-weight: 700; color: var(--open-sea);
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); margin-bottom: 1rem;
}
.dst-region__copy p:not(.px-annot):not(.hp-family__script):not(.hp-safety__title):not(.p) { font-family: var(--font-body); color: var(--abyss); max-width: 44ch; }
.dst-region__copy p.p { font-family: var(--font-body); color: var(--abyss); }
.dst-region__copy .link-arrow { color: var(--open-sea); margin-top: 1.25rem; }

/* Postal-stamp placeholder card, standing in for the real vintage-poster
   illustrations — TODO: swap in the real per-region artwork once
   delivered, same spot/size/border treatment. */
.dst-region__stamp {
  position: relative; aspect-ratio: 4 / 3; max-width: 340px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center;
}
.dst-region__stamp-eyebrow {
  font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  font-size: 0.65rem; color: var(--ironwood); opacity: 0.75;
}
.dst-region__stamp svg { width: 56px; height: 56px; color: var(--ironwood); opacity: 0.6; }
.dst-region__stamp-name {
  font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); color: var(--ironwood);
}
@media (min-width: 780px) {
  .dst-region__grid { grid-template-columns: 1fr 1fr; }
  .dst-region--reverse .dst-region__copy { order: 2; }
}


/* =========================================================================
   HOMEPAGE — pixel-measured layout (body.hp-home), >= 1100px only.
   Source of truth: the 1366px-wide Canva export (HOMEPAGE (2).png) and
   waow2-homepage-specs-pixels.md. Every element below is positioned
   absolutely, in export pixels, inside a fixed 1366px-wide "stage" per
   section; at exactly 1366px the page matches the export. Wider than
   1366: the stage centres (backgrounds and flush-edge photos extend to
   the viewport edge via --offz). Between 1100 and 1366: the stage is
   scaled with `zoom` (--z, set by home-stage.js) so proportions hold.
   Below 1100px none of this applies and the fluid rules above take over.
   Where the coordinates in the spec disagreed with the export itself
   ("Explore Indonesia" was ~20% too small) the export was measured.
   ========================================================================= */
:root { --z: 1; }
.hp-divider--thin { height: 2px; background: var(--yellaow); }

@media (min-width: 1100px) {
  .hp-home { --offz: calc((100vw / var(--z) - 1366px) / 2); --offpx: calc((100vw - 1366px * var(--z)) / 2); }
  .hp-home .link-arrow svg { display: none; }
  .hp-home .link-arrow { padding-bottom: 8px; font-size: 17px; letter-spacing: 0; text-transform: none; font-family: var(--font-body); font-weight: 400; }
  .hp-home .hp-divider:not(.hp-divider--thin) { height: 7px; }

  /* the 1366px stage */
  .hp-home .hp-stage, .hp-home .hp-hero__wrap, .hp-home main section > .container,
  .hp-home .hp-footer__grid, .hp-home .hp-footer__legal {
    position: relative; width: 1366px; max-width: none; margin-inline: auto; padding: 0; zoom: var(--z);
    display: block; box-sizing: border-box;
  }
  .hp-home .site-header__row {
    position: relative; width: 1366px; max-width: none; margin-inline: auto; padding: 0; zoom: var(--hz);
    display: block; box-sizing: border-box;
  }
  .hp-home main section, .hp-home .hp-footer { overflow: hidden; }
  .hp-home main section { position: relative; display: block; padding: 0; box-sizing: border-box; }
  .hp-home .hp-intro__copy, .hp-home .hp-intro__visual, .hp-home .hp-boat__copy, .hp-home .hp-boat__collage,
  .hp-home .hp-life__grid, .hp-home .hp-family__copy, .hp-home .hp-family__visual, .hp-home .hp-dive__col,
  .hp-home .hp-dive__copy, .hp-home .hp-safety__copy, .hp-home .hp-explore__head, .hp-home .hp-stamp-row,
  .hp-home .hp-coming-next, .hp-home .hp-coming-next__head, .hp-home .hp-coming-next__row,
  .hp-home .hp-memories__head, .hp-home .hp-postcards, .hp-home .hp-newsletter__form,
  .hp-home .hp-footer__policies, .hp-home .hp-footer__social, .hp-home .hp-footer__grid nav, .hp-home .hp-footer__grid nav ul,
  .hp-home .hp-footer__grid nav li, .hp-home .hp-footer__grid > div { display: contents; }
  .hp-home main section p, .hp-home main section h1, .hp-home main section h2, .hp-home main section h3,
  .hp-home main section figure, .hp-home main section .link-arrow, .hp-home main section article,
  .hp-home .hp-stamp-row li, .hp-home .hp-footer__grid h3, .hp-home .hp-footer__grid address,
  .hp-home .hp-footer__grid a, .hp-home .hp-footer__legal p, .hp-home .hp-footer__policies > *, .hp-home .hp-footer__social a,
  .hp-home .hp-newsletter__form > * , .hp-home .hp-newsletter__row > p { position: absolute; margin: 0; }
  .hp-home .hp-footer__grid nav li { display: block; position: static; }

  /* ---------- Header (122px, matches px-hdA) ---------- */
  .hp-home .site-header { height: calc(122px * var(--hz)); background: var(--bg-page); }
  .hp-home .site-header__row { height: 122px; }
  .hp-home .logo { position: absolute; left: 97px; top: 58px; }
  .hp-home .logo img { width: 130px; height: auto; }
  .hp-home .nav { position: absolute; left: 493px; top: 68px; width: 433px; }
  .hp-home .nav__list { display: flex; justify-content: space-between; gap: 0; }
  .hp-home .nav__list a { font-size: 13px; letter-spacing: 0.06em; }
  .hp-home .site-header__actions { position: absolute; left: 1156px; top: 62px; width: 133px; height: 28px; }
  .hp-home .site-header__actions .btn { width: 133px; height: 28px; padding: 0; font-size: 11px; }
  .hp-home .burger { display: none; }

  /* ---------- Hero (y 125-768) ---------- */
  .hp-home .hp-hero { padding: 0; height: calc(646px * var(--z)); }
  .hp-home .hp-hero__wrap { height: 646px; }
  .hp-home .hp-hero__photo { left: 37px; top: 3px; width: 1294px; height: 610px; aspect-ratio: auto; border-radius: 0; }
  .hp-home .hp-hero__photo picture, .hp-home .hp-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
  .hp-home .hp-stamp { left: 151px; top: 157px; width: 169px; height: 251px; transform: none; overflow: visible; }

  /* ---------- Intro (y 777-1537) ---------- */
  .hp-home .hp-intro { height: calc(763px * var(--z)); }
  .hp-home .hp-intro > .container { height: 761px; top: 2px; }
  .hp-home .hp-intro h1 { left: 118px; top: 158px; width: 460px; font-size: 64px; line-height: 78px; margin: 0; }
  .hp-home .hp-intro__copy p { font-size: 17.5px; line-height: 24px; width: 320px; left: 118px; }
  .hp-home .hp-intro__copy p:nth-of-type(1) { top: 418px; }
  .hp-home .hp-intro__copy p:nth-of-type(2) { top: 516px; margin: 0; }
  .hp-home .hp-intro .link-arrow { left: 118px; top: 578px; }
  .hp-home .hp-intro__photo--a { left: 822px; top: 90px; width: 467px; height: 478px; aspect-ratio: auto; }
  .hp-home .hp-intro__photo--b { left: 564px; top: 266px; width: 312px; height: 414px; aspect-ratio: auto; }
  .hp-home .hp-postmark { left: 990px; top: 540px; width: 262px; height: 120px; right: auto; bottom: auto; }

  /* ---------- The Boat (y 1538-2304) ---------- */
  .hp-home .hp-boat { height: calc(766px * var(--z)); }
  .hp-home .hp-boat > .container { height: 766px; }
  .hp-home .hp-boat__stripes { left: 0; right: auto; top: 0; bottom: 0; width: calc(var(--offpx) + 684px * var(--z)); inset-inline-end: auto; }
  .hp-home .hp-boat__photo--a { left: 134px; top: 123px; width: 309px; height: 399px; aspect-ratio: auto; }
  .hp-home .hp-boat__photo--b { left: 325px; top: 432px; width: 252px; height: 206px; aspect-ratio: auto; }
  .hp-home .hp-boat__script { position: absolute; left: 550px; top: 190px; width: 210px; margin: 0; font-size: 25px; line-height: 53px; letter-spacing: 0.06em; text-transform: uppercase; justify-self: auto; white-space: nowrap; }
  .hp-home .hp-boat__copy h2 { left: 861px; top: 122px; font-size: 68px; line-height: 76px; }
  .hp-home .hp-boat__copy > p { left: 861px; top: 320px; width: 400px; font-size: 17px; line-height: 24px; max-width: none; }
  .hp-home .hp-boat .link-arrow { left: 861px; top: 430px; }
  .hp-home .hp-boat__stats { position: absolute; left: 833px; top: 533px; margin: 0; gap: 0; display: flex; }
  .hp-home .hp-boat__stats li { width: 112px; font-size: 22px; line-height: 27px; letter-spacing: 0; color: var(--open-sea); text-align: center; }
  .hp-home .hp-boat__stats span { font-size: 22px; line-height: 27px; text-transform: none; }

  /* ---------- Life Onboard (y 2312-3070) ---------- */
  .hp-home .hp-life { height: calc(759px * var(--z)); }
  .hp-home .hp-life > .container { height: 759px; }
  .hp-home .hp-eyebrow-script { position: absolute; left: 133px; top: 62px; margin: 0; font-size: 42px; letter-spacing: 0.06em; text-transform: uppercase; }
  .hp-home .hp-life__grid article { top: 155px; width: 335px; }
  .hp-home .hp-life__grid article:nth-child(1) { left: 127px; }
  .hp-home .hp-life__grid article:nth-child(2) { left: 515px; }
  .hp-home .hp-life__grid article:nth-child(3) { left: 903px; }
  .hp-home .hp-life__grid figure { position: static; height: 317px; aspect-ratio: auto; margin: 0 0 26px; border-radius: 0; }
  .hp-home .hp-life__grid h3 { position: static; font-size: 20px; margin: 0 0 12px; }
  .hp-home .hp-life__grid p { position: static; font-size: 17px; line-height: 24px; }
  .hp-home .hp-life__link { left: 1080px; top: 668px; width: 154px; display: flex; justify-content: center; margin: 0; }

  /* ---------- A Family Affair (y 3072-3841) ---------- */
  .hp-home .hp-family { height: calc(770px * var(--z)); }
  .hp-home .hp-family > .container { height: 770px; }
  .hp-home .hp-family__stripes { left: calc(var(--offpx) + 1145px * var(--z)); right: 0; width: auto; inset-block: 0; }
  .hp-home .hp-family__copy h2 { left: 130px; top: 118px; font-size: 66px; line-height: 78px; }
  .hp-home .hp-family__script { left: 130px; top: 306px; font-size: 34px; margin: 0; }
  .hp-home .hp-family__copy > p:not(.hp-family__script) { left: 116px; top: 403px; width: 400px; font-size: 17px; line-height: 24px; max-width: none; }
  .hp-home .hp-family__link { left: 122px; top: 611px; margin: 0; }
  .hp-home .hp-family__visual figure { left: 720px; top: 98px; width: 428px; height: 569px; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
  .hp-home .hp-family__visual .dot-icon { position: absolute; left: 548px; top: 540px; width: 217px; height: 150px; bottom: auto; }

  /* ---------- Dive into Indonesia (y 3842-4608) ---------- */
  .hp-home .hp-dive { height: calc(766px * var(--z)); }
  .hp-home .hp-dive > .container { height: 766px; }
  .hp-home .hp-dive__grid { min-height: 0; }
  .hp-home .hp-dive__photo--left { left: calc(-1 * var(--offz)); top: 0; width: calc(386px + var(--offz)); height: 513px; aspect-ratio: auto; border-radius: 0; }
  .hp-home .hp-dive__photo--left figcaption { left: calc(44px + var(--offz)); bottom: 14px; font-size: 30px; }
  .hp-home .hp-dive__caption-out { position: absolute; left: 0; top: 522px; width: 386px; text-align: center; font-size: 30px; margin: 0; }
  .hp-home .hp-dive__copy h2 { left: 528px; top: 148px; width: 310px; text-align: center; font-size: 40px; line-height: 49px; }
  .hp-home .hp-dive__copy p { left: 508px; width: 350px; text-align: center; font-size: 17px; line-height: 24px; max-width: none; }
  .hp-home .hp-dive__copy p:nth-of-type(1) { top: 303px; }
  .hp-home .hp-dive__copy p:nth-of-type(2) { top: 401px; margin: 0; }
  .hp-home .hp-dive__copy .link-arrow { left: 528px; width: 310px; top: 577px; justify-content: center; margin: 0; }
  .hp-home .hp-dive__photo--right { left: 1053px; top: 297px; width: calc(313px + var(--offz)); height: 469px; aspect-ratio: auto; overflow: visible; }
  .hp-home .hp-dive__mask-icon { left: -180px; top: -117px; width: 400px; height: auto; }

  /* ---------- Safety First (y 4616-5375) ---------- */
  .hp-home .hp-safety { height: calc(761px * var(--z)); }
  .hp-home .hp-safety > .container { height: 761px; }
  .hp-home .hp-safety__photo { left: 115px; top: 100px; width: 512px; height: 562px; aspect-ratio: auto; overflow: visible; border-radius: 0; }
  .hp-home .hp-safety__photo picture, .hp-home .hp-safety__photo img { width: 100%; height: 100%; object-fit: cover; }
  .hp-home .hp-safety__photo .dot-icon { left: 465px; top: 475px; width: 148px; height: 105px; right: auto; bottom: auto; }
  .hp-home .hp-safety__title { left: 858px; top: 234px; width: 325px; text-align: center; font-size: 30px; letter-spacing: 0.05em; margin: 0; }
  .hp-home .hp-safety__copy p:not(.hp-safety__title) { left: 858px; top: 314px; width: 325px; text-align: center; font-size: 17px; line-height: 24px; max-width: none; }
  .hp-home .hp-safety .link-arrow { left: 858px; top: 480px; width: 325px; justify-content: center; margin: 0; }

  /* ---------- Explore Indonesia + Coming Next (y 5376-6700) ---------- */
  .hp-home .hp-explore { height: calc(1325px * var(--z)); }
  .hp-home .hp-explore > .container { height: 1325px; }
  .hp-home .hp-explore__head h2 { left: 0; width: 1366px; top: 106px; text-align: center; font-size: 30px; line-height: 37px; letter-spacing: 0.05em; }
  .hp-home .hp-explore__head p { left: 383px; width: 600px; top: 227px; text-align: center; font-size: 17px; line-height: 24px; max-width: none; }
  .hp-home .hp-explore__head .link-arrow { left: 569px; width: 228px; top: 368px; justify-content: center; margin: 0; }
  .hp-home .hp-stamp-row li { top: 483px; width: 218px; height: 152px; }
  .hp-home .hp-stamp-row li:nth-child(1) { left: 88px; } .hp-home .hp-stamp-row li:nth-child(2) { left: 331px; }
  .hp-home .hp-stamp-row li:nth-child(3) { left: 574px; } .hp-home .hp-stamp-row li:nth-child(4) { left: 817px; }
  .hp-home .hp-stamp-row li:nth-child(5) { left: 1060px; }
  .hp-home .hp-dest-stamp { width: 218px; height: 152px; }
  .hp-home .hp-coming-next__head .hp-eyebrow-script { left: 93px; top: 764px; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: 0.05em; text-transform: uppercase; }
  .hp-home .hp-coming-next__track { position: absolute; left: 93px; top: 830px; display: flex; gap: 32px; overflow: visible; padding: 0; }
  .hp-home .hp-coming-next__card { position: static; width: 244px; }
  .hp-home .hp-coming-next__card p { position: static; }
  .hp-home .hp-coming-next__card figure { position: relative; height: 303px; aspect-ratio: auto; margin: 0 0 14px; border-radius: 0; }
  .hp-home .hp-coming-next__card p { text-align: center; font-size: 17px; }
  .hp-home .hp-coming-next__nav { position: absolute; left: 1205px; top: 940px; width: 75px; height: 113px; border: 0; border-radius: 0; }
  .hp-home .hp-coming-next__nav svg { width: 75px; height: 113px; stroke-width: 3; }

  /* ---------- Memories (y 6701-7476) ---------- */
  .hp-home .hp-memories { height: calc(776px * var(--z)); }
  .hp-home .hp-memories > .container { height: 776px; }
  .hp-home .hp-memories h2 { left: 0; width: 1366px; top: 100px; text-align: center; font-size: 42px; line-height: 50px; margin: 0; }
  .hp-home .hp-memories__head p { left: 233px; width: 900px; text-align: center; font-size: 17px; line-height: 24px; max-width: none; }
  .hp-home .hp-memories__head p:nth-of-type(1) { top: 214px; }
  .hp-home .hp-memories__head p:nth-of-type(2) { top: 286px; margin: 0; }
  .hp-home .hp-memories .link-arrow { left: 588px; width: 192px; top: 348px; justify-content: center; margin: 0; }
  .hp-home .hp-postcard { transform-origin: center; height: 226px; min-height: 0; }
  .hp-home .hp-postcard__meta, .hp-home .hp-postcard__quote { position: static; }
  .hp-home .hp-postcard:nth-child(1) { left: 110px; top: 458px; width: 335px; transform: rotate(2.3deg); }
  .hp-home .hp-postcard:nth-child(2) { left: 520px; top: 458px; width: 340px; transform: rotate(-4.4deg); }
  .hp-home .hp-postcard:nth-child(3) { left: 945px; top: 455px; width: 335px; transform: rotate(2.6deg); }
  .hp-home .hp-postcard__stamp { width: 76px; height: 80px; top: 22px; right: 22px; }
  .hp-home .hp-memories .hp-postcard p { font-family: var(--font-script); color: var(--abyss); }
  .hp-home .hp-postcard__meta { font-size: 14px; }
  .hp-home .hp-postcard__quote { font-size: 15px; margin-top: 2rem; }
  .hp-home .hp-postcard__author { position: absolute; right: 1.5rem; bottom: 1rem; margin: 0; font-size: 13px; }

  /* ---------- Newsletter (93px) ---------- */
  .hp-home .hp-newsletter { height: calc(93px * var(--z)); padding: 0; border-top: 0; display: block; }
  .hp-home .hp-newsletter__row { height: 93px; }
  .hp-home .hp-newsletter__row > p:first-child { left: 60px; top: 14px; font-size: 19px; line-height: 25px; }
  .hp-home .hp-newsletter__form input { left: 735px; top: 22px; width: 312px; height: 48px; min-width: 0; }
  .hp-home .hp-newsletter__form button { left: 1085px; top: 22px; width: 204px; height: 48px; padding: 0; font-size: 21px; }

  /* ---------- Footer ---------- */
  .hp-home .hp-footer { padding: 0; height: auto; }
  .hp-home .hp-footer__grid { height: 141px; }
  .hp-home .hp-footer__grid h3 { left: 177px; top: 26px; width: 300px; text-align: center; font-size: 24px; margin: 0; }
  .hp-home .hp-footer__grid > div > a { left: 177px; top: 62px; width: 300px; text-align: center; font-size: 18px; }
  .hp-home .hp-footer__grid address { left: 177px; top: 90px; width: 300px; text-align: center; font-size: 13px; line-height: 17px; margin: 0; }
  .hp-home .hp-footer__grid nav a { font-size: 17px; }
  .hp-home .hp-footer__grid nav:nth-of-type(1) li:nth-child(1) a { left: 635px; top: 32px; }
  .hp-home .hp-footer__grid nav:nth-of-type(1) li:nth-child(2) a { left: 635px; top: 70px; }
  .hp-home .hp-footer__grid nav:nth-of-type(2) li:nth-child(1) a { left: 875px; top: 32px; }
  .hp-home .hp-footer__grid nav:nth-of-type(2) li:nth-child(2) a { left: 875px; top: 70px; }
  .hp-home .hp-footer__grid nav:nth-of-type(2) li:nth-child(3) a { left: 875px; top: 108px; }
  .hp-home .hp-footer__grid nav:nth-of-type(3) li:nth-child(1) a { left: 1065px; top: 32px; }
  .hp-home .hp-footer__grid nav:nth-of-type(3) li:nth-child(2) a { left: 1065px; top: 70px; }
  .hp-home .hp-footer__legal { height: 77px; }
  .hp-home .hp-footer__legal > p { left: 75px; top: 13px; font-size: 13px; line-height: 16px; }
  .hp-home .hp-footer__policies > * { top: 24px; font-size: 13px; }
  .hp-home .hp-footer__policies .hp-footer__lang-select { left: 342px; }
  .hp-home .hp-footer__policies a:nth-of-type(1) { left: 496px; }
  .hp-home .hp-footer__policies a:nth-of-type(2) { left: 679px; }
  .hp-home .hp-footer__policies a:nth-of-type(3) { left: 859px; }
  .hp-home .hp-footer__social a { top: 18px; }
  .hp-home .hp-footer__social a:nth-child(1) { left: 1095px; } .hp-home .hp-footer__social a:nth-child(2) { left: 1150px; } .hp-home .hp-footer__social a:nth-child(3) { left: 1198px; }
  .hp-home .hp-footer__social svg { width: 26px; height: 26px; }
}

/* =========================================================================
   THE BOAT PAGE — pixel-measured layout (body.tbp-page), >= 1100px only.
   Source of truth: the Canva export THE BOAT (1).png scaled to the page's
   1190px reference width (home-stage.js, data-stage="1190"). Same method
   as the homepage block above: fixed 1190px stage per section, every
   element placed in export pixels, stage centred above 1190px and scaled
   with `zoom` between 1100 and 1190. Positions were measured on the
   export itself; the spec's intro coordinates (title, photos, paragraph)
   were ~10% off the image and were re-measured. Below 1100px the fluid
   .tbp-* rules earlier in this file apply. The 3D-model placeholder has no
   slot in this layout, so it only shows in the fluid layout.
   ========================================================================= */
.tbp-timeline__rule {
  height: 7px; display: block;
  background:
    repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) top / 100% 1.5px no-repeat,
    repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) bottom / 100% 1.5px no-repeat;
}
.tbp-diagram__callout-text { font-family: var(--font-script); font-weight: 700; font-size: 22px; fill: #10233F; }
.tbp-slider__step--above .tbp-slider__desc { display: none; }
.tbp-indoor__anchor { display: none; }

@media (min-width: 1100px) {
  .tbp-page { --offz: calc((100vw / var(--z) - 1190px) / 2); --offpx: calc((100vw - 1190px * var(--z)) / 2); }
  .tbp-page .tbp-model { display: none; }
  .tbp-page .tbp-slider__step--above .tbp-slider__desc { display: block; }
  .tbp-page .tbp-slider__title { display: none; }
  .tbp-page .link-arrow svg { display: none; }
  .tbp-page .link-arrow { padding-bottom: 8px; font-size: 16px; letter-spacing: 0; text-transform: none; font-family: var(--font-body); font-weight: 400; }

  .tbp-page .tbp-stage, .tbp-page .hp-footer__grid, .tbp-page .hp-footer__legal {
    position: relative; display: block; width: 1190px; max-width: none; margin-inline: auto; padding: 0; zoom: var(--z); box-sizing: border-box;
  }
  .tbp-page .site-header__row {
    position: relative; display: block; width: 1366px; max-width: none; margin-inline: auto; padding: 0; zoom: var(--hz); box-sizing: border-box;
  }
  .tbp-page main section { position: relative; display: block; padding: 0; overflow: hidden; box-sizing: border-box; min-height: 0; margin: 0; }
  .tbp-page .tbp-hero__head, .tbp-page .tbp-intro__collage, .tbp-page .tbp-intro__copy, .tbp-page .tbp-figures__grid,
  .tbp-page .tbp-deckplan__tabs, .tbp-page .tbp-cabins__grid, .tbp-page .tbp-fullbleed__copy, .tbp-page .tbp-divers__collage,
  .tbp-page .tbp-divers__copy, .tbp-page .tbp-life__copy, .tbp-page .tbp-life__visual,
  .tbp-page .hp-footer__policies, .tbp-page .hp-footer__social, .tbp-page .hp-footer__grid nav, .tbp-page .hp-footer__grid nav ul,
  .tbp-page .hp-footer__grid nav li, .tbp-page .hp-footer__grid > div { display: contents; }
  .tbp-page .hp-footer__grid nav li { display: block; position: static; }
  .tbp-page .hp-footer__grid h3, .tbp-page .hp-footer__grid address, .tbp-page .hp-footer__grid a, .tbp-page .hp-footer__legal p,
  .tbp-page .hp-footer__policies > *, .tbp-page .hp-footer__social a { position: absolute; margin: 0; }

  /* ---------- Header (122px, matches px-hdA on a shared 1366px header stage) ---------- */
  .tbp-page .site-header { height: calc(122px * var(--hz)); background: var(--bg-page); }
  .tbp-page .site-header__row { height: 122px; }
  .tbp-page .logo { position: absolute; left: 97px; top: 58px; }
  .tbp-page .logo img { width: 130px; height: auto; }
  .tbp-page .nav { position: absolute; left: 493px; top: 68px; width: 433px; }
  .tbp-page .nav__list { display: flex; justify-content: space-between; gap: 0; }
  .tbp-page .nav__list a { font-size: 13px; letter-spacing: 0.06em; }
  .tbp-page .site-header__actions { position: absolute; left: 1156px; top: 62px; width: 133px; height: 28px; }
  .tbp-page .site-header__actions .btn { width: 133px; height: 28px; padding: 0; font-size: 11px; }
  .tbp-page .burger { display: none; }

  /* ---------- Title + intro (y 110-1341) ---------- */
  .tbp-page .tbp-hero { height: calc(1231px * var(--z)); }
  .tbp-page .tbp-hero > .tbp-stage { height: 1231px; }
  .tbp-page .tbp-hero h1 { position: absolute; left: 0; width: 1190px; top: 100px; text-align: center; font-size: 54px; line-height: 64px; margin: 0; }
  .tbp-page .tbp-hero p { position: absolute; margin: 0; max-width: none; text-align: center; font-style: normal; font-size: 17.5px; line-height: 24px; color: var(--ironwood); }
  .tbp-page .tbp-hero__sub { left: 345px; width: 500px; top: 195px; }
  .tbp-page .tbp-hero__date { left: 345px; width: 500px; top: 267px; }
  .tbp-page .tbp-intro__photo--a { left: 266px; top: 382px; width: 407px; height: 416px; aspect-ratio: auto; border-radius: 0; }
  .tbp-page .tbp-intro__photo--b { left: 637px; top: 559px; width: 271px; height: 361px; aspect-ratio: auto; border-radius: 0; }
  .tbp-page .tbp-intro__copy p { position: absolute; left: 285px; width: 620px; top: 1022px; margin: 0; max-width: none; text-align: center; font-size: 17.5px; line-height: 25px; }

  /* ---------- Ship diagram (y 1341-2009) ---------- */
  .tbp-page .tbp-diagram { height: calc(610px * var(--z)); }
  .tbp-page .tbp-diagram > .tbp-stage { height: 610px; }
  .tbp-page .tbp-diagram__lead { position: absolute; left: 90px; top: 50%; transform: translateY(-50%); width: 290px; max-width: none; margin: 0; font-size: 17px; line-height: 24.5px; text-align: left; }
  .tbp-page .tbp-diagram__art { position: absolute; left: 472px; top: 50%; transform: translateY(-50%); width: 666px; }

  /* ---------- Key Figures (y 2009-2438) ---------- */
  .tbp-page .tbp-figures { height: calc(600px * var(--z)); text-align: left; }
  .tbp-page .tbp-figures > .tbp-stage { height: 600px; }
  .tbp-page .tbp-figures h2 { position: absolute; left: 0; width: 1190px; top: 72px; margin: 0; text-align: center; font-size: 44px; line-height: 60px; letter-spacing: 0.06em; text-transform: uppercase; }
  .tbp-page .tbp-figures__frame { position: absolute; left: 232px; top: 180px; width: 726px; height: 330px; max-width: none; margin: 0; }
  .tbp-page .tbp-figures__inner { position: relative; height: 100%; padding: 0; }
  .tbp-page .tbp-figures__grid > div { position: absolute; width: 170px; text-align: center; }
  .tbp-page .tbp-figures__grid dt { font-size: 38px; line-height: 40px; }
  .tbp-page .tbp-figures__grid .tbp-figures__label { font-size: 17px; line-height: 20px; margin: 0; letter-spacing: 0.02em; }
  .tbp-page .tbp-figures__grid dd { font-size: 12.5px; line-height: 20px; margin: 10px 0 0; }
  .tbp-page .tbp-figures__grid > div:nth-child(1) { left: 45px; top: 48px; }
  .tbp-page .tbp-figures__grid > div:nth-child(2) { left: 173px; top: 48px; }
  .tbp-page .tbp-figures__grid > div:nth-child(3) { left: 310px; top: 48px; }
  .tbp-page .tbp-figures__grid > div:nth-child(4) { left: 469px; top: 48px; }
  .tbp-page .tbp-figures__grid > div:nth-child(5) { left: 112px; top: 181px; }
  .tbp-page .tbp-figures__grid > div:nth-child(6) { left: 251px; top: 181px; }
  .tbp-page .tbp-figures__grid > div:nth-child(7) { left: 411px; top: 181px; }

  /* ---------- Deck plan selector (y 2438-2936) ---------- */
  .tbp-page .tbp-deckplan { height: calc(620px * var(--z)); }
  .tbp-page .tbp-deckplan > .tbp-stage { height: 620px; }
  .tbp-page .tbp-deckplan__tab { position: absolute; top: 100px; text-align: center; font-size: 17px; letter-spacing: 0.04em; padding-bottom: 9px; margin: 0; }
  .tbp-page .tbp-deckplan__tab:nth-child(1) { left: 274px; width: 126px; }
  .tbp-page .tbp-deckplan__tab { white-space: nowrap; }
  .tbp-page .tbp-deckplan__tab:nth-child(2) { left: 519px; width: 140px; }
  .tbp-page .tbp-deckplan__tab:nth-child(3) { left: 782px; width: 140px; }
  .tbp-page .tbp-deckplan__stage { position: absolute; left: 155px; top: 210px; width: 880px; height: 330px; aspect-ratio: auto; max-width: none; margin: 0; }

  /* ---------- The Making of Waow 2 (y 2936-4021) ---------- */
  .tbp-page .tbp-timeline { height: calc(1085px * var(--z)); text-align: left; }
  .tbp-page .tbp-timeline > .tbp-stage { height: 1085px; }
  .tbp-page .tbp-timeline__rule { position: absolute; left: 0; right: 0; bottom: 0; }
  .tbp-page .tbp-timeline h2 { position: absolute; left: 0; width: 1190px; top: 86px; margin: 0; text-align: center; font-size: 34px; line-height: 48px; letter-spacing: 0.04em; }
  .tbp-page .tbp-timeline__lead { position: absolute; left: 145px; width: 900px; top: 180px; margin: 0; max-width: none; text-align: center; font-size: 15.5px; line-height: 21px; }
  .tbp-page .tbp-timeline__cta { position: absolute; left: 495px; width: 200px; top: 243px; margin: 0; justify-content: center; }
  .tbp-page .tbp-slider { position: static; }
  .tbp-page .tbp-slider__track { position: static; display: block; padding: 0; }
  .tbp-page .tbp-slider__baseline { position: absolute; left: calc(-1 * var(--offz)); width: calc(1190px + 2 * var(--offz)); top: 645px; height: 1px; opacity: 0.75; }
  .tbp-page .tbp-slider__step { position: absolute; top: 0; width: 330px; height: 1085px; display: block; transform: none; }
  .tbp-page .tbp-slider__step::after { display: none; }
  .tbp-page .tbp-slider__step:nth-child(1) { left: 105px; }
  .tbp-page .tbp-slider__step:nth-child(2) { left: 430px; }
  .tbp-page .tbp-slider__step:nth-child(3) { left: 755px; }
  .tbp-page .tbp-stack { position: absolute; width: 140px; height: 104px; }
  .tbp-page .tbp-slider__step:nth-child(1) .tbp-stack, .tbp-page .tbp-slider__step:nth-child(3) .tbp-stack { left: 61px; top: 417px; }
  .tbp-page .tbp-slider__step:nth-child(2) .tbp-stack { left: 61px; top: 697px; }
  /* tick + dot joining each step to the timeline (baseline y=645), centred on the step and touching its photo stack */
  .tbp-page .tbp-slider__tick { display: block; position: absolute; left: 165px; width: 1px; background: var(--ironwood); opacity: 0.8; }
  .tbp-page .tbp-slider__tick::after { content: ""; position: absolute; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ironwood); }
  .tbp-page .tbp-slider__step:nth-child(odd) .tbp-slider__tick { top: 592px; height: 53px; }
  .tbp-page .tbp-slider__step:nth-child(odd) .tbp-slider__tick::after { bottom: -3px; }
  .tbp-page .tbp-slider__step:nth-child(2) .tbp-slider__tick { top: 645px; height: 49px; }
  .tbp-page .tbp-slider__step:nth-child(2) .tbp-slider__tick::after { top: -3px; }
  .tbp-page .tbp-slider__date { position: absolute; left: 0; width: 330px; margin: 0; text-align: center; font-size: 20px; line-height: 24px; text-transform: uppercase; letter-spacing: 0.05em; order: 0; }
  .tbp-page .tbp-slider__desc { position: absolute; left: 15px; width: 300px; margin: 0; text-align: center; font-size: 14.5px; line-height: 20px; max-width: none; order: 0; }
  .tbp-page .tbp-slider__step:nth-child(1) .tbp-slider__date, .tbp-page .tbp-slider__step:nth-child(3) .tbp-slider__date { top: 716px; }
  .tbp-page .tbp-slider__step:nth-child(1) .tbp-slider__desc, .tbp-page .tbp-slider__step:nth-child(3) .tbp-slider__desc { top: 766px; }
  .tbp-page .tbp-slider__step:nth-child(2) .tbp-slider__date { top: 453px; }
  .tbp-page .tbp-slider__step:nth-child(2) .tbp-slider__desc { top: 501px; }
  .tbp-page .tbp-slider__nav {
    position: absolute; left: 445px; width: 300px; top: 958px; margin: 0; gap: 22px; align-items: center;
    /* each .tbp-slider__step is a full 1085px-tall click/hover target (see
       above), and the nav buttons sit geometrically inside the middle
       step's box; that step jumps to z-index:40 on hover (to let its photo
       stack burst over its neighbours), which would otherwise cover the
       nav and swallow the click. Keep the nav above any hovered step. */
    z-index: 50;
  }
  .tbp-page .tbp-slider__arrow { width: 34px; height: 34px; }

  /* ---------- The Cabins (y 4021-4680) ---------- */
  .tbp-page .tbp-cabins { height: calc(659px * var(--z)); }
  .tbp-page .tbp-cabins > .tbp-stage { height: 659px; }
  .tbp-page .tbp-cabins h2 { position: absolute; left: 90px; top: 45px; margin: 0; font-size: 50px; line-height: 60px; }
  .tbp-page .tbp-cabins__grid article { position: absolute; top: 149px; width: 227px; }
  .tbp-page .tbp-cabins__grid article:nth-child(1) { left: 88px; }
  .tbp-page .tbp-cabins__grid article:nth-child(2) { left: 351px; }
  .tbp-page .tbp-cabins__grid article:nth-child(3) { left: 613px; }
  .tbp-page .tbp-cabins__grid article:nth-child(4) { left: 875px; }
  .tbp-page .tbp-cabins__grid figure { height: 245px; aspect-ratio: auto; margin: 0 0 15px; border-radius: 0; }
  .tbp-page .tbp-cabins__grid h3 { font-size: 18px; line-height: 26px; margin: 0 0 6px; }
  .tbp-page .tbp-cabins__grid p { font-size: 14.5px; line-height: 19px; max-width: none; }
  .tbp-page .tbp-cabins__link { position: absolute; left: 495px; width: 200px; top: 571px; margin: 0; justify-content: center; }

  /* ---------- Outdoor Spaces (y 4680-5450) ---------- */
  .tbp-page .tbp-fullbleed { height: calc(770px * var(--z)); }
  .tbp-page .tbp-fullbleed--indoor { height: calc(569px * var(--z)); }
  .tbp-page .tbp-fullbleed > .tbp-stage { height: 770px; }
  .tbp-page .tbp-fullbleed--indoor > .tbp-stage { height: 569px; }
  .tbp-page .tbp-fullbleed__photo { position: absolute; aspect-ratio: auto; box-shadow: none; margin: 0; }
  .tbp-page .tbp-fullbleed__photo--tl { left: 894px; top: 0; width: calc(296px + var(--offz)); height: 441px; }
  .tbp-page .tbp-fullbleed__photo--br { left: -117px; top: 128px; right: auto; bottom: auto; width: 835px; height: 607px; }
  .tbp-page .tbp-outdoor__icon { position: absolute; left: 848px; top: 400px; bottom: auto; width: 229px; height: 152px; display: block; }
  .tbp-page .tbp-fullbleed__copy h2 { position: absolute; left: 445px; width: 300px; top: 172px; margin: 0; text-align: center; font-size: 34px; line-height: 43px; }
  .tbp-page .tbp-fullbleed__copy p { position: absolute; left: 450px; width: 290px; margin: 0; max-width: none; text-align: center; font-size: 15.5px; line-height: 24px; padding: 0; }
  .tbp-page #outdoor .tbp-fullbleed__copy p:nth-of-type(1) { top: 304px; }
  .tbp-page #outdoor .tbp-fullbleed__copy p:nth-of-type(2) { top: 400px; }

  /* ---------- Indoor Spaces (y 5450-6019) ---------- */
  .tbp-page .tbp-fullbleed__photo--full-right { left: 735px; top: 0; right: auto; width: calc(455px + var(--offz)); height: 569px; }
  .tbp-page #indoor .tbp-fullbleed__copy h2 { left: 213px; width: 160px; top: 78px; text-align: left; }
  .tbp-page #indoor .tbp-fullbleed__copy p { left: 213px; width: 285px; text-align: justify; font-size: 15.5px; line-height: 21px; }
  .tbp-page #indoor .tbp-fullbleed__copy p:nth-of-type(1) { top: 214px; }
  .tbp-page #indoor .tbp-fullbleed__copy p:nth-of-type(2) { top: 300px; }
  .tbp-page .tbp-indoor__anchor { display: block; position: absolute; left: 680px; top: 0; width: 100px; height: 148px; color: var(--open-sea); z-index: 3; }

  /* ---------- Made for Divers (y 6019-6689) ---------- */
  .tbp-page .tbp-divers { height: calc(670px * var(--z)); }
  .tbp-page .tbp-divers > .tbp-stage { height: 670px; }
  .tbp-page .tbp-divers__stripes { inset: 0 auto 0 0; width: calc(var(--offpx) + 598px * var(--z)); background-image: repeating-linear-gradient(90deg, var(--abyss) 0 6px, var(--bg-page) 6px 12px); }
  .tbp-page .tbp-divers__photo--a { left: 118px; top: 105px; width: 267px; height: 347px; aspect-ratio: auto; box-shadow: none; }
  .tbp-page .tbp-divers__photo--b { left: 284px; top: 377px; right: auto; bottom: auto; width: 216px; height: 178px; aspect-ratio: auto; box-shadow: none; }
  .tbp-page .tbp-divers__caption { left: 222px; top: 388px; bottom: auto; font-size: 24px; line-height: 27px; text-transform: uppercase; letter-spacing: 0.05em; text-shadow: none; }
  .tbp-page .tbp-divers__copy h2 { position: absolute; left: 751px; top: 120px; margin: 0; font-size: 53px; line-height: 68px; }
  .tbp-page .tbp-divers__copy p { position: absolute; left: 751px; width: 340px; margin: 0; max-width: none; font-size: 15.5px; line-height: 20.6px; }
  .tbp-page .tbp-divers__copy p:nth-of-type(1) { top: 277px; }
  .tbp-page .tbp-divers__copy p:nth-of-type(2) { top: 372px; }
  .tbp-page .tbp-divers__copy .link-arrow { position: absolute; left: 751px; top: 528px; margin: 0; }

  /* ---------- Life at Sea (y 6689-7119) ---------- */
  .tbp-page .tbp-life { height: calc(430px * var(--z)); }
  .tbp-page .tbp-life > .tbp-stage { height: 430px; }
  .tbp-page .tbp-life::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; z-index: 2; background: repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) top / 100% 1.5px no-repeat, repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) bottom / 100% 1.5px no-repeat; }
  .tbp-page .tbp-life h2 { position: absolute; left: 95px; width: 600px; top: 120px; margin: 0; text-align: center; font-size: 40px; line-height: 50px; letter-spacing: 0.12em; text-transform: uppercase; }
  .tbp-page .tbp-life__copy p { position: absolute; left: 5px; width: 780px; top: 201px; margin: 0; max-width: none; text-align: center; font-size: 15.5px; line-height: 25px; }
  .tbp-page .tbp-life__copy .link-arrow { position: absolute; left: 295px; width: 200px; top: 265px; margin: 0; justify-content: center; }
  .tbp-page .tbp-life__visual figure { position: absolute; left: 845px; top: 60px; width: 237px; height: 297px; aspect-ratio: auto; box-shadow: none; border-radius: 0; margin: 0; }
  .tbp-page .tbp-life__visual .dot-icon { position: absolute; left: 785px; top: 255px; bottom: auto; width: 100px; height: 113px; }

  /* ---------- Footer (y 7119-7310) ---------- */
  .tbp-page .hp-footer { padding: 0; height: auto; border-top: 1px solid rgba(16, 35, 63, 0.14); }
  .tbp-page .hp-footer__grid { height: 137px; }
  .tbp-page .hp-footer > .hp-divider { height: 6px; }
  .tbp-page .hp-footer__grid h3 { left: 225px; top: 33px; font-size: 20px; }
  .tbp-page .hp-footer__grid > div > a { left: 225px; top: 63px; font-size: 16px; }
  .tbp-page .hp-footer__grid address { left: 225px; top: 88px; font-size: 12px; line-height: 15px; }
  .tbp-page .hp-footer__grid nav a { font-size: 16px; }
  .tbp-page .hp-footer__grid nav:nth-of-type(1) li:nth-child(1) a { left: 553px; top: 33px; }
  .tbp-page .hp-footer__grid nav:nth-of-type(1) li:nth-child(2) a { left: 553px; top: 69px; }
  .tbp-page .hp-footer__grid nav:nth-of-type(2) li:nth-child(1) a { left: 762px; top: 33px; }
  .tbp-page .hp-footer__grid nav:nth-of-type(2) li:nth-child(2) a { left: 762px; top: 69px; }
  .tbp-page .hp-footer__grid nav:nth-of-type(2) li:nth-child(3) a { left: 762px; top: 105px; }
  .tbp-page .hp-footer__grid nav:nth-of-type(3) li:nth-child(1) a { left: 928px; top: 33px; }
  .tbp-page .hp-footer__grid nav:nth-of-type(3) li:nth-child(2) a { left: 928px; top: 69px; }
  .tbp-page .hp-footer__legal { height: 47px; }
  .tbp-page .hp-footer__legal > p { left: 67px; top: 9px; font-size: 12px; line-height: 15px; }
  .tbp-page .hp-footer__policies > * { top: 15px; font-size: 12px; }
  .tbp-page .hp-footer__policies .hp-footer__lang-select { left: 298px; }
  .tbp-page .hp-footer__policies a:nth-of-type(1) { left: 432px; }
  .tbp-page .hp-footer__policies a:nth-of-type(2) { left: 591px; }
  .tbp-page .hp-footer__policies a:nth-of-type(3) { left: 748px; }
  .tbp-page .hp-footer__social a { top: 12px; }
  .tbp-page .hp-footer__social a:nth-child(1) { left: 953px; } .tbp-page .hp-footer__social a:nth-child(2) { left: 1002px; } .tbp-page .hp-footer__social a:nth-child(3) { left: 1041px; }
  .tbp-page .hp-footer__social svg { width: 24px; height: 24px; }
}
@media (max-width: 700px) { .tbp-model__box { aspect-ratio: auto; width: 100%; } }

/* =========================================================================
   THE CABINS PAGE — pixel-measured layout (body.cb-page), >= 1100px only.
   Source of truth: the Canva export CABINS.png (1366px wide), measured on
   the image itself (the spec's hero-photo x/y were ~6% off the export, so
   those were re-measured). Same fixed-stage method as the homepage and
   The Boat blocks above; home-stage.js scales the stage with `zoom`
   between 1100 and 1366px. The export shows NO photo on the cabin plans
   (only plan + handwritten annotation + text), so the overlapping cabin
   photos are hidden from 1100px up and remain in the fluid layout.
   ========================================================================= */
@media (min-width: 1100px) {
  .cb-page { --offz: calc((100vw / var(--z) - 1366px) / 2); }
  .cb-page .link-arrow svg { display: none; }
  .cb-page .link-arrow { padding-bottom: 8px; font-size: 17px; letter-spacing: 0; text-transform: none; font-family: var(--font-body); font-weight: 400; }
  .cb-page main > .hp-divider { display: none; }
  .cb-page .cb-stage, .cb-page .site-header__row, .cb-page .hp-footer__grid, .cb-page .hp-footer__legal {
    position: relative; display: block; width: 1366px; max-width: none; margin-inline: auto; padding: 0; zoom: var(--z); box-sizing: border-box;
  }
  .cb-page main section { position: relative; display: block; padding: 0; overflow: hidden; box-sizing: border-box; min-height: 0; margin: 0; }
  .cb-page .cb-hero__collage, .cb-page .cb-return__collage, .cb-page .cb-return__copy, .cb-page .cb-cabin__visual,
  .cb-page .cb-cabin__frame, .cb-page .cb-cabin__copy, .cb-page .cb-closing__copy,
  .cb-page .hp-footer__policies, .cb-page .hp-footer__social, .cb-page .hp-footer__grid nav, .cb-page .hp-footer__grid nav ul,
  .cb-page .hp-footer__grid nav li, .cb-page .hp-footer__grid > div { display: contents; }
  .cb-page .hp-footer__grid nav li { display: block; position: static; }
  .cb-page .hp-footer__grid h3, .cb-page .hp-footer__grid address, .cb-page .hp-footer__grid a, .cb-page .hp-footer__legal p,
  .cb-page .hp-footer__policies > *, .cb-page .hp-footer__social a { position: absolute; margin: 0; }

  /* Header (130px) */
  .cb-page .site-header { height: calc(130px * var(--z)); background: var(--bg-page); }
  .cb-page .site-header__row { height: 130px; }
  .cb-page .logo { position: absolute; left: 72px; top: 61px; }
  .cb-page .logo img { width: 128px; height: auto; }
  .cb-page .nav { position: absolute; left: 467px; top: 68px; width: 433px; }
  .cb-page .nav__list { display: flex; justify-content: space-between; gap: 0; }
  .cb-page .nav__list a { font-size: 13px; letter-spacing: 0.06em; }
  .cb-page .site-header__actions { position: absolute; left: 1130px; top: 62px; width: 132px; height: 28px; }
  .cb-page .site-header__actions .btn { width: 132px; height: 28px; padding: 0; font-size: 11px; }
  .cb-page .burger { display: none; }

  /* Your room at sea (y 130-1198) */
  .cb-page .cb-hero { height: calc(1074px * var(--z)); }
  .cb-page .cb-hero > .cb-stage { height: 1074px; }
  .cb-page .cb-hero h1 { position: absolute; left: 0; width: 1366px; top: 108px; margin: 0; text-align: center; font-size: 64px; line-height: 76px; color: var(--open-sea); }
  .cb-page .cb-hero__lead { position: absolute; left: 333px; width: 700px; top: 221px; margin: 0; max-width: none; text-align: center; font-style: normal; font-size: 19px; line-height: 26px; color: var(--open-sea); }
  .cb-page .cb-hero__photo--a { left: 246px; top: 262px; width: 849px; height: 542px; aspect-ratio: auto; border-radius: 0; }
  .cb-page .cb-hero__photo--b { left: 631px; top: 608px; width: 488px; height: 394px; aspect-ratio: auto; border-radius: 0; }

  /* A place to come back to (y 1198-1982) */
  .cb-page .cb-return { height: calc(784px * var(--z)); }
  .cb-page .cb-return > .cb-stage { height: 784px; }
  .cb-page .cb-return::before, .cb-page .cb-return::after, .cb-page .cb-closing::before {
    content: ""; position: absolute; left: 0; right: 0; height: 7px; z-index: 2;
    background: repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) top / 100% 1.5px no-repeat, repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) bottom / 100% 1.5px no-repeat;
  }
  .cb-page .cb-return::before, .cb-page .cb-closing::before { top: 0; }
  .cb-page .cb-return::after { bottom: 0; }
  .cb-page .cb-return__photo--a { left: calc(-1 * var(--offz)); top: 358px; right: auto; bottom: auto; width: calc(313px + var(--offz)); height: 418px; aspect-ratio: auto; border-radius: 0; }
  .cb-page .cb-return__photo--b { left: 1033px; top: 8px; right: auto; bottom: auto; width: calc(333px + var(--offz)); height: 503px; aspect-ratio: auto; border-radius: 0; }
  .cb-page .cb-return__icon { position: absolute; left: 200px; top: 253px; width: 103px; height: 141px; margin: 0; z-index: 3; color: var(--open-sea); }
  .cb-page .cb-return__copy h2 { position: absolute; left: 445px; width: 476px; top: 275px; margin: 0; text-align: center; font-size: 33px; line-height: 40px; color: var(--open-sea); }
  .cb-page .cb-return__copy > p { position: absolute; left: 433px; width: 500px; top: 368px; margin: 0; max-width: none; text-align: center; font-size: 15px; line-height: 20px; }
  .cb-page .cb-return__amenities { position: absolute; left: 1043px; top: 536px; margin: 0; padding: 0; background: none; box-shadow: none; transform: rotate(-3deg); }
  .cb-page .cb-return__amenities li { font-size: 21px; line-height: 30px; color: var(--abyss); text-transform: uppercase; letter-spacing: 0.03em; }

  /* Cabins: shared */
  .cb-page .cb-cabin__photo { display: none; }
  .cb-page .cb-cabin__plan { position: absolute; padding: 1rem; aspect-ratio: auto; max-width: none; box-shadow: 0 20px 30px -22px rgba(16, 35, 63, 0.4); background: var(--white); border-color: rgba(138, 106, 74, 0.5); }
  .cb-page .cb-cabin__annotation { position: absolute; margin: 0; font-size: 19px; line-height: 33px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--abyss); white-space: nowrap; z-index: 3; }
  .cb-page .cb-cabin__deck { position: absolute; margin: 0; font-size: 17px; line-height: 24px; letter-spacing: 0.02em; color: var(--ironwood); }
  .cb-page .cb-cabin__copy h2 { position: absolute; margin: 0; font-size: 48px; line-height: 50px; color: var(--open-sea); white-space: nowrap; }
  .cb-page .cb-cabin__copy p:not(.cb-cabin__deck) { position: absolute; margin: 0; max-width: none; font-size: 16.5px; line-height: 24px; width: 350px; }
  .cb-page .cb-cabin__copy .link-arrow { position: absolute; margin: 0; color: var(--ironwood); }

  /* Master Cabin (y 1982-2760): plan left, text right-aligned */
  .cb-page #master-cabin { height: calc(778px * var(--z)); }
  .cb-page #master-cabin > .cb-stage { height: 778px; }
  .cb-page #master-cabin .cb-cabin__plan { left: 75px; top: 122px; width: 545px; height: 545px; }
  .cb-page #master-cabin .cb-cabin__annotation { left: 568px; top: 483px; }
  .cb-page #master-cabin .cb-cabin__copy h2, .cb-page #master-cabin .cb-cabin__deck, .cb-page #master-cabin .cb-cabin__copy p:not(.cb-cabin__deck), .cb-page #master-cabin .link-arrow { right: 119px; text-align: right; }
  .cb-page #master-cabin .cb-cabin__copy h2 { top: 182px; } .cb-page #master-cabin .cb-cabin__deck { top: 243px; }
  .cb-page #master-cabin .cb-cabin__copy p:nth-of-type(2) { top: 302px; } .cb-page #master-cabin .cb-cabin__copy p:nth-of-type(3) { top: 374px; }
  .cb-page #master-cabin .link-arrow { top: 515px; }

  /* Superior Cabins (y 2760-3600): text left, plan right */
  .cb-page #superior-cabins { height: calc(840px * var(--z)); }
  .cb-page #superior-cabins > .cb-stage { height: 840px; }
  .cb-page #superior-cabins .cb-cabin__plan { left: 917px; top: 58px; width: 371px; height: 510px; }
  .cb-page #superior-cabins .cb-cabin__annotation { left: 775px; width: 183px; top: 442px; text-align: right; }
  .cb-page #superior-cabins .cb-cabin__copy h2, .cb-page #superior-cabins .cb-cabin__deck, .cb-page #superior-cabins .cb-cabin__copy p:not(.cb-cabin__deck), .cb-page #superior-cabins .link-arrow { left: 126px; }
  .cb-page #superior-cabins .cb-cabin__copy h2 { top: 147px; } .cb-page #superior-cabins .cb-cabin__deck { top: 219px; }
  .cb-page #superior-cabins .cb-cabin__copy p:nth-of-type(2) { top: 297px; width: 340px; }
  .cb-page #superior-cabins .link-arrow { top: 488px; }

  /* Single Cabins (y 3600-4400): plan left, text right */
  .cb-page #single-cabins { height: calc(800px * var(--z)); }
  .cb-page #single-cabins > .cb-stage { height: 800px; }
  .cb-page #single-cabins .cb-cabin__plan { left: 100px; top: 15px; width: 372px; height: 507px; }
  .cb-page #single-cabins .cb-cabin__annotation { left: 438px; top: 382px; }
  .cb-page #single-cabins .cb-cabin__copy h2, .cb-page #single-cabins .cb-cabin__deck, .cb-page #single-cabins .cb-cabin__copy p:not(.cb-cabin__deck), .cb-page #single-cabins .link-arrow { right: 119px; text-align: right; }
  .cb-page #single-cabins .cb-cabin__copy h2 { top: 97px; } .cb-page #single-cabins .cb-cabin__deck { top: 161px; }
  .cb-page #single-cabins .cb-cabin__copy p:nth-of-type(2) { top: 220px; } .cb-page #single-cabins .cb-cabin__copy p:nth-of-type(3) { top: 364px; }
  .cb-page #single-cabins .link-arrow { top: 434px; }

  /* Deluxe Cabins (y 4400-5046): text left, plan right */
  .cb-page #deluxe-cabins { height: calc(646px * var(--z)); }
  .cb-page #deluxe-cabins > .cb-stage { height: 646px; }
  .cb-page #deluxe-cabins .cb-cabin__plan { left: 917px; top: 5px; width: 371px; height: 458px; }
  .cb-page #deluxe-cabins .cb-cabin__annotation { left: 775px; width: 183px; top: 333px; text-align: right; }
  .cb-page #deluxe-cabins .cb-cabin__copy h2, .cb-page #deluxe-cabins .cb-cabin__deck, .cb-page #deluxe-cabins .cb-cabin__copy p:not(.cb-cabin__deck), .cb-page #deluxe-cabins .link-arrow { left: 126px; }
  .cb-page #deluxe-cabins .cb-cabin__copy h2 { top: 43px; } .cb-page #deluxe-cabins .cb-cabin__deck { top: 115px; }
  .cb-page #deluxe-cabins .cb-cabin__copy p:nth-of-type(2) { top: 193px; } .cb-page #deluxe-cabins .cb-cabin__copy p:nth-of-type(3) { top: 313px; }
  .cb-page #deluxe-cabins .link-arrow { top: 415px; }

  /* Between one dive and the next (y 5046-5560) */
  .cb-page .cb-closing { height: calc(514px * var(--z)); }
  .cb-page .cb-closing > .cb-stage { height: 514px; }
  .cb-page .cb-closing::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: rgba(78, 116, 149, 0.6); }
  .cb-page .cb-closing__copy h2 { position: absolute; left: 0; width: 906px; top: 104px; margin: 0; text-align: center; font-size: 30px; line-height: 36px; color: var(--open-sea); }
  .cb-page .cb-closing__copy p { position: absolute; left: 103px; width: 700px; margin: 0; max-width: none; text-align: center; font-size: 16.5px; line-height: 24px; }
  .cb-page .cb-closing__copy p:nth-of-type(1) { top: 176px; }
  .cb-page .cb-closing__copy p:nth-of-type(2) { top: 272px; }
  .cb-page .cb-closing__copy p:nth-of-type(3) { top: 320px; }
  .cb-page .cb-closing__copy .link-arrow { position: absolute; left: 353px; width: 200px; top: 407px; margin: 0; justify-content: center; }
  .cb-page .cb-closing__photo { position: absolute; left: 940px; top: 100px; width: 264px; height: 352px; aspect-ratio: auto; border-radius: 0; box-shadow: none; margin: 0; }

  /* Footer (y 5560-5814) */
  .cb-page .hp-footer { padding: 0; height: auto; border-top: 1px solid rgba(16, 35, 63, 0.14); }
  .cb-page .hp-footer__grid { height: 166px; }
  .cb-page .hp-footer > .hp-divider { height: 6px; }
  .cb-page .hp-footer__grid h3 { left: 259px; top: 50px; font-size: 22px; }
  .cb-page .hp-footer__grid > div > a { left: 257px; top: 84px; font-size: 17px; }
  .cb-page .hp-footer__grid address { left: 257px; top: 112px; font-size: 12px; line-height: 15px; }
  .cb-page .hp-footer__grid nav a { font-size: 17px; }
  .cb-page .hp-footer__grid nav:nth-of-type(1) li:nth-child(1) a { left: 635px; top: 54px; }
  .cb-page .hp-footer__grid nav:nth-of-type(1) li:nth-child(2) a { left: 635px; top: 95px; }
  .cb-page .hp-footer__grid nav:nth-of-type(2) li:nth-child(1) a { left: 875px; top: 54px; }
  .cb-page .hp-footer__grid nav:nth-of-type(2) li:nth-child(2) a { left: 875px; top: 95px; }
  .cb-page .hp-footer__grid nav:nth-of-type(2) li:nth-child(3) a { left: 875px; top: 136px; }
  .cb-page .hp-footer__grid nav:nth-of-type(3) li:nth-child(1) a { left: 1065px; top: 54px; }
  .cb-page .hp-footer__grid nav:nth-of-type(3) li:nth-child(2) a { left: 1065px; top: 95px; }
  .cb-page .hp-footer__legal { height: 82px; }
  .cb-page .hp-footer__legal > p { left: 77px; top: 14px; font-size: 13px; line-height: 16px; }
  .cb-page .hp-footer__policies > * { top: 24px; font-size: 13px; }
  .cb-page .hp-footer__policies .hp-footer__lang-select { left: 342px; }
  .cb-page .hp-footer__policies a:nth-of-type(1) { left: 496px; }
  .cb-page .hp-footer__policies a:nth-of-type(2) { left: 679px; }
  .cb-page .hp-footer__policies a:nth-of-type(3) { left: 859px; }
  .cb-page .hp-footer__social a { top: 18px; }
  .cb-page .hp-footer__social a:nth-child(1) { left: 1095px; } .cb-page .hp-footer__social a:nth-child(2) { left: 1150px; } .cb-page .hp-footer__social a:nth-child(3) { left: 1198px; }
  .cb-page .hp-footer__social svg { width: 26px; height: 26px; }
}

/* =========================================================================
   PIXEL-MEASURED PAGES (Experience, Diving, Giving Back, About Us, News)
   body.px-page, >= 1100px only. Same fixed-stage method as the homepage /
   Boat / Cabins blocks: each section holds a 1366px-wide stage (scaled
   with `zoom` by home-stage.js between 1100 and 1366px); every element
   carries its export position as custom properties (--x --y --w --h --fs
   --lh --ta, set inline in the HTML) and is placed by the generic ".p"
   rule below. Flush-to-edge photos use .fl / .fr so they reach the true
   viewport edge above 1366px. Positions were read off the export images
   (the first block of the Experience/About/News exports in the written
   spec was ~14% too small, so those were measured on the image).
   Below 1100px the fluid rules earlier in this file apply.
   ========================================================================= */
.px-gold-b::after, .px-gold-t::before {
  content: ""; position: absolute; left: 0; right: 0; height: 7px; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) top / 100% 1.5px no-repeat, repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) bottom / 100% 1.5px no-repeat;
}
.px-gold-b::after { bottom: 0; } .px-gold-t::before { top: 0; }
.px-annot { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }


@media (min-width: 1100px) {
  .px-page { --offz: calc((100vw / var(--z) - var(--W, 1366px)) / 2); --offpx: calc((100vw - var(--W, 1366px) * var(--z)) / 2); --fo: 0px; --lo: 0px; }
  .px-page .link-arrow svg { display: none; }
  .px-page .link-arrow { padding-bottom: 8px; font-size: 17px; letter-spacing: 0; text-transform: none; font-family: var(--font-body); font-weight: 400; white-space: nowrap; }
  .px-page .px-stage { position: relative; display: block; width: var(--W, 1366px); max-width: none; margin-inline: auto; padding: 0; zoom: var(--z); box-sizing: border-box; }
  .px-page .hp-footer__grid, .px-page .hp-footer__legal, .px-page .hp-newsletter__row {
    position: relative; display: block; width: 1366px; max-width: none; margin-inline: auto; padding: 0; zoom: calc(var(--z) * var(--k, 1)); box-sizing: border-box;
  }
  .px-page .site-header__row {
    position: relative; display: block; width: 1366px; max-width: none; margin-inline: auto; padding: 0; zoom: var(--hz); box-sizing: border-box;
  }
  .px-page .px-stage { height: var(--sh); }
  .px-page main > section { position: relative; display: block; padding: 0; overflow: hidden; box-sizing: border-box; min-height: 0; margin: 0; height: calc(var(--sh) * var(--z)); }
  .px-page .px-flat, .px-page .hp-footer__policies, .px-page .hp-footer__social, .px-page .hp-footer__grid nav, .px-page .hp-footer__grid nav ul, .px-page .hp-footer__grid > div { display: contents; }
  .px-page .hp-footer__grid nav li { display: block; position: static; }
  .px-page .px-stage .p.p { position: absolute; left: var(--x); top: var(--y); right: auto; bottom: auto; margin: 0; max-width: none; aspect-ratio: auto; transform: none; box-shadow: none; }
  .px-page .px-stage .p.p[style*="--w:"] { width: var(--w); }
  .px-page .px-stage .p.p[style*="--h:"] { height: var(--h); }
  .px-page .px-stage .p.p[style*="--fs:"] { font-size: var(--fs); }
  .px-page .px-stage .p.p[style*="--lh:"] { line-height: var(--lh); }
  .px-page .px-stage .p.p[style*="--ta:"] { text-align: var(--ta); }
  .px-page .px-stage figure.p.p { overflow: hidden; border-radius: 0; }
  .px-page .px-stage figure.p.p picture, .px-page .px-stage figure.p.p img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .px-page .px-stage figure.p.p.fl { left: calc(-1 * var(--offz)); width: calc(var(--w) + var(--offz)); }
  .px-page .px-stage figure.p.p.fr { width: calc(var(--w) + var(--offz)); }
  .px-page .px-stage svg.p.p { overflow: visible; }
  .px-page .px-stage .p.p.link-arrow { justify-content: center; }
  .px-page .px-stage .p.p.link-arrow.la-l { justify-content: flex-start; } .px-page .px-stage .p.p.link-arrow.la-r { justify-content: flex-end; }
  .px-page .px-stripes { position: absolute; top: 0; bottom: 0; z-index: 0; left: calc(var(--offpx) + var(--sx) * var(--z)); right: 0; }

  /* header (A: Experience/About/News, B: Diving/Giving Back) */
  .px-page .site-header { background: var(--bg-page); }
  .px-page .burger { display: none; }
  .px-page .logo { position: absolute; }
  .px-page .nav { position: absolute; width: 433px; }
  .px-page .nav__list { display: flex; justify-content: space-between; gap: 0; }
  .px-page .nav__list a { font-size: 13px; letter-spacing: 0.06em; }
  .px-page .site-header__actions { position: absolute; }
  .px-page .site-header__actions .btn { width: 133px; height: 28px; padding: 0; font-size: 11px; }
  .px-hdA .site-header { height: calc(122px * var(--hz)); } .px-hdA .site-header__row { height: 122px; }
  .px-hdA .logo { left: 97px; top: 58px; } .px-hdA .logo img { width: 130px; height: auto; }
  .px-hdA .nav { left: 493px; top: 68px; } .px-hdA .site-header__actions { left: 1156px; top: 62px; }
  .px-hdB .site-header { height: calc(130px * var(--hz)); } .px-hdB .site-header__row { height: 130px; }
  .px-hdB .logo { left: 72px; top: 61px; } .px-hdB .logo img { width: 128px; height: auto; }
  .px-hdB .nav { left: 467px; top: 68px; } .px-hdB .site-header__actions { left: 1130px; top: 62px; }

  /* newsletter (93px) */
  .px-page .hp-newsletter { height: calc(93px * var(--z) * var(--k, 1)); padding: 0; border-top: 0; display: block; }
  .px-page .hp-newsletter__row { height: 93px; }
  .px-page .hp-newsletter__row > p:first-child { position: absolute; left: 60px; top: 14px; margin: 0; font-size: 19px; line-height: 25px; max-width: none; }
  .px-page .hp-newsletter__form { display: contents; }
  .px-page .hp-newsletter__form input { position: absolute; left: 735px; top: 22px; width: 312px; height: 48px; min-width: 0; }
  .px-page .hp-newsletter__form button { position: absolute; left: 1085px; top: 22px; width: 204px; height: 48px; padding: 0; font-size: 21px; }

  /* footer (offsets: --fo shifts the contact/nav block, --lo the copyright bar) */
  .px-page .hp-footer { padding: 0; height: auto; }
  .px-page .hp-footer > .hp-divider { height: 6px; }
  .px-page .hp-footer__grid h3, .px-page .hp-footer__grid address, .px-page .hp-footer__grid a, .px-page .hp-footer__legal p,
  .px-page .hp-footer__policies > *, .px-page .hp-footer__social a { position: absolute; margin: 0; }
  .px-page .hp-footer__grid { height: var(--fg); }
  .px-page .hp-footer__legal { height: var(--fl); padding: 0; }
  .px-page .hp-footer__grid h3 { left: 259px; top: calc(53px + var(--fo)); font-size: 22px; }
  .px-page .hp-footer__grid > div > a { left: 257px; top: calc(87px + var(--fo)); font-size: 17px; }
  .px-page .hp-footer__grid address { left: 257px; top: calc(113px + var(--fo)); font-size: 12px; line-height: 15px; }
  .px-page .hp-footer__grid nav a { font-size: 17px; }
  .px-page .hp-footer__grid nav:nth-of-type(1) li:nth-child(1) a { left: 635px; top: calc(58px + var(--fo)); }
  .px-page .hp-footer__grid nav:nth-of-type(1) li:nth-child(2) a { left: 635px; top: calc(100px + var(--fo)); }
  .px-page .hp-footer__grid nav:nth-of-type(2) li:nth-child(1) a { left: 875px; top: calc(58px + var(--fo)); }
  .px-page .hp-footer__grid nav:nth-of-type(2) li:nth-child(2) a { left: 875px; top: calc(98px + var(--fo)); }
  .px-page .hp-footer__grid nav:nth-of-type(2) li:nth-child(3) a { left: 875px; top: calc(138px + var(--fo)); }
  .px-page .hp-footer__grid nav:nth-of-type(3) li:nth-child(1) a { left: 1065px; top: calc(58px + var(--fo)); }
  .px-page .hp-footer__grid nav:nth-of-type(3) li:nth-child(2) a { left: 1065px; top: calc(98px + var(--fo)); }
  .px-page .hp-footer__legal > p { left: 77px; top: calc(16px + var(--lo)); font-size: 13px; line-height: 16px; }
  .px-page .hp-footer__policies > * { top: calc(25px + var(--lo)); font-size: 13px; }
  .px-page .hp-footer__policies .hp-footer__lang-select { left: 342px; }
  .px-page .hp-footer__policies a:nth-of-type(1) { left: 496px; }
  .px-page .hp-footer__policies a:nth-of-type(2) { left: 679px; }
  .px-page .hp-footer__policies a:nth-of-type(3) { left: 859px; }
  .px-page .hp-footer__social a { top: calc(20px + var(--lo)); }
  .px-page .hp-footer__social a:nth-child(1) { left: 1095px; } .px-page .hp-footer__social a:nth-child(2) { left: 1150px; } .px-page .hp-footer__social a:nth-child(3) { left: 1198px; }
  .px-page .hp-footer__social svg { width: 26px; height: 26px; }
}

/* ---- Experience (px-xp): colours from the export + markup-specific rules ---- */
.px-xp .xp-hero h1 { color: var(--open-sea); }
.px-xp .xp-hero__subtitle { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.1rem; }
.px-xp .xp-diving, .px-xp .xp-included { background: var(--sea-foam); color: var(--abyss); }
.px-xp .xp-diving h2, .px-xp .xp-included h2 { color: var(--abyss); }
.px-xp .xp-diving__tagline, .px-xp .xp-included h3 { color: var(--paper); font-style: normal; font-family: var(--font-script); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.15rem; }
.px-xp .xp-diving__copy p, .px-xp .xp-included__col li, .px-xp .xp-included__col ul { color: var(--abyss); }
.px-xp .xp-diving .link-arrow, .px-xp .xp-included .link-arrow { color: var(--paper); }
.px-xp .xp-lifebetween { position: relative; padding-block: clamp(3rem, 2.5rem + 2vw, 4.5rem); text-align: center; }
.px-xp .xp-lifebetween__title { font-family: var(--font-script); font-weight: 700; color: var(--open-sea); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); text-transform: uppercase; letter-spacing: 0.04em; }
.px-xp .xp-diving__outro { color: var(--abyss); opacity: 1; font-style: normal; margin: 1.25rem auto 0; padding-inline: var(--gutter); }
.px-xp .xp-gastro__menu { background: var(--white); box-shadow: 0 14px 30px -18px rgba(16, 35, 63, 0.4); }
.px-xp .xp-gastro__q { text-align: center; margin: 0 0 0.9rem; }
.px-xp .xp-gastro__q h3 { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; color: var(--abyss); font-size: 0.85rem; letter-spacing: 0.04em; margin: 0; }
.px-xp .xp-gastro__q p { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; color: var(--open-sea); font-size: 0.7rem; line-height: 1.5; max-width: none; margin: 0; }
.px-xp .xp-gastro__photo-quote { position: absolute; top: 0.5rem; left: 8%; z-index: 2; color: var(--abyss); font-size: 0.85rem; line-height: 1.5; max-width: 60%; }
.px-xp .xp-gastro__note { font-style: italic; margin-top: 0.85rem; }
.px-xp .xp-hotel__item h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--ironwood); font-size: 1rem; letter-spacing: 0.02em; margin: 0 0 0.15rem; }
.px-xp .xp-hotel__item { margin-bottom: 1.25rem; }
.px-xp .xp-hotel__item p, .px-xp .xp-hotel__lead { font-family: var(--font-body); color: var(--abyss); }
.px-xp .xp-hotel__lead { margin-bottom: 1.5rem; }
.px-xp .xp-beyond__eyebrow { color: var(--abyss); font-size: 1rem; text-align: center; margin: 0 auto 0.75rem; }
.px-xp .xp-beyond__tag { display: inline-block; margin: 0.4rem 0.6rem; font-family: var(--font-display); font-weight: 500; text-transform: uppercase; color: var(--open-sea); font-size: 0.95rem; }
.px-xp .xp-beyond__photo--l, .px-xp .xp-beyond__photo--r { aspect-ratio: 3 / 4; }
.px-xp .xp-ashore h2 { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--open-sea); }
.px-xp .xp-included__col li { font-family: var(--font-body); }
.px-xp .xp-make h2 { color: var(--abyss); }
.px-xp .xp-make__aside p { font-family: var(--font-body); font-weight: 400; color: var(--abyss); font-size: var(--fs-body); }
.px-xp .xp-make__aside .link-arrow { color: var(--open-sea); }
.px-xp .xp-closing h2 { font-family: var(--font-script); text-transform: uppercase; letter-spacing: 0.04em; color: var(--open-sea); }
.px-xp .xp-closing p { font-style: normal; color: var(--abyss); }
.px-xp .hp-footer { border-top: 2px solid var(--open-sea); }
@media (min-width: 1100px) {
  .px-xp { --fg: 155px; --fl: 67px; --fo: -15px; --lo: -9px; }
  .px-xp .xp-hero h1 { white-space: nowrap; }
  .px-xp .xp-diving__copy .p { color: var(--abyss); }
  .px-xp .xp-gastro__menu { padding: 0; }
  .px-xp .xp-gastro__q { position: absolute; left: 0; right: 0; top: var(--y); margin: 0; }
  .px-xp .xp-gastro__photo-quote { max-width: none; }
  .px-xp .xp-hotel__caption { background: none; box-shadow: none; transform: none; color: var(--sea-foam); padding: 0; }
  .px-xp .xp-hotel__item p { font-size: 17px; line-height: 24px; max-width: none; }
  .px-xp .xp-hotel__item h3 { font-size: 18px; line-height: 24px; }
  .px-xp .xp-beyond__tag { white-space: nowrap; }
  .px-xp .xp-included__col ul { list-style: none; }
  .px-xp .xp-lifebetween { padding-block: 0; }
  .px-xp .xp-diving__outro { padding-inline: 0; }
  .px-xp .xp-make__aside p { font-size: 17.5px; }
}
.px-xp .xp-gastro__copy h2, .px-xp .xp-hotel h2, .px-xp .xp-beyond__copy h2 { color: var(--open-sea); }
.px-xp .xp-lifebetween .xp-diving__outro { font-family: var(--font-body); font-weight: 400; color: var(--abyss); font-size: var(--fs-body); text-transform: none; letter-spacing: 0; line-height: 1.6; max-width: 62ch; }
.px-xp .xp-lifebetween .reveal, .px-xp .p.reveal { transition: opacity 0.7s var(--ease); }
.px-xp .xp-included__visual .dot-icon { background: none; border-radius: 0; padding: 0; color: inherit; }
@media (min-width: 1100px) {
  .px-page .px-stage ul.p { display: block; list-style: none; padding: 0; }
  .px-page .px-stage ul.p li { font-size: inherit; line-height: inherit; margin: 0; }
}

/* ---- Diving (px-dd) ---- */
.px-dd .dd-hero h1, .px-dd .dd-groups h2, .px-dd .dd-philosophy h2 { color: var(--open-sea); }
.px-dd .dd-hero__tagline, .px-dd .dd-hero__lead p { color: var(--open-sea); font-style: normal; font-size: 1.15rem; }
.px-dd .dd-newsites, .px-dd .dd-built, .px-dd .dd-underwater { background: var(--abyss); color: var(--paper); }
.px-dd .dd-built h2, .px-dd .dd-underwater h2 { color: var(--sea-foam); }
.px-dd .dd-built__head p, .px-dd .dd-built__item p, .px-dd .dd-underwater__copy p { color: var(--paper); }
.px-dd .dd-built { position: relative; }
.px-dd .dd-built__head { max-width: none; margin: 0 0 1.5rem; }
.px-dd .dd-built__stripes { position: absolute; z-index: 0; background-image: repeating-linear-gradient(90deg, var(--sea-foam) 0 10px, var(--abyss) 10px 19px); }
@media (max-width: 1099px) { .px-dd .dd-built__stripes { inset: 0 0 0 82%; } }
.px-dd .dd-built__item h3, .px-dd .dd-longer__item h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1rem; margin: 0 0 0.25rem; }
.px-dd .dd-built__item h3 { color: var(--sea-foam); }
.px-dd .dd-built__item p, .px-dd .dd-longer__item p { font-family: var(--font-body); font-size: var(--fs-body); max-width: none; margin: 0; }
.px-dd .dd-built__item, .px-dd .dd-longer__item { margin-bottom: 1.5rem; }
.px-dd .dd-built__caption { background: none; box-shadow: none; transform: none; color: var(--yellaow); text-align: left; padding: 0; }
.px-dd .dd-longer { background: var(--open-sea); }
.px-dd .dd-longer h2, .px-dd .dd-longer__item h3 { color: var(--abyss); }
.px-dd .dd-longer__copy p, .px-dd .dd-longer__item p { color: var(--paper); opacity: 1; }
.px-dd .dd-longer__item { text-align: center; }
.px-dd .dd-longer__copy > p { margin-inline: auto; text-align: center; }
.px-dd .dd-groups__stats { background: none; box-shadow: none; padding: 0; transform: none; }
.px-dd .dd-groups__stats p { color: var(--abyss); font-size: inherit; line-height: inherit; text-transform: uppercase; letter-spacing: 0.04em; }
.px-dd .dd-philosophy { text-align: center; }
.px-dd .dd-philosophy__photo { aspect-ratio: 16 / 9; margin-bottom: 2rem; }
.px-dd .dd-philosophy__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-dd .dd-philosophy__cell h3 { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--abyss); font-size: 1.15rem; margin: 0 0 0.4rem; }
.px-dd .dd-philosophy__cell p { font-family: var(--font-body); color: var(--abyss); font-size: var(--fs-body); }
.px-dd .dd-philosophy__grid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-inline: var(--gutter); }
.px-dd .dd-underwater__caption { color: var(--paper); text-shadow: none; }
.px-dd .dd-underwater__photo--r { aspect-ratio: 4 / 3; margin-top: 1.5rem; }
.px-dd .dd-underwater__photo--r img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-dd .dd-underwater .dd-icon { color: var(--open-sea); }
.px-dd .dd-closing h2 { font-family: var(--font-script); text-transform: uppercase; letter-spacing: 0.04em; color: var(--open-sea); }
.px-dd .dd-closing p { font-style: normal; color: var(--abyss); }
.px-dd .hp-safety__title { color: var(--abyss); text-transform: uppercase; letter-spacing: 0.04em; }
.px-dd .hp-footer { border-top: 2px solid var(--open-sea); }
@media (min-width: 1100px) {
  .px-dd { --fg: 169px; --fl: 95px; --fo: 0px; --lo: 0px; }
  .px-dd .dd-hero h1 { white-space: nowrap; }
  .px-dd .hp-safety__photo.p { overflow: visible !important; }
  .px-dd .hp-safety__photo.p picture, .px-dd .hp-safety__photo.p img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .px-dd .dd-philosophy__photo { margin-bottom: 0; aspect-ratio: auto; }
  .px-dd .dd-philosophy__grid { display: contents; }
  .px-dd .dd-underwater__photo--r { margin-top: 0; }
  .px-dd .dd-longer__item p, .px-dd .dd-built__item p { font-size: 17.5px; line-height: 24px; }
  .px-dd .dd-built__item h3, .px-dd .dd-longer__item h3 { font-size: 18px; line-height: 24px; }
  .px-dd .dd-philosophy__cell p { font-size: 17.5px; line-height: 24px; }
  .px-dd .dd-philosophy__cell h3 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
  .px-dd .dd-groups__stats p { line-height: 45px; }
  .px-dd .dd-built__caption { line-height: 37px; }
}

/* ---- Giving Back (px-gb) ---- */
.px-gb .gb-hero h1 { color: var(--ironwood); }
.px-gb .gb-hero__subtitle { color: var(--ironwood); font-style: normal; font-size: 1.05rem; }
.px-gb .gb-forest__photo--left, .px-gb .gb-forest__photo--right, .px-gb .gb-promise__photo { border-radius: 0; box-shadow: none; }
.px-gb .gb-forest__photo--right, .px-gb .gb-promise__photo { overflow: visible; }
.px-gb .gb-forest__photo--right > picture, .px-gb .gb-promise__photo > picture { display: block; overflow: hidden; }
.px-gb .gb-forest__photo img, .px-gb .gb-promise__photo img { width: 100%; display: block; }
.px-gb .gb-forest__photo--left { aspect-ratio: 3 / 4; overflow: hidden; }
.px-gb .gb-forest__photo--left img { height: 100%; object-fit: cover; }
.px-gb .gb-forest__caption { position: absolute; left: 6%; bottom: 6%; color: var(--paper); text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.px-gb .gb-forest__star { display: none; }
.px-gb .gb-promise__caption { position: absolute; left: 8%; bottom: 8%; color: var(--yellaow); }
.px-gb .gb-promise__intro h2 { font-family: var(--font-script); }
.px-gb .gb-promise__stripes { position: absolute; background-image: repeating-linear-gradient(90deg, var(--ironwood) 0 10px, var(--bg-page) 10px 19px); opacity: 1; }
@media (max-width: 1099px) { .px-gb .gb-promise__stripes { inset: 0 0 0 86%; } }
.px-gb .gb-promise__item h3 { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ironwood); font-size: 1rem; margin: 0 0 0.35rem; }
.px-gb .gb-promise__item { margin-bottom: 1.5rem; }
.px-gb .gb-promise__item p { font-family: var(--font-body); color: var(--abyss); max-width: 60ch; }
.px-gb .gb-promise__items { display: block; }
.px-gb .gb-closing h2 { font-family: var(--font-script); text-transform: uppercase; letter-spacing: 0.04em; color: var(--open-sea); }
.px-gb .gb-closing p { font-style: normal; color: var(--abyss); }
.px-gb .hp-footer { border-top: 2px solid var(--open-sea); }
@media (min-width: 1100px) {
  .px-gb { --fg: 169px; --fl: 95px; --fo: 0px; --lo: 0px; }
  .px-gb .gb-hero h1 { white-space: nowrap; }
  .px-gb .gb-forest__star { display: block; }
  .px-gb .gb-forest__photo--right.p, .px-gb .gb-promise__photo.p { overflow: visible !important; }
  .px-gb .gb-forest__photo--right.p picture, .px-gb .gb-promise__photo.p picture { display: block; width: 100%; height: 100%; overflow: hidden; }
  .px-gb .gb-forest__photo--right.p img, .px-gb .gb-promise__photo.p img { height: 100%; object-fit: cover; }
  .px-gb .gb-promise__item p { font-size: 17.5px; line-height: 24px; max-width: none; }
  .px-gb .gb-promise__item h3 { font-size: 18px; line-height: 24px; }
  .px-gb .gb-forest__logo { display: flex; align-items: center; justify-content: flex-start; margin: 0; gap: 8px; }
  .px-gb .gb-forest__logo svg { width: 58px; height: 58px; flex: none; }
  .px-gb .gb-forest__logo span { font-size: 17px; line-height: 20px; letter-spacing: 0.02em; }
  .px-gb .hp-footer__grid h3, .px-gb .hp-footer__grid > div > a, .px-gb .hp-footer__grid address { left: 206px; width: 232px; text-align: center; }
  .px-gb .hp-footer__grid > div > a { font-size: 17px; }
  .px-gb .hp-footer__grid address { font-size: 17px; line-height: 24px; top: 113px; color: var(--abyss); font-family: var(--font-body); }
}

/* ---- About Us (px-ab) ---- */
.px-ab .ab-hero, .px-ab .ab-quote, .px-ab .ab-cont { text-align: center; padding-block: var(--section-pad); }
.px-ab .ab-hero h1, .px-ab .ab-hero .ab-hero__photo { }
.px-ab .ab-hero h1 { color: var(--open-sea); font-size: clamp(2rem, 1.6rem + 2vw, 3rem); margin-bottom: 1.5rem; text-transform: uppercase; }
.px-ab .ab-hero__collage { position: relative; max-width: 720px; margin: 0 auto; min-height: clamp(360px, 60vw, 520px); }
.px-ab .ab-hero__photo--a { position: absolute; left: 0; top: 0; width: 70%; aspect-ratio: 1 / 1; overflow: hidden; }
.px-ab .ab-hero__photo--b { position: absolute; right: 0; bottom: -10%; width: 38%; aspect-ratio: 3 / 4; overflow: hidden; }
.px-ab .ab-hero__helm { display: none; }
.px-ab figure img, .px-ab figure picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.px-ab .ab-quote p { font-family: var(--font-body); color: var(--abyss); margin-inline: auto; max-width: 62ch; }
.px-ab .ab-w1, .px-ab .ab-team { background: var(--abyss); color: var(--paper); padding-block: var(--section-pad); }
.px-ab .ab-w2 { padding-block: var(--section-pad); }
.px-ab .ab-w1__grid, .px-ab .ab-w2__grid, .px-ab .ab-team__grid, .px-ab .ab-cont__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .px-ab .ab-w1__grid, .px-ab .ab-w2__grid, .px-ab .ab-team__grid, .px-ab .ab-cont__grid { grid-template-columns: 1fr 1fr; } }
.px-ab h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 1.6rem + 2vw, 3rem); margin-bottom: 1rem; }
.px-ab .ab-w1 h2, .px-ab .ab-team h2 { color: var(--paper); } .px-ab .ab-w2 h2 { color: var(--abyss); } .px-ab .ab-cont h2 { color: var(--abyss); }
.px-ab .ab-w1 p, .px-ab .ab-team p { color: var(--paper); font-family: var(--font-body); margin-bottom: 1rem; max-width: 52ch; }
.px-ab .ab-w2 p, .px-ab .ab-cont p { color: var(--abyss); font-family: var(--font-body); margin-bottom: 1rem; max-width: 52ch; }
.px-ab .ab-cont { text-align: left; }
.px-ab .ab-w1__visual, .px-ab .ab-w2__visual, .px-ab .ab-team__visual { position: relative; display: grid; gap: 1rem; }
.px-ab .ab-w1__photo, .px-ab .ab-w2__photo, .px-ab .ab-team__photo, .px-ab .ab-cont__photo { aspect-ratio: 4 / 3; overflow: hidden; }
.px-ab .ab-w1__anchor { display: none; }
.px-ab .ab-w1__anchor { color: var(--open-sea); }
.px-ab .hp-footer { border-top: 0; }

/* ---- News / The Journal (px-nw) ---- */
.px-nw { background: var(--open-sea); }
.px-nw .site-header { background: var(--open-sea); }
.px-nw .nav__list a, .px-nw .site-header__actions .btn { color: var(--paper); }
.px-nw .site-header__actions .btn { border-color: var(--paper); background: none; }
.px-nw .nav__list a.is-active { color: var(--yellaow); }
.px-nw .nw-hero { text-align: center; color: var(--paper); padding-block: clamp(3rem, 2.4rem + 3vw, 5rem); }
.px-nw .nw-hero h1 { color: var(--paper); text-transform: uppercase; margin-bottom: 1.25rem; }
.px-nw .nw-hero__sub { color: var(--paper); font-size: 1.1rem; margin-bottom: 1.5rem; }
.px-nw .nw-hero p { color: var(--paper); font-family: var(--font-body); margin-inline: auto; max-width: 60ch; }
.px-nw .nw-hero__sub { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.px-nw .nw-list { padding-block: 3rem; }
.px-nw .nw-card { border: 1px solid var(--abyss); margin-bottom: 2rem; }
.px-nw .nw-card--a { background: var(--sea-foam); } .px-nw .nw-card--b { background: var(--bg-page); }
.px-nw .nw-card h2 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--abyss); font-size: 1.3rem; padding: 1.5rem 1.75rem; margin: 0; border-bottom: 3px double var(--abyss); }
.px-nw .nw-card__body { padding: 1.5rem 1.75rem; display: grid; gap: 1rem; }
.px-nw .nw-card__body p { font-family: var(--font-body); color: var(--abyss); max-width: none; }
.px-nw .nw-card__body .link-arrow { color: var(--abyss); justify-self: end; }
.px-nw .nw-card--a .nw-card__body .link-arrow { color: var(--paper); }
.px-nw .hp-footer { border-top: 0; }
@media (min-width: 1100px) {
  .px-ab { --fg: 147px; --fl: 67px; --fo: -26px; --lo: -5px; }
  .px-nw { --fg: 147px; --fl: 126px; --fo: -26px; --lo: -5px; }
  .px-ab .ab-hero h1 { white-space: nowrap; }
  .px-ab .ab-hero__helm { display: block; }
  .px-ab .ab-w1__anchor { display: block; }
  .px-ab figure.p { aspect-ratio: auto; }
  .px-ab .ab-w1__grid, .px-ab .ab-w2__grid, .px-ab .ab-team__grid, .px-ab .ab-cont__grid { display: block; }
  .px-ab .ab-w1 p, .px-ab .ab-w2 p, .px-ab .ab-team p, .px-ab .ab-cont p, .px-ab .ab-quote p { margin-bottom: 0; }
  .px-ab .ab-w1__visual, .px-ab .ab-w2__visual, .px-ab .ab-team__visual { display: contents; }
  .px-ab .ab-hero, .px-ab .ab-quote, .px-ab .ab-cont { padding-block: 0; }
  .px-ab .ab-w1, .px-ab .ab-w2, .px-ab .ab-team { padding-block: 0; }
  .px-ab .ab-hero__photo--a, .px-ab .ab-hero__photo--b { aspect-ratio: auto; }
  .px-ab .ab-team h2 { margin-bottom: 0; }
  .px-nw .nw-hero, .px-nw .nw-list { padding-block: 0; }
  .px-nw .nw-card { margin: 0; }
  .px-nw .nw-card h2 { position: absolute; left: 0; right: 0; top: 0; height: 88px; padding: 0 0 0 37px; display: flex; align-items: center; font-size: 24px; }
  .px-nw .nw-card__body { display: block; padding: 0; }
  .px-nw .nw-card__body p { position: absolute; left: 37px; top: 105px; font-size: 21px; line-height: 33px; }
  .px-nw .nw-card__body .link-arrow { position: absolute; left: 991px; top: 178px; font-size: 15px; }
  .px-nw .nw-card { border-width: 1px; }
  .px-nw .nw-card h2 { border-bottom: 0; }
  .px-nw .nw-card::after { content: ""; position: absolute; left: 0; right: 0; top: 88px; height: 5px; border-top: 1px solid var(--abyss); border-bottom: 1px solid var(--abyss); }
}
.px-nw .nw-hero p.nw-hero__sub { font-family: var(--font-script); }
@media (max-width: 1099px) { .px-xp .xp-included__visual .dot-icon { right: 0; top: -8%; } }
.dst-map__region-link { display: inline-block; margin-top: 1.25rem; font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ironwood); border-bottom: 1px solid currentColor; }

/* ---- Destinations (px-ds) ---- */
.px-ds .ds-hero h1 { color: var(--abyss); }
.px-ds .dst-hero__subtitle { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--abyss); font-size: 1rem; }
.px-ds .dst-map { background: transparent; }
.px-ds .dst-intro { background: var(--abyss); }
.px-ds .dst-intro p { color: var(--paper); font-family: var(--font-body); }
.px-ds .dst-regions h2 { color: var(--open-sea); font-family: var(--font-display); text-transform: uppercase; }
.px-ds .dst-region__copy h3 { font-size: 2rem; color: var(--open-sea); }
.px-ds .dst-region__copy p { color: var(--abyss); max-width: none; }
.px-ds .dst-region__copy .link-arrow { color: var(--abyss); }
.px-ds .dst-region { padding: 0; }
@media (min-width: 1100px) {
  .px-ds { --fg: 147px; --fl: 92px; --fo: -26px; --lo: 0px; }
  .px-ds main > section.dst-map { height: auto; aspect-ratio: auto; width: 100%; padding: 0; margin-bottom: 50px; }
  .px-ds .dst-region { display: contents; }
  .px-ds .dst-region__copy { display: contents; }
  .px-ds .dst-region__stamp { padding: 1.25rem; }
  .px-ds .dst-region__copy p { font-size: 17.5px; line-height: 24px; }
  .px-ds .dst-region__copy .link-arrow { color: var(--abyss); }
  .px-ds .dst-intro .link-arrow { color: var(--paper); }
}
.px-ds .dst-region__copy h3 { text-transform: uppercase; letter-spacing: 0.05em; font-size: 2rem; }
@media (min-width: 1100px) { .px-ds .dst-region__copy h3 { font-size: 34px; } .px-ds .dst-regions h2 { font-size: 47px; } }

/* ---- Region pages (px-rg): 1174px canvas, --W/--k set on <body> ---- */
.px-rg { --fg: 169px; --fl: 95px; --fo: 0px; --lo: 0px; }
.px-rg h1, .px-rg h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0; }
.px-rg .rg-hero, .px-rg .rg-key, .px-rg .rg-why, .px-rg .rg-t3, .px-rg .rg-t4, .px-rg .rg-t5, .px-rg .rg-extra, .px-rg .rg-others { background: var(--bg-page); }
.px-rg .rg-hero h1 { color: var(--abyss); text-align: center; }
.px-rg .rg-hero__sub { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; color: var(--abyss); font-size: 1.6rem; }
.px-rg .rg-hero__intro { color: var(--open-sea); font-family: var(--font-body); text-align: center; }
.px-rg .rg-hero__photo img { aspect-ratio: 972 / 368; }
.px-rg .rg-hero__stamp { aspect-ratio: 183 / 131; }
.px-rg .rg-key__note { background: url('images/key-regions.webp') center / 100% 100% no-repeat; box-shadow: none; padding: 4.4rem 3.2rem 3.4rem; text-align: center; transform: none; }
.px-rg .rg-key__sheet h3 { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; color: var(--open-sea); font-size: 1.3rem; margin: 0 0 .5rem; }
.px-rg .rg-key .rg-key__sheet p { font-family: var(--font-script); font-weight: 700; color: var(--abyss); margin: 0 auto 1.9rem; font-size: 1.25rem; line-height: 1.4; }
.px-rg .rg-key h2 { color: var(--abyss); text-align: center; }
.px-rg .rg-key p.rg-key__label { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--open-sea); text-align: center; }
.px-rg .rg-key p.rg-key__subname { font-family: var(--font-script); font-weight: 700; color: var(--abyss); text-align: center; text-transform: uppercase; }
.px-rg .rg-key p { text-align: center; color: var(--abyss); font-family: var(--font-body); }
.px-rg .rg-key .link-arrow { color: var(--ironwood); }
.px-rg .rg-key__thumb { border: 1px solid var(--abyss); }
.px-rg .rg-explore, .px-rg .rg-others { background: var(--abyss); color: var(--paper); }
.px-rg .rg-explore h2, .px-rg .rg-others h2 { color: var(--sea-foam); letter-spacing: 0.04em; }
.px-rg .rg-explore__sub { color: var(--paper); font-family: var(--font-display); text-transform: uppercase; text-align: center; }
.px-rg .rg-explore .rg-explore__sub { text-align: left; }
.px-rg .rc-card { display: block; text-decoration: none; }
.px-rg .rc-card__photo { display: block; width: 100%; height: 100%; border: 1px solid var(--sea-foam); overflow: hidden; }
.px-rg .rc-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-rg .rc-card__title { position: absolute; left: 0; right: 0; top: 14px; text-align: center; color: var(--paper); font-size: 1.05rem; line-height: 1.3; padding-inline: .6rem; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.px-rg .rc-card__route { position: absolute; left: 0; right: 0; top: calc(100% + 8px); text-align: center; color: var(--sea-foam); font-family: var(--font-body); font-size: .9rem; }
.px-rg .rc-card.is-placeholder .rc-card__photo { opacity: .35; }
.px-rg .rg-arrow { color: var(--sea-foam); background: none; border: 0; }
.px-rg .rg-arrow svg { width: 100%; height: 100%; }
.px-rg .rg-ow, .px-rg .rg-t1 { background: var(--open-sea); color: var(--paper); }
.px-rg .rg-ow h2, .px-rg .rg-t1 h2 { color: var(--paper); text-align: center; }
.px-rg .rg-ow p, .px-rg .rg-t1 p { color: var(--paper); font-family: var(--font-body); text-align: center; }
.px-rg p.rg-ow__caption { color: var(--paper); text-align: center; font-family: var(--font-script); font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 2px 10px rgba(0,0,0,0.75); }
.px-rg .rg-quote { background: #ecdfc6 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .22 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
.px-rg .rg-quote__card { background: #fbfbf8; box-shadow: 0 14px 26px -12px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; padding: 2rem; text-align: center; }
/* the quote varies a lot in length per region, so the card sizes to its own
   text (min/max keep it from ever looking like a sliver or overflowing the
   section) and stays vertically centred in the fixed-height section instead
   of sitting top-anchored with a fixed height and a lot of empty padding. */
.px-rg .rg-quote__card.p { height: auto !important; min-height: 220px; max-height: 393px; top: 50% !important; transform: translateY(-50%) !important; overflow: auto; }
.px-rg .rg-quote__card p { color: var(--abyss); font-size: 1.05rem; line-height: 1.45; max-width: none; text-transform: uppercase; text-align: justify; }
.px-rg .rg-why h2 { color: var(--open-sea); text-align: right; }
.px-rg .rg-why p, .px-rg .rg-t3 p, .px-rg .rg-t4 p { color: var(--abyss); font-family: var(--font-body); text-align: right; }
/* the "why"/"why2" copy paragraph is justified (see its --ta:justify) so its
   ragged edge doesn't drift as far left as a pure right-align does on long
   copy; text-align-last keeps the final line flush with the heading above
   instead of falling back to the left like a normal justified paragraph. */
.px-rg .rg-why__copy p.p { text-align-last: right; }
.px-rg .rg-t4 .rg-t__copy p.p, .px-rg .rg-extra .rg-t__copy p.p { text-align-last: right; }
.px-rg .rg-why .link-arrow { color: var(--ironwood); }
.px-rg .rg-t2 { background: var(--abyss); color: var(--paper); }
.px-rg .rg-t2 h2 { color: var(--sea-foam); } .px-rg .rg-t2 p { color: var(--paper); font-family: var(--font-body); }
.px-rg .rg-t2__stripes { background-image: repeating-linear-gradient(90deg, var(--sea-foam) 0 8px, var(--abyss) 8px 16px); }
.px-rg .rg-t3 h2, .px-rg .rg-t4 h2 { color: var(--sea-foam); }
.px-rg .rg-t3 p { text-align: left; }
.px-rg .rg-t4 h2 { text-align: right; }
.px-rg .rg-t5 { background: var(--bg-page); }
.px-rg .rg-t5 h2 { color: var(--open-sea); text-align: left; }
.px-rg .rg-t5 p { color: var(--abyss); font-family: var(--font-body); text-align: left; }
.px-rg .rg-t5__stripes { background-image: repeating-linear-gradient(90deg, var(--open-sea) 0 8px, var(--bg-page) 8px 16px); opacity: 0.55; }
.px-rg .rg-extra { background: var(--bg-page); }
.px-rg .rg-extra p { color: var(--abyss); font-family: var(--font-body); text-align: left; }
.px-rg .rg-stamp { aspect-ratio: 297 / 216; }
.px-rg .rg-closing { background: var(--bg-page); }
.px-rg .rg-closing h2 { font-family: var(--font-script); letter-spacing: .04em; color: var(--open-sea); text-align: center; }
.px-rg .rg-closing p { text-align: center; color: var(--abyss); font-family: var(--font-body); }
.px-rg .rg-closing .link-arrow { color: var(--open-sea); }
.px-rg .hp-footer { border-top: 2px solid var(--open-sea); }
.px-rg .rg-t__photo, .px-rg .rg-why__photo, .px-rg .rg-ow__photo { aspect-ratio: 4 / 3; }
@media (max-width: 1099px) {
  .px-rg .rg-key__note { transform: none; }
  .px-rg .rc-card { margin-bottom: 2.5rem; }
  .px-rg .rc-card__photo { aspect-ratio: 3 / 4; height: auto; }
  .px-rg .rg-explore, .px-rg .rg-others, .px-rg .rg-t1, .px-rg .rg-t2, .px-rg .rg-ow { padding-block: var(--section-pad); }
  .px-rg .rg-hero, .px-rg .rg-key, .px-rg .rg-why, .px-rg .rg-t3, .px-rg .rg-t4, .px-rg .rg-t5, .px-rg .rg-extra, .px-rg .rg-quote { padding-block: var(--section-pad); }
  .px-rg .rg-hero__stamp { position: static; width: 180px; margin: 1rem auto; }
  .px-rg .rg-arrow { width: 40px; height: 40px; }
  .px-rg .rc-card__title, .px-rg .rc-card__route { position: static; display: block; }
  .px-rg .rg-explore .px-stage, .px-rg .rg-others .px-stage { display: grid; gap: 1.25rem; }
  .px-rg .rg-key__thumb { margin-bottom: 1rem; }
  .px-rg .rg-explore__sub { margin-bottom: 1.5rem; }
}
.px-rg .rg-quote__card p.px-annot { letter-spacing: .02em; }
.px-rg .rg-key h2 { letter-spacing: 0.148em; }
@media (min-width: 1100px) { .px-rg { --fg: 158px; --fl: 77px; --fo: -6px; --lo: -6px; } }

/* ---- Itinerary template (px-it): 1285px canvas, --W/--k on <body> ---- */
.px-it { --fg: 147px; --fl: 67px; --fo: -26px; --lo: -5px; }
.px-it h1, .px-it h2 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; }
.px-it .it-hero { background: var(--bg-page); }
.px-it .it-hero h1 { color: var(--abyss); text-align: center; }
.px-it .it-hero__sub { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--abyss); text-align: center; font-size: 1.2rem; }
.px-it .it-map { }
.px-it .it-map img { width: 100%; height: auto; display: block; }
.px-it .it-map__label { position: absolute; transform: translate(-50%, -50%); font-family: var(--font-script); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; color: var(--sea-foam); white-space: nowrap; }
.px-it .it-map__label.is-crossed { color: var(--abyss); }
.px-it .it-hook, .px-it .it-summary { background: var(--abyss); color: var(--paper); }
.px-it .it-hook p { color: var(--paper); font-family: var(--font-body); text-align: center; }
.px-it .it-tagline { color: var(--yellaow); text-align: center; text-transform: uppercase; letter-spacing: .02em; }
.px-it .it-card { position: relative; }
.px-it .it-card::before { content: ""; position: absolute; inset: 14px -22px -20px 18px; background: #e8dfd0; box-shadow: 0 10px 24px -8px rgba(0,0,0,.4); transform: rotate(3deg); }
.px-it .it-card__sheet { position: relative; height: 100%; background: #fbf6ea repeating-linear-gradient(to bottom, transparent 0 24px, rgba(200,110,110,.13) 24px 25px); box-shadow: 0 12px 30px -10px rgba(0,0,0,.5); padding: 2.6rem 2rem 1.4rem; text-align: left; transform: rotate(-.4deg); }
.px-it .it-card__sheet h2 { font-family: var(--font-script); text-transform: uppercase; color: var(--open-sea); font-size: 1.5rem; text-align: center; margin: 0; }
.px-it .it-card__rule { display: block; height: 5px; margin: .35rem auto 1.2rem; width: 70%; border-top: 1.5px solid var(--open-sea); border-bottom: 1.5px solid var(--open-sea); opacity: .6; }
.px-it .it-card__days, .px-it .it-card__path { text-align: center; font-family: var(--font-script); font-weight: 700; text-transform: uppercase; color: var(--abyss); font-size: 1.1rem; margin: 0 auto .35rem; max-width: none; }
.px-it .it-card__sheet h3 { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; color: var(--open-sea); font-size: 1rem; margin: 1.2rem 0 .3rem; }
.px-it .it-card__sheet p { font-family: var(--font-script); font-weight: 700; text-transform: uppercase; color: var(--abyss); font-size: .95rem; line-height: 1.7; max-width: none; margin: 0; }
.px-it .it-card__sheet .it-card__days, .px-it .it-card__sheet .it-card__path { font-size: 1.1rem; }
.px-it .it-card__logo { width: 120px; height: auto; margin: 1.6rem auto 0; display: block; }
.px-it .it-story, .px-it .it-context { background: var(--bg-page); }
.px-it .it-step h2 { color: var(--open-sea); }
.px-it .it-step__sub { color: var(--ironwood); font-family: var(--font-script); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.6rem; }
.px-it .it-step p:not(.it-step__sub) { color: var(--abyss); font-family: var(--font-body); }
.px-it .it-path { color: #5e7f9c; }
.px-it .it-reflect { background: var(--sea-foam); }
.px-it .it-reflect h2 { color: var(--white); text-align: center; }
.px-it .it-reflect p { color: var(--abyss); font-family: var(--font-body); text-align: center; }
.px-it .it-context h2 { font-family: var(--font-script); letter-spacing: .04em; color: var(--open-sea); font-size: 1.9rem; }
.px-it .it-context p { color: var(--abyss); font-family: var(--font-body); text-align: right; }
.px-it .it-explore { background: var(--abyss); }
.px-it .hp-footer { border-top: 2px solid var(--open-sea); }
.px-it .it-missing { padding: 6rem 0; text-align: center; }
@media (max-width: 1099px) {
  .px-it .it-hero, .px-it .it-hook, .px-it .it-summary, .px-it .it-story, .px-it .it-reflect, .px-it .it-context, .px-it .it-explore { padding-block: var(--section-pad); }
  .px-it .px-stage { display: grid; gap: 1.5rem; }
  .px-it .it-map { position: relative; }
  .px-it .it-map__label { font-size: .7rem; }
  .px-it .it-card::before { display: none; }
  .px-it .it-path, .px-it .dot-icon { display: none; }
  .px-it .it-step { display: grid; gap: 1rem; margin-bottom: 2rem; }
  .px-it .it-step h2, .px-it .it-step p { text-align: left; }
  .px-it figure img { width: 100%; height: auto; }
}

/* itinerary page: reuse the region carousel styles */
.px-it .rg-explore, .px-it .rg-others { background: var(--abyss); color: var(--paper); }
.px-it .rg-explore h2, .px-it .rg-others h2 { color: var(--sea-foam); letter-spacing: 0.04em; }
.px-it .rg-explore__sub { color: var(--paper); font-family: var(--font-display); text-transform: uppercase; text-align: center; }
.px-it .rg-explore .rg-explore__sub { text-align: left; }
.px-it .rc-card { display: block; text-decoration: none; }
.px-it .rc-card__photo { display: block; width: 100%; height: 100%; border: 1px solid var(--sea-foam); overflow: hidden; }
.px-it .rc-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.px-it .rc-card__title { position: absolute; left: 0; right: 0; top: 14px; text-align: center; color: var(--paper); font-size: 1.05rem; line-height: 1.3; padding-inline: .6rem; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.px-it .rc-card__route { position: absolute; left: 0; right: 0; top: calc(100% + 8px); text-align: center; color: var(--sea-foam); font-family: var(--font-body); font-size: .9rem; }
.px-it .rc-card.is-placeholder .rc-card__photo { opacity: .35; }
.px-it .rg-arrow { color: var(--sea-foam); background: none; border: 0; }
.px-it .rg-arrow svg { width: 100%; height: 100%; }
@media (max-width: 1099px) {
  .px-it .rc-card { margin-bottom: 2.5rem; }
  .px-it .rc-card__photo { aspect-ratio: 3 / 4; height: auto; }
  .px-it .rg-arrow { width: 40px; height: 40px; }
  .px-it .rc-card__title, .px-it .rc-card__route { position: static; display: block; }
  .px-it .rg-explore .px-stage, .px-it .rg-others .px-stage { display: grid; gap: 1.25rem; }
  .px-it .rg-explore__sub { margin-bottom: 1.5rem; }
}


/* ==========================================================================
   Images: 1px black frame, square corners — every photo/stamp/plan placeholder
   on every page. Logos and the transparent Indonesia map are not framed.
   ========================================================================== */
img:not([src*="logo-waow2"]):not([src*="indonesia-map"]):not(.dst-map__img) { border: 1px solid #000; box-sizing: border-box; }
.cb-cabin__plan, .dst-region__stamp, .rg-stamp { border: 1px solid #000 !important; }
.px-rg .rc-card__photo { border: 0; }
img, picture, figure, [class*="photo"], [class*="__visual"], [class*="__img"], .trip-map, .cb-cabin__plan,
.dst-region__stamp, .rg-stamp, .hp-postcard__stamp, .itin-card__face, .boat-explorer__stage { border-radius: 0 !important; }

/* The Boat: sober placeholder slot for the future 3D model (replaces the hand-drawn hull) */
.tbp-model-slot {
  width: 100%; aspect-ratio: 820 / 420; border: 1px solid #000; background: rgba(244, 239, 228, 0.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; text-align: center;
  color: var(--paper); padding: 1.5rem;
}
.tbp-model-slot svg { width: 56px; height: 56px; opacity: 0.85; }
.tbp-model-slot p { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0; }
.tbp-model-slot span { font-family: var(--font-body); font-style: italic; font-size: var(--fs-small); color: var(--sea-foam); }

/* timeline slider: tick markers (desktop only) and step counter */
.tbp-slider__tick { display: none; }
.tbp-slider__count { font-family: var(--font-body); font-size: 0.95rem; color: var(--ironwood); min-width: 5.5ch; text-align: center; font-variant-numeric: tabular-nums; }
.tbp-slider__arrow { cursor: pointer; }
/* pixel-stage pages scale with `zoom`: counter-scale the frame so it always renders as 1px */
@media (min-width: 1100px) {
  .hp-home img:not([src*="logo-waow2"]):not([src*="indonesia-map"]), .tbp-page img:not([src*="logo-waow2"]):not([src*="indonesia-map"]),
  .cb-page img:not([src*="logo-waow2"]):not([src*="indonesia-map"]), .px-page img:not([src*="logo-waow2"]):not([src*="indonesia-map"]):not(.dst-map__img) { border-width: calc(1px / var(--z, 1)); }
  .cb-cabin__plan, .dst-region__stamp, .rg-stamp { border-width: calc(1px / var(--z, 1)) !important; }
}

/* ==========================================================================
   Pre-Bookings (px-bk) — "bookings not open yet" holding page with a live
   countdown to when they open. No coloured section panel; page stays on
   the default cream background throughout.
   ========================================================================== */
.px-bk .bk-hero__lead p, .px-bk .bk-closing p { font-family: var(--font-body); color: var(--open-sea); }
.px-bk .bk-countdown-head h2 { text-transform: uppercase; letter-spacing: 0.02em; }
.px-bk .bk-col { display: flex; flex-direction: column; align-items: center; }
.px-bk .bk-num {
  font-family: var(--font-display); font-size: 62px; line-height: 66px;
  color: var(--open-sea); font-weight: 400; font-variant-numeric: tabular-nums;
}
.px-bk .bk-label { display: block; margin-top: 48px; color: var(--abyss); font-size: 19px; }
.px-bk .bk-sep { display: flex; justify-content: space-between; }
.px-bk .bk-sep span { width: 4px; height: 100%; background: var(--yellaow); }
.px-bk .bk-newsletter-link {
  display: inline-block; font-family: var(--font-body); color: var(--open-sea);
  border-bottom: 1px solid var(--open-sea); padding-bottom: 6px;
}
.px-bk .bk-newsletter-link:hover { color: var(--abyss); border-color: var(--abyss); }
.px-bk .hp-footer { border-top: 1px solid var(--open-sea); }

@media (max-width: 1099px) {
  .px-bk .bk-hero__lead p, .px-bk .bk-closing p { color: var(--open-sea); }
  .px-bk .bk-countdown { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.5rem; row-gap: 1.75rem; max-width: 340px; margin-inline: auto; }
  .px-bk .bk-col { flex: 0 0 auto; width: 72px; }
  .px-bk .bk-sep { flex: 0 0 auto; width: 12px; height: 70px; align-self: center; }
  .px-bk .bk-sep--rowbreak { display: none; }
  .px-bk .bk-sep span { width: 3px; }
  .px-bk .bk-num { font-size: 38px; line-height: 42px; }
  .px-bk .bk-label { margin-top: 22px; font-size: 13px; white-space: nowrap; }
}

.dst-map__hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.dst-map__hotspot {
  fill: transparent;
  stroke: transparent;
  pointer-events: auto;
  cursor: pointer;
}

.dst-map__label {
  z-index: 5;
}

.tbp-stack { position:relative; width:140px; height:170px; cursor:pointer; }

.tbp-dive-in { order: 4; margin-top:0.65rem; padding:0 0 3px; background:none; border:0; border-bottom:1px solid currentColor; color:var(--ironwood); font-family:var(--font-body); font-size:1rem; cursor:pointer; transition:opacity 0.2s var(--ease); }
.tbp-dive-in:hover { opacity:0.55; }


/* --- Dive in immersive overlay --- */

.tbp-dive-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  background: rgba(244, 239, 228, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}

.tbp-dive-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s var(--ease);
}

.tbp-dive-overlay__inner {
  position: relative;
  width: min(1100px, 90vw);
  height: min(700px, 82vh);
}

.tbp-dive-overlay__content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(390px, 38vw);
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}

.tbp-dive-overlay__date {
  margin: 0 0 1rem;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ironwood);
}

.tbp-dive-overlay__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 2.5vw, 2.3rem);
  line-height: 1.15;
  color: var(--abyss);
}

.tbp-dive-overlay__desc {
  margin: 0 auto;
  max-width: 38ch;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ironwood);
}

.tbp-dive-overlay__photo {
  position: absolute;
  width: 300px;
  height: 228px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease), transform 0.8s cubic-bezier(0.3, 1.3, 0.5, 1);
}

.tbp-dive-overlay__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tbp-dive-overlay__photo--1 {
  left: 4%;
  top: 5%;
  transform: translate(80px, 80px) scale(0.7);
}

.tbp-dive-overlay__photo--2 {
  right: 4%;
  top: 4%;
  transform: translate(-80px, 80px) scale(0.7);
}

.tbp-dive-overlay__photo--3 {
  left: 5%;
  bottom: 4%;
  transform: translate(80px, -80px) scale(0.7);
}

.tbp-dive-overlay__photo--4 {
  right: 5%;
  bottom: 5%;
  transform: translate(-80px, -80px) scale(0.7);
}

.tbp-dive-overlay.is-open .tbp-dive-overlay__photo {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.tbp-dive-overlay.is-open .tbp-dive-overlay__photo--1 {
  transform: translate(0, 0) scale(1);
}

.tbp-dive-overlay.is-open .tbp-dive-overlay__photo--2 {
  transform: translate(0, 0) scale(1);
}

.tbp-dive-overlay.is-open .tbp-dive-overlay__photo--3 {
  transform: translate(0, 0) scale(1);
}

.tbp-dive-overlay.is-open .tbp-dive-overlay__photo--4 {
  transform: translate(0, 0) scale(1);
}

.tbp-dive-overlay__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 20;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ironwood);
  border-radius: 50%;
  background: transparent;
  color: var(--ironwood);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
}

.tbp-dive-overlay__close:hover {
  background: var(--ironwood);
  color: var(--paper);
}

@media (max-width: 780px) {
  .tbp-dive-overlay {
    padding: 1.5rem;
  }

  .tbp-dive-overlay__inner {
    width: 100%;
    height: 90vh;
  }

  .tbp-dive-overlay__content {
    width: 70vw;
  }

  .tbp-dive-overlay__photo {
    width: 145px;
    height: 115px;
  }

  .tbp-dive-overlay__photo--1 { left: 0; top: 8%; }
  .tbp-dive-overlay__photo--2 { right: 0; top: 8%; }
  .tbp-dive-overlay__photo--3 { left: 0; bottom: 8%; }
  .tbp-dive-overlay__photo--4 { right: 0; bottom: 8%; }

  .tbp-dive-overlay__title {
    font-size: 1.4rem;
  }

  .tbp-dive-overlay__desc {
    font-size: 0.9rem;
  }
}
/* =========================================================
   HEADER — NAVIGATION SUBMENUS — REFINED
   ========================================================= */

.nav__item--dropdown {
  position: relative;
}

/* Zone invisible entre le menu et le dropdown */
.nav__item--dropdown::after {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: 100%;
  height: 6px;
}

/* Dropdown */
.nav__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: -18px;

  min-width: 230px;
  padding: 18px 24px 20px;

  background: transparent;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(-8px);

  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease),
    visibility 0s linear 0.25s;

  z-index: 1000;
}

/* Fine ligne décorative à gauche */
.nav__dropdown::before {
  content: "";
  position: absolute;

  left: 0;
  top: 18px;
  bottom: 20px;

  width: 3px;

  background: #4E7495;
  opacity: 1;
}

/* Apparition */
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);

  transition:
    opacity 0.25s var(--ease),
    transform 0.25s var(--ease);
}

/* Liens */
.nav__dropdown a {
  display: block;

  padding: 6px 0;

  color: #4E7495;

  font-family: 'Lemon Milk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;

  letter-spacing: 0.045em;
  white-space: nowrap;

  position: relative;

  transition:
    color 0.18s ease,
    transform 0.18s ease,
    opacity 0.18s ease;
}

/* Désactive la ligne jaune du menu principal */
.nav__dropdown a::after {
  display: none;
}

/* Hover */
.nav__dropdown a:hover {
  color: #10233F;
  opacity: 1;
  transform: translateX(5px);
}

/* Mobile : pas de dropdown desktop */
@media (max-width: 900px) {
  .nav__item--dropdown::after,
  .nav__dropdown {
    display: none;
  }
}


/* =========================================================
   THE BOAT — TIMELINE PHOTO STACK
   Static editorial collage: no pop / burst animation.
   ========================================================= */

.tbp-page .tbp-stack {
  position: relative;
  width: 270px;
  height: 220px;
  cursor: pointer;
}

.tbp-page .tbp-stack__photo {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 246px;
  height: 200px;

  object-fit: cover;
  display: block;

  padding: 0 !important;
  margin: 0;
  background: transparent !important;
  border: 1px solid rgba(16, 35, 63, 0.8);
  border-radius: 0 !important;
  box-shadow: none !important;

  box-sizing: border-box;

  transition: none !important;
}

/* Static four-photo composition */
.tbp-page .tbp-stack__photo:nth-child(1) {
  transform: rotate(-7deg) translate(-24px, -5px) !important;
  z-index: 1;
}

.tbp-page .tbp-stack__photo:nth-child(2) {
  transform: rotate(-2deg) translate(-8px, 0) !important;
  z-index: 2;
}

.tbp-page .tbp-stack__photo:nth-child(3) {
  transform: rotate(3deg) translate(8px, 1px) !important;
  z-index: 3;
}

.tbp-page .tbp-stack__photo:nth-child(4) {
  transform: rotate(7deg) translate(24px, -5px) !important;
  z-index: 4;
}

/* Absolutely no hover/focus "explosion" */
.tbp-page .tbp-stack:hover .tbp-stack__photo:nth-child(1),
.tbp-page .tbp-stack:focus-within .tbp-stack__photo:nth-child(1) {
  transform: rotate(-7deg) translate(-24px, -5px) !important;
}

.tbp-page .tbp-stack:hover .tbp-stack__photo:nth-child(2),
.tbp-page .tbp-stack:focus-within .tbp-stack__photo:nth-child(2) {
  transform: rotate(-2deg) translate(-8px, 0) !important;
}

.tbp-page .tbp-stack:hover .tbp-stack__photo:nth-child(3),
.tbp-page .tbp-stack:focus-within .tbp-stack__photo:nth-child(3) {
  transform: rotate(3deg) translate(8px, 1px) !important;
}

.tbp-page .tbp-stack:hover .tbp-stack__photo:nth-child(4),
.tbp-page .tbp-stack:focus-within .tbp-stack__photo:nth-child(4) {
  transform: rotate(7deg) translate(24px, -5px) !important;
}

/* Desktop geometry */
@media (min-width: 1100px) {
  .tbp-page .tbp-stack {
    width: 270px;
    height: 220px;
  }

  .tbp-page .tbp-slider__step:nth-child(1) .tbp-stack,
  .tbp-page .tbp-slider__step:nth-child(3) .tbp-stack {
    left: 30px !important;
    top: 370px !important;
  }

  .tbp-page .tbp-slider__step:nth-child(2) .tbp-stack {
    left: 30px !important;
  }

  /* Dive in: below the two lower milestones, above the centre milestone */
  .tbp-page .tbp-slider__step:nth-child(1) .tbp-dive-in,
  .tbp-page .tbp-slider__step:nth-child(3) .tbp-dive-in {
    position: absolute;
    left: 50%;
    top: 835px;
    transform: translateX(-50%);
    margin: 0;
    width: auto !important;
  }

  .tbp-page .tbp-slider__step:nth-child(2) .tbp-dive-in {
    position: absolute;
    left: 50%;
    top: 570px;
    transform: translateX(-50%);
    margin: 0;
    width: auto !important;
  }
}

/* Keep the CTA underline exactly under the words */
.tbp-page .tbp-dive-in {
  width: auto !important;
  display: inline-block;
  white-space: nowrap;
  transition: opacity 0.2s var(--ease);
}

/* Dive overlay photos — straight editorial images, 20% larger, no polaroid frame */
.tbp-dive-overlay__photo {
  width: 300px;
  height: 228px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.tbp-dive-overlay__photo--1,
.tbp-dive-overlay__photo--2,
.tbp-dive-overlay__photo--3,
.tbp-dive-overlay__photo--4 {
  transform: translate(80px, 80px) scale(0.7);
}

.tbp-dive-overlay__photo--2 { transform: translate(-80px, 80px) scale(0.7); }
.tbp-dive-overlay__photo--3 { transform: translate(80px, -80px) scale(0.7); }
.tbp-dive-overlay__photo--4 { transform: translate(-80px, -80px) scale(0.7); }

.tbp-dive-overlay.is-open .tbp-dive-overlay__photo,
.tbp-dive-overlay.is-open .tbp-dive-overlay__photo--1,
.tbp-dive-overlay.is-open .tbp-dive-overlay__photo--2,
.tbp-dive-overlay.is-open .tbp-dive-overlay__photo--3,
.tbp-dive-overlay.is-open .tbp-dive-overlay__photo--4 {
  transform: translate(0, 0) scale(1);
}

@media (max-width: 900px) {
  .tbp-dive-overlay__photo {
    width: 240px;
    height: 182px;
  }
}


/* =========================================================================
   Itinerary template, 1366px canvas (itinerary-v2.html / itinerary-v2.js)
   body.px-it2 — reference layout for every route page. Positions come from
   inline --x/--y/--w/--h/--fs/--lh/--ta (generic ".p" rule above); this block
   holds colours, type, and the <1100px fluid fallback.
   ========================================================================= */
.px-it2 h1, .px-it2 h2 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; margin: 0; }
.px-it2 img.it2-nb { border: 0 !important; }
.px-it2 .it2-hero, .px-it2 .it2-story { background: var(--bg-page); }
.px-it2 .it2-hero__photo, .px-it2 .it2-step__photo { margin: 0; }
.px-it2 .it2-hero__title { color: var(--paper); text-align: right; text-shadow: 0 2px 10px rgba(16,35,63,.45); margin: 0; }
.px-it2 .it2-hero__title.is-yellow { color: var(--yellaow); }
.px-it2 .it2-hero__title.is-brown { color: var(--ironwood); text-shadow: none; }
.px-it2 .it2-hero__title.is-dark { color: var(--abyss); text-shadow: none; }
.px-it2 .it2-hero__sub { color: var(--abyss); text-align: center; margin: 0; }
.px-it2 .it2-hero__map { display: block; width: 100%; height: auto; }
.px-it2 .it2-hero__intro { color: var(--abyss); font-family: var(--font-body); text-align: center; margin: 0; }
.px-it2 .it2-hero__intro em { font-style: italic; }

/* sea band + logbook card */
.px-it2 .it2-sea { background: var(--abyss) var(--sea) center / cover no-repeat; }
.px-it2 .it2-log { position: relative; }
.px-it2 .it2-log__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 22px rgba(0,0,0,.35)); }
.px-it2 .it2-log__text { position: relative; padding: 61px 34px 0 42px; }
.px-it2 .it2-log h2 { font-family: var(--font-script); font-weight: 700; letter-spacing: .04em; color: var(--open-sea); font-size: 17px; line-height: 20px; text-align: center; margin: 0; }
.px-it2 .it2-log__days { color: var(--abyss); text-align: center; font-size: 13.5px; line-height: 17px; margin: 36px 0 0; }
.px-it2 .it2-log h3 { font-family: var(--font-script); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--open-sea); font-size: 11px; line-height: 15px; margin: 0 0 3px; }
.px-it2 .it2-log__blk p { color: var(--abyss); font-size: 13.5px; line-height: 17px; margin: 0; max-width: none; }
.px-it2 .it2-log__blk { margin-top: 30px; }
.px-it2 .it2-log__blk--when { margin-top: 30px; }
.px-it2 .it2-log__blk--route { margin-top: 32px; }
.px-it2 .it2-helm { display: block; object-fit: contain; }

/* story */
.px-it2 .it2-step__title { color: var(--open-sea); margin: 0; }
.px-it2 .it2-step__sub { color: var(--ironwood); margin: 0; }
.px-it2 .it2-step__sub.is-blue { color: var(--open-sea); }
.px-it2 .it2-band { background: var(--sea-foam); }
.px-it2 .it2-band__title { color: var(--white); margin: 0; }
.px-it2 .it2-band__sub { color: var(--ironwood); margin: 0; }
.px-it2 .it2-band__text { color: var(--abyss); font-family: var(--font-body); margin: 0; }
.px-it2 .it2-step__text { color: var(--abyss); font-family: var(--font-body); margin: 0; }
.px-it2 .it2-link { display: block; pointer-events: none; }

/* carousel */
.px-it2 .it2-explore { background: var(--abyss); color: var(--paper); }
.px-it2 .it2-explore__title { color: var(--sea-foam); letter-spacing: .06em; margin: 0; text-align: center; }
.px-it2 .it2-explore__sub { font-family: var(--font-body); text-transform: uppercase; color: var(--paper); margin: 0; text-align: center; }
.px-it2 .it2-track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.px-it2 .it2-track::-webkit-scrollbar { display: none; }
.px-it2 .it2-track:focus-visible { outline: 2px solid var(--yellaow); outline-offset: 4px; }
.px-it2 .it2-track ul { display: flex; gap: 32.7px; margin: 0; padding: 0; list-style: none; width: max-content; }
.px-it2 .it2-track li { flex: 0 0 236px; scroll-snap-align: start; }
.px-it2 .it2-card { position: relative; display: block; color: inherit; text-decoration: none; }
.px-it2 .it2-card__photo { display: block; height: 295px; overflow: hidden; }
.px-it2 .it2-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
a.it2-card:hover .it2-card__photo img { transform: scale(1.04); }
.px-it2 .it2-card__title { position: absolute; left: 0; right: 0; top: 16px; text-align: center; color: var(--paper); font-size: 20px; line-height: 24px; padding-inline: 14px; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.px-it2 .it2-card__route { display: block; margin-top: 15px; text-align: center; color: var(--sea-foam); font-family: var(--font-body); font-size: 14.5px; line-height: 18px; }
.px-it2 .it2-card.is-current { cursor: default; pointer-events: none; }
.px-it2 .it2-card.is-current .it2-card__photo img { filter: grayscale(1); opacity: .45; }
.px-it2 .it2-card.is-current .it2-card__route, .px-it2 .it2-card.is-current .it2-card__title { opacity: .6; }
.px-it2 .it2-arrow { background: none; border: 0; padding: 0; color: var(--sea-foam); cursor: pointer; transition: transform .25s var(--ease), color .25s; }
.px-it2 .it2-arrow:hover { transform: translateX(4px); color: var(--paper); }
.px-it2 .it2-arrow svg { width: 100%; height: 100%; display: block; }
.px-it2 .it2-missing { padding: 6rem 0; text-align: center; }

/* fluid fallback (<1100px): stack everything */
@media (max-width: 1099.98px) {
  .px-it2 .px-stage { display: block; padding-inline: var(--gutter); }
  .px-it2 main > section { padding-block: var(--section-pad) 2.5rem; }
  .px-it2 .it2-hero .px-stage { display: grid; gap: 1.5rem; text-align: center; }
  .px-it2 .it2-hero__photo { position: relative; max-width: 420px; margin-inline: auto; }
  .px-it2 .it2-hero__photo img { width: 100%; height: auto; display: block; }
  .px-it2 .it2-hero__title { position: absolute; right: 8%; top: 12%; font-size: 1.6rem; line-height: 1.25; }
  .px-it2 .it2-hero__sub { font-size: 1.3rem; }
  .px-it2 .it2-hero__map { width: 100%; max-width: 520px; margin-inline: auto; }
  .px-it2 .it2-sea { padding-block: 3rem; }
  .px-it2 .it2-log { width: 317px; height: 460px; margin-inline: auto; }
  .px-it2 .it2-helm { position: absolute; width: 60px; height: 58px; left: calc(50% + 100px); margin-top: -430px; }
  .px-it2 .it2-step { display: grid; gap: 1rem; margin-bottom: 3rem; }
  .px-it2 .it2-step__photo img { width: 100%; height: auto; display: block; }
  .px-it2 .it2-step__title { font-size: 1.9rem; line-height: 1.15; }
  .px-it2 .it2-step__sub { font-size: 1.5rem; }
  .px-it2 .it2-step .p { text-align: left; }
  .px-it2 .it2-link { display: none; }
  .px-it2 .it2-band .px-stage { text-align: center; }
  .px-it2 .it2-band__title { font-size: 1.9rem; }
  .px-it2 .it2-band__sub { font-size: 1.5rem; margin: .5rem 0 1rem; }
  .px-it2 .it2-explore__title { font-size: 1.5rem; }
  .px-it2 .it2-explore__sub { margin: .5rem 0 1.5rem; }
  .px-it2 .it2-track { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .px-it2 .it2-arrow { width: 44px; height: 58px; margin: 1rem 0 0 auto; display: block; }
}

/* =========================================================================
   Safety page (safety.html, body.px-sf) — 1366px canvas, positions inline.
   ========================================================================= */
.px-sf .sf-title { color: var(--open-sea); font-family: var(--font-display); font-weight: 500; text-transform: uppercase; text-align: center; margin: 0; }
.px-sf .sf-tag { color: var(--abyss); text-align: center; margin: 0; }
.px-sf .sf-lead { color: var(--open-sea); font-family: var(--font-body); text-align: center; margin: 0; }
.px-sf .sf-hero, .px-sf .sf-cream { background: var(--bg-page); }
.px-sf .sf-blue { background: var(--open-sea); }
.px-sf .sf-navy { background: var(--abyss); }
.px-sf .sf-h { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; margin: 0; color: var(--open-sea); }
.px-sf .sf-p { font-family: var(--font-body); color: var(--abyss); margin: 0; }
.px-sf .sf-blue .sf-h { color: var(--sea-foam); }
.px-sf .sf-blue .sf-p, .px-sf .sf-navy .sf-p, .px-sf .sf-navy .sf-h { color: var(--paper); }
.px-sf .sf-blue:not(.sf-blue--stripes) .sf-h { color: var(--paper); }
.px-sf .sf-photo { margin: 0; }
.px-sf .sf-stripes { position: absolute; top: 0; bottom: 0; right: 0; width: 228px; background: repeating-linear-gradient(to right, var(--sea-foam) 0 12px, transparent 12px 23px); opacity: .85; }
@media (max-width: 1099.98px) {
  .px-sf main > section { padding-block: 3rem; }
  .px-sf .px-stage { display: grid; gap: 1.25rem; padding-inline: var(--gutter); text-align: left; }
  .px-sf .sf-title, .px-sf .sf-tag, .px-sf .sf-lead { text-align: center; }
  .px-sf .sf-title { font-size: 2.6rem; } .px-sf .sf-tag { font-size: 1.4rem; }
  .px-sf .sf-h { font-size: 1.5rem; } .px-sf .sf-p { text-align: left; }
  .px-sf .sf-photo img { width: 100%; height: auto; display: block; }
  .px-sf .sf-stripes { display: none; }
}


/* =========================================================================
   Region "Explore <region>" carousel (region-explore.js) + hover cue on every clickable
   poster / stamp: a slight tilt and lift, so they read as links.
   ========================================================================= */
.px-rg .rgx-title { color: var(--sea-foam); font-family: var(--font-display); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-align: center; margin: 0; }
.px-rg .rgx-sub { color: var(--paper); font-family: var(--font-body); text-transform: uppercase; text-align: center; margin: 0; }
.px-rg .rgx-track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding-top: 10px; }
.px-rg .rgx-track::-webkit-scrollbar { display: none; }
.px-rg .rgx-track:focus-visible { outline: 2px solid var(--yellaow); outline-offset: 4px; }
.px-rg .rgx-track ul { display: flex; gap: 27px; margin: 0 auto; padding: 0; list-style: none; width: max-content; max-width: none; }
.px-rg .rgx-track li { flex: 0 0 210px; scroll-snap-align: start; }
.px-rg .rgx-card { display: block; color: inherit; text-decoration: none; }
.px-rg .rgx-card__photo { display: block; height: 262px; overflow: hidden; border: 1px solid var(--sea-foam); }
.px-rg .rgx-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.px-rg .rgx-card__more { display: block; margin-top: 14px; text-align: center; color: var(--sea-foam); font-family: var(--font-body); font-size: 15px; line-height: 20px; }
.px-rg .rgx-arrow { background: none; border: 0; padding: 0; color: var(--sea-foam); cursor: pointer; transition: transform .25s var(--ease), color .25s; }
.px-rg .rgx-arrow:hover { transform: translateX(4px); color: var(--paper); }
.px-rg .rgx-arrow svg { width: 100%; height: 100%; display: block; }

.rgx-card__photo, .it2-card__photo, .rg-others__card .rg-stamp { transition: transform .3s var(--ease), box-shadow .3s var(--ease); transform-origin: 50% 60%; }
a.rgx-card:hover .rgx-card__photo, a.rgx-card:focus-visible .rgx-card__photo,
a.it2-card:hover .it2-card__photo, a.it2-card:focus-visible .it2-card__photo { transform: rotate(-2.2deg) translateY(-4px) scale(1.03); box-shadow: 0 10px 22px -8px rgba(0,0,0,.55); }
a.rg-others__card:hover .rg-stamp, a.rg-others__card:focus-visible .rg-stamp { transform: rotate(-2.5deg) translateY(-3px) scale(1.04); }
a.it2-card:hover .it2-card__photo img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  a.rgx-card:hover .rgx-card__photo, a.it2-card:hover .it2-card__photo, a.rg-others__card:hover .rg-stamp { transform: none; }
}
@media (max-width: 1099.98px) {
  .px-rg .rgx-title, .px-rg .rgx-sub { text-align: center; }
  .px-rg .rgx-track { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .px-rg .rgx-arrow { width: 44px; height: 58px; margin: 1rem 0 0 auto; display: block; }
}


/* =========================================================================
   The WAOW 1 Museum (museum.html, body.px-mu) — 1366px canvas, positions inline.
   ========================================================================= */
.px-mu .mu-cream { background: var(--bg-page); }
.px-mu .mu-navy { background: var(--abyss); }
.px-mu .mu-title, .px-mu .mu-h { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; margin: 0; color: var(--abyss); }
.px-mu .mu-title { color: var(--open-sea); text-align: center; }
.px-mu .mu-h--light, .px-mu .mu-navy .mu-h { color: var(--paper); }
.px-mu .mu-p { font-family: var(--font-body); color: var(--abyss); margin: 0; }
.px-mu .mu-p--light, .px-mu .mu-navy .mu-p { color: var(--paper); }
.px-mu .mu-tag { color: var(--abyss); text-align: center; margin: 0; }
.px-mu .mu-date, .px-mu .mu-end { color: var(--paper); font-weight: 700; margin: 0; }
.px-mu .mu-photo { margin: 0; }
.px-mu .mu-anchor { display: block; object-fit: contain; }
.px-mu .mu-doc { font-family: var(--font-body); color: var(--abyss); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 10px; }
.px-mu .mu-card { background: #fbf6ea; }
.px-page.px-mu .px-stage .mu-card.p.p { box-shadow: 0 10px 22px -10px rgba(16,35,63,.45); transform: rotate(var(--rot, 0deg)); }
@media (max-width: 1099.98px) {
  .px-mu main > section { padding-block: 3rem; }
  .px-mu .px-stage { display: grid; gap: 1.25rem; padding-inline: var(--gutter); }
  .px-mu .mu-title, .px-mu .mu-tag { text-align: center; }
  .px-mu .mu-title { font-size: 2.2rem; } .px-mu .mu-h { font-size: 1.9rem; line-height: 1.15; }
  .px-mu .mu-photo img { width: 100%; height: auto; display: block; }
  .px-mu .mu-anchor { width: 70px; } .px-mu .mu-card { display: none; }
}

/* Destinations: the "Regions" anchor lands below the fixed header instead of cutting the title */
#regions { scroll-margin-top: 110px; }


/* Header menu colour follows the page title: brown titles -> brown menu, blue titles -> blue menu
   (body.nav-brown / body.nav-blue). Pages with navy titles or the white News header keep their own colours. */
body.nav-brown .nav__list a, body.nav-brown .nav__dropdown a { color: #8a6a4a; }
body.nav-brown .nav__list a.is-active { color: #8a6a4a; }
body.nav-brown .nav__dropdown a:hover { color: #5c4630; }
body.nav-brown .nav__dropdown::before { background: #8a6a4a; }
body.nav-blue .nav__list a, body.nav-blue .nav__dropdown a { color: #4E7495; }
body.nav-blue .nav__dropdown a:hover { color: #10233F; }
body.nav-blue .nav__dropdown::before { background: #4E7495; }


/* =========================================================================
   Footer: one layout for every page (newsletter band + contact / nav columns + legal bar),
   measured from the approved design on the shared 1366px canvas.
   ========================================================================= */
@media (min-width: 1100px) {
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid, body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__legal, body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-newsletter__row { width: 1366px; max-width: none; margin-inline: auto; zoom: var(--hz, var(--z)); }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-newsletter { height: calc(96px * var(--hz, var(--z))); padding: 0; display: block; border-top: 3px double var(--sea-foam); box-sizing: border-box; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-newsletter__row { height: 93px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-newsletter__row > p:first-child { left: 61px; top: 21px; font-size: 19px; line-height: 24px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-newsletter__form input { left: 734px; top: 21px; width: 314px; height: 49px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-newsletter__form button { left: 1085px; top: 21px; width: 204px; height: 49px; font-size: 21px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid { height: 142px !important; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid h3 { left: 247px; top: 27px; width: 160px; text-align: center; font-size: 24px; margin: 0; white-space: nowrap; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid > div > a { left: 247px; top: 62px; width: 160px; text-align: center; font-size: 17px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid address { display: none; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid nav a { font-size: 17px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid nav:nth-of-type(1) li:nth-child(1) a { left: 635px; top: 33px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid nav:nth-of-type(1) li:nth-child(2) a { left: 635px; top: 75px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid nav:nth-of-type(2) li:nth-child(1) a { left: 875px; top: 33px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid nav:nth-of-type(2) li:nth-child(2) a { left: 875px; top: 72px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid nav:nth-of-type(3) li:nth-child(1) a { left: 1065px; top: 33px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid nav:nth-of-type(3) li:nth-child(2) a { left: 1065px; top: 72px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__legal { height: 77px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__social a:nth-child(3) svg { width: 94px; height: 26px; }
}


/* Testimonial postcards are photos (pre-rotated, transparent edges): homepage + WAOW 1 museum */
.hp-testi, .mu-testi { margin: 0; }
.hp-testi img, .mu-testi img { display: block; width: 100%; height: auto !important; object-fit: contain !important; border: 0 !important; }
@media (min-width: 1100px) {
  .hp-home .hp-testi { position: absolute; width: 400px; }
  .hp-home .hp-testi:nth-child(1) { left: 70px; top: 424px; }
  .hp-home .hp-testi:nth-child(2) { left: 480px; top: 424px; }
  .hp-home .hp-testi:nth-child(3) { left: 892px; top: 424px; }
}
.px-page.px-mu .px-stage .mu-testi.p.p { height: auto; overflow: visible; }





/* Carousel CTA: "sea more", underlined (itinerary + region carousels) */
.it2-card__route, .rgx-card__more { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.it2-card__route { width: fit-content; margin-inline: auto; }
.rgx-card__more { width: fit-content; margin-inline: auto; }


/* News: Upcoming events + monthly journal cards that open a PDF in a reader overlay */
.px-nw .nw-events { background: var(--open-sea); }
.px-nw .nw-events__title { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; color: var(--paper); margin: 0; text-align: center; }
.px-nw .nw-poster__cap { font-family: var(--font-body); color: var(--paper); margin: 0; }
.px-nw .nw-poster { margin: 0; }
.px-nw .nw-poster img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0 !important; }
.px-nw .nw-open { background: none; border: 0; padding: 0 0 2px; cursor: pointer; font: inherit; font-family: var(--font-body); }
.nw-modal { width: min(1000px, 94vw); height: min(92vh, 1200px); padding: 0; border: 1px solid var(--abyss); background: var(--bg-page); color: var(--abyss); overflow: hidden; }
.nw-modal[open] { display: flex; flex-direction: column; }
.nw-modal::backdrop { background: rgba(16, 35, 63, .72); }
.nw-modal__bar { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1.25rem; border-bottom: 3px double var(--abyss); }
.nw-modal__bar h2 { margin: 0; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.05rem; }
.nw-modal__close { background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--abyss); padding: 0 .25rem; }
.nw-modal__frame { flex: 1; width: 100%; border: 0; background: #fff; }
.nw-modal__fallback { margin: 0; padding: .6rem 1.25rem; font-family: var(--font-body); font-size: .9rem; border-top: 1px solid rgba(16,35,63,.25); }
.nw-modal__fallback a { text-decoration: underline; }
@media (max-width: 1099.98px) { .px-nw .nw-events .px-stage { display: grid; gap: 1.25rem; padding-inline: var(--gutter); } .px-nw .nw-poster { max-width: 260px; } }

/* =========================================================================
   Horizontal submenu: one row of links, centred under the whole top menu whichever item is hovered,
   transparent, with a short line on its left. (Dropdown is positioned against .nav, not its <li>.)
   ========================================================================= */
.nav { position: relative; }
.nav__item--dropdown { position: static; }
.nav__item--dropdown::after { display: none; }
.nav__dropdown {
  top: 100%; left: 50%; right: auto; min-width: 0; width: max-content;
  display: flex; flex-direction: row; align-items: center; gap: 30px;
  padding: 8px 0 0 18px; background: transparent;
  transform: translate(-50%, -6px);
}
.nav__dropdown::before { top: 8px; bottom: 0; }
.nav__item--dropdown:hover .nav__dropdown,
.nav__item--dropdown:focus-within .nav__dropdown { transform: translate(-50%, 0); }
.nav__dropdown a { padding: 4px 0; white-space: nowrap; }
.nav__dropdown a:hover { transform: none; }

/* Submenu refinements: no left line, bigger forgiving hover zone, header border/shadow never crosses the links */
.nav__dropdown::before { display: none; }
.nav__dropdown { padding: 2px 0 0 0; gap: 34px; }
.nav__dropdown::after { content: ""; position: absolute; left: -48px; right: -48px; top: -10px; bottom: -36px; }
.nav__dropdown a { position: relative; z-index: 1; padding: 6px 0; }
.site-header:has(.nav__item--dropdown:hover), .site-header:has(.nav__item--dropdown:focus-within) { border-bottom-color: transparent; box-shadow: none; }

/* While a submenu is open, the header's own background extends down behind it, so the links sit on a solid band
   and never straddle the header edge (page content no longer shows through them). */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(40px * var(--hz, 1)); background: inherit; backdrop-filter: inherit; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease); }
.site-header:has(.nav__item--dropdown:hover)::after, .site-header:has(.nav__item--dropdown:focus-within)::after { opacity: 1; }

/* Keep the top-menu underline (yellow) on the parent item while the pointer is inside its submenu */
.nav__item--dropdown:hover > a::after, .nav__item--dropdown:focus-within > a::after { right: 0; }

/* Newsletter button: label always centred in the box, whichever page template it sits in */
.hp-newsletter__form button { display: flex; align-items: center; justify-content: center; line-height: 1; padding-block: 0; }


/* =========================================================================
   Homepage vs Canva: icons sized from the design, life/dive captions, itineraries carousel, postcards slider
   ========================================================================= */
.hp-icon { display: block; border: 0 !important; height: auto; }
.hp-testi-nav, .hp-coming-next__nav { cursor: pointer; background: none; }
@media (min-width: 1100px) {
  .hp-home .hp-family__visual .hp-icon--ship { left: 546px; top: 533px; width: 232px; height: auto; }
  .hp-home .hp-dive__mask-icon { left: -72px; top: -95px; width: 143px; height: auto; }
  .hp-home .hp-safety__photo .hp-icon--octopus { left: 462px; top: 480px; width: 157px; height: auto; right: auto; bottom: auto; }
  .hp-home .hp-eyebrow-script { font-size: 52px; white-space: nowrap; }
  .hp-home .hp-dive__photo--left figcaption { left: calc(30px + var(--offz)); width: 356px; bottom: 16px; font-size: 31px; white-space: nowrap; text-align: center; line-height: 1.1; }
  .hp-home .hp-dive__caption-out { top: 518px; line-height: 1.1; }
  /* itineraries carousel (Explore Indonesia section) */
  .hp-home .hp-coming-next__track { width: 1072px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .hp-home .hp-coming-next__track::-webkit-scrollbar { display: none; }
  .hp-home .hp-coming-next__card { flex: 0 0 244px; scroll-snap-align: start; display: block; text-decoration: none; color: inherit; position: relative; }
  .hp-home .hp-coming-next__card figure { position: relative; margin: 0 0 14px; }
  .hp-home .hp-coming-next__card figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hp-home .hp-coming-next__card p { position: static; color: var(--sea-foam); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; width: fit-content; margin-inline: auto; }
  .hp-home .hp-coming-next__nav { color: var(--sea-foam); background: none; padding: 0; }
  /* postcards slider */
  .hp-home .hp-testi-track { position: absolute; left: 50px; top: 410px; width: 1200px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .hp-home .hp-testi-track::-webkit-scrollbar { display: none; }
  .hp-home .hp-testi { position: static; flex: 0 0 400px; width: 400px; scroll-snap-align: start; }
  .hp-home .hp-testi:nth-child(n) { left: auto; top: auto; }
  .hp-home .hp-testi-nav { position: absolute; left: 1262px; top: 520px; width: 56px; height: 84px; border: 0; padding: 0; color: var(--open-sea); }
  .hp-home .hp-testi-nav svg { width: 100%; height: 100%; stroke-width: 3; }
}
.hp-coming-next__track { scrollbar-width: none; }
@media (max-width: 1099.98px) {
  .hp-testi-track { display: flex; overflow-x: auto; gap: 1rem; scroll-snap-type: x mandatory; }
  .hp-testi-track .hp-testi { flex: 0 0 85%; scroll-snap-align: start; }
  .hp-testi-nav { display: none; }
}
@media (min-width: 1100px) {
  .hp-home .hp-dive__photo--left figcaption { font-size: 48px; bottom: 14px; left: calc(28px + var(--offz)); width: 340px; }
  .hp-home .hp-dive__caption-out { font-size: 48px; top: 514px; }
  .hp-home .hp-dive__copy p { width: 316px; left: 525px; }
}
@media (min-width: 1100px) {
  .hp-home .hp-coming-next__card p { font-style: normal; font-size: 17px; }
  .hp-home .hp-explore { height: calc(1275px * var(--z)); }
  .hp-home .hp-explore > .container { height: 1275px; }
  .hp-home .hp-explore > .container::before { content: ""; position: absolute; left: 0; right: 0; top: 742px; height: 1px; background: rgba(175, 194, 210, .3); }
  .hp-home .hp-memories { }
}


/* =========================================================================
   The Boat vs Canva: double key-figures frame, cabins spacing, dive stripes, life-at-sea block, gold double rule
   ========================================================================= */
.tbp-page .tbp-figures__inner { border: 4px double var(--abyss); }
.tbp-page .tbp-cabins__grid h3 { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; color: var(--ironwood); }
.tbp-gold-b { position: relative; }
.tbp-gold-b::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) top / 100% 1.5px no-repeat, repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) bottom / 100% 1.5px no-repeat; }
@media (min-width: 1100px) {
  .tbp-page .tbp-divers__stripes { background-image: repeating-linear-gradient(90deg, var(--abyss) 0 9.5px, var(--bg-page) 9.5px 19px); }
  .tbp-page .tbp-cabins { height: calc(712px * var(--z)); }
  .tbp-page .tbp-cabins > .tbp-stage { height: 712px; }
  .tbp-page .tbp-cabins__grid article { top: 200px; }
  .tbp-page .tbp-cabins__link { top: 624px; }
  .tbp-page .tbp-life { height: calc(470px * var(--z)); }
  .tbp-page .tbp-life > .tbp-stage { height: 470px; }
  .tbp-page .tbp-life h2 { left: -24px; }
  .tbp-page .tbp-life__copy p { left: 60px; width: 432px; }
  .tbp-page .tbp-life__copy .link-arrow { left: 176px; }
  .tbp-page .tbp-life__visual figure { left: 790px; top: 60px; width: 369px; height: 341px; }
  .tbp-page .tbp-life__visual .hp-icon { position: absolute; left: 722px; top: 294px; width: 120px; height: auto; bottom: auto; }
}
@media (min-width: 1100px) {
  .tbp-page .tbp-life__copy p { top: 208px; }
  .tbp-page .tbp-life__copy .link-arrow { top: 308px; }
}

/* Cabins: amenities as two centered script lines (Canva) */
.cb-return__script { font-family: var(--font-script); font-weight: 700; color: var(--abyss); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; }
@media (min-width: 1100px) {
  .cb-page .cb-return__copy > p.cb-return__script { left: 383px; width: 600px; top: 606px; text-align: center; font-size: 26.5px; line-height: 33px; white-space: nowrap; max-width: none !important; font-family: var(--font-script) !important; color: var(--abyss); }
  .cb-page .cb-return__copy > p.cb-return__script--2 { top: 645px; }
}
@media (min-width: 1100px) {
  .cb-page .cb-return__icon { display: none; }
  .cb-page .cb-return__copy > p:not(.cb-return__script) { font-size: 16.5px; line-height: 20px; }
}

/* =========================================================================
   Destinations submenu → nested rows: "Regions" and "Itineraries" each open a second centred row
   just under the first one, with a small corner marker on its left; the yellow underline stays on the
   parent entry while the pointer is in its row, and on the entry matching the current page.
   ========================================================================= */
.nav__dd { display: block; position: static; }
.nav__dd > a::after { display: block !important; content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--yellaow); transition: right .25s var(--ease); }
.nav__dd > a:hover::after, .nav__dd.is-open > a::after, .nav__dd.is-open > a::after, .nav__dd > a.is-active::after { right: 0; background: var(--yellaow); }
.nav__subrow {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 26px;
  width: max-content; max-width: 980px; padding: 14px 0 0 22px;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--ease), visibility 0s linear .2s;
}
.nav__dd.is-open > .nav__subrow, .nav__dd.is-open > .nav__subrow { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s var(--ease); }
.nav__subrow::before { content: ""; position: absolute; left: 0; top: 18px; width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .8; }
.nav__subrow a { font-size: 11px; letter-spacing: 0.04em; }
body.nav-blue .nav__subrow { color: #4E7495; } body.nav-brown .nav__subrow { color: #8a6a4a; }
/* second row sits on the same solid header band */
.site-header:has(.nav__dd.is-open)::after, .site-header:has(.nav__dd.is-open)::after { height: calc(86px * var(--hz, 1)); }
.nav__subrow a.is-active::after { display: block !important; right: 0; background: var(--yellaow); }
.nav__subrow a::after { display: block !important; content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--yellaow); transition: right .25s var(--ease); }
.nav__subrow a:hover::after { right: 0; }
.nav__subrow::before { display: none; }
.nav__subrow a:first-child::before { content: ""; position: absolute; left: -20px; top: 4px; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; opacity: .8; }
.nav__dd--itineraries .nav__subrow a:nth-child(6) { margin-right: 100%; }
.nav__dd--itineraries .nav__subrow { padding-left: 0; }
.site-header:has(.nav__dd--itineraries.is-open)::after, .site-header:has(.nav__dd--itineraries.is-open)::after { height: calc(112px * var(--hz, 1)); }
.nav__dd--itineraries .nav__subrow a:nth-child(6) { margin-right: 0; }
.nav__dd--itineraries .nav__subrow { flex-direction: column; flex-wrap: nowrap; gap: 4px; max-width: none; }
.nav__subline { display: flex; justify-content: center; gap: 26px; white-space: nowrap; }
.nav__subrow a:first-child::before { content: none; }
.nav__subrow > a:first-child::before, .nav__subline:first-child > a:first-child::before { content: ""; }
/* Nested rows must sit above the dropdown's invisible hover zone (::after), and bridge the gap to their entry */
.nav__subrow { z-index: 5; }
.nav__dd { position: static; }
.nav__dd.is-open > .nav__subrow::after, .nav__dd.is-open > .nav__subrow::after { content: ""; position: absolute; left: -60px; right: -60px; top: -34px; bottom: -20px; z-index: -1; }

/* =========================================================================
   Submenus: JS keeps .is-open on a hovered entry for a short delay (main.js) → same visuals as :hover.
   Regions / Itineraries rows moved up 20px: same text-to-text gap (≈7px) as top menu → first submenu row.
   ========================================================================= */
.nav__item--dropdown.is-open .nav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.nav__item--dropdown.is-open > a::after { right: 0; }
.site-header:has(.nav__item--dropdown.is-open) { border-bottom-color: transparent; box-shadow: none; }
.site-header:has(.nav__item--dropdown.is-open)::after { opacity: 1; }
.nav__dd.is-open > .nav__subrow { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s var(--ease); }
.nav__dd.is-open > a::after { right: 0; }
.nav__dd.is-open > .nav__subrow::after { content: ""; position: absolute; left: -60px; right: -60px; top: -24px; bottom: -20px; z-index: -1; }
.nav__subrow { top: 100%; padding-top: 0; }
.site-header:has(.nav__dd.is-open)::after, .site-header:has(.nav__dd.is-open)::after, .site-header:has(.nav__dd.is-open)::after { height: calc(72px * var(--hz, 1)); }
.site-header:has(.nav__dd--itineraries.is-open)::after, .site-header:has(.nav__dd--itineraries.is-open)::after, .site-header:has(.nav__dd--itineraries.is-open)::after { height: calc(98px * var(--hz, 1)); }
.nav__dd.is-open > .nav__subrow::after, .nav__dd.is-open > .nav__subrow::after { top: -24px; }
/* Regions / Itineraries rows open only via .is-open (main.js, with a short switch delay) → no more corner "L" marker,
   tight hover zone that no longer covers the sibling entry; every first-level submenu link gets the yellow hover line. */
.nav__subrow a::before, .nav__subline a::before { content: none !important; }
.nav__dd.is-open > .nav__subrow::after { left: -30px; right: -30px; top: 0; bottom: -14px; }
.nav__dropdown > a::after { display: block; content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--yellaow); transition: right .25s var(--ease); }
.nav__dropdown > a:hover::after { right: 0; }

/* =========================================================================
   Experience vs Canva: gastronomy menu as a perforated postage-stamp card (paper + inner blue frame),
   bigger menu type, dark "Available for full charters." eyebrow.
   ========================================================================= */
@media (min-width: 1100px) {
  .px-xp .xp-gastro__menu { background: none; box-shadow: none; filter: drop-shadow(0 6px 10px rgba(16, 35, 63, 0.18)); }
  .px-xp .xp-gastro__menu::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(165deg, #f5f6f7 0%, #e9ecef 55%, #dfe4e9 100%);
    -webkit-mask: radial-gradient(circle 4px, #0000 97%, #000) -6px -6px / 12px 12px round, linear-gradient(#000 0 0) 6px 6px / calc(100% - 12px) calc(100% - 12px) no-repeat;
            mask: radial-gradient(circle 4px, #0000 97%, #000) -6px -6px / 12px 12px round, linear-gradient(#000 0 0) 6px 6px / calc(100% - 12px) calc(100% - 12px) no-repeat; }
  .px-xp .xp-gastro__menu::after { content: ""; position: absolute; inset: 18px 12px 20px 13px; border: 1.2px solid var(--open-sea); pointer-events: none; }
  .px-xp .xp-gastro__menu { isolation: isolate; }
  .px-xp .xp-gastro__q h3 { font-size: 14.7px; line-height: 18px; }
  .px-xp .xp-gastro__q p { font-size: 13.8px; line-height: 17.8px; }
  .px-xp .xp-make__eyebrow { color: var(--abyss); }
}
@media (min-width: 1100px) {
  .px-xp .xp-hotel__item h3 { font-size: 16.7px; }
  .px-xp .xp-hotel__item p { font-size: 17.6px; }
}

/* =========================================================================
   Diving (dive-deep) vs Canva: light title on the blue "Dive longer" band, brown "book your stay",
   item headings flush to their text (positions measured from the Canva).
   ========================================================================= */
@media (min-width: 1100px) {
  .px-dd .dd-longer h2 { color: var(--sail-linen); }
  .px-dd .dd-groups__link { color: var(--ironwood); }
  .px-dd .dd-built__item h3, .px-dd .dd-longer__item h3 { margin: 0; }
  .px-dd .dd-built__item, .px-dd .dd-longer__item { margin-bottom: 0; }
  .px-dd .dd-longer__item p { line-height: 24.1px; }
}
@media (min-width: 1100px) {
  .px-dd .dd-built__item p, .px-dd .dd-philosophy__cell p { font-size: 17.5px !important; line-height: 24.25px !important; }
  .px-dd .dd-built__item h3, .px-dd .dd-longer__item h3 { font-size: 16.9px; }
  .px-dd .dd-philosophy__cell h3 { font-size: 32.3px; line-height: 36px; margin: 0; }
}

/* Safety vs Canva: narrower stripe band, wider tracking on "The way out", body copy at 17.5px. */
@media (min-width: 1100px) {
  .px-sf .sf-stripes { width: 208px; }
  .px-sf .sf-h--wide { letter-spacing: 0.08em; }
}

/* Giving Back vs Canva: Lemon Milk (not script) for "Our Promise" and its item titles, brown; 17.5px copy. */
@media (min-width: 1100px) {
  .px-gb .gb-promise__intro h2 { font-family: var(--font-display); font-weight: 500; color: var(--ironwood); }
  .px-gb .gb-promise__item h3 { font-family: var(--font-display); font-weight: 500; font-size: 18.5px; line-height: 24px; letter-spacing: 0; margin: 0; }
  .px-gb .gb-promise__item { margin-bottom: 0; }
  .px-gb .gb-forest__caption, .px-gb .gb-promise__caption { left: var(--x); top: var(--y); bottom: auto; }
  .px-gb .gb-forest__caption { color: var(--paper); text-shadow: none; transform: rotate(-4deg); transform-origin: left top; }
  .px-gb .gb-forest__copy h2 { color: var(--paper); }
  .px-gb .gb-forest__star { color: var(--sea-foam); }
}
@media (min-width: 1100px) {
  .px-gb .gb-promise__item h3 { font-size: 17.4px; }
  .px-gb .gb-promise__item p { font-size: 17.5px !important; line-height: 24px !important; margin: 0 !important; }
}
@media (min-width: 1100px) {
  .px-gb .gb-closing p.p { font-style: normal; color: var(--abyss); max-width: none; }
}
@media (min-width: 1100px) {
  .px-gb .gb-closing p.p { font-style: normal !important; color: var(--abyss) !important; max-width: none !important; }
  .px-gb .gb-promise__item p { max-width: none !important; }
}

/* Destinations: map 10% smaller (user request); region stamps fill their measured Canva box. */
@media (min-width: 701px) {
  .dst-map { --stage-w: calc(0.9 * min(100vw, calc((100vh - 50px) * 1.5406))); }
}
@media (min-width: 1100px) {
  .px-ds .dst-region__stamp { padding: 0; }
  .px-ds .dst-region__stamp img { width: 100%; height: 100%; object-fit: contain; display: block; }
}
@media (min-width: 1100px) { .px-ds .dst-region__copy h3 { font-size: var(--fs); } .px-ds .dst-regions h2 { font-size: var(--fs); } .px-ds .dst-region__copy .link-arrow { font-size: 17.5px; } }

/* Itinerary template vs Canva (West Meets East): 4 posters 245×303 per view, "sea more" 17.5px. */
@media (min-width: 1100px) {
  .px-it2 .it2-track ul { gap: 32px; }
  .px-it2 .it2-track li { flex-basis: 245px; }
  .px-it2 .it2-card__photo { height: 303px; }
  .px-it2 .it2-card__route { margin-top: 16px; font-size: 17.5px; line-height: 22px; }
}
/* Logbook card vs Canva: bigger handwriting, "·" separators, blocks placed on the measured baselines. */
@media (min-width: 1100px) {
  .px-it2 .it2-log__text { padding: 58px 40px 0 41px; }
  .px-it2 .it2-log h2 { font-size: 21px; line-height: 24px; }
  .px-it2 .it2-log__days { font-size: 15.5px; line-height: 22px; margin-top: 27px; }
  .px-it2 .it2-log h3 { font-size: 15.8px; line-height: 22px; margin: 0; }
  .px-it2 .it2-log__blk p { font-size: 14.5px; line-height: 23px; }
  .px-it2 .it2-log__blk { margin-top: 24.5px; }
  .px-it2 .it2-log__blk--when { margin-top: 12px; }
  .px-it2 .it2-log__blk--when p { line-height: 22px; }
  .px-it2 .it2-log__blk--route { margin-top: 26px; }
}

/* =========================================================================
   Region pages vs Canva (Banda Sea, shared by the five regions): key-infos sheet in italic serif under
   script headings, bigger explore posters, white tilted Open Water caption, centred quote card,
   "other regions" stamps as a 3-up carousel with an arrow.
   ========================================================================= */
@media (min-width: 1100px) {
  .px-rg .rg-key__sheet h3 { font-size: 23.7px; line-height: 26px; margin: 0 0 6px; }
  .px-rg .rg-key .rg-key__sheet p { font-family: var(--font-body); font-style: italic; font-weight: 400; font-size: 13.6px; line-height: 19.4px; margin: 0 auto 24px; color: var(--abyss); }
  .px-rg .rgx-track li { flex-basis: 228px; }
  .px-rg .rgx-card__photo { height: 282px; }
  .px-rg .rgx-card__more { margin-top: 18px; font-size: 15.5px; }
  .px-rg p.rg-ow__caption { text-shadow: none; text-align: left; transform: rotate(-5deg); transform-origin: left top; }
  .px-rg .rg-quote__card p { font-size: 19px; line-height: 27.6px; text-align: center; }
  .px-rg .rg-others__sub { font-family: var(--font-body); text-transform: uppercase; color: var(--paper); margin: 0; }
  .px-rg .rg-others__track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .px-rg .rg-others__track::-webkit-scrollbar { display: none; }
  .px-rg .rg-others__track ul { display: flex; gap: 36px; margin: 0; padding: 8px 0; list-style: none; width: max-content; }
  .px-rg .rg-others__track li { flex: 0 0 300px; scroll-snap-align: start; }
  .px-rg .rg-others__track .rg-others__card { display: block; }
  .px-rg .rg-others__track .rg-stamp { position: static; width: 100%; height: auto; aspect-ratio: 297 / 210; }
  .px-rg .rg-others__track .rg-stamp img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .px-rg .rg-others__arrow { background: none; border: 0; padding: 0; color: var(--sea-foam); cursor: pointer; transition: transform .25s var(--ease), color .25s; }
  .px-rg .rg-others__arrow:hover { transform: translateX(4px); color: var(--paper); }
  .px-rg .rg-others__arrow svg { width: 100%; height: 100%; display: block; }
}
@media (min-width: 1100px) { .px-rg .rg-key .rg-key__sheet p { max-width: 232px; } }
@media (min-width: 1100px) {
  .px-rg .rg-quote__card.p { min-height: 394px; }
  .px-rg .rg-others__arrow svg path { stroke-width: 2.6; vector-effect: non-scaling-stroke; }
  .px-rg .rg-others__arrow svg path { stroke-width: 15px; }
}
@media (min-width: 1100px) { .px-rg-sulawesi .rg-key .rg-key__sheet p { margin-bottom: 5px; } }

/* Booking vs Canva: bigger countdown digits and script labels. */
@media (min-width: 1100px) {
  .px-bk .bk-num { font-size: 79.3px; line-height: 80px; }
  .px-bk .bk-label { font-size: 47px; line-height: 50px; margin-top: 36px; }
}

/* About Us vs Canva: embroidered helm/anchor above photos, "the WAOW story" link, team photo order. */
@media (min-width: 1100px) {
  .px-ab .ab-hero__helm, .px-ab .ab-w1__anchor { z-index: 3; }
  .px-ab .ab-w1 .link-arrow { color: var(--paper); font-size: 17.5px; }
  .px-ab .ab-team__photo:nth-of-type(3) { z-index: 2; }
}

/* Museum vs Canva: blue script subtitle, documentary link with a long underline, black headings on cream. */
@media (min-width: 1100px) {
  .px-mu .mu-tag--l { color: var(--open-sea); text-align: left; }
  .px-mu .mu-doc { text-underline-offset: 14px; }
  .px-mu .mu-cream .mu-h { color: #111; }
  .px-mu .mu-frame { overflow: visible; }
  .px-mu .mu-frame img { object-fit: contain; }
}

/* News vs Canva: first card cream, 17.5px body, bigger "sea more". */
@media (min-width: 1100px) {
  .px-nw .nw-card h2 { font-size: 24.4px; height: 86px; }
  .px-nw .nw-card::after { top: 86px; }
  .px-nw .nw-card__body p { top: 113px; font-size: 17.5px; line-height: 24.2px; }
  .px-nw .nw-card__body .link-arrow { left: 996px; top: 160px; font-size: 17.4px; }
}
@media (min-width: 1100px) { .px-nw .nw-card { border-width: 2px; } .px-nw .nw-card::after { border-top-width: 2px; border-bottom-width: 2px; } }

/* =========================================================================
   Review pass 2 — Cabins
   ========================================================================= */
@media (min-width: 1100px) {
  .cb-page .cb-hero { height: calc(965px * var(--z)); }
  .cb-page .cb-hero > .cb-stage { height: 965px; }
  .cb-page .cb-hero h1 { font-size: 42px; line-height: 52px; top: 118px; }
  .cb-page .cb-hero__photo--a { left: 322px; top: 262px; width: 722px; height: 461px; }
  .cb-page .cb-hero__photo--b { left: 649px; top: 556px; width: 415px; height: 335px; }
  .cb-page .cb-hero__photo--b img { object-position: 30% 62%; }
  /* the plan cards are bigger than their box: let them breathe above/below the section instead of being cropped */
  .cb-page #master-cabin, .cb-page #superior-cabins, .cb-page #single-cabins, .cb-page #deluxe-cabins { overflow-x: clip; overflow-y: visible; }
  .cb-page .cb-cabin__copy h2 { font-size: 54px; line-height: 56px; }
  .cb-page #master-cabin .cb-cabin__deck { top: 249px; } .cb-page #superior-cabins .cb-cabin__deck { top: 225px; }
  .cb-page #single-cabins .cb-cabin__deck { top: 167px; } .cb-page #deluxe-cabins .cb-cabin__deck { top: 121px; }
  .cb-page .cb-cabin__copy p.cb-cabin__deck { font-family: var(--font-display) !important; font-weight: 600; font-size: 19px; line-height: 26px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ironwood) !important; }
  .cb-page .cb-cabin__annotation { font-size: 25px; line-height: 40px; }
  .cb-page #superior-cabins .cb-cabin__annotation { left: 958px; width: auto; transform: translateX(-100%); }
  .cb-page #deluxe-cabins .cb-cabin__annotation { left: 958px; width: auto; transform: translateX(-100%); }
}

/* =========================================================================
   Review pass 2 — The Boat: gold double rule lives on the cream side, more room above "The Cabins"
   ========================================================================= */
.tbp-gold-b::after { display: none; }
.tbp-page .tbp-cabins { position: relative; }
.tbp-page .tbp-cabins::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) top / 100% 1.5px no-repeat, repeating-linear-gradient(to bottom, var(--yellaow) 0 1.5px, transparent 1.5px 4px) bottom / 100% 1.5px no-repeat; }
@media (min-width: 1100px) {
  .tbp-page .tbp-cabins { height: calc(760px * var(--z)); }
  .tbp-page .tbp-cabins > .tbp-stage { height: 760px; }
  .tbp-page .tbp-cabins h2 { top: 95px; }
  .tbp-page .tbp-cabins__grid article { top: 250px; }
  .tbp-page .tbp-cabins__link { top: 672px; }
}

/* =========================================================================
   Review pass 2 — Homepage + footer
   ========================================================================= */
@media (min-width: 1100px) {
  .hp-home .hp-intro__photo--a { left: 862px; }
  .hp-home .hp-intro__photo--b { left: 604px; }
  .hp-home .hp-dive__copy .link-arrow { left: 528px; width: 310px; }
  .hp-home .hp-explore__head .link-arrow { left: 569px; width: 228px; }
  .hp-home .hp-explore > .container::before { content: none; }
  .hp-home .hp-explore__head h2, .hp-home .hp-coming-next__head .hp-eyebrow-script { font-size: 30px; line-height: 37px; letter-spacing: 0.05em; }
  .hp-home .hp-coming-next__card p { font-style: normal !important; }
  .hp-home .hp-coming-next__prev { position: absolute; left: 8px; top: 940px; width: 75px; height: 113px; border: 0; border-radius: 0; color: var(--sea-foam); background: none; padding: 0; }
  .hp-home .hp-coming-next__prev svg { width: 75px; height: 113px; stroke-width: 3; }
  .hp-home .hp-testi-prev { position: absolute; left: 0; top: 529px; width: 44px; height: 66px; border: 0; padding: 0; color: var(--open-sea); background: none; }
  .hp-home .hp-testi-prev svg { width: 100%; height: 100%; stroke-width: 3; }
}
/* stamps: light tilt on hover, the perforated edge follows the shape (no box around it) */
.hp-stamp-row li { overflow: visible; }
.hp-stamp-row li a { display: block; }
.hp-stamp-row li img { transition: transform .3s var(--ease), filter .3s var(--ease); transform-origin: 50% 60%; }
.hp-stamp-row li a:hover img, .hp-stamp-row li a:focus-visible img { transform: rotate(-2.5deg) translateY(-4px) scale(1.04); filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
@media (prefers-reduced-motion: reduce) { .hp-stamp-row li a:hover img { transform: none; } }
/* footer: Contact Us block centred on the two link rows */
@media (min-width: 1100px) {
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid h3 { top: 37px; }
  body:is(.px-page,.hp-home,.tbp-page,.cb-page) .hp-footer__grid > div > a { top: 72px; }
}

/* =========================================================================
   Review pass 2 — Regions: key-infos paper grows with its text; hover-safe carousels; centred CTA
   ========================================================================= */
.px-rg .rg-key__note { height: auto !important; min-height: var(--h); box-sizing: border-box; padding-bottom: 44px; }
.px-rg .rg-key__note .rg-key__sheet { display: block; }
/* rotated cards must not be clipped by their scroller */
.px-rg .rgx-track { padding: 34px 16px 18px; translate: -16px -24px; box-sizing: content-box; scroll-padding-inline: 16px; }
.px-it2 .it2-track { padding: 24px 16px 16px; translate: -16px -24px; box-sizing: content-box; scroll-padding-inline: 16px; }
.px-it2 .it2-track, .px-rg .rgx-track { overflow-y: hidden; }
.px-rg .rg-key__right .link-arrow { align-self: center; margin-inline: auto; }

/* =========================================================================
   Review pass 2 — Itineraries: "embark" CTA under the last paragraph
   ========================================================================= */
.px-it2 .it2-embark { display: flex; justify-content: center; width: fit-content; margin: 2.5rem auto 0; color: var(--ironwood); }
@media (min-width: 1100px) {
  .px-it2 .it2-embark { position: absolute; margin: 0; transform: translateX(-50%); white-space: nowrap; }
}

/* =========================================================================
   Review pass 2 — WAOW 1 stories: postcards lean alternately left / right
   (the photos are pre-rotated: 1 and 3 lean left, 4 leans right → straighten 3 against 4)
   ========================================================================= */
.px-page.px-mu .mu-testi:nth-of-type(2) img { transform: rotate(7.3deg); }
.px-page.px-mu .mu-testi:nth-of-type(3) img { transform: rotate(-7.3deg); }

/* Body copy: Fraunces is 15px everywhere (elements are tagged by main.js) */
[data-f13] { font-size: 15px !important; }

/* itinerary logbook: text scales with the card when a page's card is wider than the 306px reference (--ls set by itinerary-v2.js) */
.px-it2 .it2-log__text { zoom: var(--ls, 1); }

/* Region pages: the stage is already zoomed by --z, so the stripe offset must not be scaled a second time */
@media (min-width: 1100px) {
  .px-rg .px-stripes { left: var(--sx); }
}
@media (min-width: 1100px) {
  .px-rg .px-stripes { right: auto; width: calc((100vw - var(--offpx)) / var(--z) - var(--sx)); }
}

/* Sulawesi vs Canva: quote card text column is 442px wide */
@media (min-width: 1100px) { .px-rg .rg-quote__card { padding-inline: 80px; } }

/* Region pages with exactly three itineraries (Sulawesi): large posters, as in the Canva */
@media (min-width: 1100px) {
  .px-rg .rgx-track ul:has(> li:nth-child(3):last-child) { gap: 135px; justify-content: center; }
  .px-rg .rgx-track ul:has(> li:nth-child(3):last-child) li { flex-basis: 240px; }
  .px-rg .rgx-track ul:has(> li:nth-child(3):last-child) .rgx-card__photo { height: 297px; }
}

/* Sunda Islands vs Canva */
@media (min-width: 1100px) {
  .px-rg-sunda-islands .rg-key .rg-key__sheet p { margin-bottom: 5px; }
  .px-rg-sunda-islands .rgx-track ul { gap: 35px; }
  .px-rg-sunda-islands .rgx-track li { flex-basis: 221px; }
  .px-rg-sunda-islands .rgx-card__photo { height: 274px; }
}

/* Papua vs Canva */
@media (min-width: 1100px) {
  .px-rg-papua .rg-key .rg-key__sheet p { margin-bottom: 5px; }
  .px-rg .px-stripes--l { left: calc(-1 * var(--offz)); right: auto; width: calc(var(--offz) + var(--sx)); }
}

/* Moluccas vs Canva */
@media (min-width: 1100px) {
  .px-rg-moluccas .rg-key .rg-key__sheet p { margin-bottom: 5px; }
  .px-rg-moluccas .rgx-track ul:has(> li:nth-child(4)) { gap: 35px; }
}