/* IHUSI EXPRESS overrides on top of the Voyacht template */

/* ---------------------------------------------------------------
   Typography: one family everywhere.
   The template shipped three (Playfair Display for titles, Poppins
   for text, Allison for script accents). Outfit replaces all three,
   so the weights and tracking below are retuned for a geometric
   sans at display sizes.
   --------------------------------------------------------------- */
:root {
  --text-font: "Outfit", system-ui, -apple-system, sans-serif;
  --title-font: "Outfit", system-ui, -apple-system, sans-serif;
  --style-font: "Outfit", system-ui, -apple-system, sans-serif;
  --sec-title-font-weight: 600;
  --h1-font-weight: 700;
  --h2-font-weight: 600;
  --h3-font-weight: 600;
  --h4-font-weight: 600;
  --h5-font-weight: 600;
  --h6-font-weight: 600;
  --body-line-height: 28px;
}

h1,
h2,
h3,
.sec-title h1,
.sec-title h2,
.page-title .title,
.banner-section .inner-column .title {
  letter-spacing: -0.02em;
}

/* Serif small caps read fine at 400; a geometric sans needs weight */
.sub-title,
.widget-title,
.counter-title,
.btn-title {
  font-weight: 600;
}

/* The script eyebrow becomes a light, wide-tracked line */
.banner-section .inner-column .sub-title-2 {
  font-family: var(--title-font);
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
@media (max-width: 991.98px) {
  .banner-section .inner-column .sub-title-2 {
    font-size: 26px;
    margin-bottom: 10px;
  }
}
@media (max-width: 575.98px) {
  .banner-section .inner-column .sub-title-2 {
    font-size: 20px;
    letter-spacing: 0.16em;
  }
}

/* Same for the oversized word watermark beside "why choose us" */
.why-choose-us-two .content-column-two .text {
  font-family: var(--title-font);
  font-weight: 200;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------
   Brand
   --------------------------------------------------------------- */

/* The IHUSI logo is taller than the template's 206x51 wordmark */
.main-header .logo img,
.mobile-menu .nav-logo img {
  height: 58px;
  width: auto;
  max-width: none;
}
.sticky-header .logo img {
  height: 46px;
  width: auto;
}
.main-footer .footer-logo img {
  height: 64px;
  width: auto;
  margin-bottom: 24px;
}

/* Form submit icons in the newsletter field were plain spans in the template */
.newsletter-form .input-outer button.icon {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------------------------------------------------------------
   Language switcher
   --------------------------------------------------------------- */
.lang-switch {
  position: relative;
  display: inline-block;
  margin-left: 22px;
  vertical-align: middle;
}
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 2px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 250ms ease;
}
.lang-toggle:hover,
.lang-switch.is-open .lang-toggle {
  opacity: 1;
}
.lang-toggle .caret {
  transition: transform 250ms ease;
}
.lang-switch.is-open .lang-toggle .caret {
  transform: rotate(180deg);
}
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
  min-width: 158px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 18px 44px rgba(2, 31, 54, 0.18);
}
.lang-menu::before {
  content: "";
  position: absolute;
  right: 14px;
  top: -5px;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: rotate(45deg);
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--theme-color2);
  white-space: nowrap;
  transition: background 200ms ease;
}
.lang-menu a:hover {
  background: #eef4f8;
}
.lang-menu a.is-active {
  color: var(--theme-color1);
  font-weight: 600;
}
.lang-menu .code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* in the dark off-canvas menu the dropdown opens downward, in place */
.mobile-menu .lang-switch {
  display: block;
  margin: 26px 20px 0;
}
.mobile-menu .lang-toggle {
  color: #fff;
  font-size: 15px;
}

/* ---------------------------------------------------------------
   Pieces added for IHUSI content
   --------------------------------------------------------------- */

/* Four booking steps, in place of the template's skill bars */
.ihusi-steps {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 30px;
}
.ihusi-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ihusi-steps .num {
  font-family: var(--title-font);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--theme-color1);
}
.ihusi-steps strong {
  display: block;
  font-family: var(--title-font);
  font-size: 19px;
  font-weight: 600;
  color: var(--theme-color2);
  margin-bottom: 4px;
}
.ihusi-steps p {
  margin: 0;
  font-size: 14px;
  line-height: 24px;
}
@media (max-width: 575.98px) {
  .ihusi-steps {
    grid-template-columns: 1fr;
  }
}

