/* ================= Shared section heading ================= */
.section-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.5rem;
}

.section-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-gold);
  margin-bottom: 0.5rem;
}

.section-heading h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 2rem;
  color: var(--brand-navy);
  margin-bottom: 0.5rem;
}

.section-heading p {
  color: #6b7789;
  font-size: 1rem;
  margin: 0;
}

/* ================= Trending destinations grid =================
   Sits directly under the hero: a static 4x2 photo grid (not the horizontal
   carousel the other "Popular X" sections share below), each card searching
   one-way for "today + 6 days" on click. Two small "unique" touches: cards
   reveal on scroll (staggered via --dest-delay, set inline per card) and each
   photo runs a slow, continuous Ken Burns drift that pauses into a faster
   zoom on hover. */
.dest-grid-section {
  padding: 0.5rem 0 3.5rem;
}

.dest-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 230px;
  gap: 1.25rem;
}

.dest-card,
.dest-card:link,
.dest-card:visited,
.dest-card:hover,
.dest-card:active {
  position: relative;
  display: block;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 10px 24px rgba(11, 31, 58, 0.14);
  opacity: 0;
  transform: translateY(28px);
  /* Only box-shadow/margin transition here — transform is owned by the
     one-shot reveal animation below, so the hover lift moves via margin-top
     instead (see .dest-card:hover), never touching transform on this element. */
  transition: box-shadow 0.3s ease, margin-top 0.3s ease;
}

.dest-card.is-visible {
  animation: dest-card-in 0.6s ease forwards;
  animation-delay: var(--dest-delay, 0s);
}

@keyframes dest-card-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dest-card:hover {
  margin-top: -8px;
  box-shadow: 0 24px 46px rgba(11, 31, 58, 0.32);
}

/* Two photo panes (origin + destination), each clipped to a diagonal half —
   a "split poster" look — with a bright slanted seam between them. Zoom is
   applied to this clipped wrapper, not the animated image inside it: a CSS
   animation always keeps ownership of a property it animates (even paused),
   so a plain hover rule on the same element/property would silently do
   nothing — that was the earlier bug where hover-zoom never showed. */
.dest-card-photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform 0.6s ease;
}

.dest-card-photo-from {
  clip-path: polygon(0 0, 57% 0, 41% 100%, 0 100%);
}

.dest-card-photo-to {
  clip-path: polygon(58.5% 0, 100% 0, 100% 100%, 42.5% 100%);
}

.dest-card:hover .dest-card-photo {
  transform: scale(1.1);
}

/* The slanted divider line between the two photo halves — a thin gap left
   between the two clip-paths above (about 1.5% of the card's width), filled
   in as its own bright strip so it reads as a line, not a band. */
.dest-card-divider {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: polygon(57% 0, 58.5% 0, 42.5% 100%, 41% 100%);
  background: linear-gradient(180deg, #fff, var(--brand-gold-bright));
}

/* Each half is sized (and centred/cropped) against its OWN roughly-half-width
   box, not the full card — sizing it to the full card first and only then
   clipping a diagonal window into it (the earlier approach) meant each side
   showed a narrow sliver of a photo composed for the whole card's width, not
   a complete, well-framed shot of that city on its own. */
.dest-card-img {
  position: absolute;
  top: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  animation: dest-ken-burns 16s ease-in-out infinite alternate;
}

.dest-card-img-from {
  left: 0;
  width: 62%;
  background-image: var(--dest-img-from);
}

.dest-card-img-to {
  left: 38%;
  right: 0;
  background-image: var(--dest-img-to);
}

@keyframes dest-ken-burns {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.08);
  }
}

.dest-card:hover .dest-card-img {
  animation-play-state: paused;
}

.dest-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6, 16, 32, 0.05) 40%, rgba(6, 16, 32, 0.88) 100%);
}

.dest-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-navy);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem 0.35rem 0.55rem;
  border-radius: 2rem;
  box-shadow: 0 4px 10px rgba(11, 31, 58, 0.18);
}

.dest-badge .icon {
  width: 12px;
  height: 12px;
  color: var(--brand-gold);
}

.dest-card-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 0.9rem 1rem;
}

.dest-city-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}

.dest-code {
  font-size: 0.62rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.12rem 0.4rem;
  border-radius: 0.35rem;
  letter-spacing: 0.03em;
}

.dest-tagline {
  display: block;
  font-size: 0.78rem;
  color: #fff;
  opacity: 0.85;
  margin-top: 0.15rem;
}

.dest-arrow-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(11, 31, 58, 0.25);
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.dest-arrow-btn .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.dest-card:hover .dest-arrow-btn {
  background: var(--brand-gold);
  color: #fff;
  box-shadow: 0 6px 16px rgba(169, 121, 26, 0.4);
  transform: scale(1.08);
}

.dest-card:hover .dest-arrow-btn .icon {
  transform: translateX(2px);
}

