/* =========================================================
   IRAAVA — Visual Style Guide (CSS)
   Earthy Green & Cerulean→Teal Palette — stable, grounded,
   water-and-forest depth
   ---------------------------------------------------------
   Design principle: a pale, airy canvas with barely-tinted
   green & blue section washes; earthy leaf-green anchors the
   dark surfaces (nav/footer/feature cards); a cerulean→teal
   blue carries every accent (CTAs, links, italics, highlights).
   Text stays a cool near-black on light so every word reads at
   full contrast. Reads reliable and abundant — never loud.

   Canvas / surfaces (near-white — the tint is barely perceptible, text stays dark):
     --cream     near-white     #FAFCFA  — the site's base tone, faintest green
     --paper     card white     #FFFFFF
     --sand      whisper band   #F3F7F3  — barely-there alternating band

   Section washes (WHISPER-soft — a 2–4 point tint, only just visible):
     --snow      himalaya       #F5F9F9  — whisper teal-grey
     --forest-bg forest         #F4F8F3  — whisper leaf green
     --desert-bg desert         #F6F8F5  — whisper sage
     --sky-bg    beaches        #F3F8F8  — whisper cerulean
     --sunset-bg plateau        #F5F8F4  — whisper meadow

   Text:
     --ink        body          #22302A  — cool near-black green-grey (AAA)
     --ink-strong headings      #17241E  — deep forest near-black
     --mute       secondary     #5C6862  — cool grey-green, ~4.9:1 on canvas

   Accent (CTAs, italics, highlights — the cerulean→teal blue):
     --accent     teal blue     #1E7A8C  — passes 4.5:1 w/ white button text
     --accent-deep pressed      #155E6B
     --gold       (kept name)   #2A8FA3  — repurposed to cerulean glow/badge

   Dark surfaces (nav-on-hero, footer, feature cards) — leaf green, AAA w/ --on-dark:
     --espresso   forest green  #2F4A38
     --emerald-deep darkest     #1E3226  — deep forest, water-dark

   Type
     Display    Playfair Display — dramatic high-contrast serif, >= 18px
     UI / body  Mulish — everything small + labels

   Layout   container 1240px · section pad clamp(72px,8vw,120px)
   Radii    8 / 14 / 22px
   Shadow   soft neutral, layered (no coloured casts) + one
            cerulean glow (--shadow-glow) for interactive focus
   Motion   250ms hover, 700ms reveal · cubic-bezier(.22,1,.36,1)
            + spring curve --ease-spring (linear() where supported,
            overshooting cubic-bezier fallback) and duration steps
            --dur-fast 180ms / --dur-base 360ms / --dur-slow 700ms
   ========================================================= */

:root {
  /* ---- Section washes — whisper-soft green & blue (dark text safe) ---- */
  --snow:       #F5F9F9;   /* himalaya — whisper teal-grey */
  --forest-bg:  #F4F8F3;   /* forest — whisper leaf green */
  --desert-bg:  #F6F8F5;   /* desert — whisper sage */
  --sky-bg:     #F3F8F8;   /* beaches — whisper cerulean */
  --sunset-bg:  #F5F8F4;   /* plateau — whisper meadow */

  /* ---- Brand accents — earthy green + cerulean→teal family ---- */
  --forest: #2F4A38;       /* earthy leaf green — nav/footer dark surface */
  --moss:   #3C5B45;       /* mid leaf green */
  --ocean:  #2A8FA3;       /* cerulean-teal accent (water depth) */
  --sunset: #2F7E64;       /* teal-green (replaces warm sunset) */
  --sunset-deep: #235E4B;
  --fuchsia: #1E7A8C;      /* teal blue (repurposed) */
  --teal:    #2A8FA3;      /* cerulean-teal */
  --sand:   #F3F7F3;       /* whisper sage-grey band — barely-there alternating tone */
  --cream:  #FAFCFA;       /* near-white canvas, faintest green */
  --ink:    #22302A;       /* cool near-black green-grey body */
  --mute:   #5C6862;       /* cool grey-green secondary */
  --line:   #D8E2DA;       /* soft green hairline */

  /* ---- Additive tokens ---- */
  --ink-strong: #17241E;   /* deep forest near-black headings */
  --paper: #ffffff;
  --espresso: #2F4A38;       /* forest green — dark surfaces */
  --espresso-deep: #24402F;  /* deep forest */
  --emerald: #26402E;        /* forest */
  --emerald-deep: #1E3226;   /* darkest forest — water-dark */
  --gold: #2A8FA3;         /* cerulean-teal (name kept) — glows/badges/dividers */
  --hairline-dark: rgba(42,143,163,0.28);
  --on-dark: #EAF2ED;
  --on-dark-mute: rgba(234,242,237,0.74);
  --accent: #1E7A8C;       /* cerulean→teal blue — passes 4.5:1 with white button text */
  --accent-deep: #155E6B;  /* deep teal — hover/pressed */
  --on-accent: #ffffff;    /* label on accent fills — flips near-black under the dark theme */

  /* ---- Type ---- */
  --font-display: 'Playfair Display', 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --font-ui: 'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --radius: 22px;

  /* ---- Shadows (soft neutral — no coloured cast) ---- */
  --shadow-sm: 0 2px 10px rgba(23,36,30,0.06);
  --shadow-md: 0 14px 40px rgba(23,36,30,0.10);
  --shadow-lg: 0 28px 70px rgba(23,36,30,0.14);

  /* ---- Layout / motion ---- */
  --container: 1240px;
  --section-pad: clamp(72px, 8vw, 120px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Spring-feel curve for interactive motion (hover pops, toggles, chips).
     This fallback overshoots ~3% and settles; browsers with linear()
     support get a true damped spring via the @supports block below. */
  --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);
  --dur-fast: 180ms;   /* presses, small hovers */
  --dur-base: 360ms;   /* card lifts, cross-fades, toggles */
  --dur-slow: 700ms;   /* reveals, page transitions */
  /* Soft cerulean glow, derived from --accent — the one coloured shadow */
  --shadow-glow: 0 0 0 1px rgba(42, 143, 163, 0.22), 0 10px 34px rgba(42, 143, 163, 0.30);
}

/* Damped-spring easing where linear() is supported: one ~4% overshoot,
   one soft rebound. The cubic-bezier above remains the fallback. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(
      0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%,
      1.017, 1.077 20.4%, 1.121, 1.149 24.3%, 1.159, 1.163 27%, 1.154, 1.129 32.8%,
      1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
      0.997 69.8%, 1.003 76.9%, 1
    );
  }
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--cream);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ----------- Layout helpers ----------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}
.section { padding: var(--section-pad) 0; }
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--sand  { background: var(--sand); }

/* ---- Five-terrain section backgrounds ---- */
/* ice/snow — Himalayas */
.section--snow    { background: var(--snow); }
/* sage/forest green */
.section--forest  { background: var(--forest-bg); }
/* warm desert dune */
.section--desert  { background: var(--desert-bg); }
/* clear sky blue */
.section--sky     { background: var(--sky-bg); }
/* blush sunset peach */
.section--sunset  { background: var(--sunset-bg); }

/* legacy aliases — kept so old classes still resolve */
.section--indigo  { background: var(--snow); }
.section--saffron { background: var(--sunset-bg); }
.section--fuchsia { background: var(--desert-bg); }
.section--teal    { background: var(--sky-bg); }
.section--marigold { background: var(--desert-bg); }
.section--dark    { background: var(--forest-bg); }

/* =========================================================
   FOUNDER'S VISION
   ========================================================= */
.founder__grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}
.founder__media {
  position: relative;
  perspective: 1200px;
}
.founder__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotateY(-4deg) rotateX(2deg);
  transition: transform 0.6s var(--ease);
}
.founder__photo:hover { transform: rotateY(0deg) rotateX(0deg) scale(1.01); }
.founder__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 25%;   /* keep the face up high in the crop */
  display: block;
}
.founder__sig {
  display: block;
  margin-top: 18px;
  text-align: center;
}
.founder__sig strong {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-strong);
  margin-bottom: 2px;
}
.founder__sig span {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.founder__content h2 em { color: var(--accent); font-style: italic; }
.founder__content p { font-size: 16px; line-height: 1.7; color: var(--ink); margin: 0 0 18px; }
.founder__content p strong { color: var(--ink-strong); }
.founder__content p em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}

/* Two-arm founder cards */
.founder__two-arms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 28px 0;
}
.founder__arm {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 24px;
}
.founder__arm-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(42,143,163,0.08);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.founder__arm h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-strong);
  margin: 0 0 8px;
  line-height: 1.25;
}
.founder__arm p {
  font-size: 14px;
  color: var(--mute);
  margin: 0;
  line-height: 1.65;
}
@media (max-width: 640px) {
  .founder__two-arms { grid-template-columns: 1fr; }
}

.founder__cause {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: flex-start;
  margin: 28px 0;
  padding: 22px 24px;
  background: var(--emerald);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.founder__cause-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(42,143,163,0.18);
  display: grid; place-items: center;
  color: var(--gold);
  flex-shrink: 0;
}
.founder__cause-icon svg { width: 26px; height: 26px; }
.founder__cause-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--paper) !important;
  margin: 0 0 6px !important;
  letter-spacing: 0.005em;
}
.founder__cause-body {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: var(--on-dark) !important;
  margin: 0 !important;
}
.founder__cause-body strong { color: var(--gold); font-weight: 700; }

.founder__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.founder__metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 6px;
}
.founder__metric span {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.4;
  display: block;
}

@media (max-width: 1024px) {
  .founder__grid { grid-template-columns: 1fr; gap: 40px; }
  .founder__metrics { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* =========================================================
   EXCLUSIVE HOSTS SCROLLER
   ========================================================= */
.hosts__scroller-wrap {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--line);
}
.hosts__scroller-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 32px;
}
.hosts__scroller-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 36px);
  color: var(--ink-strong);
  margin: 0;
  line-height: 1.18;
  letter-spacing: -0.005em;
}
.hosts__scroller-title em { color: var(--accent); font-style: italic; }

.hosts__scroller {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 18px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--sand);
}
.hosts__scroller::-webkit-scrollbar { height: 8px; }
.hosts__scroller::-webkit-scrollbar-track { background: var(--sand); border-radius: 999px; }
.hosts__scroller::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }

.host-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease);
}
.host-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.host-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.host-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.host-card:hover .host-card__media img { transform: scale(1.05); }
.host-card__since {
  position: absolute;
  top: 14px; left: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(23,36,30,0.86);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.host-card__body { padding: 18px 20px 22px; }
.host-card__loc {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.host-card__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink-strong);
  margin: 0 0 4px;
  line-height: 1.2;
}
.host-card__host {
  font-size: 13px;
  color: var(--mute);
  margin: 0;
}

@media (max-width: 640px) {
  .host-card { flex: 0 0 260px; }
}

/* =========================================================
   MARQUEE STRIP
   ========================================================= */
.marquee {
  background: var(--desert-bg);
  color: var(--ink);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 22px 0;
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 400;
  font-style: italic;
  animation: marquee-scroll 38s linear infinite;
  will-change: transform;
}
.marquee__dot {
  font-style: normal;
  color: var(--accent);
  font-size: 0.55em;
  opacity: 0.6;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

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

/* =========================================================
   3D TILT (driven by JS — sets --tilt-x / --tilt-y vars)
   Applied to stay/dest/story/exp cards for premium feel
   ========================================================= */
.tilt {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.18s var(--ease);
  will-change: transform;
}
.tilt > * { transform: translateZ(0); }
@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; transition: none !important; }
}

/* Coloured glow on key cards while hovered */
.stay-card:hover, .dest-card:hover, .story:hover, .offer-card:hover {
  box-shadow: 0 20px 48px rgba(42,143,163,0.18), 0 0 0 2px rgba(42,143,163,0.28);
}

/* Hero CTA gentle float — subtle, not distracting.
   Wrap into a child so .btn can also receive magnetic translate */
.hero__ctas .btn { animation: cta-float 4.6s ease-in-out infinite; }
.hero__ctas .btn:nth-child(2) { animation-delay: 1.2s; }
@keyframes cta-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* =========================================================
   SCROLL PROGRESS STRIP — fixed top, saffron→gold gradient
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 4px;
  width: 0;
  background: linear-gradient(90deg, var(--accent) 0%, var(--ocean) 100%);
  z-index: 1000;
  box-shadow: 0 0 10px rgba(42,143,163,0.35);
  pointer-events: none;
  transition: width 0.08s linear;
}

/* =========================================================
   HERO PARTICLES — slow saffron drift, ambient only
   ========================================================= */
