/* ==========================================================================
   Ahil Yachts, main stylesheet
   Palette: Royal Navy #0B1F3A, Gold #C9A24A, Ivory #F7F3EA,
            Slate #5B687F, White #FFFFFF
   Type:    Plus Jakarta Sans (headings and body)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --navy: #0B1F3A;
  --gold: #C9A24A;
  --ivory: #F7F3EA;
  --slate: #5B687F;
  --white: #FFFFFF;

  --navy-80: rgba(11, 31, 58, .8);
  --gold-soft: rgba(201, 162, 74, .28);
  --line-light: rgba(11, 31, 58, .12);
  --line-dark: rgba(247, 243, 234, .14);
  --ivory-70: rgba(247, 243, 234, .72);

  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* deeper gold for prices on white and ivory, readable at small sizes */
  --gold-deep: #86671F;

  --container: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(72px, 9vw, 128px);

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-h: 84px;
}

/* ---------- 2. Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; margin: 0; letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 3.3vw, 2.75rem); letter-spacing: -.025em; }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0; }
svg { flex-shrink: 0; }
.i { width: 18px; height: 18px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--gold); color: var(--navy); padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600;
}
.skip-link:focus { top: 16px; }

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

/* ---------- 3. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 999px;
  font-weight: 600; font-size: .95rem; line-height: 1; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: .875rem; }
.btn-block { width: 100%; }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--ivory); }
.btn-navy { background: var(--navy); color: var(--ivory); }
.btn-navy:hover { background: var(--slate); }
.btn-ghost { border-color: rgba(247, 243, 234, .5); color: var(--ivory); background: rgba(11, 31, 58, .2); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.link-btn { background: none; border: 0; padding: 0; color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }

/* ---------- 4. Navbar ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: 0;
  transition: padding-top .5s var(--ease);
}
.nav {
  display: flex; align-items: center; gap: 28px;
  height: var(--nav-h);
  max-width: 100%;
  margin-inline: auto;
  /* lines the logo up with the page content when the bar is full width */
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  color: var(--ivory);
  background: var(--navy);
  border: 1px solid transparent;
  border-bottom-color: var(--line-dark);
  border-radius: 0;
  transition:
    max-width .55s var(--ease),
    height .45s var(--ease),
    padding .45s var(--ease),
    border-radius .55s var(--ease),
    background-color .45s var(--ease),
    border-color .45s var(--ease),
    box-shadow .45s var(--ease);
}
/* Over the hero: full width, attached to both edges, see-through */
.has-hero .site-header:not(.is-scrolled) .nav {
  background: rgba(11, 31, 58, .38);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* After scrolling: floating, narrower, shorter */
.site-header.is-scrolled { padding-top: 12px; }
.site-header.is-scrolled .nav {
  --nav-h: 66px;
  max-width: min(1140px, calc(100% - 24px));
  padding-inline: 22px 12px;
  background: rgba(11, 31, 58, .94);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--gold-soft);
  border-radius: 18px;
  box-shadow: 0 20px 40px -24px rgba(11, 31, 58, .7);
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ivory); flex-shrink: 0; }
.brand-mark { width: 34px; height: 34px; color: var(--gold); transition: width .4s var(--ease), height .4s var(--ease); }
.brand-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.brand-name span { font-weight: 500; color: var(--ivory-70); }
.is-scrolled .brand-mark { width: 30px; height: 30px; }

.nav-links { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.nav-links a {
  position: relative; font-size: .9rem; font-weight: 500; color: var(--ivory-70);
  padding: 6px 0; transition: color .2s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ivory); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { flex-shrink: 0; }

.nav-toggle {
  display: none; position: relative; width: 44px; height: 44px; margin-left: auto;
  border: 1px solid var(--line-dark); border-radius: 12px; background: transparent;
}
.nav-toggle span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--ivory); transition: transform .3s var(--ease); }
.nav-toggle span:first-child { top: 17px; }
.nav-toggle span:last-child { top: 25px; right: 18px; }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--navy); color: var(--ivory);
  overflow-y: auto;
  opacity: 0; transform: translateY(-12px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; transform: none; }
.mobile-menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.menu-close { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 12px; background: transparent; }
.menu-close svg { width: 22px; height: 22px; }
.mobile-links { margin-top: 40px; }
.mobile-links a {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display); font-size: clamp(1.5rem, 6.5vw, 1.9rem); font-weight: 700; letter-spacing: -.02em;
}
.mobile-links a:hover { color: var(--gold); }
.mobile-menu-foot { margin-top: auto; padding-top: 36px; display: grid; gap: 18px; }
.mobile-menu-foot p { color: var(--ivory-70); font-size: .9rem; }

/* ---------- 5. Hero ---------- */
.hero {
  /* height of the search bar, used to reserve room for it inside the hero */
  --finder-h: 98px;
  position: relative; isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 32px) 0 calc(var(--finder-h) + 72px);
  background: var(--navy);
  color: var(--ivory);
  overflow: hidden;
}
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-media img { object-fit: cover; object-position: center; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 31, 58, .88) 0%, rgba(11, 31, 58, .55) 38%, rgba(11, 31, 58, 0) 68%),
    linear-gradient(0deg, rgba(11, 31, 58, 1) 0%, rgba(11, 31, 58, .6) 8%, rgba(11, 31, 58, 0) 24%),
    linear-gradient(180deg, rgba(11, 31, 58, .45) 0%, rgba(11, 31, 58, 0) 22%);
}
.hero-copy { max-width: 600px; }
.hero h1 {
  /* scales with screen width and height, so the hero fits short laptop screens */
  font-size: clamp(2.3rem, min(5vw, 7vh), 4.2rem);
  line-height: 1.06;
  letter-spacing: -.035em;
}
.hero-lede { margin-top: 22px; max-width: 34em; font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--ivory-70); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* One orchestrated entrance, on the hero only */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { opacity: 0; transform: translateY(14px); animation: rise .9s var(--ease) forwards; }
  .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .hero-copy > :nth-child(3) { animation-delay: .24s; }
  .hero-media img { animation: settle 2.2s var(--ease) both; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: scale(1); } }