.dest-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2.25rem;
  padding: 1.5rem;
  background: #f4f7fc;
  border: 1px solid rgba(11, 31, 58, 0.06);
  border-radius: 1.25rem;
}

.dest-trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.dest-trust-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.dest-trust-icon .icon {
  width: 20px;
  height: 20px;
}

.dest-trust-icon-blue {
  background: linear-gradient(145deg, #4f8ef0, #2f6fe0);
}

.dest-trust-icon-green {
  background: linear-gradient(145deg, #3fc98a, #1fa971);
}

.dest-trust-icon-purple {
  background: linear-gradient(145deg, #a78bfa, #8b5cf6);
}

.dest-trust-icon-gold {
  background: linear-gradient(145deg, var(--brand-gold-bright), var(--brand-gold));
}

.dest-trust-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.dest-trust-text strong {
  font-size: 0.9rem;
  color: var(--brand-navy);
}

.dest-trust-text span {
  font-size: 0.78rem;
  color: #6b7789;
}

/* ================= Popular routes ================= */
.routes-section {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--brand-navy-soft);
  padding: 3.5rem 0;
}

.routes-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  text-align: left;
  max-width: none;
  margin-bottom: 2rem;
}

.section-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand-navy);
  white-space: nowrap;
}

.section-view-all:hover {
  color: var(--brand-gold);
}

.section-view-all .icon {
  width: 14px;
  height: 14px;
}

.routes-nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.routes-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #dde3ec;
  background: #fff;
  color: var(--brand-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.routes-nav-btn:hover {
  background: var(--brand-navy);
  color: #fff;
}

.routes-nav-btn .icon {
  width: 18px;
  height: 18px;
}

.routes-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.routes-track::-webkit-scrollbar {
  display: none;
}

.route-card {
  position: relative;
  flex: 0 0 300px;
  height: 340px;
  border-radius: 1rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  scroll-snap-align: start;
  text-decoration: none;
  color: #fff;
  display: block;
  box-shadow: 0 15px 35px rgba(11, 31, 58, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-size 0.4s ease;
}

.route-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(11, 31, 58, 0.28);
  background-size: 115%;
  color: #fff;
  text-decoration: none;
}

.route-ribbon {
  position: absolute;
  top: 14px;
  left: -34px;
  background: var(--brand-gold);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 2.5rem;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.route-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 32, 0.1) 0%, rgba(6, 16, 32, 0.88) 100%);
  pointer-events: none;
}

.route-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  z-index: 1;
}

.route-line {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.route-path {
  flex: 1 1 auto;
  position: relative;
  height: 14px;
}

.route-path-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%);
}

.route-path-plane {
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  transition: left 0.5s ease;
}

.route-path-plane .icon {
  width: 100%;
  height: 100%;
  transform: rotate(90deg);
  margin-bottom:15px;
}

.route-card:hover .route-path-plane {
  left: calc(100% - 14px);
}

.route-cities {
  font-size: 0.85rem;
  opacity: 0.9;
  font-weight: 500;
}

.route-tagline {
  font-size: 0.78rem;
  opacity: 0.75;
  margin-top: -0.2rem;
}

.route-price small:last-child {
  margin-right: 0;
  margin-left: 0.2rem;
  text-transform: none;
}

.route-meta {
  font-size: 0.75rem;
  opacity: 0.7;
}

.route-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.3rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.route-price {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--brand-gold-bright);
}

.route-price small {
  font-weight: 400;
  font-size: 0.7rem;
  opacity: 0.75;
  margin-right: 0.25rem;
  text-transform: uppercase;
}

.route-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.8rem;
  font-weight: 600;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  white-space: nowrap;
}

.route-cta .icon {
  width: 14px;
  height: 14px;
}

.route-card:hover .route-cta {
  opacity: 1;
  transform: translateX(0);
}

/* ================= Popular hotel destinations (Hotels home) =================
   Its own class set — NOT .routes-section/.route-card, which Cruise, Tours,
   Sightseeing and Visas all reuse for their own carousels, so redesigning
   those shared classes here would have changed every one of those pages too.
   Full-bleed (the site's standard left:50%/width:100vw/margin:-50vw trick —
   see the note on .wrap in site.css) with no panel background, so it's a
   plain, edge-to-edge photo grid rather than a boxed card like the sections
   above and below it. Ken Burns idle drift + hover zoom follow the same
   pattern as the Flights homepage's Trending Destinations grid: the zoom
   lives on a plain (non-animated) wrapper, never on the element the drift
   animation itself controls — a CSS animation keeps ownership of a property
   it animates even while paused, so a hover rule on that same element/
   property would silently do nothing. */
.hotel-dest-section {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 2.5rem 0 3.5rem;
}

/* The reference's short rule before the eyebrow — scoped to this section so
   it doesn't change .section-eyebrow everywhere else it's used. */
