/*
 * Redesign layer. Loaded last on every page, after site-fixes.css.
 *
 * Restyles the Webflow export without touching its HTML, copy or IX2
 * interactions: same sections, same order, same words. What changes is
 * the type system, palette, spacing, surfaces and motion.
 *
 * Direction ("postcard from Bonaire"), drawn from the design-miner
 * references:
 *   - the island's own colours (Tengile, Terreno): sun-bleached sand,
 *     deep lagoon green, the Lady Bellaïs hull coral, a flamingo blush
 *     and a little sun yellow, used sparingly
 *   - the hero and closing photo sit in a rounded frame inset from the
 *     page edge, like a printed postcard (Seasats, Terreno)
 *   - a soft, warm display serif with italic accents (The Drake), quiet
 *     sans for reading, small tracked mono labels (White Desert)
 *   - editorial calm between the photos (The Reach)
 *   - a hull-red footer that ends on the boat's name, set to fit
 *
 *   Display   Fraunces (opsz 144, soft)
 *   Text/UI   Instrument Sans
 *   Labels    DM Mono           11-12px uppercase, tracked out
 *
 * Remove the <link> to this file and the site is exactly as it was.
 */

/* Fonts are self-hosted (SIL Open Font License) and the three that set
 * the first screen are preloaded from each page's <head>. Loading them
 * from Google through an @import here meant the page painted in the
 * fallback face first and then visibly swapped, most noticeably as the
 * page transition lifted. */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/fraunces-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/fraunces-italic-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/instrument-sans-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/instrument-sans-italic-var.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/dm-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/dm-mono-500.woff2') format('woff2');
}

:root {
  /* palette: sand, lagoon, hull coral, flamingo, sun */
  --sand: #f4ecdf;
  --sand-2: #ebdfcb;
  --shell: #fbf7f0;
  --ink: #0f2a2a;
  --ink-2: #3b5150;
  --ink-3: #7f8e8b;
  --rule: #0f2a2a1f;
  --coral: #cf4a2f;
  --coral-deep: #a8361f;
  --flamingo: #f3b4a6;
  --sun: #f2c14e;
  --lagoon: #0c3f3d;
  --lagoon-2: #145a56;
  --turq: #7fd3c7;
  /* the hull red, deep enough to carry sand type: footer, menu, loading */
  --hull: #6f1f13;
  --hull-2: #962c1b;
  --foam: #f4ecdfd9;
  --foam-3: #f4ecdf2e;

  /* the Webflow tokens, remapped */
  --black: var(--ink);
  --white: var(--sand);
  --primary: var(--coral);
  --secondary: var(--coral);
  --paragraph: var(--ink-2);
  --border: var(--rule);

  --f-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-text: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* fluid scale: the hero is poster-sized, ~7x body */
  --t-hero: clamp(2.75rem, 1rem + 5.2vw, 7rem);
  --t-mega: clamp(2.75rem, .8rem + 5.6vw, 7.25rem);
  --t-h1: clamp(2.375rem, 1.2rem + 3.6vw, 5.25rem);
  --t-h2: clamp(2.125rem, 1.25rem + 2.8vw, 4.5rem);
  --t-h3: clamp(1.375rem, 1.15rem + .8vw, 2rem);
  --t-body: clamp(1rem, .97rem + .12vw, 1.0625rem);
  --t-small: .9375rem;
  --t-label: .6875rem;

  --space-section: clamp(4rem, 2.5rem + 4.5vw, 8rem);
  --frame: clamp(6px, 1vw, 14px);
  --radius: 14px;
  --radius-media: 18px;
  --radius-frame: clamp(14px, 2vw, 28px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- font remap ----------
 * Every Webflow class that named Poppins, Arial, Lato, Montserrat or a
 * system stack now gets the text face; every one that named Forum or
 * Cormorant gets the display face. Rules further down refine the roles. */

.nav-link, .card-summary, .heading-5, .heading-6, .title-small,
.timeline_date-text, .nav-dropdown_text, .link, .logo-text, .text-block-8,
.text-block-9, .paragraph-3, .secondary-btn-text, .text-block-10,
.secondary-btn-text-2, .text-block-11, .text-block-12, .text-block-13,
.heading-10, .paragraph-4, .heading-11, .text-field, .nav-link-block,
.locale-link, .nav__llnk, .nav-link_logo, .dropdown-text, .heading-4-copy,
.paragraph-6, .heading-12, .paragraph.hero, .timeline_text, .paragraph.body,
.button-primary, .spark-section {
  font-family: var(--f-text);
}

.bold-text-2,
.heading-7 {
  font-family: var(--f-display);
  font-weight: 350;
}

/* ---------- base ---------- */

/* the tilted photos on the tour list poke past the viewport on phones;
   clip (not hidden) so sticky positioning and Lenis are unaffected */
html,
body { overflow-x: clip; }

.body,
body {
  background-color: var(--sand);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper grain: a fixed, non-interactive film of noise over everything,
   so flat fills read as printed card stock rather than screen colour */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--flamingo); color: var(--ink); }

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

p, .paragraph-2 {
  font-family: var(--f-text);
  letter-spacing: 0;
}

.paragraph-2 {
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.62;
  text-wrap: pretty;
}

.paragraph-2.white { color: var(--foam); }

/* ---------- section rhythm ---------- */

/* Webflow fixes every .section at height:100vh and centres its content.
 * Whenever the content is taller than the window (a 768px-high laptop, or
 * simply the larger type here) it spills out of both ends, over the hero
 * above and the heading below. Let sections grow with their content; the
 * heroes keep their own, more specific, height rules. */
.section {
  height: auto;
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}
.section.hero { padding-top: 0; padding-bottom: 0; }
.section.small { padding-top: calc(var(--space-section) * .6); padding-bottom: calc(var(--space-section) * .6); }

/* ---------- display type ---------- */

.hero-heading,
.hero-heading.small,
.hero-heading.bigg {
  max-width: 12em;
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  line-height: .98;
  padding-block: .1em;
  letter-spacing: -.025em;
  text-transform: none;
  text-wrap: balance;
}

.hero-heading.small { font-size: var(--t-h1); max-width: 14ch; line-height: 1; }

/* give the home headline room to run three lines instead of four.
   Webflow places this column with an id-scoped grid-area rule, so only
   !important can widen it from a class selector */
@media screen and (min-width: 992px) {
  .hero-section .heading-left { grid-column: span 7 !important; }
}

.paragraph.hero { max-width: 34rem; line-height: 1.55; }

/* the italic phrase inside the home headline, in the sun's colour */
.text-span-17 {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  text-transform: none;
  letter-spacing: -.02em;
  color: var(--sun);
}

.heading-2,
.heading-3,
.heading-8,
.heading-9,
.tours-card.heading {
  font-family: var(--f-display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: var(--t-h2);
  line-height: 1.02;
  padding-block: .1em;
  letter-spacing: -.022em;
  color: var(--ink);
  text-transform: none;
  text-wrap: balance;
}

/* inline display runs inside a heading (<strong> wrappers) set in italic,
   the way a hand-written postcard underlines the important bit */
.bold-text-2,
.section-tittle .heading-2 { line-height: inherit; padding-block: 0; }
.section-tittle { line-height: 1.02; padding-block: .1em; }
.heading-2 strong,
.bold-text-2 {
  font-style: italic;
  font-weight: 300;
  color: var(--coral);
}

/* review quotes are set in .heading-2.center: large but readable */
.review-block .heading-2,
.heading-2.center {
  font-size: clamp(1.5rem, 1rem + 2vw, 3.25rem);
  font-variation-settings: "opsz" 72, "SOFT" 100;
  line-height: 1.14;
  letter-spacing: -.012em;
}

.review-block .heading-2 strong { color: inherit; font-style: normal; font-weight: inherit; }

.heading-4 {
  font-family: var(--f-text);
  font-weight: 550;
  font-size: 1.0625rem;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ink);
}

.heading-4.white { color: var(--sand); }

/* eyebrow labels ("About us", "Support", "Our tours"...) open on a sun dot */
.sub-heading,
.sub-heading-2 {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--coral);
}