/* ---------- 6. Finder band ---------- */
/* display: flow-root stops the search bar's negative margin from dragging this
   navy band up over the bottom of the hero image */
.finder-band { position: relative; z-index: 2; display: flow-root; background: var(--navy); color: var(--ivory); padding-bottom: 44px; }
.finder {
  display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 12px;
  max-width: 820px;
  min-height: 98px;
  /* pulls the search bar up so it sits inside the first screen, on top of the image */
  margin-top: -138px;
  padding: 16px;
  background: rgba(11, 31, 58, .82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.finder-field {
  display: grid; gap: 2px;
  padding: 10px 16px;
  background: rgba(247, 243, 234, .06);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.finder-field:focus-within { border-color: var(--gold); }
.finder-field label { font-size: .75rem; font-weight: 500; color: var(--ivory-70); }
.finder-field select {
  appearance: none; -webkit-appearance: none;
  width: 100%; padding: 2px 24px 2px 0; border: 0; background: transparent;
  font-size: 1rem; font-weight: 500; color: var(--ivory);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%23C9A24A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.finder-field select:focus { outline: none; }
.finder-field option { color: var(--navy); }
.finder-submit { min-height: 62px; padding-inline: 30px; border-radius: var(--radius); }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; border-top: 1px solid var(--line-dark); }
.facts li { padding: 22px 20px 0 0; font-size: .9rem; color: var(--ivory-70); }
.facts li + li { padding-left: 20px; border-left: 1px solid var(--line-dark); }
.facts strong { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ivory); margin-bottom: 2px; }

/* ---------- 7. Sections ---------- */
.section { padding-block: var(--section-y); }
.section-ivory { background: var(--ivory); }
.section-white { background: var(--white); }
.section-navy { background: var(--navy); color: var(--ivory); }
.section-head { max-width: 640px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head p { margin-top: 14px; color: var(--slate); font-size: 1.05rem; }
.section-navy .section-head p { color: var(--ivory-70); }
.section-head-split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.section-head-split > div { max-width: 640px; }

/* ---------- 8. Fleet ---------- */
.fleet-tools { display: flex; align-items: center; gap: 16px; }
.sort { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--slate); }
.sort select {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; padding: 0 40px 0 16px;
  border: 1px solid var(--line-light); border-radius: 999px; background-color: var(--white);
  color: var(--navy); font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%230B1F3A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.fleet-status { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; font-size: .9rem; color: var(--slate); }
.fleet-note {
  margin-bottom: 24px; padding: 14px 18px;
  border-left: 3px solid var(--gold); background: var(--white); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.fleet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.yacht { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-light); }
.yacht[hidden] { display: none; }
.yacht-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy); }
.yacht-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.yacht:hover .yacht-media img { transform: scale(1.035); }
.yacht-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.yacht-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.yacht-title h3 { font-size: 1.5rem; }
.yacht-title h3 a { background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .35s var(--ease); }
.yacht-title h3 a:hover { background-size: 100% 1px; }
.yacht-length { font-size: .85rem; font-weight: 500; color: var(--slate); white-space: nowrap; }
.yacht-specs { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 20px; font-size: .875rem; color: var(--slate); }
.yacht-specs li { display: inline-flex; align-items: center; gap: 6px; }
.yacht-specs .i { width: 17px; height: 17px; color: var(--navy); }
.yacht-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-light); }
.yacht-price { font-size: .85rem; color: var(--slate); line-height: 1.3; }
.yacht-price strong { display: block; font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--gold-deep); }
.yacht-actions { display: flex; align-items: center; gap: 8px; }
.btn-wa {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-light); color: var(--navy); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-wa svg { width: 18px; height: 18px; }
.btn-wa:hover { background: var(--gold); border-color: var(--gold); }

/* ---------- 9. Experiences ---------- */
.exp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.exp {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); height: 100%;
  background: var(--ivory); border-radius: var(--radius); overflow: hidden;
  transition: background-color .3s var(--ease);
}
.exp img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; background: var(--navy); }
.exp-body { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 24px; }
.exp-body h3 { font-size: 1.5rem; }
.exp-body p { color: var(--slate); font-size: .95rem; }
.exp-body .exp-price { margin-top: auto; padding-top: 8px; color: var(--gold-deep); font-weight: 700; }
.exp:hover { background: #F1EBDD; background: color-mix(in srgb, var(--ivory) 88%, var(--gold)); }

/* ---------- 10. Routes (signature element) ---------- */
.routes-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.routes-copy > p { margin-top: 14px; color: var(--ivory-70); font-size: 1.05rem; max-width: 30em; }
.route-tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 32px; padding: 6px; border: 1px solid var(--line-dark); border-radius: 999px; }
.route-tab {
  min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ivory-70); font-size: .9rem; font-weight: 500;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.route-tab:hover { color: var(--ivory); }
.route-tab[aria-selected="true"] { background: var(--gold); color: var(--navy); }
.route-panel { margin-top: 28px; }
.route-intro { color: var(--ivory-70); font-size: .95rem; }
.route-stops { margin-top: 16px; counter-reset: stop; }
.route-stops li {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line-dark); font-size: .98rem;
  cursor: default; transition: color .2s var(--ease);
}
.route-stops.is-ordered li::before {
  counter-increment: stop; content: counter(stop);
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid var(--gold-soft); border-radius: 50%; font-size: .75rem; color: var(--gold);
}
.route-stops.is-set { display: flex; flex-wrap: wrap; gap: 8px; }
.route-stops.is-set li { padding: 6px 14px; border: 1px solid var(--line-dark); border-radius: 999px; font-size: .88rem; }
.route-stops li:hover, .route-stops li.is-hot { color: var(--gold); }
.route-stops.is-set li:hover, .route-stops.is-set li.is-hot { border-color: var(--gold); }
.route-note { margin-top: 16px; font-size: .85rem; color: var(--ivory-70); }
.route-panel .btn { margin-top: 24px; }

