/* =========================================================
   UTSAV CAMP SARISKA - Luxury Editorial Stylesheet
   ========================================================= */

:root {
  --c-bg:        #F8F5F0;
  --c-bg-warm:   #EFE7DB;
  --c-paper:     #FFFFFF;
  --c-primary:   #BDA37E;
  --c-sand:      #D8C3A5;
  --c-stone:     #A98E66;
  --c-bark:      #8B7355;
  --c-earth:     #5F4A34;
  --c-ink:       #2B241B;
  --c-muted:     #3F362A;
  --c-line:      rgba(95, 74, 52, 0.18);

  /* Forest green CTA palette */
  --c-forest:      #3D5A48;
  --c-forest-deep: #28402F;

  --ff-serif:  'Playfair Display', 'Times New Roman', serif;
  --ff-sans:   'Fira Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --pad-x:     clamp(24px, 7vw, 130px);
  --pad-y:     clamp(64px, 10vw, 120px);

  /* Premium luxury easings - long, languid */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-image: cubic-bezier(0.77, 0, 0.18, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--ff-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-ink);
  background: var(--c-bg);
  overflow-x: hidden;
}

/* =========================================================
   WILDLIFE CURSOR - small paw glyph + tracking ring.
   Hides on touch devices; only active on fine pointers.
   ========================================================= */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: none; }
  a, button, summary, [role="button"], [role="tab"],
  input[type="submit"], input[type="button"],
  .exp, .journal__feature, .journal__small,
  .info__tile, .spa__tab, .info__faq summary,
  .stay-slider__dot, .t-arrow, .exp__arrow,
  .nav__menu a, .nav__cta, .nav__burger, .to-top { cursor: none; }

  /* Allow text-cursor on text inputs */
  input[type="text"], input[type="email"], input[type="search"],
  textarea { cursor: text; }

  .cursor {
    position: fixed;
    top: 0; left: 0;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    /* Soft sub-frame smoothing between RAF updates */
    transition: opacity .4s var(--ease-out);
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: multiply;
  }
  .cursor.is-dark { mix-blend-mode: screen; }

  .cursor__paw {
    width: 100%;
    height: 100%;
    color: var(--c-earth);
    display: block;
    transition: transform .4s var(--ease-out), color .45s var(--ease-out), opacity .35s var(--ease-out);
    transform-origin: center;
    /* Translucent so text shows through cleanly when the paw passes over it */
    opacity: 0.55;
  }
  .cursor.is-hover .cursor__paw { opacity: 1; }

  /* Ring - separate fixed element so it can lag the paw gracefully */
  .cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(189, 163, 126, 0.35);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    will-change: transform;
    opacity: 0;
    transition: opacity .4s var(--ease-out),
                width .55s var(--ease-out),
                height .55s var(--ease-out),
                border-color .4s var(--ease-out);
  }

  /* Hover state */
  .cursor.is-hover .cursor__paw {
    color: var(--c-primary);
    transform: scale(1.18);
  }
  .cursor.is-hover ~ .cursor-ring,
  .cursor-ring.is-hover {
    opacity: 1;
    width: 72px;
    height: 72px;
    border-color: rgba(189, 163, 126, 0.65);
  }

  /* Dark sections */
  .cursor.is-dark .cursor__paw { color: var(--c-sand); }
  .cursor-ring.is-dark { border-color: rgba(216, 195, 165, 0.55); }

  /* Click squish */
  .cursor.is-down .cursor__paw { transform: scale(0.85); }
  .cursor-ring.is-down { width: 44px; height: 44px; }
}

/* Hide cursor on touch devices */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul { list-style: none; }
em { font-style: italic; font-weight: 400; color: var(--c-bark); }

/* ---------- Typography Primitives ---------- */
.eyebrow {
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-bottom: 36px;
  display: inline-block;
}
.eyebrow--light { color: rgba(255,255,255,0.78); }

.display {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(42px, 6vw, 76px);
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--c-ink);
  margin-bottom: 48px;
}
.display .line { padding-bottom: 0.08em; }
.display--light { color: #fff; }
.display--light em { color: var(--c-sand); }

.h-serif {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.2px;
  margin-bottom: 22px;
}

.num {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: var(--c-stone);
  letter-spacing: 1px;
  margin-bottom: 18px;
}
.num--light { color: rgba(216, 195, 165, 0.95); }

/* =========================================================
   LINE-MASK REVEAL  (curtain-rise effect for text)
   ========================================================= */
.line {
  display: block;
  overflow: hidden;
  position: relative;
}
.line__inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1.4s var(--ease-out);
  will-change: transform;
}
.is-revealed > .line__inner,
.line.is-revealed > .line__inner {
  transform: translateY(0);
}

/* Inline em inside a line - keep visible */
.line em { display: inline-block; }

/* Soft fade reveal (CTAs, lists, link arrows) */
.reveal-fade {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
}
.reveal-fade.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   IMG-REVEAL  (clip-path curtain image entrance)
   ========================================================= */
.img-reveal {
  position: relative;
  overflow: hidden;
  display: block;
}
.img-reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path 1.8s var(--ease-image),
    transform 2.4s var(--ease-out);
  will-change: transform, clip-path;
}
.img-reveal.is-revealed img {
  clip-path: inset(0 0 0% 0);
  transform: scale(1);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 40px;
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: all .6s var(--ease-out);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn--primary {
  background: var(--c-forest);
  color: #fff;
  border-color: var(--c-forest);
}
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-forest-deep);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .7s var(--ease-in-out);
  z-index: -1;
}
.btn--primary:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--primary:hover { border-color: var(--c-forest-deep); letter-spacing: 0.36em; }

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}
.btn--ghost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .7s var(--ease-in-out);
  z-index: -1;
}
.btn--ghost:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--ghost:hover { border-color: #fff; letter-spacing: 0.36em; }

/* ---------- Link arrow ---------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-earth);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-line);
  margin-top: 40px;
  transition: all .5s var(--ease-out);
  position: relative;
}
.link-arrow::after {
  content: '→';
  font-size: 14px;
  letter-spacing: 0;
  transition: transform .5s var(--ease-out);
}
.link-arrow:hover { color: var(--c-primary); border-color: var(--c-primary); }
.link-arrow:hover::after { transform: translateX(8px); }
.link-arrow--light { color: var(--c-sand); border-color: rgba(216,195,165,0.35); }
.link-arrow--light:hover { color: #fff; border-color: #fff; }

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 100;
  padding: 28px var(--pad-x);
  transition: all .6s var(--ease-out);
}
.nav--scrolled {
  background: rgba(248, 245, 240, 0.94);
  padding: 14px var(--pad-x);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--c-line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.nav__logo img {
  height: 88px;
  width: auto;
  transition: all .6s var(--ease-out);
  filter: brightness(0) invert(1);
}
.nav--scrolled .nav__logo img { filter: brightness(0); height: 64px; }

.nav__menu {
  display: flex;
  gap: 38px;
  flex: 1;
  justify-content: center;
}
.nav__menu a {
  font-size: 15px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  padding: 6px 0;
  transition: color .4s var(--ease-out);
}
.nav__menu a::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: all .5s var(--ease-out);
  transform: translateX(-50%);
}
.nav__menu a:hover::after { width: 100%; }
.nav--scrolled .nav__menu a { color: var(--c-ink); }

.nav__cta {
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
  padding: 13px 26px;
  border: 1px solid rgba(255,255,255,0.55);
  transition: all .5s var(--ease-out);
}
.nav__cta:hover {
  background: var(--c-forest);
  border-color: var(--c-forest);
}
.nav--scrolled .nav__cta {
  color: #fff;
  background: var(--c-forest);
  border-color: var(--c-forest);
}
.nav--scrolled .nav__cta:hover { background: var(--c-forest-deep); border-color: var(--c-forest-deep); }

.nav__burger {
  display: none;
  width: 32px; height: 24px;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
}
.nav__burger span {
  display: block;
  width: 100%; height: 1px;
  background: #fff;
  transition: all .4s var(--ease-out);
}
.nav--scrolled .nav__burger span { background: var(--c-ink); }
.nav__burger.is-open span:first-child { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:last-child { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0;
  background: var(--c-bg);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 28px;
  text-align: center;
}
.mobile-menu a {
  font-family: var(--ff-serif);
  font-size: 28px;
  color: var(--c-ink);
}
.mobile-menu__cta {
  margin-top: 24px;
  font-size: 12px !important;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-primary) !important;
  font-family: var(--ff-sans) !important;
}

/* =========================================================
   1. HERO
   ========================================================= */
.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 var(--pad-x);
  color: #fff;
}
.hero__media {
  position: absolute;
  inset: -10% 0;
  z-index: 1;
  will-change: transform;
}
.hero__media img,
.hero__media video,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero__video {
  animation: heroFadeIn 1.8s var(--ease-out) both;
  transform-origin: center 55%;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: scale(1); }
}
.hero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.55) 100%);
  /* Decorative only - let pointer events reach the media beneath, so the
     hero can be inspected (and its video controls reached) as normal. */
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 780px;
}
.hero__title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(48px, 7.4vw, 102px);
  line-height: 1.02;
  letter-spacing: -1.2px;
  margin-bottom: 40px;
}
.hero__title em {
  color: var(--c-sand);
  font-style: italic;
  font-weight: 400;
}
.hero__title .line__inner { transition-duration: 1.6s; }
.hero__sub {
  font-size: 16px;
  line-height: 1.75;
  max-width: 540px;
  margin-bottom: 52px;
  color: rgba(255,255,255,0.86);
  font-weight: 300;
}
.hero__ctas {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  animation: fadeInLate 1.4s var(--ease-out) forwards;
  animation-delay: 2.4s;
}
@keyframes fadeInLate { to { opacity: 1; } }

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 60px;
  background: #fff;
  animation: scrollLine 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollLine {
  0%   { top: -60px; }
  55%  { top: 60px; }
  100% { top: 60px; }
}