.sub-heading::before,
.sub-heading-2::before {
  content: "";
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-right: .8em;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 .22em #f2c14e40;
  vertical-align: .05em;
}

/* .sub-heading-2 is used on sand ("Support", "Pricing") as well as on the
   dark contact band, so it only turns light where the ground is dark */
.footer .sub-heading-2,
.large-img .sub-heading-2 { color: var(--foam); }

/* counters on the tour list ("001", "2.5 hours") */
.cms-index,
._00 {
  font-family: var(--f-mono);
  font-style: normal;
  font-size: var(--t-label);
  letter-spacing: .12em;
  font-feature-settings: "tnum";
}

.small-text,
.price-text-from-per {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- navigation ----------
 * Over a dark hero the nav is bare type on the photo. Everywhere else it
 * becomes a floating shell-white bar with rounded ends, the same postcard
 * language as the photo frames. The dropdowns and the language menu open
 * as small cards of the same stock. */

/* keep the nav inside the hero's rounded frame */
.nav {
  padding: calc(var(--frame) + .25rem) calc(var(--frame) + 1.25rem) .75rem;
  transition: background-color .6s var(--ease-out), box-shadow .6s var(--ease-out);
}

/* the top bar: no rule under it (the pill below already separates the
   two rows), and set in from the frame's rounded corners so its first and
   last items line up with the logo and the "Book a tour" button below */
.nav-heading {
  border-bottom: 0;
  padding: .55rem .4rem .2rem 1.4rem;
}

@media screen and (max-width: 991px) {
  .nav-heading { padding: .5rem .35rem .15rem 1.1rem; }
}

.nav-heading_left,
.nav-heading_right { align-items: center; }

.nav_wrapper {
  transition: background-color .6s var(--ease-out), box-shadow .6s var(--ease-out), padding .6s var(--ease-out);
}

/* the bar is always a floating pill: dark glass over photos, so its type
   never collides with what is under it, and shell-white over sand */
.nav:not(.menu-open) .nav_wrapper {
  margin-top: .5rem;
  padding: .4rem .4rem .4rem 1.4rem;
  border: 1px solid var(--foam-3);
  border-radius: 999px;
  background-color: #0f2a2a40;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
}

.nav:not(.on-dark):not(.menu-open) .nav_wrapper {
  border-color: var(--rule);
  background-color: #fbf7f0e6;
  box-shadow: 0 14px 34px -22px #0f2a2a66;
}

/* Webflow multiplies the menu into the page, which muddies it on the bar */
.nav-menu { mix-blend-mode: normal; }

.logo,
.nav-link_text,
.dropdown-text,
.gradient-arrow-button,
.nav-link_text_small,
.locale-link { white-space: nowrap; }

/* one size for every top-level item: the dropdown toggles ("Events",
   "Excursions") were set larger than the plain links beside them */
.nav-link_text,
.dropdown-text {
  font-family: var(--f-text);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.005em;
}

/* each link holds its label twice and IX2 slides the stack up on hover,
   so a label's line box must be exactly the link's 2rem height */
.nav-link_text { line-height: 2rem; padding-left: .7rem; padding-right: .7rem; }
.dropdown-text { line-height: 2rem; }
.dropdown-toggle { padding: 0 .7rem; gap: .15rem; }
.dropdown-arrow { width: 16px; height: 16px; opacity: .7; }

/* the page you are on gets a small sun dot under its label. It is painted
   inside each label (the link must keep overflow:hidden for the hover swap) */
.menu-links > .nav-link.w--current .nav-link_text {
  background: radial-gradient(circle at 50% calc(100% - 2px), var(--sun) 2.25px, transparent 2.75px);
}

/* "contact" is lower-case in the copy, unlike its neighbours */
.menu-links > a[href$="#contact"] .nav-link_text { text-transform: capitalize; }

.nav-link_text_small,
.locale-link {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nav__llnk { height: auto; display: flex; align-items: center; }

/* the one filled button in the bar */
.gradient-arrow-button {
  border-radius: 999px;
  background-color: var(--coral);
  background-image: none;
  font-family: var(--f-text);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: .8rem 1.35rem;
  transition: background-color .6s var(--ease-out), transform .6s var(--ease-out);
}

.gradient-arrow-button:hover { background-color: var(--coral-deep); }

/* --- desktop dropdowns (Events, Excursions) as small cards --- */
@media screen and (min-width: 992px) {
  .dropdown-height { margin-left: -.5rem; }

  .collection-list-wrapper-3 {
    width: auto;
    min-width: 15rem;
    padding-top: .9rem;
  }

  .collection-list {
    gap: 0;
    padding: .4rem;
    border: 1px solid var(--rule);
    border-radius: 18px;
    background-color: var(--shell);
    box-shadow: 0 24px 48px -24px #0f2a2a66, 0 2px 6px -2px #0f2a2a1a;
  }

  .collection-list .nav-link.black {
    height: 2.5rem;
    padding: 0 .4rem;
    border-radius: 12px;
    color: var(--ink);
    transition: background-color .35s var(--ease-out), color .35s var(--ease-out);
  }

  .collection-list .nav-link.black .nav-link_text {
    line-height: 2.5rem;
    padding: 0 .5rem;
    font-size: .9375rem;
  }

  .collection-list .nav-link.black:hover,
  .collection-list .nav-link.black:focus-visible {
    background-color: var(--sand);
    color: var(--coral-deep);
  }

  .collection-list .nav-link.black.w--current { color: var(--coral); }

  /* each tour gets its index, the site's editorial numbering, and a coral
     arrow that slides in on hover */
  .collection-list { counter-reset: lb-dd; }
  .collection-list > .collection-item { counter-increment: lb-dd; }

  .collection-list .nav-link.black { position: relative; padding-left: 2.5rem; padding-right: 2.25rem; }

  .collection-list .nav-link.black::before {
    content: counter(lb-dd, decimal-leading-zero);
    position: absolute;
    left: .95rem;
    top: 0;
    font-family: var(--f-mono);
    font-size: var(--t-label);
    letter-spacing: .08em;
    line-height: 2.5rem;
    color: var(--coral);
    opacity: .75;
  }

  .collection-list .nav-link.black::after {
    content: "\2192";
    position: absolute;
    right: .9rem;
    top: 0;
    font-family: var(--f-text);
    line-height: 2.5rem;
    color: var(--coral);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
  }

  .collection-list .nav-link.black:hover::after,
  .collection-list .nav-link.black:focus-visible::after { opacity: 1; transform: none; }

  .collection-list .nav-link.black .nav-link_text { padding: 0; }

  /* the card drops in rather than appearing */
  .dropdown-height .collection-list {
    transform: translateY(-6px);
    opacity: 0;
    transition: transform .45s var(--ease-out), opacity .3s var(--ease-out);
  }
  .dropwdown-wrap:hover .dropdown-height .collection-list,
  .dropwdown-wrap:focus-within .dropdown-height .collection-list { transform: none; opacity: 1; }
}

/* --- language menu: the same card, compact --- */
.language-dropdown { padding: 8px 32px 8px 6px; gap: .45rem; }
.language-dropdown .w-icon-dropdown-toggle { margin-right: 4px; font-size: 12px; }
.image-7 { border-radius: 2px; }

.dropdown-3 .w-dropdown-list.w--open {
  min-width: 12rem;
  padding-top: .5rem;
  background: transparent;
  right: 0;
  left: auto;
}

.locales-list {
  gap: 0;
  padding: .4rem;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background-color: var(--shell);
  box-shadow: 0 24px 48px -24px #0f2a2a66, 0 2px 6px -2px #0f2a2a1a;
}

.locales-list .language-link {
  gap: .7rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  font-family: var(--f-text);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  transition: background-color .35s var(--ease-out);
}

.locales-list .language-link:hover { background-color: var(--sand); }

.locales-list .language-link img { width: 20px; height: auto; }

.locales-list .language-link[aria-current="true"] { font-weight: 600; }
.locales-list .language-link[aria-current="true"]::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--coral);
}

/* --- the top bar: small links that answer the pointer --- */

/* "Since 2023", "Meet the crew", "FAQ": a hairline draws in under the
   words and they warm to sun (over a photo) or coral (over sand) */
