/* ============================================================
   Kantu Garden Lodge — Stylesheet
   Editorial register: Aman / Inkaterra / Datai tier
   ============================================================ */

@import url('./tokens.css');

/* ============================================================
   Layout — Container + Section
   ============================================================ */

.section {
  padding-block: var(--sp-9);
  position: relative;
}

.section--snug   { padding-block: var(--sp-7); }
.section--tight  { padding-block: var(--sp-6); }
.section--bleed  { padding-block: 0; }

.section--dark {
  background: var(--color-text);
  color: var(--color-bg);
}

.section--accent-night {
  background: var(--color-accent-night);
  color: var(--color-bg);
}

/* ============================================================
   Header — fixed, transparent over hero, solid on scroll
   ============================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding: var(--sp-4) var(--sp-6);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-5);
  background: transparent;
  color: var(--color-bg);
  --nav-ink: var(--color-bg);
  border-bottom: 1px solid rgba(234, 229, 223, 0.25);
  transition: background var(--t-base) var(--ease-out),
              color var(--t-base) var(--ease-out),
              padding var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}

@media (min-width: 768px) {
  .site-header { padding-inline: var(--sp-7); }
}
@media (min-width: 1280px) {
  .site-header { padding-inline: var(--sp-8); }
}

/* Phase 2 — scrolled, header over a dark section. Compact + dark translucent. */
.site-header[data-header-phase="2"] {
  background: rgba(34, 40, 28, 0.55);
  color: var(--color-bg);
  --nav-ink: var(--color-bg);
  padding-block: var(--sp-2);
  border-bottom-color: rgba(234, 229, 223, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Phase 3 — scrolled past hero onto cream/light sections. Compact + cream solid. */
.site-header[data-header-phase="3"] {
  background: rgba(234, 229, 223, 0.96);
  color: var(--color-text);
  --nav-ink: var(--color-text);
  padding-block: var(--sp-2);
  border-bottom-color: var(--color-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-header__left,
.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.site-header__right {
  justify-content: flex-end;
}

/* Hamburger — Damai-identical: 3 thin lines, 3rd is half-width.
   Hover: bars slide out to the right while a "ghost" copy of each bar
   (positioned offscreen-left via ::before) slides in to fill the original
   slot. Overflow hidden on the button clips the motion. */
.menu-toggle {
  position: relative;
  width: 36px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  color: inherit;
  overflow: hidden;
}

.menu-toggle span {
  position: absolute;
  left: 7px;
  top: 50%;
  height: 1px;
  background: currentColor;
  transition: transform 0.8s cubic-bezier(0.3, 1, 0.3, 1);
}

.menu-toggle span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  transform: translateX(-150%);
}

.menu-toggle span:nth-child(1) {
  width: 22px;
  transform: translateY(-5px);
}
.menu-toggle span:nth-child(2) {
  width: 22px;
  transform: translateY(0);
}
.menu-toggle span:nth-child(3) {
  width: 11px;
  transform: translateY(5px);
}

.menu-toggle span:nth-child(3)::before {
  transform: translateX(-300%);
}

@media (hover: hover) {
  .menu-toggle:hover span:nth-child(1) {
    transform: translate(150%, -5px);
    transition-delay: 0s;
  }
  .menu-toggle:hover span:nth-child(2) {
    transform: translate(150%, 0);
    transition-delay: 0.05s;
  }
  .menu-toggle:hover span:nth-child(3) {
    transform: translate(300%, 5px);
    transition-delay: 0.1s;
  }
}

/* Damai-style vertical separator between hamburger and nav */
.header-sep {
  display: none;
  width: 1px;
  height: 22px;
  background: currentColor;
  opacity: 0.35;
  margin-inline: var(--sp-3);
}

@media (min-width: 1024px) {
  .header-sep { display: block; }
}

/* Inline desktop nav — Damai pattern, sits next to hamburger */
.site-nav {
  display: none;
  align-items: center;
  gap: var(--sp-6);
}

/* Link's bounding box stays put — only the inner span animates. This kills
   the jitter that happens when the link itself transforms (the moving
   bounding box loses :hover when the cursor sits near its bottom edge). */
.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: var(--tracking-wider);
  font-weight: 500;
  line-height: 1;
  opacity: 1;
}

.site-nav a > span {
  display: inline-block;
  text-shadow: 0 20px transparent;
  transform: translateY(0);
  /* No transition at rest — leaving hover snaps text back instantly with
     no reverse motion. Transitions live in the :hover rule below so they
     only apply on the way IN. The dot still fades both directions. */
}

/* Damai dot — appears below the link on hover. Link no longer moves, so
   the dot's hover position is its true visible position (no counter-translate). */
.site-nav a::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--nav-ink, currentColor);
  transform: translate(-50%, 8px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.3, 1),
              opacity 0.4s cubic-bezier(0.3, 1, 0.3, 1);
  pointer-events: none;
}

@media (hover: hover) {
  .site-nav a:hover {
    opacity: 1;
  }
  .site-nav a:hover > span {
    color: transparent;
    transform: translateY(-14px);
    text-shadow: 0 14px var(--nav-ink, currentColor);
    transition: color 0.28s cubic-bezier(0.3, 0, 0.3, 1),
                transform 0.65s cubic-bezier(0.3, 1, 0.3, 1),
                text-shadow 0.65s cubic-bezier(0.3, 1, 0.3, 1);
  }
  .site-nav a:hover::before {
    opacity: 1;
    transform: translate(-50%, 2px);
  }
}

@media (min-width: 1024px) {
  .site-nav {
    display: flex;
  }
}

/* Logo (centered) — sized to match Damai's compact proportion */
.site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Override global a:hover opacity dim — logo stays at full opacity on hover */
.site-logo:hover {
  opacity: 1;
}

.site-logo img {
  height: 112px;
  width: auto;
  /* PNG has the bird on top, so the artwork's visual centre sits below
     its geometric centre. Shift the image down a few px so the header
     reads as vertically centered (more breathing room above bird wing). */
  transform: translateY(6px);
  transition: filter var(--t-base) var(--ease-out), height var(--t-base) var(--ease-out);
}

/* Logo: 112px in every phase. Only the COLOR filter changes.
   Phases 1 + 2 (over dark) → white. Phase 3 (over light) → native green. */
.site-header[data-header-phase="1"] .site-logo img,
.site-header[data-header-phase="2"] .site-logo img {
  filter: brightness(0) invert(1);
}

.site-header[data-header-phase="3"] .site-logo img {
  filter: none;
}

@media (max-width: 767px) {
  .site-logo img { height: 80px; transform: translateY(4px); }
}

/* Right-side controls */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.lang-switch a {
  opacity: 0.6;
}

.lang-switch a[aria-current="true"] {
  opacity: 1;
  font-weight: 500;
}

.lang-switch span {
  opacity: 0.4;
}

/* "Book your stay" pill — Damai-identical.
   PILL (outer <a>) stays still — only the inner <span> text animates.
   Hover: <span> translates up + fades to transparent while its text-shadow
   (white, positioned below) simultaneously transitions into view, landing
   exactly at the original text position. Looks like text rolls up + a
   duplicate rolls in from below. Overflow:hidden on the pill clips the exiting glyphs. */
.btn-reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 17px 24px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  color: #ffffff;
  background: rgba(180, 185, 175, 0.28);
  border: 0;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  line-height: 1.2;
  transition: background 0.4s cubic-bezier(0.3, 0, 0.3, 1);
}

/* Inner text — same Damai pattern as .site-nav a: text-shadow ghost takes
   over as the original text rolls up + fades to transparent. Transitions
   live only in the :hover rule so un-hover snaps back instantly. */
.btn-reserve > span {
  display: inline-block;
  color: #ffffff;
  text-shadow: 0 18px transparent;
  transform: translateY(0);
}

@media (hover: hover) {
  .btn-reserve:hover {
    background: rgba(180, 185, 175, 0.42);
    opacity: 1;
  }
  .btn-reserve:hover > span {
    color: transparent;
    transform: translateY(-18px);
    text-shadow: 0 18px #ffffff;
    transition: color 0.28s cubic-bezier(0.3, 0, 0.3, 1),
                transform 0.65s cubic-bezier(0.3, 1, 0.3, 1),
                text-shadow 0.65s cubic-bezier(0.3, 1, 0.3, 1);
  }
}