.hero__particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.hero__particles span {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.18;
  filter: blur(1px);
  animation: hero-drift 22s linear infinite;
  will-change: transform, opacity;
}
.hero__particles span:nth-child(1) { left:  8%; top: 92%; width: 9px;  height: 9px;  animation-duration: 26s; animation-delay: 0s;  }
.hero__particles span:nth-child(2) { left: 22%; top: 96%; width: 5px;  height: 5px;  animation-duration: 19s; animation-delay: -4s; }
.hero__particles span:nth-child(3) { left: 38%; top: 90%; width: 12px; height: 12px; animation-duration: 30s; animation-delay: -10s; }
.hero__particles span:nth-child(4) { left: 54%; top: 94%; width: 6px;  height: 6px;  animation-duration: 22s; animation-delay: -2s; }
.hero__particles span:nth-child(5) { left: 68%; top: 91%; width: 8px;  height: 8px;  animation-duration: 28s; animation-delay: -14s; }
.hero__particles span:nth-child(6) { left: 80%; top: 96%; width: 4px;  height: 4px;  animation-duration: 17s; animation-delay: -6s; }
.hero__particles span:nth-child(7) { left: 90%; top: 93%; width: 7px;  height: 7px;  animation-duration: 24s; animation-delay: -9s; }
.hero__particles span:nth-child(8) { left: 14%; top: 95%; width: 5px;  height: 5px;  animation-duration: 20s; animation-delay: -12s; }
.hero__particles span:nth-child(9) { left: 46%; top: 97%; width: 10px; height: 10px; animation-duration: 32s; animation-delay: -7s; }
@keyframes hero-drift {
  0%   { transform: translate3d(0, 0, 0)             scale(1);   opacity: 0;     }
  10%  {                                                          opacity: 0.18; }
  100% { transform: translate3d(40px, -120vh, 0)    scale(1.4); opacity: 0;     }
}

/* =========================================================
   PARALLAX HELPER — .parallax img is offset via JS-set --py
   ========================================================= */
.parallax-img { transform: translateY(var(--py, 0)); transition: transform 0.05s linear; }
/* Compose with founder photo's existing tilt */
.founder__photo img.parallax-img { transform: translateY(var(--py, 0)); }

/* =========================================================
   MAGNETIC primary CTAs — JS sets --mx / --my, hero CTAs
   excluded so they keep their float animation
   ========================================================= */
.btn.magnetic {
  transform: translate(var(--mx, 0), var(--my, 0));
  transition: transform 0.22s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .hero__ctas .btn { animation: none; }
  .marquee__track { animation: none; }
  .hero__particles span { animation: none; opacity: 0; }
  .scroll-progress { transition: none; }
  .parallax-img, .btn.magnetic { transform: none !important; }
}
.section--dark {
  background: var(--espresso);
  color: var(--on-dark);
}

/* ----------- Typography ----------- */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 20px;
  display: inline-flex;
  align-items: center;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  margin-right: 14px;
  border-radius: 2px;
}
.eyebrow--light { color: var(--on-dark-mute); }
.section__head--center .eyebrow { display: inline-flex; }

.h1, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink-strong);
  margin: 0 0 24px;
}
.h2 {
  font-variation-settings: "opsz" 60;
  font-size: clamp(34px, 4.8vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.005em;
}
.h2 em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.h2--light { color: var(--paper); }
.h2--light em { color: var(--on-dark); }

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.80;
  color: var(--mute);
  margin: 0 0 18px;
  max-width: 60ch;
}

.section__head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 80px); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__sub {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--mute);
  margin: 0;
  max-width: 62ch;
  line-height: 1.75;
}
.section__head--center .section__sub { margin: 0 auto; }
.section__sub--light { color: var(--on-dark-mute); }

/* Section head with a trailing link (amã pattern) */
.section__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: none;
}
.section__head--row .section__head-text { max-width: 720px; }

/* ----------- Buttons ----------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 14px 30px;
  border-radius: 2px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    color 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn--lg { padding: 17px 42px; font-size: 14px; letter-spacing: 0.14em; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 6px 18px rgba(42,143,163, 0.20);
}
.btn--primary:hover {
  background: var(--sunset-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(42,143,163, 0.26);
}

.btn--ghost { background: transparent; color: var(--ink-strong); border-color: transparent; }
.btn--ghost:hover { background: transparent; color: var(--accent); }

.btn--dark { background: var(--espresso); color: #fff; }
.btn--dark:hover { background: var(--espresso-deep); }

.btn--outline-light { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--espresso); border-color: #fff; }

.btn--outline-dark { border-color: var(--ink-strong); color: var(--ink-strong); }
.btn--outline-dark:hover { background: var(--ink-strong); color: #fff; }

/* Thin-underline text link (quiet CTAs — "VIEW DETAILS") */
.link-underline {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-strong);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.link-underline:hover { border-bottom-color: var(--accent); color: var(--accent); }
.link-underline--light { color: var(--on-dark); border-bottom-color: var(--hairline-dark); }
.link-underline--light:hover { color: var(--paper); border-bottom-color: var(--accent); }

/* =========================================================
   NAVIGATION
   ========================================================= */
/* The bar is a permanent dark surface (the "nav-on-hero" dark surface in the
   style guide at the top of this file) rather than a transparent overlay — it
   reads at full contrast over hero photography AND over the pale section
   washes. .is-scrolled no longer flips the palette; it only deepens the tone,
   adds elevation and compacts the height. */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  /* Frosted glass rather than a solid fill: whatever passes underneath is blurred
     into soft colour instead of competing with the labels.

     Two tints, because the pages differ. This default is the safe one - pages
     that open onto a pale panel (account, login, contact, admin) put white text
     over near-white, where a light tint washes out to roughly 3:1. The lighter
     tint below is opted into only where there is actually a photo to frost. */
  background: rgba(23, 36, 30, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 2px 18px rgba(23, 36, 30, 0.14);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* Full-bleed hero directly under the bar - dark imagery, so the tint can drop
   right down and let the blur do the work. Each page names its hero differently.
   .signin-band counts too: solid deep forest, and when it's [hidden] the hero
   behind it is still the next thing the bar frosts over.
   Browsers without :has() keep the denser default: less glassy, still legible. */
.nav:has(+ .hero, + .dest-hero, + .xhero, + .jhero, + .trav-hero, + .stays-hero, + .signin-band) {
  background: rgba(23, 36, 30, 0.22);
}
/* Without blur support the translucency would leave text on raw photography, so
   fall back to a near-opaque bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav,
  .nav:has(+ .hero, + .dest-hero, + .xhero, + .jhero, + .trav-hero, + .stays-hero, + .signin-band) {
    background: rgba(23, 36, 30, 0.88);
  }
}
/* text-shadow, not filter: drop-shadow() - a filter would make .nav__dropdown a
   containing block and reposition the absolutely-placed menus. Same visual
   result on glyphs, no layout side effects. The logo lockup is not a glyph any
   more, so it takes its own drop-shadow() below - it has no absolute children. */
.nav__links a,
.nav__dropdown-trigger,
.nav__auth {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 26px;
  transition: padding 0.3s var(--ease);
}
/* Denser once content is scrolling under it - still glass, just less of it. */
.nav.is-scrolled {
  background: rgba(20, 32, 26, 0.66);
  box-shadow: 0 10px 30px rgba(23, 36, 30, 0.26);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-scrolled { background: var(--emerald-deep); }
}
.nav.is-scrolled .nav__inner { padding-top: 15px; padding-bottom: 15px; }
/* Pages that open straight into a section (no full-bleed hero to sit over) need
   clearance now that the fixed bar is opaque rather than see-through. */
.nav + .section { padding-top: calc(clamp(72px, 8vw, 120px) + 72px); }

/* Fit states. Link counts differ per page (some carry 9 flat links + 3 CTAs
   inside a 1240px container), so "does the row fit" can't be written as one
   breakpoint — script.js measures the bar and steps down only as far as it has
   to:
     .is-tight   → tighten spacing and type
     .is-lean    → also drop the tertiary ghost link (its target is always
                   reachable from another link in the same bar)
     .is-compact → still won't fit, so fall back to the burger menu
   Everything dropped from the bar stays reachable in the burger panel. */
.nav.is-tight .nav__inner { gap: 16px; }
.nav.is-tight .nav__links { gap: 17px; }
.nav.is-tight .nav__links a { font-size: 11.5px; letter-spacing: 0.06em; }
.nav.is-tight .nav__cta { gap: 8px; }
.nav.is-tight .nav__cta .btn,
.nav.is-tight .nav__auth { padding-left: 19px; padding-right: 19px; letter-spacing: 0.09em; }

.nav.is-lean .nav__cta .btn--ghost { display: none; }

.nav.is-compact .nav__links,
.nav.is-compact .nav__cta { display: none; }
.nav.is-compact .nav__burger { display: flex; }

/* ---- Brand lockup ------------------------------------------------------
   The logo is the official 2026 artwork: the star-and-leaf mark beside the
   IRAAVA wordmark (assets/logo-lockup-h.svg, both drawn as outlines so no font
   has to load). It is painted as a CSS mask over `currentColor`, which is why
   there is only one file for every surface - the lockup simply inherits the
   colour the bar, the footer or a cream band already sets, instead of shipping
   a second, recoloured copy and keeping the two in sync.
   Fallback: where masks are unsupported the box stays hidden and
   .nav__logo-text renders the name as ordinary display type, as it used to. */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--on-dark);
  transition: color 0.3s var(--ease);
}
/* --dark is for the lockup reused on light bands (footer CTA blocks). Inside
   the bar the surface is always dark, so the light lockup wins there. */
