:root {
  --green-950: #0b3028;
  --green-900: #103f34;
  --green-800: #155a49;
  --green-700: #1f745e;
  --green-600: #288b70;
  --mint-100: #e9f6f0;
  --mint-50: #f4fbf7;
  --sand: #f7f4ec;
  --ink: #17332f;
  --muted: #61736f;
  --line: #dce8e3;
  --white: #fff;
  --shadow-sm: 0 8px 24px rgba(17, 67, 55, .08);
  --shadow-lg: 0 24px 60px rgba(8, 41, 33, .16);
  --radius-lg: 28px;
  --radius-md: 18px;
}

* { box-sizing: border-box; }

html {
  width: 100%;
  max-width: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

/* One-time section entry motion, matching the About page behavior. */
.homepage.home-motion-ready [data-home-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
}
.homepage.home-motion-ready [data-home-reveal].home-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Keep mobile scrolling on the document viewport so browser chrome can
   retract normally instead of treating the page as an inner scroll panel. */
@media (max-width: 980px) {
  html,
  body.homepage {
    height: auto;
    min-height: 100%;
    overflow-y: visible;
    touch-action: pan-y;
  }
}

.homepage {
  background-color: #fff;
  background-image: url("../img/HomeBG.png");
  background-repeat: repeat-y;
  background-position: center top;
  background-size: 100% auto;
}

.homepage main {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: transparent;
}

.homepage .wave-container {
  margin-top: 0;
  background: transparent;
}

button,
input { font: inherit; }

a { color: inherit; }

img { max-width: 100%; }

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

.section-shell,
.hero-shell {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.section-kicker,
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-700);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.section-kicker::before,
.hero-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}

.section-heading h2,
.fe-text h2,
.dest-text h2 {
  margin: 9px 0 0;
  color: var(--green-950);
  font-size: clamp(1.8rem, 3vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.04em;
}

.section-heading > p {
  max-width: 440px;
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

/* Hero */
.home-hero {
  position: relative;
  z-index: 20;
  min-height: min(650px, calc(100vh - 125px));
  display: grid;
  align-items: center;
  overflow: visible;
  isolation: isolate;
  background: url("../img/herohomepage2.png") center 48% / cover no-repeat;
}

.home-hero::before,
.home-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.home-hero::before {
  width: 360px;
  height: 360px;
  right: -130px;
  top: -150px;
  background: rgba(112, 220, 178, .22);
}

.home-hero::after {
  width: 260px;
  height: 260px;
  left: 40%;
  bottom: -190px;
  border: 50px solid rgba(255, 255, 255, .1);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(5, 37, 30, .92) 0%, rgba(7, 53, 43, .77) 48%, rgba(10, 55, 45, .36) 100%), linear-gradient(0deg, rgba(6, 31, 26, .38), transparent 55%);
}

.hero-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, .78fr);
  align-items: center;
  gap: clamp(42px, 6vw, 84px);
  padding-block: 66px;
}

.hero-content {
  max-width: 625px;
  min-width: 0;
  color: #fff;
  transform: translateY(-18px);
}

.hero-eyebrow { color: #bcebd8; font-size: .68rem; }

.hero-content h1 {
  max-width: 590px;
  margin: 15px 0 16px;
  font-size: clamp(2.5rem, 3.75vw, 3.65rem);
  font-weight: 800;
  letter-spacing: -.052em;
  line-height: 1.03;
  text-wrap: balance;
}

.hero-content h1 span { color: #9be3c5; }

.hero-tagline {
  max-width: 560px;
  margin: 0 0 23px;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(.9rem, 1.2vw, 1rem);
  line-height: 1.65;
}

.hero-intro,
.hero-planner { display: contents; }
.hero-search-copy { display: contents; }

.hero-search {
  position: relative;
  z-index: 40;
  display: flex;
  width: min(590px, 100%);
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 13px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-lg);
}

.hero-search-field {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
}

.hero-search svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: var(--green-700);
}

.hero-search input {
  min-width: 0;
  width: 100%;
  padding: 10px 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: .86rem;
}