.hotel-dest-eyebrow {
  position: relative;
  padding-left: 1.75rem;
}

.hotel-dest-eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.25rem;
  height: 2px;
  background: var(--brand-gold);
  transform: translateY(-50%);
}

.hotel-dest-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: #fff;
  border-radius: 3rem;
  padding: 0.3rem;
  box-shadow: 0 4px 14px rgba(11, 31, 58, 0.1);
  flex-shrink: 0;
}

.hotel-dest-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: none;
  background: transparent;
  color: #6b7789;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 2rem;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.hotel-dest-toggle-btn .icon {
  width: 15px;
  height: 15px;
}

.hotel-dest-toggle-btn.is-active {
  background: var(--brand-navy);
  color: #fff;
}

.hotel-dest-toggle-btn:not(.is-active):hover {
  color: var(--brand-navy);
}

.hotel-dest-empty {
  text-align: center;
  color: #6b7789;
  font-size: 0.9rem;
  padding: 2rem 0;
  margin: 0;
}

.hotel-dest-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}

.hotel-dest-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  display: block;
  box-shadow: 0 10px 24px rgba(11, 31, 58, 0.14);
  opacity: 0;
  transform: translateY(24px);
  transition: box-shadow 0.3s ease, margin-top 0.3s ease;
}

.hotel-dest-card.is-visible {
  animation: hotel-dest-in 0.6s ease forwards;
  animation-delay: var(--hotel-dest-delay, 0s);
}

.hotel-dest-card.is-hidden {
  display: none;
}

@keyframes hotel-dest-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hotel-dest-card:hover {
  margin-top: -6px;
  box-shadow: 0 24px 46px rgba(11, 31, 58, 0.3);
  color: #fff;
  text-decoration: none;
}

.hotel-dest-img {
  position: absolute;
  inset: -6%;
  background-image: var(--hotel-dest-img);
  background-size: cover;
  background-position: center;
  animation: hotel-dest-ken-burns 18s ease-in-out infinite alternate;
}

@keyframes hotel-dest-ken-burns {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.09);
  }
}

.hotel-dest-card:hover .hotel-dest-img {
  animation-play-state: paused;
}

.hotel-dest-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 16, 32, 0.05) 0%, rgba(6, 16, 32, 0.9) 100%);
}

.hotel-dest-city {
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.85rem;
  z-index: 1;
  font-size: 1rem;
  font-weight: 700;
}

/* ================= Popular tour packages (Tours home) =================
   Own class set, deliberately mirroring .featured-tour-* (the Flights
   homepage's Featured Tours) rather than reusing it directly — same white-
   card-with-a-real-<img> layout, since a photo-overlay card (the first
   version of this section) turns fully blank whenever a package's
   ThumbImagePath 404s, which several of this catalog's packages do. A
   broken <img> here is just a small gray box at the top of an otherwise
   intact card, and also gets an onerror fallback to the same placeholder
   TourDisplay.Image() already uses for a genuinely missing path — that
   still leaves a request that 404s with nothing to fall back to, which this
   fixes. Kept as a horizontal-scroll carousel, not a static grid like
   Featured Tours: this lists all ~90 active packages, not a curated four. */
.tour-pop-section {
  padding: 0.5rem 0 3.5rem;
}

.tour-pop-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.tour-pop-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #dde3ec;
  background: #fff;
  color: var(--brand-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tour-pop-nav-btn:hover {
  background: var(--brand-navy);
  color: #fff;
}

.tour-pop-nav-btn .icon {
  width: 18px;
  height: 18px;
}

.tour-pop-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}

.tour-pop-track::-webkit-scrollbar {
  display: none;
}

.tour-pop-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(11, 31, 58, 0.07);
  box-shadow: 0 8px 20px rgba(11, 31, 58, 0.08);
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.tour-pop-card.is-visible {
  animation: tour-pop-in 0.55s ease forwards;
  animation-delay: var(--tourpop-delay, 0s);
}

@keyframes tour-pop-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tour-pop-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 38px rgba(11, 31, 58, 0.16);
  color: inherit;
  text-decoration: none;
}

.tour-pop-card.is-highlighted {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 1px var(--brand-gold), 0 8px 20px rgba(169, 121, 26, 0.2);
}

.tour-pop-photo {
  position: relative;
  display: block;
  height: 160px;
}

.tour-pop-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tour-pop-card:hover .tour-pop-photo img {
  transform: scale(1.08);
}

.tour-pop-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 2rem;
  box-shadow: 0 3px 8px rgba(11, 31, 58, 0.14);
}

.tour-pop-badge-domestic {
  background: var(--brand-gold-soft);
  color: var(--brand-gold);
}

.tour-pop-badge-international {
  background: #e3f0fd;
  color: #2f6fe0;
}

.tour-pop-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.9rem 1rem 1.05rem;
  flex: 1 1 auto;
}