.route-map { margin: 0; position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-dark); background: var(--navy); }
.route-map svg { display: block; width: 100%; height: auto; }
.map-land { fill: var(--slate); fill-opacity: .32; }
.map-coast { fill: none; stroke: var(--ivory); stroke-opacity: .22; stroke-width: 1.2; }
.map-trunk, .map-crescent { fill: none; stroke: var(--slate); stroke-opacity: .75; stroke-linecap: round; }
.map-trunk { stroke-width: 11; }
.map-crescent { stroke-width: 10; }
.map-frond { fill: none; stroke: var(--slate); stroke-opacity: .62; stroke-width: 5.5; stroke-linecap: round; }
.map-island { fill: var(--slate); fill-opacity: .75; }
.map-wheel { fill: none; stroke: var(--ivory); stroke-opacity: .7; stroke-width: 1.6; }
.map-burj { fill: var(--ivory); fill-opacity: .8; }
.map-labels text { font-family: var(--font-body); font-size: 13px; fill: var(--ivory); fill-opacity: .8; paint-order: stroke; stroke: var(--navy); stroke-width: 4px; stroke-linejoin: round; }
.route-ghost { fill: none; stroke: var(--gold); stroke-opacity: .16; stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.route-line { fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(201, 162, 74, .45)); }
.route-dot { fill: var(--navy); stroke: var(--gold); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .35s var(--ease), transform .35s var(--ease), fill .2s; }
.route-dot.is-on { opacity: 1; transform: scale(1); }
.route-dot.is-hot { fill: var(--gold); transform: scale(1.5); }
.route-dot.is-start { fill: var(--gold); }
.map-tip { font-family: var(--font-body); font-size: 13px; font-weight: 600; fill: var(--gold); paint-order: stroke; stroke: var(--navy); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }

/* ---------- 11. Trip planner ---------- */
.planner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: start; }
.planner-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
  padding: clamp(22px, 3vw, 34px); background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--line-light);
}
.field { display: grid; gap: 8px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label, .field .field-label, .addons legend { font-size: .85rem; font-weight: 600; color: var(--navy); }
.field select, .field input {
  width: 100%; min-height: 50px; padding: 0 16px;
  border: 1px solid var(--line-light); border-radius: var(--radius-sm); background: var(--white);
  font-size: 1rem; color: var(--navy);
  transition: border-color .2s var(--ease);
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%230B1F3A' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field select:focus, .field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.stepper { display: flex; align-items: center; min-height: 50px; border: 1px solid var(--line-light); border-radius: var(--radius-sm); overflow: hidden; }
.stepper button { width: 50px; align-self: stretch; display: grid; place-items: center; border: 0; background: var(--ivory); transition: background-color .2s; }
.stepper button:hover { background: var(--gold); }
.stepper button:disabled { opacity: .35; pointer-events: none; }
.stepper svg { width: 18px; height: 18px; }
.stepper output { flex: 1; text-align: center; font-weight: 600; font-size: 1.05rem; }
.addons { margin: 0; padding: 0; border: 0; }
.addons legend { padding: 0; margin-bottom: 8px; }
.addon-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.addon {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--line-light); border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.addon:hover { border-color: var(--gold); }
.addons .addon { font-weight: 400; font-size: .9rem; color: var(--navy); }
.addon input, .field .addon input { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--navy); flex-shrink: 0; }
.addon span { flex: 1; font-size: .9rem; line-height: 1.35; }
.addon strong { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.addon:has(input:checked) { border-color: var(--navy); background: var(--ivory); }
.planner-warn { grid-column: 1 / -1; padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--ivory); font-size: .9rem; }

.summary {
  position: sticky; top: 100px;
  padding: clamp(24px, 3vw, 32px);
  background: var(--navy); color: var(--ivory); border-radius: var(--radius-lg);
}
.summary h3 { font-size: 1.6rem; }
.summary-lines { margin: 20px 0 0; }
.summary-lines div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-dark); font-size: .92rem; }
.summary-lines dt { color: var(--ivory-70); }
.summary-lines dd { margin: 0; text-align: right; }
.summary-lines .is-empty { color: var(--ivory-70); }
.summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 20px; }
.summary-total span { color: var(--ivory-70); }
.summary-total strong { font-family: var(--font-display); font-size: clamp(1.7rem, 2.8vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; color: var(--gold); }
.summary-note { margin: 6px 0 22px; font-size: .82rem; color: var(--ivory-70); }

/* ---------- 12. Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.steps li { position: relative; padding-top: 64px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--gold);
}
.steps li::after { content: ""; position: absolute; top: 22px; left: 48px; right: 16px; height: 1px; background: var(--line-light); }
.steps li:last-child::after { display: none; }
.steps h3 { font-size: 1.4rem; }
.steps p { margin-top: 10px; color: var(--slate); max-width: 30ch; }

/* ---------- 13. Reviews marquee ---------- */
.reviews .section-head { margin-bottom: 36px; }
.marquee-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line-light); border-radius: 999px; background: var(--white); font-size: .85rem; font-weight: 500;
}
.marquee-toggle .i { width: 14px; height: 14px; }
.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 48s linear infinite;
  will-change: transform;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.marquee-group { display: flex; gap: 20px; padding-right: 20px; }
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.is-paused .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.review {
  flex: 0 0 auto; width: 340px; padding: 22px 22px 24px;
  background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-lg);
}
.review-head { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  display: grid; place-items: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--slate); color: var(--white);
  font-size: 1.3rem; font-weight: 600; line-height: 1;
}
.review-head > div { flex: 1; min-width: 0; }
.review-name { font-weight: 600; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-date { font-size: .82rem; color: var(--slate); }
.review-g { width: 24px; height: 24px; align-self: flex-start; }
.review-rating { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 1.05rem; line-height: 1; }
.review-verified { width: 18px; height: 18px; color: var(--navy); }
.review-text {
  margin-top: 12px; font-size: .92rem; line-height: 1.6; color: var(--slate);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 14. Gallery + lightbox ---------- */
.gallery { columns: 3 260px; column-gap: 16px; }
.gallery li { break-inside: avoid; margin-bottom: 16px; }
.gallery-item { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: rgba(247, 243, 234, .06); cursor: zoom-in; }
.gallery-item img { width: 100%; transition: transform .8s var(--ease), opacity .3s; }
.gallery-item:hover img { transform: scale(1.03); }

.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(11, 31, 58, .96); color: var(--ivory);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(11, 31, 58, .8); }
.lightbox img { max-width: min(1200px, 88vw); max-height: 82vh; max-height: 82dvh; width: auto; border-radius: var(--radius); }
.lb-btn {
  position: absolute; display: grid; place-items: center; width: 52px; height: 52px;
  border: 1px solid var(--line-dark); border-radius: 50%; background: rgba(11, 31, 58, .6); color: var(--ivory);
  transition: border-color .2s, color .2s;
}
.lb-btn:hover { border-color: var(--gold); color: var(--gold); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: .85rem; color: var(--ivory-70); }

/* ---------- 15. FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq details { border-bottom: 1px solid var(--line-light); }
.faq details:first-child { border-top: 1px solid var(--line-light); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 0; list-style: none; cursor: pointer;
  font-family: var(--font-display); font-size: clamp(1.02rem, 1.4vw, 1.15rem); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 12px; height: 12px; flex-shrink: 0; margin-right: 4px;
  border-right: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold);
  transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 40px 24px 0; color: var(--slate); }

/* ---------- 16. CTA ---------- */
.cta { background: var(--navy); color: var(--ivory); padding-block: clamp(64px, 8vw, 104px); border-bottom: 1px solid var(--line-dark); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.cta h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.cta p { margin-top: 12px; color: var(--ivory-70); font-size: 1.05rem; max-width: 34em; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- 17. Footer ---------- */
.footer { background: var(--navy); color: var(--ivory); padding-top: clamp(56px, 7vw, 88px); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: 40px; }
.footer-brand p { margin-top: 18px; max-width: 28em; color: var(--ivory-70); font-size: .95rem; }
.footer h3 { font-family: var(--font-body); font-size: .95rem; font-weight: 600; margin-bottom: 16px; color: var(--ivory); }
.footer-links { display: grid; gap: 10px; }
.footer-links a, .footer-contact a { color: var(--ivory-70); transition: color .2s; }
.footer-links a:hover, .footer-contact a:hover { color: var(--gold); }
.footer-contact { display: grid; gap: 12px; font-size: .95rem; color: var(--ivory-70); }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact .i { margin-top: 3px; color: var(--gold); }
.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-dark); border-radius: 50%; transition: border-color .2s, color .2s; }
.socials a:hover { border-color: var(--gold); color: var(--gold); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  position: relative;
  margin-top: 56px; padding-block: 24px calc(24px + env(safe-area-inset-bottom));
  font-size: .85rem; color: var(--ivory-70);
}
.footer-bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line-dark); }
.footer-bottom ul { display: flex; gap: 24px; }
.footer-bottom a:hover { color: var(--gold); }

