/* ==========================================================================
   Hotels in Kodaikanal — page-specific styles
   Built on top of styles.css tokens (colors, spacing, radius, shadow, type).
   All selectors namespaced "ht-" so nothing here touches index.html or
   kodaikanal-homestay.html. Animation patterns follow the 25-pattern
   hotel-booking design plan: glass hero, bento grid, flip cards, tabs,
   sticky-scroll editorial, drag carousel, countdown, magnetic buttons.
   ========================================================================== */

:root {
  --ht-overlay: linear-gradient(180deg, rgba(16, 62, 78, 0.55) 0%, rgba(16, 62, 78, 0.72) 55%, rgba(16, 62, 78, 0.88) 100%);
}

/* ==========================================================================
   Global reveal system — opacity + translateY, staggered by JS.
   Progressive enhancement: [data-reveal] content is fully visible by
   default. Only once html.js (set synchronously in <head>, before this
   stylesheet can even be blamed for a flash) confirms JS is running does
   the hidden-until-scrolled state apply — so a blocked/broken/slow script
   never leaves real content permanently invisible.
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-premium), transform 600ms var(--ease-premium);
  will-change: opacity, transform;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   1. Hero — Split-Search Hero (#1)
   ========================================================================== */
.ht-hero {
  position: relative;
  min-height: 462px;
  display: flex;
  align-items: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  overflow: hidden;
  isolation: isolate;
}

.ht-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ht-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.ht-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ht-overlay);
  z-index: -1;
}

.ht-hero-inner {
  width: 100%;
  display: grid;
  gap: var(--space-6);
}

.ht-hero-copy {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  color: #fff;
}

.ht-hero-copy .eyebrow {
  color: var(--color-highlight);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.85rem;
  margin: 0 0 var(--space-5);
}

.ht-hero-copy h1 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  color: #fff;
}

.ht-hero-copy .ht-hero-subhead {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-5);
  max-width: 54ch;
  margin-inline: auto;
}

/* Search card sits in normal flow below the hero photo and lead copy,
   not overlapping the image — var(--color-primary-dark) matches the stat
   strip's own background so the band reads as a continuation of it. */
.hero-search-wrap {
  margin-top: var(--space-3);
}

@media (max-width: 640px) {
  .ht-hero {
    align-items: stretch;
  }
}

/* ==========================================================================
   2. Trust / Stat strip (#2) + Marquee (#13)
   ========================================================================== */
.ht-stat-strip {
  padding-block: var(--space-6);
  background: var(--color-primary-dark);
  color: #fff;
}

.ht-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.ht-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  color: var(--color-highlight);
}

.ht-stat-label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .ht-stat-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-5);
  }
}

.ht-marquee {
  margin-top: var(--space-5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ht-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-6);
  animation: ht-marquee 28s linear infinite;
}

.ht-marquee:hover .ht-marquee-track {
  animation-play-state: paused;
}

.ht-marquee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.ht-marquee-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-highlight);
  flex-shrink: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .ht-marquee-track { animation: none; }
}

/* ==========================================================================
   3. Why Choose a Hotel — photo-backed bento tiles (#14)
   ========================================================================== */
.ht-benefit-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--space-4);
  height: 460px;
}

.ht-benefit-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.ht-benefit-tile.is-large {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.ht-benefit-tile:not(.is-large):nth-of-type(2) { grid-column: 2; grid-row: 1; }
.ht-benefit-tile:not(.is-large):nth-of-type(3) { grid-column: 2; grid-row: 2; }
.ht-benefit-tile:not(.is-large):nth-of-type(4) { grid-column: 2; grid-row: 3; }

.ht-benefit-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ht-benefit-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.92) 0%, rgba(16, 62, 78, 0.55) 55%, rgba(16, 62, 78, 0.15) 100%);
}

.ht-benefit-tile-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  color: #fff;
}

.ht-benefit-tile.is-large .ht-benefit-tile-body {
  padding: var(--space-5);
}

.ht-benefit-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ht-benefit-icon svg {
  width: 20px;
  height: 20px;
}

.ht-benefit-tile.is-large .ht-benefit-icon {
  width: 48px;
  height: 48px;
}

.ht-benefit-tile.is-large .ht-benefit-icon svg {
  width: 24px;
  height: 24px;
}

.ht-benefit-tile-body h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: #fff;
}

.ht-benefit-tile.is-large .ht-benefit-tile-body h3 {
  font-size: 1.3rem;
}

.ht-benefit-tile-body p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.45;
}

.ht-benefit-tile.is-large .ht-benefit-tile-body p {
  font-size: 0.95rem;
  max-width: 42ch;
}

@media (max-width: 900px) {
  .ht-benefit-bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .ht-benefit-tile.is-large {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
  /* Same specificity as the desktop placement rules above, so source
     order (this comes later) decides the winner without needing !important */
  .ht-benefit-tile:not(.is-large):nth-of-type(2),
  .ht-benefit-tile:not(.is-large):nth-of-type(3),
  .ht-benefit-tile:not(.is-large):nth-of-type(4) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 7;
  }
}

/* ==========================================================================
   4. Featured Hotels — static 3-tier grid (Standard/Premium/Luxury) +
   Expandable card (#4) + room-type toggle (#17)
   ========================================================================== */
.ht-hotels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .ht-hotels-grid {
    grid-template-columns: 1fr;
  }
}

.ht-hotel-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 320ms var(--ease-premium), box-shadow 320ms var(--ease-premium);
}

.ht-hotel-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.ht-hotel-price {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  font-size: clamp(0.78rem, 2.4vw, 1rem);
}

.ht-hotel-price strong {
  font-size: clamp(0.95rem, 3vw, 1.2rem);
}

.ht-hotel-price span {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.ht-hotel-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.ht-hotel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.1) contrast(1.05);
  transition: transform 600ms var(--ease-premium);
}

.ht-hotel-card:hover .ht-hotel-media img {
  transform: scale(1.07);
}

.ht-hotel-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 62, 78, 0) 55%, rgba(16, 62, 78, 0.55) 100%);
  pointer-events: none;
}

.ht-hotel-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px) saturate(1.4);
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 12px rgba(16, 62, 78, 0.18);
}

.ht-hotel-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.ht-hotel-body h3 {
  margin: 0;
  font-size: 1.15rem;
}

.ht-hotel-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.ht-hotel-teaser {
  font-size: 0.92rem;
  color: var(--color-text);
  margin: 0;
}

/* Expandable accordion (native <details>) */
.ht-hotel-details {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.ht-hotel-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.ht-hotel-details summary::-webkit-details-marker {
  display: none;
}

.ht-hotel-details summary .ht-chevron {
  width: 18px;
  height: 18px;
  transition: transform 250ms var(--ease-premium);
}

.ht-hotel-details[open] summary .ht-chevron {
  transform: rotate(180deg);
}

.ht-hotel-details-panel {
  overflow: hidden;
  height: 0;
  transition: height 300ms var(--ease-premium);
}

.ht-hotel-details-panel p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  margin: 0;
}

.ht-hotel-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
}

.ht-hotel-cta .ht-hotel-reserve {
  width: 100%;
  min-height: 44px;
  font-size: 0.9rem;
}

.ht-hotel-call-link {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ht-hotel-call-link:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   5. How Booking Works — Zig-zag step timeline (#6)
   ========================================================================== */
.ht-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}

.ht-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  z-index: 0;
}

.ht-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.ht-step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  transform: scale(0);
  transition: transform 400ms var(--ease-premium);
}

.ht-step.is-visible .ht-step-icon {
  transform: scale(1);
}

.ht-step h3 {
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.ht-step p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .ht-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .ht-steps::before {
    top: 0;
    bottom: 0;
    left: 27px;
    width: 2px;
    height: auto;
    right: auto;
    background: repeating-linear-gradient(180deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  }
  /* 3 children (icon, h3, p) auto-placed into a 2-column grid wrap the 3rd
     item — the paragraph — onto row 2 of the 56px icon column instead of
     row 2 of the text column, squashing it to a 56px-wide sliver. Explicit
     placement keeps the icon spanning both rows in column 1 and both text
     children in column 2. */
  .ht-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-3);
    text-align: left;
    align-items: start;
  }
  .ht-step-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }
  .ht-step h3 {
    grid-column: 2;
    grid-row: 1;
  }
  .ht-step p {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ==========================================================================
   6. Why Choose Us — Flip cards (#7)
   ========================================================================== */
.ht-flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .ht-flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ht-flip-grid { grid-template-columns: 1fr; }
}

.ht-flip-card {
  perspective: 1200px;
  height: 190px;
}

.ht-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 500ms var(--ease-premium);
  transform-style: preserve-3d;
}

.ht-flip-card:hover .ht-flip-inner,
.ht-flip-card.is-flipped .ht-flip-inner {
  transform: rotateY(180deg);
}

.ht-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
}

.ht-flip-front {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

.ht-flip-front svg { width: 34px; height: 34px; }

.ht-flip-front span {
  font-weight: 700;
  font-size: 0.98rem;
}

.ht-flip-back {
  background: var(--color-primary);
  color: #fff;
  transform: rotateY(180deg);
  font-size: 0.85rem;
  line-height: 1.45;
}

.ht-flip-back p {
  color: #fff;
}

/* ==========================================================================
   7. Experiences & Activities — Tabs (#8) + hover-reveal (#5)
   ========================================================================== */
.ht-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.ht-tab-btn {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
}

.ht-tab-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.ht-tab-panels {
  position: relative;
  min-height: 420px;
}

.ht-tab-panel {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.ht-tab-panel.is-active {
  display: grid;
  animation: ht-tab-in 320ms var(--ease-premium);
}

@keyframes ht-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .ht-tab-panel { grid-template-columns: 1fr; }
  .ht-tab-panels { min-height: 0; }
}

.ht-exp-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-sm);
}

.ht-exp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ht-exp-panel {
  position: absolute;
  inset-inline: 0;
  bottom: -100%;
  padding: var(--space-4);
  background: rgba(16, 62, 78, 0.88);
  color: #fff;
  transition: bottom 300ms ease;
}

.ht-exp-card:hover .ht-exp-panel,
.ht-exp-card.is-active .ht-exp-panel {
  bottom: 0;
}

.ht-exp-panel h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: #fff;
}

.ht-exp-panel p {
  font-size: 0.85rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.ht-exp-name-strip {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.85), transparent);
}

.ht-exp-card:hover .ht-exp-name-strip,
.ht-exp-card.is-active .ht-exp-name-strip {
  opacity: 0;
}

.ht-exp-name-strip h3 {
  color: #fff;
  font-size: 0.98rem;
  margin: 0;
}

/* ==========================================================================
   Tour Packages — card grid
   ========================================================================== */
.ht-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .ht-package-grid { grid-template-columns: 1fr; }
}

.ht-package-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.ht-package-card.is-popular {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.ht-package-media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.ht-package-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ht-package-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.ht-package-badge.is-popular {
  background: var(--color-primary);
  color: #fff;
}

.ht-package-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.ht-package-body h3 {
  margin: 0;
  font-size: 1.1rem;
}

.ht-package-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.ht-package-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.ht-package-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-light);
}

.ht-package-body > p {
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0;
}

.ht-package-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   8. Deals & Offers — Countdown banner (#9)
   ========================================================================== */
.ht-deal-banner {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
  background-size: 200% 200%;
  animation: ht-deal-shift 8s ease infinite;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@keyframes ht-deal-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .ht-deal-banner { animation: none; }
}

.ht-deal-copy h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.3rem;
}

.ht-deal-copy p {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
}

.ht-countdown {
  display: flex;
  gap: 10px;
}

.ht-countdown-unit {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  min-width: 62px;
}

.ht-countdown-unit strong {
  display: block;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.ht-countdown-unit span {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.ht-deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .ht-deal-grid { grid-template-columns: 1fr; }
}

.ht-deal-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.ht-deal-card h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--color-primary);
}

.ht-deal-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   9. Guest Reviews — Drag carousel (#10) + count-up (#24)
   ========================================================================== */
.ht-reviews-wrap {
  position: relative;
}

.ht-reviews-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.ht-reviews-track::-webkit-scrollbar { display: none; }
.ht-reviews-track.is-dragging { cursor: grabbing; }

.ht-review-card {
  flex: 0 0 min(360px, 85vw);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.ht-review-card .quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-steel-dark);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.ht-review-card blockquote {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
}

.ht-review-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ht-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.ht-review-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}

.ht-review-place {
  color: var(--color-text-muted);
  font-weight: 400;
}

.ht-review-stars {
  color: var(--color-star);
  font-size: 0.85rem;
}

.ht-review-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-4);
}

.ht-review-dots button {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  border: none;
  padding: 0;
  transition: width 250ms var(--ease-premium), background 250ms ease;
  cursor: pointer;
}

.ht-review-dots button.is-active {
  width: 24px;
  background: var(--color-primary);
}

/* ==========================================================================
   10. Travel Guides — Sticky scroll editorial (#11)
   ========================================================================== */
.ht-guides {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .ht-guides {
    grid-template-columns: 1fr 1fr;
  }
}

.ht-guides-sticky {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
  .ht-guides-sticky {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
  }
}

.ht-guides-sticky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ht-guide-item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  opacity: 0.4;
  transition: opacity 400ms ease;
}

.ht-guide-item:first-child { padding-top: 0; }
.ht-guide-item:last-child { border-bottom: none; }

.ht-guide-item.is-active {
  opacity: 1;
}

.ht-guide-item h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--space-2);
}

.ht-guide-item p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.ht-guide-item a {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   11. WhatsApp Booking Promo — Card stack (#21) + magnetic CTA (#23)
   ========================================================================== */
.ht-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .ht-promo {
    grid-template-columns: 1fr 380px;
  }
}

.ht-promo-copy h2 { margin-top: 0; }

.ht-promo-list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.ht-promo-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--color-text);
}

.ht-promo-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.ht-stack {
  position: relative;
  height: 320px;
}

.ht-stack-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 220px;
  height: 300px;
  background: #fff;
  border-radius: 22px;
  border: 6px solid var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  transition: transform 500ms var(--ease-premium);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ht-stack-card:nth-child(1) { transform: rotate(-8deg) translateX(-26px); z-index: 1; }
.ht-stack-card:nth-child(2) { transform: rotate(0deg) translateX(0); z-index: 2; }
.ht-stack-card:nth-child(3) { transform: rotate(8deg) translateX(26px); z-index: 1; }

.ht-stack.is-fanned .ht-stack-card:nth-child(1) { transform: rotate(-12deg) translateX(-44px) translateY(-6px); }
.ht-stack.is-fanned .ht-stack-card:nth-child(3) { transform: rotate(12deg) translateX(44px) translateY(-6px); }

.ht-chat-bubble {
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 0.68rem;
  line-height: 1.35;
  max-width: 88%;
}

.ht-chat-bubble.in {
  align-self: flex-start;
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-bottom-left-radius: 2px;
}

.ht-chat-bubble.out {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}

/* Magnetic button wrapper — JS applies inline transform */
.ht-magnetic {
  display: inline-flex;
  transition: transform 150ms ease-out;
}

/* ==========================================================================
   12. FAQ — reuses styles.css's .faq-list/.faq-item (same as the homepage);
   only the heading centering is added here, scoped to this page.
   ========================================================================== */
#faq .section-heading {
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   13. Final CTA
   ========================================================================== */
.ht-final-cta {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  text-align: center;
}

.ht-final-cta h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: 0 0 var(--space-3);
}

.ht-final-cta p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
}

.ht-final-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Sticky mobile CTA bar (#19) — page-specific, mirrors main.js pattern
   ========================================================================== */
.ht-mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 10px var(--space-3);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 300ms var(--ease-premium);
}

.ht-mobile-cta-bar.is-visible {
  transform: translateY(0);
}

.ht-mobile-cta-bar .btn {
  flex: 1;
  min-height: 46px;
}

@media (min-width: 900px) {
  .ht-mobile-cta-bar { display: none; }
}

/* ==========================================================================
   Progress-linked section dots (#16, desktop only)
   ========================================================================== */
.ht-section-dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 80;
}

@media (min-width: 1200px) {
  .ht-section-dots { display: flex; }
}

.ht-section-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}

.ht-section-dots button.is-active {
  background: var(--color-primary);
  transform: scale(1.4);
}

/* ==========================================================================
   Shared section-scroll offset (accounts for sticky header)
   ========================================================================== */