.nav__logo--dark { color: var(--espresso); }
.nav .nav__logo,
.nav.is-scrolled .nav__logo { color: var(--on-dark); }
.nav__logo-mark { display: none; }
.nav__logo-text {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
@supports ((mask-image: url("/assets/logo-lockup-h.svg")) or
           (-webkit-mask-image: url("/assets/logo-lockup-h.svg"))) {
  .nav__logo-mark {
    display: block;
    /* 359.6 x 100 is the lockup's own viewBox, so height drives the width. */
    height: 34px;
    width: 122px;
    background-color: currentColor;
    -webkit-mask: url("/assets/logo-lockup-h.svg") no-repeat left center / contain;
            mask: url("/assets/logo-lockup-h.svg") no-repeat left center / contain;
  }
  .nav .nav__logo-mark {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
            drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
  }
  /* The name stays in the DOM for screen readers and for copy/paste. */
  .nav__logo-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
}
@media (max-width: 720px) {
  .nav__logo-mark { height: 28px; width: 101px; }
}

.nav__links { display: flex; gap: 30px; align-items: center; }
.nav__links a {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark);
  position: relative;
  padding: 6px 2px;
  white-space: nowrap;   /* never let a two-word label ("Our Vision") wrap */
  transition: color 0.25s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a:hover { color: var(--paper); }
.nav.is-scrolled .nav__links a { color: var(--on-dark); }
.nav.is-scrolled .nav__links a:hover { color: var(--paper); }
.nav__links a.is-current { color: var(--paper); }
.nav__links a.is-current::after { transform: scaleX(1); }

.nav__cta { display: flex; gap: 12px; align-items: center; }
.nav__cta .btn--ghost,
.nav.is-scrolled .nav__cta .btn--ghost { color: var(--on-dark); }
.nav__cta .btn--ghost:hover,
.nav.is-scrolled .nav__cta .btn--ghost:hover { color: var(--paper); }

/* "Sign in / My Account" nav link — same filled box as the primary CTA beside
   it (.btn.btn--primary), minus the attention pulse so only one button in the
   nav animates. Reads the same on the transparent and scrolled navs. */
.nav__auth {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(42, 143, 163, 0.20);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.nav__auth:hover {
  background: var(--sunset-deep);
  color: var(--on-accent);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(42, 143, 163, 0.26);
}
.nav.is-scrolled .nav__auth { color: var(--on-accent); }

.nav__burger {
  display: none;
  background: transparent;
  border: 0;
  width: 36px; height: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--on-dark);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.is-scrolled .nav__burger span,
.nav__burger.is-open span { background: var(--on-dark); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 24px 28px;
  /* Matches the now-solid bar it drops out of. */
  background: var(--emerald-deep);
  border-top: 1px solid var(--hairline-dark);
}
.nav__mobile a {
  padding: 15px 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hairline-dark);
  color: var(--on-dark);
}
.nav__mobile a:hover { color: var(--paper); }
.nav__mobile-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
/* The secondary CTA in the panel is marked up as .btn--outline-dark; the panel
   itself is now a dark surface, so flip it to the light outline treatment. */
.nav__mobile-cta .btn--outline-dark {
  border-color: var(--hairline-dark);
  color: var(--on-dark);
}
.nav__mobile-cta .btn--outline-dark:hover {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--espresso);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a.is-current { color: color-mix(in srgb, var(--accent) 45%, #fff); }

/* Prominent "Sign in / My Account" button pinned to the top of the burger menu.
   Overrides the plain-link .nav__mobile a rules so it reads as a real button. */
.nav__mobile-signin.nav__mobile-signin {
  margin: 4px 0 18px;
  padding: 14px 20px;
  border-bottom: none;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: center;
  color: var(--on-accent);
}

/* =========================================================
   HERO — full-bleed image carousel + search bar
   ========================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  transition: opacity 1.4s var(--ease);
}
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__slide .hero__content { padding-top: 150px; padding-bottom: 230px; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
.hero__slide.is-active .hero__media img {
  animation: heroZoom 9s var(--ease) forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(23,36,30,0.55) 0%, rgba(23,36,30,0.12) 38%, rgba(23,36,30,0.66) 100%),
    linear-gradient(90deg, rgba(23,36,30,0.45) 0%, rgba(0,0,0,0) 58%);
}

.hero__content {
  position: relative;
  z-index: 2;
  padding-top: 150px;
  padding-bottom: 230px;
  max-width: 960px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 7.8vw, 112px);
  line-height: 0.96;
  letter-spacing: -0.018em;
  margin: 18px 0 26px;
  text-shadow: 0 10px 60px rgba(0,0,0,0.35);
}
/* italic accent line — cerulean→teal glow, echoing world.html's "World" */
.hero__title em {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(112deg, #EAF2ED 0%, var(--gold) 55%, var(--accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  max-width: 56ch;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 36px;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Carousel controls */
.hero__dots {
  position: absolute;
  z-index: 3;
  left: clamp(20px, 4vw, 56px);
  bottom: 150px;
  display: flex;
  gap: 12px;
}
.hero__dot {
  width: 34px; height: 2px;
  background: rgba(255, 255, 255, 0.4);
  border: 0;
  padding: 0;
  transition: background 0.3s var(--ease);
}
.hero__dot.is-active { background: var(--accent); }
.hero__arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(23,36,30, 0.12);
  color: #fff;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.hero__arrow:hover { background: var(--accent); border-color: var(--accent); }
.hero__arrow svg { width: 18px; height: 18px; }
.hero__arrow--prev { left: clamp(16px, 3vw, 40px); }
.hero__arrow--next { right: clamp(16px, 3vw, 40px); }

/* Search / plan-your-stay bar */
.searchbar {
  position: absolute;
  z-index: 4;
  left: 0; right: 0; bottom: 0;
  background: rgba(244,247,243, 0.97);
  backdrop-filter: blur(8px);
  border-top: 3px solid var(--accent);
}
.searchbar__inner {
  display: grid;
  /* Where · dates · guests · submit. The two native date fields collapse into
     one .dp trigger, so this is four columns even though the markup declares
     five native controls. */
  grid-template-columns: 1.4fr 1.4fr 0.9fr auto;
  align-items: stretch;
}
.searchbar__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px clamp(18px, 2vw, 28px);
  border-right: 1px solid var(--line);
  text-align: left;
}
.searchbar__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.searchbar__input {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-strong);
  border: 0;
  background: transparent;
  outline: none;
  padding: 0;
  width: 100%;
}
.searchbar__input::placeholder { color: #8A968F; }
.searchbar__submit {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 clamp(24px, 3vw, 44px);
  transition: background 0.25s var(--ease);
}
.searchbar__submit:hover { background: var(--sunset-deep); }

/* The Where / dates / Guests popovers stand in for .searchbar__field wrappers,
   so they have to carry that field's padding and divider themselves — otherwise
   they read as three cramped buttons dropped into a roomy bar. */
.searchbar__inner > .wh,
.searchbar__inner > .dp,
.searchbar__inner > .gs { border-right: 1px solid var(--line); }
.searchbar__inner > .wh > .wh-trigger,
.searchbar__inner > .dp > .dp-trigger,
.searchbar__inner > .gs > .gs-trigger {
  height: 100%; border-radius: 0;
  padding: 20px clamp(18px, 2vw, 28px);
}
.searchbar__inner > .wh .wh-trigger__key,
.searchbar__inner > .gs .gs-trigger__key,
.searchbar__inner > .dp .dp-trigger__key {
  font-size: 12px; letter-spacing: 0.18em;
}

/* =========================================================
   HERO — floating Iraava.ai concierge preview
   ---------------------------------------------------------
   A glassy mock of the real chat widget (bot.js), typing out a traveler
   reply on a loop (script.js). Clicking it opens the actual widget.
   Desktop-and-tall-viewports only: below 1100px wide or 760px tall it
   would crowd the searchbar / datepicker / hero arrows, so it hides —
   the real launcher button is always there anyway.
   ========================================================= */
.hero-concierge {
  position: absolute;
  z-index: 3;
  right: clamp(100px, 9vw, 140px);   /* clear of the raised chat launcher */
  bottom: 150px;                      /* clear of the searchbar */
  width: min(340px, 30vw);
  text-align: left;
  font-family: var(--font-ui);
  background: rgba(23, 36, 30, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  padding: 14px 16px 16px;
  color: var(--on-dark);
  cursor: pointer;
  animation: concierge-glow 5s ease-in-out infinite;
  /* Float on the standalone translate property so it composes with the
     hover transform instead of fighting it. */
  translate: 0 0;
  transition: transform var(--dur-base) var(--ease-spring);
}
.hero-concierge:hover,
.hero-concierge:focus-visible { transform: translateY(-4px) scale(1.02); }
.hero-concierge:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Glow breathes while the whole card floats ±5px on the standalone
   `translate` property (composes with the hover transform; browsers
   without it still get the glow). */
@keyframes concierge-glow {
  0%, 100% {
    translate: 0 0;
    box-shadow: 0 0 0 1px rgba(42, 143, 163, 0.18),
      0 14px 44px rgba(15, 24, 20, 0.40), 0 0 22px rgba(42, 143, 163, 0.16);
  }
  50% {
    translate: 0 -5px;
    box-shadow: 0 0 0 1px rgba(42, 143, 163, 0.32),
      0 14px 44px rgba(15, 24, 20, 0.40), 0 0 44px rgba(42, 143, 163, 0.32);
  }
}
.hero-concierge__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.hero-concierge__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(42, 143, 163, 0.22);
  color: var(--gold);
  display: grid; place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}
.hero-concierge__title {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
}
.hero-concierge__title em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--on-dark-mute);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hero-concierge__title em::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4CC38A;
}
.hero-concierge__q,
.hero-concierge__a {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 12px;
}
.hero-concierge__q {
  background: rgba(42, 143, 163, 0.30);
  color: #fff;
  border-bottom-right-radius: 3px;
  margin: 0 0 8px 44px;
}
.hero-concierge__a {
  background: rgba(250, 252, 250, 0.92);
  color: var(--ink-strong);
  border-bottom-left-radius: 3px;
  margin-right: 30px;
  min-height: 58px;
}
.hero-concierge__caret {
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  animation: concierge-caret 0.9s steps(2, jump-none) infinite;
}
@keyframes concierge-caret { 50% { opacity: 0; } }
/* Typing indicator — three dots shown while the reply is "thinking" */
.hero-concierge__dots { display: none; gap: 4px; padding: 4px 0 2px; }
.hero-concierge.is-thinking .hero-concierge__dots { display: inline-flex; }
.hero-concierge.is-thinking .hero-concierge__caret { display: none; }
.hero-concierge__dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mute);
  animation: typing-dot 1.2s ease-in-out infinite;
}
.hero-concierge__dots i:nth-child(2) { animation-delay: 0.2s; }
.hero-concierge__dots i:nth-child(3) { animation-delay: 0.4s; }
/* Same three-dot bounce the real widget uses. Declared here too so this file
   never depends on bot.css being present (identical definition — either wins). */
@keyframes typing-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30%            { transform: translateY(-6px); opacity: 1; }
}
@media (max-width: 1099px), (max-height: 759px) {
  .hero-concierge { display: none; }
}

/* =========================================================
   STATS strip
   ========================================================= */
.stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats__item {
  padding: 40px clamp(16px, 2vw, 32px);
  text-align: center;
  border-right: 1px solid var(--line);
}
.stats__item:last-child { border-right: 0; }
.stats__item strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  color: var(--ink-strong);
  line-height: 1;
  margin-bottom: 10px;
}
.stats__item span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

/* =========================================================
   INTRO / brand statement
   ========================================================= */
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.intro__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 52px;
  padding-top: 44px;
  border-top: 1px solid var(--line);
}
.pillar__icon {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 14px;
}
.pillar h4 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  color: var(--ink-strong);
}
.pillar p { margin: 0; font-size: 15.5px; color: var(--mute); line-height: 1.65; }

/* =========================================================
   DESTINATIONS grid (amã signature) + terrain filter
   ========================================================= */
.dest__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 44px;
}
.dest__chip {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 20px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.dest__chip:hover { color: var(--ink-strong); border-color: var(--ink-strong); }
.dest__chip.is-active { background: var(--espresso); border-color: var(--espresso); color: #fff; }

.dest__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
  max-height: 760px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 12px 18px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--sand);
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
}
.dest__grid::-webkit-scrollbar { width: 8px; }
.dest__grid::-webkit-scrollbar-track { background: var(--sand); border-radius: 999px; }
.dest__grid::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.dest__grid > .dest-card { scroll-snap-align: start; }
.dest-card { display: block; color: inherit; }
.dest-card.is-hidden { display: none; }
.dest-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  margin-bottom: 18px;
}
.dest-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.dest-card:hover .dest-card__media img { transform: scale(1.06); }
.dest-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(23,36,30,0.5) 100%);
  opacity: 0.85;
}
.dest-card__count {
  position: absolute;
  z-index: 2;
  left: 16px; bottom: 16px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.dest-card__region {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 6px;
}
.dest-card__place {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  color: var(--ink-strong);
  margin: 0 0 4px;
  line-height: 1.1;
}
.dest-card__desc { margin: 0; font-size: 15px; color: var(--mute); line-height: 1.6; }

/* =========================================================
   FEATURED STAYS — property cards
   ========================================================= */
.stays__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-height: 820px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 12px 18px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--sand);
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
}
.stays__grid::-webkit-scrollbar { width: 8px; }
.stays__grid::-webkit-scrollbar-track { background: var(--sand); border-radius: 999px; }
.stays__grid::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.stays__grid > .stay-card { scroll-snap-align: start; }
.stay-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.stay-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.stay-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.stay-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.stay-card:hover .stay-card__media img { transform: scale(1.05); }
.stay-card__label {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(244,247,243, 0.95);
  color: var(--espresso);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: var(--r-sm);
}
.stay-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.stay-card__loc {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 8px;
}
.stay-card__name {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.18;
  color: var(--ink-strong);
  margin: 0 0 14px;
}
.stay-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--mute);
}
.stay-card__meta span { display: inline-flex; align-items: center; }
.stay-card__foot { margin-top: auto; }

/* =========================================================
   EXPERIENCES grid
   ========================================================= */
/* Filter strip above the experiences grid */
.exp__filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 0 0 32px;
}
.exp__chip {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mute);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.exp__chip:hover { color: var(--ink-strong); border-color: var(--accent); transform: translateY(-1px); }
.exp__chip.is-active {
  background: var(--emerald);
  border-color: var(--emerald);
  color: var(--on-dark);
}
.exp-card.is-cat-hidden { display: none; }

.exp__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 24px;
  max-height: 760px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 14px 18px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--sand);
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
}
.exp__grid::-webkit-scrollbar { width: 8px; }
.exp__grid::-webkit-scrollbar-track { background: var(--sand); border-radius: 999px; }
.exp__grid::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }

.exp-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 26px 28px 26px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: inherit;
  scroll-snap-align: start;
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.exp-card::after {
  content: "\2192";
  position: absolute;
  right: 22px; top: 50%;
  transform: translate(8px, -50%);
  font-size: 20px;
  color: var(--accent);
  opacity: 0;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  pointer-events: none;
}
.exp-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(23,36,30,0.12), 0 0 0 1px rgba(42,143,163,0.20);
}
.exp-card:hover::after {
  transform: translate(0, -50%);
  opacity: 1;
}
.exp-card__num {
  position: static;
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 500;
  color: var(--accent);
  line-height: 1;
  padding-top: 4px;
  letter-spacing: -0.02em;
  opacity: 0.85;
  text-shadow: 0 1px 0 rgba(23,36,30,0.04);
}
.exp-card__chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 6px !important;
}
.exp-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--ink-strong);
  margin: 0 0 6px;
  line-height: 1.25;
}
.exp-card p {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: var(--mute);
  line-height: 1.55;
}
.exp-card__why {
  font-size: 12.5px;
  color: var(--ink);
  margin: 6px 0 0 !important;
}
.exp-card__why em {
  font-style: normal;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* =========================================================
   VALUES — for travelers (clean hairline cards)
   ========================================================= */
.values__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.value {
  padding: 44px 40px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease);
}
.value:hover { background: var(--paper); }
.value__num {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 18px;
}
.value h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink-strong);
  line-height: 1.2;
}
.value p { margin: 0; color: var(--mute); font-size: 16px; line-height: 1.7; }

/* =========================================================
   FOR TRAVELERS — promise row, iconified value cards, CTA strip
   ========================================================= */
.travel-promise {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0 0 44px;
  padding: 28px 32px;
  background: var(--emerald);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.travel-promise__cell {
  padding: 0 6px;
  border-right: 1px solid rgba(42,143,163,0.25);
}
.travel-promise__cell:last-child { border-right: 0; }
.travel-promise__cell strong {
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 6px;
  letter-spacing: 0.005em;
}
.travel-promise__cell span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--on-dark-mute);
}
@media (max-width: 900px) {
  .travel-promise { grid-template-columns: 1fr; gap: 18px; padding: 24px; }
  .travel-promise__cell { border-right: 0; border-bottom: 1px solid rgba(42,143,163,0.25); padding-bottom: 16px; }
  .travel-promise__cell:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* Iconified value cards — only inside .travel-values */
.travel-values { gap: 0; }      /* keep the bordered-grid feel */
.travel-values .value {
  position: relative;
  padding: 36px 32px 32px;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.travel-values .value:hover {
  background: var(--paper);
  transform: translateY(-3px);
  z-index: 2;
  box-shadow: 0 14px 30px rgba(23,36,30,0.10);
}
.travel-values .value__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(42,143,163,0.08);
  color: var(--accent);
  display: grid; place-items: center;
  margin-bottom: 18px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.4s var(--ease);
}
.travel-values .value__icon svg { width: 26px; height: 26px; }
.travel-values .value:hover .value__icon {
  background: var(--emerald);
  color: var(--gold);
  transform: rotate(-4deg) scale(1.05);
}
.travel-values .value__num {
  position: absolute;
  top: 18px; right: 24px;
  font-family: var(--font-display);
  font-size: 38px;
  color: var(--gold);
  opacity: 0.35;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Lead-driving CTA strip below the cards */
.travel-cta {
  margin-top: 44px;
  padding: 36px 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: 1.4fr auto;
  align-items: center;
  gap: 28px;
  box-shadow: var(--shadow-md);
}
.travel-cta__copy h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--ink-strong);
  line-height: 1.2;
}
.travel-cta__copy p {
  margin: 0;
  color: var(--mute);
  font-size: 16px;
  line-height: 1.7;
}
.travel-cta__btns {
  display: flex; flex-wrap: wrap; gap: 14px;
}
@media (max-width: 900px) {
  .travel-cta { grid-template-columns: 1fr; padding: 28px; }
}