.tour-pop-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.tour-pop-title-row strong {
  font-size: 0.95rem;
  color: var(--brand-navy);
  line-height: 1.3;
}

.tour-pop-duration {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--brand-navy);
  background: #eef1f6;
  padding: 0.18rem 0.45rem;
  border-radius: 1rem;
  white-space: nowrap;
}

.tour-pop-subtitle {
  font-size: 0.78rem;
  color: #6b7789;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tour-pop-includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.5rem;
  margin: 0.15rem 0;
}

.tour-pop-include {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  color: #4a5568;
  overflow: hidden;
}

.tour-pop-include span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tour-pop-include .icon {
  width: 11px;
  height: 11px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.tour-pop-price-row {
  display: flex;
  flex-direction: column;
  margin-top: 0.3rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(11, 31, 58, 0.12);
}

.tour-pop-price strong {
  font-size: 1.05rem;
  color: var(--brand-navy);
}

.tour-pop-price strong small {
  font-size: 0.65rem;
  font-weight: 400;
}

.tour-pop-price-note {
  font-size: 0.65rem;
  color: #98a2b3;
}

.tour-pop-book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.6rem;
  padding: 0.55rem;
  border-radius: 0.55rem;
  font-weight: 700;
  font-size: 0.8rem;
  color: #fff;
  background: var(--brand-navy);
  transition: background-color 0.2s ease;
}

.tour-pop-card:hover .tour-pop-book-btn {
  background: var(--brand-navy-dark);
}

/* ================= Tour themes (Tours home) =================
   Circular photo tiles, each a real filter into dbo.TourPackages via
   SpecializationsCsv — a genuine search filter, not just decoration. */
.tour-theme-heading {
  margin-bottom: 2rem;
}

.tour-theme-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1.25rem;
}

.tour-theme-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
  opacity: 0;
  transform: translateY(16px);
}

.tour-theme-item.is-visible {
  animation: tour-theme-in 0.55s ease forwards;
  animation-delay: var(--theme-delay, 0s);
}

@keyframes tour-theme-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tour-theme-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 10px 26px rgba(11, 31, 58, 0.14);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.tour-theme-item:hover .tour-theme-photo {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(169, 121, 26, 0.28);
}

.tour-theme-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.tour-theme-item:hover .tour-theme-photo img {
  transform: scale(1.08);
}

.tour-theme-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-navy);
  text-align: center;
}

.tour-theme-item:hover .tour-theme-label {
  color: var(--brand-gold);
}

/* ================= Best time to travel (Tours home) =================
   Full-bleed navy band, same left:50%/width:100vw trick as .routes-section
   and .hotel-dest-section above. Only four seasonal panels are rendered
   (not twelve) — the twelve month pills just pick which one shows, toggled
   client-side in home-sections.js exactly like the hotel Domestic/
   International switch. */
.tour-season-section {
  position: relative;
  left: 50%;
  right: 50%;
  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background: linear-gradient(155deg, var(--brand-navy) 0%, var(--brand-navy-dark) 100%);
  padding: 4rem 0;
  margin-top: 0.5rem;
  margin-bottom: 3rem;
}

.tour-season-inner {
  display: flex;
  align-items: center;
  gap: 3.5rem;
}

.tour-season-copy {
  flex: 0 0 34%;
}

.tour-season-eyebrow {
  color: var(--brand-gold-bright);
}

.tour-season-copy h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 2rem;
  color: #fff;
  margin: 0 0 1rem;
}

.tour-season-copy p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
}

.tour-season-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 0.65rem;
  background: var(--brand-gold);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.tour-season-cta:hover {
  background: var(--brand-gold-bright);
  color: #fff;
  transform: translateY(-2px);
}

.tour-season-cta .icon {
  width: 15px;
  height: 15px;
}

.tour-season-card {
  flex: 1 1 0;
  background: #fff;
  border-radius: 1.5rem;
  padding: 1.75rem;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.25);
}

