/* =========================================================================
   WAOW — responsive layer (tablet + mobile).
   Desktop (>= 1100px) is the pixel-measured 1366px system in style.css and is NOT touched here.
   Below 1100px the pages are plain flow layouts (flex / grid / natural heights); this file only
   corrects what the desktop layers leave behind on narrow screens.
   Breakpoints: 1099.98px (tablet and below) · 767.98px (mobile) · 479.98px (small mobile)
   ========================================================================= */

@media (max-width: 1099.98px) {
  html, body { overflow-x: clip; max-width: 100%; }
  img, picture, video, canvas { max-width: 100%; }
  .logo { flex: 0 0 auto; }
  .logo img { width: auto; max-width: none; }     /* never squeeze the logo */

  /* footer: desktop pins the grid at a fixed height */
  .hp-footer__grid { height: auto !important; }
}

/* ---- shared: decorative embroidery icons are never cropped or stretched ---- */
@media (max-width: 1099.98px) { .hp-icon, img.dot-icon { height: auto !important; object-fit: contain !important; } }

/* =========================================================================
   Homepage
   ========================================================================= */
@media (max-width: 1099.98px) {
  /* icons sit on the corner of their photo instead of covering text */
  .hp-family__visual .dot-icon { width: clamp(70px, 14vw, 130px); left: -3%; bottom: -8%; }
  .hp-safety__photo { overflow: visible; }
  .hp-safety__photo .dot-icon { width: clamp(70px, 13vw, 120px); right: -3%; bottom: -8%; }
  .hp-dive__mask-icon { width: clamp(80px, 15vw, 140px); left: -2%; top: -9%; }
  .hp-dive__photo--right { margin-top: clamp(2.5rem, 8vw, 4rem); }
  .hp-dive__col { min-width: 0; }

  /* destination stamps: a wrapped row of reasonably sized stamps, not one giant column */
  .hp-stamp-row { gap: clamp(0.75rem, 2.5vw, 1.5rem); }
  .hp-stamp-row li { flex: 0 1 clamp(150px, 29vw, 230px); position: static; width: auto; height: auto; }
  .hp-stamp-row li a, .hp-stamp-row li img { display: block; width: 100%; height: auto; }

  /* carousels: arrows stay inside the viewport */
  .hp-coming-next__row { gap: 0.5rem; }
  .hp-coming-next__track { min-width: 0; flex: 1 1 auto; scrollbar-width: none; }
  .hp-coming-next__track::-webkit-scrollbar { display: none; }
  .hp-coming-next__nav { flex: 0 0 auto; position: static; }
  .hp-coming-next__card { width: clamp(150px, 38vw, 244px); flex: 0 0 auto; }
  .hp-coming-next__card figure { height: auto; aspect-ratio: 4 / 5; }
  .hp-testi-nav { position: static; }
}
@media (max-width: 479.98px) {
  .hp-stamp-row li { flex-basis: calc(50% - 0.5rem); }
  .hp-coming-next__card { width: 62vw; }
}

/* =========================================================================
   Photo collages (two overlapping photos): one flow-based grid for tablet + mobile
   ========================================================================= */
@media (max-width: 1099.98px) {
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) {
    position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start;
    width: 100%; max-width: 620px; margin-inline: auto; min-height: 0 !important; height: auto !important; padding-bottom: 12%;
  }
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) > figure {
    position: relative !important; inset: auto !important; margin: 0 !important; height: auto !important; transform: none;
  }
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) > figure:nth-of-type(1) {
    grid-column: 1 / span 8; grid-row: 1; width: 100% !important; aspect-ratio: 4 / 5 !important; z-index: 1;
  }
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) > figure:nth-of-type(2) {
    grid-column: 6 / span 7; grid-row: 1; align-self: end; margin-bottom: -12% !important; width: 100% !important; aspect-ratio: 1 / 1.05 !important; z-index: 2;
  }
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) figure img {
    width: 100%; height: 100%; object-fit: cover; transform: none;
  }
  .cb-hero__collage > figure:nth-of-type(1) { aspect-ratio: 4 / 3 !important; grid-column: 1 / span 9; }
  .cb-hero__collage > figure:nth-of-type(2) { grid-column: 5 / span 8; aspect-ratio: 1 / 1 !important; }
  .cb-hero__collage { padding-bottom: 16%; }
  .hp-intro__visual > figure:nth-of-type(1) { aspect-ratio: 1 / 1.05 !important; }
}

/* =========================================================================
   Cabins
   ========================================================================= */
@media (max-width: 1099.98px) {
  .cb-page .cb-return__copy > p[style], .cb-page .cb-closing__copy p[style], .cb-page .cb-hero p[style] {
    position: static !important; left: auto !important; transform: none !important; text-align: center; margin-inline: auto;
  }
  .cb-return__copy { text-align: center; }
  .cb-return__icon { display: none; }
  .cb-return__script { text-align: center; font-size: clamp(1rem, 2.6vw, 1.4rem); margin-top: 1rem; }
  .cb-return__script--2 { margin-top: 0.25rem; }
  .cb-cabin__plan.cb-cabin__plan--img { width: 100%; max-width: 440px; margin-inline: auto; }
  .cb-cabin__plan img { transform: none !important; }
  .cb-cabin__frame { max-width: 440px; margin-inline: auto; }
  .cb-cabin__annotation { font-size: clamp(1.05rem, 3vw, 1.4rem); line-height: 1.5; text-align: center; }
  .cb-cabin__copy { text-align: center; }
  .cb-cabin__copy h2 { font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1.1; }
  .cb-cabin__copy p.cb-cabin__deck { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--ironwood); letter-spacing: 0.03em; }
  .cb-cabin__copy .link-arrow { margin-inline: auto; }
  .cb-hero h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
  .cb-closing__copy { text-align: center; }
  .cb-closing__photo { max-width: 460px; margin-inline: auto; }
}

/* =========================================================================
   The Boat
   ========================================================================= */
@media (max-width: 1099.98px) {
  /* desktop-only image crops (inline transforms) */
  .tbp-page .tbp-fullbleed__photo img { transform: none !important; }
  .tbp-page .tbp-fullbleed__photo--br img { transform: scaleY(-1) !important; object-fit: contain !important; background: transparent; }
  /* Outdoor / Indoor: plain stack, text first on tablet too */
  .tbp-fullbleed { position: relative; display: block; min-height: 0 !important; overflow: visible; }
  .tbp-fullbleed__photo, .tbp-fullbleed__photo--full-right {
    position: relative !important; inset: auto !important; display: block; width: min(100%, 560px) !important; height: auto !important;
    aspect-ratio: 4 / 3 !important; margin: 1.5rem auto !important;
  }
  .tbp-fullbleed__photo--br { aspect-ratio: 4 / 3 !important; }
  .tbp-fullbleed__copy { max-width: 60ch; margin-inline: auto !important; text-align: center !important; padding-inline: var(--gutter) !important; }
  .tbp-fullbleed .dot-icon { display: none; }
  .tbp-intro__collage { margin-top: 1.5rem; }
  .tbp-intro__copy { text-align: center; }
  .tbp-life h2 { left: auto; }
}

/* =========================================================================
   Experience / Diving / Engagement / About: loose items (quotes, captions, menu card) join the flow
   ========================================================================= */