/* =========================================================
   2. EDITORIAL INTRO  - Mountain-Hospitality layout

   Reference proportions (as % of section width):
     · Heading      → padding-left 6%,  max-width 60%
     · Left image   → margin-left  12%, width 56%   → spans 12% → 68%
     · Right column → right       5%,  width 40%   → spans 55% → 95%
     · Overlap zone → 55% to 68%  (~13% wide)

   Vertical:
     · Heading top: 0
     · Heading -margin: pulls left image up 50–80 px (overlap)
     · Right column starts ~8vw from top, before left image starts
     · Left image height clamped so it ENDS above where body text begins
   ========================================================= */
.intro {
  background-color: var(--c-bg);
  background-image: url('https://assets.simplotel.com/simplotel/image/upload/utsav-camp-sariska/Group_24_34aa9094.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: var(--pad-y) var(--pad-x);
  overflow: hidden;
  position: relative;
}
.intro__inner {
  position: relative;
  max-width: 1380px;
  margin: 0 auto;
  /* Tall enough to contain the absolutely-positioned right column,
     so the section's natural bottom = bottom of the Learn More button.
     Then bottom padding (var(--pad-y)) matches the top padding of
     the next section - same height on both sides of the boundary. */
  min-height: clamp(580px, 52vw, 760px);
}

/* HEADING - top-left, 8% indent (matches reference) */
.intro__heading {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(50px, 8.5vw, 118px);
  line-height: 0.94;
  letter-spacing: -1.8px;
  color: var(--c-ink);
  margin: 0 0 clamp(-60px, -3vw, -30px);
  padding-left: clamp(20px, 8%, 140px);
  max-width: 55%;
  position: relative;
  z-index: 3;
  transform: translateY(-35px);
}
.intro__heading em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-bark);
  display: inline-block;
}

/* IMAGES - shared */
.intro__image { display: block; overflow: hidden; }
.intro__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* LEFT image - indented from left, square (clearly taller) */
.intro__image--left {
  position: relative;
  width: 44%;
  margin-left: clamp(30px, 16%, 230px);
  aspect-ratio: 1/1;
  max-height: 620px;
  z-index: 1;
}

/* RIGHT COLUMN - anchored to right edge, 36% wide. The image
   inside is full column width (overlapping left image by ~4%);
   the text block is narrower and right-aligned so it sits to
   the RIGHT of the left image, not over it.                    */
.intro__right-column {
  position: absolute;
  top: clamp(50px, 5vw, 100px);
  right: 0;
  width: clamp(320px, 36%, 460px);
  z-index: 2;
}

.intro__image--right {
  width: 100%;
  aspect-ratio: 5/4;
  max-height: 440px;
  margin-bottom: clamp(36px, 4vw, 60px);
}

.intro__text-block {
  width: 100%;
  max-width: 420px;
  margin-left: auto;
}
.intro__body { margin-bottom: clamp(28px, 3vw, 44px); }
.intro__body p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-muted);
  margin: 0;
}
.intro__text-block .btn { padding: 16px 36px; font-size: 11px; display: inline-flex; }

/* Rectangular outline button - site-wide consistent CTA */
.btn--outline {
  background: transparent;
  color: var(--c-forest);
  border-color: var(--c-forest);
  align-self: flex-start;
}
.btn--outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-forest);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .7s var(--ease-in-out);
  z-index: -1;
}
.btn--outline:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--outline:hover { color: var(--c-bg); letter-spacing: 0.36em; border-color: var(--c-forest); }

/* Light variant for dark backgrounds (Conservation) */
.btn--outline-light {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
.btn--outline-light::before { background: #fff; }
.btn--outline-light:hover { color: var(--c-ink); border-color: #fff; }

/* Consistent spacing above standalone outline buttons inside content blocks */
.discover__body .btn,
.stay__text .btn,
.conservation__inner > .btn { margin-top: clamp(32px, 3.5vw, 52px); }

/* =========================================================
   3. DISCOVER SARISKA
   ========================================================= */
.discover {
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-bg-warm);
}
/* Tighten gap when two Discover sections sit back-to-back (Sariska → Tehla).
   Desktop collapses the seam entirely; mobile keeps a 40px breather so the
   button and the following image don't feel welded together. */
.discover + .discover { padding-top: 40px; }
@media (min-width: 721px) {
  .discover + .discover { padding-top: 0; }
  #discover { padding-bottom: 170px; }
}
.discover__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(48px, 8vw, 130px);
  align-items: center;
}

/* Mirrored variation - text LEFT, image RIGHT (used by Discover Tehla) */
.discover--mirror { background: var(--c-bg); }
.discover--mirror .discover__grid { grid-template-columns: 1fr 1.15fr; }
.discover--mirror .discover__caption { left: auto; right: 0; text-align: right; }

/* Text-left / image-right variant - same layout swap but keeps the
   section's own background (used by Discover Sariska).
   HTML source order is image-first, text-second (matches Discover Tehla),
   so on mobile both sections stack with image-on-top. On desktop, `order`
   visually swaps them so text appears on the left. */
.discover--text-left .discover__grid { grid-template-columns: 1fr 1.15fr; }
.discover--text-left .discover__caption { left: auto; right: 0; text-align: right; }
.discover--text-left .discover__text  { order: 1; }
.discover--text-left .discover__media { order: 2; }
.discover__media {
  height: 86vh;
  max-height: 860px;
  position: relative;
}
.discover__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.discover__caption {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--c-bark);
  letter-spacing: 0.04em;
  position: absolute;
  bottom: -38px;
  left: 0;
}

.discover__body p {
  color: var(--c-muted);
  margin-bottom: 38px;
}

.meta-list {
  margin: 0 0 14px;
  border-top: 1px solid var(--c-line);
}
.meta-list li {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 16px;
  color: var(--c-ink);
}
.meta-list li span {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--c-primary);
  font-size: 14px;
  width: 28px;
  flex-shrink: 0;
}

/* =========================================================
   4. STAY  - Dual-image editorial composition
   ========================================================= */
.stay {
  padding: var(--pad-y) var(--pad-x);
  background: #F8F5F0;
  overflow: hidden;
}
.section-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(48px, 6vw, 90px);
}
.section-head__sub {
  font-size: 16px;
  color: var(--c-muted);
  max-width: 600px;
  margin: 0 auto;
}
.section-head--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  text-align: left;
  max-width: none;
  gap: 40px;
}
.section-head--split .display { margin-bottom: 0; }

.stay__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 9vw, 160px);
  align-items: center;
  position: relative;
  margin-bottom: clamp(96px, 9vw, 140px);
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}
.stay__row:last-child { margin-bottom: 0; }

/* Row alignment variants */
.stay__row--right .stay__visual { order: 2; }
.stay__row--right .stay__text   { order: 1; }

.stay__visual {
  position: relative;
  width: 100%;
}

.stay__image { overflow: hidden; display: block; }
.stay__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Primary tall portrait image (slider container) */
.stay__image--primary {
  width: 100%;
  aspect-ratio: 3/4;
  max-height: 860px;
}

/* -------- Stay primary-image slider -------- */
.stay-slider {
  position: relative;
  width: 100%;
  height: 100%;
}
.stay-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease-in-out);
  pointer-events: none;
}
.stay-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.stay-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stay-slider arrows - same line-arrow look as .exp__arrow,
   tinted white with a soft shadow for legibility over the image */
.stay-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 72px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  z-index: 5;
  /* Always visible - nav affordance shouldn't require a hover to discover. */
  opacity: 1;
  transition: color .5s var(--ease-out), transform .5s var(--ease-out);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stay-slider__arrow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45));
}
.stay-slider__arrow svg line,
.stay-slider__arrow svg polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.stay-slider__arrow--prev { left: clamp(16px, 2.5vw, 32px); }
.stay-slider__arrow--next { right: clamp(16px, 2.5vw, 32px); }
.stay-slider__arrow:hover { color: var(--c-sand); }
.stay-slider__arrow--prev:hover { transform: translateY(-50%) translateX(-4px); }
.stay-slider__arrow--next:hover { transform: translateY(-50%) translateX(4px); }