/* ---------- 18. Floating call + WhatsApp buttons ---------- */
.float-btn {
  --size: 58px;
  position: fixed; right: 20px; z-index: 40;
  display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%;
  box-shadow: 0 16px 32px -12px rgba(11, 31, 58, .55);
  transition: transform .3s var(--ease), background-color .3s;
}
.float-btn svg { width: 26px; height: 26px; }
.float-btn:hover { transform: translateY(-2px); }
/* Floating WhatsApp button in WhatsApp's own green, with a soft green pulse */
.wa-float {
  bottom: calc(20px + env(safe-area-inset-bottom));
  background: #25D366; color: #FFFFFF;
  animation: wa-ring 2s ease-out infinite;
}
.wa-float:hover { background: #1EBE5A; animation-play-state: paused; }
@keyframes wa-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6), 0 16px 32px -12px rgba(11, 31, 58, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0), 0 16px 32px -12px rgba(11, 31, 58, .55); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 16px 32px -12px rgba(11, 31, 58, .55); }
}
@media (prefers-reduced-motion: reduce) { .wa-float { animation: none; } }
/* Blue call button, stacked above WhatsApp with a 12px gap */
.call-float { bottom: calc(20px + var(--size) + 12px + env(safe-area-inset-bottom)); background: #2F6BDB; color: var(--white); }
.call-float svg { width: 24px; height: 24px; }
.call-float:hover { background: #4A82E8; }

/* ---------- Scroll reveal ----------
   Only active when main.js adds .js-reveal to <html>, so content is never
   hidden if JavaScript fails or the visitor prefers reduced motion. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; }

/* Placeholder look for images that are not uploaded yet */
img.is-missing { object-fit: cover; }

/* ---------- 19. Responsive ---------- */
@media (max-width: 1140px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: .85rem; }
}
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; margin-left: 0; }
  .nav-cta { margin-left: auto; }
  .fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .routes-grid { grid-template-columns: 1fr; }
  .route-map { order: -1; }
  .planner { grid-template-columns: 1fr; }
  .summary { position: static; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .exp-grid { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .facts li:nth-child(3) { border-left: 0; padding-left: 0; }
  .faq-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .steps li { padding-top: 0; padding-left: 64px; }
  .steps li::after { display: none; }
}
@media (max-width: 760px) {
  :root { --nav-h: 70px; }
  .site-header.is-scrolled { padding-top: 10px; }
  .site-header.is-scrolled .nav { --nav-h: 60px; max-width: calc(100% - 20px); padding-inline: 16px 8px; border-radius: 16px; }
  .nav-cta { display: none; }
  .nav-toggle { margin-left: auto; }
  .brand-name { font-size: 1.2rem; }
  .brand-mark { width: 30px; height: 30px; }
  .is-scrolled .brand-mark { width: 26px; height: 26px; }

  /* Mobile hero: text at the top, yacht in the open band below it.
     The image starts a little way down the hero (--hero-img-top), which moves
     the yacht below the buttons. Raise or lower that value to shift the yacht. */
  .hero { --hero-img-top: 24%; align-items: flex-start; min-height: max(600px, 100svh); padding: calc(var(--nav-h) + 28px) 0 64px; }
  .hero-media { top: var(--hero-img-top); height: auto; bottom: 0; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.4rem); letter-spacing: -.025em; }
  .hero-lede { font-size: .95rem; line-height: 1.55; }
  /* Darker behind the text only, so the paragraph reads clearly while the
     yacht further down keeps its full brightness */
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(11, 31, 58, .94) 0%, rgba(11, 31, 58, .86) 46%, rgba(11, 31, 58, .5) 58%, rgba(11, 31, 58, 0) 66%),
      linear-gradient(0deg, rgba(11, 31, 58, .95) 0%, rgba(11, 31, 58, 0) 22%);
  }
  .hero-lede { color: rgba(247, 243, 234, .92); text-shadow: 0 1px 14px rgba(11, 31, 58, .9); }
  .hero-media img { object-position: center center; }
  .hero-lede { margin-top: 14px; }
  .hero-actions { gap: 10px; margin-top: 22px; }
  .hero-actions .btn { flex: 1 1 auto; min-height: 46px; padding: 0 16px; font-size: .875rem; }

  .finder { grid-template-columns: 1fr 1fr; min-height: 0; margin-top: -28px; padding: 12px; }
  .finder-submit { grid-column: 1 / -1; min-height: 54px; }
  .finder-field { padding: 10px 14px; }
  .fleet-grid { grid-template-columns: 1fr; }
  .section-head-split { align-items: flex-start; }
  .fleet-tools, .sort { width: 100%; }
  .sort select { flex: 1; }
  .exp { grid-template-columns: 1fr; }
  .exp img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
  .route-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: var(--radius); }
  .route-tab { min-height: 48px; padding: 6px 8px; border-radius: 10px; font-size: .82rem; line-height: 1.25; }
  .map-labels text, .map-tip { font-size: 18px; }
  .route-dot { stroke-width: 3; }
  .planner-form { grid-template-columns: 1fr 1fr; }
  .planner-form .field:nth-child(2) { grid-column: 1 / -1; }
  .addon-list { grid-template-columns: 1fr; }
  .review { width: min(300px, 80vw); }
  .gallery { columns: 2; column-gap: 10px; }
  .gallery li { margin-bottom: 10px; }
  .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; }
  .lb-prev { left: 16px; } .lb-next { right: 16px; }
  .lb-count { bottom: 32px; }
  .cta-actions { width: 100%; }
  .cta-actions .btn { flex: 1 1 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .float-btn { --size: 54px; right: 16px; }
  .call-float { bottom: calc(20px + var(--size) + 10px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .finder { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li { padding: 18px 12px 0 0; }
  .facts li + li { padding-left: 12px; }
  .facts li:nth-child(3) { padding-left: 0; }
  .facts strong { font-size: 1.1rem; }
  .planner-form { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .yacht-body { padding: 18px; }
}

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  /* Reviews become a swipeable row instead of moving on their own */
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; }
  .marquee-track { animation: none; }
  .marquee-group[aria-hidden="true"] { display: none; }
  .review { scroll-snap-align: start; }
  .marquee-toggle { display: none; }
}

/* ==========================================================================
   21. Yacht detail pages (/yachts/<name>/)
   ========================================================================== */
.page-yacht main { padding-top: calc(var(--nav-h) + 28px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; color: var(--slate); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-light); color: rgba(11, 31, 58, .3); }
.crumbs a:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }

.yp-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-top: 18px; }
.yp-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); letter-spacing: -.035em; line-height: 1.05; }
.yp-sub { margin-top: 8px; color: var(--slate); font-size: 1.02rem; }
.yp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.yp-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-light); border-radius: 999px; font-size: .88rem; font-weight: 500; }
.yp-chips .i { width: 17px; height: 17px; color: var(--gold-deep); }
.yp-head-side { display: flex; align-items: center; gap: 14px; }
.yp-price { text-align: right; line-height: 1.2; }
.yp-price strong { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; color: var(--gold-deep); }
.yp-price span { font-size: .85rem; color: var(--slate); }
.share-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-light); border-radius: 999px; background: var(--white); font-size: .88rem; font-weight: 600; transition: border-color .2s; }
.share-btn:hover { border-color: var(--gold); }
.share-btn .i { width: 16px; height: 16px; }