/* =========================================================
   HOSTS band
   ========================================================= */
.hosts__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.hosts__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
}
.hosts__media img { width: 100%; height: 100%; object-fit: cover; }
.hosts__media-tag {
  position: absolute;
  left: 22px; bottom: 22px;
  background: rgba(244,247,243, 0.97);
  border-radius: var(--r-md);
  padding: 14px 18px;
  max-width: 72%;
}
.hosts__media-tag span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.hosts__media-tag strong {
  font-family: var(--font-display);
  color: var(--ink-strong);
  font-size: 18px;
  font-weight: 500;
  display: block;
}

/* Hosts media carousel — 4-slide cross-fade like the home hero */
.hosts__carousel { isolation: isolate; }
.hosts__carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  pointer-events: none;
}
.hosts__carousel-slide.is-active { opacity: 1; pointer-events: auto; }
.hosts__carousel-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
.hosts__carousel-slide.is-active img {
  animation: hostsZoom 8s var(--ease) forwards;
}
@keyframes hostsZoom { to { transform: scale(1); } }

.hosts__carousel-dots {
  position: absolute;
  bottom: 22px; right: 22px;
  display: flex;
  gap: 8px;
  z-index: 3;
}
.hosts__carousel-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.hosts__carousel-dot:hover { transform: scale(1.18); }
.hosts__carousel-dot.is-active { background: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .hosts__carousel-slide.is-active img { animation: none; transform: scale(1); }
}
.hosts__benefits { display: grid; gap: 0; margin: 36px 0; }
.benefit {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.benefit:last-child { border-bottom: 1px solid var(--line); }
.benefit__num {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold);
  font-weight: 500;
}
.benefit h4 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--ink-strong);
  font-weight: 500;
}
.benefit p { margin: 0; color: var(--mute); font-size: 16px; line-height: 1.7; }
.hosts__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* =========================================================
   OFFERS / journeys
   ========================================================= */
.offers__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-height: 860px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 14px 18px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--sand);
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
}
.offers__grid::-webkit-scrollbar { width: 8px; }
.offers__grid::-webkit-scrollbar-track { background: var(--sand); border-radius: 999px; }
.offers__grid::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.offers__grid > .offer-card { scroll-snap-align: start; }
.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  border-radius: var(--r-lg);
  overflow: hidden;
  color: #fff;
  /* Each card is an <a> to /offers/<group>/<id>. The CTA inside it is a
     <span> for that reason — an anchor cannot nest inside an anchor. */
  text-decoration: none;
  cursor: pointer;
}
.offer-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.offer-card__media { position: absolute; inset: 0; }
.offer-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.offer-card:hover .offer-card__media img { transform: scale(1.06); }
.offer-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,36,30,0.15) 0%, rgba(23,36,30,0.78) 100%);
}
.offer-card__body { position: relative; z-index: 2; margin-top: auto; padding: 30px 28px 28px; }
.offer-card__validity {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin: 0 0 12px;
}
.offer-card__body h3 {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 10px;
}
.offer-card__body p { margin: 0 0 18px; font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.55; }

/* =========================================================
   STORIES / journal
   ========================================================= */
.stories__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-height: 900px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 14px 18px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--sand);
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
}
.stories__grid::-webkit-scrollbar { width: 8px; }
.stories__grid::-webkit-scrollbar-track { background: rgba(216,226,218,0.18); border-radius: 999px; }
.stories__grid::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.stories__grid > .story { scroll-snap-align: start; }
.story--lg { grid-row: auto; }     /* drop the row-span; uniform grid now */
.story {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: inherit;
  position: relative;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease);
}
.story:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(23,36,30,0.32);
  border-color: var(--accent);
}
.story__media { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.story__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,36,30,0) 60%, rgba(23,36,30,0.55) 100%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.story:hover .story__media::after { opacity: 1; }
.story__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.story:hover .story__media img { transform: scale(1.06); }
.story__body {
  padding: 22px 24px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.story__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 700;
  padding: 5px 11px;
  background: rgba(42,143,163,0.08);
  border-radius: 999px;
  align-self: flex-start;
  line-height: 1;
}
.story__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink-strong);
  margin: 0 0 10px;
}
.story__body p {
  font-size: 13.5px;
  color: var(--mute);
  line-height: 1.55;
  margin: 0 0 16px;
}
.story__body::after {
  content: "Read the story \2192";
  margin-top: auto;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.story:hover .story__body::after {
  transform: translateX(4px);
  color: var(--accent-deep);
}

/* Make the first story span two columns -- a "featured" hero card */
.stories__grid > .story:first-child {
  grid-column: span 2;
}
.stories__grid > .story:first-child .story__media { aspect-ratio: 16 / 8; }
.stories__grid > .story:first-child .story__body h3 { font-size: 28px; line-height: 1.18; }
.stories__grid > .story:first-child .story__body p { font-size: 16px; }
.story__body p { margin: 0; font-size: 14px; color: var(--mute); line-height: 1.55; }

/* =========================================================
   PARTNERS row
   ========================================================= */
.partners__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
/* =========================================================
   PARTNERSHIPS — collab section redesign
   ========================================================= */
.collab__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 48px 0 52px;
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(255,255,255,0.6);
}
.collab__stat {
  padding: 28px 24px;
  text-align: center;
  border-right: 1.5px solid rgba(0,0,0,0.08);
}
.collab__stat:last-child { border-right: none; }
.collab__stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  color: var(--forest);
  line-height: 1;
  margin-bottom: 8px;
}
.collab__stat span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--mute);
  font-weight: 600;
}

.collab__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 44px;
}
.collab-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 26px;
  background: rgba(255,255,255,0.72);
  border: 1.5px solid rgba(0,0,0,0.08);
  border-radius: var(--r-lg);
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
  position: relative;
}
.collab-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.10);
  border-color: var(--accent);
  background: var(--paper);
}
.collab-card__num {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  opacity: 0.35;
  flex-shrink: 0;
  min-width: 48px;
}
.collab-card:hover .collab-card__num { opacity: 0.65; }
.collab-card__icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(42,143,163,0.08);
  color: var(--accent);
  display: grid; place-items: center;
  transition: background 0.3s var(--ease);
}
.collab-card:hover .collab-card__icon { background: rgba(42,143,163,0.16); }
.collab-card__icon svg { width: 22px; height: 22px; }
.collab-card__body { flex: 1; }
.collab-card__body h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.25;
}
.collab-card__body p {
  font-size: 14px;
  color: var(--mute);
  margin: 0;
  line-height: 1.65;
}
.collab-card__cta {
  position: absolute;
  bottom: 22px;
  right: 26px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  transform: translateX(4px);
}
.collab-card:hover .collab-card__cta {
  opacity: 1;
  transform: translateX(0);
}

.collab__cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 32px 40px;
  background: var(--forest);
  border-radius: var(--r-lg);
  color: #fff;
}
.collab__cta-bar p {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 400;
  line-height: 1.3;
  margin: 0;
  opacity: 0.95;
}

/* =========================================================
   FOUNDER — USP grid + cause block
   ========================================================= */
.founder__usps {
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1.5px solid rgba(0,0,0,0.08);
}
.founder__usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.founder__usp {
  padding: 28px 24px;
  background: rgba(255,255,255,0.65);
  border-radius: var(--r-lg);
  border: 1.5px solid rgba(0,0,0,0.07);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}
.founder__usp:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}
.founder__usp-icon {
  font-size: 28px;
  color: var(--forest);
  margin-bottom: 14px;
  display: block;
}
.founder__usp h5 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}
.founder__usp p {
  font-size: 13.5px;
  color: var(--mute);
  line-height: 1.65;
  margin: 0;
}

.founder__cause {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-top: 48px;
  padding: 36px 40px;
  background: rgba(23,36,30,0.07);
  border: 1.5px solid rgba(23,36,30,0.18);
  border-radius: var(--r-lg);
}
.founder__cause-icon {
  font-size: 52px;
  line-height: 1;
  flex-shrink: 0;
}
.founder__cause-body h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 500;
  color: var(--forest);
  margin: 0 0 12px;
}
.founder__cause-body p {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.7;
  margin: 0 0 10px;
}
.founder__cause-pledge {
  font-size: 14.5px;
  color: var(--forest);
}

.partner-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: inherit;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}
.partner-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
  transform: translateY(-4px);
  transition: transform 0.35s var(--ease);
}
.partner-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(23,36,30,0.14);
  border-color: var(--accent);
}
.partner-card:hover::before { transform: translateY(0); }

.partner-card__icon {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: rgba(42,143,163,0.10);
  color: var(--accent);
  display: grid; place-items: center;
  margin-bottom: 22px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), transform 0.4s var(--ease);
}
.partner-card__icon svg { width: 28px; height: 28px; }
.partner-card:hover .partner-card__icon {
  background: var(--emerald);
  color: var(--gold);
  transform: rotate(-3deg) scale(1.05);
}

.partner-card h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--ink-strong);
  margin: 0 0 10px;
  line-height: 1.2;
}
.partner-card p { margin: 0 0 18px; color: var(--mute); font-size: 14px; line-height: 1.6; }
.partner-card__chip {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  padding: 5px 11px;
  background: rgba(42,143,163,0.14);
  border-radius: 999px;
  align-self: flex-start;
  margin-bottom: 18px;
}
.partner-card__cta {
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}
.partner-card:hover .partner-card__cta { gap: 14px; color: var(--accent-deep); }

/* =========================================================
   BAND — full-bleed CTA / brand statement
   ========================================================= */
.band {
  position: relative;
  overflow: hidden;
  padding: clamp(110px, 15vw, 200px) 0;
  text-align: center;
  color: #fff;
}
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img { width: 100%; height: 100%; object-fit: cover; }
.band__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,36,30,0.62) 0%, rgba(23,36,30,0.7) 100%);
}
.band__content { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.band__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.2vw, 66px);
  line-height: 1.05;
  margin: 0 0 32px;
  color: #fff;
}
.band__title em { font-style: italic; color: var(--on-dark); }
.band__btns { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: start;
}
.contact__channels { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 16px; }
.contact__channels li { display: flex; align-items: center; gap: 16px; font-size: 15px; color: var(--ink); }
.contact__channels span {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--gold);
  display: grid; place-items: center;
  font-size: 15px;
}

.contact__form, .form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(28px, 4vw, 46px);
  display: grid;
  gap: 18px;
}
.field { display: grid; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-strong);
}
.field input, .field select, .field textarea {
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  background: var(--cream);
  outline: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  background: var(--paper);
  box-shadow: 0 0 0 3px rgba(42,143,163, 0.10);
}
.field textarea { resize: vertical; min-height: 120px; }
.field select, select.searchbar__input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5 6 6.5l5-5' stroke='%236c6862' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
}
.field select { padding-right: 40px; }
select.searchbar__input { background-position: right 0 center; padding-right: 22px; }
.contact__success {
  margin: 4px 0 0;
  padding: 14px 16px;
  background: rgba(42,143,163, 0.08);
  color: var(--sunset-deep);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
}

/* =========================================================
   LEGAL DOCUMENTS
   Privacy, Terms and the Host agreement — privacy.html,
   terms.html, host-agreement.html, the legacy twins of the
   export's /legal/* pages. One block so the three stay
   typographically identical, the same job LegalShell.tsx
   does on the Next side.

   The top padding clears the fixed nav: these pages open on
   prose, not on a hero that could sit under it.
   ========================================================= */
.legal { background: var(--cream); padding: 130px 0 clamp(64px,8vw,96px); }
.legal__doc { max-width: 70ch; margin: 0 auto; }
.legal__title { font-family: var(--font-display); font-size: clamp(34px,5vw,52px); font-weight: 500; line-height: 1.15; color: var(--ink-strong); margin: 10px 0 0; }
.legal__updated { font-size: 14px; color: var(--mute); margin: 10px 0 0; }
.legal__doc h2 {
  font-family: var(--font-display);
  font-size: clamp(22px,2.6vw,28px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-strong);
  margin: 44px 0 0;
}
.legal__doc p { font-size: 16px; line-height: 1.8; color: var(--ink); margin: 16px 0 0; }
.legal__doc ul { margin: 16px 0 0; padding-left: 22px; }
.legal__doc li { font-size: 16px; line-height: 1.8; color: var(--ink); margin-top: 8px; }
.legal__doc strong { color: var(--ink-strong); font-weight: 700; }
.legal__doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.legal__doc a:hover { color: var(--accent); }
.legal__more {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.legal__more a {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
}
.legal__more a:hover { color: var(--ink-strong); }

@media (max-width: 640px) {
  .legal { padding-top: 108px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--espresso); color: var(--on-dark); padding: clamp(72px,8vw,104px) 0 28px; }
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  padding-bottom: 56px;
  border-bottom: 1px solid var(--hairline-dark);
}
.footer__brand .nav__logo { color: var(--on-dark); }
.footer__brand p { margin: 18px 0 0; font-size: 14px; line-height: 1.7; color: var(--on-dark-mute); max-width: 40ch; }
.footer__news h5 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--paper);
  margin: 0 0 8px;
}
.footer__news p { margin: 0 0 18px; font-size: 14px; color: var(--on-dark-mute); }
.footer__newsform { display: flex; gap: 10px; max-width: 420px; }
.footer__newsform input {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  outline: none;
}
.footer__newsform input::placeholder { color: var(--on-dark-mute); }
.footer__newsform input:focus { border-color: var(--accent); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 56px 0;
}
.footer__col h5 {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  margin: 0 0 20px;
}
.footer__col a {
  display: block;
  font-size: 14px;
  padding: 7px 0;
  color: rgba(234,242,237, 0.88);
  transition: color 0.25s var(--ease);
}
.footer__col a:hover { color: var(--paper); }