.form-note {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--theme-color1);
}
.pricing-block .price-note {
  display: block;
  margin: -6px 0 18px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.7;
}
.destination-section .destination-text {
  max-width: 360px;
  margin: 10px auto 0;
  font-size: 15px;
  line-height: 26px;
}
.pricing-section .pricing-footnote {
  margin: 50px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 15px;
}
.pricing-section .pricing-footnote a {
  color: var(--theme-color1);
  text-decoration: underline;
}
/* Boat gallery. The template's bxslider CSS floats the thumbnails and never
   clears them, so the heading and copy wrapped around the images; this is our own. */
.boat-gallery {
  margin-bottom: 38px;
}
.boat-gallery__main {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
}
.boat-gallery__main img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.boat-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.boat-gallery__thumbs button {
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: none;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 250ms ease, opacity 250ms ease;
  opacity: 0.72;
}
.boat-gallery__thumbs button:hover {
  opacity: 1;
}
.boat-gallery__thumbs button.is-active {
  border-color: var(--theme-color1);
  opacity: 1;
}
.boat-gallery__thumbs img {
  display: block;
  width: 108px;
  height: 74px;
  object-fit: cover;
}

/* the boat page column no longer borrows the template's product-details styles */
.boat-main .room-details__left {
  clear: both;
}

/* ---------------------------------------------------------------
   Booking flow
   --------------------------------------------------------------- */
.booking-section {
  background-color: #f7fafc;
}
.booking-notice {
  max-width: 900px;
  margin: 0 auto 44px;
  padding: 16px 22px;
  border-left: 3px solid var(--theme-color1);
  background: #fff;
  font-size: 15px;
  line-height: 26px;
}
.booking-notice i {
  color: var(--theme-color1);
  margin-right: 8px;
}

.booking-steps {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 46px;
  padding: 0;
  max-width: 820px;
}
.booking-steps li {
  flex: 1;
  text-align: center;
  position: relative;
  color: rgba(0, 0, 0, 0.45);
}
.booking-steps li::before {
  content: "";
  position: absolute;
  top: 22px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: rgba(0, 0, 0, 0.12);
}
.booking-steps li:first-child::before {
  display: none;
}
.booking-steps li.is-active::before,
.booking-steps li.is-done::before {
  background: var(--theme-color1);
}
.booking-steps .dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 44px;
  height: 44px;
  line-height: 42px;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  font-weight: 600;
}
.booking-steps li.is-active .dot,
.booking-steps li.is-done .dot {
  border-color: var(--theme-color1);
  background: var(--theme-color1);
  color: #fff;
}
.booking-steps .label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.booking-steps li.is-active .label {
  color: var(--theme-color2);
}
@media (max-width: 575.98px) {
  .booking-steps .label {
    font-size: 11px;
    letter-spacing: 0;
  }
}

.booking-card {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border-radius: 6px;
  padding: 48px;
  box-shadow: 0 20px 60px rgba(2, 31, 54, 0.07);
}
@media (max-width: 575.98px) {
  .booking-card {
    padding: 28px 20px;
  }
}
.booking-title {
  margin: 0 0 8px;
  font-size: 30px;
}
.booking-sub {
  margin-bottom: 28px;
  font-size: 15px;
}
.booking-card .form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--theme-color2);
}
.booking-card .form-control {
  height: 54px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  padding: 0 16px;
  width: 100%;
}
.booking-card select.form-control {
  appearance: auto;
}
.booking-card .form-control:focus {
  border-color: var(--theme-color1);
  outline: none;
}

/* class picker */
.choice-card {
  display: block;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 4px;
  padding: 20px 22px;
  cursor: pointer;
  transition: all 300ms ease;
}
.choice-card:hover {
  border-color: var(--theme-color1);
}
.choice-card.is-selected {
  border-color: var(--theme-color1);
  box-shadow: inset 0 0 0 1px var(--theme-color1);
}
.choice-card input {
  position: absolute;
  opacity: 0;
}
.choice-name {
  display: block;
  font-weight: 600;
  color: var(--theme-color2);
}
.choice-price {
  display: inline-block;
  margin-top: 4px;
  font-size: 30px;
  font-weight: 600;
  color: var(--theme-color1);
}
.choice-note {
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  opacity: 0.7;
}

/* departures */
.departure-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.departure-list li {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 22px 24px;
  margin-bottom: 16px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}