/* Gallery: one large cover + four smaller photos.
   Each photo fills a fixed cell, so tall or wide photos can never stretch the layout. */
.yp-gallery-wrap { position: relative; margin-top: 28px; }
.yp-gallery {
  display: grid; gap: 10px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: clamp(380px, 44vw, 580px);
}
.yp-gallery > li { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.yp-gallery > li:first-child { grid-row: 1 / 3; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.yp-gallery > li:nth-child(3) { border-top-right-radius: var(--radius-lg); }
.yp-gallery > li:nth-child(5) { border-bottom-right-radius: var(--radius-lg); }
.yp-gallery > li.is-extra { display: none; }
.yp-gallery .gallery-item { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; background: var(--navy); }
.yp-gallery .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.yp-gallery .gallery-item:hover img { transform: scale(1.03); opacity: .92; }
.show-all {
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
  border: 0; border-radius: 999px; background: var(--white); color: var(--navy); font-size: .88rem; font-weight: 600;
  box-shadow: 0 10px 24px -12px rgba(11, 31, 58, .6);
}
.show-all:hover { background: var(--gold); }
.show-all .i { width: 16px; height: 16px; }

/* Two columns: details + sticky booking card */
.yp-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-block: clamp(48px, 6vw, 80px); }
.yp-block + .yp-block { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--line-light); }
.yp-block h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.yp-lead { margin-top: 16px; font-size: 1.1rem; line-height: 1.7; color: var(--navy); }
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 24px 0 0; }
.spec-grid div { padding: 16px 18px; background: var(--ivory); border-radius: var(--radius); }
.spec-grid dt { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--slate); }
.spec-grid dt .i { width: 16px; height: 16px; color: var(--gold-deep); }
.spec-grid dd { margin: 6px 0 0; font-size: 1.15rem; font-weight: 700; }
.rate-table { width: 100%; margin-top: 20px; border-collapse: collapse; font-size: .98rem; }
.rate-table th, .rate-table td { padding: 14px 0; text-align: left; border-bottom: 1px solid var(--line-light); }
.rate-table th { font-weight: 500; color: var(--slate); }
.rate-table td { text-align: right; font-weight: 700; }
.rate-note { margin-top: 12px; font-size: .85rem; color: var(--slate); }
.good-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin-top: 22px; }
.good-list li { display: flex; gap: 12px; }
.good-list .i { width: 22px; height: 22px; margin-top: 2px; color: var(--gold-deep); }
.good-list strong { display: block; font-weight: 700; }
.good-list span { font-size: .92rem; color: var(--slate); }