.stay-slider__dots {
  position: absolute;
  bottom: clamp(18px, 2vw, 28px);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 9px;
  z-index: 4;
  pointer-events: auto;
}
/* Uses shared slick-dot spec (see .exp__dot). */
.stay-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  border: none;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
  transition:
    width .5s var(--ease-out),
    background .35s var(--ease-out),
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out);
}
.stay-slider__dot:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: scale(1.15);
}
.stay-slider__dot.is-active {
  background: #fff;
  width: 32px;
  transform: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}

/* Secondary landscape image - floats out of column into the gap,
   sits on a white "frame card" with generous breathing room.
   Tightened width + offset so it never overlaps the text column. */
.stay__image--secondary {
  position: absolute;
  width: 58%;
  aspect-ratio: auto;
  bottom: -14%;
  z-index: 2;
  background: var(--c-bg);
  padding: clamp(18px, 2vw, 36px) clamp(18px, 2vw, 36px)
           clamp(48px, 5vw, 90px) clamp(18px, 2vw, 36px);
}
.stay__image--secondary img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
}
.stay__row--left  .stay__image--secondary { right: -18%; }
.stay__row--right .stay__image--secondary { left:  -18%; }

/* Text column - vertically centered with the visual via .stay__row */
.stay__text {
  padding-top: 0;
  max-width: 500px;
}
.stay__row--right .stay__text { margin-left: auto; }

.stay__heading {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(42px, 5.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.8px;
  color: var(--c-ink);
  margin-bottom: clamp(32px, 4vw, 52px);
}
.stay__heading em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-bark);
}
.stay__heading .line { padding: 0.12em 0.1em 0.18em; margin-left: -0.1em; }
.stay__text > .num { margin-bottom: 24px; }
.stay__text p {
  font-size: 16px;
  line-height: 1.85;
  color: var(--c-muted);
}

/* =========================================================
   5. EXPERIENCES - "The Rhythms of the Wild"
   ========================================================= */
.experiences {
  padding: var(--pad-y) 0;
  background-color: var(--c-bg-warm);
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.35) 100%),
    url('https://assets.simplotel.com/simplotel/image/upload/x_0,y_0,w_8184,h_4230,c_crop/utsav-camp-sariska/Experience_ccd1b59c.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}
/* Whole-widget light typography (sits over the dark background image) */
.experiences .eyebrow { color: rgba(255,255,255,0.78); }
.experiences .display { color: #fff; }
.experiences .display em { color: var(--c-sand); }
.experiences .exp__intro { color: rgba(255,255,255,0.85); }
.experiences .exp__footer p { color: var(--c-sand); }
.experiences .exp__arrow { color: rgba(255,255,255,0.78); }
.experiences .exp__arrow:disabled { opacity: 0.5; }
.experiences .exp__arrow:disabled:hover { color: rgba(255,255,255,0.78); }

.exp__head {
  padding: 0 var(--pad-x);
  margin-bottom: clamp(60px, 7vw, 110px);
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.exp__head .eyebrow { display: inline-block; }
.exp__head .display { margin-bottom: 32px; }
.exp__intro {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-muted);
  max-width: 620px;
  margin: 0 auto;
}

.exp__track {
  display: flex;
  gap: clamp(20px, 2vw, 36px);
  padding: 0 var(--pad-x) 4px;
  scroll-padding-left: var(--pad-x);
  scroll-padding-right: var(--pad-x);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.exp__track:active { cursor: grabbing; }
.exp__track::-webkit-scrollbar { display: none; }

.exp {
  /* Card width derived from viewport so exactly ~2 cards + a clean ~30%
     peek of the third fit at all desktop widths (peek is what signals
     "swipe for more"). Capped at 520px so cards don't bloat ultra-wide. */
  flex: 0 0 min(
    calc((100vw - 2 * clamp(24px, 7vw, 130px) - 2 * clamp(20px, 2vw, 36px)) / 2.3),
    520px
  );
  scroll-snap-align: start;
  display: block;
  transition: opacity .6s var(--ease-out);
}

.exp__img {
  /* Uniform 4:3 across every card so heights match - a peeking card
     never appears taller or shorter than its neighbours. */
  aspect-ratio: 4/3;
  margin-bottom: 22px;
  overflow: hidden;
  position: relative;
  max-height: 60vh;
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.exp__img img {
  transition:
    clip-path 1.8s var(--ease-image),
    transform 2s var(--ease-out),
    filter .8s var(--ease-out);
  filter: brightness(0.94);
}
.exp:hover .exp__img img {
  transform: scale(1.06) !important;
  filter: brightness(1.05);
}

.exp__meta { padding: 0 2px; }
.exp__num {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--c-sand);
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}
.exp__meta h3 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(24px, 1.9vw, 30px);
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.2px;
  color: #fff;
  transition: color .4s var(--ease-out);
}
.exp:hover .exp__meta h3 { color: var(--c-sand); }
.exp__meta p {
  font-size: 15px;
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
}

.exp__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
  padding: 0 var(--pad-x);
  margin-top: clamp(56px, 6vw, 90px);
}

/* Dot navigation between the prev/next arrows. Always visible. */
.exp__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1;
  max-width: 480px;
}

/* Slick dot - shared spec used by .exp__dot, .stay-slider__dot, .why__dot.
   Small round dot that stretches into a bold pill when active. */
.exp__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
  transition:
    width .5s var(--ease-out),
    background .35s var(--ease-out),
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out);
}
.exp__dot:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: scale(1.15);
}
.exp__dot.is-active {
  background: #fff;
  width: 32px;
  transform: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}
.exp__arrow {
  width: 72px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--c-ink);
  transition: color .5s var(--ease-out), transform .5s var(--ease-out), opacity .4s var(--ease-out);
}
.exp__arrow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.exp__arrow svg line,
.exp__arrow svg polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.exp__arrow:hover { color: var(--c-primary); }
.exp__arrow--next:hover { transform: translateX(6px); }
.exp__arrow--prev:hover { transform: translateX(-6px); }
.exp__arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.exp__arrow:disabled:hover {
  color: var(--c-ink);
  transform: none;
}
.exp__footer {
  padding: 0 var(--pad-x);
  margin-top: clamp(56px, 7vw, 100px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.exp__footer p {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.65;
  color: var(--c-bark);
}


/* =========================================================
   6. CONSERVATION
   ========================================================= */
.conservation {
  position: relative;
  padding: var(--pad-y) var(--pad-x);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.conservation__media {
  position: absolute;
  inset: -10% 0;
  z-index: -1;
}
.conservation__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.conservation__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43,36,27,0.82) 0%, rgba(43,36,27,0.72) 100%);
}
.conservation__inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}
.conservation__lead {
  font-size: 16px;
  line-height: 1.85;
  color: rgba(255,255,255,0.82);
  max-width: 680px;
  margin: -8px auto 0;
}
.conservation__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 5vw, 72px);
  margin: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 60px);
  text-align: left;
}
.conservation__col {
  padding-top: 32px;
  border-top: 1px solid rgba(216,195,165,0.32);
}
.conservation__col h3 {
  font-family: var(--ff-serif);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 18px;
  letter-spacing: -0.2px;
  color: #fff;
}
.conservation__col p {
  font-size: 16px;
  color: rgba(255,255,255,0.78);
  line-height: 1.8;
}

/* ---------- Info Tiles (on dark conservation backdrop) ---------- */
.info__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin: clamp(56px, 7vw, 96px) 0 0;
  text-align: center;
}
.info__tile {
  background: transparent;
  border: none;
  padding: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  cursor: pointer;
  transition: color .4s var(--ease-out), transform .5s var(--ease-out);
}
.info__icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1.5px solid rgba(216,195,165,0.75);
  background: rgba(20,16,12,0.42);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all .5s var(--ease-out);
}
.info__icon svg {
  width: 46px;
  height: 46px;
  display: block;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.35));
}
/* Override the inline stroke-width on every SVG element for thicker, more visible strokes */
.info__icon svg path,
.info__icon svg rect,
.info__icon svg circle,
.info__icon svg line,
.info__icon svg polyline { stroke-width: 1.8; }
.info__label {
  font-family: var(--ff-serif);
  font-size: 20px;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.92);
  transition: color .4s var(--ease-out);
}
.info__tile:hover { transform: translateY(-4px); }
.info__tile:hover .info__icon {
  border-color: var(--c-primary);
  background: rgba(189, 163, 126, 0.28);
  color: var(--c-sand);
  transform: scale(1.06);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3),
              0 0 0 6px rgba(216, 195, 165, 0.08);
}
.info__tile:hover .info__label { color: var(--c-sand); }