/* Phase 3 — solid logo-green pill with white text. */
.site-header[data-header-phase="3"] .btn-reserve {
  background: linear-gradient(135deg, #3D5429 0%, #4F6B36 50%, #5C7A3D 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header[data-header-phase="3"] .btn-reserve > span {
  color: #ffffff;
}

@media (hover: hover) {
  .site-header[data-header-phase="3"] .btn-reserve:hover {
    background: linear-gradient(135deg, #2B3C1D 0%, #2B3C1D 50%, #2B3C1D 100%);
    box-shadow: 0 8px 24px rgba(43, 60, 29, 0.25);
  }
  .site-header[data-header-phase="3"] .btn-reserve:hover > span {
    color: transparent;
    transform: translateY(-18px);
    text-shadow: 0 18px #ffffff;
    transition: color 0.28s cubic-bezier(0.3, 0, 0.3, 1),
                transform 0.65s cubic-bezier(0.3, 1, 0.3, 1),
                text-shadow 0.65s cubic-bezier(0.3, 1, 0.3, 1);
  }
}

/* ============================================================
   Mobile menu — slides from left
   ============================================================ */

/* Damai-style drawer: wide two-column panel (nav + hover image), with
   sub-section cols underneath, reviews link, and a WhatsApp QR trigger. */
/* Damai-style drawer — wider nav column (≈33% on wide viewports).
   Image lives in a sibling pane that appears on hover. */
:root {
  --drawer-width: clamp(420px, 33vw, 660px);
  --drawer-image-w: clamp(380px, 30vw, 560px);
}

.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 200;
  width: var(--drawer-width);
  background: var(--color-bg);
  color: var(--color-text);
  transform: translateX(-100%);
  transition: transform 0.55s cubic-bezier(0.3, 1, 0.3, 1);
  overflow: hidden;
}

.drawer[aria-hidden="false"] {
  transform: translateX(0);
}

/* Damai-style X close button — two bars (rotated to form X) that slide out
   on hover while their ::before pseudos slide in from the side. */
.drawer__close {
  position: absolute;
  top: var(--sp-5);
  left: var(--sp-8);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  z-index: 2;
  padding: 0;
}

.drawer__close-inner {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transform: rotate(-45deg);
  overflow: hidden;
}

/* Snappy symmetric Damai X. The hover-in perception bias (user stares at
   the X waiting) makes the same timing feel slower than hover-out. Shortened
   to 0.25s + 0.08s stagger so even waiting-feel is brief. */
.drawer__close-bar {
  position: absolute;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: transform 0.25s cubic-bezier(0.3, 1, 0.3, 1);
}

.drawer__close-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  transform: translateX(-250%);
}

.drawer__close-bar:nth-child(1) {
  transform: rotate(90deg) translateX(0%);
  transition-delay: 0.08s;
}

@media (hover: hover) {
  .drawer__close:hover .drawer__close-bar:nth-child(1) {
    transform: rotate(90deg) translateX(250%);
  }
  .drawer__close:hover .drawer__close-bar:nth-child(2) {
    transform: translateX(250%);
  }
}

/* drawer__cols + drawer__image inside the drawer are kept for HTML
   structural backwards-compat, but the image is hidden inside —
   the real image lives in .drawer-image-pane below. */
.drawer__cols {
  display: block;
  height: 100%;
}

.drawer__nav {
  padding: 10vh var(--sp-8) var(--sp-6);
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

/* Reset any default left margin/padding so every block in the drawer
   shares the exact same left edge (eyebrow, main nav, sub-cols, bottom). */
.drawer__nav > * {
  margin-left: 0;
  padding-left: 0;
  width: 100%;
}

.drawer__cols > .drawer__image { display: none; }

/* Sibling image pane — fixed width, sits next to drawer, fades in on hover */
.drawer-image-pane {
  position: fixed;
  top: 0;
  left: var(--drawer-width);
  width: var(--drawer-image-w);
  height: 100vh;
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  background: #111;
  transition: opacity 0.45s var(--ease-out);
}

.drawer-image-pane.is-visible {
  opacity: 1;
}

@media (max-width: 767px) {
  .drawer-image-pane { display: none; }
}

.drawer-image-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s var(--ease-out);
}

.drawer__eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.55;
  margin: 0;
}

/* Remove the rule immediately under "MENU" eyebrow */
.drawer__eyebrow + .drawer__rule {
  display: none;
}

.drawer__rule {
  display: block;
  height: 1px;
  background: rgba(34, 40, 28, 0.15);
  margin: var(--sp-3) 0;
}

.drawer__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.drawer__main {
  position: relative;
}

.drawer__main a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  /* Optical alignment: serif capitals have visible side-bearing on the left;
     nudge the link slightly left so S/D/R/P align with MENU + sub-col text. */
  margin-left: -0.06em;
  color: inherit;
  width: 100%;
}

/* Damai-style dot — anchored to the right edge of every link row,
   so all dots (Stay/Dining/Relax/Discover/Packages) sit at the same x. */
.drawer__main a::after {
  content: "";
  position: absolute;
  right: 0;
  left: auto;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(8px, -50%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.3, 1, 0.3, 1),
              opacity 0.35s cubic-bezier(0.3, 1, 0.3, 1);
  pointer-events: none;
}

.drawer__main a:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.drawer__sub-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}

.drawer__sub-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.drawer__sub-head {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.55;
  margin: 0 0 var(--sp-3);
}

/* Sub-col link with Damai-style left-to-right underline sweep.
   Hover IN: line grows from left to right (transform-origin: left).
   Hover OUT: line shrinks toward the right (transform-origin: right) so
   the LEFT edge "moves right" — feels like the line disappears in the same
   left-to-right direction it appeared. */
.drawer__sub-col a {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  color: inherit;
  line-height: 1.5;
  width: max-content;
  padding-bottom: 2px;
}

.drawer__sub-col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.3, 0, 0.3, 1);
}

.drawer__sub-col a:hover {
  opacity: 1;
}

.drawer__sub-col a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Push the rule above the bottom row down with margin-top: auto so it
   sits right above the reviews row (Damai pattern), not stuck near sub-cols. */
.drawer__nav > .drawer__rule:last-of-type {
  margin-top: auto;
}

.drawer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: 0;
  padding-top: var(--sp-3);
}

/* Reviews link — stars + "4.7 / 92 reviews" — same sweep underline as WhatsApp */
.drawer__reviews {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  font-family: var(--font-body);
  color: inherit;
  padding: 0 0 2px;
  text-decoration: none;
}

.drawer__reviews::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.3, 0, 0.3, 1);
}

.drawer__reviews:hover {
  opacity: 1;
}

.drawer__reviews:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.drawer__stars {
  color: #E0B341;
  font-size: 14px;
  letter-spacing: 1px;
}

/* WhatsApp button — text-link style with the same left-to-right
   underline sweep as the sub-col items. No underline at rest. */
.drawer__whatsapp {
  position: relative;
  font-family: var(--font-body);
  font-size: 13px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: 0 0 2px;
  text-decoration: none;
}

.drawer__whatsapp::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.3, 0, 0.3, 1);
}

.drawer__whatsapp:hover {
  opacity: 1;
}

.drawer__whatsapp:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.drawer__image {
  position: relative;
  background: #111;
  overflow: hidden;
}

.drawer__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.45s var(--ease-out);
}

.mobile-nav__overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}

.mobile-nav__overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

/* Collapse drawer image on narrow viewports — nav only */
@media (max-width: 767px) {
  .drawer { width: min(420px, 100%); }
  .drawer__cols { grid-template-columns: 1fr; }
  .drawer__image { display: none; }
  .drawer__sub-cols { grid-template-columns: 1fr; gap: var(--sp-4); }
  .drawer__main a { font-size: 2rem; }
}

/* WhatsApp QR modal */
.qr-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}

.qr-modal[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.qr-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(34, 40, 28, 0.75);
  backdrop-filter: blur(4px);
}

.qr-modal__card {
  position: relative;
  background: var(--color-bg);
  border-radius: 8px;
  padding: var(--sp-6) var(--sp-5);
  width: min(320px, 90vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

.qr-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 8px 10px;
  color: inherit;
}

.qr-modal__qr {
  width: 180px;
  height: 180px;
  margin-bottom: var(--sp-3);
}

.qr-modal__title {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--sp-2);
}

.qr-modal__sub {
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0 0 var(--sp-4);
  max-width: 240px;
}

.qr-modal__desktop {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  padding: 10px 20px;
  border: 1px solid rgba(34, 40, 28, 0.25);
  border-radius: 999px;
  color: var(--color-text);
  background: transparent;
  text-decoration: none;
  /* Smooth, glitch-free hover — only color properties animate, no layout shift. */
  transition: color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out),
              background-color 0.25s var(--ease-out);
}

.qr-modal__desktop:hover,
.qr-modal__desktop:focus-visible {
  /* WhatsApp brand green (#25D366) — text + border tint green on hover,
     subtle green wash in the background for visual feedback. */
  color: #25D366;
  border-color: #25D366;
  background-color: rgba(37, 211, 102, 0.08);
}

/* ============================================================
   Hero — full-bleed video with overlaid editorial text
   Sacha Lodge / Reschio pattern
   ============================================================ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-bg);
  /* Damai-style intro reveal (~4.2s, GSAP Expo.easeInOut port).
     Stage 1 (0–2s): hero element slides up from translateY(50%).
       Clip-path stays pinned to a 20vw × 55vh rect anchored
       bottom-center → the video appears to RISE from below.
     Stage 2 (1.8–3.8s): clip-path expands from that rect to full
       viewport, video fills the screen.
     Splash logo + real header crossfade is in their own blocks below. */
  clip-path: inset(45% 40% 0 40%);
  transform: translateY(50%);
  animation:
    hero-rise 2s cubic-bezier(0.87, 0, 0.13, 1) 0s forwards,
    hero-clip 2s cubic-bezier(0.87, 0, 0.13, 1) 1.8s forwards;
}

@keyframes hero-rise {
  to { transform: translateY(0); }
}

@keyframes hero-clip {
  to { clip-path: inset(0); }
}

/* Splash logo — green KANTU mark, centered on viewport.
   Single smooth motion: center → header position over one cubic-bezier
   curve, then a brief fade overlapping the end of the motion.
   Two animations (move + fade) instead of 5-keyframe path = no
   per-segment easing wobble. */