main section[id] {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* ==========================================================================
   Merged from css/resorts.css — shared stylesheet consolidation
   ========================================================================== */
/* ==========================================================================
   Resorts in Kodaikanal — page-specific styles
   Built on top of styles.css tokens (colors, spacing, radius, shadow, type).
   All selectors namespaced "rs-" so nothing here touches index.html or any
   other service page. Same 25-pattern design system as hotels.css: glass
   hero, bento grid, flip cards, tabs, sticky-scroll editorial, drag
   carousel, countdown, magnetic buttons — content and copy are unique to
   resorts, only the interaction patterns are shared.
   ========================================================================== */

:root {
  --rs-overlay: linear-gradient(180deg, rgba(16, 62, 78, 0.55) 0%, rgba(16, 62, 78, 0.72) 55%, rgba(16, 62, 78, 0.88) 100%);
}

/* ==========================================================================
   Global reveal system — opacity + translateY, staggered by JS.
   Progressive enhancement: [data-reveal] content is fully visible by
   default. Only once html.js (set synchronously in <head>, before this
   stylesheet can even be blamed for a flash) confirms JS is running does
   the hidden-until-scrolled state apply — so a blocked/broken/slow script
   never leaves real content permanently invisible.
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-premium), transform 600ms var(--ease-premium);
  will-change: opacity, transform;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   1. Hero — Split-Search Hero (#1)
   ========================================================================== */
.rs-hero {
  position: relative;
  min-height: 462px;
  display: flex;
  align-items: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  overflow: hidden;
  isolation: isolate;
}

.rs-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.rs-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.rs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rs-overlay);
  z-index: -1;
}

.rs-hero-inner {
  width: 100%;
  display: grid;
  gap: var(--space-6);
}

.rs-hero-copy {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
  color: #fff;
}

.rs-hero-copy .eyebrow {
  color: var(--color-highlight);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.85rem;
  margin: 0 0 var(--space-5);
}

.rs-hero-copy h1 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  color: #fff;
  text-wrap: balance;
}

.rs-hero-copy .rs-hero-subhead {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-5);
  max-width: 54ch;
  margin-inline: auto;
}

/* Pull the search card up over the hero photo's bottom edge instead of
   leaving a plain white gap between the photo and the card — overrides
   styles.css's smaller positive top margin, scoped to this page only
   since index.html never loads this stylesheet. The card itself is only
   ~326px wide and centered, so on narrow viewports its negative margins
   leave a band on the left/right edges taller than the card can cover;
   without a matching fill there, raw white page background shows through
   between the photo and the stat strip below. var(--color-primary-dark)
   matches .rs-stat-strip's own background, so that flanking band reads as
   a continuation of the strip instead of a gap. */
.hero-search-wrap {
  margin-top: var(--space-3);
}

@media (max-width: 640px) {
  .rs-hero {
    align-items: stretch;
  }
}

/* ==========================================================================
   2. Trust / Stat strip (#2) + Marquee (#13)
   ========================================================================== */
.rs-stat-strip {
  padding-block: var(--space-6);
  background: var(--color-primary-dark);
  color: #fff;
}

.rs-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.rs-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  color: var(--color-highlight);
}

.rs-stat-label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .rs-stat-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-5);
  }
}

.rs-marquee {
  margin-top: var(--space-5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.rs-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-6);
  animation: rs-marquee 28s linear infinite;
}

.rs-marquee:hover .rs-marquee-track {
  animation-play-state: paused;
}

.rs-marquee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.rs-marquee-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-highlight);
  flex-shrink: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .rs-marquee-track { animation: none; }
}

/* ==========================================================================
   3. Why Choose a Hotel — photo-backed bento tiles (#14)
   ========================================================================== */
.rs-benefit-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(3, minmax(130px, auto));
  gap: var(--space-3);
  min-height: 400px;
}

/* Small tiles: icon sits beside the text so the tile stays short enough to
   fit the viewport without clipping */
.rs-benefit-tile:not(.is-large) .rs-benefit-tile-body {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  align-content: end;
  align-items: start;
  padding: var(--space-3) var(--space-4);
}

.rs-benefit-tile:not(.is-large) .rs-benefit-icon {
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  margin: 0;
}

.rs-benefit-tile:not(.is-large) .rs-benefit-tile-body h3,
.rs-benefit-tile:not(.is-large) .rs-benefit-tile-body p {
  grid-column: 2;
}

.rs-benefit-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.rs-benefit-tile.is-large {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.rs-benefit-tile:not(.is-large):nth-of-type(2) { grid-column: 2; grid-row: 1; }
.rs-benefit-tile:not(.is-large):nth-of-type(3) { grid-column: 2; grid-row: 2; }
.rs-benefit-tile:not(.is-large):nth-of-type(4) { grid-column: 2; grid-row: 3; }

.rs-benefit-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rs-benefit-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.94) 0%, rgba(16, 62, 78, 0.78) 60%, rgba(16, 62, 78, 0.35) 100%);
}

.rs-benefit-tile-body {
  position: relative;
  flex: 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  color: #fff;
}

.rs-benefit-tile.is-large .rs-benefit-tile-body {
  padding: var(--space-5);
}

.rs-benefit-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rs-benefit-icon svg {
  width: 20px;
  height: 20px;
}

.rs-benefit-tile.is-large .rs-benefit-icon {
  width: 48px;
  height: 48px;
}

.rs-benefit-tile.is-large .rs-benefit-icon svg {
  width: 24px;
  height: 24px;
}

.rs-benefit-tile-body h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: #fff;
}

.rs-benefit-tile.is-large .rs-benefit-tile-body h3 {
  font-size: 1.3rem;
}

.rs-benefit-tile-body p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.45;
}

.rs-benefit-tile.is-large .rs-benefit-tile-body p {
  font-size: 0.95rem;
  max-width: 42ch;
}

@media (max-width: 900px) {
  .rs-benefit-bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
  }
  .rs-benefit-tile.is-large {
    grid-column: 1;
    grid-row: auto;
    min-height: 320px;
  }
  /* Same specificity as the desktop placement rules above, so source
     order (this comes later) decides the winner without needing !important */
  .rs-benefit-tile:not(.is-large):nth-of-type(2),
  .rs-benefit-tile:not(.is-large):nth-of-type(3),
  .rs-benefit-tile:not(.is-large):nth-of-type(4) {
    grid-column: 1;
    grid-row: auto;
    min-height: 200px;
  }
}

/* ==========================================================================
   4. Featured Hotels — static 3-tier grid (Standard/Premium/Luxury) +
   Expandable card (#4) + room-type toggle (#17)
   ========================================================================== */
.rs-hotels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .rs-hotels-grid {
    grid-template-columns: 1fr;
  }
}

.rs-hotel-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.rs-hotel-price {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
}

.rs-hotel-price strong {
  font-size: 1.2rem;
}

.rs-hotel-price span {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.rs-hotel-media {
  position: relative;
  aspect-ratio: 4 / 3;
}

.rs-hotel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rs-hotel-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-highlight);
  color: var(--color-highlight-text);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.rs-hotel-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.rs-hotel-body h3 {
  margin: 0;
  font-size: 1.15rem;
}

.rs-hotel-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.rs-hotel-teaser {
  font-size: 0.92rem;
  color: var(--color-text);
  margin: 0;
}

/* Expandable accordion (native <details>) */
.rs-hotel-details {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.rs-hotel-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.rs-hotel-details summary::-webkit-details-marker {
  display: none;
}

.rs-hotel-details summary .rs-chevron {
  width: 18px;
  height: 18px;
  transition: transform 250ms var(--ease-premium);
}

.rs-hotel-details[open] summary .rs-chevron {
  transform: rotate(180deg);
}

.rs-hotel-details-panel {
  overflow: hidden;
  height: 0;
  transition: height 300ms var(--ease-premium);
}

.rs-hotel-details-panel p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  margin: 0;
}

.rs-hotel-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
}

.rs-hotel-cta .rs-hotel-reserve {
  width: 100%;
  min-height: 44px;
  font-size: 0.9rem;
}

.rs-hotel-call-link {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rs-hotel-call-link:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   5. How Booking Works — Zig-zag step timeline (#6)
   ========================================================================== */
.rs-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}

.rs-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  z-index: 0;
}

.rs-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.rs-step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  transform: scale(0);
  transition: transform 400ms var(--ease-premium);
}

.rs-step.is-visible .rs-step-icon {
  transform: scale(1);
}

.rs-step h3 {
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.rs-step p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .rs-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .rs-steps::before {
    top: 0;
    bottom: 0;
    left: 27px;
    width: 2px;
    height: auto;
    right: auto;
    background: repeating-linear-gradient(180deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  }
  /* 3 children (icon, h3, p) auto-placed into a 2-column grid wrap the 3rd
     item — the paragraph — onto row 2 of the 56px icon column instead of
     row 2 of the text column, squashing it to a 56px-wide sliver. Explicit
     placement keeps the icon spanning both rows in column 1 and both text
     children in column 2. */
  .rs-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-3);
    text-align: left;
    align-items: start;
  }
  .rs-step-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }
  .rs-step h3 {
    grid-column: 2;
    grid-row: 1;
  }
  .rs-step p {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ==========================================================================
   6. Why Choose Us — Flip cards (#7)
   ========================================================================== */
.rs-flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .rs-flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .rs-flip-grid { grid-template-columns: 1fr; }
}

.rs-flip-card {
  perspective: 1200px;
  height: 190px;
}

.rs-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 500ms var(--ease-premium);
  transform-style: preserve-3d;
}

.rs-flip-card:hover .rs-flip-inner,
.rs-flip-card.is-flipped .rs-flip-inner {
  transform: rotateY(180deg);
}

.rs-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
}

.rs-flip-front {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

.rs-flip-front svg { width: 34px; height: 34px; }

.rs-flip-front span {
  font-weight: 700;
  font-size: 0.98rem;
}

.rs-flip-back {
  background: var(--color-primary);
  color: #fff;
  transform: rotateY(180deg);
  font-size: 0.85rem;
  line-height: 1.45;
}

.rs-flip-back p {
  color: #fff;
}

/* ==========================================================================
   7. Experiences & Activities — Tabs (#8) + hover-reveal (#5)
   ========================================================================== */
.rs-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.rs-tab-btn {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
}

.rs-tab-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.rs-tab-panels {
  position: relative;
  min-height: 420px;
}

.rs-tab-panel {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.rs-tab-panel.is-active {
  display: grid;
  animation: rs-tab-in 320ms var(--ease-premium);
}

@keyframes rs-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .rs-tab-panel { grid-template-columns: 1fr; }
  .rs-tab-panels { min-height: 0; }
}

.rs-exp-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-sm);
}

.rs-exp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rs-exp-panel {
  position: absolute;
  inset-inline: 0;
  bottom: -100%;
  padding: var(--space-4);
  background: rgba(16, 62, 78, 0.88);
  color: #fff;
  transition: bottom 300ms ease;
}

.rs-exp-card:hover .rs-exp-panel,
.rs-exp-card.is-active .rs-exp-panel {
  bottom: 0;
}

.rs-exp-panel h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: #fff;
}

.rs-exp-panel p {
  font-size: 0.85rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.rs-exp-name-strip {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.85), transparent);
}

.rs-exp-card:hover .rs-exp-name-strip,
.rs-exp-card.is-active .rs-exp-name-strip {
  opacity: 0;
}

.rs-exp-name-strip h3 {
  color: #fff;
  font-size: 0.98rem;
  margin: 0;
}

/* ==========================================================================
   Tour Packages — card grid
   ========================================================================== */
.rs-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .rs-package-grid { grid-template-columns: 1fr; }
}

.rs-package-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.rs-package-card.is-popular {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.rs-package-media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.rs-package-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rs-package-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.rs-package-badge.is-popular {
  background: var(--color-primary);
  color: #fff;
}

.rs-package-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.rs-package-body h3 {
  margin: 0;
  font-size: 1.1rem;
}

.rs-package-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.rs-package-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.rs-package-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-light);
}

.rs-package-body > p {
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0;
}

.rs-package-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   8. Deals & Offers — Countdown banner (#9)
   ========================================================================== */
.rs-deal-banner {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
  background-size: 200% 200%;
  animation: rs-deal-shift 8s ease infinite;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@keyframes rs-deal-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-deal-banner { animation: none; }
}

.rs-deal-copy h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.3rem;
}

.rs-deal-copy p {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
}

.rs-countdown {
  display: flex;
  gap: 10px;
}

.rs-countdown-unit {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  min-width: 62px;
}

.rs-countdown-unit strong {
  display: block;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.rs-countdown-unit span {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.rs-deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .rs-deal-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .rs-deal-grid { grid-template-columns: 1fr; }
}

.rs-deal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: transform 220ms var(--ease-premium), box-shadow 220ms var(--ease-premium), border-color 220ms var(--ease-premium);
}

.rs-deal-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.rs-deal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: var(--space-3);
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

.rs-deal-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.rs-deal-card h3,
.rs-deal-card h4 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.rs-deal-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ==========================================================================
   9. Guest Reviews — Drag carousel (#10) + count-up (#24)
   ========================================================================== */
.rs-reviews-wrap {
  position: relative;
}

.rs-reviews-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.rs-reviews-track::-webkit-scrollbar { display: none; }
.rs-reviews-track.is-dragging { cursor: grabbing; }

.rs-review-card {
  flex: 0 0 min(360px, 85vw);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.rs-review-card .quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-steel-dark);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.rs-review-card blockquote {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
}

.rs-review-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rs-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.rs-review-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}

.rs-review-place {
  color: var(--color-text-muted);
  font-weight: 400;
}

.rs-review-stars {
  color: var(--color-star);
  font-size: 0.85rem;
}

.rs-review-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-4);
}

.rs-review-dots button {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  border: none;
  padding: 0;
  transition: width 250ms var(--ease-premium), background 250ms ease;
  cursor: pointer;
}

.rs-review-dots button.is-active {
  width: 24px;
  background: var(--color-primary);
}

/* ==========================================================================
   10. Travel Guides — Sticky scroll editorial (#11)
   ========================================================================== */
.rs-guides {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .rs-guides {
    grid-template-columns: 1fr 1fr;
  }
}

.rs-guides-sticky {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

@media (min-width: 900px) {
  .rs-guides-sticky {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
  }
}

.rs-guides-sticky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rs-guide-item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  opacity: 0.4;
  transition: opacity 400ms ease;
}

.rs-guide-item:first-child { padding-top: 0; }
.rs-guide-item:last-child { border-bottom: none; }

.rs-guide-item.is-active {
  opacity: 1;
}

.rs-guide-item h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--space-2);
}

.rs-guide-item p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.rs-guide-item a {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   11. WhatsApp Booking Promo — Card stack (#21) + magnetic CTA (#23)
   ========================================================================== */
.rs-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .rs-promo {
    grid-template-columns: 1fr 380px;
  }
}

.rs-promo-copy h2 { margin-top: 0; }

.rs-promo-list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.rs-promo-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--color-text);
}

.rs-promo-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.rs-stack {
  position: relative;
  height: 320px;
}

.rs-stack-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 220px;
  height: 300px;
  background: #fff;
  border-radius: 22px;
  border: 6px solid var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  transition: transform 500ms var(--ease-premium);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rs-stack-card:nth-child(1) { transform: rotate(-8deg) translateX(-26px); z-index: 1; }
.rs-stack-card:nth-child(2) { transform: rotate(0deg) translateX(0); z-index: 2; }
.rs-stack-card:nth-child(3) { transform: rotate(8deg) translateX(26px); z-index: 1; }

.rs-stack.is-fanned .rs-stack-card:nth-child(1) { transform: rotate(-12deg) translateX(-44px) translateY(-6px); }
.rs-stack.is-fanned .rs-stack-card:nth-child(3) { transform: rotate(12deg) translateX(44px) translateY(-6px); }

.rs-chat-bubble {
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 0.68rem;
  line-height: 1.35;
  max-width: 88%;
}

.rs-chat-bubble.in {
  align-self: flex-start;
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-bottom-left-radius: 2px;
}

.rs-chat-bubble.out {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}

/* Magnetic button wrapper — JS applies inline transform */
.rs-magnetic {
  display: inline-flex;
  transition: transform 150ms ease-out;
}

/* ==========================================================================
   12. FAQ — reuses styles.css's .faq-list/.faq-item (same as the homepage);
   only the heading centering is added here, scoped to this page.
   ========================================================================== */
#faq .section-heading {
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   13. Final CTA
   ========================================================================== */
.rs-final-cta {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  text-align: center;
}

.rs-final-cta h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: 0 0 var(--space-3);
}

.rs-final-cta p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
}

.rs-final-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Sticky mobile CTA bar (#19) — page-specific, mirrors main.js pattern
   ========================================================================== */
.rs-mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 10px var(--space-3);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 300ms var(--ease-premium);
}

.rs-mobile-cta-bar.is-visible {
  transform: translateY(0);
}

.rs-mobile-cta-bar .btn {
  flex: 1;
  min-height: 46px;
}

@media (min-width: 900px) {
  .rs-mobile-cta-bar { display: none; }
}

/* ==========================================================================
   Progress-linked section dots (#16, desktop only)
   ========================================================================== */
.rs-section-dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 80;
}

@media (min-width: 1200px) {
  .rs-section-dots { display: flex; }
}

.rs-section-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}

.rs-section-dots button.is-active {
  background: var(--color-primary);
  transform: scale(1.4);
}