.info__tile.is-active .info__icon {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35),
              0 0 0 6px rgba(189, 163, 126, 0.15);
}
.info__tile.is-active .info__label { color: #fff; }

/* ---------- Info Panels ---------- */
.info__panels {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .7s var(--ease-in-out);
  margin-top: 0;
}
.info__panels.is-open {
  grid-template-rows: 1fr;
  margin-top: clamp(40px, 4.5vw, 72px);
}
.info__panel {
  grid-row: 1;
  grid-column: 1;
  overflow: hidden;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
  pointer-events: none;
  min-height: 0;
}
.info__panel.is-active {
  opacity: 1;
  pointer-events: auto;
}
.info__panel-inner {
  text-align: left;
  background: linear-gradient(180deg, rgba(20,16,12,0.55), rgba(20,16,12,0.42));
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(216,195,165,0.22);
  padding: clamp(32px, 4vw, 56px);
  color: rgba(255,255,255,0.92);
}
.info__panel-inner h3.h-serif {
  color: #fff;
  margin-bottom: 18px;
}
.info__intro {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,0.78);
  margin-bottom: clamp(24px, 3vw, 36px);
  max-width: 720px;
}
.info__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 48px);
}
.info__grid h4 {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-sand);
  font-weight: 400;
  margin-bottom: 18px;
}
.info__grid ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.info__grid li {
  font-size: 15px;
  color: rgba(255,255,255,0.78);
  line-height: 1.6;
  padding-left: 18px;
  position: relative;
}
.info__grid li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 8px; height: 1px;
  background: var(--c-sand);
}
.info__faqs { display: flex; flex-direction: column; }

/* Accordion FAQ - question + chevron, answer reveals on click */
.info__faq {
  border-top: 1px solid rgba(216,195,165,0.18);
}
.info__faq:last-child { border-bottom: 1px solid rgba(216,195,165,0.18); }

.info__faq > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 8px 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #fff;
  transition: color .4s var(--ease-out);
}
.info__faq > summary::-webkit-details-marker,
.info__faq > summary::marker { display: none; content: ''; }
.info__faq:hover > summary { color: var(--c-sand); }
.info__faq[open] > summary { color: var(--c-sand); }

.info__faq-q {
  font-family: var(--ff-serif);
  font-size: 18px;
  line-height: 1.4;
  font-weight: 400;
}

/* Dropdown arrow - chevron drawn with borders, rotates 180° when open */
.info__faq-icon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  position: relative;
  transition: transform .45s var(--ease-out);
}
.info__faq-icon::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  margin: auto;
  top: 0;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transform-origin: center;
  transition: border-color .4s var(--ease-out);
}
.info__faq[open] .info__faq-icon { transform: rotate(180deg); }

.info__faq-a {
  font-size: 15px;
  color: rgba(255,255,255,0.78);
  line-height: 1.75;
  padding: 0 8px 24px 0;
  max-width: 720px;
}
.info__places {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.info__places li {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid rgba(216,195,165,0.18);
  font-size: 15px;
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
}
.info__places li:last-child { border-bottom: 1px solid rgba(216,195,165,0.18); }
.info__places strong {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: 18px;
  color: #fff;
}
.info__awards {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: clamp(28px, 3vw, 40px);
}
.info__awards li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid rgba(216,195,165,0.18);
  font-size: 15px;
  color: rgba(255,255,255,0.86);
  line-height: 1.6;
}
.info__awards li:last-child { border-bottom: 1px solid rgba(216,195,165,0.18); }
.info__award-year {
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--c-sand);
}
.info__featured-label {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-sand);
  margin-bottom: 14px;
}
.info__featured {
  font-family: var(--ff-serif);
  font-size: 16px;
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
}

/* Season window printed under each What to Pack heading. */
.info__grid h4 .info__season-months {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.55);
}

/* Inline links inside the info panels. The panels sit on the dark ground, so
   these inherit the surrounding text colour and carry a sand underline rather
   than the site's outline button treatment. */
.info__places strong a,
.info__featured-label a,
.info__more a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(216,195,165,0.5);
  transition: color .4s var(--ease-out), text-decoration-color .4s var(--ease-out);
}

.info__places strong a:hover,
.info__featured-label a:hover,
.info__more a:hover { color: var(--c-sand); text-decoration-color: var(--c-sand); }

.info__more {
  margin: 24px 0 0;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-sand);
}

/* .info__awards already carries the gap, so the awards read-more does not add one. */
.info__awards + .info__more { margin: 0 0 clamp(24px, 2.5vw, 34px); }

@media (max-width: 900px) {
  .info__tiles { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .info__grid { grid-template-columns: 1fr; }
  .info__places li,
  .info__awards li { grid-template-columns: 1fr; gap: 6px; }
}

/* =========================================================
   7. WHY DO WE DO IT
   ========================================================= */
.why {
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-bg);
}
.why__head {
  text-align: center;
  margin: 0 auto clamp(48px, 5vw, 80px);
  max-width: 880px;
}
.why__head .display { margin-bottom: 0; }

.why__stage {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  max-width: 1320px;
  margin: 0 auto;
}
.why__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  max-height: 64vh;
  overflow: hidden;
}
.why__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease-in-out);
  pointer-events: none;
}
.why__slide.is-active { opacity: 1; pointer-events: auto; }
.why__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.why__arrow {
  width: 64px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--c-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: color .4s var(--ease-out), transform .4s var(--ease-out);
}
.why__arrow svg { width: 100%; height: 100%; overflow: visible; }
.why__arrow svg line,
.why__arrow svg polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.why__arrow:hover { color: var(--c-primary); }
.why__arrow--prev:hover { transform: translateX(-6px); }
.why__arrow--next:hover { transform: translateX(6px); }

.why__captions {
  position: relative;
  max-width: 720px;
  margin: clamp(36px, 4vw, 56px) auto 0;
  text-align: center;
  min-height: 180px;
}
.why__caption {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
  pointer-events: none;
}
.why__caption.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.why__cap-num {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--c-stone);
  display: inline-block;
  margin-bottom: 18px;
}
.why__cap-title {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  color: var(--c-ink);
  margin-bottom: 14px;
}
.why__caption p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-muted);
}
.why__progress {
  margin-top: clamp(24px, 2.5vw, 36px);
  font-family: var(--ff-serif);
  font-style: italic;
  color: var(--c-stone);
  letter-spacing: 1px;
  font-size: 14px;
  text-align: center;
}
.why__count-sep { color: var(--c-stone); margin: 0 6px; }

/* Dots - only shown on mobile via the responsive override below */
.why__dots {
  display: none;
  position: absolute;
  left: 0; right: 0;
  bottom: 16px;
  justify-content: center;
  gap: 6px;
  z-index: 4;
}
/* Uses shared slick-dot spec (see .exp__dot). */
.why__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  border: none;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
  transition:
    width .5s var(--ease-out),
    background .35s var(--ease-out),
    transform .35s var(--ease-out),
    box-shadow .35s var(--ease-out);
}
.why__dot:hover {
  background: rgba(255, 255, 255, 0.75);
  transform: scale(1.15);
}
.why__dot.is-active {
  background: #fff;
  width: 32px;
  transform: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
}

@media (max-width: 900px) {
  .why__stage { grid-template-columns: 1fr; gap: 16px; }
  .why__viewport { aspect-ratio: 4/3; order: 1; }
  .why__arrow--prev { order: 2; justify-self: start; }
  .why__arrow--next { order: 3; justify-self: end; margin-top: -28px; }
  .why__captions { min-height: 220px; }
}

/* =========================================================
   7B. JOURNAL (legacy, unused)
   ========================================================= */
.journal {
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-bg);
}
.journal__head {
  align-items: flex-start;
  gap: clamp(40px, 8vw, 120px);
  margin-bottom: clamp(64px, 8vw, 110px);
}
.journal__title { flex: 0 0 auto; max-width: 520px; }
.journal__title .display { margin-bottom: 0; }
.journal__intro {
  flex: 1 1 auto;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.journal__body {
  font-size: 16px;
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 40px;
}
.journal__cta { display: inline-flex; }
@media (max-width: 900px) {
  .journal__head { flex-direction: column; align-items: flex-start; gap: 32px; }
  .journal__title, .journal__intro { max-width: 100%; }
}
.journal__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(40px, 5vw, 72px);
}
.journal__feature, .journal__small {
  display: block;
  position: relative;
}

/* Image wrapper - overlay + index sit on top */
.journal__img {
  overflow: hidden;
  margin-bottom: clamp(20px, 2vw, 28px);
  position: relative;
}
.journal__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.18) 100%);
  opacity: 0;
  transition: opacity .6s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.journal__feature:hover .journal__img::after,
.journal__small:hover .journal__img::after { opacity: 1; }

.journal__img img { aspect-ratio: 5/4; }
.journal__feature:hover .journal__img.is-revealed img,
.journal__small:hover .journal__img.is-revealed img {
  transform: scale(1.05);
  transition: transform 1.6s var(--ease-out);
}

/* Italic Playfair index number, top-left over the image */
.journal__index {
  position: absolute;
  top: clamp(16px, 1.5vw, 22px);
  left: clamp(16px, 1.5vw, 22px);
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(20px, 1.6vw, 26px);
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.04em;
  z-index: 2;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}

/* Meta - consistent rhythm across feature and small */
.journal__meta { display: flex; flex-direction: column; }
.journal__meta .eyebrow {
  margin-bottom: 14px;
  font-size: 16px;
  letter-spacing: 0.18em;
  color: var(--c-bark);
}
.journal__meta h3 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.2px;
  margin-bottom: 14px;
  transition: color .4s var(--ease-out);
}
.journal__feature:hover .journal__meta h3,
.journal__small:hover .journal__meta h3 { color: var(--c-bark); }