.intro-splash {
  position: fixed;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  z-index: 500;
  pointer-events: none;
  opacity: 1;
  animation:
    intro-splash-move 3s cubic-bezier(0.87, 0, 0.13, 1) 0s forwards,
    intro-splash-fade 0.7s ease-out 2.6s forwards;
}

.intro-splash img {
  width: clamp(220px, 22vw, 320px);
  height: auto;
  display: block;
}

@keyframes intro-splash-move {
  from { top: 50vh; transform: translate(-50%, -50%) scale(1);    }
  to   { top: 5vh;  transform: translate(-50%, -50%) scale(0.45); }
}

@keyframes intro-splash-fade {
  to { opacity: 0; }
}

/* On the homepage (which has .intro-splash), hide the real header logo
   during the intro, then fade it in as the splash fades out — the
   crossfade IS the green→white "color flip" (Damai's trick). */
body:has(.intro-splash) .site-header .site-logo img {
  opacity: 0;
  animation: intro-real-logo-fade-in 1.2s cubic-bezier(0.87, 0, 0.13, 1) 3.0s forwards;
}

@keyframes intro-real-logo-fade-in {
  to {
    opacity: 1;
  }
}

/* Hero content (eyebrow, title, bird, rule) fades in after the reveal */
.hero__content {
  opacity: 0;
  animation: hero-content-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 3.4s forwards;
}

.hero__rule {
  opacity: 0;
  animation: hero-content-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 3.6s forwards;
}

@keyframes hero-content-in {
  to {
    opacity: 1;
  }
}

/* Skip intro on subsequent visits in the same browser session (back-button
   return to home, second visit, etc.). Set by inline script in <head>
   that runs before paint, so no flash. */
html.no-intro .intro-splash { display: none; }
html.no-intro .hero {
  clip-path: inset(0);
  transform: none;
  animation: none;
}
html.no-intro .hero__content,
html.no-intro .hero__rule { opacity: 1; animation: none; }
html.no-intro .site-header .site-logo img { opacity: 1; animation: none; }

.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__media[poster] {
  background: var(--color-text);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(34, 40, 28, 0.15) 0%,
    rgba(34, 40, 28, 0.0) 30%,
    rgba(34, 40, 28, 0.4) 100%
  );
  z-index: 1;
}

.hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  color: #ffffff;
  pointer-events: none;
}

.hero__icon,
.hero__eyebrow,
.hero__title {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-align: center;
}

.hero__icon {
  top: 62%;
  width: 44px;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.hero__eyebrow {
  top: 72%;
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.hero__title {
  top: 85%;
  width: max-content;
  max-width: 92vw;
}

.hero__rule {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 3;
  display: block;
  width: 1px;
  height: 64px;
  background: rgba(255, 255, 255, 0.7);
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0;
  text-align: center;
}

.hero__title em {
  font-style: italic;
}

.hero__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  margin-top: var(--sp-5);
  max-width: 50ch;
  opacity: 0.95;
  line-height: var(--lh-snug);
}

/* ============================================================
   Manifesto — three-line poetic block, centered
   Datai pull-quote pattern
   ============================================================ */

.manifesto {
  text-align: center;
  max-width: 80ch;
  margin: 0 auto;
  padding: var(--sp-7) var(--gutter);
}

.manifesto p {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.25;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.manifesto p + p {
  margin-top: var(--sp-3);
}

.manifesto__rule {
  display: block;
  width: 60px;
  height: 1px;
  background: currentColor;
  margin: var(--sp-6) auto;
  opacity: 0.4;
}

.manifesto__attr {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  opacity: 0.6;
  /* Force lining (cap-height) numerals so "2021" matches "ESTABLISHED IN"
     even when Cormorant Garamond is inherited from .manifesto p. */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

/* ============================================================
   Section headings — eyebrow + display title
   ============================================================ */

.section-head {
  text-align: center;
  margin-bottom: var(--sp-7);
}

.section-head__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-3);
}

.section-head__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0;
}

.section-head__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  margin-top: var(--sp-4);
  max-width: 55ch;
  margin-inline: auto;
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

/* ============================================================
   Discover Kantu — 4-tile experience grid
   The Damai pattern
   ============================================================ */

.discover-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}

@media (min-width: 768px) {
  .discover-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.discover-tile {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-text);
}

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

/* Gradient wash for label legibility — darker at the bottom where the label sits.
   Subtle on the top half, opaque enough at the base to read white text on any photo. */
.discover-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(34, 40, 28, 0) 35%,
    rgba(34, 40, 28, 0.35) 65%,
    rgba(34, 40, 28, 0.75) 100%
  );
  pointer-events: none;
}

.discover-tile:hover img {
  /* no hover effect — per user pref, no zoom or brightness change on images */
}

.discover-tile__label {
  position: absolute;
  inset: auto 0 var(--sp-5) 0;
  z-index: 2;
  text-align: center;
  color: #FFFFFF;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 400;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.45);
}

.discover-tile__label::after {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
  margin: var(--sp-3) auto 0;
  opacity: 0.7;
}

/* ============================================================
   Featured pair — 2-column section (Datai pattern)
   ============================================================ */

.feature-pair {
  display: grid;
  gap: var(--sp-7);
}

@media (min-width: 768px) {
  .feature-pair {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
  }
}

.feature-card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: var(--sp-4);
}

.feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out);
}

/* Image-only link — wraps just the media block, not the copy. */
.feature-card__media-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.feature-card:hover .feature-card__media img {
  /* zoom removed — color/shadow only per user pref */
}

.feature-card__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-2);
}

.feature-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  margin: 0 0 var(--sp-3);
}

.feature-card__body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-4);
  max-width: 50ch;
}

.feature-card__more {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: #2B3C1D;
  padding-bottom: 4px;
  text-decoration: none;
  border: 0;
}

.feature-card__more::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}

.feature-card__more:hover::after,
.feature-card__more:focus-visible::after {
  transform: scaleX(1);
}

/* ============================================================
   Yoga TT featured — Moksha Yoga Amazonica callout
   ============================================================ */

.yoga-feature {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

@media (min-width: 768px) {
  .yoga-feature {
    grid-template-columns: 1.15fr 1fr;
  }
}

/* Media block adapts: 1 image fills the column; 2 images split into a
   side-by-side pair (with the second offset down for the editorial feel). */
.yoga-feature__media {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--sp-3);
}

.yoga-feature__media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.yoga-feature__media img:nth-child(2) {
  margin-top: var(--sp-6);
}
/* Recrop the home-page vinyasa shot so the practitioner's legs stay visible. */
.yoga-feature__media img[src*="moksha-vinyasa"] {
  object-position: center bottom;
}

/* TRIO variant — used for the new practice room (3 distinct angles).
   Stacks copy + photos vertically and lays the photo block full-width
   so each angle has room to breathe. */
@media (min-width: 768px) {
  .yoga-feature--trio {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
}
.yoga-feature__media--trio {
  grid-template-columns: 1fr 1fr 1fr;
}
.yoga-feature__media--trio img {
  aspect-ratio: 4/5;
  margin-top: 0;
}
/* Middle image sits down a touch — keeps the editorial stagger without losing height. */
.yoga-feature__media--trio img:nth-child(2) {
  margin-top: var(--sp-6);
}
@media (max-width: 899px) {
  .yoga-feature__media--trio {
    grid-template-columns: 1fr;
  }
  .yoga-feature__media--trio img:nth-child(2),
  .yoga-feature__media--trio img:nth-child(3) {
    margin-top: var(--sp-3);
  }
}

.yoga-feature__copy {
  padding-inline: var(--sp-4);
}

.yoga-feature__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  margin: 0 0 var(--sp-4);
}

.yoga-feature__body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-5);
  max-width: 48ch;
}

/* ============================================================
   Black editorial section (Reschio EAT & DRINK pattern)
   ============================================================ */

.editorial-block {
  text-align: center;
  padding: var(--sp-10) var(--gutter);
  max-width: 70ch;
  margin: 0 auto;
}

.editorial-block__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  margin: 0 0 var(--sp-5);
}

.editorial-block__body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-6);
}

/* ============================================================
   Reviews — Sacha Lodge speech-bubble pattern
   ============================================================ */

.reviews {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 768px) {
  .reviews {
    grid-template-columns: repeat(3, 1fr);
  }
}

.review-card {
  background: var(--color-bg);
  padding: var(--sp-5);
  position: relative;
  box-shadow: var(--shadow-md);
}

.review-card::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: var(--sp-7);
  width: 20px;
  height: 20px;
  background: var(--color-bg);
  transform: rotate(45deg);
  box-shadow: var(--shadow-sm);
}

.review-card__rating {
  display: flex;
  gap: 4px;
  margin-bottom: var(--sp-3);
}

.review-card__rating span {
  width: auto;
  height: auto;
  background: none;
  color: var(--color-primary);
  font-size: 18px;
  line-height: 1;
}
.review-card__rating span::before {
  content: '★';
}

.review-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  margin: 0 0 var(--sp-2);
}

.review-card__body {
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

.review-author {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  margin-left: var(--sp-7);
}

.review-author__name {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
}

.review-author__date {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

/* ============================================================
   Awards / Press strip
   ============================================================ */

.awards-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  justify-content: center;
  align-items: center;
  padding: var(--sp-6) var(--gutter);
  border-block: 1px solid var(--color-border);
  background: var(--color-bg);
}

.award-badge {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-muted);
  font-weight: 500;
}