/* ==========================================================================
   Shared section-scroll offset (accounts for sticky header)
   ========================================================================== */
main section[id] {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* ==========================================================================
   Merged from css/dormitory.css — shared stylesheet consolidation
   ========================================================================== */
/* ==========================================================================
   Dormitory Stays in Kodaikanal — page-specific styles
   Built on top of styles.css tokens (colors, spacing, radius, shadow, type).
   All selectors namespaced "dm-" so nothing here touches index.html or
   any other service page. Same 25-pattern design system as hotels.css —
   content and copy below are unique to this property type.
   ========================================================================== */

:root {
  --dm-overlay: linear-gradient(180deg, rgba(16, 62, 78, 0.55) 0%, rgba(16, 62, 78, 0.72) 55%, rgba(16, 62, 78, 0.88) 100%);
}

/* ==========================================================================
   Global reveal system — opacity + translateY, staggered by JS.
   Progressive enhancement: [data-reveal] content is fully visible by
   default. Only once html.js (set synchronously in <head>, before this
   stylesheet can even be blamed for a flash) confirms JS is running does
   the hidden-until-scrolled state apply — so a blocked/broken/slow script
   never leaves real content permanently invisible.
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-premium), transform 600ms var(--ease-premium);
  will-change: opacity, transform;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   1. Hero — Split-Search Hero (#1)
   ========================================================================== */
.dm-hero {
  position: relative;
  min-height: 462px;
  display: flex;
  align-items: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  overflow: hidden;
  isolation: isolate;
}

.dm-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.dm-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.dm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dm-overlay);
  z-index: -1;
}

.dm-hero-inner {
  width: 100%;
  display: grid;
  gap: var(--space-6);
}

.dm-hero-copy {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  color: #fff;
}

.dm-hero-copy .eyebrow {
  color: var(--color-highlight);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.85rem;
  margin: 0 0 var(--space-5);
}

.dm-hero-copy h1 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  color: #fff;
}

.dm-hero-copy .dm-hero-subhead {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-5);
  max-width: 54ch;
  margin-inline: auto;
}

/* Pull the search card up over the hero photo's bottom edge instead of
   leaving a plain white gap between the photo and the card — overrides
   styles.css's smaller positive top margin, scoped to this page only
   since index.html never loads this stylesheet. The card itself is only
   ~326px wide and centered, so on narrow viewports its negative margins
   leave a band on the left/right edges taller than the card can cover;
   without a matching fill there, raw white page background shows through
   between the photo and the stat strip below. var(--color-primary-dark)
   matches .dm-stat-strip's own background, so that flanking band reads as
   a continuation of the strip instead of a gap. */
.hero-search-wrap {
  margin-top: var(--space-3);
}

@media (max-width: 640px) {
  .dm-hero {
    align-items: stretch;
  }
}

/* ==========================================================================
   2. Trust / Stat strip (#2) + Marquee (#13)
   ========================================================================== */
.dm-stat-strip {
  padding-block: var(--space-6);
  background: var(--color-primary-dark);
  color: #fff;
}

.dm-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.dm-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  color: var(--color-highlight);
}

.dm-stat-label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .dm-stat-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-5);
  }
}

.dm-marquee {
  margin-top: var(--space-5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.dm-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-6);
  animation: dm-marquee 28s linear infinite;
}

.dm-marquee:hover .dm-marquee-track {
  animation-play-state: paused;
}

.dm-marquee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.dm-marquee-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-highlight);
  flex-shrink: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .dm-marquee-track { animation: none; }
}

/* ==========================================================================
   3. Why Choose a Hotel — photo-backed bento tiles (#14)
   ========================================================================== */
.dm-benefit-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--space-4);
  height: 460px;
}

.dm-benefit-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.dm-benefit-tile.is-large {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.dm-benefit-tile:not(.is-large):nth-of-type(2) { grid-column: 2; grid-row: 1; }
.dm-benefit-tile:not(.is-large):nth-of-type(3) { grid-column: 2; grid-row: 2; }
.dm-benefit-tile:not(.is-large):nth-of-type(4) { grid-column: 2; grid-row: 3; }

.dm-benefit-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-benefit-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.92) 0%, rgba(16, 62, 78, 0.55) 55%, rgba(16, 62, 78, 0.15) 100%);
}

.dm-benefit-tile-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  color: #fff;
}

.dm-benefit-tile.is-large .dm-benefit-tile-body {
  padding: var(--space-5);
}

.dm-benefit-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dm-benefit-icon svg {
  width: 20px;
  height: 20px;
}

.dm-benefit-tile.is-large .dm-benefit-icon {
  width: 48px;
  height: 48px;
}

.dm-benefit-tile.is-large .dm-benefit-icon svg {
  width: 24px;
  height: 24px;
}

.dm-benefit-tile-body h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: #fff;
}

.dm-benefit-tile.is-large .dm-benefit-tile-body h3 {
  font-size: 1.3rem;
}

.dm-benefit-tile-body p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.45;
}

.dm-benefit-tile.is-large .dm-benefit-tile-body p {
  font-size: 0.95rem;
  max-width: 42ch;
}

@media (max-width: 900px) {
  .dm-benefit-bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .dm-benefit-tile.is-large {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
  /* Same specificity as the desktop placement rules above, so source
     order (this comes later) decides the winner without needing !important */
  .dm-benefit-tile:not(.is-large):nth-of-type(2),
  .dm-benefit-tile:not(.is-large):nth-of-type(3),
  .dm-benefit-tile:not(.is-large):nth-of-type(4) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 7;
  }
}

/* ==========================================================================
   4. Featured Hotels — static 3-tier grid (Standard/Premium/Luxury) +
   Expandable card (#4) + room-type toggle (#17)
   ========================================================================== */
.dm-hotels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .dm-hotels-grid {
    grid-template-columns: 1fr;
  }
}

.dm-hotel-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.dm-hotel-price {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
}

.dm-hotel-price strong {
  font-size: 1.2rem;
}

.dm-hotel-price span {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.dm-hotel-media {
  position: relative;
  aspect-ratio: 4 / 3;
}

.dm-hotel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-hotel-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-highlight);
  color: var(--color-highlight-text);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.dm-hotel-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.dm-hotel-body h3 {
  margin: 0;
  font-size: 1.15rem;
}

.dm-hotel-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.dm-hotel-teaser {
  font-size: 0.92rem;
  color: var(--color-text);
  margin: 0;
}

/* Expandable accordion (native <details>) */
.dm-hotel-details {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.dm-hotel-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.dm-hotel-details summary::-webkit-details-marker {
  display: none;
}

.dm-hotel-details summary .dm-chevron {
  width: 18px;
  height: 18px;
  transition: transform 250ms var(--ease-premium);
}

.dm-hotel-details[open] summary .dm-chevron {
  transform: rotate(180deg);
}

.dm-hotel-details-panel {
  overflow: hidden;
  height: 0;
  transition: height 300ms var(--ease-premium);
}

.dm-hotel-details-panel p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  margin: 0;
}

.dm-hotel-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
}

.dm-hotel-cta .dm-hotel-reserve {
  width: 100%;
  min-height: 44px;
  font-size: 0.9rem;
}

.dm-hotel-call-link {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dm-hotel-call-link:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   5. How Booking Works — Zig-zag step timeline (#6)
   ========================================================================== */
.dm-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}

.dm-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  z-index: 0;
}

.dm-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.dm-step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  transform: scale(0);
  transition: transform 400ms var(--ease-premium);
}

.dm-step.is-visible .dm-step-icon {
  transform: scale(1);
}

.dm-step h3 {
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.dm-step p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .dm-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .dm-steps::before {
    top: 0;
    bottom: 0;
    left: 27px;
    width: 2px;
    height: auto;
    right: auto;
    background: repeating-linear-gradient(180deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  }
  /* 3 children (icon, h3, p) auto-placed into a 2-column grid wrap the 3rd
     item — the paragraph — onto row 2 of the 56px icon column instead of
     row 2 of the text column, squashing it to a 56px-wide sliver. Explicit
     placement keeps the icon spanning both rows in column 1 and both text
     children in column 2. */
  .dm-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-3);
    text-align: left;
    align-items: start;
  }
  .dm-step-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }
  .dm-step h3 {
    grid-column: 2;
    grid-row: 1;
  }
  .dm-step p {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ==========================================================================
   6. Why Choose Us — Flip cards (#7)
   ========================================================================== */
.dm-flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .dm-flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dm-flip-grid { grid-template-columns: 1fr; }
}

.dm-flip-card {
  perspective: 1200px;
  height: 190px;
}

.dm-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 500ms var(--ease-premium);
  transform-style: preserve-3d;
}

.dm-flip-card:hover .dm-flip-inner,
.dm-flip-card.is-flipped .dm-flip-inner {
  transform: rotateY(180deg);
}

.dm-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
}

.dm-flip-front {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

.dm-flip-front svg { width: 34px; height: 34px; }

.dm-flip-front span {
  font-weight: 700;
  font-size: 0.98rem;
}

.dm-flip-back {
  background: var(--color-primary);
  color: #fff;
  transform: rotateY(180deg);
  font-size: 0.85rem;
  line-height: 1.45;
}

.dm-flip-back p {
  color: #fff;
}

/* ==========================================================================
   7. Experiences & Activities — Tabs (#8) + hover-reveal (#5)
   ========================================================================== */
.dm-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.dm-tab-btn {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
}

.dm-tab-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.dm-tab-panels {
  position: relative;
  min-height: 420px;
}

.dm-tab-panel {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.dm-tab-panel.is-active {
  display: grid;
  animation: dm-tab-in 320ms var(--ease-premium);
}

@keyframes dm-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .dm-tab-panel { grid-template-columns: 1fr; }
  .dm-tab-panels { min-height: 0; }
}

.dm-exp-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-sm);
}

.dm-exp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-exp-panel {
  position: absolute;
  inset-inline: 0;
  bottom: -100%;
  padding: var(--space-4);
  background: rgba(16, 62, 78, 0.88);
  color: #fff;
  transition: bottom 300ms ease;
}

.dm-exp-card:hover .dm-exp-panel,
.dm-exp-card.is-active .dm-exp-panel {
  bottom: 0;
}

.dm-exp-panel h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: #fff;
}

.dm-exp-panel p {
  font-size: 0.85rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.dm-exp-name-strip {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.85), transparent);
}

.dm-exp-card:hover .dm-exp-name-strip,
.dm-exp-card.is-active .dm-exp-name-strip {
  opacity: 0;
}

.dm-exp-name-strip h3 {
  color: #fff;
  font-size: 0.98rem;
  margin: 0;
}

/* ==========================================================================
   Tour Packages — card grid
   ========================================================================== */
.dm-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .dm-package-grid { grid-template-columns: 1fr; }
}

.dm-package-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.dm-package-card.is-popular {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.dm-package-media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.dm-package-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-package-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.dm-package-badge.is-popular {
  background: var(--color-primary);
  color: #fff;
}

.dm-package-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.dm-package-body h3 {
  margin: 0;
  font-size: 1.1rem;
}

.dm-package-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.dm-package-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.dm-package-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-light);
}

.dm-package-body > p {
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0;
}

.dm-package-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   8. Deals & Offers — Countdown banner (#9)
   ========================================================================== */
.dm-deal-banner {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
  background-size: 200% 200%;
  animation: dm-deal-shift 8s ease infinite;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@keyframes dm-deal-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .dm-deal-banner { animation: none; }
}

.dm-deal-copy h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.3rem;
}

.dm-deal-copy p {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
}

.dm-countdown {
  display: flex;
  gap: 10px;
}

.dm-countdown-unit {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  min-width: 62px;
}

.dm-countdown-unit strong {
  display: block;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.dm-countdown-unit span {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.dm-deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .dm-deal-grid { grid-template-columns: 1fr; }
}

.dm-deal-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.dm-deal-card h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--color-primary);
}

.dm-deal-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   9. Guest Reviews — Drag carousel (#10) + count-up (#24)
   ========================================================================== */
.dm-reviews-wrap {
  position: relative;
}

.dm-reviews-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.dm-reviews-track::-webkit-scrollbar { display: none; }
.dm-reviews-track.is-dragging { cursor: grabbing; }

.dm-review-card {
  flex: 0 0 min(360px, 85vw);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.dm-review-card .quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-steel-dark);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.dm-review-card blockquote {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
}

.dm-review-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dm-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.dm-review-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}

.dm-review-place {
  color: var(--color-text-muted);
  font-weight: 400;
}

.dm-review-stars {
  color: var(--color-star);
  font-size: 0.85rem;
}

.dm-review-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-4);
}

.dm-review-dots button {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  border: none;
  padding: 0;
  transition: width 250ms var(--ease-premium), background 250ms ease;
  cursor: pointer;
}

.dm-review-dots button.is-active {
  width: 24px;
  background: var(--color-primary);
}

/* ==========================================================================
   10. Travel Guides — Sticky scroll editorial (#11)
   ========================================================================== */
.dm-guides {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .dm-guides {
    grid-template-columns: 1fr 1fr;
  }
}

.dm-guides-sticky {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
  .dm-guides-sticky {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
  }
}

.dm-guides-sticky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-guide-item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  opacity: 0.4;
  transition: opacity 400ms ease;
}

.dm-guide-item:first-child { padding-top: 0; }
.dm-guide-item:last-child { border-bottom: none; }

.dm-guide-item.is-active {
  opacity: 1;
}

.dm-guide-item h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--space-2);
}

.dm-guide-item p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.dm-guide-item a {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   11. WhatsApp Booking Promo — Card stack (#21) + magnetic CTA (#23)
   ========================================================================== */
.dm-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .dm-promo {
    grid-template-columns: 1fr 380px;
  }
}

.dm-promo-copy h2 { margin-top: 0; }

.dm-promo-list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.dm-promo-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--color-text);
}

.dm-promo-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.dm-stack {
  position: relative;
  height: 320px;
}

.dm-stack-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 220px;
  height: 300px;
  background: #fff;
  border-radius: 22px;
  border: 6px solid var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  transition: transform 500ms var(--ease-premium);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dm-stack-card:nth-child(1) { transform: rotate(-8deg) translateX(-26px); z-index: 1; }
.dm-stack-card:nth-child(2) { transform: rotate(0deg) translateX(0); z-index: 2; }
.dm-stack-card:nth-child(3) { transform: rotate(8deg) translateX(26px); z-index: 1; }

.dm-stack.is-fanned .dm-stack-card:nth-child(1) { transform: rotate(-12deg) translateX(-44px) translateY(-6px); }
.dm-stack.is-fanned .dm-stack-card:nth-child(3) { transform: rotate(12deg) translateX(44px) translateY(-6px); }

.dm-chat-bubble {
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 0.68rem;
  line-height: 1.35;
  max-width: 88%;
}

.dm-chat-bubble.in {
  align-self: flex-start;
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-bottom-left-radius: 2px;
}

.dm-chat-bubble.out {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}

/* Magnetic button wrapper — JS applies inline transform */
.dm-magnetic {
  display: inline-flex;
  transition: transform 150ms ease-out;
}

/* ==========================================================================
   12. FAQ — reuses styles.css's .faq-list/.faq-item (same as the homepage);
   only the heading centering is added here, scoped to this page.
   ========================================================================== */
#faq .section-heading {
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   13. Final CTA
   ========================================================================== */
.dm-final-cta {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  text-align: center;
}

.dm-final-cta h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: 0 0 var(--space-3);
}

.dm-final-cta p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
}

.dm-final-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Sticky mobile CTA bar (#19) — page-specific, mirrors main.js pattern
   ========================================================================== */
.dm-mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 10px var(--space-3);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 300ms var(--ease-premium);
}

.dm-mobile-cta-bar.is-visible {
  transform: translateY(0);
}

.dm-mobile-cta-bar .btn {
  flex: 1;
  min-height: 46px;
}

@media (min-width: 900px) {
  .dm-mobile-cta-bar { display: none; }
}

/* ==========================================================================
   Progress-linked section dots (#16, desktop only)
   ========================================================================== */
.dm-section-dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 80;
}

@media (min-width: 1200px) {
  .dm-section-dots { display: flex; }
}

.dm-section-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}

.dm-section-dots button.is-active {
  background: var(--color-primary);
  transform: scale(1.4);
}

/* ==========================================================================
   Shared section-scroll offset (accounts for sticky header)
   ========================================================================== */