@media (max-width: 1099.98px) {
  .xp-gastro__collage, .dd-built__visual, .dd-underwater__visual, .dd-groups__visual, .gb-forest__photo, .gb-promise__photo {
    position: relative; display: flex; flex-direction: column; gap: 1rem; min-height: 0 !important; height: auto !important;
    width: 100%; max-width: 560px; margin-inline: auto;
  }
  .xp-gastro__collage > *, .dd-built__visual > *, .dd-underwater__visual > *, .dd-groups__visual > *, .gb-forest__photo > .p, .gb-promise__photo > .p,
  .xp-hotel__caption, .xp-hero__collage > .dot-icon {
    position: static !important; inset: auto !important; transform: none !important; width: auto !important; margin: 0 !important;
  }
  .xp-gastro__photo, .dd-built__photo, .gb-forest__photo > picture, .gb-promise__photo > picture { height: auto !important; aspect-ratio: 4 / 3 !important; }
  .xp-gastro__photo-quote { order: -1; text-align: center; }
  .xp-gastro__menu { align-self: center; width: min(100%, 340px) !important; padding: 1.5rem 1rem !important; }
  .xp-hotel__caption, .dd-built__caption, .dd-underwater__caption, .gb-forest__caption, .gb-promise__caption { text-align: center; max-width: 100%; }
  .xp-hotel__caption { grid-column: 1 / -1; grid-row: 2; margin-top: 1.5rem !important; }
  .dd-groups__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; }
  .xp-hero__collage > .dot-icon, .dd-newsites__visual > .dot-icon { position: absolute !important; right: 0; top: -2rem; width: clamp(60px, 14vw, 110px) !important; }
  .xp-diving__visual > .dot-icon, .xp-included__visual > .dot-icon { width: clamp(60px, 14vw, 110px) !important; }
  .xp-beyond__photo { overflow: visible; }
  .xp-beyond__photo img { transform: none !important; }
  .dd-newsites__photo, .dd-newsites__photo img { overflow: visible; }
}

/* =========================================================================
   Header + mobile menu (accordion with every page the desktop menu reaches)
   ========================================================================= */
@media (max-width: 900px) {
  .site-header__row { gap: 0.75rem; }
  .site-header__actions { gap: 0.5rem; }
  .site-header__actions .btn { white-space: nowrap; padding: 0.55em 0.9em; font-size: 0.7rem; }
  .mobile-nav { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
  .mobile-nav ul { gap: 0.2rem; padding-block: 0.75rem 1.5rem; }
  .mobile-nav > ul > li > a, .mobile-nav summary a { display: inline-block; padding-block: 0.55rem; }
  .mobile-nav details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
  .mobile-nav details > summary::-webkit-details-marker { display: none; }
  .mobile-nav details > summary::after {
    content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid var(--open-sea); border-bottom: 2px solid var(--open-sea);
    transform: rotate(45deg); transition: transform 0.2s var(--ease);
  }
  .mobile-nav details[open] > summary::after { transform: rotate(-135deg); }
  .mobile-nav__sub { display: flex; flex-direction: column; gap: 0 !important; padding: 0 0 0.5rem 1rem !important; border-left: 1.5px solid var(--yellaow); margin-left: 2px; }
  .mobile-nav__sub a { font-size: 0.8rem; font-weight: 600; color: var(--open-sea); padding-block: 0.45rem; display: inline-block; }
  .mobile-nav__nested > ul { display: flex; flex-direction: column; padding: 0 0 0.25rem 1rem; }
  .mobile-nav__nested > ul a { font-size: 0.72rem; font-weight: 500; }
  .mobile-nav__nested > summary a { font-size: 0.8rem; }
}
@media (max-width: 479.98px) {
  .site-header__actions .btn { padding: 0.5em 0.7em; font-size: 0.62rem; letter-spacing: 0.04em; }
  .logo img { height: 28px; }
}

/* =========================================================================
   Regions
   ========================================================================= */
@media (max-width: 1099.98px) {
  .px-rg figure img, .px-it figure img { object-fit: cover; }
  .px-rg .rg-quote__card.p { transform: none !important; top: auto !important; min-height: 0; height: auto !important; max-height: none; overflow: visible; }
  .px-rg .rg-key__note { height: auto !important; min-height: 0; }
  .px-rg .rg-key__right { height: auto !important; }
  .px-rg .rgx-track, .px-it2 .it2-track { translate: none; margin-inline: calc(-1 * var(--gutter)); padding: 18px var(--gutter) 12px; scroll-padding-inline: var(--gutter); box-sizing: border-box; }
}

/* =========================================================================
   Small screens: desktop hard line breaks inside paragraphs become spaces so text re-wraps naturally
   (Chrome/Safari; poems and short stacked lines keep their breaks)
   ========================================================================= */
.br-sp { display: none; }
@media (max-width: 767.98px) {
  br.had { display: none; }
  .br-sp { display: inline; }
}

/* newsletter + footer on small screens */
@media (max-width: 899.98px) {
  .hp-newsletter__form { display: flex; flex-wrap: wrap; gap: 0.75rem; width: 100%; }
  .hp-newsletter__form input { flex: 1 1 220px; min-width: 0; min-height: 44px; }
  .hp-newsletter__form button { flex: 1 1 140px; min-height: 44px; }
  .hp-footer__legal { flex-wrap: wrap; gap: 0.75rem 1.5rem; }
  .hp-footer__policies { flex-wrap: wrap; gap: 0.5rem 1.25rem; }
}

/* the mobile panel only exists below the desktop-nav breakpoint, and opens/closes with [hidden] */
@media (min-width: 901px) { .mobile-nav { display: none !important; } }
@media (max-width: 900px) {
  .mobile-nav[hidden] { display: none; }
  .mobile-nav:not([hidden]) { display: block; }
}

/* =========================================================================
   MOBILE V2 — GLOBAL (2026-10-01 review). Everything below is <= 1099.98px / 767.98px only.
   ========================================================================= */

/* --- A. Gold double rules: on small screens the desktop section rules land in odd places; drop them.
       Sections that still need a separator get the clean .m-rule variant (page blocks below). --- */
@media (max-width: 1099.98px) {
  .px-gold-b::after, .px-gold-t::before, .tbp-gold-b::after { display: none !important; }
  .m-rule { position: relative; }
  .m-rule::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; z-index: 3; pointer-events: none;
    background: linear-gradient(var(--yellaow), var(--yellaow)) top / 100% 1.5px no-repeat, linear-gradient(var(--yellaow), var(--yellaow)) bottom / 100% 1.5px no-repeat;
  }
}

/* --- B. Stripes become a horizontal band across the top of their section --- */
@media (max-width: 1099.98px) {
  .hp-boat__stripes, .hp-family__stripes, .tbp-divers__stripes, .dd-built__stripes, .gb-promise__stripes, .rg-t2__stripes, .rg-t5__stripes {
    display: block !important; position: absolute !important; inset: 0 0 auto 0 !important; width: auto !important; height: 30px !important;
    left: 0 !important; right: 0 !important; opacity: 1;
  }
  .rg-t2__stripes.px-stripes--l { display: none !important; }
  .hp-boat__stripes { background-image: repeating-linear-gradient(180deg, var(--sea-foam) 0 4px, var(--bg-page) 4px 9px) !important; }
  .hp-family__stripes { background-image: repeating-linear-gradient(180deg, var(--sea-foam) 0 4px, var(--open-sea) 4px 9px) !important; }
  .tbp-divers__stripes { background-image: repeating-linear-gradient(180deg, var(--abyss) 0 4px, var(--bg-page) 4px 9px) !important; }
  .dd-built__stripes { background-image: repeating-linear-gradient(180deg, var(--sea-foam) 0 4px, var(--abyss) 4px 9px) !important; }
  .gb-promise__stripes { background-image: repeating-linear-gradient(180deg, var(--ironwood) 0 4px, var(--bg-page) 4px 9px) !important; opacity: 1 !important; }
  .rg-t2__stripes { background-image: repeating-linear-gradient(180deg, var(--sea-foam) 0 4px, var(--abyss) 4px 9px) !important; }
  :is(.hp-boat, .hp-family, .tbp-divers, .dd-built, .gb-promise, .rg-t2) { position: relative; padding-top: max(64px, var(--m-pad, 64px)) !important; }
}