.journal__meta p {
  font-size: 16px;
  color: var(--c-muted);
  line-height: 1.7;
  margin: 0;
}

/* Read article - uppercase label + arrow, slides in on hover */
.journal__read {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(16px, 1.5vw, 22px);
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-earth);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), color .4s var(--ease-out);
}
.journal__read-arrow {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0;
  transition: transform .5s var(--ease-out);
}
.journal__feature:hover .journal__read,
.journal__small:hover .journal__read {
  opacity: 1;
  transform: translateY(0);
  color: var(--c-primary);
}
.journal__feature:hover .journal__read-arrow,
.journal__small:hover .journal__read-arrow { transform: translateX(6px); }

.journal__side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: clamp(36px, 4vw, 60px);
}
.journal__small .journal__img img { aspect-ratio: 4/3; }
.journal__small .journal__meta h3 { font-size: clamp(20px, 1.6vw, 24px); }

/* =========================================================
   7B. SPA
   ========================================================= */
.spa {
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-bg);
}
.spa__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(48px, 5vw, 72px);
}
.spa__head .display { margin-bottom: 28px; }
.spa__intro {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-muted);
}

.spa__cta {
  text-align: center;
  margin-top: clamp(40px, 4vw, 64px);
}

.spa__tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 28px);
  margin-bottom: clamp(40px, 4vw, 60px);
  border-bottom: 1px solid var(--c-line);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.spa__tab {
  font-family: var(--ff-sans);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-stone);
  background: transparent;
  border: none;
  padding: 18px 4px;
  cursor: pointer;
  position: relative;
  transition: color .4s var(--ease-out);
}
.spa__tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--c-primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .5s var(--ease-out);
}
.spa__tab:hover { color: var(--c-earth); }
.spa__tab.is-active {
  color: var(--c-ink);
}
.spa__tab.is-active::after { transform: scaleX(1); }

.spa__panels {
  max-width: 1180px;
  margin: 0 auto;
}
.spa__panel {
  display: none;
  animation: spaFade .5s var(--ease-out);
}
.spa__panel.is-active { display: block; }
@keyframes spaFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.spa__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 40px);
}

/* Each spa item - thumbnail image + body in a grid */
.spa__item {
  display: grid;
  grid-template-columns: clamp(160px, 18vw, 220px) 1fr;
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
  padding-bottom: clamp(28px, 3vw, 36px);
  border-bottom: 1px solid var(--c-line);
}
.spa__item-img {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.spa__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.spa__item:hover .spa__item-img img { transform: scale(1.05); }
.spa__item-body { min-width: 0; }
.spa__item header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.spa__item h3 {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.3;
  color: var(--c-ink);
  letter-spacing: -0.2px;
}
.spa__price {
  font-family: var(--ff-serif);
  font-size: clamp(16px, 1.3vw, 18px);
  color: var(--c-bark);
  white-space: nowrap;
}
.spa__price small {
  font-family: var(--ff-sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-left: 6px;
}
.spa__meta {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-bottom: 12px;
}
.spa__item p:last-child {
  font-size: 15px;
  line-height: 1.7;
  color: var(--c-muted);
}
.spa__item:last-child { border-bottom: none; padding-bottom: 0; }

@media (max-width: 900px) {
  .spa__item { grid-template-columns: 120px 1fr; gap: 18px; }
}
@media (max-width: 720px) {
  .spa__tabs { gap: 6px; }
  .spa__tab { font-size: 11px; padding: 14px 2px; letter-spacing: 0.22em; }
}

/* =========================================================
   8. GUEST LETTERS (4-column press-style layout)
   ========================================================= */
.letters {
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-bg-warm);
}
.letters__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(56px, 6vw, 90px);
}
.letters__head .eyebrow { display: inline-block; margin-bottom: 24px; }
.letters__heading {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--c-ink);
}
.letters__heading em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-bark);
}
.letters__heading .line__inner { padding: 0.08em 0.06em 0.14em; }
.letters__stage {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 2.5vw, 40px);
  max-width: 1480px;
  margin: 0 auto;
}
.letters__dots { display: none; }
.letters__arrow {
  flex: 0 0 auto;
}
.letters__viewport {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
.letters__page {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  pointer-events: none;
}
.letters__page.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
/* Single source line under the review grid. The global reset strips anchor
   underlines, so the link declares its own. */
.letters__source {
  text-align: center;
  margin-top: clamp(32px, 3.5vw, 52px);
  font-family: var(--ff-sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-bark);
}

.letters__source a {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: rgba(139, 115, 85, 0.45);
  transition: color .4s var(--ease-out), text-decoration-color .4s var(--ease-out);
}

.letters__source a:hover { color: var(--c-forest); text-decoration-color: var(--c-forest); }

.letters__grid {
  display: grid;
  /* 3 up: the section carries 6 reviews across 2 pages */
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
@media (max-width: 720px) {
  .letters__stage { grid-template-columns: 1fr; gap: 24px; }
  .letters__arrow--prev { justify-self: start; order: 2; }
  .letters__arrow--next { justify-self: end; order: 3; margin-top: -28px; }
  .letters__viewport { order: 1; }
}
.letter {
  padding: clamp(28px, 3vw, 44px) clamp(20px, 2.2vw, 36px);
  border-right: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
}
.letter:last-child { border-right: none; }
.letter__source {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  color: var(--c-ink);
  margin-bottom: 28px;
  min-height: 2.4em;
}
.letter__body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-ink);
  margin-bottom: 28px;
  flex: 1;
}
.letter__by {
  font-family: var(--ff-sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--c-bark);
}
/* Per-card source attribution - makes it clear each quote is a real
   Tripadvisor review rather than an unattributed pull-quote. */
.letter__via {
  font-family: var(--ff-sans);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-stone);
  margin-top: auto;
}


@media (max-width: 1024px) {
  .letters__grid { grid-template-columns: repeat(2, 1fr); }
  .letter { border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
  .letter:nth-child(2n) { border-right: none; }
  .letter:nth-last-child(-n+2) { border-bottom: none; }
}
@media (max-width: 640px) {
  .letters__grid { grid-template-columns: 1fr; }
  .letter,
  .letter:nth-child(2n) {
    border-right: none;
    border-bottom: 1px solid var(--c-line);
  }
  .letter:last-child { border-bottom: none; }
}

/* =========================================================
   8B. TESTIMONIALS (legacy slider, no longer rendered)
   ========================================================= */
.testimonials {
  padding: var(--pad-y) var(--pad-x);
  background: var(--c-bg-warm);
  text-align: center;
}
.testimonials .eyebrow { display: block; margin-bottom: 64px; }
.testimonials__viewport {
  overflow: hidden;
  max-width: 960px;
  margin: 0 auto;
}
.testimonials__track {
  display: flex;
  transition: transform 1.1s var(--ease-in-out);
}
.testimonial {
  flex: 0 0 100%;
  padding: 0 24px;
}
.quote {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.45;
  color: var(--c-ink);
  margin-bottom: 44px;
  letter-spacing: -0.3px;
}
.testimonial footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.testimonial__name {
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-bark);
}
.testimonial__loc {
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--c-stone);
}

.testimonials__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 60px;
}
/* Same line-arrow look as .exp__arrow - consistent across all sliders */
.t-arrow {
  width: 72px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--c-ink);
  transition: color .5s var(--ease-out), transform .5s var(--ease-out), opacity .4s var(--ease-out);
}
.t-arrow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.t-arrow svg line,
.t-arrow svg polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.t-arrow:hover { color: var(--c-primary); }
#tNext:hover { transform: translateX(6px); }
#tPrev:hover { transform: translateX(-6px); }
.t-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}
.t-arrow:disabled:hover {
  color: var(--c-ink);
  transform: none;
}
/* Progress-line indicator - used by the .t-arrow strip. */
.t-track {
  flex: 1;
  height: 1px;
  background: var(--c-line);
  position: relative;
  max-width: 480px;
}
.t-track-bar {
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 33.33%;
  background: var(--c-primary);
  transition: width .35s var(--ease-out), left .35s var(--ease-out);
}

/* =========================================================
   9. EMOTIONAL BANNER
   ========================================================= */
.banner {
  position: relative;
  min-height: clamp(640px, 90vh, 860px);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: clamp(40px, 4vw, 80px) var(--pad-x);
  color: #fff;
}
.banner__card { margin-right: clamp(20px, 4vw, 80px); }
.banner__media { position: absolute; inset: -10% 0; z-index: 1; }
.banner__media img,
.banner__media video { width: 100%; height: 100%; object-fit: cover; }
.banner__video { display: block; }
.banner__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.25) 100%);
}