main section[id] {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* ==========================================================================
   Merged from css/tent-stay.css — shared stylesheet consolidation
   ========================================================================== */
/* ==========================================================================
   Tent Stays in Kodaikanal — page-specific styles
   Built on top of styles.css tokens (colors, spacing, radius, shadow, type).
   All selectors namespaced "ts-" so nothing here touches index.html or
   any other service page. Same 25-pattern design system as hotels.css —
   content and copy below are unique to this property type.
   ========================================================================== */

:root {
  --ts-overlay: linear-gradient(180deg, rgba(16, 62, 78, 0.55) 0%, rgba(16, 62, 78, 0.72) 55%, rgba(16, 62, 78, 0.88) 100%);
}

/* ==========================================================================
   Global reveal system — opacity + translateY, staggered by JS.
   Progressive enhancement: [data-reveal] content is fully visible by
   default. Only once html.js (set synchronously in <head>, before this
   stylesheet can even be blamed for a flash) confirms JS is running does
   the hidden-until-scrolled state apply — so a blocked/broken/slow script
   never leaves real content permanently invisible.
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-premium), transform 600ms var(--ease-premium);
  will-change: opacity, transform;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   1. Hero — Split-Search Hero (#1)
   ========================================================================== */
.ts-hero {
  position: relative;
  min-height: 462px;
  display: flex;
  align-items: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  overflow: hidden;
  isolation: isolate;
}

.ts-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.ts-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.ts-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ts-overlay);
  z-index: -1;
}

.ts-hero-inner {
  width: 100%;
  display: grid;
  gap: var(--space-6);
}

.ts-hero-copy {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  color: #fff;
}

.ts-hero-copy .eyebrow {
  color: var(--color-highlight);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.85rem;
  margin: 0 0 var(--space-5);
}

.ts-hero-copy h1 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  color: #fff;
}

.ts-hero-copy .ts-hero-subhead {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-5);
  max-width: 54ch;
  margin-inline: auto;
}

/* Pull the search card up over the hero photo's bottom edge instead of
   leaving a plain white gap between the photo and the card — overrides
   styles.css's smaller positive top margin, scoped to this page only
   since index.html never loads this stylesheet. The card itself is only
   ~326px wide and centered, so on narrow viewports its negative margins
   leave a band on the left/right edges taller than the card can cover;
   without a matching fill there, raw white page background shows through
   between the photo and the stat strip below. var(--color-primary-dark)
   matches .ts-stat-strip's own background, so that flanking band reads as
   a continuation of the strip instead of a gap. */
.hero-search-wrap {
  margin-top: var(--space-3);
}

@media (max-width: 640px) {
  .ts-hero {
    align-items: stretch;
  }
}

/* ==========================================================================
   2. Trust / Stat strip (#2) + Marquee (#13)
   ========================================================================== */
.ts-stat-strip {
  padding-block: var(--space-6);
  background: var(--color-primary-dark);
  color: #fff;
}

.ts-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.ts-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  color: var(--color-highlight);
}

.ts-stat-label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .ts-stat-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-5);
  }
}

.ts-marquee {
  margin-top: var(--space-5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ts-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-6);
  animation: ts-marquee 28s linear infinite;
}

.ts-marquee:hover .ts-marquee-track {
  animation-play-state: paused;
}

.ts-marquee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.ts-marquee-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-highlight);
  flex-shrink: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .ts-marquee-track { animation: none; }
}

/* ==========================================================================
   3. Why Choose a Hotel — photo-backed bento tiles (#14)
   ========================================================================== */
.ts-benefit-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--space-4);
  height: 460px;
}

.ts-benefit-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.ts-benefit-tile.is-large {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.ts-benefit-tile:not(.is-large):nth-of-type(2) { grid-column: 2; grid-row: 1; }
.ts-benefit-tile:not(.is-large):nth-of-type(3) { grid-column: 2; grid-row: 2; }
.ts-benefit-tile:not(.is-large):nth-of-type(4) { grid-column: 2; grid-row: 3; }

.ts-benefit-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ts-benefit-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.92) 0%, rgba(16, 62, 78, 0.55) 55%, rgba(16, 62, 78, 0.15) 100%);
}

.ts-benefit-tile-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  color: #fff;
}

.ts-benefit-tile.is-large .ts-benefit-tile-body {
  padding: var(--space-5);
}

.ts-benefit-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ts-benefit-icon svg {
  width: 20px;
  height: 20px;
}

.ts-benefit-tile.is-large .ts-benefit-icon {
  width: 48px;
  height: 48px;
}

.ts-benefit-tile.is-large .ts-benefit-icon svg {
  width: 24px;
  height: 24px;
}

.ts-benefit-tile-body h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: #fff;
}

.ts-benefit-tile.is-large .ts-benefit-tile-body h3 {
  font-size: 1.3rem;
}

.ts-benefit-tile-body p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.45;
}

.ts-benefit-tile.is-large .ts-benefit-tile-body p {
  font-size: 0.95rem;
  max-width: 42ch;
}

@media (max-width: 900px) {
  .ts-benefit-bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .ts-benefit-tile.is-large {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
  /* Same specificity as the desktop placement rules above, so source
     order (this comes later) decides the winner without needing !important */
  .ts-benefit-tile:not(.is-large):nth-of-type(2),
  .ts-benefit-tile:not(.is-large):nth-of-type(3),
  .ts-benefit-tile:not(.is-large):nth-of-type(4) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 7;
  }
}

/* ==========================================================================
   4. Featured Hotels — static 3-tier grid (Standard/Premium/Luxury) +
   Expandable card (#4) + room-type toggle (#17)
   ========================================================================== */
.ts-hotels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .ts-hotels-grid {
    grid-template-columns: 1fr;
  }
}

.ts-hotel-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.ts-hotel-price {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
}

.ts-hotel-price strong {
  font-size: 1.2rem;
}

.ts-hotel-price span {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.ts-hotel-media {
  position: relative;
  aspect-ratio: 4 / 3;
}

.ts-hotel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ts-hotel-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-highlight);
  color: var(--color-highlight-text);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.ts-hotel-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.ts-hotel-body h3 {
  margin: 0;
  font-size: 1.15rem;
}

.ts-hotel-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.ts-hotel-teaser {
  font-size: 0.92rem;
  color: var(--color-text);
  margin: 0;
}

/* Expandable accordion (native <details>) */
.ts-hotel-details {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.ts-hotel-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.ts-hotel-details summary::-webkit-details-marker {
  display: none;
}

.ts-hotel-details summary .ts-chevron {
  width: 18px;
  height: 18px;
  transition: transform 250ms var(--ease-premium);
}

.ts-hotel-details[open] summary .ts-chevron {
  transform: rotate(180deg);
}

.ts-hotel-details-panel {
  overflow: hidden;
  height: 0;
  transition: height 300ms var(--ease-premium);
}

.ts-hotel-details-panel p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  margin: 0;
}

.ts-hotel-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
}

.ts-hotel-cta .ts-hotel-reserve {
  width: 100%;
  min-height: 44px;
  font-size: 0.9rem;
}

.ts-hotel-call-link {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ts-hotel-call-link:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   5. How Booking Works — Zig-zag step timeline (#6)
   ========================================================================== */
.ts-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}

.ts-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  z-index: 0;
}

.ts-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.ts-step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  transform: scale(0);
  transition: transform 400ms var(--ease-premium);
}

.ts-step.is-visible .ts-step-icon {
  transform: scale(1);
}

.ts-step h3 {
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.ts-step p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .ts-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .ts-steps::before {
    top: 0;
    bottom: 0;
    left: 27px;
    width: 2px;
    height: auto;
    right: auto;
    background: repeating-linear-gradient(180deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  }
  /* 3 children (icon, h3, p) auto-placed into a 2-column grid wrap the 3rd
     item — the paragraph — onto row 2 of the 56px icon column instead of
     row 2 of the text column, squashing it to a 56px-wide sliver. Explicit
     placement keeps the icon spanning both rows in column 1 and both text
     children in column 2. */
  .ts-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-3);
    text-align: left;
    align-items: start;
  }
  .ts-step-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }
  .ts-step h3 {
    grid-column: 2;
    grid-row: 1;
  }
  .ts-step p {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ==========================================================================
   6. Why Choose Us — Flip cards (#7)
   ========================================================================== */
.ts-flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .ts-flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ts-flip-grid { grid-template-columns: 1fr; }
}

.ts-flip-card {
  perspective: 1200px;
  height: 190px;
}

.ts-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 500ms var(--ease-premium);
  transform-style: preserve-3d;
}

.ts-flip-card:hover .ts-flip-inner,
.ts-flip-card.is-flipped .ts-flip-inner {
  transform: rotateY(180deg);
}

.ts-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
}

.ts-flip-front {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

.ts-flip-front svg { width: 34px; height: 34px; }

.ts-flip-front span {
  font-weight: 700;
  font-size: 0.98rem;
}

.ts-flip-back {
  background: var(--color-primary);
  color: #fff;
  transform: rotateY(180deg);
  font-size: 0.85rem;
  line-height: 1.45;
}

.ts-flip-back p {
  color: #fff;
}

/* ==========================================================================
   7. Experiences & Activities — Tabs (#8) + hover-reveal (#5)
   ========================================================================== */
.ts-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.ts-tab-btn {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
}

.ts-tab-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.ts-tab-panels {
  position: relative;
  min-height: 420px;
}

.ts-tab-panel {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.ts-tab-panel.is-active {
  display: grid;
  animation: ts-tab-in 320ms var(--ease-premium);
}

@keyframes ts-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .ts-tab-panel { grid-template-columns: 1fr; }
  .ts-tab-panels { min-height: 0; }
}

.ts-exp-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-sm);
}

.ts-exp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ts-exp-panel {
  position: absolute;
  inset-inline: 0;
  bottom: -100%;
  padding: var(--space-4);
  background: rgba(16, 62, 78, 0.88);
  color: #fff;
  transition: bottom 300ms ease;
}

.ts-exp-card:hover .ts-exp-panel,
.ts-exp-card.is-active .ts-exp-panel {
  bottom: 0;
}

.ts-exp-panel h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: #fff;
}

.ts-exp-panel p {
  font-size: 0.85rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.ts-exp-name-strip {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.85), transparent);
}

.ts-exp-card:hover .ts-exp-name-strip,
.ts-exp-card.is-active .ts-exp-name-strip {
  opacity: 0;
}

.ts-exp-name-strip h3 {
  color: #fff;
  font-size: 0.98rem;
  margin: 0;
}

/* ==========================================================================
   Tour Packages — card grid
   ========================================================================== */
.ts-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .ts-package-grid { grid-template-columns: 1fr; }
}

.ts-package-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.ts-package-card.is-popular {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.ts-package-media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.ts-package-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ts-package-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.ts-package-badge.is-popular {
  background: var(--color-primary);
  color: #fff;
}

.ts-package-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.ts-package-body h3 {
  margin: 0;
  font-size: 1.1rem;
}

.ts-package-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.ts-package-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.ts-package-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-light);
}

.ts-package-body > p {
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0;
}

.ts-package-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   8. Deals & Offers — Countdown banner (#9)
   ========================================================================== */
.ts-deal-banner {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
  background-size: 200% 200%;
  animation: ts-deal-shift 8s ease infinite;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@keyframes ts-deal-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .ts-deal-banner { animation: none; }
}

.ts-deal-copy h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.3rem;
}

.ts-deal-copy p {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
}

.ts-countdown {
  display: flex;
  gap: 10px;
}

.ts-countdown-unit {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  min-width: 62px;
}

.ts-countdown-unit strong {
  display: block;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.ts-countdown-unit span {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.ts-deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .ts-deal-grid { grid-template-columns: 1fr; }
}

.ts-deal-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.ts-deal-card h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--color-primary);
}

.ts-deal-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   9. Guest Reviews — Drag carousel (#10) + count-up (#24)
   ========================================================================== */
.ts-reviews-wrap {
  position: relative;
}

.ts-reviews-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.ts-reviews-track::-webkit-scrollbar { display: none; }
.ts-reviews-track.is-dragging { cursor: grabbing; }

.ts-review-card {
  flex: 0 0 min(360px, 85vw);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.ts-review-card .quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-steel-dark);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.ts-review-card blockquote {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
}

.ts-review-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ts-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.ts-review-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}

.ts-review-place {
  color: var(--color-text-muted);
  font-weight: 400;
}

.ts-review-stars {
  color: var(--color-star);
  font-size: 0.85rem;
}

.ts-review-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-4);
}

.ts-review-dots button {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  border: none;
  padding: 0;
  transition: width 250ms var(--ease-premium), background 250ms ease;
  cursor: pointer;
}

.ts-review-dots button.is-active {
  width: 24px;
  background: var(--color-primary);
}

/* ==========================================================================
   10. Travel Guides — Sticky scroll editorial (#11)
   ========================================================================== */
.ts-guides {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .ts-guides {
    grid-template-columns: 1fr 1fr;
  }
}

.ts-guides-sticky {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

@media (min-width: 900px) {
  .ts-guides-sticky {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
  }
}

.ts-guides-sticky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ts-guide-item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  opacity: 0.4;
  transition: opacity 400ms ease;
}

.ts-guide-item:first-child { padding-top: 0; }
.ts-guide-item:last-child { border-bottom: none; }

.ts-guide-item.is-active {
  opacity: 1;
}

.ts-guide-item h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--space-2);
}

.ts-guide-item p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.ts-guide-item a {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   11. WhatsApp Booking Promo — Card stack (#21) + magnetic CTA (#23)
   ========================================================================== */
.ts-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .ts-promo {
    grid-template-columns: 1fr 380px;
  }
}

.ts-promo-copy h2 { margin-top: 0; }

.ts-promo-list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.ts-promo-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--color-text);
}

.ts-promo-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.ts-stack {
  position: relative;
  height: 320px;
}

.ts-stack-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 220px;
  height: 300px;
  background: #fff;
  border-radius: 22px;
  border: 6px solid var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  transition: transform 500ms var(--ease-premium);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ts-stack-card:nth-child(1) { transform: rotate(-8deg) translateX(-26px); z-index: 1; }
.ts-stack-card:nth-child(2) { transform: rotate(0deg) translateX(0); z-index: 2; }
.ts-stack-card:nth-child(3) { transform: rotate(8deg) translateX(26px); z-index: 1; }

.ts-stack.is-fanned .ts-stack-card:nth-child(1) { transform: rotate(-12deg) translateX(-44px) translateY(-6px); }
.ts-stack.is-fanned .ts-stack-card:nth-child(3) { transform: rotate(12deg) translateX(44px) translateY(-6px); }

.ts-chat-bubble {
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 0.68rem;
  line-height: 1.35;
  max-width: 88%;
}

.ts-chat-bubble.in {
  align-self: flex-start;
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-bottom-left-radius: 2px;
}

.ts-chat-bubble.out {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}

/* Magnetic button wrapper — JS applies inline transform */
.ts-magnetic {
  display: inline-flex;
  transition: transform 150ms ease-out;
}

/* ==========================================================================
   12. FAQ — reuses styles.css's .faq-list/.faq-item (same as the homepage);
   only the heading centering is added here, scoped to this page.
   ========================================================================== */
#faq .section-heading {
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   13. Final CTA
   ========================================================================== */
.ts-final-cta {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  text-align: center;
}

.ts-final-cta h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: 0 0 var(--space-3);
}

.ts-final-cta p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
}

.ts-final-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Sticky mobile CTA bar (#19) — page-specific, mirrors main.js pattern
   ========================================================================== */
.ts-mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 10px var(--space-3);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 300ms var(--ease-premium);
}

.ts-mobile-cta-bar.is-visible {
  transform: translateY(0);
}

.ts-mobile-cta-bar .btn {
  flex: 1;
  min-height: 46px;
}

@media (min-width: 900px) {
  .ts-mobile-cta-bar { display: none; }
}

/* ==========================================================================
   Progress-linked section dots (#16, desktop only)
   ========================================================================== */
.ts-section-dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 80;
}

@media (min-width: 1200px) {
  .ts-section-dots { display: flex; }
}

.ts-section-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}

.ts-section-dots button.is-active {
  background: var(--color-primary);
  transform: scale(1.4);
}

/* ==========================================================================
   Shared section-scroll offset (accounts for sticky header)
   ========================================================================== */
main section[id] {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* ==========================================================================
   Merged from css/group-stay.css — shared stylesheet consolidation
   ========================================================================== */
/* ==========================================================================
   Group Stay Cottages in Kodaikanal — page-specific styles
   Built on top of styles.css tokens (colors, spacing, radius, shadow, type).
   All selectors namespaced "gs-" so nothing here touches index.html or
   any other service page. Same 25-pattern design system as hotels.css —
   content and copy below are unique to this property type.
   ========================================================================== */

:root {
  --gs-overlay: linear-gradient(180deg, rgba(16, 62, 78, 0.55) 0%, rgba(16, 62, 78, 0.72) 55%, rgba(16, 62, 78, 0.88) 100%);
}

/* ==========================================================================
   Global reveal system — opacity + translateY, staggered by JS.
   Progressive enhancement: [data-reveal] content is fully visible by
   default. Only once html.js (set synchronously in <head>, before this
   stylesheet can even be blamed for a flash) confirms JS is running does
   the hidden-until-scrolled state apply — so a blocked/broken/slow script
   never leaves real content permanently invisible.
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-premium), transform 600ms var(--ease-premium);
  will-change: opacity, transform;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   1. Hero — Split-Search Hero (#1)
   ========================================================================== */
.gs-hero {
  position: relative;
  min-height: 462px;
  display: flex;
  align-items: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  overflow: hidden;
  isolation: isolate;
}

.gs-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.gs-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.gs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gs-overlay);
  z-index: -1;
}