.award-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  font-weight: 500;
  text-transform: none;
  margin-top: 2px;
}

/* ============================================================
   Footer — Reschio multi-column + big logo bottom
   ============================================================ */

/* Use a stronger rule color in the footer than --color-border so the
   grid lines actually read against the grey-beige body bg. */
.site-footer {
  --footer-rule: rgba(34, 40, 28, 0.18);
  background: var(--color-bg);
  color: var(--color-text);
  padding: 0;
  border-top: 1px solid var(--footer-rule);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  margin: 0;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1.5fr 1.4fr;
  }
}

.site-footer__col {
  padding: var(--sp-8) var(--sp-7) var(--sp-7);
  border-right: 1px solid var(--footer-rule);
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

.site-footer__col:first-child {
  padding-left: clamp(var(--sp-7), 6vw, 8vw);
}

.site-footer__col:last-child {
  border-right: 0;
}

.site-footer__col--double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  padding-left: var(--sp-8);
}

.site-footer__col--double > div {
  display: flex;
  flex-direction: column;
}

/* Big serif menu column (Damai pattern) */
.site-footer__menu .site-footer__main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.site-footer__menu .site-footer__main a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-left: -0.06em;
  color: var(--color-text);
  width: 100%;
}

/* Dot anchored to far right of the row — same pattern as the drawer nav */
.site-footer__menu .site-footer__main a::after {
  content: "";
  position: absolute;
  right: 0;
  left: auto;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(8px, -50%);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.3, 1, 0.3, 1),
              opacity 0.35s cubic-bezier(0.3, 1, 0.3, 1);
  pointer-events: none;
}

.site-footer__menu .site-footer__main a:hover {
  opacity: 1;
  color: var(--color-text);
}

.site-footer__menu .site-footer__main a:hover::after {
  opacity: 1;
  transform: translate(0, -50%);
}

.site-footer__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 var(--sp-6);
  color: var(--color-text-muted);
}

/* Sub-col link list (Stay / Discover / Contact items)
   margin-top: sp-6 matches the offset on .site-footer__main so all four
   sections start their content at the same y position below the eyebrow. */
.site-footer__col ul {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.site-footer__col a,
.site-footer__col p {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
  position: relative;
  display: inline-block;
  width: max-content;
}

/* Sweep underline on hover — same as drawer sub-cols */
.site-footer__col a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.3, 0, 0.3, 1);
}

.site-footer__col a:hover {
  color: var(--color-text);
  opacity: 1;
}

.site-footer__col a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Footer 'Overview →' / 'Show more →' meta-links. Visually distinct
   from regular menu items above (heavier, brand-green) with the
   Damai-style text translate-up hover. The link's bounding box stays
   put — only the inner <span> moves — so the hover doesn't flicker. */
.site-footer__col li:has(> .site-footer__more) {
  margin-top: var(--sp-4);
}

.site-footer__more {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.site-footer__more::after { content: none !important; }

.site-footer__more > span {
  display: inline-block;
  text-shadow: 0 20px transparent;
}

@media (hover: hover) {
  .site-footer__more:hover > span {
    color: transparent;
    transform: translateY(-14px);
    text-shadow: 0 14px var(--color-primary);
    transition: color 0.28s cubic-bezier(0.3, 0, 0.3, 1),
                transform 0.65s cubic-bezier(0.3, 1, 0.3, 1),
                text-shadow 0.65s cubic-bezier(0.3, 1, 0.3, 1);
  }
}

.site-footer__contact {
  padding-left: var(--sp-8);
}

.site-footer__contact address {
  font-style: normal;
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--color-text);
  margin: var(--sp-5) 0 var(--sp-5);
}

.site-footer__contact p {
  margin: 0 0 var(--sp-3);
  line-height: 1.5;
}

.site-footer__signup {
  margin-top: var(--sp-4);
}

/* Global green pill — reusable for any CTA on light backgrounds.
   Same shape as the header's Book your stay (round pill, logo-green base,
   gradient on hover). Apply via .btn-pill OR directly on .site-footer__signup-btn,
   .below-footer__btn, etc. — all share the same look. */
.btn-pill,
.site-footer__signup-btn,
.below-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: linear-gradient(135deg, #3D5429 0%, #4F6B36 50%, #5C7A3D 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: var(--tracking-wider);
  font-weight: 500;
  border: 0;
  border-radius: 999px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background-image 0.45s var(--ease-out),
              background-position 0.45s var(--ease-out),
              opacity 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
}

.btn-pill:hover,
.site-footer__signup-btn:hover,
.below-footer__btn:hover {
  background-image: linear-gradient(135deg, #2B3C1D 0%, #2B3C1D 50%, #2B3C1D 100%);
  background-position: 100% 100%;
  color: #ffffff;
  opacity: 1;
  box-shadow: 0 8px 24px rgba(43, 60, 29, 0.25);
}

/* Footer bottom strip — same 3-column grid as the main grid, with
   matching vertical dividers + a horizontal rule above. */
.site-footer__bottom {
  --footer-rule: rgba(34, 40, 28, 0.18);
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--footer-rule);
  width: 100%;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

@media (min-width: 768px) {
  .site-footer__bottom {
    grid-template-columns: 1.4fr 1.5fr 1.4fr;
  }
}

.site-footer__bottom-col {
  padding: var(--sp-5) var(--sp-7);
  border-right: 1px solid var(--footer-rule);
  display: flex;
  align-items: center;
}

.site-footer__bottom-col:first-child {
  padding-left: clamp(var(--sp-7), 6vw, 8vw);
}

.site-footer__bottom-col:last-child {
  border-right: 0;
  justify-content: flex-start;
  padding-left: var(--sp-8);
  gap: var(--sp-4);
}

.site-footer__reviews {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-text);
  padding: 0 0 2px;
  font-size: 13px;
}

.site-footer__reviews::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.3, 0, 0.3, 1);
}

.site-footer__reviews:hover {
  opacity: 1;
  color: var(--color-text);
}

.site-footer__reviews:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.site-footer__reviews .drawer__stars,
.site-footer__reviews-stars {
  color: #E0B341;
  font-size: 14px;
  letter-spacing: 1px;
}

.site-footer__bottom-socials {
  display: flex;
  gap: var(--sp-5);
}

.site-footer__bottom-socials a {
  position: relative;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  padding: 0 0 2px;
}

.site-footer__bottom-socials a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.3, 0, 0.3, 1);
}

.site-footer__bottom-socials a:hover {
  opacity: 1;
  color: var(--color-text);
}

.site-footer__bottom-socials a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.site-footer__copyright {
  font-size: 13px;
  color: var(--color-text-muted);
}

.site-footer__copyright a {
  position: relative;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
  margin-right: var(--sp-3);
  padding: 0 0 2px;
  text-decoration: none;
}

.site-footer__copyright a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.3, 0, 0.3, 1);
}

.site-footer__copyright a:hover {
  color: var(--color-text);
  opacity: 1;
}

.site-footer__copyright a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Footer brand mark — hidden (Damai pattern has no big logo in footer) */
.site-footer__brand {
  display: none;
  justify-content: center;
  align-items: center;
  margin: var(--sp-7) 0 var(--sp-6);
}

.site-footer__brand img {
  height: clamp(120px, 18vw, 220px);
  width: auto;
  opacity: 0.94;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  justify-content: center;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
}

.site-footer__socials {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.site-footer__socials a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
}

.site-footer__socials a:hover {
  border-color: var(--color-text);
  color: var(--color-text);
}

/* ============================================================
   Scroll-reveal utility (IntersectionObserver-driven)
   Selective use only — wife may say "moves too much"
   ============================================================ */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
}

[data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: translateY(0);
}

[data-zoom] img {
  transform: scale(1.02);
  transition: transform 1200ms var(--ease-out);
}

[data-zoom][data-revealed="true"] img {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  [data-zoom] img {
    transform: none;
    transition: none;
  }
  .discover-tile img,
  .feature-card__media img {
    transition: none;
  }
}

/* ============================================================
   Skip link (a11y)
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 1000;
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-text);
  color: var(--color-bg);
}

.skip-link:focus {
  top: 0;
}

/* ============================================================
   Selection
   ============================================================ */

::selection {
  background: var(--color-accent-glow);
  color: var(--color-text);
}

/* ============================================================
   RESCHIO-INSPIRED COMPONENTS — added 2026-05-10
   Selective use, not on every section
   ============================================================ */

/* ---------- Stacked full-bleed scroll sections (Reschio scroll-stack) ----------
   Each panel is sticky to top, so as user scrolls, panels pin one after another.
   The next panel scrolls UP over the previous — Reschio's signature effect.
*/
.scroll-stack {
  position: relative;
  background: var(--color-text);
}

.scroll-stack__panel {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: var(--color-text);
  color: var(--color-bg);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-stack__panel {
    position: relative;
  }
}

.scroll-stack__panel video,
.scroll-stack__panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

/* Scroll-driven zoom: image starts at scale(1.22) and reduces to scale(1) as user scrolls */
.scroll-stack__panel.is-zooming img,
.scroll-stack__panel.is-zooming video {
  transform: scale(1.22);
  transition: transform 2400ms var(--ease-out);
}

.scroll-stack__panel.is-revealed img,
.scroll-stack__panel.is-revealed video {
  transform: scale(1);
}