/* --- C. Embroidered icons: never oversized; decorative ones dropped where they crowd the layout --- */
@media (max-width: 1099.98px) {
  main :is(img.dot-icon, svg.dot-icon, img.hp-icon, .dd-icon, img.it2-helm, img.mu-anchor) {
    width: clamp(84px, 30vw, 124px) !important; max-width: 124px !important; height: auto !important; aspect-ratio: auto;
  }
  main svg.dot-icon, main svg.dd-icon { height: clamp(60px, 18vw, 80px) !important; width: clamp(60px, 18vw, 80px) !important; }
  .px-rg main .dot-icon, .px-rg main .dd-icon { display: none !important; }
}

/* --- D. Handwritten (Have Heart Two) type: one mobile scale --- */
@media (max-width: 1099.98px) {
  /* subtitles, taglines, captions, eyebrows */
  :is(.hp-family__script, .hp-dive__photo figcaption, .hp-dive__caption-out, .hp-safety__title,
      .xp-hero__subtitle, .xp-diving__tagline, .xp-gastro__photo-quote, .xp-hotel__caption, .xp-beyond__eyebrow, .xp-make__eyebrow, .xp-included h3,
      .dd-groups__stats p, .dd-built__caption, .dd-underwater__caption, .dd-philosophy__cell h3,
      .sf-tag, .gb-hero__subtitle, .gb-forest__caption, .gb-promise__caption, .gb-promise__item h3, .dst-hero__subtitle,
      .rg-hero__sub, .rg-key__subname, .rg-ow__caption, .it2-hero__sub, .it2-step__sub, .it2-band__sub,
      .mu-tag, .mu-date, .mu-end, .nw-hero__sub, .cb-cabin__annotation) {
    font-size: 20px !important; line-height: 1.3 !important; letter-spacing: 0.03em;
  }
  .hp-dive__photo figcaption { font-size: 17px !important; }
  /* script section titles sit one step above */
  :is(.hp-eyebrow-script, .tbp-figures h2, .tbp-glance h2, .tbp-life__copy h2, .xp-lifebetween__title, .gb-promise__intro h2,
      .xp-closing h2, .dd-closing h2, .gb-closing h2, .rg-closing h2) {
    font-size: 24px !important; line-height: 1.25 !important;
  }
  .bk-label { font-size: 18px !important; }
  .rg-key__sheet h3 { font-size: 15px !important; }
  .rg-key .rg-key__sheet p { font-size: 14px !important; line-height: 1.45 !important; }
  .px-rg .rg-quote__card p { font-size: 15px !important; line-height: 1.6 !important; }
  .xp-gastro__q h3 { font-size: 15px !important; } .xp-gastro__q p { font-size: 13px !important; }
}

/* --- E. Images: ratio kept, never wider than the screen --- */
@media (max-width: 1099.98px) {
  main img { max-width: 100%; }
  main figure:not([class*=collage] > figure) { max-width: 100%; }
}

/* --- F. Photo collages: the desktop 240px bottom margin is dropped; one comfortable gap instead --- */
@media (max-width: 1099.98px) {
  :is(.tbp-intro__collage, .cb-hero__collage, .dd-hero__collage, .gb-hero__collage) { margin-bottom: clamp(2.5rem, 8vw, 3.5rem) !important; min-height: 0 !important; }
}

/* --- G. Section rhythm on phones --- */
@media (max-width: 1099.98px) {
  main :is(h1, h2) + :is(p, .p) { margin-top: 0; }
  main .link-arrow { margin-top: 0.5rem; }
}

/* =========================================================================
   MOBILE V2 — THE BOAT
   ========================================================================= */
@media (max-width: 1099.98px) {
  /* Outdoor: photo, plan (bigger, own crop), then text. Indoor: plan first, then text. */
  .tbp-fullbleed > .tbp-stage { display: flex; flex-direction: column; padding-block: 56px 40px; gap: 28px; }
  .tbp-fullbleed__photo, .tbp-fullbleed__photo--full-right { margin: 0 !important; }
  .tbp-fullbleed__photo--tl { order: 1; }
  .tbp-fullbleed__photo--br { order: 2; }
  .tbp-fullbleed__copy { order: 3; padding-bottom: 0 !important; }
  .tbp-fullbleed--indoor .tbp-fullbleed__photo--full-right { order: 1; }
  .tbp-fullbleed--indoor .tbp-fullbleed__copy { order: 2; }
  .tbp-page .tbp-fullbleed__photo--br, .tbp-page .tbp-fullbleed__photo--full-right {
    aspect-ratio: auto !important; width: calc(100% - 2 * var(--gutter)) !important; max-width: 520px; margin-inline: auto !important; overflow: visible; box-shadow: none;
  }
  .tbp-page .tbp-fullbleed__photo--br img, .tbp-page .tbp-fullbleed__photo--full-right img {
    transform: none !important; width: 100% !important; height: auto !important; object-fit: contain !important;
  }
  .tbp-page .tbp-fullbleed__photo--full-right img { max-width: 360px; margin-inline: auto; display: block; }
  .tbp-intro__copy { padding-inline: var(--gutter); }
}

/* =========================================================================
   MOBILE V2 — CABINS
   ========================================================================= */
@media (max-width: 1099.98px) {
  /* hero: title, then the two-photo collage centred, with air above and below */
  .cb-page .cb-hero { padding-bottom: 8px; }
  .cb-page .cb-hero h1 { margin: 12px 0 28px; }
  .cb-page .cb-hero__collage { max-width: 340px; margin-inline: auto; }
  /* amenities in the handwritten face, like desktop */
  .cb-page .cb-return__script { font-family: var(--font-script) !important; font-weight: 700; font-size: 20px !important; line-height: 1.35; letter-spacing: 0.03em; color: var(--abyss); margin: 1.5rem auto 0 !important; text-align: center !important; max-width: 320px !important; width: auto !important; }
  .cb-page .cb-return__script--2 { margin-top: 0.75rem !important; }
  /* every cabin: plan first, its handwritten note right under it, then the text */
  .cb-page .cb-cabin__grid { display: flex; flex-direction: column; gap: 36px; }
  .cb-page .cb-cabin__visual { order: -1; display: flex; flex-direction: column; align-items: center; }
  .cb-page .cb-cabin__frame { order: 1; width: 100%; max-width: 330px; }
  .cb-page .cb-cabin__annotation { order: 2; max-width: 300px; margin: 18px auto 0 !important; font-size: 18px !important; line-height: 1.35 !important; }
  .cb-page .cb-cabin__copy { order: 2; }
}

/* =========================================================================
   MOBILE V2 — EXPERIENCE
   ========================================================================= */
@media (max-width: 1099.98px) {
  /* Diving: the tanks icon is bigger and sits on the photo's lower corner */
  .px-xp .xp-diving__visual { position: relative; margin-bottom: 56px; }
  .px-xp .xp-diving__visual > .dot-icon { position: absolute !important; left: auto !important; right: -6px !important; top: auto !important; bottom: -70px !important;
    width: 200px !important; max-width: 200px !important; z-index: 2; }

  /* Gastronomy: title, photo, quote + menu card, then the text */
  .px-xp .xp-gastro .px-stage { display: flex; flex-direction: column; gap: 0; }
  .px-xp .xp-gastro__collage, .px-xp .xp-gastro__copy { display: contents !important; }
  .px-xp .xp-gastro__copy > h2 { order: 1; margin-bottom: 24px !important; }
  .px-xp .xp-gastro__photo { order: 2; }
  .px-xp .xp-gastro__photo-quote { order: 3; margin: 24px auto 0 !important; text-align: center; }
  .px-xp .xp-gastro__menu { order: 4; margin: 20px auto 36px !important; }
  .px-xp .xp-gastro__copy > p { order: 5; margin: 0 0 14px !important; }

  /* Hotel service: separator above, title, photos (with their caption), then the text and services */
  .px-xp .xp-hotel .px-stage { display: flex; flex-direction: column; gap: 0; }
  .px-xp .xp-hotel__copy { display: contents !important; }
  .px-xp .xp-hotel__copy > h2 { order: 1; margin-bottom: 28px !important; }
  .px-xp .xp-hotel__collage { order: 2; margin-bottom: 36px !important; }
  .px-xp .xp-hotel__lead { order: 3; margin-bottom: 28px !important; }
  .px-xp .xp-hotel__item { order: 4; margin-bottom: 18px !important; align-self: stretch; text-align: left; }
  .px-xp .xp-hotel__lead { align-self: stretch; }

  /* Beyond Diving: photo · text · photo, the starfish centred between the activities and the second photo */
  .px-xp .xp-beyond__copy { display: flex; flex-direction: column; align-items: center; text-align: center; margin-block: 40px; }
  .px-xp .xp-beyond .dot-icon { position: static !important; display: block; margin: 12px auto 0 !important; transform: none !important; width: 150px !important; max-width: 150px !important; }
}