.gs-hero-inner {
  width: 100%;
  display: grid;
  gap: var(--space-6);
}

.gs-hero-copy {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  color: #fff;
}

.gs-hero-copy .eyebrow {
  color: var(--color-highlight);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.85rem;
  margin: 0 0 var(--space-5);
}

.gs-hero-copy h1 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  color: #fff;
}

.gs-hero-copy .gs-hero-subhead {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-5);
  max-width: 54ch;
  margin-inline: auto;
}

/* Pull the search card up over the hero photo's bottom edge instead of
   leaving a plain white gap between the photo and the card — overrides
   styles.css's smaller positive top margin, scoped to this page only
   since index.html never loads this stylesheet. The card itself is only
   ~326px wide and centered, so on narrow viewports its negative margins
   leave a band on the left/right edges taller than the card can cover;
   without a matching fill there, raw white page background shows through
   between the photo and the stat strip below. var(--color-primary-dark)
   matches .gs-stat-strip's own background, so that flanking band reads as
   a continuation of the strip instead of a gap. */
.hero-search-wrap {
  margin-top: var(--space-3);
}

@media (max-width: 640px) {
  .gs-hero {
    align-items: stretch;
  }
}

/* ==========================================================================
   2. Trust / Stat strip (#2) + Marquee (#13)
   ========================================================================== */
.gs-stat-strip {
  padding-block: var(--space-6);
  background: var(--color-primary-dark);
  color: #fff;
}

.gs-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.gs-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  color: var(--color-highlight);
}

.gs-stat-label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .gs-stat-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-5);
  }
}

.gs-marquee {
  margin-top: var(--space-5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.gs-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-6);
  animation: gs-marquee 28s linear infinite;
}

.gs-marquee:hover .gs-marquee-track {
  animation-play-state: paused;
}

.gs-marquee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.gs-marquee-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-highlight);
  flex-shrink: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .gs-marquee-track { animation: none; }
}

/* ==========================================================================
   3. Why Choose a Hotel — photo-backed bento tiles (#14)
   ========================================================================== */
.gs-benefit-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--space-4);
  height: 460px;
}

.gs-benefit-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.gs-benefit-tile.is-large {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.gs-benefit-tile:not(.is-large):nth-of-type(2) { grid-column: 2; grid-row: 1; }
.gs-benefit-tile:not(.is-large):nth-of-type(3) { grid-column: 2; grid-row: 2; }
.gs-benefit-tile:not(.is-large):nth-of-type(4) { grid-column: 2; grid-row: 3; }

.gs-benefit-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-benefit-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.92) 0%, rgba(16, 62, 78, 0.55) 55%, rgba(16, 62, 78, 0.15) 100%);
}

.gs-benefit-tile-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  color: #fff;
}

.gs-benefit-tile.is-large .gs-benefit-tile-body {
  padding: var(--space-5);
}

.gs-benefit-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gs-benefit-icon svg {
  width: 20px;
  height: 20px;
}

.gs-benefit-tile.is-large .gs-benefit-icon {
  width: 48px;
  height: 48px;
}

.gs-benefit-tile.is-large .gs-benefit-icon svg {
  width: 24px;
  height: 24px;
}

.gs-benefit-tile-body h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: #fff;
}

.gs-benefit-tile.is-large .gs-benefit-tile-body h3 {
  font-size: 1.3rem;
}

.gs-benefit-tile-body p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.45;
}

.gs-benefit-tile.is-large .gs-benefit-tile-body p {
  font-size: 0.95rem;
  max-width: 42ch;
}

@media (max-width: 900px) {
  .gs-benefit-bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .gs-benefit-tile.is-large {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
  /* Same specificity as the desktop placement rules above, so source
     order (this comes later) decides the winner without needing !important */
  .gs-benefit-tile:not(.is-large):nth-of-type(2),
  .gs-benefit-tile:not(.is-large):nth-of-type(3),
  .gs-benefit-tile:not(.is-large):nth-of-type(4) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 7;
  }
}

/* ==========================================================================
   4. Featured Hotels — static 3-tier grid (Standard/Premium/Luxury) +
   Expandable card (#4) + room-type toggle (#17)
   ========================================================================== */
.gs-hotels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .gs-hotels-grid {
    grid-template-columns: 1fr;
  }
}

.gs-hotel-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.gs-hotel-price {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
}

.gs-hotel-price strong {
  font-size: 1.2rem;
}

.gs-hotel-price span {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.gs-hotel-media {
  position: relative;
  aspect-ratio: 4 / 3;
}

.gs-hotel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-hotel-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-highlight);
  color: var(--color-highlight-text);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.gs-hotel-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.gs-hotel-body h3 {
  margin: 0;
  font-size: 1.15rem;
}

.gs-hotel-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.gs-hotel-teaser {
  font-size: 0.92rem;
  color: var(--color-text);
  margin: 0;
}

/* Expandable accordion (native <details>) */
.gs-hotel-details {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.gs-hotel-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.gs-hotel-details summary::-webkit-details-marker {
  display: none;
}

.gs-hotel-details summary .gs-chevron {
  width: 18px;
  height: 18px;
  transition: transform 250ms var(--ease-premium);
}

.gs-hotel-details[open] summary .gs-chevron {
  transform: rotate(180deg);
}

.gs-hotel-details-panel {
  overflow: hidden;
  height: 0;
  transition: height 300ms var(--ease-premium);
}

.gs-hotel-details-panel p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  margin: 0;
}

.gs-hotel-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
}

.gs-hotel-cta .gs-hotel-reserve {
  width: 100%;
  min-height: 44px;
  font-size: 0.9rem;
}

.gs-hotel-call-link {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gs-hotel-call-link:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   5. How Booking Works — Zig-zag step timeline (#6)
   ========================================================================== */
.gs-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}

.gs-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  z-index: 0;
}

.gs-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.gs-step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  transform: scale(0);
  transition: transform 400ms var(--ease-premium);
}

.gs-step.is-visible .gs-step-icon {
  transform: scale(1);
}

.gs-step h3 {
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.gs-step p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .gs-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .gs-steps::before {
    top: 0;
    bottom: 0;
    left: 27px;
    width: 2px;
    height: auto;
    right: auto;
    background: repeating-linear-gradient(180deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  }
  /* 3 children (icon, h3, p) auto-placed into a 2-column grid wrap the 3rd
     item — the paragraph — onto row 2 of the 56px icon column instead of
     row 2 of the text column, squashing it to a 56px-wide sliver. Explicit
     placement keeps the icon spanning both rows in column 1 and both text
     children in column 2. */
  .gs-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-3);
    text-align: left;
    align-items: start;
  }
  .gs-step-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }
  .gs-step h3 {
    grid-column: 2;
    grid-row: 1;
  }
  .gs-step p {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ==========================================================================
   6. Why Choose Us — Flip cards (#7)
   ========================================================================== */
.gs-flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .gs-flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .gs-flip-grid { grid-template-columns: 1fr; }
}

.gs-flip-card {
  perspective: 1200px;
  height: 190px;
}

.gs-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 500ms var(--ease-premium);
  transform-style: preserve-3d;
}

.gs-flip-card:hover .gs-flip-inner,
.gs-flip-card.is-flipped .gs-flip-inner {
  transform: rotateY(180deg);
}

.gs-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
}

.gs-flip-front {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

.gs-flip-front svg { width: 34px; height: 34px; }

.gs-flip-front span {
  font-weight: 700;
  font-size: 0.98rem;
}

.gs-flip-back {
  background: var(--color-primary);
  color: #fff;
  transform: rotateY(180deg);
  font-size: 0.85rem;
  line-height: 1.45;
}

.gs-flip-back p {
  color: #fff;
}

/* ==========================================================================
   7. Experiences & Activities — Tabs (#8) + hover-reveal (#5)
   ========================================================================== */
.gs-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.gs-tab-btn {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
}

.gs-tab-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.gs-tab-panels {
  position: relative;
  min-height: 420px;
}

.gs-tab-panel {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.gs-tab-panel.is-active {
  display: grid;
  animation: gs-tab-in 320ms var(--ease-premium);
}

@keyframes gs-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .gs-tab-panel { grid-template-columns: 1fr; }
  .gs-tab-panels { min-height: 0; }
}

.gs-exp-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-sm);
}

.gs-exp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-exp-panel {
  position: absolute;
  inset-inline: 0;
  bottom: -100%;
  padding: var(--space-4);
  background: rgba(16, 62, 78, 0.88);
  color: #fff;
  transition: bottom 300ms ease;
}

.gs-exp-card:hover .gs-exp-panel,
.gs-exp-card.is-active .gs-exp-panel {
  bottom: 0;
}

.gs-exp-panel h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: #fff;
}

.gs-exp-panel p {
  font-size: 0.85rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.gs-exp-name-strip {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.85), transparent);
}

.gs-exp-card:hover .gs-exp-name-strip,
.gs-exp-card.is-active .gs-exp-name-strip {
  opacity: 0;
}

.gs-exp-name-strip h3 {
  color: #fff;
  font-size: 0.98rem;
  margin: 0;
}

/* ==========================================================================
   Tour Packages — card grid
   ========================================================================== */
.gs-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .gs-package-grid { grid-template-columns: 1fr; }
}

.gs-package-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.gs-package-card.is-popular {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.gs-package-media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.gs-package-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-package-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.gs-package-badge.is-popular {
  background: var(--color-primary);
  color: #fff;
}

.gs-package-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.gs-package-body h3 {
  margin: 0;
  font-size: 1.1rem;
}

.gs-package-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.gs-package-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.gs-package-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-light);
}

.gs-package-body > p {
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0;
}

.gs-package-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   8. Deals & Offers — Countdown banner (#9)
   ========================================================================== */
.gs-deal-banner {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
  background-size: 200% 200%;
  animation: gs-deal-shift 8s ease infinite;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@keyframes gs-deal-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gs-deal-banner { animation: none; }
}

.gs-deal-copy h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.3rem;
}

.gs-deal-copy p {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
}

.gs-countdown {
  display: flex;
  gap: 10px;
}

.gs-countdown-unit {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  min-width: 62px;
}

.gs-countdown-unit strong {
  display: block;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.gs-countdown-unit span {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.gs-deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .gs-deal-grid { grid-template-columns: 1fr; }
}

.gs-deal-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.gs-deal-card h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--color-primary);
}

.gs-deal-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   9. Guest Reviews — Drag carousel (#10) + count-up (#24)
   ========================================================================== */
.gs-reviews-wrap {
  position: relative;
}

.gs-reviews-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.gs-reviews-track::-webkit-scrollbar { display: none; }
.gs-reviews-track.is-dragging { cursor: grabbing; }

.gs-review-card {
  flex: 0 0 min(360px, 85vw);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.gs-review-card .quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-steel-dark);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.gs-review-card blockquote {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
}

.gs-review-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gs-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.gs-review-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}

.gs-review-place {
  color: var(--color-text-muted);
  font-weight: 400;
}

.gs-review-stars {
  color: var(--color-star);
  font-size: 0.85rem;
}

.gs-review-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-4);
}

.gs-review-dots button {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  border: none;
  padding: 0;
  transition: width 250ms var(--ease-premium), background 250ms ease;
  cursor: pointer;
}

.gs-review-dots button.is-active {
  width: 24px;
  background: var(--color-primary);
}

/* ==========================================================================
   10. Travel Guides — Sticky scroll editorial (#11)
   ========================================================================== */
.gs-guides {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .gs-guides {
    grid-template-columns: 1fr 1fr;
  }
}

.gs-guides-sticky {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

@media (min-width: 900px) {
  .gs-guides-sticky {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
  }
}

.gs-guides-sticky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gs-guide-item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  opacity: 0.4;
  transition: opacity 400ms ease;
}

.gs-guide-item:first-child { padding-top: 0; }
.gs-guide-item:last-child { border-bottom: none; }

.gs-guide-item.is-active {
  opacity: 1;
}

.gs-guide-item h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--space-2);
}

.gs-guide-item p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.gs-guide-item a {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   11. WhatsApp Booking Promo — Card stack (#21) + magnetic CTA (#23)
   ========================================================================== */
.gs-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .gs-promo {
    grid-template-columns: 1fr 380px;
  }
}

.gs-promo-copy h2 { margin-top: 0; }

.gs-promo-list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.gs-promo-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--color-text);
}

.gs-promo-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.gs-stack {
  position: relative;
  height: 320px;
}

.gs-stack-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 220px;
  height: 300px;
  background: #fff;
  border-radius: 22px;
  border: 6px solid var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  transition: transform 500ms var(--ease-premium);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gs-stack-card:nth-child(1) { transform: rotate(-8deg) translateX(-26px); z-index: 1; }
.gs-stack-card:nth-child(2) { transform: rotate(0deg) translateX(0); z-index: 2; }
.gs-stack-card:nth-child(3) { transform: rotate(8deg) translateX(26px); z-index: 1; }

.gs-stack.is-fanned .gs-stack-card:nth-child(1) { transform: rotate(-12deg) translateX(-44px) translateY(-6px); }
.gs-stack.is-fanned .gs-stack-card:nth-child(3) { transform: rotate(12deg) translateX(44px) translateY(-6px); }

.gs-chat-bubble {
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 0.68rem;
  line-height: 1.35;
  max-width: 88%;
}

.gs-chat-bubble.in {
  align-self: flex-start;
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-bottom-left-radius: 2px;
}

.gs-chat-bubble.out {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}

/* Magnetic button wrapper — JS applies inline transform */
.gs-magnetic {
  display: inline-flex;
  transition: transform 150ms ease-out;
}

/* ==========================================================================
   12. FAQ — reuses styles.css's .faq-list/.faq-item (same as the homepage);
   only the heading centering is added here, scoped to this page.
   ========================================================================== */
#faq .section-heading {
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   13. Final CTA
   ========================================================================== */
.gs-final-cta {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  text-align: center;
}

.gs-final-cta h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: 0 0 var(--space-3);
}

.gs-final-cta p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
}

.gs-final-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Sticky mobile CTA bar (#19) — page-specific, mirrors main.js pattern
   ========================================================================== */
.gs-mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 10px var(--space-3);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 300ms var(--ease-premium);
}

.gs-mobile-cta-bar.is-visible {
  transform: translateY(0);
}

.gs-mobile-cta-bar .btn {
  flex: 1;
  min-height: 46px;
}

@media (min-width: 900px) {
  .gs-mobile-cta-bar { display: none; }
}

/* ==========================================================================
   Progress-linked section dots (#16, desktop only)
   ========================================================================== */
.gs-section-dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 80;
}

@media (min-width: 1200px) {
  .gs-section-dots { display: flex; }
}

.gs-section-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}

.gs-section-dots button.is-active {
  background: var(--color-primary);
  transform: scale(1.4);
}

/* ==========================================================================
   Shared section-scroll offset (accounts for sticky header)
   ========================================================================== */
main section[id] {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* ==========================================================================
   Merged from css/lodge.css — shared stylesheet consolidation
   ========================================================================== */
/* ==========================================================================
   Lodges in Kodaikanal — page-specific styles
   Built on top of styles.css tokens (colors, spacing, radius, shadow, type).
   All selectors namespaced "lg-" so nothing here touches index.html or
   any other service page. Same 25-pattern design system as hotels.css —
   content and copy below are unique to this property type.
   ========================================================================== */

:root {
  --lg-overlay: linear-gradient(180deg, rgba(16, 62, 78, 0.55) 0%, rgba(16, 62, 78, 0.72) 55%, rgba(16, 62, 78, 0.88) 100%);
}

/* ==========================================================================
   Global reveal system — opacity + translateY, staggered by JS.
   Progressive enhancement: [data-reveal] content is fully visible by
   default. Only once html.js (set synchronously in <head>, before this
   stylesheet can even be blamed for a flash) confirms JS is running does
   the hidden-until-scrolled state apply — so a blocked/broken/slow script
   never leaves real content permanently invisible.
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-premium), transform 600ms var(--ease-premium);
  will-change: opacity, transform;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   1. Hero — Split-Search Hero (#1)
   ========================================================================== */
.lg-hero {
  position: relative;
  min-height: 462px;
  display: flex;
  align-items: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  overflow: hidden;
  isolation: isolate;
}

.lg-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.lg-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.lg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lg-overlay);
  z-index: -1;
}

.lg-hero-inner {
  width: 100%;
  display: grid;
  gap: var(--space-6);
}

.lg-hero-copy {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  color: #fff;
}

.lg-hero-copy .eyebrow {
  color: var(--color-highlight);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.85rem;
  margin: 0 0 var(--space-5);
}