.footer__legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-dark);
  font-size: 12.5px;
  color: var(--on-dark-mute);
}
.footer__legal a { color: rgba(234,242,237, 0.8); }
.footer__legal a:hover { color: var(--paper); }
.footer__legal p { margin: 0; }

/* ---- Social icon bar ---- */
.footer__social { display: flex; gap: 12px; margin-top: 24px; }
.footer__social-link {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-dark);
  border-radius: 50%;
  color: var(--on-dark-mute);
  transition: color .25s var(--ease), background .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.footer__social-link svg { width: 18px; height: 18px; }
.footer__social-link:hover {
  color: var(--espresso);
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* ---- Footer decorative champagne lattice ---- */
.footer { position: relative; overflow: hidden; }
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><path d='M22 0 44 22 22 44 0 22z' fill='none' stroke='%23D4B36A' stroke-width='1'/></svg>");
  background-size: 44px 44px;
}
.footer > .container { position: relative; z-index: 1; }

/* ---- Ornamental section-head flourish ---- */
.ornament {
  display: block;
  width: 128px;
  margin: 18px auto 6px;
  color: var(--accent);
  opacity: 0.7;
}
.ornament svg { display: block; width: 100%; height: auto; }

/* =========================================================
   REVEAL ANIMATION — richer lift + scale
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.98);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}
.reveal.is-in { opacity: 1; transform: translateY(0) scale(1); }

/* Slide-in from left variant */
.reveal--left {
  transform: translateX(-32px) scale(0.98);
}
.reveal--left.is-in { transform: translateX(0) scale(1); }

/* Slide-in from right variant */
.reveal--right {
  transform: translateX(32px) scale(0.98);
}
.reveal--right.is-in { transform: translateX(0) scale(1); }

/* =========================================================
   CARD HOVER LIFT + GLOW
   ========================================================= */
.stay-card,
.dest-card,
.host-card,
.story,
.partner-card,
.exp-card,
.diff,
.value {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.stay-card:hover,
.dest-card:hover,
.host-card:hover,
.story:hover,
.exp-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 24px 56px rgba(23,36,30,0.18), 0 0 0 1px rgba(42,143,163,0.12);
}

.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(23,36,30,0.14);
}

/* =========================================================
   EYEBROW — animated gradient underline sweep
   ========================================================= */
@keyframes eyebrow-sweep {
  0%   { background-size: 0% 2px; }
  100% { background-size: 100% 2px; }
}

.section__head .eyebrow,
.section__head--center .eyebrow {
  position: relative;
}

/* =========================================================
   BUTTON — ripple & glow pulse on primary
   ========================================================= */
@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(42,143,163,0.24), 0 0 0 0 rgba(42,143,163,0.35); }
  50%       { box-shadow: 0 6px 28px rgba(42,143,163,0.38), 0 0 0 8px rgba(42,143,163,0); }
}

.btn--primary {
  animation: btn-pulse 3.2s ease-in-out infinite;
}
.btn--primary:hover {
  animation: none;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px rgba(42,143,163,0.40);
}

/* =========================================================
   SECTION DECORATIVE GRAPHIC ACCENTS
   ========================================================= */

/* Floating compass-rose watermark on dark sections */
.section--dark::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 340px;
  height: 340px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='96' fill='none' stroke='rgba(42,143,163,0.10)' stroke-width='1'/%3E%3Ccircle cx='100' cy='100' r='72' fill='none' stroke='rgba(42,143,163,0.08)' stroke-width='1'/%3E%3Ccircle cx='100' cy='100' r='48' fill='none' stroke='rgba(42,143,163,0.06)' stroke-width='1'/%3E%3Cline x1='100' y1='4' x2='100' y2='196' stroke='rgba(42,143,163,0.07)' stroke-width='1'/%3E%3Cline x1='4' y1='100' x2='196' y2='100' stroke='rgba(42,143,163,0.07)' stroke-width='1'/%3E%3Cline x1='30' y1='30' x2='170' y2='170' stroke='rgba(42,143,163,0.05)' stroke-width='1'/%3E%3Cline x1='170' y1='30' x2='30' y2='170' stroke='rgba(42,143,163,0.05)' stroke-width='1'/%3E%3Cpolygon points='100,8 108,92 100,108 92,92' fill='rgba(42,143,163,0.14)'/%3E%3Cpolygon points='100,192 108,108 100,92 92,108' fill='rgba(42,143,163,0.08)'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  animation: compass-spin 80s linear infinite;
  opacity: 0.9;
}
.section--dark { position: relative; overflow: hidden; }

@keyframes compass-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Wave divider between light and dark sections */
.section--wave-top {
  position: relative;
}
.section--wave-top::before {
  content: "";
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0,32 C240,64 480,0 720,32 C960,64 1200,0 1440,32 L1440,64 L0,64 Z' fill='%23EAF4F4'/%3E%3C/svg%3E");
  background-size: cover;
  pointer-events: none;
}

/* Animated dot-grid texture on cream sections */
.section--cream::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(23,36,30,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  animation: grid-drift 20s linear infinite;
}
.section--cream { position: relative; overflow: hidden; }

@keyframes grid-drift {
  from { background-position: 0 0; }
  to   { background-position: 28px 28px; }
}

/* Ensure content sits above pseudo-element textures */
.section--cream > *, .section--dark > * { position: relative; z-index: 1; }

/* =========================================================
   FLOATING ACCENT SHAPES (decorative blobs)
   ========================================================= */
@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(18px, -22px) scale(1.04); }
  66%       { transform: translate(-14px, 14px) scale(0.97); }
}

.hero__content::after {
  content: "";
  position: absolute;
  bottom: 80px;
  right: 10%;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(42,143,163,0.18) 0%, transparent 70%);
  pointer-events: none;
  animation: blob-float 9s ease-in-out infinite;
}

/* =========================================================
   STATS — number count-up shimmer
   ========================================================= */
@keyframes stat-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.stats__item strong,
.founder__metric strong {
  background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 40%, var(--accent) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: stat-shimmer 4s linear infinite;
}

/* =========================================================
   TERRAIN TAB — active indicator glow
   ========================================================= */
.terrain__tab.is-active {
  box-shadow: 0 0 0 2px var(--accent), 0 4px 16px rgba(42,143,163,0.22);
}

/* =========================================================
   IMAGE HOVER ZOOM (cards with overflow:hidden)
   ========================================================= */
.stay-card__media img,
.dest-card__media img,
.story__media img,
.exp-card__media img {
  transition: transform 0.7s var(--ease);
}
.stay-card:hover .stay-card__media img,
.dest-card:hover .dest-card__media img,
.story:hover .story__media img,
.exp-card:hover .exp-card__media img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .reveal--left, .reveal--right { transform: none; }
  .hero__slide { transition: opacity 0.01ms; }
  .hero-concierge { animation: none; translate: none; }
  .hero-concierge__caret { animation: none; opacity: 0; }
  .section--cream::after { animation: none; }
  .section--dark::before { animation: none; }
  .btn--primary { animation: none; }
  .stats__item strong, .founder__metric strong { animation: none; }
}

/* =========================================================
   HOST PAGE — additional sections
   ========================================================= */
.hero--page { min-height: 86vh; min-height: 86svh; }
.hero--page .hero__content { padding-top: 170px; padding-bottom: 150px; }

/* Differentiators */
.diff__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.diff {
  padding: 50px 44px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease);
}
.diff:hover { background: var(--paper); }
.diff h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink-strong);
  margin: 0 0 14px;
}
.diff p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--mute); max-width: 50ch; }

/* Steps */
.steps { display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 44px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  color: var(--gold);
  line-height: 1;
}
.step__body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  color: var(--ink-strong);
  margin: 0 0 12px;
}
.step__body p { margin: 0; color: var(--mute); font-size: 15px; line-height: 1.65; max-width: 50ch; }
.step__media { border-radius: var(--r-md); overflow: hidden; aspect-ratio: 5 / 4; }
.step__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.step:hover .step__media img { transform: scale(1.04); }

/* Testimonials */
.testimonials {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 24px;
  max-height: 760px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 14px 18px 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--sand);
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
}
.testimonials::-webkit-scrollbar { width: 8px; }
.testimonials::-webkit-scrollbar-track { background: var(--sand); border-radius: 999px; }
.testimonials::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.testimonials > .testimonial { scroll-snap-align: start; }
.testimonial {
  margin: 0;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--r-lg);
  padding: 38px 32px 30px;
  transition: border-color 0.35s var(--ease);
}
.testimonial:hover { border-color: rgba(234,242,237,0.32); }
.testimonial blockquote {
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.5;
  color: var(--paper);
  font-weight: 400;
  font-style: italic;
}
.testimonial blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 52px;
  color: var(--accent);
  line-height: 0.7;
  margin-bottom: 14px;
}
.testimonial figcaption { display: flex; align-items: center; gap: 14px; }
.testimonial figcaption img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testimonial figcaption strong {
  display: block;
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}
.testimonial figcaption span { font-size: 12px; color: var(--on-dark-mute); letter-spacing: 0.04em; }

/* Testimonial card overrides when placed on a light surface (cream/sand) */
.section--cream .testimonial,
.section--sand .testimonial,
.section--paper .testimonial {
  border-color: var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-md);
}
.section--cream .testimonial:hover,
.section--sand .testimonial:hover,
.section--paper .testimonial:hover { border-color: var(--accent); }
.section--cream .testimonial blockquote,
.section--sand .testimonial blockquote,
.section--paper .testimonial blockquote { color: var(--ink-strong); }
.section--cream .testimonial figcaption strong,
.section--sand .testimonial figcaption strong,
.section--paper .testimonial figcaption strong { color: var(--ink-strong); }
.section--cream .testimonial figcaption span,
.section--sand .testimonial figcaption span,
.section--paper .testimonial figcaption span { color: var(--mute); }

