:root {
  --brand-primary: #0091d0;
  --brand-accent: #e5b04b;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family:
    "Outfit",
    system-ui,
    -apple-system,
    Segoe UI,
    sans-serif;
  color: #fff;
}

body {
  background: #06090d;
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

/* ---- Floating top brand bar (logo + language switcher only) ---- */
.tours-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: clamp(64px, 8vh, 110px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 clamp(14px, 4vw, 56px);
  pointer-events: none;
}
.tours-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6, 9, 13, 0.55),
    rgba(6, 9, 13, 0)
  );
  pointer-events: none;
  z-index: -1;
}
.tours-topbar > * {
  pointer-events: auto;
}

.tours-brand {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 12px;
  position: relative;
  isolation: isolate;
  transition: transform 0.4s ease;
}
/* Atmospheric halo — radial gradient with frosted backdrop, edges
   feathered to transparent via a mask so it never reads as a hard box.
   Works on dark AND light slide images. */
.tours-brand::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(
      ellipse 110% 130% at 50% 50%,
      rgba(8, 12, 18, 0.6) 0%,
      rgba(8, 12, 18, 0.38) 38%,
      rgba(8, 12, 18, 0.14) 70%,
      rgba(8, 12, 18, 0) 100%
    );
  -webkit-backdrop-filter: blur(10px) saturate(115%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-mask-image: radial-gradient(
    ellipse 100% 110% at 50% 50%,
    #000 55%,
    transparent 96%
  );
  mask-image: radial-gradient(
    ellipse 100% 110% at 50% 50%,
    #000 55%,
    transparent 96%
  );
  pointer-events: none;
  transition: opacity 0.3s ease;
}
/* Hairline gold underline — narrow, fades to transparent at both ends */
.tours-brand::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 2px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(201, 165, 88, 0) 0%,
    rgba(201, 165, 88, 0.55) 50%,
    rgba(201, 165, 88, 0) 100%
  );
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.tours-brand:hover::before {
  opacity: 0.85;
}
.tours-brand:hover::after {
  opacity: 1;
}
.tours-brand img {
  display: block;
  width: auto;
  /* Single tight shadow — keeps glyph contrast without the multi-layer
     blur that softens letter edges and makes wordmarks read fuzzy. */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  image-rendering: auto;
  transition: transform 0.4s ease;
}
.tours-brand:hover img {
  transform: translateY(-1px);
}
.tours-brand .tours-brand__desktop {
  height: clamp(52px, 6vh, 76px);
}
.tours-brand .tours-brand__mobile {
  height: 44px;
  display: none;
}
@media (max-width: 575.98px) {
  .tours-brand .tours-brand__desktop {
    display: none;
  }
  .tours-brand .tours-brand__mobile {
    display: block;
  }
}

/* Re-skin the language switcher for the dark hero context.
         We reuse the demo1 markup (.nav-item-lang) so the existing
         language-switcher.js continues to work, but flatten the
         surrounding chrome since there's no full nav here. */
.tours-lang {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.tours-lang .nav-item-lang {
  position: relative;
  list-style: none;
}
.tours-lang .nav-link-lang {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}
.tours-lang .nav-link-lang:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}
/* All flags inside the language switcher — both the trigger and the
   dropdown items — share the same compact size. We must size them in
   CSS (not just via the static HTML width/height attrs) because
   language-switcher.js rebuilds the dropdown markup at runtime and
   doesn't set those attributes on the generated <img> elements. */