/* Brand-coloured card pinned to the bottom-right */
.banner__card {
  position: relative;
  z-index: 2;
  background: var(--c-earth);
  color: #fff;
  padding: clamp(40px, 4vw, 72px) clamp(36px, 3.5vw, 64px);
  width: clamp(360px, 38%, 560px);
  text-align: left;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.45);
}
.banner__card .eyebrow {
  color: rgba(216,195,165,0.85);
  margin-bottom: 28px;
}
.banner__heading {
  font-family: var(--ff-serif);
  font-weight: 400;
  font-size: clamp(40px, 4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.6px;
  color: #fff;
  margin-bottom: clamp(24px, 2.4vw, 36px);
}
.banner__heading em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-sand);
}
.banner__sub {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.82);
  margin-bottom: clamp(28px, 3vw, 44px);
}

/* Outline-on-card CTA - sand-tone border + label, fills on hover */
.btn--banner {
  background: transparent;
  color: #fff;
  border-color: rgba(216,195,165,0.7);
  padding: 16px 38px;
  font-size: 11px;
}
.btn--banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-forest);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .7s var(--ease-in-out);
  z-index: -1;
}
.btn--banner:hover::before { transform: scaleX(1); transform-origin: left; }
.btn--banner:hover { color: #fff; border-color: var(--c-forest); letter-spacing: 0.36em; }

@media (max-width: 720px) {
  .banner {
    justify-content: center;
    padding: clamp(40px, 8vw, 80px) clamp(20px, 5vw, 40px);
  }
  .banner__card { width: 100%; max-width: 480px; }
}

/* =========================================================
   10. FOOTER
   ========================================================= */
.footer {
  /* Slightly deeper warm than the site's --c-bg-warm (#EFE7DB) so the seam
     with the section above reads as a clear surface change instead of a
     continuous colour field. */
  background: #E3D6C1;
  padding: clamp(44px, 5vw, 68px) var(--pad-x) 20px;
  color: var(--c-ink);
  position: relative;
  box-shadow: inset 0 10px 22px -14px rgba(43, 36, 27, 0.28);
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(95, 74, 52, 0.42);
}

/* ---------- Hero (centered logo + newsletter, Rosa-style) ---------- */
.footer__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: clamp(32px, 3.5vw, 52px);
}
.footer__logo img {
  height: clamp(60px, 5.2vw, 76px);
  width: auto;
  filter: brightness(0);
  margin-bottom: clamp(16px, 1.6vw, 22px);
}
.footer__hero-text {
  font-family: var(--ff-serif);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--c-earth);
  margin-bottom: clamp(20px, 2.2vw, 28px);
  max-width: 560px;
}
.footer__newsletter {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 0;
  padding: 0;
  box-shadow: 0 2px 24px rgba(95,74,52,0.06);
  gap: 0;
}
.footer__newsletter input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--ff-sans);
  font-size: 15px;
  color: var(--c-ink);
  padding: 14px 22px;
  min-width: 0;
}
.footer__newsletter input::placeholder { color: var(--c-stone); }

/* SUBSCRIBE - consistent outline button (matches .btn--outline) */
.footer__newsletter button {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-forest);
  background: transparent;
  border: 1px solid var(--c-forest);
  border-radius: 0;
  padding: 0 38px;
  transition: all .6s var(--ease-out);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: -1px;
}
.footer__newsletter button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c-forest);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .7s var(--ease-in-out);
  z-index: -1;
}
.footer__newsletter button:hover {
  color: var(--c-bg);
  letter-spacing: 0.36em;
}
.footer__newsletter button:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

.footer__consent {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--c-muted);
  cursor: pointer;
}
.footer__consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--c-stone);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all .3s var(--ease-out);
}
.footer__consent input[type="checkbox"]:checked {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
.footer__consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.footer__consent a {
  color: var(--c-earth);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__divider {
  height: 1px;
  background: var(--c-line);
  margin: 0 auto;
  max-width: 1480px;
}

/* ---------- Columns ---------- */
.footer__cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(28px, 3.2vw, 56px);
  padding: clamp(28px, 3vw, 44px) 0 clamp(20px, 2.4vw, 34px);
  max-width: 1480px;
  margin: 0 auto;
}
.footer__col { display: flex; flex-direction: column; }
.footer__col .eyebrow {
  font-size: 15px;
  letter-spacing: 0.32em;
  margin-bottom: 18px;
  color: var(--c-bark);
}
.footer__col a,
.footer__col address {
  font-size: 15px;
  color: var(--c-muted);
  padding: 3px 0;
  line-height: 1.55;
  position: relative;
  align-self: flex-start;
  transition: color .35s var(--ease-out);
  font-style: normal;
}
.footer__col a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 4px;
  width: 0;
  height: 1px;
  background: var(--c-primary);
  transition: width .45s var(--ease-out);
}
.footer__col a:hover { color: var(--c-earth); }
.footer__col a:hover::after { width: 100%; }

/* ---------- Bottom strip ---------- */
.footer__bottom {
  display: flex;
  /* Sitemap then the Simplotel credit, sitting together at the left rather than
     pushed to opposite ends. The gap is what separates them. */
  justify-content: flex-start;
  align-items: center;
  gap: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-stone);
  max-width: 1480px;
  margin: 0 auto;
}

/* .footer__credit (the italic tagline) was removed from every page along with
   the copyright line, which the Simplotel credit below now replaces.

   The credit is set to match the footer column links rather than the uppercase
   row it sits in: same 16px, same --c-muted, and normal case so the wording
   reads as written instead of being shouted. */
.footer__credit-link {
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-muted);
  transition: color .35s var(--ease-out);
}
.footer__credit-link:hover { color: var(--c-earth); }

/* =========================================================
   BACK TO TOP BUTTON
   ========================================================= */