/* FAQ */
.faq__wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq__wrap .section__head { margin-bottom: 0; max-width: none; }
.faq { display: grid; gap: 0; }
.faq__item { border-top: 1px solid var(--line); padding: 24px 0; }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-ui);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.3;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  font-family: var(--font-ui);
  font-size: 24px;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.faq__item[open] summary::after {
  content: "\2212";
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.faq__item p {
  margin: 16px 0 4px;
  color: var(--mute);
  font-size: 15px;
  line-height: 1.7;
  max-width: 62ch;
  animation: faqOpen 0.4s var(--ease);
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Apply form */
.apply__wrap { max-width: 900px; }
.apply__form { margin-top: 8px; }

/* Start-hosting gateway (host.html #apply) — the three steps between deciding
   to host and the console at /host, then the door into it. Replaced the
   application form: a host now files the stay themselves and a curator still
   confirms it before it goes live. */
.apply__steps {
  display: grid; gap: 18px; margin-top: 34px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.apply__step {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  padding: 24px 22px;
}
.apply__step-n {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--accent); margin: 0 0 10px; letter-spacing: 1px;
}
.apply__step-h {
  font-family: var(--font-display); font-size: 20px;
  color: var(--ink-strong); margin: 0 0 8px;
}
.apply__step-p { margin: 0; color: var(--mute); font-size: 14.5px; line-height: 1.65; }

.apply__cta { margin-top: 34px; text-align: center; }
.apply__cta-alt { margin: 14px 0 0; color: var(--mute); font-size: 14.5px; }
.apply__cta-alt a { color: var(--accent); font-weight: 600; }

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

  .hero__content { padding-bottom: 290px; }
  .hero__dots { display: none; }
  .searchbar__inner { grid-template-columns: 1fr 1fr; }
  .searchbar__field,
  .searchbar__inner > .wh,
  .searchbar__inner > .dp,
  .searchbar__inner > .gs { border-bottom: 1px solid var(--line); }
  .searchbar__field:nth-child(even) { border-right: 0; }
  /* Three fields on a two-up grid: Where | dates / Guests | — so the dates
     field ends its row and Guests ends the grid. Both drop their divider. */
  .searchbar__inner > .dp, .searchbar__inner > .gs { border-right: 0; }
  .searchbar__submit { grid-column: 1 / -1; padding: 18px; }

  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__item:nth-child(2) { border-right: 0; }
  .stats__item:nth-child(1), .stats__item:nth-child(2) { border-bottom: 1px solid var(--line); }

  .intro__grid { grid-template-columns: 1fr; }
  .intro__pillars { grid-template-columns: 1fr; }

  .dest__grid { grid-template-columns: repeat(3, 1fr); max-height: 720px; }
  .stays__grid { grid-template-columns: repeat(2, 1fr); max-height: 760px; }
  .exp__grid { grid-template-columns: 1fr 1fr; max-height: 720px; }
  .values__grid { grid-template-columns: 1fr 1fr; }
  .offers__grid { grid-template-columns: 1fr; }

  .hosts__grid { grid-template-columns: 1fr; }
  .hosts__media { aspect-ratio: 4 / 3; max-height: 480px; }

  .stories__grid { grid-template-columns: 1fr 1fr; max-height: 780px; }
  .story--lg { grid-column: auto; grid-row: auto; }

  .partners__grid { grid-template-columns: 1fr 1fr; }
  .contact__grid { grid-template-columns: 1fr; }

  .collab__stats { grid-template-columns: 1fr 1fr; }
  .collab__stat:nth-child(2) { border-right: 0; }
  .collab__stat:nth-child(1), .collab__stat:nth-child(2) { border-bottom: 1.5px solid rgba(0,0,0,0.08); }
  .collab__grid { grid-template-columns: 1fr; }
  .collab__cta-bar { flex-direction: column; text-align: center; }

  .founder__usp-grid { grid-template-columns: 1fr 1fr; }
  .founder__cause { flex-direction: column; gap: 16px; padding: 28px 28px; }

  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 32px; }

  .diff__grid { grid-template-columns: 1fr; }
  .diff { padding: 38px 28px; }
  .step { grid-template-columns: 60px 1fr; gap: 24px; }
  .step__media { display: none; }
  .testimonials { grid-template-columns: 1fr; max-height: 640px; }
  .faq__wrap { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hero__content { padding-top: 116px; padding-bottom: 330px; }
  .hero__arrow { display: none; }

  .searchbar__inner { grid-template-columns: 1fr 1fr; }
  .searchbar__field { padding: 15px 18px; }

  .stats__grid { grid-template-columns: 1fr 1fr; }
  .stats__item { padding: 28px 16px; }

  .dest__grid { grid-template-columns: repeat(2, 1fr); max-height: 600px; }
  .stays__grid { grid-template-columns: 1fr; max-height: 640px; }
  .exp__grid { grid-template-columns: 1fr; max-height: 640px; }
  .values__grid { grid-template-columns: 1fr; }
  .stories__grid { grid-template-columns: 1fr; max-height: 640px; }
  .stories__grid > .story:first-child { grid-column: auto; }
  .stories__grid > .story:first-child .story__media { aspect-ratio: 4 / 3; }
  .stories__grid > .story:first-child .story__body h3 { font-size: 20px; }
  .story--lg { grid-column: auto; }
  .partners__grid { grid-template-columns: 1fr; }

  .collab__stats { grid-template-columns: 1fr 1fr; }
  .collab__grid { grid-template-columns: 1fr; }
  .collab-card { flex-wrap: wrap; }
  .collab-card__cta { position: static; opacity: 1; transform: none; margin-top: 14px; }
  .collab__cta-bar { padding: 28px 24px; gap: 20px; }

  .founder__usp-grid { grid-template-columns: 1fr; }
  .founder__cause { padding: 24px 20px; }

  .footer__cols { grid-template-columns: 1fr; }
  .footer__newsform { flex-direction: column; }

  .field-row { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 12px; }
  .step__num { font-size: 40px; }
  .nav__inner { padding-top: 16px; padding-bottom: 16px; }
  .section__head--row { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   NAV DROPDOWN — For Partners
   ========================================================= */
.nav__dropdown {
  position: relative;
}
.nav__dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: inherit;
  font-weight: 500;
  color: var(--on-dark);
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.nav.is-scrolled .nav__dropdown-trigger { color: var(--on-dark); }
.nav__dropdown-trigger:hover,
.nav__dropdown-trigger[aria-expanded="true"] { color: color-mix(in srgb, var(--accent) 45%, #fff); }
.nav__dropdown-trigger svg { transition: transform 0.25s var(--ease); }
.nav__dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  min-width: 260px;
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
  z-index: 200;
}
.nav__dropdown-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__dropdown-menu a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--r-md);
  transition: background 0.18s var(--ease);
  text-decoration: none;
}
.nav__dropdown-menu a:hover { background: var(--cream); }
.nav__dropdown-menu a strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-strong);
  margin-bottom: 2px;
}
.nav__dropdown-menu a span {
  font-size: 12.5px;
  color: var(--mute);
}

.nav__mobile-divider {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  padding: 16px 0 6px;
  border-top: 1px solid var(--hairline-dark);
  margin-top: 4px;
}

/* =========================================================
   PARTNER GATEWAY CARDS (homepage section)
   ========================================================= */
.partner-gateway-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
.partner-gateway-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 28px;
  border: 1px solid var(--hairline-dark);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.06);
  color: var(--on-dark);
  text-decoration: none;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  position: relative;
}
.partner-gateway-card:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.24);
}
.partner-gateway-card--featured {
  background: rgba(42,143,163,0.14);
  border-color: rgba(42,143,163,0.35);
}
.partner-gateway-card--featured:hover {
  background: rgba(42,143,163,0.22);
}
.partner-gateway-card__icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(42,143,163,0.14);
  display: grid;
  place-items: center;
  color: var(--gold);
  flex-shrink: 0;
}
.partner-gateway-card__icon svg { width: 26px; height: 26px; }
.partner-gateway-card__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.partner-gateway-card h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.partner-gateway-card p {
  font-size: 15px;
  color: var(--on-dark-mute);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.partner-gateway-card__cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.05em;
  margin-top: 4px;
}
@media (max-width: 1024px) {
  .partner-gateway-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
}

/* =========================================================
   IRAAVA.AI CHAT WIDGET
   ---------------------------------------------------------
   Moved to bot.css, which bot.js loads itself — the widget also runs on
   pages that don't load this file (login.html). Edit bot.css.
   ========================================================= */

/* =========================================================
   EXPLORE HUB — homepage section linking to all pages
   ========================================================= */
.explore-hub {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.explore-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.explore-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.55s var(--ease);
}
.explore-card:hover .explore-card__bg { transform: scale(1.07); }
.explore-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,17,14,0.88) 0%, rgba(23,36,30,0.45) 55%, transparent 100%);
  transition: opacity 0.3s var(--ease);
}
.explore-card:hover .explore-card__veil { opacity: 0.92; }
.explore-card__body {
  position: relative;
  z-index: 2;
  padding: 28px 26px;
}
.explore-card__eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.explore-card h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 10px;
}
.explore-card p {
  font-size: 14px;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 32ch;
}
.explore-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.explore-card:hover .explore-card__cta { opacity: 1; transform: translateY(0); }

@media (max-width: 1024px) {
  .explore-hub { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .explore-hub { grid-template-columns: 1fr; }
  .explore-card { min-height: 260px; }
}

/* =========================================================
   BRAND MANIFESTO + HOW IT WORKS — homepage redesign
   ========================================================= */

/* WHY IRAAVA */
.iraava-why {
  background: linear-gradient(155deg, #1E3226 0%, #24402F 45%, #1E7A8C 100%);
  padding: clamp(72px, 9vw, 120px) 0;
  position: relative;
  overflow: hidden;
}
.iraava-why::before {
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 520px; height: 520px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='96' fill='none' stroke='rgba(42,143,163,0.07)' stroke-width='1'/%3E%3Ccircle cx='100' cy='100' r='64' fill='none' stroke='rgba(42,143,163,0.05)' stroke-width='1'/%3E%3Cline x1='100' y1='4' x2='100' y2='196' stroke='rgba(42,143,163,0.04)' stroke-width='1'/%3E%3Cline x1='4' y1='100' x2='196' y2='100' stroke='rgba(42,143,163,0.04)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  animation: compass-spin 90s linear infinite;
  pointer-events: none;
}
.iraava-why__inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(48px, 7vw, 100px);
  align-items: flex-start;
  position: relative;
  z-index: 1;
}
.iraava-why__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.iraava-why__stat {
  background: rgba(255,255,255,0.05);
  padding: 24px 20px;
  text-align: center;
  transition: background 0.3s var(--ease);
}
.iraava-why__stat:hover { background: rgba(255,255,255,0.09); }
.iraava-why__stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 6px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--gold) 50%, var(--accent) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: stat-shimmer 4s linear infinite;
}
.iraava-why__stat span {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}
.iraava-why__copy .eyebrow { color: var(--gold); }
.iraava-why__copy .h2 { color: #fff; }
.iraava-why__copy .h2 em { color: var(--gold); }
.iraava-why__copy .lede { color: rgba(255,255,255,0.75); margin-bottom: 36px; }
.iraava-why__pillars { display: flex; flex-direction: column; gap: 24px; margin-bottom: 36px; }
.iraava-why__pillar { display: flex; align-items: flex-start; gap: 16px; }
.iraava-why__pillar-icon {
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
  min-width: 28px;
  margin-top: 2px;
}
.iraava-why__pillar h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 4px;
  line-height: 1.25;
}
.iraava-why__pillar p {
  font-size: 14.5px;
  color: rgba(255,255,255,0.65);
  margin: 0;
  line-height: 1.65;
}

/* HOW IT WORKS — STEPS */
.iraava-steps {
  background: var(--cream);
  padding: clamp(64px, 8vw, 112px) 0;
}
.iraava-steps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.iraava-steps__step {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.iraava-steps__num {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  opacity: 0.6;
}
.iraava-steps__img {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.iraava-steps__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.iraava-steps__step:hover .iraava-steps__img img { transform: scale(1.05); }
.iraava-steps__step h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-strong);
  margin: 0;
  line-height: 1.2;
}
.iraava-steps__step p {
  font-size: 15px;
  color: var(--mute);
  margin: 0;
  line-height: 1.65;
}
/* Connector line between steps */
.iraava-steps__grid::before {
  display: none;
}