.tour-season-months {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tour-season-month {
  flex: 1 1 0;
  min-width: 46px;
  padding: 0.6rem 0.4rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(11, 31, 58, 0.1);
  background: #f7f8fa;
  color: var(--brand-navy);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tour-season-month:hover {
  border-color: var(--brand-gold);
}

.tour-season-month.is-active {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: #fff;
}

.tour-season-panel {
  display: none;
}

.tour-season-panel.is-active {
  display: block;
}

.tour-season-panel-title {
  font-size: 0.85rem;
  color: #6b7789;
  margin: 0 0 1rem;
}

.tour-season-panel-title strong {
  color: var(--brand-navy);
}

.tour-season-spots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  /* Establishes the 3D space .tour-season-spot tilts within on hover. */
  perspective: 1200px;
}

.tour-season-spot {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 0.85rem;
  overflow: hidden;
  border: 1px solid rgba(11, 31, 58, 0.08);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.tour-season-spot:hover {
  transform: translateY(-6px) rotateX(8deg) rotateY(-6deg) scale(1.035);
  box-shadow: -10px 22px 34px rgba(11, 31, 58, 0.22);
  color: inherit;
}

.tour-season-spot-photo {
  display: block;
  height: 84px;
}

.tour-season-spot-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.tour-season-spot:hover .tour-season-spot-photo img {
  transform: scale(1.12) translateZ(6px);
}

.tour-season-spot-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 0.65rem;
}

.tour-season-spot-text strong {
  font-size: 0.82rem;
  color: var(--brand-navy);
}

.tour-season-spot-text span {
  font-size: 0.7rem;
  color: #98a2b3;
}

/* ================= Featured tour packages =================
   The site's own navy/gold tokens, matching every other section — not a
   separate brand palette. Packages shown here come from
   dbo.TourPackages.IsFeatured = 1, curated rather than a plain top-N query. */
.featured-tours-section {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 2rem 3.75rem;
  margin: 0.5rem 0 3rem;
  border-radius: 1.75rem;
  background:
    radial-gradient(circle, rgba(11, 31, 58, 0.08) 1.5px, rgba(11, 31, 58, 0) 1.5px) 0 0 / 26px 26px,
    radial-gradient(900px 320px at 15% 0, rgba(169, 121, 26, 0.1), rgba(169, 121, 26, 0) 70%),
    linear-gradient(180deg, var(--brand-navy-soft) 0%, #f4f7fc 100%);
}

.featured-tours-pin {
  position: absolute;
  color: var(--brand-gold);
  opacity: 0.35;
}

.featured-tours-pin .icon {
  width: 22px;
  height: 22px;
}

.featured-tours-pin-1 {
  top: 8%;
  left: 6%;
}

.featured-tours-pin-2 {
  top: 14%;
  right: 22%;
}

.featured-tours-pin-3 {
  bottom: 12%;
  right: 8%;
}

.featured-tours-heading {
  position: relative;
  z-index: 1;
}

.featured-tours-heading h2 {
  margin: 0;
  font-size: 1.7rem;
}

.featured-tours-heading h2 em {
  font-style: normal;
  color: var(--brand-gold);
}

.featured-tours-heading .section-view-all {
  color: var(--brand-navy);
}

.featured-tours-heading .section-view-all:hover {
  color: var(--brand-gold);
}

.featured-tours-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.featured-tour-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(11, 31, 58, 0.07);
  box-shadow: 0 8px 20px rgba(11, 31, 58, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.featured-tour-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 38px rgba(11, 31, 58, 0.16);
  color: inherit;
  text-decoration: none;
}

.featured-tour-card.is-highlighted {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 1px var(--brand-gold), 0 8px 20px rgba(169, 121, 26, 0.2);
}

.featured-tour-photo {
  position: relative;
  display: block;
  height: 170px;
}

.featured-tour-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.featured-tour-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--brand-gold-soft);
  color: var(--brand-gold);
  border: 1px solid rgba(169, 121, 26, 0.3);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 2rem;
  box-shadow: 0 3px 8px rgba(11, 31, 58, 0.14);
}

.featured-tour-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem 1.15rem;
  flex: 1 1 auto;
}

.featured-tour-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.featured-tour-title-row strong {
  font-size: 1.02rem;
  color: var(--brand-navy);
  line-height: 1.3;
}

.featured-tour-duration {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--brand-navy);
  background: #eef1f6;
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  white-space: nowrap;
}

.featured-tour-subtitle {
  font-size: 0.82rem;
  color: #6b7789;
}

.featured-tour-includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.6rem;
  margin: 0.3rem 0;
}

.featured-tour-include {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #4a5568;
  overflow: hidden;
}

.featured-tour-include span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-tour-include .icon {
  width: 13px;
  height: 13px;
  color: var(--brand-gold);
  flex-shrink: 0;
}

.featured-tour-price-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.4rem;
  padding-top: 0.7rem;
  border-top: 1px dashed rgba(11, 31, 58, 0.12);
}

.featured-tour-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.featured-tour-price strong {
  font-size: 1.2rem;
  color: var(--brand-navy);
}

.featured-tour-price strong small {
  font-size: 0.7rem;
  font-weight: 400;
}

.featured-tour-price-original {
  font-size: 0.85rem;
  color: #98a2b3;
  text-decoration: line-through;
}

.featured-tour-price-note {
  font-size: 0.7rem;
  color: #98a2b3;
}

.featured-tour-book-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.7rem;
  padding: 0.65rem;
  border-radius: 0.6rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: #fff;
  background: var(--brand-navy);
  transition: background-color 0.2s ease;
}

.featured-tour-card:hover .featured-tour-book-btn {
  background: var(--brand-navy-dark);
}