.nav-heading .nav-link_text_small {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  padding-bottom: 3px;
  transition: background-size .45s var(--ease-out), color .35s var(--ease-out);
}

a.nav-link_text_small:hover,
a.nav-link_text_small:focus-visible,
.nav__llnk:hover .nav-link_text_small,
.nav__llnk:focus-visible .nav-link_text_small { background-size: 100% 1px; }

.nav.on-dark a.nav-link_text_small:hover,
.nav.on-dark .nav__llnk:hover .nav-link_text_small,
.nav.menu-open a.nav-link_text_small:hover { color: var(--sun); }

.nav:not(.on-dark):not(.menu-open) a.nav-link_text_small:hover,
.nav:not(.on-dark):not(.menu-open) .nav__llnk:hover .nav-link_text_small { color: var(--coral); }

/* the social icons lift a little and take the same accent */
.social-icons-grid.header { opacity: 1; mix-blend-mode: normal; gap: .7rem; }
.social-icons-grid.header > a { display: grid; place-items: center; opacity: .82; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out), color .35s var(--ease-out); }
.social-icons-grid.header > a:hover,
.social-icons-grid.header > a:focus-visible { opacity: 1; transform: translateY(-2px); }
.nav.on-dark .social-icons-grid.header > a:hover,
.nav.menu-open .social-icons-grid.header > a:hover { color: var(--sun); }
.nav:not(.on-dark):not(.menu-open) .social-icons-grid.header > a:hover { color: var(--coral); }

/* --- the language switcher: a small pill, round flags, language codes ---
 * The toggle shows the flag in a circle and the page's language code
 * (EN, DE, ES, NL) instead of the word "Language"; the word stays in the
 * markup for screen readers. The list is a card of native names, each with
 * its code, the current one picked out. */

.language-dropdown {
  gap: .5rem;
  padding: 5px 30px 5px 6px;
  border: 1px solid var(--foam-3);
  border-radius: 999px;
  transition: background-color .35s var(--ease-out), border-color .35s var(--ease-out);
}

.nav:not(.on-dark):not(.menu-open) .language-dropdown { border-color: var(--rule); }

.language-dropdown:hover,
.dropdown-3 .language-dropdown.w--open { background-color: #f4ecdf1f; border-color: #f4ecdf59; }
.nav:not(.on-dark):not(.menu-open) .language-dropdown:hover,
.nav:not(.on-dark):not(.menu-open) .dropdown-3 .language-dropdown.w--open { background-color: var(--shell); border-color: #0f2a2a33; }

.language-dropdown .image-7,
.locales-list .language-link img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px #0f2a2a1f;
}

.language-dropdown .w-icon-dropdown-toggle {
  margin-right: 11px;
  font-size: 10px;
  transition: transform .4s var(--ease-out);
}
.language-dropdown.w--open .w-icon-dropdown-toggle { transform: rotate(180deg); }

/* the word "Language" gives way to the code of the page you are on */
.language-dropdown .locale-link { font-size: 0; letter-spacing: 0; }
.language-dropdown .locale-link::before {
  content: "EN";
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .12em;
}
html[lang^="de"] .language-dropdown .locale-link::before { content: "DE"; }
html[lang^="es"] .language-dropdown .locale-link::before { content: "ES"; }
html[lang^="nl"] .language-dropdown .locale-link::before { content: "NL"; }

/* phones: the top bar holds two links and the pill in ~360px, so the
   gaps and the pill tighten ("Conoce a la tripulación" is long) */
@media screen and (max-width: 479px) {
  .nav-heading_left,
  .nav-heading_right { gap: .9rem; grid-column-gap: .9rem; }
  .nav-heading { padding-left: .8rem; }
  .nav-heading .nav-link_text_small { letter-spacing: .08em; }
  .language-dropdown { gap: .35rem; padding: 3px 22px 3px 4px; }
  .language-dropdown .w-icon-dropdown-toggle { margin-right: 7px; }
  .language-dropdown .image-7 { width: 16px; height: 16px; }
  /* "Since 2023" is decorative (it links nowhere); on a phone it gives its
     room to "Meet the crew" and the language pill in every language */
  .nav-heading_right > a.nav-link_text_small:first-child { display: none; }
}

/* the card drops in */
@keyframes lb-drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.dropdown-3 .w-dropdown-list.w--open { animation: lb-drop-in .35s var(--ease-out) both; }

.locales-list .language-link { gap: .75rem; padding: .6rem .75rem; }

/* each language's code at the right of its row, mono and quiet */
.locales-list .language-link::after,
.locales-list .language-link[aria-current="true"]::after {
  content: attr(hreflang);
  width: auto;
  height: auto;
  margin-left: auto;
  padding-left: 1.25rem;
  border-radius: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.locales-list .language-link[aria-current="true"] { background-color: var(--sand); }
.locales-list .language-link[aria-current="true"]::after { color: var(--coral); }

/* --- laptops: everything on one line, nothing clipped --- */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .nav { padding-left: calc(var(--frame) + .75rem); padding-right: calc(var(--frame) + .75rem); }
  .logo { font-size: 1.6rem; }
  .nav-link_text { padding-left: .45rem; padding-right: .45rem; font-size: .875rem; }
  .dropdown-text { font-size: .875rem; }
  .dropdown-toggle { padding: 0 .45rem; }
  .gradient-arrow-button { padding: .7rem 1.05rem; font-size: .875rem; }
  .nav:not(.menu-open) .nav_wrapper { padding-left: 1.1rem; }
}

/* small laptops: the Spanish labels ("Todos los tours", "Reservar un
   tour") need a little more room still */
@media screen and (min-width: 992px) and (max-width: 1139px) {
  .logo { font-size: 1.4rem; }
  .nav-link_text { padding-left: .34rem; padding-right: .34rem; font-size: .8125rem; }
  .dropdown-text { font-size: .8125rem; }
  .dropdown-toggle { padding: 0 .34rem; }
  .dropdown-arrow { width: 13px; height: 13px; }
  .gradient-arrow-button { padding: .65rem .9rem; font-size: .8125rem; }
  .nav_wrapper { grid-column-gap: 8px; column-gap: 8px; }
}

/* --- phones and tablets: the full-screen menu, in the hull red --- */
@media screen and (max-width: 991px) {
  .nav:not(.menu-open) .nav_wrapper { padding: .35rem .35rem .35rem 1.1rem; }

  .nav-menu {
    align-items: stretch;
    padding: 9rem 1.5rem 3rem;
    background-color: var(--hull);
    background-image: radial-gradient(120% 60% at 100% 0%, var(--hull-2) 0%, transparent 60%);
  }

  .menu-links { align-items: stretch; gap: 0; }

  .menu-links > .nav-link,
  .menu-links > .dropwdown-wrap {
    border-bottom: 1px solid var(--foam-3);
  }

  .menu-links > .nav-link {
    height: 3.75rem;
    align-items: flex-start;
    padding: 0;
    overflow: hidden;
  }

  .menu-links > .nav-link .nav-link_text,
  .menu-links .dropdown-text {
    padding: 0;
    font-family: var(--f-display);
    font-variation-settings: "opsz" 72, "SOFT" 100;
    font-size: 1.875rem;
    font-weight: 350;
    line-height: 3.75rem;
    letter-spacing: -.015em;
    color: var(--sand);
  }

  .menu-links > .nav-link.w--current .nav-link_text { font-style: italic; color: var(--sun); background: none; }

  /* every line of the menu is numbered, like the chapters on a tour page */
  .menu-links { counter-reset: lb-menu; }
  .menu-links > .nav-link,
  .menu-links > .dropwdown-wrap { counter-increment: lb-menu; position: relative; padding-left: 2.6rem; }
  .menu-links > .nav-link::before,
  .menu-links > .dropwdown-wrap::before {
    content: counter(lb-menu, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--f-mono);
    font-size: var(--t-label);
    letter-spacing: .1em;
    line-height: 3.75rem;
    color: var(--sun);
    opacity: .8;
  }

  /* opening the menu: the lines rise in one after another */
  @keyframes lb-menu-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
  }
  .nav-menu.open .menu-links > *:not(.w-embed) { animation: lb-menu-in .7s var(--ease-out) both; }
  .nav-menu.open .menu-links > :nth-child(1) { animation-delay: .08s; }
  .nav-menu.open .menu-links > :nth-child(2) { animation-delay: .13s; }
  .nav-menu.open .menu-links > :nth-child(3) { animation-delay: .18s; }
  .nav-menu.open .menu-links > :nth-child(4) { animation-delay: .23s; }
  .nav-menu.open .menu-links > :nth-child(5) { animation-delay: .28s; }
  .nav-menu.open .menu-links > :nth-child(6) { animation-delay: .33s; }
  .nav-menu.open .menu-links > :nth-child(7) { animation-delay: .38s; }
  .nav-menu.open .menu-links > :nth-child(8) { animation-delay: .43s; }
  .nav-menu.open .menu-links > :nth-child(9) { animation-delay: .48s; }

  /* the boat's name, faint, at the foot of the panel, as in the footer */
  .nav-menu::after {
    content: "Lady Bellaïs";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.12em;
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 300;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    font-size: 24vw;
    line-height: 1;
    letter-spacing: -.035em;
    text-align: center;
    white-space: nowrap;
    color: var(--sand);
    opacity: .06;
    pointer-events: none;
  }

  .dropdown-toggle { justify-content: space-between; padding: 0; height: 3.75rem; }
  .dropdown-arrow { width: 22px; height: 22px; color: var(--sun); opacity: 1; }

  .dropdown-height { margin-left: 0; }
  .collection-list-wrapper-3 { width: 100%; }

  .collection-list {
    align-items: stretch;
    gap: 0;
    margin-left: .25rem;
    padding: 0 0 1rem 1rem;
    border-left: 1px solid #f2c14e66;
    border-radius: 0;
  }

  .collection-list .nav-link.black {
    height: 2.5rem;
    align-items: flex-start;
    padding: 0;
  }

  .collection-list .nav-link.black .nav-link_text {
    padding: 0;
    font-family: var(--f-text);
    font-size: 1.0625rem;
    font-weight: 450;
    line-height: 2.5rem;
    color: var(--foam);
  }
}