.book {
  /* top is set by main.js so the whole card, including the button, always fits on screen */
  position: sticky; top: 100px;
  background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -40px rgba(11, 31, 58, .45);
  overflow: hidden;
}
.book-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 22px 24px 0; }
.book-top strong { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.book-top span { font-size: .88rem; color: var(--slate); }
.book .planner-form { grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 24px 22px; border: 0; border-radius: 0; }
.book .addon-list { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.book-extras { grid-column: 1 / -1; border: 1px solid var(--line-light); border-radius: var(--radius-sm); padding: 0 14px; }
.book-extras summary { display: flex; align-items: center; justify-content: space-between; min-height: 50px; cursor: pointer; list-style: none; font-size: .9rem; font-weight: 600; }
.book-extras summary::-webkit-details-marker { display: none; }
.book-extras summary::after { content: ""; width: 9px; height: 9px; border-right: 1.6px solid var(--navy); border-bottom: 1.6px solid var(--navy); transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); }
.book-extras[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.book-extras[open] { padding-bottom: 14px; }
.book-extras-count { margin-left: auto; margin-right: 12px; font-weight: 500; color: var(--slate); }
.book .addon { padding: 10px 12px; }
.book .summary { position: static; border-radius: 0; padding: 22px 24px 24px; }
.book .summary h3 { font-size: 1.1rem; }
.book-call { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-size: .9rem; color: var(--ivory-70); }
.book-call:hover { color: var(--gold); }
.book-call .i { width: 16px; height: 16px; }

/* Water activity tiles */
.addon-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.addon-tile { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; transition: border-color .25s var(--ease); }
.addon-tile.is-added { border-color: var(--navy); }
.addon-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--navy); }
.addon-tile-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 16px 18px 18px; }
.addon-tile h3 { flex-basis: 100%; font-size: 1.05rem; }
.addon-tile-price { font-weight: 700; color: var(--gold-deep); }
.addon-toggle { min-height: 38px; padding: 0 16px; border: 1px solid var(--navy); border-radius: 999px; background: transparent; font-size: .85rem; font-weight: 600; transition: background-color .2s, color .2s; }
.addon-toggle:hover { background: var(--ivory); }
.addon-toggle[aria-pressed="true"] { background: var(--navy); color: var(--ivory); }

.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 45;
  padding: 12px 20px; border-radius: 999px; background: var(--navy); color: var(--ivory);
  font-size: .9rem; font-weight: 500; box-shadow: 0 16px 32px -16px rgba(11, 31, 58, .7);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Mobile booking bar (hidden on desktop) */
.book-bar { display: none; }

@media (max-width: 1080px) {
  .yp-layout { grid-template-columns: 1fr; }
  .book { position: static; max-width: 640px; }
  .page-yacht .float-btn { display: none; }
  .book-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 42;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: rgba(11, 31, 58, .96); color: var(--ivory);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--gold-soft);
    transition: transform .35s var(--ease);
  }
  .book-bar.is-hidden { transform: translateY(110%); }
  .book-bar-price { line-height: 1.2; }
  .book-bar-price strong { display: block; font-size: 1.15rem; font-weight: 800; color: var(--gold); }
  .book-bar-price span { font-size: .8rem; color: var(--ivory-70); }
  .book-bar-actions { display: flex; gap: 8px; }
  .book-bar .call-mini { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #2F6BDB; color: var(--white); }
  .book-bar .call-mini svg { width: 20px; height: 20px; }
  .book-bar .wa-mini { background: #25D366; }
.book-bar .wa-mini svg { width: 22px; height: 22px; }
  /* Pulse ring: a green ring grows out from the button and fades */
  .book-bar .wa-mini { position: relative; animation: wa-mini-pulse 2s ease-out infinite; }
  .book-bar .wa-mini svg { animation: wa-mini-wiggle 4s ease-in-out infinite; }
  .book-bar .btn { min-height: 46px; padding: 0 18px; }
  .page-yacht .footer-bottom { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .addon-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .yp-head { align-items: flex-start; }
  .yp-head-side { width: 100%; justify-content: space-between; }
  .yp-price { text-align: left; }
  .yp-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; height: auto; gap: 6px; margin-inline: calc(var(--gutter) * -1); }
  .yp-gallery > li:nth-child(n) { border-radius: 0; }
  .yp-gallery > li:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .yp-gallery > li:not(:first-child) { aspect-ratio: 1; }
  .show-all { right: 12px; bottom: auto; top: 12px; min-height: 38px; padding: 0 14px; font-size: .82rem; }
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .good-list { grid-template-columns: 1fr; }
  .book .planner-form { grid-template-columns: 1fr 1fr; padding-inline: 18px; }
  .book-top { padding-inline: 18px; }
  .book .summary { padding-inline: 18px; }
  .addon-tiles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .addon-tile-body { padding: 12px; }
  .addon-tile h3 { font-size: .95rem; }
}


/* Visually hidden, still read by screen readers */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   22. Inner pages: Fishing, Sharing trips, Water activities, About
   ========================================================================== */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: calc(var(--nav-h) + 40px) 0 clamp(48px, 5vw, 64px);
  background: var(--navy); color: var(--ivory);
}
.page-hero-media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 31, 58, .94) 0%, rgba(11, 31, 58, .72) 45%, rgba(11, 31, 58, .25) 100%),
    linear-gradient(0deg, rgba(11, 31, 58, .6) 0%, rgba(11, 31, 58, 0) 40%);
}
.page-hero .crumbs { color: var(--ivory-70); }
.page-hero .crumbs li + li::before { color: rgba(247, 243, 234, .35); }
.page-hero .crumbs [aria-current] { color: var(--ivory); }
.page-hero .crumbs a:hover { color: var(--ivory); }
.page-hero h1 { margin-top: 18px; max-width: 14em; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -.035em; line-height: 1.05; }
.page-hero-lede { margin-top: 18px; max-width: 36em; font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--ivory-70); }
.page-hero .hero-actions { margin-top: 30px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-dark); border-radius: 999px; font-size: .88rem; background: rgba(11, 31, 58, .35); }
.hero-meta .i { width: 16px; height: 16px; color: var(--gold); }