.scroll-stack__caption {
  position: absolute;
  inset: auto var(--gutter) var(--sp-8) var(--gutter);
  z-index: 2;
  max-width: var(--container-full);
  margin-inline: auto;
  color: var(--color-bg);
  pointer-events: none;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1400ms var(--ease-out), transform 1400ms var(--ease-out);
}

.scroll-stack__panel.is-revealed .scroll-stack__caption {
  opacity: 1;
  transform: translateY(0);
}

.scroll-stack__caption .h-eyebrow {
  color: rgba(234, 229, 223, 0.85);
  margin-bottom: var(--sp-3);
  display: block;
}

.scroll-stack__caption h2 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 5.75rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0;
  max-width: 18ch;
}

.scroll-stack__caption p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  margin-top: var(--sp-4);
  max-width: 50ch;
  line-height: var(--lh-snug);
  opacity: 0.95;
}

/* Subtle gradient overlay so caption stays readable */
.scroll-stack__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(34,40,28,0.05) 0%,
    rgba(34,40,28,0.0) 40%,
    rgba(34,40,28,0.55) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* ---------- Floating card overlay (Reschio "About & History" pattern) ---------- */

.float-card {
  position: relative;
  min-height: 80vh;
  display: grid;
  align-items: stretch;
  background: var(--color-text);
}

.float-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.float-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 2400ms var(--ease-out);
}

.float-card__media[data-revealed="true"] img {
  transform: scale(1);
}

.float-card__panel {
  position: relative;
  z-index: 2;
  background: var(--color-bg);
  color: var(--color-text);
  padding: var(--sp-7) var(--sp-7) var(--sp-7);
  max-width: 480px;
  margin: var(--sp-9) 0 var(--sp-9) var(--gutter);
  align-self: start;
}

@media (min-width: 768px) {
  .float-card__panel {
    margin-left: var(--sp-9);
  }
}

.float-card__panel h2 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0 0 var(--sp-4);
}

.float-card__panel p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-4);
}

.float-card__panel a {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
}

/* Reverse variant — image right / cream panel pinned to the right edge */
.float-card--reverse {
  justify-items: end;
}
.float-card--reverse .float-card__panel {
  margin-left: 0;
  margin-right: var(--gutter);
}
@media (min-width: 768px) {
  .float-card--reverse .float-card__panel {
    margin-left: 0;
    margin-right: var(--sp-9);
  }
}

/* ---------- Massive editorial section (Reschio "EAT & DRINK" pattern) ---------- */

.massive {
  background: var(--color-text);
  color: var(--color-bg);
  padding: var(--sp-10) var(--gutter);
  text-align: center;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.massive__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 6vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0 0 var(--sp-6);
  max-width: 18ch;
  margin-inline: auto;
}

.massive__body {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.4;
  max-width: 50ch;
  margin: 0 auto var(--sp-6);
  opacity: 0.9;
}

.massive__cta {
  position: relative;
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-bg);
  text-decoration: none;
  padding-bottom: 4px; /* tight — underline sits right under the text */
}

.massive__cta::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}

.massive__cta:hover::after,
.massive__cta:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- Collage grid (mixed aspect ratios, Reschio pattern) ---------- */

.collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 2px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--sp-7);
}
@media (min-width: 1200px) {
  .collage { padding: 0 var(--sp-8); }
}

/* Compact collage section: tighter vertical padding + smaller gap between
   section-head and the grid. */
.section--collage {
  padding-block: var(--sp-5);
}
.section--collage .section-head {
  margin-bottom: var(--sp-4);
}

.collage__item {
  overflow: hidden;
  position: relative;
  background: var(--color-border);
}

.collage__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1400ms var(--ease-out);
  transform: scale(1.03);
}
/* Napkin shot has a lot of cream tablecloth around the subject which
   bleeds into the page background and reads as a giant gap. Zoom + shift
   the crop onto the napkin/plate so the cell fills with content. */
.collage__item:nth-child(3) img {
  transform: scale(1.35);
  object-position: 55% 65%;
}

.collage__item:hover img {
  /* zoom removed */
}

/* Mobile: 2-col simple grid */
@media (max-width: 767px) {
  .collage {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 200px;
  }
  .collage__item {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .collage__item--feature {
    grid-column: span 2 !important;
    grid-row: span 2 !important;
  }
}

/* Desktop layout — 4 cols × 3 rows = 12 cells, 7 photos that fill cleanly:
   row 1: [feat 2x2 ........] [a 1x1] [b 1x1]
   row 2: [feat continues ...] [c 2x1 ............]
   row 3: [d 1x1] [e 1x1] [f 2x1 .................]                          */
/* Desktop layout — clean 3-column × 3-row grid.
   Feature 2×2 anchors the left; the right column stacks two portraits;
   the bottom row carries three equal-width images. */
@media (min-width: 768px) {
  .collage {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 280px;
    gap: 4px;
  }
  .collage__item--feature { grid-column: 1 / 3; grid-row: 1 / 3; }
  .collage__item:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
  .collage__item:nth-child(3) { grid-column: 3 / 4; grid-row: 2 / 3; }
  /* nth(4) is the abstract leaf close-up — dropped from the layout so the
     bottom row reads as three location/people moments instead of an oddity. */
  .collage__item:nth-child(4) { display: none; }
  .collage__item:nth-child(5) { grid-column: 1 / 2; grid-row: 3 / 4; }
  .collage__item:nth-child(6) { grid-column: 2 / 3; grid-row: 3 / 4; }
  .collage__item:nth-child(7) { grid-column: 3 / 4; grid-row: 3 / 4; }
}

/* ---------- Title color transition (Reschio grey→black on scroll) ---------- */

.title-shift {
  color: var(--color-border);
  transition: color 1500ms var(--ease-out);
}

.title-shift[data-revealed="true"] {
  color: var(--color-text);
}

/* ---------- Long rectangular image (Anavilhanas pattern) ---------- */

.long-rect {
  width: 100%;
  aspect-ratio: 21/9;
  overflow: hidden;
  position: relative;
}

.long-rect img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 2800ms var(--ease-out);
}

.long-rect[data-revealed="true"] img {
  transform: scale(1);
}

/* ============================================================
   Below-footer section (Damai pattern)
   Full-bleed image with centered Book Your Stay button + massive KANTU
   ============================================================ */

.below-footer {
  position: relative;
  height: 60vh;
  min-height: 480px;
  overflow: hidden;
  background: var(--color-text);
}

.below-footer__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.below-footer__media img,
.below-footer__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.below-footer__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(34,40,28,0.0) 0%, rgba(34,40,28,0.45) 100%);
}

.below-footer__center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Below-footer pill — bigger version of .btn-pill for the final CTA. */
.below-footer__btn {
  padding: 18px 36px;
  font-size: 13px;
}

/* ============================================================
   Secondary-page patterns
   ============================================================ */

/* Inner-page hero (smaller than homepage hero) */
.page-hero {
  position: relative;
  height: 70vh;
  min-height: 500px;
  overflow: hidden;
  background: var(--color-text);
  color: var(--color-bg);
  margin-top: 0;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(34,40,28,0.15) 0%, rgba(34,40,28,0.0) 35%, rgba(34,40,28,0.55) 100%);
  z-index: 1;
}

.page-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-9) var(--gutter);
  max-width: var(--container-full);
  margin: 0 auto;
}

.page-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: var(--sp-3);
  opacity: 0.92;
}

.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0;
  max-width: 20ch;
}

/* Rates table */
.rates {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.rates__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}

.rates__row dt {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 500;
}

.rates__row dt small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  margin-top: 4px;
}

.rates__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}

.rates__row dd small {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wide);
  margin-left: 4px;
}

.rates__note {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

/* Bungalow grid (8 cards) */
.bungalows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .bungalows {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* 5-tile variant — discover grid fits all 5 across at wide widths */
@media (min-width: 1200px) {
  .bungalows.bungalows--5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.bungalow-card {
  position: relative;
  overflow: hidden;
}

.bungalow-card__media {
  aspect-ratio: 3/4;
  overflow: hidden;
}

.bungalow-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out);
}

.bungalow-card:hover .bungalow-card__media img {
  /* zoom removed */
}

.bungalow-card__body {
  padding: var(--sp-4) 0 var(--sp-2);
}

.bungalow-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
}

/* Italic English gloss living inline-right of the Spanish name */
.bungalow-card__meaning {
  font-style: italic;
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
  margin-left: 0.25em;
  font-weight: 400;
}

.bungalow-card__beds {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-top: var(--sp-2);
}

/* Menu sections */
.menu-section {
  margin-bottom: var(--sp-8);
}

.menu-section__head {
  text-align: center;
  margin-bottom: var(--sp-6);
}

.menu-section__head h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
}

.menu-section__head p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: var(--sp-2) 0 0;
}

.menu-items {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .menu-items {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5) var(--sp-7);
  }
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--sp-3);
  border-bottom: 1px dotted var(--color-border);
  padding-bottom: var(--sp-3);
}

.menu-item__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.005em;
}

.menu-item__price {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.menu-item__desc {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--color-text-muted);
  margin: var(--sp-2) 0 0;
}

/* Excursions list */
.excursions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .excursions {
    grid-template-columns: repeat(3, 1fr);
  }
}

.excursion {
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: var(--color-accent-night); /* brown panel */
}