/* ---------- links and buttons ----------
 * Text links read as words, not code: the reading face in sentence case,
 * a hairline under the words and a small coral disc carrying the arrow.
 * Buttons are coral pills in the same face. */

.arrow-button { text-decoration: none; }

.arrow-button .title-wrapper {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
}

.button-title {
  margin: 0;
  font-family: var(--f-text);
  font-size: 1rem;
  font-weight: 550;
  letter-spacing: -.005em;
  text-transform: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  text-decoration-color: currentColor;
  transition: text-decoration-color .5s var(--ease-out), color .5s var(--ease-out);
}

.arrow-button:hover .button-title { text-decoration-color: var(--coral); }
.arrow-button.white:hover .button-title { text-decoration-color: var(--sun); }

.arrow-button .arrow-wrapper {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  margin: 0;
  border-radius: 50%;
  background-color: var(--coral);
  filter: none;
  overflow: hidden;
  transition: background-color .5s var(--ease-out), transform .5s var(--ease-out);
}

/* Webflow clips the link to animate its underline bar; the disc needs room */
.arrow-button { overflow: visible; }

.arrow-button:hover .arrow-wrapper { background-color: var(--coral-deep); transform: translateX(3px); }

/* the arrow PNG comes in black or white; on coral it is always white */
.arrow-button .button-arrow {
  width: .8rem;
  height: auto;
  margin: 0;
  filter: brightness(0) invert(1);
  /* IX2 slides the arrow sideways on hover (inline style), which the round
     disc clipped mid-move; the arrow stays centred and the disc nudges */
  transform: none !important;
}

/* the separate underline bar is replaced by the text underline above */
.arrow-button .underline { display: none; }

.arrow-button,
.tab-link-tab-1,
.tab-link-tab-1-2,
.lb-book__btn,
.div-block-21.tags {
  transition: background-color .6s var(--ease-out), color .6s var(--ease-out), border-color .6s var(--ease-out);
}

/* the Events / Excursions / Private Charters switcher */
.tab-link-tab-1 {
  border-radius: 0;
  background-color: transparent;
  border-top: 1px solid var(--rule);
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink-3);
  padding-left: 0;
}

.tab-link-tab-1:hover { color: var(--ink); background-color: transparent; }

.tab-link-tab-1.w--current {
  border-radius: 0;
  background-color: transparent;
  color: var(--coral);
  font-style: italic;
}

/* phones and tablets: the three tabs become a row of pill chips, so
   "Private Charters" never wraps under its neighbours */
@media screen and (max-width: 991px) {
  .w-tab-menu:has(.tab-link-tab-1) {
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: .5rem;
  }

  .tab-link-tab-1,
  .tab-link-tab-1.w--current {
    width: auto;
    padding: .6rem 1.15rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-family: var(--f-text);
    font-size: .9375rem;
    font-style: normal;
    font-weight: 550;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--ink-2);
  }

  .tab-link-tab-1.w--current {
    border-color: var(--coral);
    background-color: var(--coral);
    color: var(--shell);
  }

  .w-tab-menu .tab-link-tab-1 .text-block-8 { font-weight: inherit; }
  .w-tab-menu .tab-link-tab-1.w--current .text-block-8::before { content: none; }
}

.tab-link-tab-1 .text-block-8 {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: 350;
  color: inherit;
}

.tab-link-tab-1.w--current .text-block-8::before {
  content: "\2192\00a0";
  font-family: var(--f-text);
  font-style: normal;
}

.tab-image { border-radius: var(--radius-media); }

/* ---------- tour cards ----------
 * A postcard: shell-white card with a soft inner frame, a tall photo
 * with rounded corners that settles on hover, the title in the display
 * face. */

.card-wrapper {
  background-color: var(--shell);
  box-shadow: 0 1px 0 var(--rule), 0 18px 40px -28px #0f2a2a59;
  border-radius: calc(var(--radius-media) + 8px);
  padding: 10px 10px 18px;
  transition: transform .9s var(--ease-out), box-shadow .9s var(--ease-out);
}

.card-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 var(--rule), 0 28px 50px -30px #0f2a2a73;
}

.card-wrapper .div-block-6 {
  aspect-ratio: 4 / 5;
  height: auto;
  border-radius: var(--radius-media);
  background-size: cover;
  transition: filter 1.2s var(--ease-out);
}

.card-wrapper:hover .div-block-6 { filter: saturate(1.1); }

/* The "Explore what we offer" carousel is a looping Swiper. Webflow spaced
 * its cards with a 12px CSS gap and 20px side padding on the track, neither
 * of which Swiper measures: the previous card peeked in at the left edge,
 * and every autoplay step drifted the row another 12px. Build the gap into
 * each slide instead (as padding Swiper does measure), and keep only the
 * vertical room the card shadows need. */
.slider-list,
.slider-list.home {
  grid-column-gap: 0;
  column-gap: 0;
  padding-left: 0;
  padding-right: 0;
}

.slider-item {
  box-sizing: border-box;
  padding-right: 12px;
}

.card-wrapper { align-items: stretch; }
.card-content { align-self: stretch; width: auto; padding: 1.25rem .5rem 0; }

.card-content .heading-4,
.heading-4-copy {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 96, "SOFT" 100;
  font-size: clamp(1.5rem, 1.15rem + .9vw, 2.125rem);
  font-weight: 350;
  line-height: 1.08;
  letter-spacing: -.018em;
}

.card-content .paragraph-2 { font-size: var(--t-small); }