.to-top {
  position: fixed;
  right: clamp(20px, 3vw, 36px);
  bottom: clamp(20px, 3vw, 36px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  color: var(--c-forest);
  border: 1px solid var(--c-forest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .45s var(--ease-out),
              transform .45s var(--ease-out),
              background .4s var(--ease-out),
              color .4s var(--ease-out),
              border-color .4s var(--ease-out),
              visibility .45s linear;
  z-index: 80;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.to-top:hover {
  background: var(--c-forest);
  color: #fff;
  border-color: var(--c-forest);
  transform: translateY(-2px);
}

/* Auto-white state - when scrolling over a dark section */
.to-top.is-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.to-top.is-dark:hover {
  background: #fff;
  color: var(--c-ink);
  border-color: #fff;
}
.to-top svg {
  width: 18px;
  height: 18px;
  display: block;
}
@media (max-width: 520px) {
  .to-top {
    width: 44px; height: 44px;
    right: auto;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 12px);
  }
  .to-top.is-visible { transform: translate(-50%, 0); }
  .to-top:hover { transform: translate(-50%, -2px); }
  .to-top svg { width: 16px; height: 16px; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .nav__menu { display: none; }
  .nav__burger { display: flex; }

  /* Mobile nav order - burger LEFT, logo CENTER, Book Now RIGHT */
  .nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .nav__burger {
    order: 1;
    flex-shrink: 0;
  }
  .nav__logo {
    order: 2;
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    margin: 0;
  }
  .nav__cta {
    order: 3;
    flex-shrink: 0;
    height: 40px;
    padding: 0 18px;
    /* size stays at the base 11px -- the floor for text on a phone. The width
       that costs is bought back with tighter tracking and padding. */
    letter-spacing: 0.22em;
    margin-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  .discover__grid, .stay__row, .exp__head {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .stay__row { margin-bottom: clamp(64px, 11vw, 100px); }
  .stay__row--right .stay__visual { order: 0; }
  .stay__row--right .stay__text   { order: 0; }
  .stay__row--right .stay__text   { margin-left: 0; }
  .discover__media { height: 64vh; max-height: none; }

  /* Reset order on mobile so source order (image-first) takes over -
     Discover Sariska now stacks image-on-top + text-below, matching Tehla.
     Also override the desktop 2-column grid back to single column here
     (the .discover--text-left specificity would otherwise win). */
  .discover--text-left .discover__grid { grid-template-columns: 1fr; }
  .discover--text-left .discover__text,
  .discover--text-left .discover__media { order: 0; }
  .discover--text-left .discover__caption { left: 0; right: auto; text-align: left; }

  /* Intro: collapse the overlap composition into stacked flow */
  .intro {
    padding: var(--pad-y) var(--pad-x);
  }
  .intro__inner {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
  .intro__heading {
    font-size: clamp(48px, 11vw, 80px);
    max-width: 100%;
    padding-left: 0;
    margin: 0;
    transform: none;
  }
  .intro__image--left {
    width: 100%;
    margin-left: 0;
    max-height: none;
    aspect-ratio: 4/3;
  }
  .intro__right-column {
    position: relative;
    top: auto;
    right: auto;
    width: 80%;
    margin: -10% 0 0 auto;
  }
  .intro__image--right { aspect-ratio: 4/3; max-height: none; }
  .intro__body p { font-size: 16px; line-height: 1.85; }
  .intro__text-block .btn { padding: 18px 40px; font-size: 11px; }
  .stay__text { padding-top: 24px; }
  .stay__image--primary { aspect-ratio: 4/5; max-height: 70vh; }
  .stay__image--secondary {
    position: relative;
    bottom: auto;
    left: auto !important;
    right: auto !important;
    width: 78%;
    margin: -12% 0 0 auto;
    padding: clamp(14px, 3vw, 24px) clamp(14px, 3vw, 24px)
             clamp(28px, 5vw, 48px) clamp(14px, 3vw, 24px);
  }
  .stay__image--secondary img { aspect-ratio: 4/3; }

  .conservation__cols { grid-template-columns: 1fr; gap: 36px; }
  .journal__grid { grid-template-columns: 1fr; }

  .footer__cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  .section-head--split {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
}

@media (max-width: 640px) {
  body { font-size: 14px; }

  /* Eyebrow → heading spacing tightened on mobile */
  .eyebrow { margin-bottom: 30px; }

  /* Body paragraph text - uniform 14px across all sections */
  .intro__body p,
  .discover__body p,
  .stay__text p,
  .exp__intro,
  .exp__meta p,
  .why__body,
  .why__caption p,
  .conservation__lead,
  .conservation__col p,
  .info__intro,
  .info__grid li,
  .info__faqs dd,
  .info__places li,
  .info__awards li,
  .info__featured,
  .spa__intro,
  .spa__item p:last-child,
  .letter__body,
  .banner__sub,
  .footer__hero-text,
  .footer__col a,
  .footer__credit-link,
  .footer__sitemap,
  .footer__news-text,
  .meta-list li {
    font-size: 14px;
    line-height: 1.7;
  }
  .nav { padding: 8px var(--pad-x); }
  .nav__logo img { height: 54px; }
  .nav--scrolled .nav__logo img { height: 44px; }
  .hero { min-height: 600px; padding: 0 24px; }
  .hero__title { font-size: 46px; letter-spacing: -0.5px; }
  .hero__sub { font-size: 16px; }
  .hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__ctas .btn { width: 100%; text-align: center; }

  /* Uniform 50px CTA height across the mobile site - flex-center keeps label aligned.
     .nav__cta is excluded because it lives inside a compact nav bar. */
  .btn,
  .footer__newsletter button {
    height: 50px;
    min-height: 50px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Keep the nav Book Now CTA compact and centered */
  .nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .to-top { height: 50px; width: 50px; }

  /* Experiences footer pull-quote */
  .exp__footer p { font-size: 16px; line-height: 1.6; }

  /* Experiences slider - hide arrows on mobile, dots remain the sole nav */
  .exp__arrow { display: none !important; }

  /* Why carousel - swap arrows for dots on mobile */
  .why__arrow { display: none !important; }
  .why__dots { display: flex; }

  /* Letters - single-letter slider on mobile (clean rebuild) */
  .letters__arrow { display: none !important; }
  .letters__stage {
    display: block;
    grid-template-columns: none;
    gap: 0;
  }
  .letters__viewport {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
  }
  .letters__page {
    grid-column: auto;
    grid-row: auto;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    display: block;
  }
  .letters__grid {
    display: block;
    border: none;
  }
  .letter {
    display: none;
    border: none !important;
    padding: 32px 16px;
    text-align: center;
    flex-direction: column;
  }
  .letter.is-mobile-active {
    display: flex;
  }
  .letter__source {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 20px;
    min-height: 0;
  }
  .letter__body {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 24px;
    flex: 0 0 auto;
  }
  .letter__by {
    color: var(--c-bark);
    font-size: 13px;
    letter-spacing: 0.08em;
  }
  /* Slick-dot spec on a light background - same silhouette as .exp__dot,
     forest ink instead of white so it reads on paper. */
  .letters__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
  }
  .letters__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(61, 90, 72, 0.28);
    border: none;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(61, 90, 72, 0.35);
    transition:
      width .5s var(--ease-out),
      background .35s var(--ease-out),
      transform .35s var(--ease-out),
      box-shadow .35s var(--ease-out);
  }
  .letters__dot:hover {
    background: rgba(61, 90, 72, 0.5);
    transform: scale(1.15);
  }
  .letters__dot.is-active {
    background: var(--c-forest);
    width: 32px;
    transform: none;
    box-shadow: 0 0 0 1px var(--c-forest);
  }

  /* Stay-slider - arrows stay visible on mobile (no hover trigger available)
     and get a bit bigger for tap-target ergonomics. Dots stay centred. */
  .stay-slider__arrow {
    width: 56px;
    height: 44px;
    opacity: 1;
  }
  .stay-slider__dots {
    justify-content: center;
    left: 0;
    right: 0;
    bottom: clamp(14px, 3vw, 22px);
    gap: 6px;
  }
  /* Mobile keeps the shared slick-dot silhouette - no size override. */

  .exp { flex: 0 0 78vw; }

  .footer__cols { grid-template-columns: 1fr; gap: 36px; }
  /* Cleaner mobile newsletter - separate input box + outline button stacked */
  .footer__newsletter {
    flex-direction: column;
    border-radius: 0;
    padding: 0;
    gap: 14px;
    background: transparent;
    box-shadow: none;
  }
  .footer__newsletter input {
    width: 100%;
    padding: 18px 20px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--c-line);
  }
  .footer__newsletter button {
    width: 100%;
    padding: 18px;
    margin: 0;
    border: 1px solid var(--c-ink);
  }
  .footer__bottom { flex-direction: column; gap: 16px; align-items: flex-start; text-align: left; }
  .section-head { margin-bottom: 56px; }
  .quote { font-size: 22px; }

  .discover__caption { position: static; margin-top: 18px; }
}

/* =========================================================
   TABLET (≤ 1023px) - fills the 768-1023px void
   ========================================================= */
@media (max-width: 1023px) {
  /* Letters: 4 cols → 2 cols, mid-tablet sweet spot */
  .letters__grid { grid-template-columns: repeat(2, 1fr); }
  .letter {
    border-right: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
  }
  .letter:nth-child(2n) { border-right: none; }
  .letter:nth-last-child(-n+2) { border-bottom: none; }

  /* Info tiles: 4 → 2 cols at mid-tablet so labels don't crowd */
  .info__tiles { grid-template-columns: repeat(2, 1fr); }

  /* Stay & Discover: stack hero+text so 50/50 split doesn't squash */
  .discover__grid { grid-template-columns: 1fr; gap: 48px; }
  .stay__row { grid-template-columns: 1fr; gap: 48px; margin-bottom: clamp(64px, 11vw, 100px); }
  .stay__row--right .stay__visual { order: 0; }
  .stay__row--right .stay__text { order: 0; margin-left: 0; }

  /* Intro: collapse overlap composition into stacked flow */
  .intro__inner { display: flex; flex-direction: column; gap: 36px; max-width: 720px; margin: 0 auto; }
  .intro__heading { max-width: 100%; padding-left: 0; margin: 0; font-size: clamp(48px, 9vw, 80px); }
  .intro__image--left { width: 100%; margin-left: 0; max-height: none; aspect-ratio: 4/3; }
  .intro__right-column {
    position: relative; top: auto; right: auto;
    width: 80%; margin: -10% 0 0 auto;
  }
  .intro__image--right { aspect-ratio: 4/3; max-height: none; }

  /* Stay secondary image flows naturally */
  .stay__image--primary { aspect-ratio: 4/5; max-height: 70vh; }
  .stay__image--secondary {
    position: relative;
    bottom: auto; left: auto !important; right: auto !important;
    width: 78%;
    margin: -12% 0 0 auto;
  }
  .stay__image--secondary img { aspect-ratio: 4/3; }
  .stay__text { padding-top: 24px; }

  /* Section heads */
  .section-head--split { flex-direction: column; align-items: flex-start; gap: 28px; }

  /* Footer cols 5 → 2 at mid-tablet (only above ~720px) */
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

/* Footer collapses to single column earlier so labels don't wrap awkwardly */
@media (max-width: 720px) {
  .footer__cols { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer__col { max-width: 480px; }
  .footer__col .eyebrow { margin-bottom: 18px; }
  .footer__col a { padding: 4px 0; }

  /* Experiences cards a touch tighter so 2 fit comfortably */
  .exp { flex: 0 0 clamp(300px, 42vw, 460px); }

  /* Spa: image becomes static, panel stacks early */
  .spa__panel.is-active { grid-template-columns: 1fr; }
  .spa__image { position: static; aspect-ratio: 16/10; }
}

/* =========================================================
   ULTRA-WIDE (≥ 1600px) - cap stray containers
   ========================================================= */
@media (min-width: 1600px) {
  .conservation__inner { max-width: 1280px; margin: 0 auto; }
  .exp__head,
  .exp__footer { max-width: 1480px; margin-left: auto; margin-right: auto; }
  .discover__grid,
  .stay__row { max-width: 1480px; margin-left: auto; margin-right: auto; }
}

/* =========================================================
   MOBILE OPTIMIZATION - comprehensive overhaul
   Caps oversized headings, fixes slider layouts, hides
   parallax and stickies, tightens padding everywhere.
   ========================================================= */
@media (max-width: 900px) {
  :root {
    --pad-y: clamp(72px, 11vw, 110px);
    --pad-x: clamp(20px, 5vw, 36px);
  }
  /* Display headings - keep readable on small screens */
  .display { font-size: clamp(36px, 9vw, 52px); margin-bottom: 32px; }
  .h-serif { font-size: clamp(22px, 5.5vw, 28px); margin-bottom: 16px; }

  /* Disable parallax on mobile - saves cycles and prevents jumpy clipping */
  [data-parallax] { transform: none !important; }
  .hero__media,
  .banner__media,
  .conservation__media { inset: 0 !important; }

  /* Sticky panels become static so they don't overlap content */
  .spa__image { position: static !important; }

  /* INTRO - heading partially overlaps the image (top in cream, bottom on image) */
  .intro__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .intro__heading {
    order: 1;
    margin: 0;
    padding: clamp(28px, 6vw, 48px) 0 0;
    font-size: clamp(40px, 11vw, 64px);
    color: var(--c-ink);
    z-index: 3;
    position: relative;
  }
  .intro__heading em { color: var(--c-bark); }
  .intro__image--left {
    order: 2;
    width: 100% !important;
    margin: -0.55em 0 0 !important;
    aspect-ratio: 4/5 !important;
    max-height: none !important;
    position: relative;
    z-index: 1;
  }
  .intro__image--left::after { display: none !important; }
  .intro__right-column {
    order: 3;
    width: 100% !important;
    margin: clamp(28px, 5vw, 40px) 0 0 !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: static !important;
    top: auto !important;
    right: auto !important;
  }
  .intro__text-block { order: 1; margin-left: 0; max-width: 100%; }
  .intro__image--right { order: 2; aspect-ratio: 4/3 !important; margin: 32px 0 0 !important; max-height: none !important; }

  /* DISCOVER */
  .discover { padding: var(--pad-y) var(--pad-x); }
  #discover { padding-bottom: var(--pad-y); }
  .discover__media { height: auto; aspect-ratio: 4/3; }

  /* STAY - tighten secondary overlay + normalize bottom padding */
  .stay { padding: var(--pad-y) var(--pad-x); }
  .stay__image--secondary {
    width: 70% !important;
    margin-top: -16% !important;
  }

  /* EXPERIENCES - narrower track padding, smaller cards */
  .experiences { padding: var(--pad-y) 0; }
  .exp__track { padding-left: var(--pad-x); padding-right: var(--pad-x); gap: 18px; }
  .exp { flex: 0 0 78vw; }
  .exp__img { max-height: 50vh; }
  .exp__meta h3 { font-size: 22px; }
  .exp__head .display { margin-bottom: 20px; }
  .exp__intro { font-size: 15px; }
  .exp__progress {
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    gap: 14px;
    margin-top: clamp(36px, 6vw, 56px);
  }
  .exp__arrow { width: 48px; }
  /* Slick dots become the sole nav on phones - bump silhouette + tap target. */
  .exp__dots { gap: 9px; max-width: none; }
  .exp__dot { width: 9px; height: 9px; }
  .exp__dot.is-active { width: 36px; }
  .exp__footer { padding-left: var(--pad-x); padding-right: var(--pad-x); }

  /* WHY - vertical stack carousel, arrows below */
  .why__stage { grid-template-columns: 1fr; gap: 16px; }
  .why__viewport { aspect-ratio: 4/3; order: 1; }
  .why__arrow {
    width: 48px;
    height: 14px;
    background: var(--c-paper);
    border-radius: 999px;
    padding: 16px 18px;
    border: 1px solid var(--c-line);
    height: auto;
  }
  .why__arrow svg { width: 36px; height: 12px; }
  .why__arrow--prev { order: 2; justify-self: start; }
  .why__arrow--next { order: 3; justify-self: end; margin-top: -56px; }
  .why__captions { min-height: 240px; padding: 0 8px; }
  .why__cap-title { font-size: 22px; }

  /* CONSERVATION - info tiles 4 → 2 cols, panel content cleaner */
  .conservation { padding: var(--pad-y) var(--pad-x); }
  .conservation__lead { font-size: 15px; }
  .info__tiles {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 5vw, 36px);
    margin-top: clamp(40px, 7vw, 64px);
  }
  .info__icon { width: 72px; height: 72px; }
  .info__icon svg { width: 34px; height: 34px; }
  .info__label { font-size: 16px; }
  .info__panel-inner { padding: clamp(24px, 5vw, 36px); }
  .info__grid { grid-template-columns: 1fr; gap: 24px; }
  .info__places li,
  .info__awards li {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }
  .info__faq-q { font-size: 14px; line-height: 1.45; }
  .info__faq > summary { padding: 18px 8px 18px 0; gap: 20px; }
  .info__faq-a { font-size: 13px; }

  /* SPA - tabs scroll horizontally so they don't wrap awkwardly */
  .spa { padding: var(--pad-y) var(--pad-x); }
  .spa__head { margin-bottom: clamp(36px, 5vw, 56px); }
  .spa__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 18px;
  }
  .spa__tabs::-webkit-scrollbar { display: none; }
  .spa__tab {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 14px 4px;
    letter-spacing: 0.22em;
  }
  /* SPA list becomes a horizontal swipeable carousel on mobile */
  .spa__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 16px;
    padding: 0 0 4px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    grid-template-columns: none;
  }
  .spa__list::-webkit-scrollbar { display: none; }

  .spa__item {
    flex: 0 0 86%;
    scroll-snap-align: start;
    grid-template-columns: 1fr;
    gap: 14px;
    border-bottom: none;
    padding-bottom: 0;
    background: #fff;
    padding: 14px 14px 22px;
    box-shadow: 0 4px 18px rgba(95,74,52,0.08);
  }
  .spa__item:last-child { padding-bottom: 22px; }
  .spa__item-img { aspect-ratio: 4/3; }
  .spa__item-body { padding: 0 4px; }
  .spa__item header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .spa__item h3 { font-size: 20px; }
  .spa__price { font-size: 17px; }

  /* Slick-style dots beneath each panel */
  .spa__panel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
  }
  .spa__panel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-line);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all .4s var(--ease-out);
  }
  .spa__panel-dot.is-active {
    background: var(--c-primary);
    width: 22px;
    border-radius: 3px;
  }

  /* GUEST LETTERS - 4 → 1 col, arrows below */
  .letters__stage { grid-template-columns: 1fr; gap: 20px; }
  .letters__arrow--prev { order: 2; justify-self: start; }
  .letters__arrow--next { order: 3; justify-self: end; margin-top: -28px; }
  .letters__viewport { order: 1; min-height: 0; }
  .letters__page { position: relative; inset: auto; opacity: 1; transform: none; pointer-events: auto; display: none; }
  .letters__page.is-active { display: block; }
  .letters__grid { grid-template-columns: 1fr; }
  .letter {
    border-right: none !important;
    border-bottom: 1px solid var(--c-line);
    padding: 28px 0;
  }
  .letter:last-child { border-bottom: none; }
  .letter__source { font-size: 20px; min-height: 0; margin-bottom: 16px; }
  .letter__body { font-size: 15px; }

  /* BANNER - let the video breathe, narrower card */
  .banner {
    min-height: 640px;
    padding: 24px var(--pad-x) 32px;
    justify-content: center;
    align-items: flex-end;
  }
  .banner__media { inset: 0 !important; }
  .banner__media video,
  .banner__media img { width: 100%; height: 100%; object-fit: cover; }
  .banner__card {
    width: 100%;
    max-width: 360px;
    min-width: 0;
    margin: 0 auto;
    padding: 28px 22px;
    box-sizing: border-box;
  }
  .banner__heading { font-size: clamp(26px, 7vw, 36px); }
  .banner__sub { font-size: 14px; line-height: 1.6; }
}

/* Phone-sized fine-tuning */
@media (max-width: 520px) {
  :root {
    --pad-x: 20px;
  }
  .display { font-size: clamp(32px, 9vw, 44px); }
  .nav__menu { display: none; }
  .nav__burger { display: flex; }
  /* Book Now further compacted on very narrow phones -- by padding and
     tracking only; the type stays at the 11px floor. */
  .nav__cta {
    height: 40px;
    padding: 0 14px;
    letter-spacing: 0.18em;
    margin-right: 0;
  }

  /* Hero scrolls comfortably */
  .hero__scroll { bottom: 24px; }

  /* Experiences: arrows + progress on a single line, no overflow */
  .exp__progress { gap: 10px; }
  .exp__arrow { width: 42px; }

  /* Conservation tiles → keep 2 in a row even on narrow widths */
  .info__tiles { grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: none; }

  /* Why arrows */
  .why__arrow { padding: 12px 16px; }

  /* Spa: stack image above text inside each item */
  .spa__head .display { margin-bottom: 24px; }
  .spa__item {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .spa__item-img { aspect-ratio: 16/10; max-height: 200px; }

  /* Letters: smaller heading */
  .letters__heading { font-size: clamp(28px, 8vw, 36px); }

  /* Banner */
  .banner__heading { font-size: clamp(30px, 9vw, 40px); }

  /* Footer */
  .footer__logo img { height: clamp(70px, 14vw, 88px); }
  .footer__hero-text { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .line__inner { transform: none !important; }
  .img-reveal img { clip-path: none !important; transform: none !important; }
  .reveal-fade { opacity: 1 !important; transform: none !important; }
}