/* Price cards */
.price-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.price-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-card {
  display: flex; flex-direction: column; padding: 28px 26px 26px;
  background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-lg);
}
.price-card.is-featured { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.price-tag { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--ivory); font-size: .78rem; font-weight: 700; color: var(--navy); }
.is-featured .price-tag { background: var(--gold); }
.price-card h3 { margin-top: 18px; font-size: 1.45rem; }
.price-card .price-sub { margin-top: 6px; color: var(--slate); font-size: .95rem; }
.is-featured .price-sub { color: var(--ivory-70); }
.price-rows { margin: 22px 0 0; }
.price-rows div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-light); }
.is-featured .price-rows div { border-color: var(--line-dark); }
.price-rows dt { color: var(--slate); font-size: .95rem; }
.is-featured .price-rows dt { color: var(--ivory-70); }
.price-rows dd { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; color: var(--gold-deep); }
.is-featured .price-rows dd { color: var(--gold); }
.price-card .btn { margin-top: auto; }
.price-card .price-rows + .btn, .price-card .check-list + .btn { margin-top: 26px; }
.price-note { margin-top: 16px; font-size: .88rem; color: var(--slate); }

/* Lists with ticks */
.check-list { display: grid; gap: 10px; margin-top: 20px; }
.check-list li { display: flex; gap: 10px; font-size: .95rem; }
.check-list .i { width: 18px; height: 18px; margin-top: 3px; color: var(--gold-deep); }
.is-featured .check-list .i, .section-navy .check-list .i { color: var(--gold); }

/* Two-column feature block (image + text) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split-media { border-radius: var(--radius-lg); overflow: hidden; background: var(--navy); aspect-ratio: 4 / 3; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split h2 + p { margin-top: 16px; color: var(--slate); font-size: 1.05rem; }
.section-navy .split h2 + p { color: var(--ivory-70); }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.feature-grid li { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--ivory); border-radius: var(--radius); font-size: .95rem; font-weight: 500; }
.feature-grid .i { width: 20px; height: 20px; color: var(--gold-deep); }

/* Time slots */
.slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.slots li { padding: 8px 14px; border: 1px solid var(--line-light); border-radius: 999px; font-size: .9rem; font-weight: 600; }
.section-navy .slots li { border-color: var(--line-dark); }

/* Choice cards (radio buttons) used in the calculators */
.choice-list { display: grid; gap: 10px; }
.choice {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--line-light); border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.choice:hover { border-color: var(--gold); }
.choice input { width: 18px; height: 18px; min-height: 0; padding: 0; accent-color: var(--navy); flex-shrink: 0; }
.choice span { flex: 1; font-size: .95rem; line-height: 1.35; }
.choice small { display: block; color: var(--slate); font-size: .82rem; }
.choice strong { font-size: .9rem; white-space: nowrap; }
.choice:has(input:checked) { border-color: var(--navy); background: var(--ivory); }
.field .choice, .choice-list .choice { font-weight: 400; }
.quote-counters { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.counter-note { grid-column: 1 / -1; font-size: .85rem; color: var(--slate); }

/* Comparison table */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line-light); border-radius: var(--radius-lg); background: var(--white); }
.compare { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .95rem; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line-light); vertical-align: top; }
.compare thead th { background: var(--ivory); font-size: .88rem; }
.compare tbody th { font-weight: 600; width: 28%; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

/* Water activities */
.activities-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 28px; align-items: start; }
.activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.activity {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--line-light); border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .25s var(--ease);
}
.activity.is-picked { border-color: var(--navy); }
.activity img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--navy); }
.activity-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 22px; }
.activity-body h3 { font-size: 1.25rem; }
.activity-body > p { margin-top: 8px; color: var(--slate); font-size: .92rem; }
.activity-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }
.activity-price strong { display: block; font-size: 1.25rem; font-weight: 800; color: var(--gold-deep); }
.activity-price span { font-size: .82rem; color: var(--slate); }
.stepper.is-small { min-height: 42px; }
.stepper.is-small button { width: 40px; }
.stepper.is-small output { min-width: 34px; font-size: .95rem; }
.activities-side { position: sticky; top: 100px; }