.secondary-btn-text,
.secondary-btn-text-2,
.text-block-10,
.text-block-11 {
  font-family: var(--f-text);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.outline-btn,
.outline-btn.black,
.outline-btn.black.full,
.gradient-arrow-button.full,
.gradient-arrow-button-2 {
  border-radius: 999px;
}

.tours-buttons-grid .outline-btn { border-color: var(--rule); color: var(--ink); }
.tours-buttons-grid .outline-btn .secondary-btn-text { color: var(--ink); }
.tours-buttons-grid .outline-btn:hover { border-color: var(--ink); }

/* the booking button is styled from js/cms.js; this beats its injected sheet */
.lb-book .lb-book__btn {
  background-color: var(--coral);
  border-radius: 999px;
  box-shadow: none;
  font-family: var(--f-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 18px 24px;
}

.lb-book .lb-book__btn:hover { background-color: var(--coral-deep); transform: none; box-shadow: none; }

/* the tour list (events.html, excursion lists): rounded photos, coral
   "Book" pills to match every other booking button */
.content-image { border-radius: var(--radius-media); }

.gradient-arrow-button-2 {
  background-color: var(--coral);
  background-image: none;
  transition: background-color .6s var(--ease-out);
}
.gradient-arrow-button-2:hover { background-color: var(--coral-deep); }

.outline-btn .secondary-btn-text-2 { color: var(--ink); }

/* Webflow sets the tour photo to height:30% on phones, of a parent with no
   height, which computes to 0: every photo vanished and left a gap. Give
   it a real shape and put it above the words it illustrates. */
@media screen and (max-width: 767px) {
  .image-content,
  .tours-list .tour-item .image-content,
  .tours-list .tour-item:nth-child(even) .image-content { flex-direction: column; align-items: stretch; gap: 1.5rem; }
  .image-content .image-card-content { order: 2; width: 100%; }
  .image-content .content-image {
    order: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* tag chips on the tour list */
.collection-item-4 {
  border: 1px solid var(--rule);
  border-radius: 999px;
  background-color: var(--shell);
}

.collection-item-4 .paragraph-2 {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* "Why it feels different here" */
.div-block-10 {
  background-color: transparent;
  box-shadow: none;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

/* "Why it feels different here" shares its grid row with the tall photo on
   the right; drop Webflow's 2rem bottom padding so the two cards finish
   exactly on the photo's bottom edge */
.div-block-10 { padding-bottom: 0; justify-content: flex-end; gap: 0; }

/* "Choose your experience": the block is centred, so its heading is too
   (Webflow left it start-aligned under a centred line of copy) */
.div-block-12 { text-align: center; }

/* its two reasons as a matched pair of cards, like the tour pages' lists */
.div-block-35 {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
  margin-top: 1.25rem;
}

.div-block-35 > div {
  width: auto;
  min-width: 0;
  padding: 1.25rem 1.4rem 1.35rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-media);
  background-color: var(--shell);
}

.div-block-35 .heading-4 { margin: 0 0 .4rem; }
.div-block-35 .heading-4::before {
  content: "";
  display: inline-block;
  width: .45em;
  height: .45em;
  margin-right: .6em;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 .2em #f2c14e40;
  vertical-align: .12em;
}

.div-block-35 .text-block-9 {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-2);
}

.heading-3.home {
  font-family: var(--f-display);
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.375rem);
  font-weight: 350;
  font-style: italic;
  letter-spacing: -.01em;
}

.heading-2.center.white { color: var(--sand); }

/* tag chips on the tour pages (25+, 2.5 hours, Small bite) */
.div-block-21.tags {
  border-radius: 999px;
  background-color: #cf4a2f12;
  border: 1px solid #cf4a2f59;
}

.text-block-13.tags {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral-deep);
}

/* ---------- surfaces ---------- */

.image-left,
.image-right { border-radius: var(--radius-media); }

.feature-item,
.review-block {
  border-radius: var(--radius);
  box-shadow: none;
}

.feature-item {
  background-color: transparent;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

/* number the "what we do best" list in italic display figures */
.feature-list { counter-reset: feature; }
.feature-item { counter-increment: feature; }
.feature-item .heading-4::before {
  content: counter(feature, decimal-leading-zero);
  display: block;
  margin-bottom: .5rem;
  font-family: var(--f-display);
  font-style: italic;
  font-size: .6em;
  font-weight: 300;
  letter-spacing: 0;
  color: var(--coral);
}

.feature-item .heading-4 {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 96, "SOFT" 100;
  font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.5rem);
  font-weight: 350;
  line-height: 1.08;
  letter-spacing: -.018em;
}

/* reviews: a big open quote mark hangs over the words. Webflow fixed the
 * slider at 700px while the longer reviews need ~770px, which cut the
 * Tripadvisor / Google logo off the bottom; let it size to its tallest
 * slide instead, and tighten the 80px gaps that made it so tall. */
.slider.w-slider { height: auto; background-color: transparent; border-radius: 0; }

.review-block {
  position: relative;
  grid-row-gap: 2rem;
  row-gap: 2rem;
  background-color: transparent;
}

.review-block::before {
  content: "\201C";
  display: block;
  height: .5em;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(5rem, 3rem + 6vw, 9rem);
  line-height: 1;
  color: var(--flamingo);
}

.review-block .heading-2 { color: var(--ink); }

/* the round slider arrows sit in the sand rather than on a grey disc */
.w-slider-arrow-left,
.w-slider-arrow-right { color: var(--ink); }
.w-slider-dot { background-color: #0f2a2a33; }
.w-slider-dot.w-active { background-color: var(--coral); }

/* the big closing image ("Your next unforgettable experience...") breaks
   out of the container into a framed postcard, inset from the page edge */
.large-img {
  position: relative;
  isolation: isolate;
  width: calc(100vw - var(--frame) * 2);
  max-width: none;
  margin-left: calc(50% - 50vw + var(--frame));
  min-height: min(88vh, 56rem);
  border-radius: var(--radius-frame);
  overflow: hidden;
}

.large-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #2a0d071f 25%, #2a0d07b3 100%);
}

.heading-2.center.white.large {
  font-size: var(--t-mega);
  line-height: 1;
  letter-spacing: -.025em;
}

.div-block-13 { width: auto; max-width: min(62rem, 90vw); }

/* ---------- hero frames ----------
 * The hero photo/video sits in a rounded frame inset from the page edge.
 * clip-path leaves the layout (and IX2's measurements) untouched. */

/* The hero opens full-bleed, edge to edge. As the page scrolls away from
 * it, a sand frame closes in and its corners round, so the photo settles
 * into the same rounded postcard as everything below. Only clip-path
 * animates, so the layout (and IX2's measurements) never move. Browsers
 * without scroll-driven animation keep the full-bleed hero. */
.hero-section,
.hero-section-copy { clip-path: inset(0 round 0); }

/* The frame must close in on sand. On phones the Webflow export gives the
 * section behind the hero its own photo (freedive-snorkel-tour-kauai.jpg,
 * lady-bellaise.webflow.css, max-width 479px) — a leftover from before the
 * video, which then showed in the frame's gap as it shrank. */
.section.hero,
.section.hero-copy { background-image: none; background-color: transparent; }

/* Tour photos fill the screen, and some are soft night shots. A deeper
 * fall-off at the edges keeps the eye on the centre and the title legible.
 * (A film-grain layer was tried and dropped: it lifted the blacks to grey
 * and read as noise, not texture.) */
.background-image-move.tours .background-gradiant {
  background-image:
    radial-gradient(120% 90% at 50% 40%, #0000 45%, #0f2a2a8c 100%),
    radial-gradient(circle at 0%, #0009, #0000006e);
}

@supports (animation-timeline: view()) {
  @keyframes lb-hero-frame {
    from { clip-path: inset(0 round 0); }
    to   { clip-path: inset(var(--hero-frame) round var(--radius-frame)); }
  }

  .hero-section,
  .hero-section-copy {
    --hero-frame: clamp(10px, 2.2vw, 32px);
    animation: lb-hero-frame linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 45%;
  }
}

/* tour-page heroes are 120vh tall. On desktop Webflow keeps the words at
 * the foot of the first screen (a 40vh bottom padding), but below 992px
 * that padding is replaced and the words were stretched over the whole
 * 120vh (space-between): the title sat at the very top, under the nav
 * bar. Stack them together at the foot of the first screen instead. */
@media screen and (max-width: 991px) {
  .hero-section-copy .background-video-copy {
    align-items: flex-end;
    padding-bottom: calc(20vh + clamp(2.5rem, 7vh, 5.5rem));
  }

  .hero-section-copy .background-image_container { align-content: end; }

  .hero-section-copy .heading-left-copy {
    height: auto;
    justify-content: flex-end;
    gap: 1.25rem;
  }
}

/* phones centre the hero title; centre its line of copy to match, and let
   it wrap freely rather than at the <br> placed for a desktop measure */
@media screen and (max-width: 479px) {
  .hero-section-copy .heading-left-copy .paragraph-2 { text-align: center; }
  .hero-section-copy .heading-left-copy .paragraph-2 br { display: none; }
}

/* line the hero words up with the logo in the nav bar, well inside the
   frame rather than against its edge */
.hero-section .container-grid,
.hero-section-copy .background-video-copy {
  padding-left: calc(var(--frame) + 2.6rem);
  padding-right: calc(var(--frame) + 2.6rem);
}

@media screen and (max-width: 767px) {
  .hero-section .container-grid,
  .hero-section-copy .background-video-copy {
    padding-left: calc(var(--frame) + 1.25rem);
    padding-right: calc(var(--frame) + 1.25rem);
  }
}

/* ---------- tour pages (event.html, excursion.html) ----------
 * The body below the hero reads as a short travel guide: numbered
 * chapters divided by hairlines, comfortable reading type, sun-dot lists,
 * the included / bring lists as two cards, a rounded map and gallery. The
 * booking card beside it is a clean price table in the same card stock. */

.sticky-wrapper { gap: clamp(2rem, 4vw, 5rem); }

.container-left {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  padding-right: 0;
  gap: 0;
  counter-reset: chapter;
}

.container-left > .div-block-25 { margin-bottom: 1.75rem; }

.container-left > .heading-2 {
  counter-increment: chapter;
  width: 100%;
  margin: clamp(3rem, 5vw, 4.5rem) 0 1.25rem;
  padding-top: clamp(2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--rule);
  font-size: clamp(2rem, 1.4rem + 1.6vw, 3rem);
}

.container-left > .heading-2::before {
  content: counter(chapter, decimal-leading-zero);
  display: block;
  margin-bottom: 1rem;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--coral);
}

/* the first chapter follows the tag chips directly */
.container-left > .div-block-25 + .heading-2 { margin-top: 0; padding-top: 0; border-top: 0; }

/* the chapters carry their own hairlines now */
.container-left > .underline { display: none; }

.container-left > .paragraph-2 {
  max-width: 64ch;
  font-size: 1.0625rem;
  line-height: 1.72;
}

.container-left .w-richtext p { margin-bottom: .9em; }
.container-left .w-richtext p:last-child { margin-bottom: 0; }

.container-left .w-richtext ul {
  margin: .75rem 0 0;
  padding-left: 0;
  list-style: none;
}

.container-left .w-richtext li {
  position: relative;
  margin-bottom: .6rem;
  padding-left: 1.5rem;
}

.container-left .w-richtext li::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: .66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 3px #f2c14e33;
}

/* "What's included?" / "What to bring?" as two cards */
.container-left > .div-block-24 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
  margin-top: 2.25rem;
}

.div-block-24 > div {
  padding: 1.5rem 1.6rem 1.35rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-media);
  background-color: var(--shell);
}