.tours-lang .lang-flag {
  width: 22px;
  height: 16px;
  flex: none;
  border-radius: 2px;
  object-fit: cover;
}
.tours-lang .nav-link-lang .lang-caret {
  font-size: 0.75rem;
  opacity: 0.7;
}
.tours-lang .nav-dropdown-lang {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  list-style: none;
  margin: 0;
  padding: 8px;
  min-width: 220px;
  background: rgba(15, 20, 28, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.tours-lang .nav-item-lang.is-open .nav-dropdown-lang {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.tours-lang .nav-dropdown-item {
  list-style: none;
}
.tours-lang .nav-dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Outfit", sans-serif;
  font-size: 0.88rem;
  cursor: default;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.tours-lang a.nav-dropdown-link {
  cursor: pointer;
}
.tours-lang a.nav-dropdown-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.tours-lang .nav-dropdown-link.active {
  background: rgba(0, 145, 208, 0.18);
  color: #fff;
}
.tours-lang .nav-dropdown-link .lang-code {
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-right: 4px;
  opacity: 0.85;
}
.tours-lang .nav-dropdown-link .lang-name {
  flex: 1;
}
.tours-lang .nav-dropdown-link .lang-check {
  opacity: 0;
  color: var(--brand-accent, #e5b04b);
}
.tours-lang .nav-dropdown-link.active .lang-check {
  opacity: 1;
}

/* Compact lang trigger on mobile: drop the "EN" label and the
         caret padding so the pill stays balanced with the icon logo. */
@media (max-width: 575.98px) {
  .tours-lang .nav-link-lang {
    padding: 8px 12px;
    gap: 8px;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
  }
  .tours-lang .nav-link-lang .lang-current {
    display: none;
  }
  .tours-lang .nav-link-lang .lang-flag {
    width: 24px;
    height: 18px;
  }
  .tours-lang .nav-dropdown-lang {
    right: 0;
    min-width: 200px;
    max-width: calc(100vw - 28px);
  }
}

/* ---- Full-viewport hero (self-contained — no theme classes) ---- */
.tours-hero-wrap {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.tours-hero-wrap .swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.tours-hero-wrap .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.tours-hero-wrap .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
}
.tour-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tour-slide__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: transform 9s ease-out;
}
.swiper-slide-active .tour-slide__bg {
  transform: scale(1.1);
}
.tour-slide__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background:
    linear-gradient(
      to right,
      rgba(6, 10, 16, 0.85) 0%,
      rgba(6, 10, 16, 0.55) 45%,
      rgba(6, 10, 16, 0.18) 75%,
      rgba(6, 10, 16, 0.05) 100%
    ),
    linear-gradient(to top, rgba(6, 10, 16, 0.55) 0%, rgba(6, 10, 16, 0) 55%);
}

/* Bootstrap-equivalent container so the slide copy sits at the
         expected left margin instead of hugging the viewport edge. */
.tours-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 576px) {
  .tours-container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .tours-container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .tours-container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .tours-container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .tours-container {
    max-width: 1320px;
  }
}
/* No display:none fallback for slides 2/3 — Swiper's own CSS already
         puts the slides in a horizontal flex track, and the swiper container's
         overflow:hidden clips anything past slide 1. Forcing display:none here
         confused Swiper's slide-size computation on init. */

/* ---- Slide content typography ---- */
.tours-slide-content {
  max-width: 720px;
  /* No own padding — the parent .tours-container handles gutters. */
}
.tours-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(229, 176, 75, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--brand-accent, #e5b04b);
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.tours-kicker::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-accent, #e5b04b);
  box-shadow: 0 0 12px rgba(229, 176, 75, 0.8);
  animation: tours-pulse 2.4s ease-in-out infinite;
}
@keyframes tours-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.7);
  }
}
.tours-title {
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  font-size: clamp(2.2rem, 5.2vw, 4.6rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.55);
}
.tours-title .accent {
  color: var(--brand-accent, #e5b04b);
}
.tours-desc {
  color: rgba(255, 255, 255, 0.85);
  font-family: "Outfit", sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 0 40px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* ---- Buttons (modern, glow, RTL-safe) ---- */
.tours-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.tours-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
  white-space: nowrap;
}
.tours-btn i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}
.tours-btn:hover {
  transform: translateY(-2px);
}
.tours-btn:hover i {
  transform: translateX(4px);
}
.tours-btn--primary {
  background: var(--brand-primary, #0091d0);
  color: #fff;
  box-shadow:
    0 14px 30px rgba(0, 145, 208, 0.35),
    0 0 0 0 rgba(0, 145, 208, 0.6);
}
.tours-btn--primary:hover {
  background: #0a9fde;
  color: #fff;
  box-shadow:
    0 18px 40px rgba(0, 145, 208, 0.5),
    0 0 0 6px rgba(0, 145, 208, 0.18);
}
.tours-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.tours-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: var(--brand-accent, #e5b04b);
  color: #fff;
}

/* ---- Slide counter (vertical, side-mounted) ---- */
.tours-counter {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-family: "Outfit", sans-serif;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
}
.tours-counter__current {
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--brand-accent, #e5b04b);
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}
.tours-counter__bar {
  width: 2px;
  height: 90px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.tours-counter__bar::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 33.333%;
  background: var(--brand-accent, #e5b04b);
  box-shadow: 0 0 12px rgba(229, 176, 75, 0.6);
  transition: transform 0.7s cubic-bezier(0.65, 0.05, 0.36, 1);
  transform-origin: top;
}
.tours-hero-wrap[data-active="2"] .tours-counter__bar::after {
  transform: translateY(100%);
}
.tours-hero-wrap[data-active="3"] .tours-counter__bar::after {
  transform: translateY(200%);
}
.tours-counter__total {
  font-size: 0.95rem;
  opacity: 0.7;
  letter-spacing: 1px;
}

/* ---- Bottom toolbar: pagination + arrows ---- */
.tours-bottombar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(24px, 4vh, 48px);
  z-index: 20;
  pointer-events: none;
}
/* Inner row uses the same .tours-container max-widths/gutters as
         the slide copy, so the pagination's left edge lines up with the
         slide title — not flush against the viewport edge. */
.tours-bottombar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.tours-bottombar__inner > * {
  pointer-events: auto;
}
/* Override Swiper's default `.swiper-pagination` absolute positioning
         so our pagination sits inline inside the bottom toolbar instead of
         spanning the whole width and overlapping the prev/next arrows. */
.tours-pagination {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  transform: none !important;
  width: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(10, 14, 19, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.tours-pagination .swiper-pagination-bullet {
  width: 26px;
  height: 4px;
  margin: 0 !important;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  transition:
    width 0.45s ease,
    background-color 0.45s ease,
    box-shadow 0.45s ease;
}
.tours-pagination .swiper-pagination-bullet-active {
  width: 48px;
  background: var(--brand-accent, #e5b04b);
  box-shadow: 0 0 14px rgba(229, 176, 75, 0.55);
}
.tours-arrows {
  display: inline-flex;
  gap: 10px;
}
.tours-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 14, 19, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}
.tours-arrow:hover {
  background: var(--brand-primary, #0091d0);
  border-color: var(--brand-primary, #0091d0);
  transform: translateY(-2px);
}
.tours-arrow.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---- Slide content visibility ----
         Default is fully visible (no-JS / pre-Swiper fallback).
         Once Swiper inits we add `.is-ready` to the wrap; from then on,
         only the active slide shows content — others fade out. We use
         `.swiper-slide-active` directly (safe because we use `rewind`
         instead of `loop`, so Swiper does NOT clone slides). */
.tour-slide__content-inner {
  opacity: 1;
  transform: translateY(0);
}
.tours-hero-wrap.is-ready .tour-slide__content-inner {
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
  transition-delay: 0.2s;
}
.tours-hero-wrap.is-ready
  .swiper-slide:not(.swiper-slide-active)
  .tour-slide__content-inner {
  opacity: 0;
  transform: translateY(28px);
  transition-delay: 0s;
}

/* ---- Responsive tweaks ---- */
@media (max-width: 991.98px) {
  .tours-counter {
    display: none;
  }
  .tours-slide-content {
    max-width: 100%;
  }
}
@media (max-width: 575.98px) {
  .tours-bottombar__inner {
    flex-direction: column-reverse;
    gap: 14px;
    align-items: flex-start;
  }
  .tours-arrows {
    align-self: flex-end;
  }
  .tours-btn {
    padding: 14px 22px;
    font-size: 0.9rem;
  }
  .tours-kicker {
    font-size: 0.7rem;
    letter-spacing: 2px;
    padding: 6px 12px;
    margin-bottom: 18px;
  }
}

/* ===========================================================
   HOTELS — full-viewport hero
   Distinct visual identity vs. the tours page:
   - Bottom-anchored editorial layout (vs vertical-centered).
   - Serif italic title (Fraunces) for a luxury hotel feel.
   - Bottom-up dark gradient (vs left→right sweep).
   - Big numeric counter top-right.
   - Bottom progress strip with three labeled segments
     that fill in sync with autoplay.
   - Sharp-cornered architectural buttons (vs pill shape).
   =========================================================== */

.hotels-hero-wrap {
  height: 100vh;
  height: 100dvh;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.hotels-hero-wrap .swiper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.hotels-hero-wrap .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.hotels-hero-wrap .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
}

.hotel-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.hotel-slide__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition: transform 11s ease-out;
  will-change: transform;
}
.swiper-slide-active .hotel-slide__bg {
  transform: scale(1.12) translate(-2%, -1.5%);
}
@keyframes hotels-ken-burns {
  0%   { transform: scale(1.02) translate(0, 0); }
  100% { transform: scale(1.15) translate(-2%, -1.5%); }
}
.hotels-hero-wrap.is-single .swiper-slide-active .hotel-slide__bg,
.hotels-hero-wrap.is-single .hotel-slide__bg {
  animation: hotels-ken-burns 20s ease-in-out infinite alternate;
  transition: none;
}
.hotel-slide__overlay {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  /* Stronger and taller bottom gradient so the dark zone reaches up
     into the content area on bright slides too. */
  background:
    linear-gradient(
      to top,
      rgba(6, 10, 16, 0.96) 0%,
      rgba(6, 10, 16, 0.84) 22%,
      rgba(6, 10, 16, 0.52) 50%,
      rgba(6, 10, 16, 0.18) 75%,
      rgba(6, 10, 16, 0) 95%
    ),
    linear-gradient(
      to right,
      rgba(6, 10, 16, 0.45) 0%,
      rgba(6, 10, 16, 0) 55%,
      rgba(6, 10, 16, 0.22) 100%
    );
}
.hotel-slide__inner {
  width: 100%;
  /* Bottom padding clears the progress strip and the floating arrows. */
  padding-bottom: clamp(150px, 18vh, 220px);
  padding-top: clamp(140px, 16vh, 200px);
}

.hotels-content {
  position: relative;
  isolation: isolate;
  max-width: 820px;
}
/* Localized "ink halo" — a soft blurred dark radial that lives right
   behind this slide's text. Because the parent uses `isolation: isolate`,
   z-index: -1 stays inside this stacking context, so the halo always
   sits in front of the slide photo and behind the text — guaranteed
   contrast no matter how bright the hero image is. */
.hotels-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -50px -90px -30px -100px;
  background: radial-gradient(
    ellipse at 22% 60%,
    rgba(6, 10, 16, 0.62) 0%,
    rgba(6, 10, 16, 0.36) 42%,
    rgba(6, 10, 16, 0) 78%
  );
  filter: blur(24px);
  pointer-events: none;
}

/* Luxurious editorial kicker pill — bigger, gold-glassmorphic,
   pulsing dot, refined shadow. Distinctive without being loud. */
.hotels-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgba(201, 165, 88, 0.18),
    rgba(201, 165, 88, 0.05) 60%,
    rgba(255, 255, 255, 0.05)
  );
  border: 1px solid rgba(201, 165, 88, 0.42);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  color: var(--brand-accent, #c9a558);
  font-family: "Outfit", sans-serif;
  font-size: clamp(0.82rem, 1.05vw, 1rem);
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin-bottom: 32px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  box-shadow:
    inset 0 0 22px rgba(201, 165, 88, 0.12),
    0 8px 26px rgba(0, 0, 0, 0.32);
}
.hotels-kicker::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-accent, #c9a558);
  box-shadow:
    0 0 0 3px rgba(201, 165, 88, 0.18),
    0 0 16px rgba(201, 165, 88, 0.85);
  animation: hotelsKickerPulse 2.4s ease-in-out infinite;
}
@keyframes hotelsKickerPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.7);
  }
}