/* =========================================================================
   MOBILE V2 — DIVING (dive-deep): every block reads title → text → image(s) → CTA
   ========================================================================= */
@media (max-width: 1099.98px) {
  .px-dd main .px-stage { display: flex; flex-direction: column; }
  .px-dd :is(.dd-newsites__copy, .dd-groups__copy, .dd-groups__visual, .dd-longer__copy, .dd-philosophy__head, .dd-underwater__copy, .dd-underwater__visual) { display: contents !important; }

  /* New sites: photos stay inside the margins (no desktop zoom crop) */
  .px-dd .dd-newsites__photo img { transform: none !important; }
  .px-dd .dd-newsites__photo, .px-dd .dd-newsites__visual { overflow: hidden !important; }
  .px-dd .dd-newsites__visual { overflow: visible !important; margin-top: 32px; }
  .px-dd .dd-newsites__visual > .dot-icon { top: -40px !important; right: -6px !important; left: auto !important; }

  /* Less people, more ocean: title, stats, text, photo, CTA */
  .px-dd .dd-groups h2 { order: 1; }
  .px-dd .dd-groups__stats { order: 2; margin: 4px 0 20px !important; justify-content: flex-start !important; }
  .px-dd .dd-groups__copy > p { order: 3; }
  .px-dd .dd-groups__photo { order: 4; margin-top: 28px !important; }
  .px-dd .dd-groups .link-arrow { order: 5; align-self: flex-start; margin-top: 24px !important; }
  .px-dd .dd-groups .dot-icon { order: 6; align-self: flex-end; margin-top: -40px !important; }

  /* Dive longer: title, intro, photos, the three offers */
  .px-dd .dd-longer h2 { order: 1; }
  .px-dd .dd-longer__copy > p { order: 2; margin-bottom: 32px !important; }
  .px-dd .dd-longer__visual { order: 3; margin-bottom: 40px; }
  .px-dd .dd-longer__item { order: 4; }
  .px-dd .dd-longer .dot-icon { order: 5; align-self: center; }

  /* Philosophy: title, text, photo, the five ideas */
  .px-dd .dd-philosophy h2 { order: 1; }
  .px-dd .dd-philosophy__head > p { order: 2; margin-bottom: 28px !important; }
  .px-dd .dd-philosophy__photo { order: 3; margin-bottom: 36px !important; aspect-ratio: 4 / 3 !important; height: auto !important; }
  .px-dd .dd-philosophy__grid { order: 4; gap: 28px !important; }

  /* Underwater world: photo + caption, text, CTA, photo */
  .px-dd .dd-underwater__visual > .dd-underwater__photo { order: 1; }
  .px-dd .dd-underwater__caption { order: 2; margin: 14px 0 32px !important; }
  .px-dd .dd-underwater h2 { order: 3; }
  .px-dd .dd-underwater__copy > p { order: 4; }
  .px-dd .dd-underwater .link-arrow { order: 5; align-self: flex-start; margin-top: 24px !important; }
  .px-dd .dd-underwater .dot-icon { display: none !important; }
  .px-dd .dd-underwater__photo--r { order: 6; margin-top: 40px !important; }

  /* Ready for your next descent: clean separator above */
  .px-dd .dd-closing { padding-top: 56px !important; }
}
@media (max-width: 1099.98px) {
  .px-dd main .px-stage { align-items: stretch; }
  .px-dd main .px-stage :is(h2.p, .dd-built__head h2) { margin: 0 0 18px !important; width: auto !important; }
  .px-dd :is(.dd-newsites, .dd-groups, .dd-underwater, .dd-built) :is(h2, p, .dd-groups__stats) { text-align: left !important; }
  .px-dd :is(.dd-longer, .dd-philosophy) :is(h2, p, h3) { text-align: center !important; }
  .px-dd .dd-newsites__copy > p, .px-dd .dd-groups__copy > p, .px-dd .dd-underwater__copy > p { margin: 0 !important; }
  .px-dd .dd-groups__stats { padding: 0 !important; }
  .px-dd .dd-groups__stats p { text-align: left !important; }
}

/* =========================================================================
   MOBILE V2 — DESTINATIONS
   ========================================================================= */
@media (max-width: 1099.98px) {
  .px-ds .ds-hero { padding: 40px 0 28px !important; height: auto !important; }
  .px-ds .ds-hero h1 { text-align: center !important; margin: 0 0 16px !important; }
  .px-ds .dst-hero__subtitle { text-align: center !important; }
  .px-ds .dst-map { margin-bottom: 40px !important; }
  .px-ds .dst-regions h2 { text-align: center !important; margin: 0 0 48px !important; }
  /* each region: stamp, name, text, CTA — centred, with a generous gap between regions */
  .px-ds .dst-region { display: flex !important; flex-direction: column; align-items: center; text-align: center; margin: 0 0 72px !important; }
  .px-ds .dst-region:last-child { margin-bottom: 8px !important; }
  .px-ds .dst-region__stamp { order: -1; margin: 0 auto 24px !important; width: min(100%, 320px) !important; }
  .px-ds .dst-region__copy { display: flex !important; flex-direction: column; align-items: center; }
  .px-ds .dst-region__copy :is(h3, p) { text-align: center !important; margin-inline: auto !important; }
  .px-ds .dst-region__copy h3 { margin-bottom: 14px !important; }
  .px-ds .dst-region__copy p { margin-bottom: 10px !important; }
  .px-ds .dst-region__copy .link-arrow { margin: 14px auto 0 !important; }
}

/* Map pop-up on phones: always centred under the map, whichever side it opens from on desktop */
@media (max-width: 700px) {
  .dst-map__panel, .dst-map__panel.is-right {
    position: relative !important; left: 0 !important; right: 0 !important; top: auto !important; transform: none !important;
    width: auto !important; max-width: 420px; margin: 16px auto 24px !important; box-sizing: border-box;
  }
  .dst-map { padding-inline: 16px; box-sizing: border-box; }
  .dst-map__stage { margin-inline: -16px; width: calc(100% + 32px) !important; max-width: none !important; }
  .dst-map__close { width: 40px; height: 40px; }
}

/* =========================================================================
   MOBILE V2 — REGIONS (Banda Sea, Sulawesi, Moluccas, Papua, Sunda Islands)
   ========================================================================= */