.div-block-24 .heading-4 {
  margin: 0 0 .75rem;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 72, "SOFT" 100;
  font-size: 1.5rem;
  font-weight: 350;
  letter-spacing: -.01em;
}

.div-block-24 .paragraph-2 { font-size: var(--t-small); line-height: 1.6; }
.div-block-24 .w-richtext ul { margin-top: 0; }

/* the meeting-point map */
.container-left .w-iframe { width: 100%; margin-top: 1.75rem; }
.container-left iframe {
  display: block;
  width: 100%;
  height: clamp(280px, 28vw, 420px);
  border: 0;
  border-radius: var(--radius-media);
}

/* the photo gallery: one large frame, a strip of thumbnails under it */
.cms-photo { margin-top: clamp(2.5rem, 4vw, 3.5rem); gap: .75rem; }
.link-block-2 { border-radius: var(--radius-media); height: clamp(320px, 36vw, 560px); }
.tabs-menu-2 { gap: .6rem; margin: .6rem 0 0; }
.tab-link-tab-1-2,
.tab-link-tab-1-2.w--current {
  height: clamp(56px, 6vw, 78px);
  border-radius: 12px;
  background-size: cover;
  background-position: 50%;
  opacity: .62;
  transition: opacity .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.tab-link-tab-1-2:hover { opacity: .9; }
.tab-link-tab-1-2.w--current { opacity: 1; box-shadow: 0 0 0 2px var(--sand), 0 0 0 3.5px var(--coral); }

/* the booking card: a price table in the card stock */
.container-right {
  flex: none;
  width: clamp(300px, 30%, 380px);
  gap: 0;
  padding: 1.6rem 1.6rem 1.5rem;
  top: 7.5rem;
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius-media) + 4px);
  background-color: var(--shell);
  box-shadow: 0 24px 50px -34px #0f2a2a59;
}

.container-right > .sub-heading,
.container-right > .sub-heading-2 { margin-bottom: 1.1rem; }

.div-block-42 {
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--rule);
}

.paragraph-6,
.paragraph-6.bold {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.paragraph-6.num {
  font-family: var(--f-text);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.div-block-38,
.div-block-27 {
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule);
}

.div-block-27 .paragraph-2 { font-size: .9375rem; color: var(--ink); }

.heading-12,
.div-block-27 .heading-4 {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 72, "SOFT" 100;
  font-size: 1.375rem;
  font-weight: 400;
  font-feature-settings: "lnum", "tnum";
  color: var(--ink);
}

/* "USD" sits small beside the figure */
.div-block-39 { gap: .4rem; align-items: baseline; }
.div-block-39 > .heading-12:first-child {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .1em;
  color: var(--ink-3);
}

.div-block-28 { margin-top: 1.25rem; gap: .35rem; }
.div-block-28 .heading-4 {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.div-block-28 .paragraph-2 { font-size: var(--t-small); }

.container-right .lb-book { width: 100%; margin-top: 1.5rem; }

@media screen and (max-width: 991px) {
  .container-right { width: 100%; margin-top: 3rem; position: static; }
}

@media screen and (max-width: 767px) {
  .container-left > .div-block-24 { grid-template-columns: 1fr; }
}

.container-right .lb-book,
.container-right .lb-book .lb-book__btn { width: 100%; }

/* phones: Webflow's 2% side padding left about 8px between the words and
   the edge of the screen; give every section a proper gutter */
@media screen and (max-width: 479px) {
  .section,
  .section.tours-summary-block {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ---------- the charter form ---------- */

/* inputs: a hairline under each, coral when you are in it */
.field,
.select-field.wide {
  border-bottom-color: #0f2a2a40;
  background-color: transparent;
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 1.0625rem;
}

.field::placeholder { color: var(--ink-3); }
.field:focus,
.select-field.wide:focus { border-bottom-color: var(--coral); outline: none; }
/* the date field is flatpickr's read-only stand-in, which Webflow greys */
.field.w-input[readonly] { background-color: transparent; cursor: pointer; }

/* flatpickr's calendar, in the same card stock as the menus. Its own
   sheet loads after this one, hence the extra `body` in each selector */
body .flatpickr-calendar {
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--shell);
  box-shadow: 0 24px 48px -24px #0f2a2a66;
  font-family: var(--f-text);
}
body .flatpickr-calendar::before,
body .flatpickr-calendar::after { display: none; }
body .flatpickr-months .flatpickr-month,
body .flatpickr-current-month .flatpickr-monthDropdown-months,
body span.flatpickr-weekday { color: var(--ink); background: transparent; }
body .flatpickr-day { color: var(--ink); border-radius: 999px; }
body .flatpickr-day:hover { background: var(--sand); border-color: var(--sand); }
body .flatpickr-day.today { border-color: var(--sun); }
body .flatpickr-day.selected,
body .flatpickr-day.selected:hover { background: var(--coral); border-color: var(--coral); color: var(--shell); }
body .flatpickr-day.flatpickr-disabled,
body .flatpickr-day.flatpickr-disabled:hover { color: #0f2a2a40; background: transparent; border-color: transparent; }
body .flatpickr-months .flatpickr-prev-month:hover svg,
body .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--coral); }

/* the drink and extra options become pill chips that fill coral when picked */
.checkbox-wrapper { gap: .45rem; }

.checkbox-form_component {
  border-radius: 999px;
  padding: .6rem 1.05rem;
}

.checkbox-2,
.checkbox-2.w--redirected-focus,
.checkbox-2.w--redirected-focus-visible {
  border: 1px solid #0f2a2a33;
  border-radius: 999px;
}

.checkbox-2:hover { border-color: var(--coral); background-color: transparent; }

.checkbox-2.w--redirected-checked {
  border: 1px solid var(--coral);
  background-color: var(--coral);
}

.checkbox-form_component .w-form-label {
  position: relative;
  z-index: 11;
  font-family: var(--f-text);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink);
  pointer-events: none;
  transition: color .3s var(--ease-out);
}

.checkbox-form_component:has(.w--redirected-checked) .w-form-label { color: var(--shell); }

.submit_button {
  border-radius: 999px;
  background-color: var(--coral);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  font-weight: 600;
  transition: background-color .5s var(--ease-out);
}

.submit_button:hover { background-color: var(--coral-deep); }

/* ---------- team: crew cards in the postcard stock ---------- */

.team-card {
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius-media) + 8px);
  background-color: var(--shell);
  box-shadow: 0 18px 40px -28px #0f2a2a59;
}