.excursion:not(:has(.excursion__media)) .excursion__copy {
  margin: auto 0;
}

.excursion__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

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

.excursion__copy {
  padding: var(--sp-5);
  color: var(--color-bg);
}

.excursion__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--color-bg);
  margin: 0 0 var(--sp-2);
}

.excursion__body {
  font-size: var(--fs-sm);
  color: rgba(234, 229, 223, 0.82);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* Spec list (yoga shala specs) */
.spec-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-7);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 768px) {
  .spec-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.spec-list li {
  padding: var(--sp-3) 0;
  border-top: 2px solid rgba(34, 40, 28, 0.35);
  font-size: var(--fs-sm);
}

@media (min-width: 768px) {
  /* Force a list item into the center column of the 3-col spec grid */
  .spec-list .spec-list__center { grid-column: 2; }
}

.spec-list li strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  margin-bottom: var(--sp-1);
  letter-spacing: 0.005em;
}

/* ============================================================
   Legal pages — privacy, terms. Narrow editorial column.
   ============================================================ */

.legal-page {
  padding-top: 160px;
  padding-bottom: var(--sp-9);
  background: var(--color-bg);
}

.legal-page__inner {
  max-width: 720px;
  margin: 0 auto;
  padding-inline: var(--sp-6);
}

.legal-page__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-3);
}

.legal-page__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-weight: 400;
  margin: 0 0 var(--sp-3);
}

.legal-page__updated {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-7);
}

.legal-page h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: var(--sp-7) 0 var(--sp-3);
}

.legal-page h3 {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  margin: var(--sp-5) 0 var(--sp-2);
}

.legal-page p,
.legal-page li {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 var(--sp-3);
}

.legal-page ul,
.legal-page ol {
  padding-left: var(--sp-5);
  margin: 0 0 var(--sp-4);
}

.legal-page a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.legal-page a:hover {
  /* no color change on hover — underline already provides affordance */
}

/* ============================================================
   Connect with us — Instagram feed grid (home page, above footer)
   ============================================================ */

.connect__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
  margin: 0 0 var(--sp-6);
}

.connect__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

@media (min-width: 768px) {
  .connect__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
  }
  .connect__tile--lg {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.connect__tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-text);
}

.connect__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.3, 1, 0.3, 1), opacity 300ms ease;
}

.connect__tile:hover img {
  /* no hover effect — per user pref */
}

.connect__badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  color: #ffffff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  pointer-events: none;
}

.connect__cta {
  text-align: center;
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
}

.connect__cta a {
  position: relative;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  padding-bottom: 4px;
}

.connect__cta a > span {
  display: inline-block;
}

.connect__cta a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
}

.connect__cta a:hover::after,
.connect__cta a:focus-visible::after {
  transform: scaleX(1);
}

/* ============================================================
   Discover-page 5-tile panel variant — dark brown text panel
   below the image (Cristalino Lodge pattern).
   ============================================================ */

.bungalows--panel {
  gap: var(--sp-4);
  align-items: stretch;
  /* All brown panels stretch to row height so their bottom edges align,
     regardless of description length. */
}

.bungalow-card--panel {
  display: flex;
  flex-direction: column;
  background: var(--color-accent-night); /* brown #6B4F35 */
}

.bungalow-card--panel .bungalow-card__body {
  padding: var(--sp-5); /* symmetric — top = bottom = sides = sp-5 */
  color: var(--color-bg);
  display: flex;
  flex-direction: column;
}

.bungalow-card--panel .bungalow-card__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(234, 229, 223, 0.7);
  margin: 0 0 var(--sp-3);
}

.bungalow-card--panel .bungalow-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-bg);
  display: block;
  margin: 0 0 var(--sp-3);
}

.bungalow-card--panel .bungalow-card__desc {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: rgba(234, 229, 223, 0.82);
  margin: 0 0 var(--sp-5);
}

.bungalow-card--panel .bungalow-card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-bg);
  text-decoration: none;
}

.bungalow-card--panel .bungalow-card__more-rule {
  width: 28px;
  height: 1px;
  background: #5C7A3D; /* the light brand green */
  display: inline-block;
}

@media (hover: hover) {
  .bungalow-card--panel .bungalow-card__more:hover .bungalow-card__more-rule {
    width: 40px;
    transition: width 0.4s cubic-bezier(0.3, 1, 0.3, 1);
  }
}

/* Static gap above .float-card on home — sits between 4-tile DISCOVER row
   and the green-canopy aerial. !important because earlier adjacent-sibling
   selector was zeroing it out. */
.float-card {
  margin-top: 120px !important;
}

/* ============================================================
   LOCATION MAP — Cristalino editorial pattern (Where we are located)
   ============================================================ */

.location__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.location__rule {
  flex: 1;
  height: 1px;
  background: rgba(34, 40, 28, 0.18);
}

.location__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
}

.location__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  align-items: center;
}

@media (min-width: 900px) {
  .location__grid {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--sp-9);
  }
}

.location__copy {
  max-width: 38ch;
}

.location__title {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--sp-5);
}

.location__body {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-5);
}

.location__legend {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.location__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

.location__legend-dot--amazon {
  background: #7B9A78;
}

.location__legend-dot--lodge {
  background: #4F6B36;
}

.location__map svg {
  width: 100%;
  height: auto;
  display: block;
}

.location__continent {
  fill: #C8D6BD;
}

.location__amazon {
  fill: #7B9A78;
  opacity: 0.85;
}

.location__borders {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1;
}

.location__cities circle {
  fill: #ffffff;
  stroke: rgba(34, 40, 28, 0.5);
  stroke-width: 0.75;
}

.location__cities text {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  fill: var(--color-text);
}

.location__lodge circle {
  fill: #4F6B36;
  stroke: #ffffff;
  stroke-width: 2;
}

.location__lodge text {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  fill: var(--color-text);
}

/* ============================================================
   Header language switcher — EN · ES · DE · FR (Option B inline)
   ============================================================ */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-right: var(--sp-4);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--tracking-wider);
  font-weight: 500;
}

.lang-switch a {
  position: relative;
  color: inherit;
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 200ms ease;
}

.lang-switch a:hover {
  opacity: 1;
}

.lang-switch a[aria-current="page"] {
  opacity: 1;
  text-decoration: none;
}

.lang-switch a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
}

/* Non-first links carry padding-left for the | separator; pull the underline
   in by that same amount so it sits under the label, not under the separator. */
.lang-switch a + a[aria-current="page"]::after {
  left: var(--sp-3);
}

.lang-switch a + a {
  position: relative;
  padding-left: var(--sp-3);
}

.lang-switch a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 10px;
  background: currentColor;
  opacity: 0.3;
  transform: translateY(-50%);
}

/* Phase 1/2 header: white text */
.site-header[data-header-phase="1"] .lang-switch,
.site-header[data-header-phase="2"] .lang-switch {
  color: #ffffff;
}

/* Phase 3 header: dark text on light bg */
.site-header[data-header-phase="3"] .lang-switch {
  color: var(--color-text);
}

/* Hide on narrow viewports — drawer can hold it later */
@media (max-width: 767px) {
  .lang-switch { display: none; }
}

/* ============================================================
   SIGNATURE DISHES — aerial plates with rotate-on-hover
   (Sonbrull restaurant pattern, applied on /table/)
   ============================================================ */

.dishes__head {
  text-align: center;
  margin-bottom: var(--sp-9);
}

/* Two adjacent brown accent sections (e.g. dishes + closing note) — collapse
   the seam between them so the contiguous brown doesn't read as a massive
   empty void. */
.section--accent-night + .section--accent-night {
  padding-top: var(--sp-3);
}
.section--accent-night:has(+ .section--accent-night) {
  padding-bottom: var(--sp-3);
}

.dishes__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(234, 229, 223, 0.65);
  margin: 0 0 var(--sp-3);
}

.dishes__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-bg);
  margin: 0;
  max-width: 24ch;
  margin-inline: auto;
}

.dishes__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}

@media (min-width: 768px) {
  .dishes__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-9);
  }
}

.dish-tile {
  margin: 0;
  text-align: center;
}

.dish-tile__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%; /* circular plate clip — only the food disc shows on brown bg */
  margin-bottom: var(--sp-5);
  max-width: 520px;
  margin-inline: auto;
}

.dish-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: dish-spin 22s linear infinite;
  animation-play-state: paused;
}

@media (hover: hover) {
  .dish-tile:hover .dish-tile__media img {
    animation-play-state: running;
  }
}

@keyframes dish-spin {
  to { transform: rotate(360deg); }
}

.dish-tile__caption {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.dish-tile__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-wide);
  color: var(--color-bg);
}

.dish-tile__sub {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(234, 229, 223, 0.7);
  letter-spacing: 0;
}

/* Respect users who prefer reduced motion — disable the spin */
@media (prefers-reduced-motion: reduce) {
  .dish-tile__media img {
    animation: none;
  }
}

/* Reduce padding 25% on the brown → dark-green seam (/table/ closing-note → reservations).
   Default .section padding-block is sp-9 (96px); these collapse to 72px on the touching edges. */
.section--accent-night:has(+ .section--dark) {
  padding-bottom: calc(var(--sp-9) * 0.75);
}
.section--accent-night + .section--dark {
  padding-top: calc(var(--sp-9) * 0.75);
}

/* ============================================================
   Location map — real geographic SVG + HTML pin overlay
   ============================================================ */