@media (max-width: 1099.98px) {
  .px-rg main .px-stage { display: flex; flex-direction: column; }
  .px-rg main :is(h1, h2, h3, p):not(.rg-key__sheet *) { text-align: center !important; margin-inline: auto; }
  .px-rg main p:not(.rg-key__sheet *) { text-align: center !important; }
  .px-rg main .link-arrow { align-self: center; margin-inline: auto !important; }
  .px-rg main figure picture { display: block; height: 100%; }
  .px-rg main figure img { width: 100%; height: 100%; object-fit: cover; }

  /* hero */
  .px-rg .rg-hero__sub { margin: 10px auto 0 !important; }
  .px-rg .rg-hero__photo { aspect-ratio: 4 / 3 !important; height: auto !important; margin: 8px 0 28px !important; }

  /* key infos: paper note, title, subregions, then the four photos as a 2 × 2 grid */
  .px-rg .rg-key .px-stage { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
  .px-rg .rg-key .px-stage > :not(.rg-key__thumb) { grid-column: 1 / -1; }
  .px-rg .rg-key h2 { margin: 36px auto 16px !important; }
  .px-rg .rg-key__right { position: static !important; inset: auto !important; top: auto !important; margin: 0 0 32px !important; }
  .px-rg .rg-key__thumb { margin: 0 !important; aspect-ratio: 4 / 5 !important; height: auto !important; width: 100% !important; }

  /* text ↔ photo blocks: comfortable gaps, single photos at a normal 4:3 */
  .px-rg :is(.rg-ow, .rg-why, .rg-t1, .rg-t2, .rg-t3, .rg-t4, .rg-t5, .rg-extra) .px-stage { gap: 32px; }
  .px-rg :is(.rg-why__visual, .rg-why__copy, .rg-t__copy, .rg-ow__copy) { display: flex !important; flex-direction: column; gap: 16px; }
  .px-rg :is(.rg-why__photo, .rg-t__photo, .rg-ow__grid > figure) { aspect-ratio: 4 / 3 !important; height: auto !important; width: 100% !important; margin: 0 !important; }
  .px-rg :is(.rg-why__copy, .rg-t__copy, .rg-ow__copy, .rg-ow__grid) p { text-align: center !important; max-width: 34em; }

  /* alternate photo-first / text-first down the page (the 3-part photo · text · photo block keeps its order) */
  .px-rg :is(.rg-why, .rg-t2, .rg-t3, .rg-t4, .rg-t5, .rg-extra) :is(.rg-why__visual, .rg-t__photo) { order: -1; }
  .px-rg :is(.rg-why, .rg-t2, .rg-t3, .rg-t4, .rg-t5, .rg-extra):nth-of-type(odd) :is(.rg-why__visual, .rg-t__photo) { order: 2; }

  /* two photos framing a text (Open Water): a small side-by-side pair under the text, no overlaid caption */
  .px-rg .rg-ow__visual { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
  .px-rg .rg-ow__visual > figure { aspect-ratio: 4 / 5 !important; height: auto !important; width: 100% !important; margin: 0 !important; }
  .px-rg .rg-ow__caption { display: none !important; }

  /* quote card */
  .px-rg .rg-quote__card { padding: 28px 22px !important; }

  /* explore other regions: a swipeable slider, one stamp and a peek of the next */
  .px-rg .rg-others .px-stage { align-items: center; }
  .px-rg .rg-others__track { position: static !important; width: calc(100% + 2 * var(--gutter)) !important; margin: 28px calc(-1 * var(--gutter)) 0 !important; height: auto !important;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px var(--gutter) 12px; box-sizing: border-box; scroll-padding-inline: var(--gutter); }
  .px-rg .rg-others__track::-webkit-scrollbar { display: none; }
  .px-rg .rg-others__track ul { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; width: max-content; }
  .px-rg .rg-others__track li { flex: 0 0 76vw; max-width: 320px; scroll-snap-align: center; }
  .px-rg .rg-others__track .rg-others__card { display: block; }
  .px-rg .rg-others__track .rg-stamp { position: static !important; width: 100% !important; height: auto !important; aspect-ratio: 297 / 210; padding: 0 !important; }
  .px-rg .rg-others__track .rg-stamp img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .px-rg .rg-others__arrow { position: static !important; width: 44px !important; height: 44px !important; margin: 16px auto 0 !important; padding: 0 !important;
    background: none; border: 1px solid var(--sea-foam); border-radius: 50%; color: var(--sea-foam); display: grid; place-items: center; }
  .px-rg .rg-others__arrow svg { width: 14px !important; height: 22px !important; }
  .px-rg .rg-others__arrow svg path { stroke-width: 2.6px !important; }

  /* closing */
  .px-rg .rg-closing { padding: 56px 0 64px !important; height: auto !important; }
  .px-rg .rg-closing .px-stage { gap: 14px; }
}
@media (max-width: 1099.98px) {
  .px-rg main :is(h1, h2, h3) { white-space: normal !important; max-width: 100%; }
  .px-rg .rg-key__right > p:not(.rg-key__label):not(.rg-key__subname) { margin: 0 0 20px !important; }
  .px-rg .rg-key__right { gap: 0 !important; justify-content: flex-start !important; }
}
@media (max-width: 1099.98px) { .px-rg main figure img { transform: none !important; } .px-rg main figure { overflow: hidden; } }

/* =========================================================================
   MOBILE V2 — MUSEUM postcards slider (desktop: the wrapper is transparent, positions unchanged)
   ========================================================================= */
.mu-testi-nav { display: none; }
@media (min-width: 1100px) { .px-mu .mu-testi-track { display: contents; } }
@media (max-width: 1099.98px) {
  .px-mu .mu-testi-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 28px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) 20px; scroll-padding-inline: var(--gutter); }
  .px-mu .mu-testi-track::-webkit-scrollbar { display: none; }
  .px-mu .mu-testi-track .mu-testi { flex: 0 0 82%; max-width: 420px; scroll-snap-align: center; position: static !important; width: auto !important; margin: 0 !important; transform: none !important; }
  .px-mu .mu-testi-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
  .px-mu .mu-testi-btn { width: 40px; height: 40px; border: 1px solid var(--open-sea); border-radius: 50%; background: none; color: var(--open-sea); display: grid; place-items: center; padding: 0; cursor: pointer; }
  .px-mu .mu-testi-btn svg { width: 18px; height: 18px; }
  .px-mu .mu-testi-dots { display: flex; gap: 8px; }
  .px-mu .mu-testi-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--sea-foam); cursor: pointer; }
  .px-mu .mu-testi-dots button.is-on { background: var(--open-sea); }
}

/* =========================================================================
   MOBILE V2 — HOMEPAGE: "Explore itineraries" in the display face (as on desktop), CTAs upright
   ========================================================================= */
@media (max-width: 1099.98px) {
  .hp-home .hp-coming-next__head .hp-eyebrow-script { font-family: var(--font-display) !important; font-weight: 600; font-style: normal; font-size: 20px !important; line-height: 1.3 !important; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; }
  .hp-home .hp-coming-next__card p { font-style: normal !important; }
}

/* =========================================================================
   MOBILE V2 — ITINERARIES
   ========================================================================= */
@media (max-width: 1099.98px) {
  /* logbook card: the helm stays inside the screen */
  .px-it2 .it2-helm { width: 54px !important; height: auto !important; margin-left: 0 !important; left: auto !important; right: 12px !important; }
  .px-it2 .it2-sea { overflow: hidden; }
  /* step photos at a readable 4:3, never a thin strip */
  .px-it2 .it2-step__photo { aspect-ratio: 4 / 3 !important; height: auto !important; width: 100% !important; overflow: hidden; }
  .px-it2 .it2-step__photo img { width: 100%; height: 100% !important; object-fit: cover; }
  .px-it2 .it2-step__title { margin-top: 20px !important; }
  /* "No two days…" band: a calm text block — one-line-per-idea, more air, smaller title */
  .px-it2 .it2-band { padding: 56px 0 52px !important; }
  .px-it2 .it2-band .px-stage { max-width: 34em; margin-inline: auto; }
  .px-it2 .it2-band__title { font-size: 22px !important; line-height: 1.3 !important; margin: 0 auto 22px !important; max-width: 16em; }
  .px-it2 .it2-band__text { line-height: 1.75 !important; }
  .px-it2 .it2-band__text br.had { display: block; content: ""; margin-top: 12px; }
  .px-it2 .it2-band__text .br-sp { display: none; }
}

/* =========================================================================
   MOBILE V2 — ENGAGEMENT (giving-back)
   ========================================================================= */