.departure-list li.is-selected {
  border-color: var(--theme-color1);
}
.departure-list li.is-full {
  opacity: 0.55;
}
.dep-time {
  font-size: 28px;
  font-weight: 600;
  color: var(--theme-color2);
  min-width: 86px;
}
.dep-boat {
  flex: 1;
  min-width: 160px;
}
.dep-boat strong {
  display: block;
  color: var(--theme-color2);
}
.dep-boat span {
  font-size: 14px;
}
.dep-price {
  font-size: 22px;
  font-weight: 600;
  color: var(--theme-color1);
}
.dep-price small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-color);
}

/* summary */
.booking-summary {
  margin: 0 0 26px;
}
.booking-summary > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.booking-summary dt {
  font-weight: 600;
  color: var(--theme-color2);
}
.booking-summary dd {
  margin: 0;
  text-align: right;
}
.booking-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: var(--theme-color2);
  color: #fff;
  border-radius: 4px;
}
.booking-total strong {
  font-size: 30px;
  font-weight: 600;
}
.booking-note {
  margin: 14px 0 0;
  font-size: 14px;
  opacity: 0.8;
}
.booking-note i {
  color: var(--theme-color1);
  margin-right: 6px;
}
.booking-warning {
  margin: 10px 0 0;
  color: #c0392b;
  font-size: 14px;
}

.booking-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 34px;
}
.link-back {
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--theme-color2);
  cursor: pointer;
  text-decoration: underline;
}
.booking-actions .theme-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* done */
.booking-done {
  text-align: center;
}
.done-icon {
  width: 76px;
  height: 76px;
  line-height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--theme-color1);
  color: #fff;
  font-size: 30px;
}
.done-ref {
  font-size: 20px;
  font-weight: 600;
  color: var(--theme-color2);
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------
   Lake Kivu map
   --------------------------------------------------------------- */
.kivu-map {
  margin: 0;
  position: relative;
}
.kivu-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.kivu-map .water {
  fill: #c6dcec;
}
.kivu-map .islands path {
  fill: #fbfdfe;
  stroke: #8fb9d4;
  stroke-width: 0.7;
}
.kivu-map .route {
  fill: none;
  stroke: #8ab4d0;
  stroke-width: 1.6;
  stroke-linecap: round;
}
/* the dash that travels along the crossing */
.kivu-map .route-run {
  fill: none;
  stroke: var(--theme-color1);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 26 420;
  animation: kivu-sail 7s linear infinite;
}
@keyframes kivu-sail {
  from { stroke-dashoffset: 446; }
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kivu-map .route-run { animation: none; stroke-dasharray: 6 8; }
}
.kivu-map .idjwi {
  fill: #5c7f96;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-anchor: middle;
}
.kivu-map .port .dot {
  fill: var(--theme-color1);
  stroke: #fff;
  stroke-width: 2;
}
.kivu-map .port .halo {
  fill: var(--theme-color1);
  opacity: 0;
}
.kivu-map .port text {
  fill: var(--theme-color2);
  font-size: 12px;
  font-weight: 600;
}
.kivu-map .port.is-on .halo {
  opacity: 0.25;
  animation: kivu-pulse 2.4s ease-out infinite;
  transform-origin: center;
}
@keyframes kivu-pulse {
  0% { transform: scale(1); opacity: 0.35; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kivu-map .port.is-on .halo { animation: none; opacity: 0.25; }
}
/* destinations: map on one side, the active place on the other */
.destination-layout {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  gap: 54px;
  align-items: center;
  margin-top: 56px;
}
.destination-panel .place-photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 26px;
}
.destination-panel .place-region {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--theme-color1);
  margin-bottom: 6px;
}
.destination-panel .place-name {
  font-size: 46px;
  margin: 0 0 16px;
}
.destination-panel .place-text {
  max-width: 460px;
  margin-bottom: 26px;
}
.destination-panel .place-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 38px;
}
.destination-panel .place-facts li {
  font-size: 14px;
}
.destination-panel .place-facts strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 2px;
}
@media (max-width: 991.98px) {
  .destination-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .destination-panel .place-name {
    font-size: 34px;
  }
  .kivu-map {
    max-width: 300px;
    margin: 0 auto;
  }
}

.place-enter-active,
.place-leave-active {
  transition: opacity 320ms ease, transform 320ms ease;
}
.place-enter-from {
  opacity: 0;
  transform: translateY(14px);
}
.place-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}
@media (prefers-reduced-motion: reduce) {
  .place-enter-active,
  .place-leave-active { transition: none; }
}

/* ---------------------------------------------------------------
   Motion
   --------------------------------------------------------------- */

