/* Premium motion layer: safe to add after styles.css. */
.motion-hero-ready .hero-visual {
  isolation: isolate;
  overflow: hidden;
}

.motion-hero-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  background: #f7f8f8;
}

.motion-hero-ready .hero-main-image {
  opacity: 0;
}

.motion-hero-layer {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.02) translate3d(0, 0, 0);
  transition: opacity 1200ms ease;
}

.motion-hero-layer.is-active {
  opacity: 1;
  animation: motionHeroPan 9500ms ease-out forwards;
}

.motion-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.motion-paused .motion-hero-layer {
  animation-play-state: paused;
}

.review-conversation {
  position: relative;
}

.motion-review-ready .review-message {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 540ms ease,
    transform 540ms ease;
  transition-delay: calc(var(--motion-message-index, 0) * 120ms);
  will-change: opacity, transform;
}

.motion-review-ready .review-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.motion-review-ready .review-message::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  margin-left: -24px;
  border-radius: 50%;
  background: var(--sun, #f5d652);
  opacity: 0.9;
}

.motion-review-ready .review-message:nth-of-type(even)::before {
  right: 12px;
  margin-left: 0;
}

.motion-review-ready .review-message {
  box-shadow: 0 12px 34px rgba(34, 37, 34, 0.06);
}


.motion-carousel-on .hotel-card > img {
  transition: opacity 260ms ease;
}

.compare-table [data-program="ours"] {
  position: relative;
  box-shadow: inset 0 0 0 2px rgba(245, 214, 82, 0.64);
}

.compare-table thead [data-program="ours"] {
  box-shadow:
    inset 0 0 0 2px rgba(34, 37, 34, 0.88),
    0 12px 34px rgba(34, 37, 34, 0.08);
}

.compare-table [data-program="ours"] strong {
  text-decoration: underline;
  text-decoration-color: var(--sun, #f5d652);
  text-decoration-thickness: 5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

@keyframes motionHeroPan {
  from {
    transform: scale(1.02) translate3d(-1.2%, 0, 0);
  }
  to {
    transform: scale(1.1) translate3d(1.2%, -1%, 0);
  }
}

@media (max-width: 700px) {
  .motion-review-ready .review-message::before {
    width: 7px;
    height: 7px;
    margin-left: -18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-hero-ready .hero-main-image {
    opacity: 1;
  }

  .motion-hero-stage {
    display: none;
  }

  .motion-review-ready .review-message {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Keep our program distinct while retaining the comparison's units and conditions. */
.compare-table [data-program="ours"] { background: #fffbee; }
.compare-table thead [data-program="ours"] { background: #fff5cc; }

/* Full-bleed opening scene, with readable content over the travel film. */
#hero.hero-section {
  isolation: isolate;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: calc(100svh - var(--hero-top, 100px));
  margin: 0;
  padding: 64px max(32px, calc((100% - 1200px) / 2)) 88px;
  color: #fff;
}
#hero .hero-visual {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 0;
}
#hero .hero-main-image { width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
#hero .hero-visual::after {
  display: block;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(8,28,36,.7), rgba(8,28,36,.22)), linear-gradient(0deg, rgba(8,28,36,.3), transparent 60%);
}
#hero .hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; max-width: 660px; }
#hero .hero-copy h1 { padding: 0; margin: 0; color: #fff; font-size: clamp(32px, 4.5vw, 60px); line-height: 1.28; align-self: auto; }
#hero .hero-lead { margin: 0; color: #fff; font-size: 16px; }
#hero .hero-stats { width: min(100%, 440px); margin: 0; padding: 0; color: #fff; }
#hero .hero-stats dt, #hero .hero-stats dd { color: #fff; }
#hero .hero-stats div { border-color: #ffffff55; }
#hero .hero-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px; margin: 0; align-self: auto; width: auto; }
#hero .hero-actions .button-primary { width: auto; min-width: 164px; }
#hero .hero-actions .button-ghost { color: #fff; border-color: #ffffff66; }
@media (max-width: 700px) {
  #hero.hero-section { padding: 36px 20px 82px; }
  #hero .hero-copy { gap: 20px; }
  #hero .hero-lead { font-size: 14px; line-height: 1.7; }
  #hero .hero-stats { max-width: 330px; }
  #hero .hero-actions { width: 100%; gap: 8px; }
  #hero .hero-actions .button-primary { min-width: 130px; }
  #hero .hero-actions .button-ghost { margin: 0; font-size: 12px; }
}
#hero .hero-lead strong { color: #fff; }
@media (max-width: 700px) {
}