@media (max-width: 1099.98px) {
  .px-gb :is(.gb-forest__photo, .gb-promise__photo) { height: auto !important; aspect-ratio: auto !important; gap: 14px !important; }
  .px-gb :is(.gb-forest__photo, .gb-promise__photo) > picture { aspect-ratio: 4 / 3 !important; height: auto !important; }
  .px-gb .gb-forest .px-stage { display: flex; flex-direction: column; gap: 40px; }
  .px-gb .gb-forest__copy { display: flex !important; flex-direction: column; align-items: center; text-align: center; }
  .px-gb .gb-forest__copy .dot-icon { position: static !important; width: 70px !important; height: 70px !important; margin: 0 auto 18px !important; }
  .px-gb .gb-forest__logo { margin: 28px auto 0 !important; max-width: 260px; }
  .px-gb :is(.gb-forest__caption, .gb-promise__caption) { position: static !important; text-shadow: none !important; transform: none !important; text-align: center !important; }
  .px-gb .gb-forest__caption { color: var(--paper) !important; }
  .px-gb .gb-promise__caption { color: var(--ironwood) !important; }
  .px-gb .gb-promise .px-stage { position: static !important; padding-top: 12px; display: flex; flex-direction: column; gap: 40px; }
  .px-gb .gb-promise { position: relative; padding-top: 80px !important; }
  .px-gb .gb-promise__stripes { top: 0 !important; }
  .px-gb .gb-promise__intro h2 { text-align: center; margin-bottom: 28px !important; }
  .px-gb .gb-promise__item { margin-bottom: 22px !important; }
}

/* =========================================================================
   MOBILE V2 — ABOUT US
   ========================================================================= */
@media (max-width: 1099.98px) {
  .px-ab .ab-w1 .link-arrow { color: var(--paper) !important; }
  .px-ab .ab-quote { padding-block: 48px !important; }
  /* WAOW 2: the two build photos as a small side-by-side pair */
  .px-ab .ab-w2__visual { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
  .px-ab .ab-w2__visual > figure { aspect-ratio: 4 / 5 !important; height: auto !important; width: 100% !important; margin: 0 !important; }
  /* team: one wide group photo, then two portraits side by side */
  .px-ab .ab-team__visual { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
  .px-ab .ab-team__visual > figure { height: auto !important; width: 100% !important; margin: 0 !important; aspect-ratio: 4 / 5 !important; }
  .px-ab .ab-team__visual > figure:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3 !important; }
  .px-ab :is(.ab-w2__visual, .ab-team__visual) img { width: 100%; height: 100%; object-fit: cover; }
}

/* =========================================================================
   MOBILE V2 — NEWS: each event poster with its dates right under it, centred; readable "sea more"
   ========================================================================= */
@media (max-width: 1099.98px) {
  .px-nw .nw-events .px-stage { display: flex !important; flex-direction: column; align-items: center; gap: 0 !important; padding-bottom: 48px; }
  .px-nw .nw-events__title { order: 0; margin-bottom: 28px !important; }
  .px-nw .nw-poster { width: min(260px, 70vw) !important; height: auto !important; aspect-ratio: 250 / 312; }
  .px-nw .nw-poster:nth-of-type(1) { order: 1; }
  .px-nw .nw-poster__cap:nth-of-type(1) { order: 2; margin: 12px 0 36px !important; text-align: center; }
  .px-nw .nw-poster:nth-of-type(2) { order: 3; }
  .px-nw .nw-poster__cap:nth-of-type(2) { order: 4; margin-top: 12px !important; text-align: center; }
  .px-nw .nw-card--a .nw-card__body .link-arrow { color: var(--abyss) !important; }
}
@media (max-width: 1099.98px) { .px-rg .rg-hero__photo img { transform: none !important; } .px-rg .rg-hero__photo { overflow: hidden; } }

/* Tablet (768–1099): same flow as phones, kept to a readable column */
@media (min-width: 768px) and (max-width: 1099.98px) {
  main .px-stage, main .tbp-stage, main .cb-stage, main .container { max-width: 680px; margin-inline: auto; }
  .px-rg .rg-key__thumb { aspect-ratio: 4 / 5 !important; }
}

/* Phones: logo + EN|FR|DE + Rates & Dates + burger all fit on one row down to 360px */
@media (max-width: 479.98px) {
  .site-header__row { gap: 6px !important; padding-inline: 14px !important; }
  .logo img { height: 22px !important; width: auto !important; }
  .site-header__actions .btn { padding: 0.45em 0.5em !important; font-size: 0.56rem !important; letter-spacing: 0.03em !important; }
  .site-header__row > .lang-switch { margin-right: 2px; }
  .burger { flex: 0 0 auto; margin-left: 0 !important; }
}

/* --- Mobile only: bolder striped band behind the top of the photos (sections that open on photos; text-first sections keep the thin band) --- */
@media (max-width: 1099.98px) {
  :is(.hp-boat, .tbp-divers, .rg-t2) { isolation: isolate; }
  .hp-boat__stripes, .tbp-divers__stripes, .rg-t2__stripes { height: 260px !important; z-index: -1 !important; }
  .hp-boat__stripes { background-image: repeating-linear-gradient(180deg, color-mix(in srgb, var(--sea-foam) 70%, var(--bg-page)) 0 7px, var(--bg-page) 7px 14px) !important; }
  .tbp-divers__stripes { background-image: repeating-linear-gradient(180deg, color-mix(in srgb, var(--sea-foam) 70%, var(--bg-page)) 0 7px, var(--bg-page) 7px 14px) !important; }
  .rg-t2__stripes { background-image: repeating-linear-gradient(180deg, var(--sea-foam) 0 7px, var(--abyss) 7px 14px) !important; }
}

/* About Us (mobile): the lower-right photo is moved down inside its frame so both faces stay in view. */
@media (max-width: 1099.98px) {
  .px-ab .ab-hero__collage > figure:nth-of-type(2) img { object-position: 50% 0% !important; }
}

/* Homepage family photo (mobile): moved down inside its frame so both faces stay in view. */
@media (max-width: 1099.98px) {
  .hp-family figure img[src*="captain-wheel"] { object-position: 50% 0% !important; }
}

/* Homepage "family" section (mobile): no stripes. */
@media (max-width: 1099.98px) {
  .hp-family__stripes { display: none !important; }
}

/* The Boat hero (mobile): first photo moved right inside its frame so its left part (the bow) shows. */
@media (max-width: 1099.98px) {
  .tbp-page .tbp-intro__photo--a img { object-position: 0% 50% !important; }
}

/* The Boat cabins "sea more" CTA (mobile): centred. */
@media (max-width: 1099.98px) {
  .tbp-page .tbp-cabins__link { position: relative !important; left: auto !important; width: fit-content !important; margin-inline: auto !important; }
}

/* The Boat (mobile): gold double rule between "Thought by and for divers" and "Life at sea". */
@media (max-width: 1099.98px) {
  .tbp-page .tbp-life { position: relative; }
  .tbp-page .tbp-life::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; z-index: 3; pointer-events: none;
    background: linear-gradient(var(--yellaow), var(--yellaow)) top / 100% 1.5px no-repeat, linear-gradient(var(--yellaow), var(--yellaow)) bottom / 100% 1.5px no-repeat;
  }
}

/* Experience hero (mobile): no octopus icon over the first photo. */
@media (max-width: 1099.98px) {
  .px-xp .xp-hero__collage > img.dot-icon[src*="icons-8.webp"], .px-xp img.dot-icon[src="images/icons-8.webp"] { display: none !important; }
}