.hero-search input::placeholder { color: #7b8c87; }

@media (min-width: 761px) {
  .homepage .hero-search-field {
    min-height: 42px;
  }

  .homepage .hero-search-field > svg {
    display: block;
    transform: translateY(1px);
  }

  .homepage .hero-search input {
    height: 42px;
    padding-block: 0;
    line-height: 42px;
  }
}

.hero-search > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 17px;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: var(--green-700);
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.hero-search > button svg { fill: #fff; }
.hero-search > button:hover { transform: translateY(-1px); background: var(--green-900); box-shadow: 0 8px 18px rgba(16, 63, 52, .22); }

.hero-search-suggestions {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  z-index: 60;
  width: 100%;
  max-height: min(410px, 62vh);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 0;
  border: 1px solid #dbe8e3;
  border-radius: 14px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 20px 48px rgba(3, 35, 28, .26);
  scrollbar-color: #9dc6b8 transparent;
  scrollbar-width: thin;
  transform-origin: top center;
  animation: heroSearchMenuIn .18s ease both;
}
.hero-search-suggestions[hidden] { display: none; }
.hero-suggestion-section + .hero-suggestion-section { margin-top: 5px; padding-top: 6px; border-top: 1px solid #edf3f0; }
.hero-suggestion-heading { margin: 0; padding: 8px 15px 6px; color: #315d51; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-suggestion-option {
  width: 100%;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.hero-suggestion-option:hover,
.hero-suggestion-option.is-active { background: #eef7f3; }
.hero-suggestion-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: var(--green-800); background: #e4f2ed; }
.hero-suggestion-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-suggestion-copy { min-width: 0; }
.hero-suggestion-copy strong,
.hero-suggestion-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-suggestion-copy strong { color: var(--green-950); font-size: .82rem; line-height: 1.3; }
.hero-suggestion-copy small { margin-top: 2px; color: #71847e; font-size: .67rem; }
.hero-suggestion-empty { margin: 0; padding: 14px 16px; color: #6c817a; font-size: .78rem; }
@keyframes heroSearchMenuIn { from { opacity: 0; transform: translateY(-5px) scale(.99); } to { opacity: 1; transform: none; } }

.hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.hero-mobile-nav,
.mobile-floating-book { display: none; }

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.hero-btn:hover { transform: translateY(-2px); }
.hero-btn--primary { color: #fff; background: var(--green-700); box-shadow: 0 9px 22px rgba(17, 75, 61, .18); }
.hero-btn--primary:hover { background: var(--green-900); box-shadow: 0 12px 26px rgba(17, 75, 61, .24); }
.hero-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .42); background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); }
.hero-btn--ghost:hover { border-color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .18); }

.hero-visual {
  width: min(100%, 430px);
  justify-self: end;
}

.hero-route-map {
  position: relative;
  overflow: hidden;
  min-height: 462px;
  border: 1px solid rgba(205, 241, 226, .3);
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(155deg, rgba(22, 104, 83, .82), rgba(6, 46, 38, .9));
  box-shadow: 0 28px 70px rgba(1, 27, 21, .34);
  backdrop-filter: blur(14px);
}

.hero-route-map::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 75% 18%, rgba(151, 226, 196, .2), transparent 35%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}

.hero-map-heading {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 21px 9px;
}
.hero-map-heading div > span,
.hero-map-heading div > strong { display: block; }
.hero-map-heading div > span { margin-bottom: 4px; color: #aee5ce; font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-map-heading div > strong { font-size: 1rem; letter-spacing: -.02em; }
.hero-map-duration { padding: 6px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.07); font-size: .57rem; font-weight: 700; }

.hero-map-canvas { position: relative; height: 280px; margin-inline: 12px; }
.hero-map-contour { position: absolute; border: 1px solid rgba(185, 231, 212, .14); border-radius: 50%; pointer-events: none; }
.hero-map-contour--one { width: 160px; height: 160px; left: 85px; top: 48px; }
.hero-map-contour--two { width: 90px; height: 90px; right: -12px; top: 10px; box-shadow: 0 0 0 20px rgba(185,231,212,.025); }

.hero-map-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-map-trail path { fill: none; stroke-linecap: round; }
.hero-map-trail-shadow { stroke: rgba(3, 32, 25, .3); stroke-width: 7; }
.hero-map-trail-line { stroke: #bde9d5; stroke-width: 2.2; stroke-dasharray: 7 10; animation: heroRoute 12s linear infinite; }

.hero-map-stop {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.hero-map-stop--one { left: 2px; top: 177px; }
.hero-map-stop--two { left: 113px; top: 104px; }
.hero-map-stop--three { right: 1px; top: 10px; flex-direction: row-reverse; text-align: right; }
.hero-stop-image { position: relative; width: 54px; height: 54px; flex: 0 0 auto; padding: 4px; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: rgba(6,51,41,.8); box-shadow: 0 10px 25px rgba(1,25,20,.28); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.hero-stop-image::after { content: ""; position: absolute; width: 8px; height: 8px; right: -2px; bottom: 3px; border: 2px solid #fff; border-radius: 50%; background: #66c7a0; }
.hero-stop-image img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.hero-stop-label { padding: 7px 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(6,48,39,.68); backdrop-filter: blur(7px); transition: background .2s ease, transform .2s ease; }
.hero-stop-label strong,
.hero-stop-label small { display: block; white-space: nowrap; }
.hero-stop-label strong { font-size: .66rem; }
.hero-stop-label small { margin-top: 2px; color: rgba(255,255,255,.6); font-size: .52rem; }
.hero-map-stop:hover .hero-stop-image { transform: translateY(-3px) scale(1.04); border-color: #b9ead5; }
.hero-map-stop:hover .hero-stop-label { transform: translateY(-2px); background: rgba(13,76,61,.86); }
.hero-map-stop.active .hero-stop-image { border-color: #d5f5e7; box-shadow: 0 0 0 5px rgba(153,224,194,.14), 0 12px 30px rgba(1,25,20,.32); }
.hero-map-stop.active .hero-stop-label { background: rgba(24,118,93,.9); }
.hero-map-stop:focus-visible { outline: 2px solid #c7f0de; outline-offset: 5px; border-radius: 12px; }

.hero-route-boat {
  position: absolute;
  z-index: 6;
  left: 36px;
  top: 205px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: var(--green-900);
  background: #fff;
  box-shadow: 0 10px 25px rgba(1,29,23,.3);
  pointer-events: none;
  transition: left .95s cubic-bezier(.22,.8,.25,1), top .95s cubic-bezier(.22,.8,.25,1), transform .4s ease;
  animation: heroBoatFloat 2.6s ease-in-out infinite;
}
.hero-route-boat svg { width: 26px; height: 26px; fill: currentColor; overflow: visible; }
.hero-route-boat .boat-wave { fill: none; stroke: #43a985; stroke-width: 1.7; stroke-linecap: round; }
.hero-visual[data-active-stop="1"] .hero-route-boat { left: 143px; top: 134px; transform: rotate(-9deg); }
.hero-visual[data-active-stop="2"] .hero-route-boat { left: 306px; top: 58px; transform: rotate(-18deg); }

.hero-map-summary {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  margin: 0 14px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 15px;
  background: rgba(4,39,32,.78);
  box-shadow: 0 10px 28px rgba(1,26,20,.2);
  backdrop-filter: blur(12px);
}
.hero-map-summary > img { width: 50px; height: 48px; display: block; border-radius: 10px; object-fit: cover; transition: opacity .2s ease, transform .25s ease; }
.hero-map-summary.is-changing > img { opacity: .35; transform: scale(.94); }
.hero-map-summary div { min-width: 0; }
.hero-map-summary div span,
.hero-map-summary div strong,
.hero-map-summary div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-map-summary div span { margin-bottom: 2px; color: #9edfc3; font-size: .52rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-map-summary div strong { font-size: .78rem; }
.hero-map-summary div small { margin-top: 2px; color: rgba(255,255,255,.58); font-size: .56rem; }

.hero-visual-action { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; color: #fff; background: rgba(255,255,255,.09); font-size: .62rem; font-weight: 800; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.hero-visual-action:hover,
.hero-visual-action:focus-visible { transform: translateY(-2px); background: rgba(255,255,255,.19); outline: 2px solid #b7e8d3; outline-offset: 2px; }

.hero-switch-progress { position: absolute; left: 28px; right: 28px; bottom: 6px; z-index: 8; height: 2px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.hero-switch-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: #a8e4ca; }
.hero-visual.is-auto-playing .hero-switch-progress span { animation: heroSwitchProgress 5.5s linear forwards; }

@keyframes heroRoute { to { stroke-dashoffset: -170; } }
@keyframes heroBoatFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -5px; } }
@keyframes heroSwitchProgress { from { width: 0; } to { width: 100%; } }

/* Floating destination card composition */
.hero-floating-scene { position: relative; width: 100%; min-height: 470px; isolation: isolate; perspective: 1100px; }
.hero-floating-scene::before { content: ""; position: absolute; inset: 45px 12px 25px 38px; z-index: -3; border: 1px solid rgba(202,240,224,.19); border-radius: 44% 38% 30% 42%; background: radial-gradient(circle at 70% 20%, rgba(143,220,188,.18), transparent 42%); }

.hero-scene-trail { position: absolute; inset: -8px -14px 0 -18px; z-index: -1; width: calc(100% + 34px); height: 100%; overflow: visible; pointer-events: none; }
.hero-scene-trail path { fill: none; stroke: rgba(198,239,222,.85); stroke-width: 2.1; stroke-linecap: round; stroke-dasharray: 6 10; filter: drop-shadow(0 2px 3px rgba(2,31,24,.3)); animation: heroRoute 13s linear infinite; }
.hero-scene-ring { position: absolute; z-index: -2; border: 1px solid rgba(197,238,221,.17); border-radius: 50%; pointer-events: none; }
.hero-scene-ring--one { width: 118px; height: 118px; right: -31px; top: 28px; box-shadow: 0 0 0 24px rgba(197,238,221,.025); }
.hero-scene-ring--two { width: 64px; height: 64px; left: 2px; bottom: 28px; }

.hero-visual-card { position: absolute; left: 55px; top: 18px; width: 330px; height: 400px; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.34); border-radius: 28px; background: var(--green-900); box-shadow: 0 30px 70px rgba(1,25,20,.36); transform-style: preserve-3d; transition: transform .22s ease, box-shadow .25s ease; }
.hero-floating-scene.is-interacting .hero-visual-card { box-shadow: 0 38px 82px rgba(1,25,20,.43); }
.hero-visual-card > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: opacity .24s ease, transform .8s ease; }
.hero-visual-card.is-changing > img { opacity: .3; transform: scale(1.045); }
.hero-floating-scene:hover .hero-visual-card > img { transform: scale(1.025); }
.hero-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,39,31,.03) 32%, rgba(3,32,25,.94) 100%); pointer-events: none; }
.hero-visual-card figcaption { position: absolute; left: 22px; right: 92px; bottom: 22px; z-index: 2; color: #fff; }
.hero-visual-card figcaption span,
.hero-visual-card figcaption strong,
.hero-visual-card figcaption small { display: block; }
.hero-visual-card figcaption span { margin-bottom: 5px; color: #afe6ce; font-size: .57rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-visual-card figcaption strong { margin-bottom: 4px; font-size: 1.18rem; letter-spacing: -.025em; }
.hero-visual-card figcaption small { color: rgba(255,255,255,.65); font-size: .62rem; }
.hero-visual-card .hero-visual-action { position: absolute; right: 18px; bottom: 20px; z-index: 3; }

.hero-float-note { position: absolute; z-index: 8; border: 1px solid rgba(255,255,255,.75); color: var(--green-950); background: rgba(255,255,255,.95); box-shadow: 0 15px 35px rgba(2,29,23,.25); backdrop-filter: blur(12px); }
.hero-float-note--favorite { left: 2px; top: 80px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 14px; animation: heroNoteFloat 5s ease-in-out infinite; }
.hero-float-note--favorite > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--green-700); font-size: .72rem; }
.hero-float-note--favorite div strong,
.hero-float-note--favorite div small { display: block; }
.hero-float-note--favorite div strong { margin-bottom: 2px; font-size: .68rem; }
.hero-float-note--favorite div small { color: var(--muted); font-size: .55rem; }
.hero-float-note--islands { right: -8px; top: 35px; display: grid; padding: 12px 15px; border-radius: 14px; animation: heroNoteFloat 5.7s ease-in-out .8s infinite reverse; }
.hero-float-note--islands strong { color: var(--green-700); font-size: 1.25rem; line-height: 1; }
.hero-float-note--islands span { margin-top: 4px; color: var(--muted); font-size: .57rem; font-weight: 700; }

.hero-island-selector { position: absolute; z-index: 9; right: -13px; top: 140px; display: grid; justify-items: center; gap: 6px; padding: 8px 5px; border: 1px solid rgba(255,255,255,.27); border-radius: 18px; background: rgba(5,49,39,.78); box-shadow: 0 15px 34px rgba(2,27,21,.24); backdrop-filter: blur(12px); }
.hero-selector-label { margin-bottom: 3px; color: rgba(255,255,255,.64); font-size: .45rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.hero-selector-viewport { width: 56px; height: 152px; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: none; }
.hero-selector-viewport::-webkit-scrollbar { display: none; }
.hero-selector-track { display: grid; justify-items: center; gap: 8px; padding: 8px; }
.hero-destination-option { position: relative; width: 40px; height: 40px; padding: 3px; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(255,255,255,.08); cursor: pointer; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.hero-destination-option img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.hero-destination-option > span { position: absolute; right: -4px; bottom: -3px; min-width: 17px; height: 17px; display: grid; place-items: center; border: 2px solid var(--green-900); border-radius: 50%; color: var(--green-950); background: #d2f0e2; font-size: .42rem; font-weight: 900; }
.hero-destination-option:hover { transform: translateX(-3px) scale(1.06); border-color: #d6f4e7; }
.hero-destination-option.active { border-color: #fff; box-shadow: 0 0 0 5px rgba(168,228,202,.18); transform: scale(1.08); }
.hero-destination-option:focus-visible { outline: 2px solid #c8f1df; outline-offset: 3px; }

.hero-scene-boat { position: absolute; z-index: 7; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: var(--green-900); background: #fff; box-shadow: 0 12px 28px rgba(1,28,22,.3); pointer-events: none; transition: left .9s cubic-bezier(.22,.8,.25,1), top .9s cubic-bezier(.22,.8,.25,1), transform .6s ease; animation: heroBoatFloat 2.6s ease-in-out infinite; }
.hero-scene-boat svg { width: 68%; height: 68%; fill: currentColor; overflow: visible; }
.hero-scene-boat .boat-wave { fill: none; stroke: #43a985; stroke-width: 1.7; stroke-linecap: round; }
.hero-scene-boat--main { left: 17px; top: 337px; width: 43px; height: 43px; }
.hero-visual[data-active-stop="1"] .hero-scene-boat--main { left: 127px; top: 255px; transform: rotate(-10deg); }
.hero-visual[data-active-stop="2"] .hero-scene-boat--main { left: 385px; top: 92px; transform: rotate(-18deg); }
.hero-scene-boat--small { left: 20px; top: 20px; width: 27px; height: 27px; opacity: .66; animation: heroBoatDrift 7s ease-in-out infinite; }

.hero-floating-scene > .hero-switch-progress { left: 78px; right: 70px; bottom: 37px; }

@keyframes heroNoteFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes heroBoatDrift { 0%,100% { transform: translate(0,0) rotate(-12deg); } 50% { transform: translate(-18px,10px) rotate(-4deg); } }

/* Continuous service ribbon attached to the hero */
.hero-service-ribbon {
  position: relative;
  z-index: 15;
  width: 100%;
  height: 56px;
  overflow: hidden;
  border-top: 1px solid #d4e4dd;
  border-bottom: 1px solid #dce9e4;
  background: linear-gradient(90deg, #f7fbf9, #fff 34%, #fff 66%, #f7fbf9);
  box-shadow: 0 8px 22px rgba(10, 55, 44, .07);
}

.hero-ribbon-track {
  width: max-content;
  height: 100%;
  display: flex;
  will-change: transform;
  animation: heroRibbonMoveRight 34s linear infinite;
}

.hero-service-ribbon:hover .hero-ribbon-track,
.hero-service-ribbon:focus-within .hero-ribbon-track { animation-play-state: paused; }

.hero-ribbon-group {
  --hero-ribbon-item-gap: clamp(30px, 3vw, 52px);
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--hero-ribbon-item-gap);
  padding: 0 var(--hero-ribbon-item-gap) 0 0;
}

.hero-ribbon-item {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: #49645d;
  font-size: .72rem;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .015em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease, background .2s ease;
}

.hero-ribbon-item:hover,
.hero-ribbon-item:focus-visible { color: var(--green-800); background: #eff8f4; outline: 0; }
.hero-ribbon-item:focus-visible { box-shadow: inset 0 0 0 2px #78bda3; }

.hero-ribbon-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #dbe9e3;
  border-radius: 50%;
  background: #f2f8f5;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.hero-ribbon-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(35%) sepia(29%) saturate(1015%) hue-rotate(112deg) brightness(91%) contrast(88%);
}
.hero-ribbon-item:hover .hero-ribbon-icon { transform: translateY(-2px); border-color: #a9d3c2; background: #e3f3ec; }
.hero-ribbon-item i { width: 4px; height: 4px; margin-left: 13px; border-radius: 50%; background: #91bbaa; box-shadow: 0 0 0 4px rgba(145,187,170,.11); }

.hero-ribbon-fade { position: absolute; top: 0; bottom: 0; z-index: 3; width: 65px; pointer-events: none; }
.hero-ribbon-fade--left { left: 0; background: linear-gradient(90deg, #f7fbf9 18%, transparent); }
.hero-ribbon-fade--right { right: 0; background: linear-gradient(270deg, #f7fbf9 18%, transparent); }

@keyframes heroRibbonMoveRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Trip categories */
.booking-types {
  padding: 72px 0;
  background: transparent;
}

.section-heading--compact { margin-bottom: 25px; }

.section-heading--compact > p {
  max-width: 390px;
  margin: 0 0 5px;
  padding: 15px 17px;
  border-left: 3px solid var(--green-700);
  color: var(--muted);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 9px 25px rgba(11, 63, 50, .05);
  font-size: .74rem;
  line-height: 1.6;
}

.bt-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.bt-card-link {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(12, 67, 53, .02);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.bt-card-link:hover,
.bt-card-link:focus-visible {
  transform: translateY(-5px);
  border-color: #acd5c4;
  box-shadow: var(--shadow-sm);
  outline: 0;
}

.bt-icon-wrap {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--mint-100);
  transition: transform .24s ease, background .24s ease;
}

.bt-card-link:hover .bt-icon-wrap { transform: rotate(-4deg) scale(1.05); background: #d9f0e5; }
.bt-icon-wrap img { width: 29px; height: 29px; object-fit: contain; }
.bt-card-copy { min-width: 0; }
.bt-card-copy strong,
.bt-card-copy small { display: block; }
.bt-card-copy strong { margin-bottom: 5px; font-size: .95rem; }
.bt-card-copy small { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.bt-arrow { color: var(--green-700); font-size: 1.2rem; transition: transform .2s ease; }
.bt-card-link:hover .bt-arrow { transform: translateX(4px); }

/* Tour categories */
.tour-categories { position: relative; padding: 72px 0; overflow: hidden; background: transparent; }
.tc-panel {
  position: relative;
  isolation: isolate;
  padding: 0;
  overflow: visible;
}
.tc-panel::before,
.tc-panel::after { display: none; }
.tc-heading { max-width: 600px; margin: 0 auto 27px; text-align: center; }
.tc-heading .section-kicker { justify-content: center; }
.tc-heading h2 { margin: 9px 0 8px; color: var(--green-950); font-size: clamp(1.9rem, 3vw, 2.65rem); line-height: 1.1; letter-spacing: -.045em; }
.tc-heading p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.65; }
.tc-viewport { padding: 16px 8px 66px; overflow: hidden; scroll-behavior: smooth; scrollbar-width: none; }
.tc-viewport::-webkit-scrollbar { display: none; }
.tc-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: start; gap: clamp(24px, 2.2vw, 34px); }
.tc-card { --card-tilt: -5deg; --arc-y: 44px; min-width: 0; display: grid; justify-items: center; color: var(--green-950); text-align: center; text-decoration: none; outline: 0; transform: translateY(var(--arc-y)); }
.tc-card:nth-child(2) { --card-tilt: -2.4deg; --arc-y: 16px; }
.tc-card:nth-child(3) { --card-tilt: 0deg; --arc-y: 0; }
.tc-card:nth-child(4) { --card-tilt: 2.4deg; --arc-y: 16px; }
.tc-card:nth-child(5) { --card-tilt: 5deg; --arc-y: 44px; }
.tc-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: .94;
  display: block;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 23px;
  background: var(--mint-100);
  box-shadow: 0 13px 28px rgba(10, 61, 48, .14);
  transform: rotate(var(--card-tilt)) translateY(0);
  transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .38s ease;
}
.tc-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(4, 42, 33, .32)); pointer-events: none; }
.tc-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.tc-card-number { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 5px 8px; border: 1px solid rgba(255,255,255,.46); border-radius: 999px; color: #fff; background: rgba(6,48,39,.54); backdrop-filter: blur(7px); font-size: .58rem; font-weight: 800; letter-spacing: .08em; }
.tc-card-icon { position: absolute; right: 11px; bottom: 11px; z-index: 2; width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; color: var(--green-800); background: rgba(255,255,255,.92); box-shadow: 0 6px 16px rgba(4,38,30,.17); font-size: .98rem; }
.tc-card > strong { margin-top: 14px; font-size: clamp(.83rem, 1.1vw, .97rem); line-height: 1.3; }
.tc-card > small { margin-top: 4px; color: #71847e; font-size: .64rem; font-weight: 600; }
.tc-card > small span { display: inline-block; color: var(--green-700); transition: transform .2s ease; }
.tc-card:hover .tc-card-media,
.tc-card:focus-visible .tc-card-media,
.tc-card.is-active .tc-card-media { border-color: #c6eadb; box-shadow: 0 18px 36px rgba(9, 69, 53, .22); transform: rotate(var(--card-tilt)) translateY(-9px); }
.tc-card:hover .tc-card-media img,
.tc-card:focus-visible .tc-card-media img,
.tc-card.is-active .tc-card-media img { transform: scale(1.075); filter: saturate(1.08); }
.tc-card:hover > small span,
.tc-card:focus-visible > small span { transform: translateX(4px); }
.tc-card:focus-visible .tc-card-media { outline: 3px solid rgba(31,116,94,.3); outline-offset: 3px; }
.tc-controls { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 8px; }
.tc-arrow { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--green-800); background: #fff; box-shadow: 0 6px 16px rgba(13,65,52,.07); cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.tc-arrow:hover,
.tc-arrow:focus-visible { color: #fff; background: var(--green-700); transform: translateY(-2px); outline: 0; }
.tc-dots { display: flex; align-items: center; justify-content: center; gap: 7px; }
.tc-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 99px; background: #b8c9c2; cursor: pointer; transition: width .25s ease, background .25s ease; }
.tc-dots button.is-active { width: 25px; background: var(--green-700); }

/* At-a-glance statistics */
.home-stats {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #0f5847;
}

.home-stats::before,
.home-stats::after {
  display: none;
}

.home-stats::before {
  width: 340px;
  height: 340px;
  top: -245px;
  left: 34%;
  border: 1px solid rgba(202, 241, 225, .16);
  box-shadow: 0 0 0 48px rgba(202, 241, 225, .035);
}

.home-stats::after {
  width: 210px;
  height: 210px;
  right: -90px;
  bottom: -150px;
  background: rgba(120, 204, 169, .12);
}

.home-stats-shell {
  position: relative;
  z-index: 1;
  padding-block: 38px;
}

.home-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.home-stat {
  min-width: 0;
  padding: 6px clamp(24px, 4vw, 52px);
  border-left: 1px solid rgba(255, 255, 255, .17);
  text-align: center;
}
.home-stat:first-child { border-left: 0; padding-left: 0; }
.home-stat:last-child { padding-right: 0; }
.home-stat dt,
.home-stat dd { margin: 0; }
.home-stat dt > strong,
.home-stat dt > span { display: block; }
.home-stat dt > strong {
  margin-bottom: 5px;
  color: #fff;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1;
  letter-spacing: -.055em;
}
.home-stat dt > strong span { color: #91d9ba; font-size: .55em; }
.home-stat dt > span {
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.3;
}
.home-stat dd {
  margin-top: 5px;
  color: rgba(255, 255, 255, .58);
  font-size: .65rem;
  line-height: 1.45;
}

.booking-stats {
  isolation: isolate;
  background: #0d5947;
}
.booking-stats::before,
.booking-stats::after { display: none; }
.booking-stats .home-stats-shell { padding-block: 72px; }
.booking-stats-heading { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr); align-items: end; gap: clamp(42px, 8vw, 105px); margin-bottom: 34px; }
.booking-stats-heading .section-kicker { color: #aee4cd; }
.booking-stats-heading h2 { max-width: 690px; margin: 10px 0 0; color: #fff; font-size: clamp(1.75rem, 3vw, 2.7rem); line-height: 1.12; letter-spacing: -.045em; }
.booking-stats-intro { padding-left: 18px; border-left: 2px solid rgba(174, 228, 205, .65); }
.booking-stats-intro p { margin: 0 0 14px; color: rgba(255,255,255,.7); font-size: .8rem; line-height: 1.7; }
.booking-stats-intro a { min-height: 39px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.72); border-radius: 10px; color: var(--green-900); background: #fff; box-shadow: 0 9px 22px rgba(3,35,28,.2); font-size: .73rem; font-weight: 800; text-decoration: none; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.booking-stats-intro a span { transition: transform .2s ease; }
.booking-stats-intro a:hover,
.booking-stats-intro a:focus-visible { transform: translateY(-2px); background: #effaf5; box-shadow: 0 13px 27px rgba(3,35,28,.26); outline: 0; }
.booking-stats-intro a:hover span,
.booking-stats-intro a:focus-visible span { transform: translateX(5px); }
.booking-stats .home-stats-grid { gap: 12px; }
.booking-stats .home-stat {
  --stat-accent: #9adfc5;
  --stat-accent-rgb: 154, 223, 197;
  position: relative;
  min-height: 218px;
  display: grid;
  align-content: end;
  padding: 20px;
  overflow: hidden;
  border: 1px solid #4a8b78;
  border-radius: 17px;
  background: #176650;
  text-align: left;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.booking-stats .home-stat:nth-child(n) { --stat-accent: #9adfc5; --stat-accent-rgb: 154, 223, 197; }
.booking-stats .home-stat:first-child,
.booking-stats .home-stat:last-child { padding-inline: 20px; }
.booking-stats .home-stat::before { display: none; }
.booking-stats .home-stat::after { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; background: #79c9ad; opacity: .9; }
.booking-stats .home-stat:hover { transform: translateY(-6px); border-color: #72b39e; background: #1a7058; box-shadow: 0 18px 34px rgba(3,34,27,.18); }
.booking-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 23px; }
.booking-stat-icon { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid #69ac96; border-radius: 11px; color: #b6ead7; background: #1d725c; }
.booking-stat-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.booking-stat-spark { width: 78px; height: 33px; display: block; opacity: .9; }
.booking-stat-spark svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--stat-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.booking-stat-spark polyline { stroke-dasharray: 100; stroke-dashoffset: 100; animation: bookingTrendDraw 2.2s ease forwards; }
.booking-stat-spark path { stroke-width: 1.8; }
.booking-stats .home-stat dt > strong { margin-bottom: 7px; font-size: clamp(1.75rem, 2.6vw, 2.4rem); }
.booking-stats .home-stat dt > strong span { color: var(--stat-accent); }
.booking-stats .home-stat dt > span { color: #eaf8f2; font-size: .72rem; }
.booking-stats .home-stat dd { margin-top: 6px; color: rgba(255,255,255,.57); font-size: .63rem; }
.booking-stat-trend { width: max-content; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 5px 8px; border: 1px solid #4e937e; border-radius: 999px; color: #b6ead7; background: #125541; font-size: .56rem; font-weight: 800; letter-spacing: .015em; }
.booking-stat-trend i { font-size: .78rem; font-style: normal; line-height: 1; }
@keyframes bookingTrendDraw { to { stroke-dashoffset: 0; } }

/* Recently viewed */
.recent-section {
  position: relative;
  min-height: calc(100vh - 120px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 72px 0;
  background-color: #0d4438;
  background-image:
    radial-gradient(circle at 92% 4%, rgba(126, 214, 177, .09), transparent 25%),
    linear-gradient(125deg, #093d33 0%, #105746 54%, #176b57 100%);
}
.recent-section::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  top: -230px;
  right: -90px;
  border: 1px solid rgba(195, 237, 219, .15);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(195, 237, 219, .035);
  pointer-events: none;
}
.recent-section::after {
  content: "";
  position: absolute;
  left: 38%;
  bottom: -185px;
  width: 420px;
  height: 260px;
  border: 1px solid rgba(190, 235, 217, .06);
  border-radius: 50%;
  transform: rotate(-12deg);
  pointer-events: none;
}
.recent-section[hidden] { display: none; }
.recent-section .section-shell { position: relative; z-index: 1; }
.recent-section .section-heading { margin-bottom: 22px; }
.recent-section .section-kicker { color: #aee4cd; }
.recent-section .section-heading h2 { color: #fff; }
.recent-section .carousel-controls button { border-color: rgba(255,255,255,.3); color: #fff; background: rgba(255,255,255,.09); }
.recent-section .carousel-controls button:hover { color: var(--green-900); background: #fff; }

.carousel-controls { display: flex; gap: 8px; }
.carousel-controls button {
  width: 43px;
  height: 43px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--green-800);
  background: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.carousel-controls button:hover { transform: translateY(-2px); color: #fff; background: var(--green-700); }

.recent-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(270px, 292px);
  gap: 18px;
  overflow-x: auto;
  padding: 5px 4px 8px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}

.recent-track::-webkit-scrollbar { display: none; }
.recent-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}
.recent-track.is-dragging .recent-card,
.recent-track.is-dragging .recent-image img {
  transform: none;
  transition: none;
}

.recent-card {
  overflow: hidden;
  min-height: 432px;
  scroll-snap-align: start;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(2, 34, 27, .23), inset 0 1px 0 rgba(255,255,255,.92);
}
.recent-card > a { height: 100%; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.recent-image { position: relative; height: 186px; flex: 0 0 auto; overflow: hidden; background: var(--mint-100); }
.recent-image::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(3, 38, 30, .38)); pointer-events: none; }
.recent-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.recent-type { position: absolute; z-index: 1; top: 13px; left: 13px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; background: rgba(5, 48, 38, .88); font-size: .59rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; backdrop-filter: blur(8px); }
.recent-copy { min-height: 246px; display: flex; flex: 1; flex-direction: column; padding: 16px 17px 15px; }
.recent-copy h3 { margin: 0 0 7px; overflow: hidden; color: var(--green-950); font-size: 1.02rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.recent-category { align-self: flex-start; display: inline-flex; align-items: center; margin: 0 0 10px; padding: 5px 9px; border: 1px solid #cfe6dc; border-radius: 999px; color: var(--green-800); background: #eef8f3; font-size: .57rem; font-weight: 800; letter-spacing: .035em; line-height: 1; text-transform: uppercase; }
.recent-location { display: flex; align-items: center; gap: 5px; margin: 0 0 10px; overflow: hidden; color: #60766e; font-size: .68rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.recent-location span { color: var(--green-700); font-size: .78rem; }
.recent-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 11px; }
.recent-facts span { display: inline-flex; align-items: center; max-width: 100%; gap: 5px; padding: 5px 8px; overflow: hidden; border: 1px solid #dceae3; border-radius: 999px; color: #365e52; background: #f4f8f6; font-size: .59rem; font-weight: 750; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.recent-facts i { color: #218064; font-size: .55rem; font-style: normal; }
.recent-rating { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.recent-stars { position: relative; width: max-content; display: inline-block; color: #d5ddd9; font-size: .92rem; line-height: 1; letter-spacing: 2px; }
.recent-stars-base { color: #d5ddd9; }
.recent-stars-fill { position: absolute; inset: 0 auto 0 0; overflow: hidden; color: #eead2e; white-space: nowrap; }
.recent-review-summary { color: #687b75; font-size: .63rem; font-weight: 700; }
.recent-meta { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 11px; border-top: 1px solid #e7efeb; min-height: 39px; }
.recent-meta .recent-card-status { padding: 5px 7px; border-radius: 999px; color: #8f5b14; background: #fff7e8; font-size: .55rem; font-weight: 850; text-transform: uppercase; letter-spacing: .045em; }
.recent-price { display: grid; gap: 1px; text-align: right; }
.recent-price small { color: #7b8d87; font-size: .55rem; font-weight: 650; }
.recent-price strong { color: var(--green-800); font-size: .94rem; line-height: 1.05; white-space: nowrap; }
.recent-price em { color: var(--muted); font-size: .57rem; font-style: normal; font-weight: 600; }
.recent-view-link { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 11px; border-radius: 999px; color: #fff; background: var(--green-700); box-shadow: 0 5px 12px rgba(24, 105, 84, .17); font-size: .69rem; font-weight: 800; transition: background .2s ease, box-shadow .2s ease; }
.recent-view-link i { font-style: normal; font-size: .9rem; transition: transform .2s ease; }
.recent-view-link:hover { background: var(--green-900); box-shadow: 0 7px 16px rgba(12, 68, 53, .25); }
.recent-view-link:hover i { transform: translateX(4px); }

/* Featured story */
.fe-featured { padding: 72px 0; background: transparent; }
.fe-container { display: grid; gap: 58px; }
.fe-top { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); align-items: center; gap: clamp(35px, 6vw, 75px); }

.fe-video {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--green-950);
  box-shadow: var(--shadow-lg);
}
.fe-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fe-video-label { position: absolute; left: 20px; bottom: 20px; padding: 8px 12px; border-radius: 999px; color: #fff; background: rgba(7, 43, 35, .76); font-size: .74rem; font-weight: 700; backdrop-filter: blur(8px); pointer-events: none; }

.fe-text h2 { margin-bottom: 22px; }
.fe-text p { margin: 0 0 13px; color: var(--muted); line-height: 1.75; }
.text-link {
  width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 9px;
  color: #fff;
  background: var(--green-700);
  box-shadow: 0 7px 16px rgba(24, 105, 84, .18);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.text-link span { transition: transform .2s ease; }
.text-link:hover,
.text-link:focus-visible {
  transform: translateY(-2px);
  color: #fff;
  background: var(--green-900);
  box-shadow: 0 10px 22px rgba(12, 68, 53, .25);
  outline: 0;
}
.text-link:hover span,
.text-link:focus-visible span { transform: translateX(4px); }

.fe-gallery-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 18px; }
.fe-small { height: 300px; padding: 0; overflow: hidden; border: 0; border-radius: 21px; background: #dce9e3; box-shadow: var(--shadow-sm); cursor: zoom-in; }
.fe-small img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.fe-small:hover img { transform: scale(1.06); }
.fe-gallery { min-width: 0; }
.fe-slider { position: relative; height: 330px; overflow: hidden; border-radius: 25px; background: var(--green-900); box-shadow: var(--shadow-lg); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.fe-slider.is-swiping { cursor: grabbing; }
.fe-slide { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; background-position: center; background-size: cover; cursor: zoom-in; pointer-events: none; transition: opacity .65s ease, transform 1s ease; }
.fe-slide.active { opacity: 1; pointer-events: auto; }
.fe-slider-caption { position: absolute; inset: auto 0 0; z-index: 2; padding: 60px 24px 22px; color: #fff; background: linear-gradient(transparent, rgba(5, 36, 29, .88)); pointer-events: none; }
.fe-slider-caption span,
.fe-slider-caption strong { display: block; }
.fe-slider-caption span { margin-bottom: 4px; color: #b6e7d3; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fe-slider-caption strong { font-size: 1.15rem; }
.fe-dots { display: flex; justify-content: center; gap: 7px; margin-top: 15px; }
.fe-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #b7c5bf; cursor: pointer; transition: width .25s ease, background .25s ease; }
.fe-dots button.active { width: 28px; background: var(--green-700); }
.fe-footer-text { max-width: 760px; margin: -20px auto 0; color: var(--muted); line-height: 1.7; text-align: center; }

.fe-modal[hidden] { display: none; }
.fe-modal { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 60px 24px 24px; background: rgba(2, 22, 18, .9); backdrop-filter: blur(8px); }
.fe-modal-content { width: min(1400px, 94vw); height: min(86vh, 900px); border-radius: 16px; object-fit: contain; filter: drop-shadow(0 24px 38px rgba(0, 0, 0, .48)); }
.fe-close { position: absolute; top: 18px; right: 24px; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .08); font-size: 1.7rem; line-height: 1; cursor: pointer; }

/* Booking process */
.booking-process {
  position: relative;
  padding: 72px 0;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #104f41 0%, #176b56 52%, #208068 100%);
}
.booking-process .section-kicker { color: #c4eddd; }
.booking-process .section-heading h2 { color: #fff; }
.booking-process .section-heading > p { color: rgba(255, 255, 255, .78); }
.booking-process .section-shell {
  position: relative;
  padding: 0;
}
.section-heading--center {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  align-items: end;
  gap: clamp(40px, 8vw, 110px);
  max-width: none;
  margin: 0 0 40px;
  text-align: left;
}
.section-heading--center .section-kicker { justify-content: flex-start; }
.section-heading--center h2 { max-width: 650px; font-size: clamp(2.15rem, 3.4vw, 3.15rem); }
.section-heading--center > p { margin: 0 0 5px; }
.booking-process .booking-process-copy {
  max-width: 390px;
  margin: 0 0 5px;
  padding: 15px 17px;
  border-left: 3px solid #c4eddd;
  color: rgba(255, 255, 255, .88);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 9px 25px rgba(3, 35, 28, .12);
  font-size: .74rem;
  line-height: 1.6;
}
.bp-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 0;
}
.bp-steps::before {
  content: "";
  position: absolute;
  top: 38px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 9px, transparent 9px 16px);
}
.bp-step {
  position: relative;
  z-index: 1;
  min-height: 190px;
  padding: 0 clamp(18px, 2.2vw, 30px) 8px;
  border-left: 0;
  text-align: center;
  background: transparent;
}
.bp-step:first-child { padding-left: clamp(18px, 2.2vw, 30px); }
.bp-step::before { display: none; }
.bp-circle {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border: 7px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: var(--green-800);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 10px 24px rgba(3, 38, 30, .24);
  font-size: .85rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}
.bp-circle::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid var(--green-700);
  border-radius: 50%;
  pointer-events: none;
}
.bp-step h3 { margin: 0 0 10px; color: #fff; font-size: 1.02rem; line-height: 1.35; }
.bp-step p { max-width: 235px; margin: 0 auto; color: rgba(255, 255, 255, .74); font-size: .83rem; line-height: 1.65; }

/* Destination callout */
.dest-section {
  position: relative;
  padding: 72px 0;
  overflow: hidden;
  background: transparent;
}
.dest-section::before { display: none; }
.dest-container {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(55px, 8vw, 105px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.dest-collage { position: relative; min-height: 440px; }
.dest-collage img { z-index: 2; display: block; object-fit: cover; box-shadow: 0 25px 55px rgba(0, 0, 0, .22); }
.dest-route-trail {
  position: absolute;
  inset: -34px -45px -30px -42px;
  z-index: 1;
  width: calc(100% + 87px);
  height: calc(100% + 64px);
  overflow: visible;
  pointer-events: none;
}
.dest-route-trail path {
  fill: none;
  stroke: rgba(31, 116, 94, .72);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 6 11;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .95));
  animation: heroRoute 16s linear infinite;
}
.dest-floating-boat {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  border: 1px solid rgba(31, 116, 94, .28);
  border-radius: 50%;
  color: var(--green-900);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 12px 28px rgba(8, 54, 43, .22);
  pointer-events: none;
  animation: heroBoatFloat 2.8s ease-in-out infinite;
}
.dest-floating-boat svg { width: 68%; height: 68%; fill: currentColor; overflow: visible; }
.dest-floating-boat .boat-wave { fill: none; stroke: #43a985; stroke-width: 1.7; stroke-linecap: round; }
.dest-floating-boat--one { right: -25px; top: 62px; width: 48px; height: 48px; transform: rotate(8deg); }
.dest-floating-boat--two { left: -24px; bottom: 55px; width: 34px; height: 34px; opacity: .92; animation: heroBoatDrift 7s ease-in-out infinite; }
.dest-image-main { position: relative; width: 82%; height: 385px; border-radius: 26px; will-change: transform; animation: destImageFloatMain 6s ease-in-out infinite; }
.dest-image-small { position: absolute; right: 0; bottom: 0; width: 46%; height: 215px; border: 8px solid #fff; border-radius: 22px; will-change: transform; animation: destImageFloatSmall 5.4s ease-in-out .45s infinite; }
.dest-note { position: absolute; left: 24px; bottom: 30px; z-index: 6; max-width: 255px; padding: 16px 19px; border-radius: 15px; color: var(--green-950); background: #fff; box-shadow: var(--shadow-lg); will-change: transform; animation: destImageFloatMain 6s ease-in-out infinite; }
.dest-note strong,
.dest-note span { display: block; }
.dest-note strong { margin-bottom: 4px; font-size: .87rem; }
.dest-note span { color: var(--muted); font-size: .7rem; }
.dest-text .section-kicker { color: var(--green-700); }
.dest-text h2 { max-width: 520px; color: var(--green-950); font-size: clamp(2.15rem, 3.45vw, 3.2rem); }
.dest-text > p { margin: 20px 0; color: var(--muted); line-height: 1.75; }
.dest-points { display: grid; gap: 11px; margin: 0 0 28px; padding: 0; list-style: none; color: #34544c; font-size: .9rem; }
.dest-points span { width: 22px; height: 22px; display: inline-grid; place-items: center; margin-right: 9px; border-radius: 50%; color: var(--green-950); background: #a7e4ca; font-size: .72rem; font-weight: 900; }

/* Draw arrows geometrically so font baselines cannot offset them. */
.carousel-controls button,
.tc-arrow {
  --control-arrow-tip-offset: 2px;
  --control-arrow-rotation: 45deg;
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 0;
  line-height: 0;
}
.carousel-controls button[data-recent-direction="-1"],
.tc-arrow[data-tour-category-direction="-1"] {
  --control-arrow-tip-offset: -2px;
  --control-arrow-rotation: -135deg;
}
.hero-btn > span[aria-hidden="true"],
.booking-stats-intro a > span[aria-hidden="true"],
.text-link > span[aria-hidden="true"],
.bt-arrow,
.recent-view-link i {
  position: relative;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  display: block;
  font-size: 0;
  line-height: 0;
}
.carousel-controls button::before,
.tc-arrow::before,
.hero-btn > span[aria-hidden="true"]::before,
.booking-stats-intro a > span[aria-hidden="true"]::before,
.text-link > span[aria-hidden="true"]::before,
.bt-arrow::before,
.recent-view-link i::before {
  width: 12px;
  height: 1.5px;
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: currentColor;
  transform: translate(-50%, -50%);
}
.carousel-controls button::after,
.tc-arrow::after,
.hero-btn > span[aria-hidden="true"]::after,
.booking-stats-intro a > span[aria-hidden="true"]::after,
.text-link > span[aria-hidden="true"]::after,
.bt-arrow::after,
.recent-view-link i::after {
  width: 6px;
  height: 6px;
  position: absolute;
  top: 50%;
  left: calc(50% + var(--control-arrow-tip-offset, 2px));
  content: "";
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translate(-50%, -50%) rotate(var(--control-arrow-rotation, 45deg));
}

@keyframes destImageFloatMain {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes destImageFloatSmall {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(7px); }
}

/* The injected homepage sub-navigation gets a calmer, intentional hover state. */
.homepage .head-subnav-link {
  padding: 8px 10px !important;
  border-radius: 9px;
  transition: color .2s ease, background .2s ease !important;
}
.homepage .head-subnav-item:hover .head-subnav-link,
.homepage .head-subnav-item:focus-within .head-subnav-link { color: var(--green-800) !important; background: var(--mint-100); }
.homepage .head-subnav-popup { padding: 14px !important; border: 1px solid var(--line) !important; border-radius: 16px !important; box-shadow: 0 20px 46px rgba(11, 48, 40, .15) !important; }
.homepage .head-subnav-popup-item { padding: 9px !important; border: 1px solid transparent; transition: transform .2s ease, border-color .2s ease, background .2s ease !important; }
.homepage .head-subnav-popup-item > div { min-width: 0; flex: 1; }
.homepage .head-subnav-trend {
  width: 68px;
  height: 30px;
  flex: 0 0 68px;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  margin-left: auto;
  color: #279173 !important;
  background: transparent;
  transition: color .2s ease, transform .25s ease;
}
.homepage .head-subnav-trend svg { width: 36px; height: 21px; flex: 0 0 36px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.homepage .head-subnav-trend b { display: block; color: currentColor; font-size: .56rem; font-weight: 850; line-height: 1; letter-spacing: -.01em; }
.homepage .head-subnav-item--packages .head-subnav-trend { color: #c68a22 !important; }
.homepage .head-subnav-item--hotels .head-subnav-trend { color: #3287a2 !important; }
.homepage .head-subnav-popup-item:hover { transform: translateX(3px); border-color: #d9e9e2; background: var(--mint-50) !important; }
.homepage .head-subnav-popup-item:hover .head-subnav-trend { transform: translate(2px, -2px); color: var(--green-700) !important; }
.homepage .head-subnav-popup-item img { border-radius: 11px !important; transition: transform .25s ease; }
.homepage .head-subnav-popup-item:hover img { transform: scale(1.06); }
.homepage .head-subnav-btn { box-shadow: 0 5px 14px rgba(24, 105, 84, .16); transition: background .2s ease !important; }
.homepage .head-subnav-btn:hover { transform: none; background: var(--green-900) !important; }

.home-mobile-nav-toggle { display: none; }

@media (max-width: 1020px) {
  .hero-shell { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 34px; }
  .hero-route-map { min-height: 462px; }
  .bt-container { grid-template-columns: repeat(2, 1fr); }
  .tc-viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
  .tc-track { width: max-content; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(210px, 31vw); }
  .tc-card { scroll-snap-align: center; }
  .fe-top { grid-template-columns: 1fr; }
  .fe-video { min-height: 430px; }
  .fe-gallery-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dest-container { grid-template-columns: 1fr 1fr; gap: 45px; }
}

@media (max-width: 760px) {
  .section-shell,
  .hero-shell { width: min(100% - 28px, 1180px); }
  .section-heading { align-items: start; }
  .section-heading:not(.section-heading--center) { flex-direction: column; gap: 12px; }
  .section-heading--compact > p { width: 100%; max-width: 560px; }
  .home-hero {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    overflow: visible;
  }
  .hero-shell { grid-template-columns: 1fr; gap: 48px; padding-block: 58px 70px; }
  .hero-content { max-width: 640px; transform: none; }
  .hero-content h1 { font-size: clamp(2.25rem, 8vw, 3.1rem); }
  .hero-visual { width: min(100% - 20px, 430px); justify-self: center; }
  .hero-search { align-items: stretch; }
  .hero-search > button { padding-inline: 16px; }
  .hero-search > button svg { display: none; }
  .hero-service-ribbon { height: 52px; }
  .hero-ribbon-group { --hero-ribbon-item-gap: 26px; }
  .hero-ribbon-item { gap: 8px; padding-inline: 0; font-size: .66rem; }
  .hero-ribbon-icon { width: 28px; height: 28px; }
  .hero-ribbon-icon img { width: 16px; height: 16px; }
  .hero-ribbon-fade { width: 34px; }
  .booking-types { padding-block: 56px; }
  .tour-categories { padding-block: 56px; }
  .tc-panel { width: min(100% - 28px, 1180px); padding: 0; }
  .tc-heading { margin-bottom: 22px; padding-inline: 9px; }
  .tc-track { grid-auto-columns: minmax(215px, 62vw); gap: 24px; }
  .tc-card:nth-child(n) { --arc-y: 0; }
  .recent-section { min-height: calc(100vh - 104px); padding: 56px 0; }
  .bt-container { grid-template-columns: 1fr; }
  .bt-card-link { min-height: 94px; }
  .home-stats-shell { padding-block: 34px; }
  .home-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .home-stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .booking-stats .home-stats-shell { padding-block: 56px; }
  .booking-stats-heading { grid-template-columns: 1fr; align-items: start; gap: 20px; margin-bottom: 28px; }
  .booking-stats-heading,
  .booking-stats-heading > div {
    justify-items: center;
    text-align: center;
  }
  .booking-stats-heading .section-kicker { justify-content: center; }
  .booking-stats-heading h2 {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  .booking-stats-intro {
    max-width: 600px;
    margin-inline: auto;
    padding-left: 0;
    border-left: 0;
    text-align: center;
  }
  .booking-stats-intro a { margin-inline: auto; }
  .booking-stats .home-stats-grid { gap: 12px; }
  .booking-stats .home-stat:nth-child(n) { min-height: 190px; padding: 18px; border: 1px solid rgba(255,255,255,.14); }
  .fe-featured { padding: 56px 0; }
  .booking-process { padding: 56px 0; }
  .dest-section { padding: 56px 0; }
  .fe-video { min-height: 330px; }
  .fe-gallery-layout { grid-template-columns: 1fr; }
  .fe-gallery-layout .fe-small { display: none; }
  .fe-slider { height: 330px; }
  .section-heading--center { grid-template-columns: 1fr; gap: 16px; margin-bottom: 42px; }
  .section-heading--center > p { max-width: 540px; margin: 0; }
  .bp-steps { grid-template-columns: repeat(2, 1fr); gap: 34px 0; border-top: 0; }
  .bp-steps::before { display: none; }
  .bp-step,
  .bp-step:nth-child(odd) { min-height: 180px; padding: 0 18px 8px; border: 0; }
  .dest-container { grid-template-columns: 1fr; gap: 48px; padding-top: 0; }
  .dest-collage { min-height: 430px; }
  .dest-image-main { height: 365px; }

  .homepage .head-nav-container { padding-inline: 14px !important; }
  .homepage .head-nav-left { margin-left: 0 !important; gap: 8px !important; }
  .homepage .head-navtext-logo { height: 27px !important; }
  .homepage .head-nav-right { gap: 10px !important; }
  .homepage .head-nav-center {
    position: absolute !important;
    top: calc(100% + 9px);
    right: 12px;
    width: min(270px, calc(100vw - 24px));
    display: none !important;
    gap: 4px !important;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-lg);
  }
  .homepage .head-nav-center.is-open { display: grid !important; }
  .homepage .head-nav-center a { margin: 0 !important; padding: 11px 12px; border-radius: 9px; font-size: 12px !important; }
  .homepage .head-nav-center a:hover { background: var(--mint-50); }
  .homepage .head-nav-center a::after { bottom: 3px !important; left: 12px !important; width: 0 !important; }
  .homepage .head-nav-center a.active::after { width: 32px !important; }
  .home-mobile-nav-toggle {
    width: 38px;
    height: 38px;
    display: grid;
    place-content: center;
    gap: 4px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
  }
  .home-mobile-nav-toggle span { width: 17px; height: 2px; display: block; border-radius: 9px; background: var(--green-900); transition: transform .2s ease, opacity .2s ease; }
  .home-mobile-nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .home-mobile-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .home-mobile-nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .homepage .head-subnav {
    gap: 6px !important;
    padding-inline: 10px !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .homepage .head-subnav::-webkit-scrollbar { display: none; }
  .homepage .head-subnav-item,
  .homepage .head-subnav-btn { flex: 0 0 auto; }
  .homepage .head-subnav-link { font-size: 12px !important; }
  .homepage .head-subnav-separator { display: none; }
}

@media (max-width: 480px) {
  .homepage {
    --mobile-section-space: 32px;
    background-color: #fff;
    background-image: none;
  }
  .homepage main { background: #fff; }
  .booking-types,
  .tour-categories,
  .fe-featured,
  .dest-section {
    background-color: #fff;
    background-image:
      radial-gradient(ellipse 72% 24% at -12% 15%, rgba(179, 232, 151, .38), transparent 72%),
      radial-gradient(ellipse 68% 24% at 112% 72%, rgba(101, 197, 231, .3), transparent 72%),
      radial-gradient(ellipse 58% 18% at 18% 96%, rgba(199, 240, 174, .25), transparent 74%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .booking-types,
  .tour-categories,
  .recent-section,
  .fe-featured,
  .booking-process,
  .dest-section {
    padding-top: var(--mobile-section-space);
    padding-bottom: var(--mobile-section-space);
  }
  .home-stats-shell,
  .booking-stats .home-stats-shell {
    padding-top: var(--mobile-section-space);
    padding-bottom: var(--mobile-section-space);
  }
  .hero-shell { gap: 0; padding-block: 24px 30px; }
  .hero-eyebrow,
  .hero-content h1,
  .hero-tagline { display: none; }
  .hero-search {
    display: flex;
    align-items: stretch;
  }
  .hero-search-field { min-height: 42px; }
  .hero-search > button {
    width: 44px;
    flex: 0 0 44px;
    padding: 0;
    white-space: nowrap;
  }
  .hero-search > button svg { display: block; width: 20px; height: 20px; }
  .hero-search-button-label { display: none; }
  .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .hero-btn {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding-inline: 8px;
    font-size: .68rem;
    line-height: 1.2;
    border-radius: 999px;
    text-align: center;
  }
  .hero-btn--ghost {
    border-color: #d5e5de;
    color: var(--green-800);
    background: #fff;
    backdrop-filter: none;
  }
  .hero-mobile-nav {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 12px;
    padding: 5px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .hero-mobile-nav a {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 5px 0;
    border-radius: 10px;
    color: #fff;
    font-size: .61rem;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
  }
  .hero-mobile-nav a:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 0;
    width: 1px;
    height: 38px;
    background: linear-gradient(transparent, rgba(255,255,255,.32), transparent);
  }
  .hero-mobile-nav a[aria-current="page"] {
    color: #9be3c5;
    background: transparent;
  }
  .hero-mobile-nav a[aria-current="page"] .icon-accent {
    fill: #fff;
    stroke: #fff;
  }
  .hero-mobile-nav-icon {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .hero-mobile-nav-icon svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 4px 6px rgba(2,30,24,.3));
    transition: transform .2s ease, filter .2s ease;
  }
  .hero-mobile-nav-icon svg .icon-accent {
    fill: #9be3c5;
    stroke: #9be3c5;
  }
  .hero-mobile-nav a:nth-child(n) .hero-mobile-nav-icon { color: #fff; }
  .hero-mobile-nav a:active .hero-mobile-nav-icon svg {
    transform: translateY(2px) scale(.96);
    filter: drop-shadow(0 2px 3px rgba(2,30,24,.25));
  }
  .homepage .head-subnav-mobile-links { display: none; }
  .homepage.mobile-quick-nav-docked .head-subnav {
    padding: 3px 10px !important;
    border-bottom: 1px solid #dce9e4;
    background: #fff;
    box-shadow: 0 7px 20px rgba(8,51,40,.12);
  }
  .homepage.mobile-quick-nav-docked .head-subnav > .head-subnav-item,
  .homepage.mobile-quick-nav-docked .head-subnav > .head-subnav-separator,
  .homepage.mobile-quick-nav-docked .head-subnav > .head-subnav-btn {
    display: none !important;
  }
  .homepage.mobile-quick-nav-docked .head-subnav-mobile-links {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(3px, 1.5vw, 10px);
  }
  .head-subnav-mobile-links a {
    min-width: 0;
    height: 38px;
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #647b73;
    font-size: .58rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
  }
  .head-subnav-mobile-links a span {
    height: 18px;
    display: inline-flex;
    align-items: center;
    line-height: 18px;
  }
  .head-subnav-mobile-links a svg {
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .head-subnav-mobile-links a[aria-current="page"] {
    gap: 7px;
    padding-inline: 11px;
    border-color: rgba(255,255,255,.48);
    color: #fff;
    background: linear-gradient(135deg, #23866b, #17644f);
    box-shadow: 0 4px 11px rgba(15,91,70,.22);
  }
  .mobile-floating-book {
    position: fixed;
    right: 70px;
    bottom: 16px;
    z-index: 1199;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #238469, #14614e);
    box-shadow: 0 9px 24px rgba(4,45,35,.3);
    font-size: .7rem;
    font-weight: 800;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(.94);
    transition: right .24s ease, opacity .22s ease, visibility .22s ease, transform .24s ease;
  }
  .mobile-floating-book svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .homepage.mobile-quick-nav-docked .mobile-floating-book {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .hero-visual { display: none; }
  .hero-route-map { min-height: 432px; border-radius: 22px; }
  .hero-map-heading { padding: 17px 16px 7px; }
  .hero-map-duration { display: none; }
  .hero-map-canvas { height: 255px; margin-inline: 7px; }
  .hero-map-stop--one { left: 0; top: 166px; }
  .hero-map-stop--two { left: 94px; top: 98px; }
  .hero-map-stop--three { right: 0; top: 6px; }
  .hero-stop-image { width: 46px; height: 46px; padding: 3px; }
  .hero-stop-label { padding: 6px 7px; }
  .hero-stop-label small { display: none; }
  .hero-route-boat { left: 28px; top: 190px; width: 37px; height: 37px; }
  .hero-visual[data-active-stop="1"] .hero-route-boat { left: 119px; top: 121px; }
  .hero-visual[data-active-stop="2"] .hero-route-boat { left: calc(100% - 73px); top: 45px; }
  .hero-map-summary { grid-template-columns: 44px minmax(0, 1fr) auto; margin-inline: 10px; }
  .hero-map-summary > img { width: 44px; height: 43px; }
  .hero-floating-scene { min-height: 448px; }
  .hero-visual-card { left: 29px; width: calc(100% - 55px); height: 375px; }
  .hero-island-selector { right: -2px; top: 135px; }
  .hero-float-note--favorite { left: 0; top: 70px; }
  .hero-float-note--islands { right: 0; top: 28px; }
  .hero-scene-boat--main { left: 4px; top: 327px; }
  .hero-visual[data-active-stop="1"] .hero-scene-boat--main { left: 105px; top: 251px; }
  .hero-visual[data-active-stop="2"] .hero-scene-boat--main { left: calc(100% - 42px); top: 86px; }
  .hero-scene-boat--small { display: none; }
  .hero-floating-scene > .hero-switch-progress { left: 56px; right: 55px; bottom: 41px; }
  .recent-track {
    grid-auto-columns: clamp(195px, 60vw, 215px);
    gap: 10px;
  }
  .recent-section .section-heading {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 16px;
    text-align: left;
  }
  .recent-section {
    min-height: 0;
    align-items: flex-start;
    padding-top: var(--mobile-section-space);
    padding-bottom: var(--mobile-section-space);
  }
  .recent-section .section-heading > div {
    width: auto;
    min-width: 0;
    text-align: left;
  }
  .recent-section .section-kicker { justify-content: flex-start; }
  .recent-section .section-heading h2 {
    margin-right: 0;
    margin-left: 0;
    font-size: 1.55rem;
    text-align: left;
  }
  .recent-section .carousel-controls {
    flex: 0 0 auto;
    align-self: flex-end;
    gap: 6px;
  }
  .recent-section .carousel-controls button {
    width: 32px;
    height: 32px;
    font-size: 0;
  }
  .recent-card {
    min-height: 335px;
    border-radius: 17px;
  }
  .recent-image { height: 125px; }
  .recent-type {
    top: 10px;
    left: 10px;
    padding: 5px 8px;
    font-size: .52rem;
  }
  .recent-copy {
    min-height: 208px;
    padding: 12px 12px 11px;
  }
  .recent-copy h3 { font-size: .9rem; }
  .recent-category { margin-bottom: 8px; padding: 4px 7px; font-size: .51rem; }
  .recent-location { margin-bottom: 8px; font-size: .61rem; }
  .recent-facts { gap: 4px; margin-bottom: 8px; }
  .recent-facts span { padding: 4px 6px; font-size: .52rem; }
  .recent-rating { margin-bottom: 8px; }
  .recent-stars { font-size: .78rem; }
  .recent-meta { min-height: 34px; padding-top: 8px; }
  .recent-price strong { font-size: .84rem; }
  .recent-view-link { min-height: 32px; margin-top: 7px; font-size: .6rem; }
  .tc-track { grid-auto-columns: 72vw; }
  .tc-card-media { border-radius: 20px; }
  .home-stats-grid { gap: 24px 0; }
  .home-stat { padding-inline: 15px; text-align: center; }
  .home-stat:first-child,
  .home-stat:nth-child(3) { padding-left: 0; }
  .home-stat:nth-child(2),
  .home-stat:last-child { padding-right: 0; }
  .home-stat dd { font-size: .61rem; }
  .booking-stats-heading h2 { font-size: 1.75rem; }
  .booking-stats-intro { padding-left: 0; }
  .booking-stats .home-stat:nth-child(n) { min-height: 180px; padding: 15px; }
  .booking-stat-top { margin-bottom: 17px; }
  .booking-stat-spark { width: 62px; }
  .booking-stats .home-stat dt > strong { font-size: 1.75rem; }
  .carousel-controls { align-self: flex-end; }
  .fe-video { min-height: 270px; border-radius: 20px; }
  .fe-slider { height: 285px; }
  .bp-steps { grid-template-columns: 1fr; }
  .booking-process .section-shell { padding: 0; }
  .booking-process .section-heading--center { margin-bottom: 38px; }
  .bp-step,
  .bp-step:nth-child(n) { min-height: 0; padding: 0 0 34px; border-left: 0; }
  .bp-step::before,
  .bp-step:nth-child(n)::before { left: 0; }
  .dest-container { padding: 0; border-radius: 0; }
  .dest-collage { min-height: 350px; }
  .dest-image-main { width: 90%; height: 310px; }
  .dest-image-small { height: 165px; }
  .dest-note { left: 12px; bottom: 10px; }
  .dest-route-trail { inset: -20px -12px -16px; width: calc(100% + 24px); height: calc(100% + 36px); }
  .dest-floating-boat--one { right: 1%; top: 38px; width: 42px; height: 42px; }
  .dest-floating-boat--two { left: -7px; top: auto; bottom: 38px; width: 30px; height: 30px; }

  .homepage .head-navtext-logo { display: none; }
  .homepage .head-nav-logo { width: 38px !important; height: 38px !important; }
  .homepage .head-nav-center { gap: 8px !important; }
  .homepage .head-nav-center a { font-size: 9px !important; }
  .homepage .head-nav-right { gap: 7px !important; }
  .homepage .head-nav-notif-btn img { width: 21px !important; height: 21px !important; }
  .homepage .head-nav-profile-icon-wrapper,
  .homepage .head-nav-profile-icon,
  .homepage .head-nav-profile-fallback { width: 32px !important; height: 32px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .hero-service-ribbon { overflow-x: auto; scrollbar-width: none; }
  .hero-service-ribbon::-webkit-scrollbar { display: none; }
  .hero-ribbon-track { transform: none !important; animation: none !important; }
  .hero-ribbon-group[aria-hidden="true"] { display: none; }
}

/* Fade the final HomeBG section into the clean footer wave canvas on smaller screens. */
@media (max-width: 1100px) {
  .homepage .dest-section::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    height: 76px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.72) 58%, #fff 100%);
  }

  .homepage .dest-container {
    z-index: 1;
  }

  .homepage .site-footer-waves {
    background: linear-gradient(to bottom, #fff 0 64%, #1c2f40 64% 100%) !important;
  }
}

/* Homepage hero for tablet/iPad viewports.
   Use the full hero width for useful content and omit the animated collage. */
@media (min-width: 761px) and (max-width: 1100px) {
  .homepage .home-hero {
    min-height: 480px;
  }

  .homepage .hero-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: 46px 52px;
  }

  .homepage .hero-content {
    width: 100%;
    max-width: 790px;
    transform: none;
  }

  .homepage .hero-content h1 {
    max-width: 760px;
    font-size: clamp(2.7rem, 6vw, 3.5rem);
  }

  .homepage .hero-tagline {
    max-width: 720px;
  }

  .homepage .hero-search {
    width: min(720px, 100%);
  }

  .homepage .hero-visual {
    display: none;
  }

  .homepage .hero-overlay {
    background:
      linear-gradient(90deg, rgba(5, 37, 30, .93) 0%, rgba(7, 53, 43, .8) 62%, rgba(10, 55, 45, .52) 100%),
      linear-gradient(0deg, rgba(6, 31, 26, .38), transparent 55%);
  }

  /* Use one vertical rhythm across the main tablet sections. */
  .homepage .booking-types,
  .homepage .tour-categories,
  .homepage .recent-section,
  .homepage .fe-featured,
  .homepage .booking-process,
  .homepage .dest-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .homepage .recent-section {
    min-height: 0;
    display: block;
    align-items: initial;
  }

  .homepage .home-stats-shell,
  .homepage .booking-stats .home-stats-shell {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .homepage .section-heading,
  .homepage .section-heading--compact,
  .homepage .recent-section .section-heading {
    margin-bottom: 28px;
  }

  .homepage .tour-categories .tc-heading {
    margin-bottom: 24px;
  }

  .homepage .tour-categories .tc-viewport {
    padding-top: 12px;
    padding-bottom: 34px;
  }

  .homepage .fe-container {
    gap: 42px;
  }
}

/* Mobile homepage hero */
@media (max-width: 480px) {
  .homepage .home-hero {
    min-height: 0;
    overflow: visible;
    background: #f2f7f4;
  }

  .homepage .home-hero::before {
    display: none;
  }

  .homepage .home-hero::after { display: none; }

  .homepage .hero-overlay {
    display: none;
  }

  .homepage .hero-shell {
    width: calc(100% - 32px);
    padding-block: 0 24px;
  }

  .homepage .hero-content {
    width: 100%;
    max-width: none;
    text-align: center;
  }

  .homepage .hero-intro {
    display: block;
    width: calc(100% + 32px);
    margin-inline: -16px;
    padding: 38px 20px 58px;
    background:
      linear-gradient(180deg, rgba(4, 36, 30, .32), rgba(4, 45, 37, .76)),
      url("../img/herohomepage2.png") 62% 45% / cover no-repeat;
  }

  .homepage .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin: 0 auto 8px;
    padding: 7px 12px;
    border: 1px solid rgba(231, 255, 245, .27);
    border-radius: 999px;
    background: rgba(10, 62, 48, .3);
    color: #e1f9ed;
    font-size: .52rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .05em;
    text-transform: uppercase;
  }

  .homepage .hero-eyebrow::before {
    display: none;
  }

  .homepage .hero-content h1 {
    width: 100%;
    max-width: 350px;
    display: block;
    margin: 0 auto;
    color: #fff;
    font-size: clamp(2.1rem, 8.9vw, 2.7rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.045em;
    text-align: center;
    text-wrap: balance;
    text-shadow: 0 3px 20px rgba(1, 27, 21, .35);
  }

  .homepage .hero-content h1 span {
    display: block;
  }

  .homepage .hero-tagline {
    display: none;
  }

  .homepage .hero-planner {
    display: contents;
  }

  .homepage .hero-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    margin: -27px 0 0;
    padding: 5px;
    border: 1px solid #dce8e1;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 9px 24px rgba(15, 66, 49, .14);
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .homepage .hero-search-field {
    min-height: 42px;
    gap: 8px;
    padding: 5px 7px;
  }
  .homepage .hero-search:focus-within {
    border-color: #389478;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(40, 139, 112, .12);
  }
  .homepage .hero-search-copy { display: grid; gap: 5px; min-width: 0; flex: 1; }
  .homepage .hero-search input {
    height: 23px;
    padding: 0;
    font-size: 16px;
    line-height: 23px;
  }
  .homepage .hero-search input::placeholder { font-size: .78rem; }
  .homepage .hero-search > button {
    width: 44px;
    min-height: 42px;
    gap: 9px;
    border-radius: 12px;
    background: linear-gradient(135deg, #23866b, #14644e);
    box-shadow: 0 6px 14px rgba(24, 105, 79, .19);
  }

  .homepage .hero-actions {
    width: calc(100% + 32px);
    box-sizing: border-box;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -15px -16px 0;
    padding: 31px 16px 16px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
  }

  .homepage .hero-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 6px;
    border: 1px solid #c9ddd0;
    border-radius: 12px;
    color: #315b47;
    background: #fff;
    box-shadow: 0 3px 8px rgba(15, 66, 49, .04);
    font-size: .68rem;
    white-space: nowrap;
  }

  .homepage .hero-btn--ghost {
    background: #fff;
  }

  .homepage .hero-btn--primary { color: #fff; border-color: #1f745e; background: #1f745e; }

  .homepage .hero-mobile-nav {
    display: flex;
    justify-content: space-between;
    gap: 0;
    margin-top: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .homepage .hero-mobile-nav a,
  .homepage .hero-mobile-nav .hero-mobile-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 44px;
    flex: 0 0 44px;
    gap: 7px;
    padding: 0;
    color: #567165;
    font-size: .56rem;
    letter-spacing: .02em;
  }

  .homepage .hero-mobile-more {
    border: 0;
    background: transparent;
    font-family: inherit;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    cursor: pointer;
  }
  .homepage .hero-mobile-more .hero-mobile-nav-icon { color: #39745b; }
  .homepage .hero-mobile-more svg circle { fill: currentColor; stroke: none; }
  .homepage .hero-mobile-more:focus-visible { outline: 2px solid #288b70; outline-offset: 4px; border-radius: 13px; }
  .homepage .hero-mobile-more:active .hero-mobile-nav-icon { transform: translateY(2px); }

  .homepage .hero-mobile-nav [hidden] { display: none; }
  .homepage .hero-mobile-nav .hero-more-close { display: none; }
  .homepage .hero-mobile-nav.is-expanded {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .homepage .hero-mobile-nav.is-expanded::-webkit-scrollbar { display: none; }
  .homepage .hero-mobile-nav.is-expanded a,
  .homepage .hero-mobile-nav.is-expanded .hero-mobile-more { width: 66px; flex-basis: 66px; }
  .homepage .hero-mobile-nav.is-expanded .hero-more-dots { display: none; }
  .homepage .hero-mobile-nav.is-expanded .hero-more-close { display: block; }

  .homepage .hero-mobile-nav a:not(:last-child)::after { display: none; }

  .homepage .hero-mobile-nav-icon {
    width: 44px;
    height: 44px;
    border: 1px solid #d7e6dc;
    border-radius: 13px;
    background: #fff;
    transition: transform .2s ease, background .2s ease;
  }

  .homepage .hero-mobile-nav-icon svg {
    width: 23px;
    height: 23px;
    filter: none;
  }

  .homepage .hero-mobile-nav a[aria-current="page"] .hero-mobile-nav-icon {
    border-color: #1f745e;
    background: #1f745e;
  }
  .homepage .hero-mobile-nav a[aria-current="page"] { color: #1f745e; }
  .homepage .hero-mobile-nav a:nth-child(n) .hero-mobile-nav-icon { color: #39745b; }
  .homepage .hero-mobile-nav a[aria-current="page"] .hero-mobile-nav-icon { color: #fff; }
  .homepage .hero-mobile-nav-icon svg .icon-accent { fill: none; stroke: currentColor; }
  .homepage .hero-mobile-nav a:active .hero-mobile-nav-icon { transform: translateY(2px); }
}

.fe-video .featured-video-embed{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Fit the homepage video to a compact widescreen container. */
.homepage .fe-video{min-height:0;height:auto;aspect-ratio:16/9;align-self:center;background:#10251e}
.homepage .fe-video video{object-fit:cover}
.homepage .fe-video .fe-video-label{top:16px;bottom:auto;left:16px}

.homepage .fe-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.homepage .fe-video-play-sound{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);padding:12px 20px;border:1px solid #ffffff80;border-radius:999px;background:#176e56;color:#fff;font-family:inherit;font-size:14px;font-weight:600;line-height:1.3;box-shadow:0 4px 20px #0005;cursor:pointer}
.homepage .fe-video-play-sound[hidden]{display:none}
.homepage .fe-video-play-sound:hover{background:#10533f}
.homepage .fe-video-play-sound:focus-visible{outline:3px solid #fff;outline-offset:4px}