/* --- reveal vocabulary -------------------------------------------------
   Put data-reveal on a block, or data-stagger on a parent to walk its
   children in. Variants: up (default), left, right, zoom, mask.
   Everything is scoped to html.motion so nothing hides without scripting. */
.motion [data-reveal] {
  opacity: 0;
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.motion [data-reveal=""],
.motion [data-reveal="up"] {
  transform: translateY(32px);
}
.motion [data-reveal="left"] {
  transform: translateX(-38px);
}
.motion [data-reveal="right"] {
  transform: translateX(38px);
}
.motion [data-reveal="zoom"] {
  transform: scale(0.94);
}
.motion [data-reveal][data-reveal-in] {
  opacity: 1;
  will-change: auto;
}
/* fade never sets or clears transform, so the template keeps its own */
.motion [data-reveal=""][data-reveal-in],
.motion [data-reveal="up"][data-reveal-in],
.motion [data-reveal="left"][data-reveal-in],
.motion [data-reveal="right"][data-reveal-in],
.motion [data-reveal="zoom"][data-reveal-in] {
  transform: none;
}

/* a parent walks its children in, one after another */
.motion [data-stagger] > * {
  opacity: 0;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.motion [data-stagger=""] > *,
.motion [data-stagger="up"] > * {
  transform: translateY(30px);
}
.motion [data-stagger][data-reveal-in] > * {
  opacity: 1;
}
.motion [data-stagger=""][data-reveal-in] > *,
.motion [data-stagger="up"][data-reveal-in] > * {
  transform: none;
}
.motion [data-stagger] > *:nth-child(1) { transition-delay: 0ms; }
.motion [data-stagger] > *:nth-child(2) { transition-delay: 90ms; }
.motion [data-stagger] > *:nth-child(3) { transition-delay: 180ms; }
.motion [data-stagger] > *:nth-child(4) { transition-delay: 270ms; }
.motion [data-stagger] > *:nth-child(5) { transition-delay: 360ms; }
.motion [data-stagger] > *:nth-child(6) { transition-delay: 450ms; }
.motion [data-stagger] > *:nth-child(7) { transition-delay: 540ms; }
.motion [data-stagger] > *:nth-child(8) { transition-delay: 630ms; }
.motion [data-stagger] > *:nth-child(n + 9) { transition-delay: 720ms; }

/* An image that uncovers itself. The clip goes on the inner image, never on the
   observed element: a box clipped to nothing never counts as intersecting, so it
   would wait for a reveal that can never come. */
.motion [data-reveal="mask"] {
  opacity: 1;
  transition: none;
}
.motion [data-reveal="mask"] img {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms cubic-bezier(0.76, 0, 0.24, 1);
}
.motion [data-reveal="mask"][data-reveal-in] img {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .motion [data-reveal],
  .motion [data-stagger] > *,
  .motion [data-reveal="mask"] img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* page to page */
.page-enter-active,
.page-leave-active {
  transition: opacity 260ms ease, transform 260ms ease;
}
.page-enter-from {
  opacity: 0;
  transform: translateY(10px);
}
.page-leave-to {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .page-enter-active,
  .page-leave-active {
    transition: none;
  }
}

/* word by word reveal on section titles; only active when scripting is on */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.reveal-word > span {
  display: inline-block;
  white-space: pre;
}
.motion .reveal-word > span {
  transform: translateY(105%);
  opacity: 0;
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), opacity 500ms ease;
}
.motion .reveal-words.is-in .reveal-word > span {
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .motion .reveal-word > span {
    transform: none;
    opacity: 1;
    transition: none;
  }
}

/* fleet strip: panels rise in one after another, and the hovered one takes over */
.motion .packages-section-two .outer-box .package-block-two {
  opacity: 0;
  transform: translateY(46px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    flex 420ms cubic-bezier(0.22, 1, 0.36, 1), filter 420ms ease;
}
.motion .packages-section-two.is-in .package-block-two {
  opacity: 1;
  transform: translateY(0);
}
.packages-section-two .outer-box:hover .package-block-two {
  filter: saturate(0.55) brightness(0.72);
}
.packages-section-two .outer-box .package-block-two:hover {
  filter: none;
}
.package-block-two .go {
  position: absolute;
  left: 30px;
  bottom: 34px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 320ms ease 160ms, transform 320ms ease 160ms;
  pointer-events: none;
}
.package-block-two:hover .go {
  opacity: 1;
  transform: translateY(0);
}
.package-block-two .go svg {
  transition: transform 320ms ease;
}
.package-block-two:hover .go svg {
  transform: translateX(5px);
}
@media (prefers-reduced-motion: reduce) {
  .motion .packages-section-two .outer-box .package-block-two {
    opacity: 1;
    transform: none;
    transition: flex 300ms ease;
  }
  .package-block-two .go {
    transition: none;
  }
}
@media (max-width: 991.98px) {
  .packages-section-two .outer-box:hover .package-block-two {
    filter: none;
  }
  .package-block-two .go {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------
   Fleet listing cards
   --------------------------------------------------------------- */
.boat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 991.98px) {
  .boat-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575.98px) {
  .boat-cards {
    grid-template-columns: 1fr;
  }
}
.boat-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--theme-color2);
}
.motion .boat-cards .boat-card {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 650ms ease, transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}
.motion .boat-cards.is-in .boat-card {
  opacity: 1;
  transform: translateY(0);
}
.boat-card__media {
  display: block;
  overflow: hidden;
}
.boat-card__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.boat-card:hover .boat-card__media img {
  transform: scale(1.07);
}
.boat-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 90px 28px 26px;
  background: linear-gradient(transparent, rgba(2, 31, 54, 0.88) 58%, rgba(2, 31, 54, 0.95));
  color: #fff;
  pointer-events: none;
}
.boat-card__tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ec9e3;
  margin-bottom: 7px;
}
.boat-card__name {
  display: block;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 7px;
}
.boat-card__route {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}
.boat-card__route i {
  margin-right: 5px;
  color: var(--theme-color1);
}
.boat-card__go {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.boat-card:hover .boat-card__go {
  opacity: 1;
  transform: translateY(0);
}
.boat-card__go svg {
  transition: transform 320ms ease;
}
.boat-card:hover .boat-card__go svg {
  transform: translateX(5px);
}
@media (prefers-reduced-motion: reduce) {
  .motion .boat-cards .boat-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .boat-card__media img,
  .boat-card__go,
  .boat-card__go svg {
    transition: none;
  }
}
@media (hover: none) {
  .boat-card__go {
    opacity: 1;
    transform: none;
  }
}

/* About page: the template hangs this title over the photo, which only worked
   with its own three-line heading. Keep it in the flow instead. */
.about-section-three .inner-column .sec-title {
  position: relative;
  right: auto;
  top: auto;
  margin-bottom: 32px;
}
.about-section-three {
  padding-top: 120px;
}
@media (max-width: 991.98px) {
  .about-section-three {
    padding-top: 80px;
  }
}
.about-section-three .about-figure {
  position: relative;
}
.about-section-three .about-figure .icon-wheel-5 {
  top: -18px;
  left: -62px;
}
@media (max-width: 1199.98px) {
  .about-section-three .about-figure .icon-wheel-5 {
    display: none;
  }
}


/* booking: one screen hands over to the next */
.step-enter-active,
.step-leave-active {
  transition: opacity 260ms ease, transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.step-enter-from {
  opacity: 0;
  transform: translateX(26px);
}
.step-leave-to {
  opacity: 0;
  transform: translateX(-26px);
}
@media (prefers-reduced-motion: reduce) {
  .step-enter-active,
  .step-leave-active {
    transition: none;
  }
}

/* the anti-robot field: out of sight and out of the tab order, but still a
   real field so a crawler fills it */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-sent {
  margin: 14px 0 0;
  font-size: 14px;
  color: #1e7a4a;
}
.form-failed {
  margin: 14px 0 0;
  font-size: 14px;
  color: #b4641f;
}

/* ---------------------------------------------------------------
   Video backgrounds
   --------------------------------------------------------------- */
.video-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
  pointer-events: none;
}
.video-bg__poster,
.video-bg__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-bg__media {
  opacity: 0;
  animation: video-bg-in 900ms ease forwards;
}
@keyframes video-bg-in {
  to { opacity: 1; }
}
.video-bg__scrim {
  position: absolute;
  inset: 0;
}
/* keeps the copy readable over moving pictures, while the footage stays visible */
.video-bg__scrim.is-light {
  background: linear-gradient(rgba(246, 249, 251, 0.72), rgba(246, 249, 251, 0.6));
}
.video-bg__scrim.is-dark {
  background: linear-gradient(rgba(2, 31, 54, 0.55), rgba(2, 31, 54, 0.72));
}

/* the template paints these boxes opaque, which would bury the video */
.about-section-two .outer-box.has-video {
  background-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .video-bg__media { animation: none; opacity: 1; }
}