/* Experience gastronomy (mobile): the menu is the stamp-style picture (EN / FR) instead of the text card. */
@media (max-width: 1099.98px) {
  .px-xp .xp-gastro__menu { background: none !important; box-shadow: none !important; filter: none !important; padding: 0 !important; height: auto !important; min-height: 0 !important; width: min(100%, 340px) !important; }
  .px-xp .xp-gastro__menu::before, .px-xp .xp-gastro__menu::after { display: none !important; }
  .px-xp .xp-gastro__menu > :not(.xp-gastro__menu-img) { display: none !important; }
  .px-xp .xp-gastro__menu .xp-gastro__menu-img { display: block !important; width: 100%; height: auto; margin: 0 auto; border: 0 !important; box-shadow: none !important; background: none !important; filter: drop-shadow(0 6px 10px rgba(16, 35, 63, 0.18)); }
}

/* Experience gastronomy (mobile): "Special diets on request" sits directly under the previous paragraph, left-aligned (as if after a <br>). */
@media (max-width: 1099.98px) {
  .px-xp p.xp-gastro__note.p { text-align: left !important; margin-top: -14px !important; align-self: stretch !important; width: auto !important; }
}

/* Experience hotel service (mobile): no white card behind the caption under the photos. */
@media (max-width: 1099.98px) {
  .px-xp .xp-hotel__caption { background: none !important; box-shadow: none !important; }
}

/* Experience "Beyond diving" (mobile): the kayak photo is cropped from the top so the watermark at its bottom edge falls outside the frame. */
@media (max-width: 1099.98px) {
  .px-xp .xp-beyond__photo--r img { object-position: 50% 0% !important; }
}

/* Experience "What's included" (mobile): no helm icon over the photo. */
@media (max-width: 1099.98px) {
  .px-xp img.dot-icon[src$="icons-4.webp"] { display: none !important; }
}

/* Dive Deep "New sites" (mobile): no snorkel-mask icon above the photos. */
@media (max-width: 1099.98px) {
  .px-dd img.dot-icon[src$="icons-12.webp"] { display: none !important; }
}

/* Dive Deep "Less people. More ocean." (mobile): the three-line stats become one larger line. */
@media (max-width: 1099.98px) {
  .px-dd .dd-groups__stats p { display: flex !important; flex-wrap: wrap; gap: 0 .45em; margin: 0; font-size: min(26px, 6.6vw) !important; line-height: 1.3 !important; }
  .px-dd .dd-groups__stats p br { display: none !important; }
}

/* Dive Deep "Built for diving" (mobile): no stripes. */
@media (max-width: 1099.98px) {
  .dd-built__stripes { display: none !important; }
}

/* Museum (mobile): the ship icon moves up onto the bottom-left corner of the photo. */
@media (max-width: 1099.98px) {
  .px-mu img.mu-anchor { position: relative; z-index: 3; margin-top: -58px !important; margin-left: -6px !important; }
}

/* Museum "Six years at sea" (mobile): subtitle left-aligned like the text below it. */
@media (max-width: 1099.98px) {
  .px-mu .mu-tag.mu-tag--l { text-align: left !important; align-self: stretch !important; width: auto !important; }
}

/* Region carousels (mobile): the two arrows sit side by side under the posters (left / right), and take no room when hidden. */
@media (max-width: 1099.98px) {
  .px-rg .rg-explore .px-stage, .px-rg .rg-others .px-stage { grid-template-columns: 1fr 1fr; }
  .px-rg :is(.rg-explore, .rg-others) .px-stage > :not(.rgx-arrow):not(.rg-others__arrow) { grid-column: 1 / -1; }
  .px-rg :is(.rgx-arrow, .rg-others__arrow) { margin: 0 !important; width: 34px; height: 48px; }
  .px-rg :is(.rgx-arrow--prev, .rg-others__arrow--prev) { justify-self: start; }
  .px-rg :is(.rgx-arrow, .rg-others__arrow):not(.rgx-arrow--prev):not(.rg-others__arrow--prev) { justify-self: end; }
}

/* Papua hero (mobile): slight zoom from the top so the watermark at the bottom edge is cropped out. */
@media (max-width: 1099.98px) {
  .px-rg-papua .rg-hero__photo { overflow: hidden; }
  .px-rg-papua .rg-hero__photo img { transform: scale(1.12) !important; transform-origin: 50% 0% !important; }
}

/* Homepage "A different world, every day" (mobile): larger and tighter. */
@media (max-width: 1099.98px) {
  .hp-dive__photo figcaption { font-size: 27px !important; line-height: 1.1 !important; bottom: 8px !important; }
  .hp-dive__col .hp-dive__caption-out { font-size: 27px !important; line-height: 1.1 !important; margin-top: 2px !important; }
}

/* Dive Deep "Less people, more ocean" (mobile): the scuba icon is larger and sits on the photo's bottom-right corner. */
@media (max-width: 1099.98px) {
  .px-dd .dd-groups .dd-groups__copy > img.dot-icon { order: 4 !important; align-self: flex-end !important; width: 170px !important; max-width: none !important; margin: -96px -8px 0 0 !important; position: relative; z-index: 3; }
  .px-dd .dd-groups .link-arrow { order: 5; margin-top: 40px !important; }
}

/* Dive Deep "The best part is below." (mobile): larger and centred. */
@media (max-width: 1099.98px) {
  .px-dd .dd-underwater p.dd-underwater__caption { text-align: center !important; font-size: 28px !important; line-height: 1.25 !important; align-self: stretch; width: auto !important; }
}

/* Dive Deep "Safety first" (mobile): octopus on the photo's bottom-right corner, larger title. */
@media (max-width: 1099.98px) {
  .px-dd .hp-safety__grid > img.dot-icon { align-self: flex-end !important; width: 150px !important; max-width: none !important; margin: -84px -8px 0 0 !important; position: relative; z-index: 3; }
  .px-dd .hp-safety p.hp-safety__title { font-size: 28px !important; line-height: 1.25 !important; }
}

/* The Boat hero (mobile): the two photos swap stacking order (first photo on top). */
@media (max-width: 1099.98px) {
  .tbp-page .tbp-intro__collage > figure:nth-of-type(1) { z-index: 3 !important; }
  .tbp-page .tbp-intro__collage > figure:nth-of-type(2) { z-index: 2 !important; }
}

/* The Boat hero (mobile): second photo shifted so the boat sits on the right of the frame. */
@media (max-width: 1099.98px) {
  .tbp-page .tbp-intro__collage > figure:nth-of-type(2) img { object-position: 25% 50% !important; }
}

/* The Boat outdoor / indoor (mobile): photo, outdoor text, boat plan, indoor text, cabin plan. */
@media (max-width: 1099.98px) {
  .tbp-page .tbp-fullbleed .tbp-fullbleed__photo--tl { order: 1; }
  .tbp-page .tbp-fullbleed .tbp-fullbleed__copy { order: 2; }
  .tbp-page .tbp-fullbleed .tbp-fullbleed__photo--br { order: 3; }
  .tbp-page .tbp-fullbleed--indoor .tbp-fullbleed__copy { order: 1; }
  .tbp-page .tbp-fullbleed--indoor .tbp-fullbleed__photo--full-right { order: 2; }
}

/* The Boat outdoor (mobile): more room between the outdoor text and the boat plan. */
@media (max-width: 1099.98px) {
  .tbp-page .tbp-fullbleed .tbp-fullbleed__photo--br { margin-top: 40px !important; }
}