.lg-hero-copy h1 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  color: #fff;
}

.lg-hero-copy .lg-hero-subhead {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-5);
  max-width: 54ch;
  margin-inline: auto;
}

/* Pull the search card up over the hero photo's bottom edge instead of
   leaving a plain white gap between the photo and the card — overrides
   styles.css's smaller positive top margin, scoped to this page only
   since index.html never loads this stylesheet. The card itself is only
   ~326px wide and centered, so on narrow viewports its negative margins
   leave a band on the left/right edges taller than the card can cover;
   without a matching fill there, raw white page background shows through
   between the photo and the stat strip below. var(--color-primary-dark)
   matches .lg-stat-strip's own background, so that flanking band reads as
   a continuation of the strip instead of a gap. */
.hero-search-wrap {
  margin-top: var(--space-3);
}

@media (max-width: 640px) {
  .lg-hero {
    align-items: stretch;
  }
}

/* ==========================================================================
   2. Trust / Stat strip (#2) + Marquee (#13)
   ========================================================================== */
.lg-stat-strip {
  padding-block: var(--space-6);
  background: var(--color-primary-dark);
  color: #fff;
}

.lg-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.lg-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  color: var(--color-highlight);
}

.lg-stat-label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .lg-stat-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-5);
  }
}

.lg-marquee {
  margin-top: var(--space-5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lg-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-6);
  animation: lg-marquee 28s linear infinite;
}

.lg-marquee:hover .lg-marquee-track {
  animation-play-state: paused;
}

.lg-marquee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.lg-marquee-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-highlight);
  flex-shrink: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .lg-marquee-track { animation: none; }
}

/* ==========================================================================
   3. Why Choose a Hotel — photo-backed bento tiles (#14)
   ========================================================================== */
.lg-benefit-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--space-4);
  height: 460px;
}

.lg-benefit-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.lg-benefit-tile.is-large {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.lg-benefit-tile:not(.is-large):nth-of-type(2) { grid-column: 2; grid-row: 1; }
.lg-benefit-tile:not(.is-large):nth-of-type(3) { grid-column: 2; grid-row: 2; }
.lg-benefit-tile:not(.is-large):nth-of-type(4) { grid-column: 2; grid-row: 3; }

.lg-benefit-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lg-benefit-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.92) 0%, rgba(16, 62, 78, 0.55) 55%, rgba(16, 62, 78, 0.15) 100%);
}

.lg-benefit-tile-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  color: #fff;
}

.lg-benefit-tile.is-large .lg-benefit-tile-body {
  padding: var(--space-5);
}

.lg-benefit-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lg-benefit-icon svg {
  width: 20px;
  height: 20px;
}

.lg-benefit-tile.is-large .lg-benefit-icon {
  width: 48px;
  height: 48px;
}

.lg-benefit-tile.is-large .lg-benefit-icon svg {
  width: 24px;
  height: 24px;
}

.lg-benefit-tile-body h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: #fff;
}

.lg-benefit-tile.is-large .lg-benefit-tile-body h3 {
  font-size: 1.3rem;
}

.lg-benefit-tile-body p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.45;
}

.lg-benefit-tile.is-large .lg-benefit-tile-body p {
  font-size: 0.95rem;
  max-width: 42ch;
}

@media (max-width: 900px) {
  .lg-benefit-bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .lg-benefit-tile.is-large {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
  /* Same specificity as the desktop placement rules above, so source
     order (this comes later) decides the winner without needing !important */
  .lg-benefit-tile:not(.is-large):nth-of-type(2),
  .lg-benefit-tile:not(.is-large):nth-of-type(3),
  .lg-benefit-tile:not(.is-large):nth-of-type(4) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 7;
  }
}

/* ==========================================================================
   4. Featured Hotels — static 3-tier grid (Standard/Premium/Luxury) +
   Expandable card (#4) + room-type toggle (#17)
   ========================================================================== */
.lg-hotels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .lg-hotels-grid {
    grid-template-columns: 1fr;
  }
}

.lg-hotel-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.lg-hotel-price {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
}

.lg-hotel-price strong {
  font-size: 1.2rem;
}

.lg-hotel-price span {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.lg-hotel-media {
  position: relative;
  aspect-ratio: 4 / 3;
}

.lg-hotel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lg-hotel-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-highlight);
  color: var(--color-highlight-text);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.lg-hotel-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.lg-hotel-body h3 {
  margin: 0;
  font-size: 1.15rem;
}

.lg-hotel-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.lg-hotel-teaser {
  font-size: 0.92rem;
  color: var(--color-text);
  margin: 0;
}

/* Expandable accordion (native <details>) */
.lg-hotel-details {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.lg-hotel-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.lg-hotel-details summary::-webkit-details-marker {
  display: none;
}

.lg-hotel-details summary .lg-chevron {
  width: 18px;
  height: 18px;
  transition: transform 250ms var(--ease-premium);
}

.lg-hotel-details[open] summary .lg-chevron {
  transform: rotate(180deg);
}

.lg-hotel-details-panel {
  overflow: hidden;
  height: 0;
  transition: height 300ms var(--ease-premium);
}

.lg-hotel-details-panel p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  margin: 0;
}

.lg-hotel-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
}

.lg-hotel-cta .lg-hotel-reserve {
  width: 100%;
  min-height: 44px;
  font-size: 0.9rem;
}

.lg-hotel-call-link {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lg-hotel-call-link:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   5. How Booking Works — Zig-zag step timeline (#6)
   ========================================================================== */
.lg-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}

.lg-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  z-index: 0;
}

.lg-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.lg-step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  transform: scale(0);
  transition: transform 400ms var(--ease-premium);
}

.lg-step.is-visible .lg-step-icon {
  transform: scale(1);
}

.lg-step h3 {
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.lg-step p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .lg-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .lg-steps::before {
    top: 0;
    bottom: 0;
    left: 27px;
    width: 2px;
    height: auto;
    right: auto;
    background: repeating-linear-gradient(180deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  }
  /* 3 children (icon, h3, p) auto-placed into a 2-column grid wrap the 3rd
     item — the paragraph — onto row 2 of the 56px icon column instead of
     row 2 of the text column, squashing it to a 56px-wide sliver. Explicit
     placement keeps the icon spanning both rows in column 1 and both text
     children in column 2. */
  .lg-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-3);
    text-align: left;
    align-items: start;
  }
  .lg-step-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }
  .lg-step h3 {
    grid-column: 2;
    grid-row: 1;
  }
  .lg-step p {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ==========================================================================
   6. Why Choose Us — Flip cards (#7)
   ========================================================================== */
.lg-flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .lg-flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .lg-flip-grid { grid-template-columns: 1fr; }
}

.lg-flip-card {
  perspective: 1200px;
  height: 190px;
}

.lg-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 500ms var(--ease-premium);
  transform-style: preserve-3d;
}

.lg-flip-card:hover .lg-flip-inner,
.lg-flip-card.is-flipped .lg-flip-inner {
  transform: rotateY(180deg);
}

.lg-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
}

.lg-flip-front {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

.lg-flip-front svg { width: 34px; height: 34px; }

.lg-flip-front span {
  font-weight: 700;
  font-size: 0.98rem;
}

.lg-flip-back {
  background: var(--color-primary);
  color: #fff;
  transform: rotateY(180deg);
  font-size: 0.85rem;
  line-height: 1.45;
}

.lg-flip-back p {
  color: #fff;
}

/* ==========================================================================
   7. Experiences & Activities — Tabs (#8) + hover-reveal (#5)
   ========================================================================== */
.lg-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.lg-tab-btn {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
}

.lg-tab-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.lg-tab-panels {
  position: relative;
  min-height: 420px;
}

.lg-tab-panel {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.lg-tab-panel.is-active {
  display: grid;
  animation: lg-tab-in 320ms var(--ease-premium);
}

@keyframes lg-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .lg-tab-panel { grid-template-columns: 1fr; }
  .lg-tab-panels { min-height: 0; }
}

.lg-exp-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-sm);
}

.lg-exp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lg-exp-panel {
  position: absolute;
  inset-inline: 0;
  bottom: -100%;
  padding: var(--space-4);
  background: rgba(16, 62, 78, 0.88);
  color: #fff;
  transition: bottom 300ms ease;
}

.lg-exp-card:hover .lg-exp-panel,
.lg-exp-card.is-active .lg-exp-panel {
  bottom: 0;
}

.lg-exp-panel h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: #fff;
}

.lg-exp-panel p {
  font-size: 0.85rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.lg-exp-name-strip {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.85), transparent);
}

.lg-exp-card:hover .lg-exp-name-strip,
.lg-exp-card.is-active .lg-exp-name-strip {
  opacity: 0;
}

.lg-exp-name-strip h3 {
  color: #fff;
  font-size: 0.98rem;
  margin: 0;
}

/* ==========================================================================
   Tour Packages — card grid
   ========================================================================== */
.lg-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .lg-package-grid { grid-template-columns: 1fr; }
}

.lg-package-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.lg-package-card.is-popular {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.lg-package-media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.lg-package-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lg-package-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.lg-package-badge.is-popular {
  background: var(--color-primary);
  color: #fff;
}

.lg-package-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.lg-package-body h3 {
  margin: 0;
  font-size: 1.1rem;
}

.lg-package-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.lg-package-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.lg-package-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-light);
}

.lg-package-body > p {
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0;
}

.lg-package-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   8. Deals & Offers — Countdown banner (#9)
   ========================================================================== */
.lg-deal-banner {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
  background-size: 200% 200%;
  animation: lg-deal-shift 8s ease infinite;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@keyframes lg-deal-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-deal-banner { animation: none; }
}

.lg-deal-copy h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.3rem;
}

.lg-deal-copy p {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
}

.lg-countdown {
  display: flex;
  gap: 10px;
}

.lg-countdown-unit {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  min-width: 62px;
}

.lg-countdown-unit strong {
  display: block;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.lg-countdown-unit span {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.lg-deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .lg-deal-grid { grid-template-columns: 1fr; }
}

.lg-deal-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.lg-deal-card h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--color-primary);
}

.lg-deal-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   9. Guest Reviews — Drag carousel (#10) + count-up (#24)
   ========================================================================== */
.lg-reviews-wrap {
  position: relative;
}

.lg-reviews-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.lg-reviews-track::-webkit-scrollbar { display: none; }
.lg-reviews-track.is-dragging { cursor: grabbing; }

.lg-review-card {
  flex: 0 0 min(360px, 85vw);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.lg-review-card .quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-steel-dark);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.lg-review-card blockquote {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
}

.lg-review-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lg-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.lg-review-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}

.lg-review-place {
  color: var(--color-text-muted);
  font-weight: 400;
}

.lg-review-stars {
  color: var(--color-star);
  font-size: 0.85rem;
}

.lg-review-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-4);
}

.lg-review-dots button {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  border: none;
  padding: 0;
  transition: width 250ms var(--ease-premium), background 250ms ease;
  cursor: pointer;
}

.lg-review-dots button.is-active {
  width: 24px;
  background: var(--color-primary);
}

/* ==========================================================================
   10. Travel Guides — Sticky scroll editorial (#11)
   ========================================================================== */
.lg-guides {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .lg-guides {
    grid-template-columns: 1fr 1fr;
  }
}

.lg-guides-sticky {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

@media (min-width: 900px) {
  .lg-guides-sticky {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
  }
}

.lg-guides-sticky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lg-guide-item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  opacity: 0.4;
  transition: opacity 400ms ease;
}

.lg-guide-item:first-child { padding-top: 0; }
.lg-guide-item:last-child { border-bottom: none; }

.lg-guide-item.is-active {
  opacity: 1;
}

.lg-guide-item h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--space-2);
}

.lg-guide-item p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.lg-guide-item a {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   11. WhatsApp Booking Promo — Card stack (#21) + magnetic CTA (#23)
   ========================================================================== */
.lg-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .lg-promo {
    grid-template-columns: 1fr 380px;
  }
}

.lg-promo-copy h2 { margin-top: 0; }

.lg-promo-list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.lg-promo-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--color-text);
}

.lg-promo-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.lg-stack {
  position: relative;
  height: 320px;
}

.lg-stack-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 220px;
  height: 300px;
  background: #fff;
  border-radius: 22px;
  border: 6px solid var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  transition: transform 500ms var(--ease-premium);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lg-stack-card:nth-child(1) { transform: rotate(-8deg) translateX(-26px); z-index: 1; }
.lg-stack-card:nth-child(2) { transform: rotate(0deg) translateX(0); z-index: 2; }
.lg-stack-card:nth-child(3) { transform: rotate(8deg) translateX(26px); z-index: 1; }

.lg-stack.is-fanned .lg-stack-card:nth-child(1) { transform: rotate(-12deg) translateX(-44px) translateY(-6px); }
.lg-stack.is-fanned .lg-stack-card:nth-child(3) { transform: rotate(12deg) translateX(44px) translateY(-6px); }

.lg-chat-bubble {
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 0.68rem;
  line-height: 1.35;
  max-width: 88%;
}

.lg-chat-bubble.in {
  align-self: flex-start;
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-bottom-left-radius: 2px;
}

.lg-chat-bubble.out {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}

/* Magnetic button wrapper — JS applies inline transform */
.lg-magnetic {
  display: inline-flex;
  transition: transform 150ms ease-out;
}

/* ==========================================================================
   12. FAQ — reuses styles.css's .faq-list/.faq-item (same as the homepage);
   only the heading centering is added here, scoped to this page.
   ========================================================================== */
#faq .section-heading {
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   13. Final CTA
   ========================================================================== */
.lg-final-cta {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  text-align: center;
}

.lg-final-cta h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: 0 0 var(--space-3);
}

.lg-final-cta p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
}

.lg-final-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Sticky mobile CTA bar (#19) — page-specific, mirrors main.js pattern
   ========================================================================== */
.lg-mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 10px var(--space-3);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 300ms var(--ease-premium);
}

.lg-mobile-cta-bar.is-visible {
  transform: translateY(0);
}

.lg-mobile-cta-bar .btn {
  flex: 1;
  min-height: 46px;
}

@media (min-width: 900px) {
  .lg-mobile-cta-bar { display: none; }
}

/* ==========================================================================
   Progress-linked section dots (#16, desktop only)
   ========================================================================== */
.lg-section-dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 80;
}

@media (min-width: 1200px) {
  .lg-section-dots { display: flex; }
}

.lg-section-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}

.lg-section-dots button.is-active {
  background: var(--color-primary);
  transform: scale(1.4);
}

/* ==========================================================================
   Shared section-scroll offset (accounts for sticky header)
   ========================================================================== */
main section[id] {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* ==========================================================================
   Merged from css/villas.css — shared stylesheet consolidation
   ========================================================================== */
/* ==========================================================================
   Villas in Kodaikanal — page-specific styles
   Built on top of styles.css tokens (colors, spacing, radius, shadow, type).
   All selectors namespaced "vl-" so nothing here touches index.html or
   any other service page. Same 25-pattern design system as hotels.css —
   content and copy below are unique to this property type.
   ========================================================================== */

:root {
  --vl-overlay: linear-gradient(180deg, rgba(16, 62, 78, 0.55) 0%, rgba(16, 62, 78, 0.72) 55%, rgba(16, 62, 78, 0.88) 100%);
}

/* ==========================================================================
   Global reveal system — opacity + translateY, staggered by JS.
   Progressive enhancement: [data-reveal] content is fully visible by
   default. Only once html.js (set synchronously in <head>, before this
   stylesheet can even be blamed for a flash) confirms JS is running does
   the hidden-until-scrolled state apply — so a blocked/broken/slow script
   never leaves real content permanently invisible.
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-premium), transform 600ms var(--ease-premium);
  will-change: opacity, transform;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   1. Hero — Split-Search Hero (#1)
   ========================================================================== */
.vl-hero {
  position: relative;
  min-height: 462px;
  display: flex;
  align-items: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  overflow: hidden;
  isolation: isolate;
}

.vl-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.vl-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.vl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--vl-overlay);
  z-index: -1;
}

.vl-hero-inner {
  width: 100%;
  display: grid;
  gap: var(--space-6);
}

.vl-hero-copy {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  color: #fff;
}

.vl-hero-copy .eyebrow {
  color: var(--color-highlight);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.85rem;
  margin: 0 0 var(--space-5);
}

.vl-hero-copy h1 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--space-3);
  color: #fff;
}

.vl-hero-copy .vl-hero-subhead {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-5);
  max-width: 54ch;
  margin-inline: auto;
}

/* Pull the search card up over the hero photo's bottom edge instead of
   leaving a plain white gap between the photo and the card — overrides
   styles.css's smaller positive top margin, scoped to this page only
   since index.html never loads this stylesheet. The card itself is only
   ~326px wide and centered, so on narrow viewports its negative margins
   leave a band on the left/right edges taller than the card can cover;
   without a matching fill there, raw white page background shows through
   between the photo and the stat strip below. var(--color-primary-dark)
   matches .vl-stat-strip's own background, so that flanking band reads as
   a continuation of the strip instead of a gap. */