/* ================= Why choose us =================
   A cool tinted panel with a faint dot weave, so the trust block reads as its
   own surface instead of six outlined boxes floating on white. */
.why-us-section {
  position: relative;
  padding: 3.25rem 2rem 3.5rem;
  margin: 0.5rem 0 3rem;
  border: 1px solid rgba(11, 31, 58, 0.07);
  border-radius: 1.75rem;
  /* No overflow:hidden — the radius already clips the background, and clipping
     here would cut the cards' hover shadows off at the panel edge. */
  background:
    radial-gradient(rgba(11, 31, 58, 0.055) 1px, rgba(11, 31, 58, 0) 1px) 0 0 / 22px 22px,
    radial-gradient(760px 320px at 50% 0, rgba(90, 140, 200, 0.14), rgba(90, 140, 200, 0) 72%),
    linear-gradient(180deg, #f4f7fc 0%, #eef3f9 100%);
}

.why-us-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 991.98px) {
  .why-us-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.why-us-card {
  position: relative;
  text-align: center;
  padding: 1.85rem 1.35rem;
  background: #fff;
  border: 1px solid rgba(11, 31, 58, 0.06);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 31, 58, 0.04), 0 10px 24px rgba(11, 31, 58, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Gold rule that wipes across the top edge on hover. */
.why-us-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-bright));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.why-us-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 4px rgba(11, 31, 58, 0.05), 0 20px 40px rgba(11, 31, 58, 0.11);
  border-color: rgba(169, 121, 26, 0.35);
}

.why-us-card:hover::before {
  transform: scaleX(1);
}

.why-us-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(145deg, #fdf6e4, #f4e6c2);
  box-shadow: inset 0 0 0 1px rgba(169, 121, 26, 0.22), 0 6px 14px rgba(169, 121, 26, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: var(--brand-gold);
  transition: transform 0.25s ease;
}

.why-us-card:hover .why-us-icon {
  transform: translateY(-2px) scale(1.05);
}

.why-us-icon .icon {
  width: 26px;
  height: 26px;
}

.why-us-card strong {
  display: block;
  font-size: 1rem;
  color: var(--brand-navy);
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.why-us-card p {
  font-size: 0.85rem;
  color: #6b7789;
  margin: 0;
  line-height: 1.55;
}

/* ================= Why choose us (homepage) =================
   Deliberately its own class set, not .why-us-grid/.why-us-card above —
   those are shared by five other pages' "type" sections (Cruise, Tours,
   Sightseeing, Visas, Hotels), so restyling them here would change those
   pages too. One continuous strip instead of six separate boxed cards reads
   as a single, more polished trust bar rather than a grid of tiles, and a
   distinct accent color per icon avoids six identical gold circles in a row. */
.wcu-section {
  padding: 0.5rem 0 3.5rem;
}

.wcu-strip {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(11, 31, 58, 0.07);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgba(11, 31, 58, 0.06);
  overflow: hidden;
}

.wcu-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  padding: 2rem 1.35rem;
  transition: background-color 0.25s ease;
}

.wcu-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  right: 0;
  width: 1px;
  background: rgba(11, 31, 58, 0.08);
}

.wcu-item:hover {
  background: #fafbfd;
}

.wcu-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 18px rgba(11, 31, 58, 0.16);
  transition: transform 0.25s ease;
}

.wcu-item:hover .wcu-icon {
  transform: translateY(-3px) scale(1.06);
}

.wcu-icon .icon {
  width: 22px;
  height: 22px;
}

.wcu-icon-gold {
  background: linear-gradient(145deg, var(--brand-gold-bright), var(--brand-gold));
}