.team-detail { padding: 1.5rem 1.6rem 1.75rem; }
.team-detail .heading-2 { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); }
.team-detail .paragraph-2 { font-size: var(--t-small); }

/* ---------- FAQ ---------- */

.question-inner .heading-4 {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 72, "SOFT" 100;
  font-size: clamp(1.375rem, 1.1rem + .9vw, 2rem);
  font-weight: 350;
  line-height: 1.15;
  letter-spacing: -.015em;
}

.body { counter-reset: faq; }
.what-i-do { counter-increment: faq; }
.what-i-do .question-inner::before {
  content: counter(faq, decimal-leading-zero);
  flex: none;
  min-width: 3.25rem;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .14em;
  color: var(--coral);
  padding-top: .9em;
}
.what-i-do .question-inner { display: flex; align-items: flex-start; }

.question-block { border-color: var(--rule); }
.plus-icon { transition: transform .6s var(--ease-out); }

.faq-section.bg-green { background-color: var(--sand); }

/* ---------- about: timeline ---------- */

.timeline_date-text {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: var(--t-h1);
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
  padding-block: .12em;
  letter-spacing: -.02em;
  font-feature-settings: "lnum";
  color: var(--coral);
}

/* ---------- media ---------- */

img { border-radius: inherit; }

/* ---------- contact + footer ----------
 * The contact band keeps its photo but sinks it into the hull red; the
 * footer below becomes the same green and ends on the boat's name. */

.footer {
  isolation: isolate;
  background-color: var(--hull);
  /* the boat photo stays pinned while the page scrolls past it (iOS,
     which ignores fixed backgrounds, simply scrolls it), under a light
     red tint so it shows through the contact band */
  background-image: linear-gradient(#24090433, #24090433), url('../images/IMG_0819-1.jpg');
  background-size: cover;
  background-position: 50% 35%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #6f1f13bf 0%, #6f1f138c 24%, #6f1f1399 42%, var(--hull) 50%);
}

.div-block-14 { position: relative; }

.div-block-15 .heading-2.center.white {
  font-size: var(--t-h1);
  line-height: 1;
  letter-spacing: -.025em;
}

.div-block-15 .paragraph-2 { color: var(--foam); }

/* three contact columns, divided by hairlines, lined up row by row: icon,
   heading, line of text and link start at the same height in every column
   (Webflow spaced each column out on its own, so they sat unevenly). */
.div-block-17 { gap: 0; align-items: stretch; }

.div-block-16 {
  height: auto;
  justify-content: flex-start;
  gap: .9rem;
  padding: 1rem 2rem;
  border-left: 1px solid var(--foam-3);
}
.div-block-16:first-child { border-left: 0; }
.div-block-16 > * { margin-top: 0; margin-bottom: 0; }
.div-block-16 .code-embed-5 { height: 35px; width: 35px; flex: none; }
.div-block-16 .code-embed-5 svg { width: 100%; height: 100%; }


.div-block-16 .heading-4-copy { color: var(--sand); white-space: nowrap; font-size: clamp(1.35rem, 1rem + .9vw, 1.75rem); }
.div-block-16 .paragraph-2 { color: #f4ecdf99; font-size: var(--t-small); }

.div-block-16 a.heading-4.white {
  font-family: var(--f-text);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-decoration: none;
  border-bottom: 1px solid #f2c14e99;
  padding-bottom: .2em;
  transition: border-color .6s var(--ease-out), color .6s var(--ease-out);
}
.div-block-16 a.heading-4.white:hover { border-color: var(--sun); color: var(--sun); }

.code-embed-5 { color: var(--sun); opacity: .9; }

.footer-dark {
  position: relative;
  height: auto;
  overflow: hidden;
  background-color: var(--hull);
  border-radius: 0;
  border-top: 1px solid var(--foam-3);
  color: var(--sand);
  padding-bottom: 0;
}

.footer-dark .logo-text-copy,
.footer-dark .heading-4.link,
.footer-copyright-center { color: var(--sand); }

.footer-dark .heading-4.link { opacity: .78; transition: opacity .4s var(--ease-out), color .4s var(--ease-out); }
.footer-dark .heading-4.link:hover,
.footer-dark .heading-4.link.w--current { opacity: 1; color: var(--sun); }

.footer-dark .title-small { color: var(--sun); opacity: .85; }
.footer-divider { background-color: var(--foam-3); }

/* the boat's name, as wide as the page and no wider. Sized in vw so it
 * always fits: Fraunces sets "Lady Bellaïs" about 5.6em wide at this
 * tracking, so 22vw fills ~84% of the width at every size. The
 * line box is tall enough for the "y" descender, and there is no negative
 * margin, so the footer's overflow:hidden never cuts a glyph. */
.footer-dark::after {
  content: "Lady Bellaïs";
  display: block;
  margin-top: clamp(2.5rem, 5vw, 5rem);
  padding-bottom: .08em;
  font-family: var(--f-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-weight: 300;
  font-size: 22vw;
  line-height: 1.12;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-align: center;
  color: var(--sand);
  pointer-events: none;
}

.footer-copyright-center,
.footer-block .title-small,
.title-small {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* the foot of the footer: the copyright line, small and quiet */
.lb-footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 2rem;
}

.lb-footer-base .footer-copyright-center { margin: 0; text-align: left; opacity: .8; }

@media screen and (max-width: 767px) {
  .lb-footer-base { flex-direction: column; align-items: center; text-align: center; }
  .lb-footer-base .footer-copyright-center { text-align: center; }
}

/* ---------- motion ---------- */

a,
button {
  transition-timing-function: var(--ease-out);
}

/* the hero headline rises out of a soft blur on load */
@keyframes lb-rise {
  from { opacity: 0; transform: translateY(.18em); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.hero-heading { animation: lb-rise 1.4s var(--ease-out) .15s both; }
.paragraph.hero { animation: lb-rise 1.4s var(--ease-out) .45s both; }

/* scroll-driven reveals (Chromium, Safari 26+). The photos open from a
 * clipped frame as they enter the viewport, and the hero frame widens
 * slightly as the page scrolls away from it. Only clip-path is animated,
 * so nothing fights the transforms and opacity that IX2 owns. */
@supports (animation-timeline: view()) {
  @keyframes lb-unveil {
    from { clip-path: inset(10% 7% 10% 7% round var(--radius-media)); }
    to   { clip-path: inset(0 0 0 0 round var(--radius-media)); }
  }

  @keyframes lb-unveil-frame {
    from { clip-path: inset(8% 5% 8% 5% round var(--radius-frame)); }
    to   { clip-path: inset(0 0 0 0 round var(--radius-frame)); }
  }

  .image-left,
  .image-right,
  .tab-image,
  .card-wrapper .div-block-6 {
    animation: lb-unveil linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }

  .large-img {
    animation: lb-unveil-frame linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 45%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- small screens ---------- */

@media screen and (max-width: 991px) {
  /* keep the quote clear of the slider arrows either side */
  .review-block { padding-left: 2.75rem; padding-right: 2.75rem; }
  .w-slider-arrow-left,
  .w-slider-arrow-right { width: 2.5rem; }

  /* stacked, and as wide as the band: it used to shrink to its widest word */
  .div-block-17 { flex-direction: column; width: 100%; }
  .div-block-16 {
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--foam-3);
    padding: 2rem 0;
  }
  .div-block-16:first-child { border-top: 0; }
}

@media screen and (max-width: 767px) {
  .nav-link_text_small,
  .locale-link {
    white-space: nowrap;
    letter-spacing: .06em;
  }

  .hero-heading,
  .hero-heading.bigg { max-width: none; line-height: 1; }

  .large-img { min-height: 72vh; }

  /* "Rooted on the island / Loved by guests" and "What's included /
     What to bring" were two 160px columns on a phone: stack them */
  .div-block-35 { grid-template-columns: 1fr; }

  /* long reviews stay short enough to read without the slide jumping */
  .review-block .heading-2,
  .heading-2.center:not(.large):not(.white) { font-size: 1.375rem; line-height: 1.22; }
}

/* Our Tours: the three photos at the top show the three ways to come aboard,
   so a visitor sees the range at a glance — snorkelling (left, unchanged),
   a party night (centre) and a private charter (right). */
.animated-bg-thumbnail-image-wrapper.image2 {
  background-image: url('../images/cms/IMG_6111.jpg');
  background-position: 45% 50%;
}
.animated-bg-thumbnail-image-wrapper:not(.image2):not(.image3) {
  background-image: url('../images/IMG_1373-p-1080.jpg');
  background-position: 50% 40%;
}

/* private charter form: start and end time side by side, note underneath */
.charter-time {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.charter-time select { margin: 0; }
.charter-time__note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--t-small);
  color: var(--coral-deep);
}
.charter-time select option:disabled { color: #0f2a2a55; }

/* ---------- home: "Find your trip" ----------
 * Right under the video, for visitors who only skim: what each trip is
 * and what it includes, at a glance. Quiet on purpose — small type, no
 * booking buttons; each card just opens the tour page, which does the
 * selling. Cards are drawn by js/cms.js (renderHomeTours). */

.section.services { padding-top: clamp(.5rem, .3rem + .5vw, .875rem); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

.services-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}
.services-head .sub-heading { margin-bottom: .5rem; }
.services-title {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 96, "SOFT" 100;
  font-weight: 350;
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
}
.services-all {
  flex: none;
  font-family: var(--f-text);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--sun);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}
.services-all:hover { color: var(--coral-deep); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, .5rem + .8vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-card { display: flex; }
.service-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  background-color: var(--shell);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color .4s var(--ease-out), box-shadow .6s var(--ease-out);
}
.service-link:hover { border-color: #0f2a2a40; box-shadow: 0 18px 36px -28px #0f2a2a66; }
.service-link:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.service-photo {
  aspect-ratio: 2 / 1;
  background-color: var(--sand-2);
  background-position: 50% 50%;
  background-size: cover;
}

.service-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .35rem;
  padding: .9rem 1rem 1rem;
}
.service-kind {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--coral-deep);
}
.service-name {
  margin: 0;
  font-family: var(--f-display);
  font-variation-settings: "opsz" 48, "SOFT" 100;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--ink);
}
.service-meta { margin: 0; font-size: .8125rem; color: var(--ink-3); }
.service-line {
  margin: .15rem 0 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.service-incl {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  margin: .35rem 0 0;
  padding: 0;
  list-style: none;
}
.service-incl li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--ink);
}
.service-incl li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: .7em;
  height: .38em;
  border-left: 2px solid var(--lagoon-2);
  border-bottom: 2px solid var(--lagoon-2);
  transform: rotate(-45deg);
}

.service-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: auto 0 0;
  padding-top: .8rem;
  font-size: .875rem;
}
.service-price { font-weight: 600; color: var(--ink); }
.service-go { margin-left: auto; font-weight: 600; color: var(--ink-2); transition: color .3s var(--ease-out); }
.service-link:hover .service-go { color: var(--coral-deep); }