.hero-search-wrap {
  margin-top: var(--space-3);
}

@media (max-width: 640px) {
  .vl-hero {
    align-items: stretch;
  }
}

/* ==========================================================================
   2. Trust / Stat strip (#2) + Marquee (#13)
   ========================================================================== */
.vl-stat-strip {
  padding-block: var(--space-6);
  background: var(--color-primary-dark);
  color: #fff;
}

.vl-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.vl-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  color: var(--color-highlight);
}

.vl-stat-label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .vl-stat-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-5);
  }
}

.vl-marquee {
  margin-top: var(--space-5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.vl-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-6);
  animation: vl-marquee 28s linear infinite;
}

.vl-marquee:hover .vl-marquee-track {
  animation-play-state: paused;
}

.vl-marquee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.vl-marquee-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-highlight);
  flex-shrink: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .vl-marquee-track { animation: none; }
}

/* ==========================================================================
   3. Why Choose a Hotel — photo-backed bento tiles (#14)
   ========================================================================== */
.vl-benefit-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--space-4);
  height: 460px;
}

.vl-benefit-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.vl-benefit-tile.is-large {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.vl-benefit-tile:not(.is-large):nth-of-type(2) { grid-column: 2; grid-row: 1; }
.vl-benefit-tile:not(.is-large):nth-of-type(3) { grid-column: 2; grid-row: 2; }
.vl-benefit-tile:not(.is-large):nth-of-type(4) { grid-column: 2; grid-row: 3; }

.vl-benefit-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-benefit-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.92) 0%, rgba(16, 62, 78, 0.55) 55%, rgba(16, 62, 78, 0.15) 100%);
}

.vl-benefit-tile-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  color: #fff;
}

.vl-benefit-tile.is-large .vl-benefit-tile-body {
  padding: var(--space-5);
}

.vl-benefit-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vl-benefit-icon svg {
  width: 20px;
  height: 20px;
}

.vl-benefit-tile.is-large .vl-benefit-icon {
  width: 48px;
  height: 48px;
}

.vl-benefit-tile.is-large .vl-benefit-icon svg {
  width: 24px;
  height: 24px;
}

.vl-benefit-tile-body h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: #fff;
}

.vl-benefit-tile.is-large .vl-benefit-tile-body h3 {
  font-size: 1.3rem;
}

.vl-benefit-tile-body p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.45;
}

.vl-benefit-tile.is-large .vl-benefit-tile-body p {
  font-size: 0.95rem;
  max-width: 42ch;
}

@media (max-width: 900px) {
  .vl-benefit-bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .vl-benefit-tile.is-large {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
  /* Same specificity as the desktop placement rules above, so source
     order (this comes later) decides the winner without needing !important */
  .vl-benefit-tile:not(.is-large):nth-of-type(2),
  .vl-benefit-tile:not(.is-large):nth-of-type(3),
  .vl-benefit-tile:not(.is-large):nth-of-type(4) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 7;
  }
}

/* ==========================================================================
   4. Featured Hotels — static 3-tier grid (Standard/Premium/Luxury) +
   Expandable card (#4) + room-type toggle (#17)
   ========================================================================== */
.vl-hotels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .vl-hotels-grid {
    grid-template-columns: 1fr;
  }
}

.vl-hotel-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.vl-hotel-price {
  margin: 0;
  font-weight: 600;
  color: var(--color-primary);
}

.vl-hotel-price strong {
  font-size: 1.2rem;
}

.vl-hotel-price span {
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.vl-hotel-media {
  position: relative;
  aspect-ratio: 4 / 3;
}

.vl-hotel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-hotel-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: var(--color-highlight);
  color: var(--color-highlight-text);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.vl-hotel-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.vl-hotel-body h3 {
  margin: 0;
  font-size: 1.15rem;
}

.vl-hotel-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.vl-hotel-teaser {
  font-size: 0.92rem;
  color: var(--color-text);
  margin: 0;
}

/* Expandable accordion (native <details>) */
.vl-hotel-details {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.vl-hotel-details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.vl-hotel-details summary::-webkit-details-marker {
  display: none;
}

.vl-hotel-details summary .vl-chevron {
  width: 18px;
  height: 18px;
  transition: transform 250ms var(--ease-premium);
}

.vl-hotel-details[open] summary .vl-chevron {
  transform: rotate(180deg);
}

.vl-hotel-details-panel {
  overflow: hidden;
  height: 0;
  transition: height 300ms var(--ease-premium);
}

.vl-hotel-details-panel p {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  padding-top: var(--space-3);
  margin: 0;
}

.vl-hotel-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-3);
}

.vl-hotel-cta .vl-hotel-reserve {
  width: 100%;
  min-height: 44px;
  font-size: 0.9rem;
}

.vl-hotel-call-link {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.vl-hotel-call-link:hover {
  color: var(--color-primary);
}

/* ==========================================================================
   5. How Booking Works — Zig-zag step timeline (#6)
   ========================================================================== */
.vl-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}

.vl-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  z-index: 0;
}

.vl-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.vl-step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  transform: scale(0);
  transition: transform 400ms var(--ease-premium);
}

.vl-step.is-visible .vl-step-icon {
  transform: scale(1);
}

.vl-step h3 {
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.vl-step p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .vl-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .vl-steps::before {
    top: 0;
    bottom: 0;
    left: 27px;
    width: 2px;
    height: auto;
    right: auto;
    background: repeating-linear-gradient(180deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  }
  /* 3 children (icon, h3, p) auto-placed into a 2-column grid wrap the 3rd
     item — the paragraph — onto row 2 of the 56px icon column instead of
     row 2 of the text column, squashing it to a 56px-wide sliver. Explicit
     placement keeps the icon spanning both rows in column 1 and both text
     children in column 2. */
  .vl-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-3);
    text-align: left;
    align-items: start;
  }
  .vl-step-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }
  .vl-step h3 {
    grid-column: 2;
    grid-row: 1;
  }
  .vl-step p {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ==========================================================================
   6. Why Choose Us — Flip cards (#7)
   ========================================================================== */
.vl-flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .vl-flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .vl-flip-grid { grid-template-columns: 1fr; }
}

.vl-flip-card {
  perspective: 1200px;
  height: 190px;
}

.vl-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 500ms var(--ease-premium);
  transform-style: preserve-3d;
}

.vl-flip-card:hover .vl-flip-inner,
.vl-flip-card.is-flipped .vl-flip-inner {
  transform: rotateY(180deg);
}

.vl-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
}

.vl-flip-front {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

.vl-flip-front svg { width: 34px; height: 34px; }

.vl-flip-front span {
  font-weight: 700;
  font-size: 0.98rem;
}

.vl-flip-back {
  background: var(--color-primary);
  color: #fff;
  transform: rotateY(180deg);
  font-size: 0.85rem;
  line-height: 1.45;
}

.vl-flip-back p {
  color: #fff;
}

/* ==========================================================================
   7. Experiences & Activities — Tabs (#8) + hover-reveal (#5)
   ========================================================================== */
.vl-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.vl-tab-btn {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
}

.vl-tab-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.vl-tab-panels {
  position: relative;
  min-height: 420px;
}

.vl-tab-panel {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.vl-tab-panel.is-active {
  display: grid;
  animation: vl-tab-in 320ms var(--ease-premium);
}

@keyframes vl-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .vl-tab-panel { grid-template-columns: 1fr; }
  .vl-tab-panels { min-height: 0; }
}

.vl-exp-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-sm);
}

.vl-exp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-exp-panel {
  position: absolute;
  inset-inline: 0;
  bottom: -100%;
  padding: var(--space-4);
  background: rgba(16, 62, 78, 0.88);
  color: #fff;
  transition: bottom 300ms ease;
}

.vl-exp-card:hover .vl-exp-panel,
.vl-exp-card.is-active .vl-exp-panel {
  bottom: 0;
}

.vl-exp-panel h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: #fff;
}

.vl-exp-panel p {
  font-size: 0.85rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.vl-exp-name-strip {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.85), transparent);
}

.vl-exp-card:hover .vl-exp-name-strip,
.vl-exp-card.is-active .vl-exp-name-strip {
  opacity: 0;
}

.vl-exp-name-strip h3 {
  color: #fff;
  font-size: 0.98rem;
  margin: 0;
}

/* ==========================================================================
   Tour Packages — card grid
   ========================================================================== */
.vl-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .vl-package-grid { grid-template-columns: 1fr; }
}

.vl-package-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.vl-package-card.is-popular {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.vl-package-media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.vl-package-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-package-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.vl-package-badge.is-popular {
  background: var(--color-primary);
  color: #fff;
}

.vl-package-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.vl-package-body h3 {
  margin: 0;
  font-size: 1.1rem;
}

.vl-package-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.vl-package-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.vl-package-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-light);
}

.vl-package-body > p {
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0;
}

.vl-package-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   8. Deals & Offers — Countdown banner (#9)
   ========================================================================== */
.vl-deal-banner {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
  background-size: 200% 200%;
  animation: vl-deal-shift 8s ease infinite;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@keyframes vl-deal-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .vl-deal-banner { animation: none; }
}

.vl-deal-copy h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.3rem;
}

.vl-deal-copy p {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
}

.vl-countdown {
  display: flex;
  gap: 10px;
}

.vl-countdown-unit {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  min-width: 62px;
}

.vl-countdown-unit strong {
  display: block;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.vl-countdown-unit span {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.vl-deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .vl-deal-grid { grid-template-columns: 1fr; }
}

.vl-deal-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.vl-deal-card h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--color-primary);
}

.vl-deal-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   9. Guest Reviews — Drag carousel (#10) + count-up (#24)
   ========================================================================== */
.vl-reviews-wrap {
  position: relative;
}

.vl-reviews-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.vl-reviews-track::-webkit-scrollbar { display: none; }
.vl-reviews-track.is-dragging { cursor: grabbing; }

.vl-review-card {
  flex: 0 0 min(360px, 85vw);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.vl-review-card .quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-steel-dark);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.vl-review-card blockquote {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
}

.vl-review-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vl-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.vl-review-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}

.vl-review-place {
  color: var(--color-text-muted);
  font-weight: 400;
}

.vl-review-stars {
  color: var(--color-star);
  font-size: 0.85rem;
}

.vl-review-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-4);
}

.vl-review-dots button {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  border: none;
  padding: 0;
  transition: width 250ms var(--ease-premium), background 250ms ease;
  cursor: pointer;
}

.vl-review-dots button.is-active {
  width: 24px;
  background: var(--color-primary);
}

/* ==========================================================================
   10. Travel Guides — Sticky scroll editorial (#11)
   ========================================================================== */
.vl-guides {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .vl-guides {
    grid-template-columns: 1fr 1fr;
  }
}

.vl-guides-sticky {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

@media (min-width: 900px) {
  .vl-guides-sticky {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
  }
}

.vl-guides-sticky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vl-guide-item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  opacity: 0.4;
  transition: opacity 400ms ease;
}

.vl-guide-item:first-child { padding-top: 0; }
.vl-guide-item:last-child { border-bottom: none; }

.vl-guide-item.is-active {
  opacity: 1;
}

.vl-guide-item h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--space-2);
}

.vl-guide-item p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.vl-guide-item a {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   11. WhatsApp Booking Promo — Card stack (#21) + magnetic CTA (#23)
   ========================================================================== */
.vl-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .vl-promo {
    grid-template-columns: 1fr 380px;
  }
}

.vl-promo-copy h2 { margin-top: 0; }

.vl-promo-list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.vl-promo-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--color-text);
}

.vl-promo-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.vl-stack {
  position: relative;
  height: 320px;
}

.vl-stack-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 220px;
  height: 300px;
  background: #fff;
  border-radius: 22px;
  border: 6px solid var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  transition: transform 500ms var(--ease-premium);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vl-stack-card:nth-child(1) { transform: rotate(-8deg) translateX(-26px); z-index: 1; }
.vl-stack-card:nth-child(2) { transform: rotate(0deg) translateX(0); z-index: 2; }
.vl-stack-card:nth-child(3) { transform: rotate(8deg) translateX(26px); z-index: 1; }

.vl-stack.is-fanned .vl-stack-card:nth-child(1) { transform: rotate(-12deg) translateX(-44px) translateY(-6px); }
.vl-stack.is-fanned .vl-stack-card:nth-child(3) { transform: rotate(12deg) translateX(44px) translateY(-6px); }

.vl-chat-bubble {
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 0.68rem;
  line-height: 1.35;
  max-width: 88%;
}

.vl-chat-bubble.in {
  align-self: flex-start;
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-bottom-left-radius: 2px;
}

.vl-chat-bubble.out {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}

/* Magnetic button wrapper — JS applies inline transform */
.vl-magnetic {
  display: inline-flex;
  transition: transform 150ms ease-out;
}

/* ==========================================================================
   12. FAQ — reuses styles.css's .faq-list/.faq-item (same as the homepage);
   only the heading centering is added here, scoped to this page.
   ========================================================================== */
#faq .section-heading {
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   13. Final CTA
   ========================================================================== */
.vl-final-cta {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  text-align: center;
}

.vl-final-cta h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: 0 0 var(--space-3);
}

.vl-final-cta p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
}

.vl-final-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Sticky mobile CTA bar (#19) — page-specific, mirrors main.js pattern
   ========================================================================== */
.vl-mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 10px var(--space-3);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 300ms var(--ease-premium);
}

.vl-mobile-cta-bar.is-visible {
  transform: translateY(0);
}

.vl-mobile-cta-bar .btn {
  flex: 1;
  min-height: 46px;
}

@media (min-width: 900px) {
  .vl-mobile-cta-bar { display: none; }
}

/* ==========================================================================
   Progress-linked section dots (#16, desktop only)
   ========================================================================== */
.vl-section-dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 80;
}

@media (min-width: 1200px) {
  .vl-section-dots { display: flex; }
}

.vl-section-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}

.vl-section-dots button.is-active {
  background: var(--color-primary);
  transform: scale(1.4);
}

/* ==========================================================================
   Shared section-scroll offset (accounts for sticky header)
   ========================================================================== */
main section[id] {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* ==========================================================================
   Merged from css/homestay.css — shared stylesheet consolidation
   Rebuilt to follow the same 25-pattern shape as .ht-* and .vl-* (glass hero,
   bento benefit grid, featured-property card grid, tabs, tour packages,
   deals countdown, drag-carousel reviews, sticky-scroll guides, WhatsApp
   promo stack, FAQ, final CTA). All selectors namespaced "hs-".
   ========================================================================== */
:root {
  --hs-overlay: linear-gradient(180deg, rgba(16, 62, 78, 0.55) 0%, rgba(16, 62, 78, 0.72) 55%, rgba(16, 62, 78, 0.88) 100%);
}

/* ==========================================================================
   1. Hero — Split-Search Hero (#1)
   ========================================================================== */
.hs-hero {
  position: relative;
  min-height: 462px;
  display: flex;
  align-items: center;
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  overflow: hidden;
  isolation: isolate;
}

.hs-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hs-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
}

.hs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hs-overlay);
  z-index: -1;
}

.hs-hero-inner {
  width: 100%;
  display: grid;
  gap: var(--space-6);
}

.hs-hero-copy {
  max-width: 1040px;
  margin-inline: auto;
  text-align: center;
  color: #fff;
}

.hs-hero-copy .eyebrow {
  color: var(--color-highlight);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  font-size: 0.85rem;
  margin: 0 0 var(--space-5);
}

.hs-hero-copy h1 {
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 auto var(--space-3);
  color: #fff;
}

.hs-hero-copy .hs-hero-subhead {
  font-size: clamp(0.95rem, 1.3vw, 1.05rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-5);
  max-width: 54ch;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .hs-hero {
    align-items: stretch;
  }
}

/* ==========================================================================
   2. Trust / Stat strip (#2) + Marquee (#13)
   ========================================================================== */
.hs-stat-strip {
  padding-block: var(--space-6);
  background: var(--color-primary-dark);
  color: #fff;
}

.hs-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  text-align: center;
}

.hs-stat-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-variant-numeric: tabular-nums;
  color: var(--color-highlight);
}

.hs-stat-label {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 4px;
}

@media (max-width: 640px) {
  .hs-stat-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-5);
  }
}

.hs-marquee {
  margin-top: var(--space-5);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hs-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-6);
  animation: hs-marquee 28s linear infinite;
}

.hs-marquee:hover .hs-marquee-track {
  animation-play-state: paused;
}

.hs-marquee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
}

.hs-marquee-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-highlight);
  flex-shrink: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .hs-marquee-track { animation: none; }
}

/* ==========================================================================
   3. Why Choose a Homestay — photo-backed bento tiles (#14)
   ========================================================================== */
.hs-benefit-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--space-4);
  height: 460px;
}