.wcu-icon-blue {
  background: linear-gradient(145deg, #4f8ef0, #2f6fe0);
}

.wcu-icon-purple {
  background: linear-gradient(145deg, #a78bfa, #8b5cf6);
}

.wcu-icon-teal {
  background: linear-gradient(145deg, #2dd4bf, #0d9488);
}

.wcu-icon-green {
  background: linear-gradient(145deg, #3fc98a, #1fa971);
}

.wcu-icon-rose {
  background: linear-gradient(145deg, #fb7185, #e11d48);
}

.wcu-item-text strong {
  display: block;
  font-size: 0.95rem;
  color: var(--brand-navy);
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.wcu-item-text p {
  font-size: 0.78rem;
  color: #6b7789;
  margin: 0;
  line-height: 1.5;
}

/* ================= Why book hotels (Hotels home) =================
   Same single-strip treatment as .wcu-* above (the Flights homepage's "Why
   Choose Us"), mirrored under its own class prefix rather than reused
   directly — not because the layout differs, but so each page's six-feature
   set stays independently editable without the two sections' content
   getting tangled through a shared class. Still not .why-us-grid/.why-us-card,
   which Cruise/Tours/Sightseeing/Visas keep using as separate boxed cards. */
.whb-section {
  padding: 0.5rem 0 3.5rem;
}

.whb-strip {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid rgba(11, 31, 58, 0.07);
  border-radius: 1.25rem;
  box-shadow: 0 10px 30px rgba(11, 31, 58, 0.06);
  overflow: hidden;
}

.whb-item {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  padding: 2rem 1.35rem;
  transition: background-color 0.25s ease;
}

.whb-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  right: 0;
  width: 1px;
  background: rgba(11, 31, 58, 0.08);
}

.whb-item:hover {
  background: #fafbfd;
}

.whb-icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 8px 18px rgba(11, 31, 58, 0.16);
  transition: transform 0.25s ease;
}

.whb-item:hover .whb-icon {
  transform: translateY(-3px) scale(1.06);
}

.whb-icon .icon {
  width: 22px;
  height: 22px;
}

.whb-icon-gold {
  background: linear-gradient(145deg, var(--brand-gold-bright), var(--brand-gold));
}

.whb-icon-blue {
  background: linear-gradient(145deg, #4f8ef0, #2f6fe0);
}

.whb-icon-purple {
  background: linear-gradient(145deg, #a78bfa, #8b5cf6);
}

.whb-icon-teal {
  background: linear-gradient(145deg, #2dd4bf, #0d9488);
}

.whb-icon-green {
  background: linear-gradient(145deg, #3fc98a, #1fa971);
}

.whb-icon-rose {
  background: linear-gradient(145deg, #fb7185, #e11d48);
}

.whb-item-text strong {
  display: block;
  font-size: 0.95rem;
  color: var(--brand-navy);
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.whb-item-text p {
  font-size: 0.78rem;
  color: #6b7789;
  margin: 0;
  line-height: 1.5;
}

/* ================= Customer testimonials =================
   Real, DB-backed reviews (dbo.Testimonials, currently sourced from Google)
   — not marketing copy, so no fabricated names or ratings live here. No
   photos in the current data (ImagePath is null on every row), so every
   card falls back to an initials avatar; a real ImagePath still renders as
   an actual photo if one is ever added. Shared between the Flights and
   Hotels homepages, so the copy stays generic ("travellers who booked with
   {BrandName}") rather than naming either product. */
.testimonials-section {
  padding: 0.5rem 0 3.5rem;
}

.testimonials-carousel {
  position: relative;
}

.testimonials-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(11, 31, 58, 0.1);
  background: #fff;
  color: var(--brand-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(11, 31, 58, 0.16);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.testimonials-nav-prev {
  left: -14px;
}

.testimonials-nav-next {
  right: -14px;
}

.testimonials-nav-btn:hover {
  background: var(--brand-navy);
  color: #fff;
  transform: translateY(-50%) scale(1.06);
}

.testimonials-nav-btn .icon {
  width: 18px;
  height: 18px;
}

.testimonials-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.25rem 0.25rem 0.75rem;
  scrollbar-width: none;
}

.testimonials-track::-webkit-scrollbar {
  display: none;
}

.testimonial-card {
  position: relative;
  flex: 0 0 340px;
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid rgba(11, 31, 58, 0.07);
  border-radius: 1rem;
  padding: 1.5rem 1.5rem 1.35rem;
  box-shadow: 0 8px 20px rgba(11, 31, 58, 0.07);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* A large, faint typographic quote mark rather than an icon — reads as a
   review card at a glance without needing extra markup. */
.testimonial-card::before {
  content: "\201C";
  position: absolute;
  top: 0.4rem;
  right: 1.1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--brand-gold-soft);
  z-index: 0;
}

.testimonial-stars {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.15rem;
}

.testimonial-stars .icon {
  width: 15px;
  height: 15px;
  color: #dde3ec;
  fill: #dde3ec;
}

.testimonial-stars .is-filled .icon {
  color: var(--brand-gold);
  fill: var(--brand-gold);
}

.testimonial-content {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #4a5568;
  flex: 1 1 auto;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.testimonial-person {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(11, 31, 58, 0.07);
}

.testimonial-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.testimonial-avatar-gold {
  background: linear-gradient(145deg, var(--brand-gold-bright), var(--brand-gold));
}

.testimonial-avatar-blue {
  background: linear-gradient(145deg, #4f8ef0, #2f6fe0);
}

.testimonial-avatar-purple {
  background: linear-gradient(145deg, #a78bfa, #8b5cf6);
}

.testimonial-avatar-teal {
  background: linear-gradient(145deg, #2dd4bf, #0d9488);
}

.testimonial-avatar-green {
  background: linear-gradient(145deg, #3fc98a, #1fa971);
}

.testimonial-avatar-rose {
  background: linear-gradient(145deg, #fb7185, #e11d48);
}

.testimonial-person-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.testimonial-person-text strong {
  font-size: 0.88rem;
  color: var(--brand-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.testimonial-person-text small {
  font-size: 0.72rem;
  color: #98a2b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================= App promo (coming soon) =================
   wctapp-1-web.jpg is a single, fully composited banner — headline, service
   icons and its own "Coming Soon" badge are already baked into the image, so
   this is deliberately minimal: just the banner plus the one thing genuinely
   not in it, the store pills. No navy panel behind it either — the image
   already carries its own light background edge to edge, so wrapping it in a
   colored panel would just recreate the hard-rectangle mismatch from the
   previous (separate phone mockup) version of this section. */
.app-promo-section {
  padding: 0.5rem 0 1rem;
  margin: 0.5rem 0 3rem;
  text-align: center;
}

.app-promo-banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.5rem;
  box-shadow: 0 20px 44px rgba(11, 31, 58, 0.16);
  margin-bottom: 1.5rem;
}

.app-promo-stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

.app-store-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 1rem;
  border-radius: 0.65rem;
  background: var(--brand-navy-soft);
  border: 1px solid rgba(11, 31, 58, 0.1);
  color: var(--brand-navy);
  font-size: 0.85rem;
  font-weight: 600;
}

.app-store-pill .icon {
  width: 18px;
  height: 18px;
  color: var(--brand-gold);
}

.app-store-pill small {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  color: #6b7789;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ================= Responsive ================= */
@media (max-width: 1199.98px) {
  .dest-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dest-trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-tours-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hotel-dest-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Six items in one row gets cramped well before the standard 767.98px
   breakpoint, so the trust strip switches to a single-column list (icon and
   text side by side, horizontal dividers) earlier than everything else here. */
@media (max-width: 991.98px) {
  .wcu-strip {
    flex-direction: column;
  }

  .wcu-item {
    flex-direction: row;
    text-align: left;
    padding: 1.1rem 1.35rem;
  }

  .wcu-item:not(:last-child)::after {
    top: auto;
    bottom: 0;
    left: 1.35rem;
    right: 1.35rem;
    width: auto;
    height: 1px;
  }

  .whb-strip {
    flex-direction: column;
  }

  .whb-item {
    flex-direction: row;
    text-align: left;
    padding: 1.1rem 1.35rem;
  }

  .whb-item:not(:last-child)::after {
    top: auto;
    bottom: 0;
    left: 1.35rem;
    right: 1.35rem;
    width: auto;
    height: 1px;
  }

  .tour-theme-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 1rem;
  }

  .tour-season-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }

  .tour-season-copy {
    flex-basis: auto;
    text-align: center;
  }

  .tour-season-cta {
    margin: 0 auto;
  }
}

@media (max-width: 767.98px) {
  .section-heading h2 {
    font-size: 1.6rem;
  }

  .routes-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .route-card {
    flex-basis: 260px;
    height: 300px;
  }

  .tour-pop-card {
    flex-basis: 240px;
  }

  .tour-theme-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem 0.75rem;
  }

  .tour-season-card {
    padding: 1.25rem;
  }

  .tour-season-month {
    min-width: 38px;
    font-size: 0.72rem;
    padding: 0.5rem 0.3rem;
  }

  .tour-season-spots {
    grid-template-columns: repeat(2, 1fr);
  }

  .hotel-dest-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .hotel-dest-toggle {
    align-self: stretch;
  }

  .hotel-dest-toggle-btn {
    flex: 1 1 0;
    justify-content: center;
  }

  .testimonials-nav-prev,
  .testimonials-nav-next {
    display: none;
  }

  .testimonial-card {
    flex-basis: 280px;
  }

  .why-us-grid {
    grid-template-columns: 1fr;
  }

  .why-us-section {
    padding: 2.25rem 1rem 2.5rem;
    border-radius: 1.25rem;
  }

  .featured-tours-section {
    padding: 2.25rem 1rem 2.5rem;
    border-radius: 1.25rem;
  }

  .featured-tours-grid {
    grid-template-columns: 1fr;
  }

  .dest-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 200px;
  }

  .dest-trust-strip {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-card,
  .why-us-card,
  .why-us-card::before,
  .why-us-icon,
  .route-path-plane,
  .dest-card,
  .dest-arrow-btn,
  .hotel-dest-card,
  .tour-pop-card,
  .tour-pop-photo img,
  .tour-theme-item,
  .tour-theme-photo,
  .tour-theme-photo img,
  .tour-season-spot,
  .tour-season-spot-photo img {
    transition: none !important;
  }

  .dest-card-img,
  .hotel-dest-img {
    animation: none !important;
  }

  .dest-card,
  .dest-card.is-visible,
  .hotel-dest-card,
  .hotel-dest-card.is-visible,
  .tour-pop-card,
  .tour-pop-card.is-visible,
  .tour-theme-item,
  .tour-theme-item.is-visible {
    opacity: 1;
    transform: none;
    animation: none !important;
  }
}