.hotels-title {
  color: #fff;
  font-family: "Fraunces", "Outfit", serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.018em;
  margin: 0 0 26px;
  /* Layered shadow: a tight inner halo for hard contrast at the
     glyph edge, plus a soft wide drop for atmospheric depth. */
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.55),
    0 4px 18px rgba(0, 0, 0, 0.6),
    0 0 30px rgba(0, 0, 0, 0.4);
}
.hotels-title .accent {
  display: block; /* force the italic accent onto its own line */
  font-style: italic;
  color: var(--brand-accent, #c9a558);
  font-weight: 600;
}

.hotels-desc {
  color: rgba(255, 255, 255, 0.92);
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.7;
  max-width: 660px;
  margin: 0 0 38px;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.6),
    0 2px 14px rgba(0, 0, 0, 0.55);
}

.hotels-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Sharp-cornered architectural buttons. The hover slide-fill
   contrasts with the tours page's pill+glow look. */
.hotels-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.6px;
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
}
.hotels-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.hotels-btn:hover::before {
  transform: translateX(0);
}
.hotels-btn i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}
.hotels-btn:hover i {
  transform: translateX(4px);
}
.hotels-btn--primary {
  background: var(--brand-accent, #c9a558);
  color: #0a0e13;
  border-color: var(--brand-accent, #c9a558);
}
.hotels-btn--primary::before {
  background: #fff;
}
.hotels-btn--primary:hover {
  color: #0a0e13;
  border-color: #fff;
}
.hotels-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}
.hotels-btn--ghost::before {
  background: rgba(255, 255, 255, 0.96);
}
.hotels-btn--ghost:hover {
  color: #0a0e13;
  border-color: #fff;
}

/* Top-right giant counter */
.hotels-counter {
  position: absolute;
  top: clamp(96px, 14vh, 180px);
  right: clamp(28px, 5vw, 80px);
  z-index: 12;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: "Fraunces", serif;
  color: rgba(255, 255, 255, 0.95);
  pointer-events: none;
  line-height: 1;
}
.hotels-counter__current {
  font-size: clamp(3rem, 6vw, 5.2rem);
  font-weight: 300;
  color: var(--brand-accent, #c9a558);
  line-height: 0.85;
}
.hotels-counter__divider,
.hotels-counter__total {
  font-size: clamp(0.95rem, 1vw, 1.1rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 14px;
}

/* Floating side arrows (hidden on small screens — segments + swipe + wheel) */
.hotels-arrows {
  position: absolute;
  right: clamp(28px, 5vw, 80px);
  bottom: clamp(60px, 10vh, 96px);
  z-index: 14;
  display: inline-flex;
  gap: 8px;
}
.hotels-arrow {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 0;
  background: rgba(10, 14, 19, 0.35);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hotels-arrow:hover {
  background: var(--brand-accent, #c9a558);
  border-color: var(--brand-accent, #c9a558);
  color: #0a0e13;
}
.hotels-arrow.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Bottom progress strip — three labeled segments. The active one
   fills in sync with autoplay (CSS animation, duration set via the
   --hotels-autoplay variable on the wrap so JS doesn't flicker). */
/* Wrap the bar in a soft dark gradient backdrop so the strip stays
   legible no matter what photo is behind it (sunsets, sky, water).
   The padding-top reserves vertical room for the labels above. */
.hotels-bottombar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
  padding-top: 64px;
  background: linear-gradient(
    to top,
    rgba(6, 10, 16, 0.85) 0%,
    rgba(6, 10, 16, 0.5) 55%,
    rgba(6, 10, 16, 0) 100%
  );
}
.hotels-progress {
  display: flex;
  gap: 4px; /* dark slits between segments make boundaries obvious */
  width: 100%;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.45);
}
.hotels-progress__segment {
  flex: 1;
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition: background 0.3s ease;
}
/* Expanded invisible click target (touch-friendly without thickening the bar) */
.hotels-progress__segment::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -22px;
  bottom: -8px;
}
/* Brand-gradient fill: primary blue → accent gold.
   The blue end gives strong contrast against the warm sunset photos
   so the bar reads cleanly even when the gold side blends with them.
   Glow is a soft mix of both ends for a luxurious dual-tone shimmer. */
.hotels-progress__segment::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--brand-primary, #0091d0) 0%,
    var(--brand-accent, #e5b04b) 100%
  );
  box-shadow:
    0 0 14px rgba(0, 145, 208, 0.55),
    0 0 22px rgba(229, 176, 75, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  transform-origin: left;
  transform: scaleX(0);
}
.hotels-progress__segment.is-past::after {
  transform: scaleX(1);
  /* Past segments stay filled but glow is dimmer than the active one,
     so the user can read which slide is currently playing at a glance. */
  box-shadow:
    0 0 6px rgba(0, 145, 208, 0.35),
    0 0 10px rgba(229, 176, 75, 0.3);
}
.hotels-progress__segment.is-active::after {
  animation: hotels-progress-fill linear forwards;
  animation-duration: var(--hotels-autoplay, 7000ms);
}
@keyframes hotels-progress-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.hotels-progress__segment:hover {
  background: rgba(255, 255, 255, 0.5);
}
.hotels-progress__label {
  position: absolute;
  bottom: calc(100% + 16px);
  inset-inline-start: 0;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 2.5px;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  transition:
    color 0.3s ease,
    letter-spacing 0.3s ease;
}
/* The first and last segments sit flush against the viewport edges,
   so their labels would otherwise touch the screen edge. Pull them
   inward by the same gutter the rest of the page uses. Logical
   properties (inset-inline-*) auto-mirror in RTL so this works for
   both directions without a separate override. */
.hotels-progress__segment:first-child .hotels-progress__label {
  inset-inline-start: clamp(16px, 3vw, 40px);
}
.hotels-progress__segment:last-child .hotels-progress__label {
  inset-inline-start: auto;
  inset-inline-end: clamp(16px, 3vw, 40px);
}
.hotels-progress__label-num {
  display: inline-block;
  min-width: 22px;
  color: var(--brand-accent, #e5b04b);
  font-weight: 700;
  margin-right: 8px;
}
.hotels-progress__segment.is-past .hotels-progress__label {
  color: #fff;
}
.hotels-progress__segment.is-active .hotels-progress__label {
  color: #fff;
  letter-spacing: 3.5px;
}

/* Slide content reveal — only animates after Swiper inits (.is-ready),
   so the page stays usable if JS never runs. */
.hotels-content > * {
  opacity: 1;
  transform: translateY(0);
}
.hotels-hero-wrap.is-ready .hotels-content > * {
  transition:
    opacity 0.95s ease,
    transform 0.95s ease;
  transition-delay: 0.25s;
}
.hotels-hero-wrap.is-ready
  .swiper-slide:not(.swiper-slide-active)
  .hotels-content
  > * {
  opacity: 0;
  transform: translateY(34px);
  transition-delay: 0s;
}

/* ---- Responsive (width) ---- */
@media (max-width: 991.98px) {
  .hotels-counter {
    top: clamp(76px, 11vh, 110px);
  }
  .hotels-arrows {
    bottom: clamp(48px, 8vh, 72px);
  }
}
@media (max-width: 767.98px) {
  .hotels-content {
    max-width: 100%;
  }
  .hotel-slide__inner {
    padding-bottom: clamp(120px, 14vh, 160px);
  }
}
@media (max-width: 575.98px) {
  .hotels-counter {
    top: 76px;
    right: 16px;
  }
  .hotels-counter__current {
    font-size: 2.4rem;
  }
  .hotels-arrows {
    display: none;
  }
  .hotels-progress__label {
    font-size: 0.62rem;
    letter-spacing: 1.2px;
  }
  .hotels-progress__label-num {
    margin-right: 4px;
  }
  .hotels-btn {
    padding: 13px 20px;
    font-size: 0.88rem;
  }
}

/* ---- Responsive (height) ----
   On short viewports the bottom-anchored content was tall enough to
   reach up into the topbar (logo + lang switcher). Two things happen:
     1. Shrink the editorial type so the content block fits.
     2. Switch from bottom-aligned to centered so the content can't
        ride up over the topbar even if it's still tall.
   The counter and arrows also tighten so they don't crowd the photo. */
@media (max-height: 820px) {
  .hotel-slide__inner {
    padding-top: clamp(96px, 13vh, 140px);
    padding-bottom: clamp(110px, 14vh, 150px);
  }
  .hotels-title {
    font-size: clamp(2rem, 4.6vw, 3.4rem);
    margin-bottom: 20px;
  }
  .hotels-desc {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 28px;
  }
  .hotels-kicker {
    margin-bottom: 22px;
    font-size: 0.92rem;
    letter-spacing: 4px;
    padding: 10px 18px;
  }
  .hotels-counter {
    top: clamp(80px, 12vh, 120px);
  }
}

@media (max-height: 700px) {
  /* Stop anchoring to the bottom — center it so the content has equal
     buffer to topbar above and progress strip below. */
  .hotel-slide__overlay {
    align-items: center;
  }
  .hotel-slide__inner {
    padding-top: 88px; /* clear the floating topbar */
    padding-bottom: 96px; /* clear the bottom progress strip */
  }
  .hotels-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.1;
    margin-bottom: 16px;
  }
  .hotels-desc {
    font-size: 0.95rem;
    line-height: 1.55;
    margin-bottom: 22px;
    max-width: 580px;
  }
  .hotels-kicker {
    font-size: 0.85rem;
    letter-spacing: 3.5px;
    margin-bottom: 16px;
    padding: 8px 16px;
  }
  .hotels-counter {
    top: 80px;
  }
  .hotels-counter__current {
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  }
  .hotels-arrows {
    bottom: 96px;
  }
}

@media (max-height: 560px) {
  /* Very short — laptop in landscape with browser chrome, etc. */
  .hotel-slide__inner {
    padding-top: 76px;
    padding-bottom: 80px;
  }
  .hotels-kicker {
    font-size: 0.78rem;
    letter-spacing: 3px;
    margin-bottom: 12px;
    padding: 7px 14px;
  }
  .hotels-title {
    font-size: clamp(1.5rem, 3.6vw, 2.2rem);
    margin-bottom: 12px;
  }
  .hotels-desc {
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 18px;
    /* Trim the description to two lines on very tight viewports so the
       CTAs always remain visible. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hotels-btn {
    padding: 11px 18px;
    font-size: 0.85rem;
  }
  .hotels-counter {
    top: 70px;
  }
}


/* ---- Floating bottom-start project nav (replaces colored CTA buttons
   AND the old slider pagination dots). Glassmorphic chip with a gold
   leading bar that echoes the kicker's brand accent. Wraps cleanly
   when there are many links. ---- */
.tours-floating-nav {
  position: fixed;
  z-index: 40;
  bottom: clamp(20px, 4vh, 36px);
  /* Align the chip's left edge with the .tours-container content edge,
     so it sits flush with the slide title/description on every
     breakpoint — not pinned to the page edge on wide screens. */
  --tfn-container: 100vw;
  --tfn-pad: 1.5rem;
  left: calc(
    max(0px, (100vw - var(--tfn-container)) / 2) + var(--tfn-pad)
  );
  /* Cap width so many links can never push past the right edge. */
  max-width: calc(100% - clamp(28px, 8vw, 140px));
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 12px;
  row-gap: 5px;
  padding: 8px 14px;
  background: linear-gradient(
    135deg,
    rgba(15, 20, 28, 0.62),
    rgba(15, 20, 28, 0.42)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 2px solid var(--brand-accent, #c9a558);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  animation: tours-floating-nav-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
[dir="rtl"] .tours-floating-nav {
  left: auto;
  right: calc(
    max(0px, (100vw - var(--tfn-container)) / 2) + var(--tfn-pad)
  );
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 2px solid var(--brand-accent, #c9a558);
}
/* Container max-widths matched to .tours-container at every breakpoint. */
@media (min-width: 576px) {
  .tours-floating-nav { --tfn-container: 540px; }
}
@media (min-width: 768px) {
  .tours-floating-nav { --tfn-container: 720px; }
}
@media (min-width: 992px) {
  .tours-floating-nav { --tfn-container: 960px; }
}
@media (min-width: 1200px) {
  .tours-floating-nav { --tfn-container: 1140px; }
}
@keyframes tours-floating-nav-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tours-floating-nav__link {
  position: relative;
  display: inline-block;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-family: "Outfit", sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 0;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: color 0.3s ease;
}
.tours-floating-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--brand-accent, #c9a558);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
[dir="rtl"] .tours-floating-nav__link::after {
  transform-origin: right center;
}
.tours-floating-nav__link:hover,
.tours-floating-nav__link:focus-visible {
  color: #fff;
  outline: none;
}
.tours-floating-nav__link:hover::after,
.tours-floating-nav__link:focus-visible::after {
  transform: scaleX(1);
}
.tours-floating-nav__sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-accent, #c9a558);
  opacity: 0.7;
  flex: none;
}

/* Tablet — tighten + lift ABOVE the bottom arrows row so they don't
   overlap. Arrows are 52px tall sitting at bottom 24–48px; lift to ~96px. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .tours-floating-nav {
    bottom: clamp(86px, 13vh, 108px);
    column-gap: 10px;
    padding: 7px 12px;
  }
  .tours-floating-nav__link {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
}

/* Mobile — full-width strip pinned at bottom, centered, comfy taps,
   wraps onto multiple lines when many links are present. */
@media (max-width: 575.98px) {
  .tours-floating-nav {
    bottom: 14px;
    left: 14px;
    right: 14px;
    max-width: none;
    justify-content: center;
    column-gap: 14px;
    row-gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
      0 -1px 0 rgba(255, 255, 255, 0.04) inset,
      0 10px 28px rgba(0, 0, 0, 0.5);
    /* Gold edge as a thin top accent for brand cue without lopsided weight */
    background:
      linear-gradient(var(--brand-accent, #c9a558), var(--brand-accent, #c9a558))
        top / 100% 2px no-repeat,
      linear-gradient(
        135deg,
        rgba(15, 20, 28, 0.7),
        rgba(15, 20, 28, 0.5)
      );
  }
  [dir="rtl"] .tours-floating-nav {
    right: 14px;
    left: 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }
  /* Hide the dot separators on phones — when wrapping to multiple
     lines, dangling dots at line edges look untidy. The flex column-gap
     already provides clear visual separation. */
  .tours-floating-nav__sep {
    display: none;
  }
  .tours-floating-nav__link {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }
}