@media (max-width: 1024px) {
  .iraava-why__inner { grid-template-columns: 1fr; }
  .iraava-why__stats { grid-template-columns: repeat(3, 1fr); }
  .iraava-steps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .iraava-why__stats { grid-template-columns: repeat(2, 1fr); }
  .iraava-steps__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   DATE RANGE PICKER  (.dp-*)  — see datepicker.js
   ---------------------------------------------------------
   Airbnb-style check-in/check-out calendar. Popover with two months on
   desktop, bottom sheet with a scrolling month list on mobile.

   Design tokens, all existing:
     selected pill / focus   --accent        #1E7A8C
     in-range band           --accent @ 12%
     text / muted            --ink / --mute
     hairlines               --line
     surface                 --paper on --cream
   ========================================================= */

.dp { position: relative; display: block; }

/* Native inputs stay in the form and keep working; only their wrappers hide.
   Clipped rather than display:none so `required` can still be validated. */
.dp-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.dp-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* ---- Trigger ---- */
.dp-trigger {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 10px 14px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-ui); text-align: left; color: var(--ink);
  border-radius: var(--r-sm);
  transition: background 0.2s var(--ease);
}
.dp-trigger:hover { background: rgba(30, 122, 140, 0.06); }
.dp-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dp-trigger__seg { display: flex; flex-direction: column; gap: 2px; min-width: 92px; }
.dp-trigger__key {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mute);
}
.dp-trigger__in, .dp-trigger__out { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.dp-trigger__in.is-empty, .dp-trigger__out.is-empty { color: var(--mute); font-weight: 500; }
.dp-trigger__sep { color: var(--line); }

/* ---- Panel ---- */
.dp-panel {
  position: absolute; z-index: 60; top: calc(100% + 10px); left: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px;
}
.dp-panel[hidden] { display: none; }
/* Never wider than the screen, whatever the month count. */
.dp-panel { max-width: min(92vw, 640px); }
/* Anchored right when the field sits near a container's right edge. */
.dp--right .dp-panel { left: auto; right: 0; }

.dp-grids { display: flex; gap: 30px; }
.dp-month { min-width: 268px; }
.dp-month__head {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin-bottom: 12px; min-height: 34px;
}
.dp-month__title {
  font-family: var(--font-ui); font-size: 15px; font-weight: 700;
  color: var(--ink-strong); margin: 0; flex: 1; text-align: center;
}
.dp-nav {
  width: 32px; height: 32px; flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  font-size: 18px; line-height: 1; cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.dp-nav:hover { border-color: var(--accent); background: rgba(30, 122, 140, 0.07); }
.dp-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dp-nav--prev { order: -1; }

.dp-grid { border-collapse: collapse; width: 100%; }
.dp-dow {
  font-size: 11px; font-weight: 700; color: var(--mute);
  padding-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em;
}
.dp-cell { padding: 1px 0; text-align: center; }

/* The connecting band lives on the cell so the range reads as one continuous
   strip; the circles below sit on top of it. */
.dp-cell--band { background: rgba(30, 122, 140, 0.12); }
.dp-cell--band-start { border-radius: 999px 0 0 999px; }
.dp-cell--band-end { border-radius: 0 999px 999px 0; }

.dp-day {
  width: 38px; height: 38px;
  display: inline-grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 500;
  color: var(--ink); cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.dp-day:hover:not(.is-disabled):not(.is-start):not(.is-end) {
  background: rgba(30, 122, 140, 0.14);
}
.dp-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dp-day.is-today { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.dp-day.is-in-range { color: var(--accent-deep); }
.dp-day.is-start, .dp-day.is-end {
  background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.dp-day.is-disabled {
  color: var(--mute); opacity: 0.38;
  cursor: not-allowed; text-decoration: line-through;
}

/* ---- Flexibility tabs ---- */
.dp-flex {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 4px; margin-bottom: 18px;
  background: var(--sand); border-radius: 999px;
}
.dp-flex__tab {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  color: var(--mute); padding: 8px 15px; border-radius: 999px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.dp-flex__tab:hover { color: var(--ink); }
.dp-flex__tab.is-active { background: var(--paper); color: var(--accent-deep); box-shadow: var(--shadow-sm); }
.dp-flex__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Footer ---- */
.dp-error {
  margin: 12px 0 0; padding: 9px 12px;
  font-size: 12.5px; color: #b3261e;
  background: #fdecea; border: 1px solid #f4c7c3; border-radius: var(--r-sm);
}
.dp-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.dp-summary { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.dp-clear {
  border: 0; background: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 600;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  padding: 8px 4px;
}
.dp-clear:hover { color: var(--accent-deep); }
.dp-apply {
  border: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 700;
  color: var(--on-accent); background: var(--accent);
  padding: 11px 22px; border-radius: var(--r-sm);
  transition: background 0.2s var(--ease);
}
.dp-apply:hover:not(:disabled) { background: var(--accent-deep); }
.dp-apply:disabled { opacity: 0.45; cursor: not-allowed; }
.dp-clear:focus-visible, .dp-apply:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Mobile: bottom sheet, scrolling month list, sticky footer ---- */
body.dp-locked { overflow: hidden; }

/* While the full-screen sheet is open the nav is unreachable anyway — hide it.
   (A z-index on .dp-panel can't win here: reveal-animation transforms on the
   sheet's ancestors trap it in a lower stacking context than the fixed nav.) */
body.dp-locked .nav { visibility: hidden; }

/* The hero searchbar's backdrop-filter makes it a containing block for fixed
   descendants, which pins the "full-screen" sheet inside the bar instead of
   the viewport. The frost is invisible under a full-screen sheet anyway, so
   drop it while the sheet is open and let position: fixed mean the viewport. */
body.dp-locked .searchbar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (max-width: 700px) {
  .dp-panel {
    position: fixed; inset: auto 0 0 0; top: 0;
    /* Above the sticky nav (z-index 1000) — the full-screen sheet owns the
       viewport while open, otherwise the flexibility tabs render under the
       translucent nav bar. Below the burger drawer (9000), which can't be
       open at the same time anyway. */
    z-index: 2000;
    border-radius: 0; border: 0;
    /* Override the desktop width guard — the sheet is full-bleed on mobile. */
    max-width: none;
    padding: 16px 16px 0;
    display: flex; flex-direction: column;
  }
  .dp-grids {
    flex-direction: column; gap: 26px;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    flex: 1; min-height: 0;
    padding-bottom: 12px;
  }
  .dp-month { min-width: 0; }
  .dp-month__title { text-align: left; }
  .dp-day { width: 40px; height: 40px; font-size: 14.5px; }
  .dp-foot {
    position: sticky; bottom: 0;
    margin-top: 0; padding: 14px 0;
    background: var(--paper); flex-wrap: wrap;
  }
  .dp-summary { flex: 1 0 100%; margin-bottom: 8px; }
  .dp-apply { flex: 1; }
  .dp-flex { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .dp-flex::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-trigger, .dp-day, .dp-nav, .dp-apply, .dp-flex__tab { transition: none; }
}

/* Stay cards are now real links to /stays/<slug> — crawlers follow the href,
   keyboard users get a focusable target, and the JS modal still intercepts a
   plain left click for quick browsing. The overlay sits under the card's own
   buttons so those keep working. */
.stay-card { position: relative; }
.stay-card__link {
  position: absolute; inset: 0; z-index: 1;
  text-indent: -9999px; overflow: hidden;
}
.stay-card__link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-md);
}
.stay-card > *:not(.stay-card__link) { position: relative; z-index: 2; pointer-events: none; }
.stay-card button, .stay-card a:not(.stay-card__link) { pointer-events: auto; }

/* =========================================================
   SEARCH FIELDS — "Where" + "Guests" popovers (searchfields.js)
   ---------------------------------------------------------
   The two interactive fields flanking the date picker in the
   search bar. They deliberately share the picker's shell
   vocabulary — same trigger geometry, same panel surface,
   same mobile full-screen sheet (body.dp-locked) — so the
   three fields read as one control, not three widgets.

   .dp-hidden / .dp-sr are reused rather than duplicated:
   both are generic visually-hidden helpers.
   ========================================================= */

.wh, .gs { position: relative; display: block; }

/* ---- Triggers (mirror .dp-trigger's geometry) ---- */
.wh-trigger, .gs-trigger {
  display: flex; flex-direction: column; gap: 2px;
  width: 100%; padding: 10px 14px;
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-ui); text-align: left; color: var(--ink);
  border-radius: var(--r-sm);
  transition: background 0.2s var(--ease);
}
.wh-trigger:hover, .gs-trigger:hover { background: rgba(30, 122, 140, 0.06); }
.wh-trigger:focus-visible, .gs-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wh-trigger__key, .gs-trigger__key {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--mute);
}
.wh-trigger__val, .gs-trigger__val {
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wh-trigger__val.is-empty, .gs-trigger__val.is-empty { color: var(--mute); font-weight: 500; }

/* ---- Panels ---- */
.wh-panel, .gs-panel {
  position: absolute; z-index: 60; top: calc(100% + 10px); left: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 18px;
}
.wh-panel[hidden], .gs-panel[hidden] { display: none; }
/* Flipped by the popover shell when the panel would run past the fold. */
.wh.is-above > .wh-panel,
.gs.is-above > .gs-panel { top: auto; bottom: calc(100% + 10px); }
.wh-panel { width: min(92vw, 520px); }
.gs-panel { width: min(92vw, 360px); }
/* Guests sits at the right end of the bar — anchor its panel to that edge so
   it doesn't overflow the viewport. */
.gs-panel { left: auto; right: 0; }

/* ---- Sheet header — mobile only (see SheetHead in searchfields.js) ---- */
.sf-sheet-head { display: none; }

/* ---- Where: live search input ---- */
.wh-search {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 14px; margin-bottom: 14px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.wh-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 122, 140, 0.12);
}
.wh-search__icon { width: 18px; height: 18px; flex: none; color: var(--mute); }
/* Two-class selector on purpose: these popovers mount *inside* host forms
   (.search-panel, .book-box) that style their descendant inputs. A bare
   .wh-search__input loses to `.book-box input` and inherits its chrome. */
.wh-search .wh-search__input {
  flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-ui); font-size: 14.5px; color: var(--ink);
}
.wh-search__input::placeholder { color: var(--mute); }
.wh-search__clear {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: var(--sand); color: var(--mute);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.wh-search__clear:hover { background: var(--line); color: var(--ink); }

/* ---- Where: quick chips ---- */
.wh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wh-chip {
  border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: 7px 15px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--ink); cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.wh-chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.wh-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wh-chip.is-active { background: var(--emerald-deep); border-color: var(--emerald-deep); color: var(--on-dark); }

/* ---- Where: terrain card grid ---- */
.wh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wh-card {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px 9px 9px; text-align: left;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); cursor: pointer;
  font-family: var(--font-ui);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.wh-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.wh-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wh-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.wh-card__thumb {
  flex: none; width: 52px; height: 52px; border-radius: 10px;
  overflow: hidden; background: var(--sand);
}
.wh-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wh-card__icon {
  flex: none; width: 52px; height: 52px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--sky-bg); color: var(--accent-deep);
}
.wh-card__icon svg { width: 24px; height: 24px; }
.wh-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wh-card__label {
  font-size: 13.5px; font-weight: 700; color: var(--ink-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wh-card__hint {
  font-size: 11.5px; color: var(--mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The nearby card spans the row — it's the "I'm flexible" escape hatch, not a
   sixth terrain, and the geolocation round-trip needs somewhere to say so. */
.wh-card--nearby { grid-column: 1 / -1; }
.wh-card--nearby.is-busy { opacity: 0.65; pointer-events: none; }
.wh-card--nearby.is-busy .wh-card__label::after {
  content: ' — locating…'; font-weight: 500; color: var(--mute);
}

/* ---- Where: auto-suggest list ---- */
.wh-suggest { max-height: 340px; overflow-y: auto; margin: -4px -4px 0; padding: 0 4px; }
.wh-suggest__title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--mute);
  margin: 12px 0 6px; padding: 0 8px;
}
.wh-suggest__title:first-child { margin-top: 4px; }
.wh-suggest__row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 8px; border: 0; border-radius: var(--r-sm);
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-ui);
  transition: background 0.15s var(--ease);
}
.wh-suggest__row:hover { background: var(--sand); }
.wh-suggest__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wh-suggest__icon {
  flex: none; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--sand); color: var(--accent-deep);
}
.wh-suggest__icon svg { width: 20px; height: 20px; }
.wh-suggest__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wh-suggest__label {
  font-size: 14px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wh-suggest__sub {
  font-size: 12px; color: var(--mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wh-suggest__empty { font-size: 13.5px; color: var(--mute); padding: 16px 8px; line-height: 1.5; }

/* ---- Guests: stepper rows ---- */
.gs-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 2px;
}
.gs-row + .gs-row { border-top: 1px solid var(--line); }
.gs-row__text { display: flex; flex-direction: column; gap: 2px; }
.gs-row__label { font-size: 14.5px; font-weight: 700; color: var(--ink-strong); }
.gs-row__hint { font-size: 12px; color: var(--mute); }
.gs-ctl { display: flex; align-items: center; gap: 8px; flex: none; }
.gs-step {
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.gs-step:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-deep); background: rgba(30, 122, 140, 0.07); }
.gs-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gs-step:disabled { opacity: 0.35; cursor: not-allowed; }
/* Two-class selector — see the note on .wh-search__input above. */
.gs-ctl .gs-num {
  width: 42px; padding: 6px 0;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; text-align: center;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink);
}
.gs-ctl .gs-num:hover { border-color: var(--line); }
.gs-ctl .gs-num:focus { outline: 0; border-color: var(--accent); background: var(--paper); }

.gs-error {
  margin: 4px 0 0; padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(178, 59, 59, 0.08);
  font-size: 12.5px; font-weight: 600; color: #9a3232; line-height: 1.45;
}
.gs-error[hidden] { display: none; }

.gs-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.gs-cap { flex: 1; font-size: 12px; color: var(--mute); }
.gs-clear {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  color: var(--mute); text-decoration: underline; text-underline-offset: 3px;
}
.gs-clear:hover { color: var(--accent-deep); }
.gs-done {
  border: 0; border-radius: var(--r-sm);
  padding: 9px 18px; cursor: pointer;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 700;
}
.gs-done:hover { background: var(--accent-deep); }
.gs-clear:focus-visible, .gs-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Mobile: full-screen sheets, matching the date picker ---- */
@media (max-width: 700px) {
  .wh-panel, .gs-panel {
    position: fixed; inset: 0; top: 0; left: 0; right: 0;
    /* Above the sticky nav (1000), below the burger drawer (9000) — same
       stacking contract as .dp-panel, for the same reason. */
    z-index: 2000;
    width: auto; max-width: none;
    border-radius: 0; border: 0;
    padding: 16px 16px 0;
    display: flex; flex-direction: column;
  }
  .sf-sheet-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: -16px -16px 14px; padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }
  .sf-sheet-head__title {
    font-family: var(--font-display); font-size: 1.15rem; color: var(--ink-strong);
  }
  .sf-sheet-head__close {
    flex: none; width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--paper);
    color: var(--ink); font-size: 19px; line-height: 1; cursor: pointer;
    display: grid; place-items: center;
  }
  .sf-sheet-head__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  .wh-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 16px; }
  .wh-grid { grid-template-columns: 1fr; }
  .wh-suggest { max-height: none; }
  .gs-foot {
    position: sticky; bottom: 0; margin-top: auto;
    padding: 14px 0; background: var(--paper); flex-wrap: wrap;
  }
  .gs-cap { flex: 1 0 100%; margin-bottom: 8px; }
  .gs-done { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wh-trigger, .gs-trigger, .wh-card, .wh-chip, .gs-step, .gs-done, .wh-suggest__row { transition: none; }
}

/* =========================================================
   SIGN-IN BOX — shared account card (index, stays)
   =========================================================
   Forest-accent card that echoes the stays search panel: same max-width,
   radius and float, but inverted (dark forest ground, sand eyebrow) so it
   reads as the "account" counterpart to "find stays". On stays.html it
   floats between the search panel and the results; on the homepage it sits
   inside .signin-band, a full-bleed forest strip flush under the fixed nav.
   Both ship [hidden] and script.js reveals them for signed-out visitors
   and wires the form to /api/auth/login. */