/* Cabins (mobile): round black dots between the items of each script annotation. */
@media (max-width: 1099.98px) {
  .cb-cabin__annotation .br-sp::before { content: "\25CF"; display: inline-block; font-size: .5em; line-height: 1; vertical-align: .22em; margin: 0 .3em 0 .7em; color: #000; }
}

/* Experience "Beyond diving" (mobile): more room between the text and the list of activities. */
@media (max-width: 1099.98px) {
  .px-xp .xp-beyond__tag:first-of-type { margin-top: 32px !important; }
}

/* Dive Deep "New sites" (mobile): the two photos swap stacking order; the left one is zoomed from the top so the credit at its bottom edge is cropped out. */
@media (max-width: 1099.98px) {
  .px-dd .dd-newsites__visual > figure:nth-of-type(1) { z-index: 3 !important; }
  .px-dd .dd-newsites__visual > figure:nth-of-type(2) { z-index: 2 !important; }
  .px-dd .dd-newsites__visual > figure:nth-of-type(1) img { transform: scale(1.16) !important; transform-origin: 50% 0% !important; }
  .px-dd .dd-newsites__visual > figure:nth-of-type(1) { overflow: hidden !important; }
}

/* Dive Deep stats (mobile): bullets between the items instead of full stops. */
@media (max-width: 1099.98px) {
  .px-dd .dd-groups__stats .st-dot { display: none; }
  .px-dd .dd-groups__stats .st-i ~ .st-i::before { content: "\2022"; margin-right: .45em; color: var(--abyss); }
}
@media (max-width: 1099.98px) {
  .px-dd .dd-groups__stats p { font-size: min(23px, 5.8vw) !important; gap: 0 .35em; }
}

/* Dive Deep "Built for diving" (mobile): photo cropped towards the bottom so the divers are fully in frame. */
@media (max-width: 1099.98px) {
  .px-dd .dd-built__photo img { object-position: 50% 100% !important; }
}

/* About Us "WAOW" (mobile): photo cropped towards the bottom so the hull is fully in frame. */
@media (max-width: 1099.98px) {
  .px-ab .ab-w1__photo img { object-position: 50% 100% !important; }
}

/* About Us team (mobile): the top group photo is moved down in its frame so all the faces are fully in view. */
@media (max-width: 1099.98px) {
  .px-ab .ab-team__photo:first-of-type img { object-position: 50% 15% !important; }
}

/* ---- Rates & Dates (booking) on phones: clean stack, countdown on a single line ---- */
@media (max-width: 1099.98px) {
  .px-bk main .px-stage { display: flex !important; flex-direction: column; align-items: center; text-align: center; padding: 28px var(--gutter) 48px !important; gap: 0 !important; }
  .px-bk .bk-hero { padding-block: 0 !important; }
  .px-bk .bk-hero h1.p { font-size: 34px !important; line-height: 1.12 !important; margin: 8px 0 22px !important; text-align: center !important; }
  .px-bk .bk-hero__lead, .px-bk .bk-countdown-head, .px-bk .bk-closing { display: flex !important; flex-direction: column; align-items: center; width: 100%; }
  .px-bk .bk-hero__lead p.p { font-size: 15px !important; line-height: 1.55 !important; margin: 0 0 8px !important; text-align: center !important; width: auto !important; max-width: 34ch; }
  .px-bk .bk-hero__lead p.p:nth-child(2)::after { content: "."; }
  .px-bk .bk-hero__lead p.p:nth-child(3) { display: none !important; }
  .px-bk .bk-countdown-head h2.p { font-size: 22px !important; line-height: 1.2 !important; margin: 34px 0 18px !important; text-align: center !important; width: auto !important; }
  .px-bk .bk-countdown { display: flex !important; flex-wrap: nowrap !important; justify-content: center; align-items: flex-start; gap: 0 !important; width: 100%; max-width: none !important; margin: 0 auto !important; }
  .px-bk .bk-col.p { flex: 0 0 auto !important; width: auto !important; min-width: 0; padding: 0 !important; display: flex; flex-direction: column; align-items: center; }
  .px-bk .bk-num { font-size: min(27px, 6.9vw) !important; line-height: 1.1 !important; }
  .px-bk .bk-label.px-annot { font-size: 12px !important; line-height: 1.2 !important; margin-top: 10px !important; letter-spacing: .02em; }
  .px-bk .bk-sep.p, .px-bk .bk-sep--rowbreak.p { display: flex !important; flex: 0 0 auto !important; width: 9px !important; height: 32px !important; margin: 2px 9px 0 !important; align-self: flex-start; justify-content: space-between; }
  .px-bk .bk-sep span { width: 2.5px !important; }
  .px-bk .bk-closing p.p { font-size: 15px !important; line-height: 1.55 !important; margin: 40px 0 14px !important; text-align: center !important; width: auto !important; max-width: 34ch; }
  .px-bk .bk-newsletter-link.p { margin: 0 !important; width: auto !important; text-align: center !important; }
}

/* Papua "The center of everything" (mobile): one flowing, centred paragraph. */
@media (max-width: 1099.98px) {
  .px-rg .papua-cols { column-count: 1 !important; column-gap: normal !important; height: auto !important; text-align: center !important; text-align-last: auto !important; }
}

/* Sunda Islands (mobile): the Bali myna photo is cropped so the bird sits in the centre of its frame. */
@media (max-width: 1099.98px) {
  .px-rg-sunda-islands .rg-ow__photo--l img { object-position: 90% 50% !important; }
}

/* Itinerary band with photo (mobile): room between the photo and the title, and a bit more padding all round. */
@media (max-width: 1099.98px) {
  .px-it2 .it2-band__photo { margin: 0 0 28px !important; }
  .px-it2 .it2-band { padding: 40px 0 56px !important; }
}

/* Homepage itineraries carousel (mobile): the card CTA is uppercase and underlined like the other CTAs. */
@media (max-width: 1099.98px) {
  .hp-home .hp-coming-next__card p { text-transform: uppercase !important; letter-spacing: .08em; font-size: 14px !important; text-decoration: underline !important; text-underline-offset: 6px; text-decoration-thickness: 1px !important; width: fit-content !important; margin: 14px auto 0 !important; text-align: center !important; }
}

/* Region pages (mobile): body paragraphs are centred, including their last line (desktop rules right-align it). */
@media (max-width: 1099.98px) {
  .px-rg main p.p, .px-rg main .rg-t__copy p, .px-rg main .rg-why__copy p { text-align: center !important; text-align-last: center !important; hyphens: manual; }
}

/* Itinerary notebook (mobile): the corner icon is larger and sits on the notebook's top-right corner. */
@media (max-width: 1099.98px) {
  .px-it2 .it2-sea .it2-helm { width: 96px !important; height: auto !important; right: 14px !important; margin-top: -486px !important; z-index: 4; }
}

/* Collages (mobile): the overlap no longer relies on a negative percentage margin (browsers resolve percentage margins on grid items differently, which made the second photo spill over the text on some phones). The second photo is nudged down with a transform, which never changes the layout; the collage reserves the room with padding. */
@media (max-width: 1099.98px) {
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) > figure:nth-of-type(2) {
    margin-bottom: 0 !important; transform: translateY(11.5%) !important; grid-row: 1 / 2 !important; align-self: end !important;
  }
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) {
    padding-bottom: 14% !important; grid-template-rows: auto !important;
  }
}

/* Collages (mobile), robust version: no grid placement at all. The first photo is a normal block, the second is absolutely positioned on its bottom-right corner; the collage reserves the room with padding. Same result in every browser engine. */
@media (max-width: 1099.98px) {
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) {
    display: block !important; position: relative; padding-bottom: 14% !important;
  }
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) > figure:nth-of-type(1) {
    width: 66.667% !important; margin: 0 !important; transform: none !important;
  }
  :is(.hp-intro__visual, .hp-boat__collage, .tbp-intro__collage, .cb-hero__collage, .cb-return__collage, .xp-hero__collage,
      .dd-hero__collage, .gb-hero__collage, .px-ab .ab-hero__collage, .tbp-divers__collage, .xp-hotel__collage, .dd-newsites__visual, .dd-longer__visual) > figure:nth-of-type(2) {
    position: absolute !important; right: 0 !important; left: auto !important; top: auto !important; bottom: 7% !important;
    width: 58.333% !important; margin: 0 !important; transform: none !important;
  }
  .cb-hero__collage > figure:nth-of-type(1) { width: 75% !important; }
  .cb-hero__collage > figure:nth-of-type(2) { width: 66.667% !important; }
}