.hs-benefit-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.hs-benefit-tile.is-large {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.hs-benefit-tile:not(.is-large):nth-of-type(2) { grid-column: 2; grid-row: 1; }
.hs-benefit-tile:not(.is-large):nth-of-type(3) { grid-column: 2; grid-row: 2; }
.hs-benefit-tile:not(.is-large):nth-of-type(4) { grid-column: 2; grid-row: 3; }

.hs-benefit-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs-benefit-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.92) 0%, rgba(16, 62, 78, 0.55) 55%, rgba(16, 62, 78, 0.15) 100%);
}

.hs-benefit-tile-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  color: #fff;
}

.hs-benefit-tile.is-large .hs-benefit-tile-body {
  padding: var(--space-5);
}

.hs-benefit-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hs-benefit-icon svg {
  width: 20px;
  height: 20px;
}

.hs-benefit-tile.is-large .hs-benefit-icon {
  width: 48px;
  height: 48px;
}

.hs-benefit-tile.is-large .hs-benefit-icon svg {
  width: 24px;
  height: 24px;
}

.hs-benefit-tile-body h3 {
  font-size: 1rem;
  margin: 0 0 4px;
  color: #fff;
}

.hs-benefit-tile.is-large .hs-benefit-tile-body h3 {
  font-size: 1.3rem;
}

.hs-benefit-tile-body p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  line-height: 1.45;
}

.hs-benefit-tile.is-large .hs-benefit-tile-body p {
  font-size: 0.95rem;
  max-width: 42ch;
}

@media (max-width: 900px) {
  .hs-benefit-bento {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    height: auto;
  }
  .hs-benefit-tile.is-large {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
  .hs-benefit-tile:not(.is-large):nth-of-type(2),
  .hs-benefit-tile:not(.is-large):nth-of-type(3),
  .hs-benefit-tile:not(.is-large):nth-of-type(4) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 7;
  }
}

/* ==========================================================================
   4. Featured Homestays — bedroom-size grid, duplicated from the homepage's
   .featured-cottages / .property-card pattern (css/styles.css) under the
   hs- namespace so this property type owns its own copy of the rules.
   ========================================================================== */
.hs-featured-homestays-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .hs-featured-homestays-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .hs-featured-homestays-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.hs-featured-homestay-card {
  flex-basis: auto;
}

.hs-property-card {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-resting);
  transition: transform 250ms var(--ease-premium), box-shadow 250ms var(--ease-premium);
}

.hs-property-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.hs-property-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.hs-property-card-body {
  flex: 1;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hs-property-card-body h3 {
  margin-bottom: 0;
}

.hs-property-meta {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  margin-bottom: 0;
}

.hs-property-card-actions {
  margin-top: auto;
  padding-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hs-property-book-btn {
  flex: 1;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  font-size: 0.9rem;
}

.hs-property-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  color: var(--color-accent);
  transition: background-color 200ms var(--ease-premium), border-color 200ms var(--ease-premium);
}

.hs-property-call-btn svg {
  width: 18px;
  height: 18px;
}

.hs-property-call-btn:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-accent);
}

/* ==========================================================================
   5. How Booking Works — Zig-zag step timeline (#6)
   ========================================================================== */
.hs-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  counter-reset: step;
}

.hs-steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  z-index: 0;
}

.hs-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hs-step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-3);
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  transform: scale(0);
  transition: transform 400ms var(--ease-premium);
}

.hs-step.is-visible .hs-step-icon {
  transform: scale(1);
}

.hs-step h3 {
  font-size: 1.1rem;
  margin: 0 0 6px;
}

.hs-step p {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .hs-steps {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .hs-steps::before {
    top: 0;
    bottom: 0;
    left: 27px;
    width: 2px;
    height: auto;
    right: auto;
    background: repeating-linear-gradient(180deg, var(--color-steel-dark) 0 10px, transparent 10px 18px);
  }
  .hs-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: var(--space-1) var(--space-3);
    text-align: left;
    align-items: start;
  }
  .hs-step-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }
  .hs-step h3 {
    grid-column: 2;
    grid-row: 1;
  }
  .hs-step p {
    grid-column: 2;
    grid-row: 2;
  }
}

/* ==========================================================================
   6. Why Choose Us — Flip cards (#7)
   ========================================================================== */
.hs-flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .hs-flip-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .hs-flip-grid { grid-template-columns: 1fr; }
}

.hs-flip-card {
  perspective: 1200px;
  height: 190px;
}

.hs-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 500ms var(--ease-premium);
  transform-style: preserve-3d;
}

.hs-flip-card:hover .hs-flip-inner,
.hs-flip-card.is-flipped .hs-flip-inner {
  transform: rotateY(180deg);
}

.hs-flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
}

.hs-flip-front {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
}

.hs-flip-front svg { width: 34px; height: 34px; }

.hs-flip-front span {
  font-weight: 700;
  font-size: 0.98rem;
}

.hs-flip-back {
  background: var(--color-primary);
  color: #fff;
  transform: rotateY(180deg);
  font-size: 0.85rem;
  line-height: 1.45;
}

.hs-flip-back p {
  color: #fff;
}

/* ==========================================================================
   7. What's Around Your Homestay — Tabs (#8) + hover-reveal (#5)
   ========================================================================== */
.hs-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.hs-tab-btn {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 44px;
}

.hs-tab-btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.hs-tab-panels {
  position: relative;
  min-height: 420px;
}

.hs-tab-panel {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.hs-tab-panel.is-active {
  display: grid;
  animation: hs-tab-in 320ms var(--ease-premium);
}

@keyframes hs-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .hs-tab-panel { grid-template-columns: 1fr; }
  .hs-tab-panels { min-height: 0; }
}

.hs-exp-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-sm);
}

.hs-exp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs-exp-panel {
  position: absolute;
  inset-inline: 0;
  bottom: -100%;
  padding: var(--space-4);
  background: rgba(16, 62, 78, 0.88);
  color: #fff;
  transition: bottom 300ms ease;
}

.hs-exp-card:hover .hs-exp-panel,
.hs-exp-card.is-active .hs-exp-panel {
  bottom: 0;
}

.hs-exp-panel h3 {
  font-size: 1rem;
  margin: 0 0 6px;
  color: #fff;
}

.hs-exp-panel p {
  font-size: 0.85rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.45;
}

.hs-exp-name-strip {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--space-3);
  background: linear-gradient(0deg, rgba(16, 62, 78, 0.85), transparent);
}

.hs-exp-card:hover .hs-exp-name-strip,
.hs-exp-card.is-active .hs-exp-name-strip {
  opacity: 0;
}

.hs-exp-name-strip h3 {
  color: #fff;
  font-size: 0.98rem;
  margin: 0;
}

/* ==========================================================================
   Tour Packages — card grid
   ========================================================================== */
.hs-package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .hs-package-grid { grid-template-columns: 1fr; }
}

.hs-package-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.hs-package-card.is-popular {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.hs-package-media {
  position: relative;
  aspect-ratio: 16 / 10;
}

.hs-package-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs-package-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

.hs-package-badge.is-popular {
  background: var(--color-primary);
  color: #fff;
}

.hs-package-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.hs-package-body h3 {
  margin: 0;
  font-size: 1.1rem;
}

.hs-package-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.hs-package-list li {
  position: relative;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.hs-package-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-light);
}

.hs-package-body > p {
  font-size: 0.9rem;
  color: var(--color-text);
  margin: 0;
}

.hs-package-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

/* ==========================================================================
   8. Deals & Offers — Countdown banner (#9)
   ========================================================================== */
.hs-deal-banner {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-5);
  background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-primary) 100%);
  background-size: 200% 200%;
  animation: hs-deal-shift 8s ease infinite;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@keyframes hs-deal-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hs-deal-banner { animation: none; }
}

.hs-deal-copy h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.3rem;
}

.hs-deal-copy p {
  margin: 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.92rem;
}

.hs-countdown {
  display: flex;
  gap: 10px;
}

.hs-countdown-unit {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  text-align: center;
  min-width: 62px;
}

.hs-countdown-unit strong {
  display: block;
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

.hs-countdown-unit span {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.hs-deal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

@media (max-width: 768px) {
  .hs-deal-grid { grid-template-columns: 1fr; }
}

.hs-deal-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.hs-deal-card h4 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--color-primary);
}

.hs-deal-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--color-text-muted);
}

/* ==========================================================================
   9. Guest Reviews — Drag carousel (#10) + count-up (#24)
   ========================================================================== */
.hs-reviews-wrap {
  position: relative;
}

.hs-reviews-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.hs-reviews-track::-webkit-scrollbar { display: none; }
.hs-reviews-track.is-dragging { cursor: grabbing; }

.hs-review-card {
  flex: 0 0 min(360px, 85vw);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.hs-review-card .quote-mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  color: var(--color-steel-dark);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.hs-review-card blockquote {
  margin: var(--space-2) 0 var(--space-4);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.55;
}

.hs-review-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hs-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.hs-review-name {
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}

.hs-review-place {
  color: var(--color-text-muted);
  font-weight: 400;
}

.hs-review-stars {
  color: var(--color-star);
  font-size: 0.85rem;
}

.hs-review-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--space-4);
}

.hs-review-dots button {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  border: none;
  padding: 0;
  transition: width 250ms var(--ease-premium), background 250ms ease;
  cursor: pointer;
}

.hs-review-dots button.is-active {
  width: 24px;
  background: var(--color-primary);
}

/* ==========================================================================
   10. Travel Guides — Sticky scroll editorial (#11)
   Uses tall destination-*.webp photos (1122x1402), so the sticky panel
   matches every other page's "tall image" convention with aspect-ratio 4/5.
   ========================================================================== */
.hs-guides {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .hs-guides {
    grid-template-columns: 1fr 1fr;
  }
}

.hs-guides-sticky {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
  .hs-guides-sticky {
    position: sticky;
    top: calc(var(--header-height) + 24px);
    align-self: start;
  }
}

.hs-guides-sticky img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hs-guide-item {
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  opacity: 0.4;
  transition: opacity 400ms ease;
}

.hs-guide-item:first-child { padding-top: 0; }
.hs-guide-item:last-child { border-bottom: none; }

.hs-guide-item.is-active {
  opacity: 1;
}

.hs-guide-item h3 {
  font-size: 1.15rem;
  margin: 0 0 var(--space-2);
}

.hs-guide-item p {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.hs-guide-item a {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   11. WhatsApp Booking Promo — Card stack (#21) + magnetic CTA (#23)
   ========================================================================== */
.hs-promo {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: center;
}

@media (min-width: 900px) {
  .hs-promo {
    grid-template-columns: 1fr 380px;
  }
}

.hs-promo-copy h2 { margin-top: 0; }

.hs-promo-list {
  list-style: none;
  margin: var(--space-4) 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.hs-promo-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--color-text);
}

.hs-promo-list svg {
  width: 20px;
  height: 20px;
  color: var(--color-success);
  flex-shrink: 0;
  margin-top: 2px;
}

.hs-stack {
  position: relative;
  height: 320px;
}

.hs-stack-card {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 220px;
  height: 300px;
  background: #fff;
  border-radius: 22px;
  border: 6px solid var(--color-primary-dark);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  transition: transform 500ms var(--ease-premium);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hs-stack-card:nth-child(1) { transform: rotate(-8deg) translateX(-26px); z-index: 1; }
.hs-stack-card:nth-child(2) { transform: rotate(0deg) translateX(0); z-index: 2; }
.hs-stack-card:nth-child(3) { transform: rotate(8deg) translateX(26px); z-index: 1; }

.hs-stack.is-fanned .hs-stack-card:nth-child(1) { transform: rotate(-12deg) translateX(-44px) translateY(-6px); }
.hs-stack.is-fanned .hs-stack-card:nth-child(3) { transform: rotate(12deg) translateX(44px) translateY(-6px); }

.hs-chat-bubble {
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 0.68rem;
  line-height: 1.35;
  max-width: 88%;
}

.hs-chat-bubble.in {
  align-self: flex-start;
  background: var(--color-bg-alt);
  color: var(--color-text);
  border-bottom-left-radius: 2px;
}

.hs-chat-bubble.out {
  align-self: flex-end;
  background: var(--color-primary);
  color: #fff;
  border-bottom-right-radius: 2px;
}

/* Magnetic button wrapper — JS applies inline transform */
.hs-magnetic {
  display: inline-flex;
  transition: transform 150ms ease-out;
}

/* ==========================================================================
   13. Final CTA
   ========================================================================== */
.hs-final-cta {
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
  color: #fff;
  text-align: center;
}

.hs-final-cta h2 {
  color: #fff;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin: 0 0 var(--space-3);
}

.hs-final-cta p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 56ch;
  margin: 0 auto var(--space-6);
}

.hs-final-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Sticky mobile CTA bar (#19) — page-specific, mirrors main.js pattern
   ========================================================================== */
.hs-mobile-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 10px;
  padding: 10px var(--space-3);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(100%);
  transition: transform 300ms var(--ease-premium);
}

.hs-mobile-cta-bar.is-visible {
  transform: translateY(0);
}

.hs-mobile-cta-bar .btn {
  flex: 1;
  min-height: 46px;
}

@media (min-width: 900px) {
  .hs-mobile-cta-bar { display: none; }
}

/* ==========================================================================
   Progress-linked section dots (#16, desktop only)
   ========================================================================== */
.hs-section-dots {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 10px;
  z-index: 80;
}

@media (min-width: 1200px) {
  .hs-section-dots { display: flex; }
}

.hs-section-dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}

.hs-section-dots button.is-active {
  background: var(--color-primary);
  transform: scale(1.4);
}

/* Homestay keyword sections: each has its own layout */

/* 1. Family: a day on a vertical timeline */
.hs-day-line { list-style: none; margin: 0 auto; padding: 0 0 0 28px; max-width: 680px; position: relative; border-left: 2px solid var(--color-border); }
.hs-day-line li { position: relative; padding: 0 0 var(--space-5) var(--space-4); }
.hs-day-line li::before { content: ""; position: absolute; left: -37px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--st-p, var(--color-primary)); box-shadow: 0 0 0 4px var(--color-bg, #fff); }
.hs-day-time { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: var(--space-1); }
.hs-day-line p { margin: 0; color: var(--color-text-muted); }
.hs-day-link { text-align: center; margin: var(--space-3) 0 0; }
.hs-day-link a { font-weight: 600; color: var(--st-p, var(--color-primary)); }

/* 2. Mountain view: dark statement band */
.hs-vista { background: var(--st-pd, var(--color-primary-dark)); color: #fff; text-align: center; padding: 88px 0; }
.hs-vista h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 var(--space-4); }
.hs-vista .hs-vista-eyebrow { color: #fff; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; opacity: 0.75; margin: 0 0 var(--space-2); }
.hs-vista .hs-vista-big { color: #fff; font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 700; line-height: 1.15; margin: 0 auto var(--space-4); max-width: 18ch; }
.hs-vista .hs-vista-small { color: #fff; max-width: 560px; margin: 0 auto var(--space-4); opacity: 0.88; }
.hs-vista-link { color: #fff; font-weight: 600; border-bottom: 2px solid currentColor; padding-bottom: 2px; }

/* 3. Couples: editorial drop cap with a margin note */
.hs-note-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
@media (min-width: 900px) { .hs-note-grid { grid-template-columns: 2fr 1fr; gap: var(--space-7, 64px); } }
.hs-note-main h2 { color: var(--st-pd, var(--color-text)); margin: 0 0 var(--space-3); }
.hs-note-drop { font-size: 1.05rem; color: var(--color-text-muted); margin: 0 0 var(--space-3); }
.hs-note-drop::first-letter { float: left; font-size: 3.6rem; line-height: 0.9; font-weight: 700; padding: 6px 10px 0 0; color: var(--st-p, var(--color-primary)); }
.hs-note-main a { font-weight: 600; color: var(--st-p, var(--color-primary)); }
.hs-note-side { border-top: 3px solid var(--st-p, var(--color-primary)); padding-top: var(--space-3); font-style: italic; }
.hs-note-side strong { display: block; font-style: normal; margin-bottom: var(--space-1); }
.hs-note-side p { margin: 0; color: var(--color-text-muted); }
.hs-vista .hs-vista-big { border-bottom: 0; }
.hs-vista-eyebrow::after { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; margin: 14px auto 0; background: var(--st-a, #fff); box-shadow: 22px 0 0 var(--st-a, #fff), -22px 0 0 var(--st-a, #fff); }
.hs-vista .hs-vista-eyebrow { margin-bottom: var(--space-5); }
.hs-vista-eyebrow::after { background: #fff; box-shadow: 22px 0 0 #fff, -22px 0 0 #fff; opacity: 0.55; }
@media (max-width: 600px) {
  .hs-day-line { padding-left: 20px; margin-left: 8px; }
  .hs-day-line li { padding-left: var(--space-3); }
  .hs-day-line li::before { left: -29px; }
  .hs-note-drop::first-letter { font-size: 3rem; }
}