.signin-band {
  background: var(--emerald-deep, #1E3226);
  border-bottom: 1px solid rgba(233, 200, 155, .14);
  /* First element under the fixed bar — clear it the same way .nav + .section
     does, just with a tighter cushion so the card hugs the nav. */
  padding: calc(clamp(72px, 8vw, 108px) + 26px) 20px 30px;
}

.signin-band .signin-box { margin-top: 0; }

/* The stays hero carries ~148px of top padding to clear the fixed bar; once
   the band is revealed above it, that clearance is already spent — pull the
   headline back up so the two dark surfaces read as one composition. */
.signin-band:not([hidden]) + .stays-hero { padding-top: 56px; }

.signin-box {
  max-width: 1120px;
  margin: 22px auto 0;
  position: relative;
  z-index: 4;
  background:
    linear-gradient(160deg, var(--forest, #1E3226), #17281E);
  border: 1px solid rgba(233, 200, 155, .22);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(23, 36, 30, .22);
  padding: 26px 28px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 30px;
  align-items: center;
}

.signin-box[hidden] {
  display: none;
}

.signin-box__intro .eyebrow {
  color: var(--sand, #E9C89B);
}

.signin-box__title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.1;
  font-weight: 600;
  margin: 8px 0 8px;
}

.signin-box__sub {
  margin: 0;
  opacity: .82;
  font-weight: 300;
  font-size: .98rem;
  max-width: 360px;
}

.signin-box__form {
  min-width: 0;
}

.signin-box__err {
  background: rgba(179, 38, 30, .16);
  border: 1px solid rgba(244, 199, 195, .4);
  color: #ffd9d5;
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13px;
  margin-bottom: 12px;
}

.signin-box__err[hidden] {
  display: none;
}

.signin-box__fields {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}

.signin-box__form label span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(233, 200, 155, .9);
  margin-bottom: 6px;
}

.signin-box__form input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 11px;
  font-size: 14px;
  font-family: inherit;
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.signin-box__form input::placeholder {
  color: rgba(255, 255, 255, .45);
}

.signin-box__form input:focus {
  outline: 2px solid rgba(233, 200, 155, .3);
  border-color: var(--sand, #E9C89B);
  background: rgba(255, 255, 255, .1);
}

.signin-box__submit {
  padding: 13px 26px;
  border: none;
  border-radius: 11px;
  background: var(--sand, #E9C89B);
  color: var(--forest, #1E3226);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  cursor: pointer;
  height: 46px;
  white-space: nowrap;
  transition: background .15s, transform .15s;
}

.signin-box__submit:hover {
  background: #f2d6ac;
  transform: translateY(-1px);
}

.signin-box__submit:disabled {
  opacity: .6;
  cursor: default;
  transform: none;
}

.signin-box__foot {
  margin: 14px 0 0;
  font-size: 13px;
  opacity: .82;
}

.signin-box__foot a {
  color: var(--sand, #E9C89B);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 980px) {
  .signin-box {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .signin-band {
    padding-left: 14px;
    padding-right: 14px;
  }

  .signin-box {
    padding: 22px 20px;
    margin-top: 16px;
  }

  .signin-box__fields {
    grid-template-columns: 1fr;
  }

  .signin-box__submit {
    width: 100%;
  }
}

/* =========================================================
   DARK THEME — "thirty minutes after sunset"
   ---------------------------------------------------------
   Stamped as html[data-theme="dark"] by theme.js — system
   preference by default, toggle choice persisted in
   localStorage under "iraava-theme". The light :root above
   is untouched; this block remaps the same tokens onto a
   twilight palette — deep indigo-blue grounds, dusk-navy
   surfaces, and the cinematic page's last-light amber
   (--cin-gold #E3B168) promoted to the accent — then patches
   the handful of component rules whose colours were
   hard-coded against a light canvas.

   The admin/manage/host consoles never load theme.js, so
   they are never stamped and keep the light look. The
   cinematic film (home.css) carries its own fixed --cin-*
   palette and is dark in both themes by design.
   ========================================================= */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* ---- Section washes — same whisper logic, dusk grounds ---- */
  --snow:       #0D1728;   /* himalaya — twilight teal-grey */
  --forest-bg:  #0C1724;   /* forest — green-cast dusk */
  --desert-bg:  #111927;   /* desert — warm-cast dusk */
  --sky-bg:     #0C1728;   /* beaches — blue dusk */
  --sunset-bg:  #121A2B;   /* plateau — violet dusk */

  /* ---- Brand remap ---- */
  --forest: #16233B;       /* dark chrome surfaces lift slightly off the page */
  --moss:   #1D2C48;
  --ocean:  #5BC0D4;       /* twilight cerulean — bright enough to be ink */
  --sunset: #D9A05B;
  --sunset-deep: #C8913F;  /* amber pressed/hover fill */
  --fuchsia: #E3B168;
  --teal:    #5BC0D4;
  --sand:   #0E1829;       /* alternating band, a step off the canvas */
  --cream:  #0B1322;       /* the canvas — deep post-sunset indigo */
  --ink:    #E9EEF5;
  --mute:   #9DACC2;
  --line:   #223350;

  --ink-strong: #F5F8FC;
  --paper: #121D31;        /* cards — dusk navy */
  --espresso: #16233B;
  --espresso-deep: #101A2D;
  --emerald: #121E33;
  --emerald-deep: #070E1A; /* footer / mobile nav — darkest, below the canvas */
  --gold: #E3B168;         /* last light — the one warm note */
  --hairline-dark: rgba(227, 177, 104, 0.26);
  --on-dark: #E9EEF5;
  --on-dark-mute: rgba(233, 238, 245, 0.74);
  --accent: #E3B168;       /* 9.4:1 on the canvas; fills take dark labels */
  --accent-deep: #C8913F;
  --on-accent: #201200;    /* label on amber fills — 8.9:1 */

  /* ---- Shadows deepen; the glow warms to amber ---- */
  --shadow-sm: 0 2px 10px rgba(2, 6, 14, 0.45);
  --shadow-md: 0 14px 40px rgba(2, 6, 14, 0.55);
  --shadow-lg: 0 28px 70px rgba(2, 6, 14, 0.62);
  --shadow-glow: 0 0 0 1px rgba(227, 177, 104, 0.24), 0 10px 34px rgba(227, 177, 104, 0.26);
}

/* ---- Patches: rules hard-coded against the light canvas ---- */

/* var(--paper) doubling as "bright ink on a dark surface" — in dark,
   paper is a surface, so these read from a constant white instead. */
[data-theme="dark"] .founder__cause-title { color: #FFFFFF !important; }
[data-theme="dark"] .h2--light,
[data-theme="dark"] .link-underline--light:hover,
[data-theme="dark"] .nav__links a:hover,
[data-theme="dark"] .nav.is-scrolled .nav__links a:hover,
[data-theme="dark"] .nav__links a.is-current,
[data-theme="dark"] .nav__cta .btn--ghost:hover,
[data-theme="dark"] .nav.is-scrolled .nav__cta .btn--ghost:hover,
[data-theme="dark"] .nav__mobile a:hover,
[data-theme="dark"] .host-card__since,
[data-theme="dark"] .footer__news h5,
[data-theme="dark"] .footer__newsform input,
[data-theme="dark"] .footer__col a:hover,
[data-theme="dark"] .footer__legal a:hover,
[data-theme="dark"] .testimonial blockquote,
[data-theme="dark"] .testimonial figcaption strong { color: #FFFFFF; }

/* Teal-tinted glows under what are now amber fills */
[data-theme="dark"] .btn--primary,
[data-theme="dark"] .nav__auth { box-shadow: 0 6px 18px rgba(227, 177, 104, 0.16); }
[data-theme="dark"] .btn--primary:hover,
[data-theme="dark"] .nav__auth:hover { box-shadow: 0 10px 24px rgba(227, 177, 104, 0.22); }

/* Placeholders sat at a light-canvas grey */
[data-theme="dark"] .searchbar__input::placeholder { color: #76839B; }

/* Datepicker hover wash was a translucent teal tuned for white */
[data-theme="dark"] .dp-day:hover:not(.is-disabled):not(.is-start):not(.is-end) {
  background: rgba(227, 177, 104, 0.16);
}

/* Error chips: light red-on-pink flips to dark-ground red */
[data-theme="dark"] .dp-error,
[data-theme="dark"] .gs-error {
  color: #FFB4A8;
  background: rgba(255, 107, 92, 0.12);
  border-color: rgba(255, 107, 92, 0.32);
}

/* The forest→teal feature gradient becomes dusk→deep teal */
[data-theme="dark"] .iraava-why {
  background: linear-gradient(155deg, #0E1B2F 0%, #16233B 45%, #1E5566 100%);
}

/* The home/stays search bar frosts a light green; dusk glass instead */
[data-theme="dark"] .searchbar { background: rgba(14, 23, 38, 0.97); }

/* The stays sign-in card leaned on --sand as a warm gold; in dark,
   sand is a band tone, so the card reads from --gold instead. */
[data-theme="dark"] .signin-box {
  background: linear-gradient(160deg, var(--forest), #101A2D);
}
[data-theme="dark"] .signin-box__intro .eyebrow { color: var(--gold); }
[data-theme="dark"] .signin-box__form input:focus { border-color: var(--gold); }
[data-theme="dark"] .signin-box__submit {
  background: var(--gold);
  color: var(--on-accent);
}
[data-theme="dark"] .signin-box__submit:hover { background: #EFC488; }
[data-theme="dark"] .signin-box__foot a { color: var(--gold); }

/* =========================================================
   THEME TOGGLE — injected into every .nav__cta and
   .nav__mobile by theme.js. An icon-only circle on desktop
   (moon in light, sun in dark — the surface you'd switch to),
   a labelled row in the mobile sheet. Sits on the dark nav
   bar in both themes, so it reads from the on-dark tokens.
   ========================================================= */
:root {
  --theme-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.4 14.9A8.6 8.6 0 0 1 9.1 3.6 9.3 9.3 0 1 0 20.4 14.9Z'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --theme-toggle-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9Z'/%3E%3Cpath d='M11 1h2v3.5h-2zM11 19.5h2V23h-2zM1 11h3.5v2H1zM19.5 11H23v2h-3.5zM3.6 5 5 3.6l2.5 2.5L6.1 7.5zM16.5 17.9l1.4-1.4 2.5 2.5-1.4 1.4zM19 3.6 20.4 5l-2.5 2.5-1.4-1.4zM3.6 19l2.5-2.5 1.4 1.4L5 20.4z'/%3E%3C/svg%3E");
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--hairline-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.theme-toggle:hover {
  color: #fff;
  border-color: var(--gold);
  transform: translateY(-1px);
}
.theme-toggle__icon {
  display: block;
  width: 17px;
  height: 17px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--theme-toggle-icon) center / contain no-repeat;
  mask: var(--theme-toggle-icon) center / contain no-repeat;
}
/* Labelled full-width row inside the burger sheet, matching its links */
.theme-toggle--mobile {
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--hairline-dark);
  justify-content: flex-start;
  padding: 15px 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.theme-toggle--mobile:hover { transform: none; }


/* =========================================================
   PHOTO LIGHTBOX  (lightbox.js, server-rendered stay pages)
   Its own dark ground in both themes on purpose: a photograph
   is judged against black, and a viewer that followed the page
   theme would show the same picture two different ways.
   ========================================================= */
.lb { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column;
      /* Opaque: at 95% the page behind stayed legible through the viewer. */
      background: #000;
      /* dvh, not vh: 100vh on iOS is taller than the visible area, so the
         filmstrip sat underneath the browser's own toolbar. */
      height: 100dvh;
      overscroll-behavior: contain;
      /* manipulation = no double-tap-to-zoom. Chrome arbitrates a tap against
         a possible double-tap, and on an iPad the first tap after a swipe was
         being thrown away entirely: swipe to a photo, tap Close, nothing. The
         stage overrides this with `none`, since it handles every gesture. */
      touch-action: manipulation; }
.lb[hidden] { display: none; }
.lb__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
           gap: 16px; padding: 12px 20px; color: #fff; }
.lb__count { margin: 0; font-family: var(--font-ui); font-size: 13px;
             font-variant-numeric: tabular-nums; }
.lb__tools { display: flex; gap: 4px; }
.lb__btn { width: 40px; height: 40px; display: grid; place-items: center;
           border: 0; border-radius: 999px; background: transparent; color: #fff;
           font-size: 20px; line-height: 1; cursor: pointer;
           transition: background .2s var(--ease); }
.lb__btn:hover { background: rgba(255,255,255,.15); }
.lb__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb__stage { position: relative; flex: 1; min-height: 0; overflow: hidden;
             touch-action: none; }
.lb__img { position: absolute; inset: 0; width: 100%; height: 100%;
           object-fit: contain; user-select: none;
           transition: transform .15s ease-out; }
.lb__edge { position: absolute; top: 50%; transform: translateY(-50%);
            width: 44px; height: 44px; display: grid; place-items: center;
            border: 0; border-radius: 999px; background: rgba(0,0,0,.45);
            color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
            transition: background .2s var(--ease); }
.lb__edge:hover { background: rgba(0,0,0,.75); }
.lb__edge:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb__edge--prev { left: 12px; }
.lb__edge--next { right: 12px; }
.lb__strip { flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto;
             overscroll-behavior-x: contain; padding: 12px 20px; }
.lb__thumb { position: relative; flex: 0 0 auto; width: 80px; height: 56px;
             padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden;
             opacity: .55; cursor: pointer; background: none;
             transition: opacity .2s var(--ease); }
.lb__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb__thumb:hover { opacity: 1; }
.lb__thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.stay-gallery__all { margin: 0 0 12px; }
.stay-gallery__all button { border: 0; background: none; padding: 0; cursor: pointer;
                            font: inherit; }
.stay-gallery img { cursor: zoom-in; }

@media (max-width: 640px) {
  /* The arrows crowd a phone and swipe replaces them; they stay for mouse
     and keyboard users on wider screens. */
  .lb__edge { display: none; }
  .lb__strip { padding: 8px 12px; }
  .lb__thumb { width: 64px; height: 48px; }
  .lb__bar { padding: 8px 12px; }
}

/* Tap targets are about the POINTER, not the viewport. Keyed to a 640px width
   these missed the iPad entirely — a touch device that is simply wide, where
   40px controls are exactly as hard to hit as they are on a phone.
   44px minimum: below that a control is a coin-toss under a thumb. */
@media (pointer: coarse) {
  .lb__btn { width: 44px; height: 44px; }
  .lb__thumb { width: 72px; height: 54px; }
}