/* One quiet row. It runs wider than the text column (edge to edge, with
 * the page gutter) so six cards fit side by side on a laptop; where they
 * don't, the row scrolls sideways and snaps card by card. */
.services-grid {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: .75rem;
  margin-inline: calc(50% - 50vw);
  padding: 2px max(16px, 2.5vw) 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(16px, 2.5vw);
  scrollbar-width: none;
}
.services-grid::-webkit-scrollbar { display: none; }
.service-card { scroll-snap-align: start; }
.service-link { border-radius: 12px; }
.service-link:hover { box-shadow: 0 14px 28px -24px #0f2a2a66; }
.service-photo { aspect-ratio: 3 / 2; }
.service-body { padding: .75rem .85rem .85rem; gap: .2rem; }
.service-name { font-size: 1.0625rem; line-height: 1.2; }
.service-meta { font-size: .75rem; }
.service-line { display: none; }
.service-incl { flex-direction: column; gap: .2rem; margin-top: .4rem; }
.service-incl li { font-size: .75rem; }
.service-foot { padding-top: .65rem; font-size: .75rem; }

/* Clearer at a glance: darker, larger type, and what's included as
 * small "+" pills rather than a ticked list. */
.service-link { border-color: #0f2a2a2e; }
.service-body { padding: .85rem .95rem .95rem; gap: .25rem; }
.service-kind { font-size: .6875rem; font-weight: 500; }
.service-name { font-size: 1.1875rem; font-weight: 500; line-height: 1.18; }
.service-meta { font-size: .8125rem; font-weight: 500; color: var(--ink-2); }
.service-incl { flex-direction: row; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.service-incl li {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .6rem .3rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--lagoon);
  background-color: #7fd3c72e;
  border: 1px solid #145a5626;
  border-radius: 999px;
}
.service-incl li::before {
  content: "+";
  position: static;
  width: auto;
  height: auto;
  border: 0;
  transform: none;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  color: var(--lagoon-2);
}
.service-foot { flex-wrap: wrap; row-gap: .2rem; column-gap: .5rem; font-size: .875rem; }
.service-price, .service-go { white-space: nowrap; }
.service-price { font-weight: 700; }
.service-go { color: var(--ink); }

/* shuttle / cruise-ship friendly: ticked, quieter than the "+" pills */
.service-perks { margin-top: .35rem; }
.service-perks li { color: var(--ink); background-color: transparent; border-color: #0f2a2a24; }
.service-perks li::before {
  content: "";
  width: .55em;
  height: .3em;
  margin: -.15em .1em 0 .05em;
  border-left: 2px solid var(--lagoon-2);
  border-bottom: 2px solid var(--lagoon-2);
  transform: rotate(-45deg);
}

/* The row comes first, straight under the video; the heading sits under
 * it as a slim caption, so the strip reads as a quick index of the trips
 * rather than the start of the page's story. */
.services-head {
  align-items: baseline;
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--rule);
}
.services-head > div { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; }
.services-head .sub-heading { margin: 0; }
.services-title { font-size: 1.125rem; }

/* Phones: the same row, a card and a bit per screen, so it's clear it scrolls. */
@media (max-width: 600px) {
  .services-head { align-items: baseline; }
  .services-grid { grid-auto-columns: 68%; gap: .6rem; }
  .services-head .sub-heading { display: none; }
}

/* The cards rise in one by one when the row scrolls into view
 * (js/cms.js adds .is-armed, then .is-in). Without JavaScript, or with
 * reduced motion, they are simply there. */
.services-grid.is-armed .service-card {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.services-grid.is-armed.is-in .service-card { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .services-grid.is-armed .service-card { opacity: 1; transform: none; transition: none; }
}

/* Links inside tour text (the nature fee, the waiver): clearly a link. */
[data-cms-html] a[href] {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--sun);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
[data-cms-html] a[href]:hover { color: var(--coral-deep); }