.location__map-inner {
  position: relative;
  aspect-ratio: 7674 / 9926;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.location__map-bg {
  width: 100%;
  height: 100%;
  display: block;
}

.location__pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.location__pin-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(34, 40, 28, 0.55);
  display: inline-block;
  flex-shrink: 0;
}

.location__pin-label {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text);
}

.location__pin-label--left {
  order: -1;
  margin-right: 4px;
}

.location__pin-label--small {
  font-size: 9px;
  opacity: 0.75;
}

.location__pin--lodge .location__pin-dot {
  width: 12px;
  height: 12px;
  background: #4F6B36;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(34, 40, 28, 0.3);
}

.location__pin-label--lodge {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: var(--tracking-base);
  text-transform: none;
  font-weight: 500;
}

/* ============================================================
   Location map — Cristalino-style layout
   (LOCATION rule top-left, "The Amazon" legend top-right,
    big centered map, descriptive caption below)
   ============================================================ */
/* === NEW: Cristalino-layout location section with Kantu pins === */
/* Section that hosts the loc block — extra top padding so the map's
   Central America overflow doesn't kiss the photo above it. */
.section--map { padding-block: var(--sp-9) var(--sp-7); }
@media (min-width: 1024px) {
  .section--map { padding-block: 160px var(--sp-7); }
}

.loc {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
  position: relative;
}
.loc__head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  /* Centered LOCATION with rules on each side. Map overflows above. */
  margin-bottom: 0;
}
.loc__eyebrow {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
  margin: 0 var(--sp-5);
}
@media (min-width: 1024px) {
  .loc__eyebrow { font-size: 20px; }
}
.loc__rule {
  flex: 1;
  height: 1px;
  background: rgba(34, 40, 28, 0.25);
  min-width: 40px;
}

/* "The Amazon" legend — own row, below the LOCATION rule, top-right
   of the map column. */
.loc__amazon {
  position: absolute;
  top: 120px;
  right: 22%;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
  z-index: 3;
}
.loc__amazon-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #B4C8A0;
}
.loc__amazon-text {
  font-family: var(--font-body);
  font-size: 17px;
  letter-spacing: 0.08em;
  color: var(--color-text);
}
@media (max-width: 768px) {
  .loc__amazon { position: static; margin-top: var(--sp-3); }
}

.loc__body {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 3.2fr);
  gap: var(--sp-6);
  align-items: center;
  /* Allow the map to extend ABOVE the header via negative margin */
  overflow: visible;
}
.loc__copy {
  max-width: 36ch;
  padding-left: var(--sp-7);
}
.loc__copy-eyebrow {
  font-family: var(--font-body);
  font-size: 17px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--sp-5);
}
.loc__copy-body {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-5);
}
.loc__copy-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--t-base) var(--ease-out);
}
.loc__copy-link:hover,
.loc__copy-link:focus-visible {
  color: #7B9A78;
}
.loc__copy-link::before {
  content: '';
  width: 18px;
  height: 2px;
  background: rgba(34, 40, 28, 0.4);
  transition: background var(--t-base) var(--ease-out);
}
.loc__copy-link:hover::before,
.loc__copy-link:focus-visible::before {
  background: #7B9A78;
}

.loc__map {
  position: relative;
  width: 100%;
  max-width: 880px;
  aspect-ratio: 1030 / 851;
  /* Map's TOP extends ABOVE the LOCATION header line so Central America
     overflows above the rule. Negative margin scales with viewport. */
  margin-top: -7vw;
  max-height: none;
}
@media (min-width: 1500px) {
  .loc__map { margin-top: -105px; }
}
@media (max-width: 768px) {
  .loc__map { margin-top: 0; aspect-ratio: 1030 / 851; }
}
.loc__map-bg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.loc__patch {
  position: absolute;
  background: var(--color-bg);
  pointer-events: none;
  z-index: 2;
}
.loc__pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Anchor = DOT's center (not whole pin's center). Dot is 9px → shift -4.5px.
     Override for the lodge pin below (its dot is 16px). */
  transform: translate(-4.5px, -50%);
  white-space: nowrap;
  z-index: 4;
}
.loc__pin--lodge {
  transform: translate(-8px, -50%);
}
.loc__pin-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(34, 40, 28, 0.45);
  display: inline-block;
  flex-shrink: 0;
}
.loc__pin-label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 500;
  color: #000000;
}
.loc__pin-label--left {
  order: -1;
  margin-right: 4px;
}
.loc__pin--lodge .loc__pin-dot {
  width: 16px;
  height: 16px;
  background: #4F6B36;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(34, 40, 28, 0.25);
}
.loc__pin-label--lodge {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: var(--tracking-base);
  text-transform: none;
  font-weight: 500;
  color: var(--color-text);
  margin-left: -2px;
}
@media (max-width: 768px) {
  .loc__body { grid-template-columns: 1fr; gap: var(--sp-7); }
  .loc__copy { max-width: none; }
  .loc__head { flex-wrap: wrap; }
  .loc__legend { margin-left: 0; }
  .loc__pin-label { font-size: 9px; }
  .loc__pin-label--lodge { font-size: 14px; }
}

/* === legacy ref-based map (dormant, kept for safety) === */
.location-ref {
  position: relative;
  width: 100%;
  max-width: 1444px;
  margin: 0 auto;
  aspect-ratio: 1444 / 725;
  /* The cream background matches the PNG's own bg so patches blend in. */
  background: var(--color-bg);
}

.location-ref__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Opaque cream patches that "erase" the PNG's baked-in text. */
.location-ref__patch {
  position: absolute;
  background: var(--color-bg);
  pointer-events: none;
  z-index: 2;
}

/* Left-column copy overlay */
.location-ref__copy {
  position: absolute;
  left: 5.4%;
  top: 44%;
  width: 22%;
  z-index: 3;
}
.location-ref__copy-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--sp-4);
}
.location-ref__copy-body {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-4);
}
.location-ref__copy-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.location-ref__copy-link::before {
  content: '';
  width: 18px;
  height: 1px;
  background: #4F6B36;
}

/* Pin overlays */
.location-ref__pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 4;
}
.location-ref__pin-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(34, 40, 28, 0.45);
  display: inline-block;
  flex-shrink: 0;
}
.location-ref__pin-label {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(34, 40, 28, 0.7);
}
.location-ref__pin-label--left {
  order: -1;
  margin-right: 4px;
}
.location-ref__pin--lodge .location-ref__pin-dot {
  width: 16px;
  height: 16px;
  background: #4F6B36;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(34, 40, 28, 0.25);
}
.location-ref__pin-label--lodge {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: var(--tracking-base);
  text-transform: none;
  font-weight: 500;
  color: var(--color-text);
  margin-left: 6px;
}

@media (max-width: 768px) {
  .location-ref__copy-body { font-size: 11px; }
  .location-ref__copy-eyebrow { font-size: 11px; }
  .location-ref__pin-label { font-size: 9px; }
  .location-ref__pin-label--lodge { font-size: 14px; }
}

/* === Old SVG-based map CSS (kept dormant; not referenced by HTML anymore) === */
.location-map {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

/* TOP HEADER ROW
   ─── LOCATION ─────────────────────── ● The Amazon
   Rule extends both sides of the eyebrow + legend in the far right. */
.location-map__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-9);
}

.location-map__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}

.location-map__rule {
  flex: 1;
  height: 1px;
  background: rgba(34, 40, 28, 0.25);
  min-width: 40px;
}

.location-map__legend {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;
  margin-left: var(--sp-4);
}

.location-map__legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #7B9A78;
}

.location-map__legend-text {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-text);
}

/* 2-column body — copy left (~30%), map right (~70%) */
.location-map__body {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 2.4fr);
  gap: var(--sp-9);
  align-items: center;
}

.location-map__copy {
  max-width: 38ch;
  padding-bottom: var(--sp-6);
}

.location-map__copy-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--sp-5);
}

.location-map__copy-body {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-5);
}

.location-map__copy-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.location-map__copy-link::before {
  content: '';
  width: 18px;
  height: 1px;
  background: #4F6B36;
}
.location-map__copy-link:hover,
.location-map__copy-link:focus-visible {
  /* no color change on hover */
}

/* Map canvas — large, sits in the right column */
.location-map__canvas {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 7674 / 9926;
}

.location-map__bg {
  width: 100%;
  height: 100%;
  display: block;
}

.location-map__pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.location-map__pin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(34, 40, 28, 0.4);
  display: inline-block;
  flex-shrink: 0;
}

.location-map__pin-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: rgba(34, 40, 28, 0.7);
}

.location-map__pin-label--left {
  order: -1;
  margin-right: 4px;
}

.location-map__pin--lodge .location-map__pin-dot {
  width: 16px;
  height: 16px;
  background: #4F6B36;
  border: 3px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(34, 40, 28, 0.25);
}

.location-map__pin-label--lodge {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: var(--tracking-base);
  text-transform: none;
  font-weight: 500;
  color: var(--color-text);
  margin-left: 6px;
}

/* Mobile: stack copy above map */
@media (max-width: 768px) {
  .location-map__body {
    grid-template-columns: 1fr;
    gap: var(--sp-7);
  }
  .location-map__copy {
    max-width: none;
    padding-bottom: 0;
  }
  .location-map__head { flex-wrap: wrap; }
  .location-map__rule { min-width: 30px; }
  .location-map__legend { margin-left: 0; }
  .location-map__pin-label { font-size: 9px; }
  .location-map__pin-label--lodge { font-size: 15px; }
}