/* About */
.statement { max-width: 22em; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
.statement em { font-style: normal; color: var(--gold-deep); }
.mv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mv-card { padding: clamp(28px, 3.5vw, 44px); background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-lg); }
.mv-card.is-navy { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.mv-label { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 700; color: var(--gold-deep); }
.is-navy .mv-label { color: var(--gold); }
.mv-label .i { width: 18px; height: 18px; }
.mv-card h2 { margin-top: 14px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.mv-card p { margin-top: 16px; color: var(--slate); line-height: 1.75; }
.is-navy p { color: var(--ivory-70); }
.stat-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.stat-band li { padding: 8px 24px; border-left: 1px solid var(--line-dark); }
.stat-band li:first-child { padding-left: 0; border-left: 0; }
.stat-band strong { display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.03em; color: var(--gold); line-height: 1.1; }
.stat-band span { color: var(--ivory-70); font-size: .95rem; }
.offer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.offer {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 24px 22px;
  background: var(--ivory); border-radius: var(--radius-lg); transition: background-color .25s var(--ease);
}
.offer:hover { background: #F1EBDD; background: color-mix(in srgb, var(--ivory) 88%, var(--gold)); }
.offer h3 { font-size: 1.2rem; }
.offer p { color: var(--slate); font-size: .92rem; }
.offer span { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: .9rem; color: var(--gold-deep); }
.visit-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.visit-card li { display: flex; gap: 14px; padding: 22px; background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius); }
.visit-card .i { width: 22px; height: 22px; color: var(--gold-deep); margin-top: 2px; }
.visit-card strong { display: block; font-weight: 700; }
.visit-card span, .visit-card a { color: var(--slate); font-size: .95rem; }
.visit-card a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

@media (max-width: 1080px) {
  .price-cards { grid-template-columns: 1fr 1fr; }
  .activities-layout { grid-template-columns: 1fr; }
  .activities-side { position: static; }
  .offer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .mv-grid { grid-template-columns: 1fr; }
  .visit-card { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .stat-band li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 760px) {
  .page-hero { padding: calc(var(--nav-h) + 28px) 0 44px; }
  .page-hero::before { background: linear-gradient(180deg, rgba(11, 31, 58, .88) 0%, rgba(11, 31, 58, .7) 60%, rgba(11, 31, 58, .8) 100%); }
  .price-cards, .price-cards.cols-2 { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
  .activity-grid { grid-template-columns: 1fr; }
  .offer-grid { grid-template-columns: 1fr; }
  .quote-counters { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   23. Event pages (birthday, corporate, wedding) and the events overview
   ========================================================================== */
.event-controls {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end;
  padding: 22px 24px; margin-bottom: 26px;
  background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-lg);
}
.event-controls .field input { min-height: 50px; }
.yacht-media { position: relative; }
.yacht-badge {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  padding: 6px 12px; border-radius: 999px; background: var(--gold); color: var(--navy);
  font-size: .78rem; font-weight: 700; box-shadow: 0 8px 18px -10px rgba(11, 31, 58, .6);
}
.yacht-estimate { margin: -6px 0 18px; font-size: .9rem; color: var(--slate); }
.yacht-estimate strong { color: var(--navy); font-weight: 700; }

.pricing-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  padding: 26px 30px; border-radius: var(--radius-lg); background: var(--navy); color: var(--ivory);
}
.pricing-band strong { display: block; font-size: 1.25rem; font-weight: 700; }
.pricing-band p { color: var(--ivory-70); }

.idea-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.idea { padding: 24px 22px; background: var(--ivory); border-radius: var(--radius-lg); }
.idea .i { width: 26px; height: 26px; color: var(--gold-deep); }
.idea h3 { margin-top: 14px; font-size: 1.15rem; }
.idea p { margin-top: 8px; color: var(--slate); font-size: .93rem; }

.extras-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.extras-card { padding: 28px 26px; background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-lg); }
.extras-card.is-navy { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.extras-card h3 { font-size: 1.3rem; }
.extras-card > p { margin-top: 10px; color: var(--slate); }
.extras-card.is-navy > p { color: var(--ivory-70); }
.extras-card .price-rows { margin-top: 14px; }
.extras-card .price-rows dd { font-size: 1.1rem; }
.extras-card .link-btn { display: inline-block; margin-top: 16px; }
.extras-card.is-navy .btn { margin-top: 22px; }

.event-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.event-cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.event-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--white); border: 1px solid var(--line-light); border-radius: var(--radius-lg);
  transition: border-color .25s var(--ease);
}
.event-card:hover { border-color: var(--gold); }
.event-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--navy); }
.event-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.event-card h3 { font-size: 1.35rem; }
.event-card p { margin-top: 8px; color: var(--slate); font-size: .95rem; }
.event-card span { margin-top: auto; padding-top: 14px; font-weight: 700; color: var(--gold-deep); }

@media (max-width: 1080px) {
  .idea-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .extras-grid { grid-template-columns: 1fr; }
  .event-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .event-controls { grid-template-columns: 1fr 1fr; padding: 18px; }
  .event-controls .field:last-child { grid-column: 1 / -1; }
  .idea-grid, .event-cards, .event-cards.cols-2 { grid-template-columns: 1fr; }
  .pricing-band { padding: 22px; }
}
/* ==========================================================================
   24. Image slider (event pages)
   ========================================================================== */
.slider { position: relative; height: 100%; overflow: hidden; outline: none; }
.slider-track { display: flex; height: 100%; transition: transform .7s var(--ease); will-change: transform; }
.slider-slide { flex: 0 0 100%; height: 100%; }
.slider-slide img { width: 100%; height: 100%; object-fit: cover; }
.slider::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%; pointer-events: none;
  background: linear-gradient(0deg, rgba(11, 31, 58, .55), rgba(11, 31, 58, 0));
}
.slider-btn {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%;
  background: rgba(11, 31, 58, .45); color: var(--white);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.slider-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.slider-btn svg { width: 20px; height: 20px; }
.slider-prev { left: 14px; }
.slider-next { right: 14px; }
.slider-dots { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.slider-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .55); transition: width .3s var(--ease), background-color .3s var(--ease);
}
.slider-dots button[aria-current="true"] { width: 24px; background: var(--gold); }
@media (max-width: 760px) {
  .slider-btn { width: 38px; height: 38px; }
  .slider-prev { left: 10px; } .slider-next { right: 10px; }
}
/* ==========================================================================
   25. Pulsing WhatsApp button (add class "btn-pulse" to any button)
   ========================================================================== */
.btn-pulse { animation: btn-ring 2s ease-out infinite; }
.btn-pulse .i { animation: btn-wiggle 3s ease-in-out infinite; transform-origin: center; }
.btn-pulse:hover { animation-play-state: paused; }

@keyframes btn-ring {
  0%   { box-shadow: 0 0 0 0 rgba(201, 162, 74, .7); }
  70%  { box-shadow: 0 0 0 16px rgba(201, 162, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 162, 74, 0); }
}
@keyframes btn-wiggle {
  0%, 78%, 100% { transform: rotate(0); }
  82% { transform: rotate(-14deg); }
  86% { transform: rotate(12deg); }
  90% { transform: rotate(-8deg); }
  94% { transform: rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-pulse, .btn-pulse .i { animation: none; }
}
/* 26. Booking bar WhatsApp pulse (mobile) */
@keyframes wa-mini-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .65); }
  70%  { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@keyframes wa-mini-wiggle {
  0%, 80%, 100% { transform: rotate(0); }
  84% { transform: rotate(-14deg); }
  88% { transform: rotate(12deg); }
  92% { transform: rotate(-8deg); }
  96% { transform: rotate(4deg); }
}