/* ============================================================
   Yoga page — two-spaces grid + reversed feature variant
   ============================================================ */
.yoga-spaces {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}
@media (min-width: 900px) {
  .yoga-spaces { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

.yoga-space__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  margin-bottom: var(--sp-5);
}

.yoga-space__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yoga-space__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--sp-3);
  display: block;
}

.yoga-space__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 var(--sp-4);
}

.yoga-space__body {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  margin: 0;
}

/* Reversed feature variant — copy on the left, media on the right */
.yoga-feature--reverse .yoga-feature__media { order: 2; }
.yoga-feature--reverse .yoga-feature__copy  { order: 1; }
@media (max-width: 899px) {
  .yoga-feature--reverse .yoga-feature__media { order: -1; }
  .yoga-feature--reverse .yoga-feature__copy  { order: 1; }
}

/* "Photos coming soon" placeholder for the new daily-class room */
.yoga-feature__media--placeholder {
  display: flex;
}
.yoga-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px dashed rgba(34, 40, 28, 0.35);
  border-radius: 2px;
  background: rgba(34, 40, 28, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-6);
  gap: var(--sp-3);
}
.yoga-placeholder__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.yoga-placeholder__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: var(--lh-tight);
  max-width: 26ch;
}

/* ============================================================
   /getting-here page — Cristalino-style 3-column layout
   ============================================================ */
.gh-hero {
  width: 100%;
  height: 56vh;
  max-height: 620px;
  overflow: hidden;
}
.gh-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gh-title-section {
  text-align: center;
  padding: var(--sp-8) var(--sp-4) var(--sp-7);
  border-bottom: 1px solid rgba(34, 40, 28, 0.08);
}
.gh-title {
  font-family: var(--font-body);
  font-size: 28px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--color-text);
  margin: 0 0 var(--sp-3);
}
.gh-title-rule {
  display: inline-block;
  width: 52px;
  height: 2px;
  background: #7B9A78;
}

.gh-content {
  max-width: 1500px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5) var(--sp-9) 220px;
  position: relative;
}
/* Decorative vertical line on the left side, like the Cristalino reference. */
.gh-content::before {
  content: '';
  position: absolute;
  left: 180px;
  top: var(--sp-8);
  bottom: var(--sp-9);
  width: 1px;
  background: rgba(34, 40, 28, 0.14);
}
@media (max-width: 1100px) {
  .gh-content { padding-left: 110px; }
  .gh-content::before { left: 70px; }
}
@media (max-width: 700px) {
  .gh-content { padding-left: var(--sp-5); }
  .gh-content::before { display: none; }
}
.gh-container {
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  gap: var(--sp-7);
  align-items: start;
}
@media (max-width: 1024px) {
  .gh-container { grid-template-columns: 200px 1fr; }
  .gh-right { grid-column: 1 / -1; max-width: 480px; margin-top: var(--sp-5); }
}
@media (max-width: 700px) {
  .gh-container { grid-template-columns: 1fr; }
  .gh-sidebar { display: none; }
}

/* Sidebar */
.gh-sidebar {
  font-family: var(--font-body);
  color: var(--color-text);
  position: sticky;
  top: 100px;
}
.gh-sidebar h3 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 var(--sp-3);
  color: var(--color-text);
}
.gh-sidebar h3:not(:first-child) {
  margin-top: var(--sp-5);
}
.gh-sidebar__chevron {
  display: inline-block;
  margin-left: 4px;
  color: rgba(34, 40, 28, 0.4);
  font-weight: 400;
}
.gh-sidebar ul {
  list-style: none;
  padding: 0 0 0 var(--sp-3);
  margin: 0 0 var(--sp-5);
}
.gh-sidebar li {
  margin: 0 0 var(--sp-2);
  position: relative;
  padding-left: 18px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gh-sidebar li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: rgba(34, 40, 28, 0.35);
}
.gh-sidebar a {
  color: var(--color-text);
  text-decoration: none;
  position: relative;
}
.gh-sidebar a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
}
.gh-sidebar a:hover::after { transform: scaleX(1); }
.gh-sidebar__current a,
.gh-sidebar a[aria-current="page"] {
  color: #7B9A78;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Main column */
.gh-main h2 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--sp-4);
}
.gh-main h2:not(:first-child) {
  margin-top: var(--sp-7);
}
.gh-main p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 var(--sp-4);
  max-width: 62ch;
}
.gh-main strong { font-weight: 600; }
.gh-main a {
  color: #4F6B36;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.gh-main a:hover { color: #7B9A78; }
.gh-map {
  margin: var(--sp-6) 0 var(--sp-7);
  max-width: 560px;
}
.gh-map-frame {
  position: relative;
  width: 100%;
}
.gh-map-bg {
  width: 100%;
  display: block;
}
.gh-map-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* Pins inside the /getting-here mini-map. Anchor = white-dot center. */
.gh-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 4px;
  transform: translate(-3px, -50%);
  white-space: nowrap;
  z-index: 4;
  font-family: var(--font-body);
}
.gh-pin-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(34, 40, 28, 0.45);
  flex-shrink: 0;
}
.gh-pin-label {
  font-size: 13px;
  color: #1d2412;
  letter-spacing: 0.04em;
}
.gh-pin--lodge {
  transform: translate(-7px, -50%);
  z-index: 5;
}
.gh-pin--lodge .gh-pin-dot {
  width: 14px;
  height: 14px;
  background: #4F6B36;
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(34, 40, 28, 0.25);
}
.gh-pin--lodge .gh-pin-label {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: #1d2412;
  margin-left: 4px;
  letter-spacing: 0.04em;
}

/* Right column image + caption */
.gh-right { position: sticky; top: 100px; display: flex; flex-direction: column; gap: var(--sp-5); }

/* Contact card above the right-column photo */
.gh-contact-card {
  padding: var(--sp-5);
  background: rgba(34, 40, 28, 0.04);
  border: 1px solid rgba(34, 40, 28, 0.10);
}
.gh-contact-card__eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--sp-3);
}
.gh-contact-card__body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0 0 var(--sp-4);
}
.gh-contact-card__body strong { font-weight: 600; }
.gh-contact-card__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 14px;
  background: #25D366;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
}
.gh-contact-card__wa { flex-shrink: 0; }
.gh-right-img {
  margin: 0;
}
.gh-right-img img {
  width: 100%;
  display: block;
}
.gh-right-img figcaption {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--color-text-muted);
  max-width: 34ch;
  margin-top: var(--sp-3);
}

/* Breadcrumb at the bottom */
.gh-breadcrumb {
  background: rgba(34, 40, 28, 0.04);
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.gh-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  margin: 0 var(--sp-2);
}
.gh-breadcrumb a:hover { color: var(--color-text); }
.gh-breadcrumb span[aria-hidden="true"] {
  margin: 0 var(--sp-2);
  color: rgba(34, 40, 28, 0.3);
}
.gh-breadcrumb__current {
  color: var(--color-text);
  font-weight: 500;
}

/* ============================================================
   /reserve page — reservation form + rates panel
   ============================================================ */
.rv-cta {
  display: inline-block;
  padding: 12px 28px;
  background: var(--color-text);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
}
.rv-subhead {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text);
  margin: var(--sp-6) 0 var(--sp-3);
}
.rv-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-5);
}
.rv-checklist li {
  position: relative;
  padding-left: 28px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text);
  margin: 0 0 var(--sp-2);
}
.rv-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #B4C8A0;
}
.rv-checklist li::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  transform: rotate(-45deg);
}
.rv-faq { font-size: 13px; color: var(--color-text-muted); margin: 0 0 var(--sp-6); }
.rv-faq a { color: #4F6B36; text-decoration: underline; text-underline-offset: 3px; }
.rv-rule { border: 0; border-top: 1px solid rgba(34, 40, 28, 0.12); margin: var(--sp-7) 0; }

.rv-form { max-width: 640px; }
.rv-form__row { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.rv-form__row--2 { grid-template-columns: 1fr 1fr; }
.rv-form__row--3 { grid-template-columns: 130px 1fr 1fr; }
@media (max-width: 600px) {
  .rv-form__row--2, .rv-form__row--3 { grid-template-columns: 1fr; }
}
.rv-form__field { display: flex; flex-direction: column; margin-bottom: var(--sp-4); }
.rv-form__row .rv-form__field { margin-bottom: 0; }
.rv-form__field label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}
.rv-form__field label span { color: #4F6B36; }
.rv-form__field input,
.rv-form__field select,
.rv-form__field textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-text);
  background: #ffffff;
  border: 1px solid rgba(34, 40, 28, 0.18);
  border-radius: 0;
  appearance: none;
}
.rv-form__field textarea { resize: vertical; min-height: 110px; }
.rv-form__select { position: relative; }
.rv-form__select::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-text);
  border-bottom: 1.5px solid var(--color-text);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.rv-form__submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}
.rv-submit {
  background: none;
  border: 0;
  padding: 0 0 4px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 2px solid #7B9A78;
  cursor: pointer;
}
.rv-submit:hover { border-bottom-color: var(--color-text); }
.rv-required { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted); text-transform: uppercase; margin: 0; }
.rv-required span { color: #4F6B36; }