/* ============================================================
   TOKENS — "Aux Deux Métis" éco lodge palette: deep olive green,
   warm cream, sage accents, a copper note reserved for the dark
   activities section. Ported 1:1 from the approved Claude Design
   mockup ("Aux Deux Metis - site.html").
   ============================================================ */
:root {
  --c-ink:    #3E5223; /* deep olive green — text, buttons, footer, reservation cards */
  --c-deep:   #1D3327; /* darkest green — activities section background */
  --c-sage:   #7C9146; /* sage green — kickers, small accents on light bg */
  --c-copper: #C98B4B; /* copper — activities accent, dividers, FAQ accent */
  --c-cream:  #F6EFE3;
  --c-white:  #FFFFFF;
  --c-border: #E4DFCF;
  --c-muted:  #55564A;
  --c-muted-2:#7B8A72;

  --glass-bg:   rgba(255,255,255,0.10);
  --glass-brd:  rgba(255,255,255,0.22);
  --glass-blur: 18px;

  --font-display: "Playfair Display", Georgia, serif;
  --font-serif:   "Cormorant Garamond", Georgia, serif;
  --font-sans:    "Jost", system-ui, sans-serif;
  /* Hero title only — echoes the logo's handwritten "A2M" monogram. Falls
     back to --font-serif below 480px (see .hero__title's media query):
     a thin script reads worse than a serif at very small sizes. */
  --font-script:  "Alex Brush", "Brush Script MT", cursive;

  --fs-hero:  clamp(2.4rem, 7vw, 4.6rem);
  --fs-h2:    clamp(2rem, 4.2vw, 3.4rem);
  --fs-h3:    clamp(1.3rem, 2vw, 1.6rem);
  --fs-body:  clamp(0.95rem, 1.05vw, 1.05rem);
  --fs-small: 0.85rem;
  --tracking-lux: 0.18em;

  --space-section: clamp(4rem, 9vh, 7rem);
  --container: min(1240px, 92vw);
  --radius: 4px;
  --radius-pill: 999px;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");

  --ease-lux:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 0.9s;

  /* Torn-paper edge, used on the about + contact/map sections */
  --jag: polygon(0% 16px, 5% 4px, 11% 14px, 17% 3px, 24% 13px, 31% 5px, 38% 15px, 45% 3px, 52% 13px, 59% 2px, 66% 14px, 73% 5px, 80% 15px, 87% 4px, 94% 12px, 100% 5px, 100% calc(100% - 15px), 94% calc(100% - 4px), 87% calc(100% - 13px), 80% calc(100% - 2px), 73% calc(100% - 12px), 66% calc(100% - 5px), 59% calc(100% - 15px), 52% calc(100% - 3px), 45% calc(100% - 12px), 38% calc(100% - 2px), 31% calc(100% - 13px), 24% calc(100% - 5px), 17% calc(100% - 15px), 11% calc(100% - 4px), 5% calc(100% - 11px), 0% calc(100% - 5px));
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--c-ink);
  line-height: 1.7;
  overflow-x: hidden;
  background-color: var(--c-cream);
}
body.nav-open { overflow: hidden; }

img, video { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font: inherit; }
ul, ol { list-style: none; }
address { font-style: normal; }
input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  color: var(--c-ink);
}

:focus-visible { outline: 2px solid var(--c-sage); outline-offset: 3px; }

/* ============================================================
   TYPOGRAPHY UTILITIES
   ============================================================ */
.kicker {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-lux);
  color: var(--c-sage);
  margin-bottom: 0.7em;
  display: block;
}
.kicker.light { color: var(--c-copper); }

.h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-ink);
  margin-bottom: 0.8em;
}
.h2.light { color: var(--c-cream); }

.h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--c-ink);
  line-height: 1.2;
}

.body-text {
  color: var(--c-muted);
  max-width: 52ch;
  margin-bottom: 2.5rem;
  line-height: 1.85;
  font-weight: 300;
}
.section-sub {
  color: var(--c-muted);
  max-width: 56ch;
  line-height: 1.75;
  font-size: var(--fs-body);
  font-weight: 300;
}
.centered { text-align: center; }
.section-header.centered .section-sub { margin-inline: auto; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { width: var(--container); margin-inline: auto; }
.section { padding-block: var(--space-section); }

.section-header { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-header.centered { display: flex; flex-direction: column; align-items: center; }

/* ============================================================
   BUTTONS — full pill, olive green, per the mockup
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.95em 2em;
  border-radius: var(--radius-pill);
  transition: transform 0.25s var(--ease-soft), background 0.25s, box-shadow 0.25s, color 0.25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-ink);
  color: var(--c-cream);
  box-shadow: 0 8px 32px rgba(62,82,35,0.25);
}
.btn--primary:hover { background: #4E6A2C; box-shadow: 0 12px 40px rgba(62,82,35,0.32); }

.btn--book {
  background: var(--c-ink);
  color: var(--c-cream);
  box-shadow: 0 4px 16px rgba(62,82,35,0.18);
  font-size: 10.5px;
  padding: 0.8em 1.7em;
}
.btn--book:hover { background: #4E6A2C; box-shadow: 0 8px 28px rgba(62,82,35,0.3); }

.btn--ghost {
  border: 1.5px solid rgba(255,255,255,0.7);
  color: var(--c-white);
  background: transparent;
}
.btn--ghost:hover { background: rgba(255,255,255,0.15); }

.btn--ghost-light {
  border: 1.5px solid rgba(246,239,227,0.75);
  color: var(--c-cream);
  background: rgba(246,239,227,0.1);
  backdrop-filter: blur(8px);
}
.btn--ghost-light:hover { background: rgba(246,239,227,0.2); }

.full-w { width: 100%; justify-content: center; }
.btn-via { opacity: 0.65; font-size: 0.75em; }

/* ============================================================
   GLASSMORPHISM
   ============================================================ */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.2);
}

/* ============================================================
   TOP NAV — cream bar, olive wordmark, pill language switch
   ============================================================ */
.top-nav {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 14px;
  column-gap: clamp(16px, 2.5vw, 32px);
  /* Kept slim on purpose — the logo below is sized to nearly fill this bar,
     not to grow it. A tall bar reads as "banner", a slim one with a big
     mark in it reads as "logo, prominent" — that's the point here. */
  padding: 10px clamp(20px, 4vw, 36px);
  background: var(--c-cream);
  font-family: var(--font-sans);
}
/* Logo only — no wordmark text next to it (the mark itself carries the
   brand now, see .top-nav__logo's alt text for what a screen reader
   announces instead). */
.top-nav__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Round crop, no white fill behind it — the mark itself (logovrai.png) is
   an opaque circular emblem, not a transparent line mark, so a white
   backing is no longer needed. Negative vertical margins still let it
   overflow above/below the bar without growing it (margin-box stays as
   tall as a plain logo would be). */
.top-nav__logo {
  width: 50px;
  height: 50px;
  margin-block: -4px;
  margin-left: 10px;
  display: block;
  box-sizing: border-box;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.top-nav__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
  column-gap: clamp(14px, 2vw, 26px);
  min-width: 0;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink);
  white-space: nowrap;
}
.top-nav__link {
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  color: var(--c-ink);
  transition: border-color 0.2s, color 0.2s;
}
.top-nav__link:hover { border-bottom-color: var(--c-copper); }
.top-nav__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.top-nav__lang { position: relative; }
.top-nav__lang-btn {
  appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #C7CDB4;
  border-radius: var(--radius-pill);
  padding: 7px 13px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--c-ink);
  transition: border-color 0.2s, background 0.2s;
}
.top-nav__lang-btn:hover { border-color: var(--c-ink); background: #EDE6D6; }
.top-nav__lang-btn svg { flex-shrink: 0; }
.top-nav__lang-btn::after {
  content: '▼';
  font-size: 8px;
  opacity: 0.7;
  margin-left: 2px;
}
.top-nav__lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 25;
  min-width: 150px;
  background: var(--c-cream);
  border: 1px solid var(--c-border);
  box-shadow: 0 14px 30px rgba(45,60,25,0.16);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.top-nav__lang-menu.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.top-nav__lang-menu button {
  appearance: none;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--c-ink);
  cursor: pointer;
}
.top-nav__lang-menu button:hover { background: #E7E0CD; }
.top-nav__lang-menu button.active { font-weight: 500; background: #E7E0CD; }

.top-nav__book {
  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--c-ink);
  color: var(--c-cream);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  transition: background 0.2s ease;
}
.top-nav__book:hover { background: #4E6A2C; }

/* ---------- overlay variant — homepage hero only ----------
   Floats transparently over the hero photo instead of sitting on its own
   solid bar above it. Scoped to this modifier class (added only on
   index.html's <header>) so gallery.html's plain cream-background nav is
   untouched — its links stay dark ink on cream, which already reads fine
   with nothing but flat colour behind it. */
.top-nav--overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 40;
  background: linear-gradient(180deg, rgba(15,20,11,0.62) 0%, rgba(15,20,11,0.28) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.top-nav--overlay .top-nav__link {
  color: #F7F2E7;
  text-shadow: 0 2px 10px rgba(20,30,10,0.45);
}
.top-nav--overlay .top-nav__link:hover { border-bottom-color: var(--c-copper); }
.top-nav--overlay .top-nav__lang-btn {
  border-color: rgba(255,255,255,0.55);
  color: #F7F2E7;
  background: rgba(255,255,255,0.1);
}
.top-nav--overlay .top-nav__lang-btn:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.8); }

@media (max-width: 640px) {
  .top-nav { justify-content: center; text-align: center; }
  .top-nav__links { order: 3; width: 100%; justify-content: center; }
  .top-nav__logo { width: 40px; height: 40px; margin-block: -3px; }
}

/* ---------- ambience sound toggle ----------
   Fixed to the viewport, top-right, sitting just below the nav bar (not
   inside it) so it never collides with the language switcher or the
   "Réserver" button. Muted icon shown by default; playing icon crossfades
   in on click. Purely decorative crossfade — gated by prefers-reduced-motion
   below. */
.sound-toggle {
  position: fixed;
  top: 92px;
  right: 18px;
  z-index: 50;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 50%;
  background: rgba(20,26,15,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #F7F2E7;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.sound-toggle:hover { background: rgba(20,26,15,0.55); border-color: rgba(255,255,255,0.8); }
.sound-toggle__icon {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sound-toggle__icon--muted { opacity: 1; }
.sound-toggle[aria-pressed="true"] .sound-toggle__icon--muted { opacity: 0; }
.sound-toggle[aria-pressed="true"] .sound-toggle__icon--playing { opacity: 1; }
@media (max-width: 640px) {
  .sound-toggle { top: 196px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sound-toggle__icon { transition: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: min(660px, 88svh);
  min-height: 480px;
  overflow: hidden;
  background: var(--c-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: clamp(90px, 16vh, 170px);
}
@media (max-width: 640px) {
  /* The overlay nav stacks to 3 rows at this width (~205px tall) — the
     clamp() above tops out at 170px, not enough to clear it, which would
     otherwise hide the kicker and the first line of the title behind the
     nav. .hero only exists on this page, so this doesn't need scoping to
     .top-nav--overlay specifically — nothing else uses this padding. */
  .hero { padding-top: 232px; }
}

.hero__media { position: absolute; inset: 0; }
/* One stacked layer per photo in CONFIG.brand.hero.images. All start
   invisible; renderHeroMedia() toggles --visible on exactly one at a time,
   on a loop (every intervalMs) — the outgoing layer's fade-out and the
   incoming one's fade-in happen on the same opacity transition, at the
   same moment, which is the cross-fade. Every layer keeps zooming
   independently underneath, visible or not. */
.hero__bg {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroKB 16s ease-in-out infinite alternate;
  transform-origin: center center;
  opacity: 0;
  transition: opacity 4s ease;
}
.hero__bg--visible { opacity: 1; }
@keyframes heroKB {
  from { transform: scale(1); }
  to   { transform: scale(1.28); }
}

.hero__vignette-linear {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Slightly stronger than the single-photo original: has to keep the hero
     text readable over TWO photos now, including one with a lighter sky at
     the top where the kicker/title sit. */
  background: linear-gradient(180deg,
    rgba(28,42,14,0.5) 0%, rgba(28,42,14,0.24) 45%, rgba(28,42,14,0.34) 100%);
}
.hero__vignette-radial { display: none; }

.hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 40px;
  max-width: 900px;
  margin-top: clamp(16px, 4vh, 40px);
  pointer-events: none;
}
.hero__kicker {
  margin: 0 0 14px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-transform: uppercase;
  color: rgba(237,231,214,0.9);
}
.hero__title {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  /* Script faces sit visually smaller than an uppercase serif at the same
     size, and read in natural case — no uppercase transform, no wide
     tracking (both would break the cursive strokes' connections). */
  font-size: clamp(3.2rem, 9.5vw, 6.2rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-indent: 0;
  text-transform: none;
  color: #F7F2E7;
  text-shadow: 0 4px 26px rgba(20,30,10,0.35);
}
.hero__caption {
  /* Sentence case, modest tracking: this is a full descriptive sentence
     now (not a short punchy tagline), so the old uppercase + wide-tracked
     treatment would fight legibility. Narrower max-width than
     .hero__content wraps it into a calm, balanced block instead of one
     long stretched line — quiet and readable rather than shouted. */
  margin: 18px auto 0;
  max-width: 620px;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #EDE7D6;
  text-shadow: 0 2px 16px rgba(20,30,10,0.5);
}
/* Variant for very small screens: a thin script face loses its flowing
   connections and gets harder to read at this size — fall back to the
   site's other display serif instead, same treatment it used to have. */
@media (max-width: 480px) {
  .hero__title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 11vw, 2.8rem);
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    text-transform: uppercase;
  }
}

/* ============================================================
   ABOUT ("À propos") — new section: text + stat + photo collage,
   torn-paper edges top and bottom.
   ============================================================ */
.about {
  position: relative;
  background: var(--c-cream);
  padding: clamp(4.5rem, 9vw, 6.5rem) 0 clamp(5rem, 10vw, 7rem);
  clip-path: var(--jag);
  margin-top: -16px;
}
.about__grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.about__quote {
  margin: 0 0 1.75rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-ink);
}
.about__actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.about__link { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-ink); position: relative; }
.about__link::after {
  content: ''; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px;
  background: var(--c-copper); transition: width 0.3s var(--ease-soft);
}
.about__link:hover::after { width: 100%; }

.about__media { position: relative; height: clamp(320px, 40vw, 410px); min-width: 0; }
.about__media-a { position: absolute; left: 0; top: 0; width: 62%; height: 68%; overflow: hidden; }
.about__media-a img { width: 100%; height: 100%; object-fit: cover; }
.about__stat {
  position: absolute; left: 0; top: calc(68% - 26px);
  background: var(--c-cream); padding: 12px 20px 12px 0;
  display: flex; align-items: center; gap: 10px;
}
.about__stat-value { font-family: var(--font-serif); font-weight: 700; font-size: 28px; color: var(--c-ink); line-height: 1; }
.about__stat-label { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; color: var(--c-sage); }
.about__media-b {
  position: absolute; right: 0; top: 14%; width: 68%; height: 76%;
  overflow: hidden; box-shadow: 0 18px 44px rgba(45,60,25,0.22);
}
.about__media-b img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__media { margin-top: 1rem; }
}

/* ============================================================
   ROOM CARDS
   ============================================================ */
.accommodations {
  background-color: var(--c-white);
  font-family: var(--font-sans);
}
.accommodations .kicker { color: var(--c-sage); }
.kicker--underline { text-decoration: underline; text-underline-offset: 4px; }
.accommodations .h2 { font-family: var(--font-display); font-weight: 700; color: var(--c-ink); }
.accommodations .section-sub { color: var(--c-muted); }

.room-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 22px;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.room-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-lux), transform 0.7s var(--ease-lux);
  display: flex;
  flex-direction: column;
}
.room-cards.is-visible .room-card:nth-child(1) { transition-delay: 0ms; }
.room-cards.is-visible .room-card:nth-child(2) { transition-delay: 90ms; }
.room-cards.is-visible .room-card:nth-child(3) { transition-delay: 180ms; }
.room-cards.is-visible .room-card:nth-child(4) { transition-delay: 270ms; }
.room-cards.is-visible .room-card { opacity: 1; transform: translateY(0); }

.room-card__gallery { position: relative; }
.room-card__main { position: relative; height: 220px; overflow: hidden; }
.room-card__main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-card__tag {
  position: absolute; top: 14px; right: -38px;
  width: 150px; transform: rotate(45deg);
  background: var(--c-ink); color: var(--c-cream);
  text-align: center; font-size: 9.5px; letter-spacing: 0.1em;
  padding: 6px 0; pointer-events: none;
}
.room-card__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.room-card__thumb { position: relative; height: 58px; overflow: hidden; }
.room-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.room-card__info { padding: 16px 0 4px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.room-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.15;
  color: var(--c-ink);
}
.room-card__amount-row { display: flex; align-items: baseline; gap: 6px; }
.room-card__amount { font-family: var(--font-serif); font-size: 22px; color: var(--c-ink); }
.room-card__currency,
.room-card__pernight { font-family: var(--font-sans); font-size: 11px; font-weight: 300; color: var(--c-muted-2); }

.room-card__badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.room-card__pill {
  background: #EDE6D6;
  color: var(--c-ink);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.room-card__pill--eco {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #E3EADD;
  color: #3D6A4C;
  padding: 5px 11px 5px 9px;
}
.room-card__pill--eco svg { width: 13px; height: 13px; flex: none; }
.room-card__pill--highlight { background: #F1E8D6; color: #8A6A2F; }
.room-card__capacity { font-size: 11.5px; color: var(--c-muted); }

.room-card__facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 300;
  color: var(--c-muted);
}
.room-card__fact { display: flex; gap: 8px; align-items: flex-start; }
.room-card__fact svg { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--c-sage); }

.room-card__note { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 300; color: var(--c-muted-2); }

.room-card__cta {
  margin-top: 14px;
  align-self: flex-start;
  background: var(--c-ink);
  color: var(--c-cream);
  text-decoration: none;
  border-radius: var(--radius-pill);
  padding: 12px 24px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  transition: background 0.2s ease;
}
.room-card__cta:hover { background: #4E6A2C; }
.room-card__footnote { display: none; }
.room-card__from,
.room-card__price-col { display: contents; }

@media (max-width: 1100px) {
  .room-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .room-cards { grid-template-columns: 1fr; }
}

/* ── Footnotes ("good to know") shown once under the room cards ─────────── */
.room-footnotes {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-left: 4px;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.room-footnotes li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
  font-weight: 300;
  color: var(--c-muted);
}
.room-footnotes__dot { width: 5px; height: 5px; background: var(--c-copper); border-radius: 50%; flex: none; }

/* ============================================================
   SERVICES — 4-card grid (icon + heading + bullet list) + a
   full-width transfers strip, per the mockup.
   ============================================================ */
.services { background: var(--c-cream); }
.services .kicker { color: var(--c-sage); }
.services .h2 { font-family: var(--font-serif); font-weight: 400; color: var(--c-ink); }

.service-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 20px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.service-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: 32px 28px 34px;
}
.service-card__icon {
  width: 46px; height: 46px; border-radius: 50%;
  background: #EDE6D6;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  color: var(--c-ink);
}
.service-card__icon svg { width: 22px; height: 22px; }
.service-card__title {
  margin: 0 0 16px;
  min-height: 52px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  color: var(--c-ink);
}
.service-card__list { display: flex; flex-direction: column; gap: 11px; }
.service-card__list li {
  display: flex; gap: 11px; align-items: flex-start;
  font-family: var(--font-sans); font-weight: 300; font-size: 13px; line-height: 1.6;
  color: var(--c-muted);
}
.service-card__list li::before {
  content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-sage); margin-top: 7px;
}

.transfers-strip {
  grid-column: 1 / -1;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: 30px 32px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,2.2fr);
  gap: 36px;
  align-items: center;
}
.transfers-strip__head { display: flex; gap: 16px; align-items: flex-start; }
.transfers-strip__icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  background: #EDE6D6; display: flex; align-items: center; justify-content: center; color: var(--c-ink);
}
.transfers-strip__icon svg { width: 22px; height: 22px; }
.transfers-strip__title { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 500; font-size: 22px; color: var(--c-ink); }
.transfers-strip__note { font-family: var(--font-sans); font-weight: 300; font-size: 12px; color: var(--c-muted-2); }
.transfers-strip__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 0 40px;
}
.transfers-strip__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 11px 0; border-bottom: 1px solid var(--c-border);
  font-family: var(--font-sans); font-weight: 300; font-size: 13px; color: var(--c-muted);
}
.transfers-strip__list li:nth-last-child(-n+2) { border-bottom: none; }
.transfers-strip__list strong { font-family: var(--font-serif); font-weight: 500; font-size: 16px; color: var(--c-ink); white-space: nowrap; }

@media (max-width: 1024px) {
  .service-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .transfers-strip { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .service-cards { grid-template-columns: 1fr; }
  .transfers-strip__list { grid-template-columns: 1fr; }
}

/* ============================================================
   RESERVATION & PAYMENT — 3-card grid: deposit / mobile money /
   bank transfer.
   ============================================================ */
.reservation { background: var(--c-white); }
.reservation .h2 { font-family: var(--font-serif); font-weight: 400; color: var(--c-ink); }
.reservation-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 26px;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.reservation-card {
  background: var(--c-cream);
  padding: 32px 30px 34px;
}
.reservation-card__title { margin: 0 0 16px; font-family: var(--font-serif); font-weight: 500; font-size: 22px; color: var(--c-ink); }
.reservation-card__amount { font-family: var(--font-serif); font-size: 28px; color: var(--c-ink); margin-bottom: 12px; }
.reservation-card p { font-family: var(--font-sans); font-weight: 300; font-size: 13px; line-height: 1.8; color: var(--c-muted); margin: 0; }

.mobile-money-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.mobile-money-list__item {
  display: flex; flex-direction: column; gap: 2px;
  border-bottom: 1px solid var(--c-border); padding-bottom: 10px;
  font-family: var(--font-sans); font-size: 13px; color: var(--c-muted);
}
.mobile-money-list__item:last-child { border-bottom: none; padding-bottom: 0; }
.mobile-money-list__provider { font-size: 12px; color: var(--c-muted-2); }
.mobile-money-list__phone { color: var(--c-ink); white-space: nowrap; }

.bank-details { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--c-muted); }
.bank-details__label { color: var(--c-muted-2); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; display: block; }

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

/* ============================================================
   CONTACT / LOCATION — map background + overlay panel
   ============================================================ */
.location {
  position: relative;
  min-height: 560px;
  background: #E8E2D6;
  clip-path: var(--jag);
  margin-top: -16px;
  display: flex;
  padding-block: clamp(3rem, 8vh, 5rem);
}
.location__map { position: absolute; inset: 0; z-index: 0; }
.location__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.location__map-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #E8E2D6 var(--grain);
  color: var(--c-muted-2);
  font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.05em;
  text-align: center; padding: 2rem;
}
.location__panel {
  position: relative; z-index: 2;
  width: min(390px, 100%);
  margin-left: auto;
  background: var(--c-ink);
  color: var(--c-cream);
  padding: clamp(2rem, 4vw, 2.9rem);
  align-self: center;
}
.location__panel .h2 { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: 0.01em; color: var(--c-cream); margin-bottom: 28px; }
.location__contact { display: flex; flex-direction: column; gap: 20px; }
.location__contact-row { display: flex; align-items: center; gap: 14px; }
.location__contact-row .location__contact-icon {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--c-cream); display: flex; align-items: center; justify-content: center; color: var(--c-ink);
}
.location__contact-icon svg { width: 16px; height: 16px; }
.location__contact-row span,
.location__contact-row a { font-size: 14px; font-weight: 300; letter-spacing: 0.02em; color: var(--c-cream); }
.location__contact-row a:hover { color: var(--c-copper); }

@media (max-width: 860px) {
  .location { display: block; }
  .location__map { position: relative; height: 320px; }
  .location__panel { width: 100%; margin: -60px auto 0; }
}

/* ============================================================
   ACTIVITIES — dark green section, overlapping fan carousel
   ============================================================ */
.experiences { background: var(--c-deep); color: var(--c-cream); }
.experiences .kicker { color: var(--c-copper); }
.experiences .h2 { font-family: var(--font-serif); font-weight: 400; color: #F7F4EC; }
.experiences .section-sub { color: #B9C4B4; }

.fan-carousel {
  position: relative;
  max-width: 1000px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  overflow: visible;
}
.fan-track {
  position: relative;
  height: 520px;
  margin: 0;
  padding: 0;
}

.fan-card {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(300px, 78vw);
  margin-left: -150px;
  cursor: pointer;
  list-style: none;
  opacity: 0;
  transform: scale(0.82);
  transition: transform 500ms var(--ease-lux), opacity 500ms var(--ease-lux), box-shadow 500ms var(--ease-lux);
}
.fan-card:focus-visible { outline: 2px solid var(--c-copper); outline-offset: 4px; border-radius: 14px; }

.fan-card__inner {
  display: flex;
  flex-direction: column;
  background: #EDEAE3;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 20px 50px rgba(0,0,0,0.10);
  transition: transform 500ms var(--ease-lux), box-shadow 500ms var(--ease-lux);
}
.fan-card--center .fan-card__inner {
  box-shadow: 0 4px 14px rgba(0,0,0,0.14), 0 34px 70px rgba(0,0,0,0.18);
}
.fan-card--center:hover .fan-card__inner { transform: translateY(-6px); }

.fan-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; flex-shrink: 0; }
.fan-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-lux); }
.fan-card--center:hover .fan-card__media img { transform: scale(1.04); }

.fan-card__body { display: flex; flex-direction: column; padding: 1.4rem; color: #22301F; }
.fan-card__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: #22301F;
  margin-bottom: 0.5rem;
  line-height: 1.15;
}
.fan-card__category {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  margin-bottom: 0.85rem;
}
.fan-card__category svg { width: 13px; height: 13px; flex-shrink: 0; color: var(--c-muted-2); }
.fan-card__desc {
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.65;
  color: #4A5548;
}
.fan-card__facts {
  display: flex;
  gap: 1.25rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid #D8D3C7;
}
.fan-card__fact { display: flex; flex-direction: column; }
.fan-card__fact-value {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: #22301F;
}
.fan-card__fact-label {
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  margin-top: 0.15rem;
}

.fan-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(247,244,236,0.9);
  color: var(--c-deep);
  border-radius: 8px;
  transition: transform 0.25s var(--ease-soft), background 0.25s, color 0.25s;
  z-index: 20;
}
.fan-arrow svg { width: 11px; height: 18px; }
.fan-arrow--prev { left: -10px; }
.fan-arrow--next { right: -10px; }
.fan-arrow:hover { background: var(--c-white); transform: translateY(-50%) scale(1.06); }

.fan-dots { display: none; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--c-ink);
  color: rgba(246,239,227,0.78);
  position: relative;
  clip-path: var(--jag);
  margin-top: -16px;
  padding-top: 40px;
}
.footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vw, 4rem) clamp(2rem, 4vw, 2.5rem);
  align-items: start;
}
.footer__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.04em;
  color: var(--c-cream);
}
.footer__loc {
  font-size: 8.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C3CFA6;
  margin-top: 5px;
  margin-bottom: 1rem;
}
.footer__blurb {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.85;
  color: #CBD6BC;
  max-width: 30ch;
  margin-bottom: 1.5rem;
}
.footer__cta { font-size: 10.5px; padding: 0.85em 1.7em; }

.footer__col-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-lux);
  text-transform: uppercase;
  color: #9DB37E;
  margin-bottom: 1.1rem;
}
.footer__links { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__links a,
.footer__contact a {
  position: relative;
  width: fit-content;
}
.footer__links a {
  font-size: 13px;
  font-weight: 300;
  color: #E4E9D9;
  transition: color 0.2s;
}
.footer__links a:hover,
.footer__contact a:hover { color: var(--c-copper); }
.footer__contact { font-size: 13px; font-weight: 300; line-height: 1.75; color: #E4E9D9; }
.footer__contact a { transition: color 0.2s; }
.footer__contact-hours { color: #AEBE97; font-size: 12px; margin-top: 4px; }

.footer__stay-hours { font-size: 13px; font-weight: 300; line-height: 1.9; color: #E4E9D9; margin-bottom: 20px; }
.footer__newsletter-form { display: flex; gap: 8px; }
.footer__newsletter-form input {
  flex: 1; min-width: 0;
  border: 1px solid rgba(246,239,227,0.35);
  color: var(--c-cream);
  font-size: 12.5px; font-weight: 300;
  padding: 11px 14px;
}
.footer__newsletter-form button {
  background: var(--c-cream); color: var(--c-ink); border: 0;
  font-size: 10.5px; letter-spacing: 0.08em; padding: 11px 18px;
}
.footer__newsletter-form button:hover { background: var(--c-white); }
.footer__newsletter-consent { font-size: 10.5px; font-weight: 300; line-height: 1.7; color: #9DB37E; margin-top: 10px; }

.footer__payment li {
  display: flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.82rem;
  font-weight: 300;
  color: #CBD6BC;
  padding-block: 0.4em;
}
.footer__payment svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--c-cream); }

.footer__bottom {
  border-top: 1px solid rgba(246,239,227,0.16);
  padding-block: 1.4rem;
  font-size: 11px;
  font-weight: 300;
  color: #AEBE97;
  text-align: center;
  line-height: 1.7;
}

@media (max-width: 1024px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================================
   GALLERY PAGE (gallery.html)
   ============================================================ */
.gallery-hero { background: var(--c-cream); padding-top: clamp(2.5rem, 6vw, 4rem); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-auto-rows: 300px;
  gap: 16px;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.gallery-grid + .gallery-grid { margin-top: 16px; }
.gallery-cell__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  cursor: zoom-in;
  transition: transform 0.5s var(--ease-lux);
}
.gallery-cell__img:hover { transform: scale(1.03); }

.gallery-cta { background: var(--c-white); text-align: center; }

@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 260px; }
  .gallery-grid > div[style*="span 2"] { grid-column: span 2 !important; }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; }
  .gallery-grid > div { grid-column: span 1 !important; }
}

/* ============================================================
   ROOM PHOTO LIGHTBOX
   ============================================================ */
.room-card__main,
.room-card__thumb { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s var(--ease-soft), visibility 0.3s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20,26,15,0.92);
}
.lightbox__stage {
  position: relative;
  z-index: 2;
  width: min(1100px, 88vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.lightbox__caption {
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--c-cream);
  text-align: center;
}
.lightbox__close {
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(246,239,227,0.12);
  color: var(--c-cream);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.lightbox__close:hover { background: rgba(246,239,227,0.22); }
.lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(246,239,227,0.12);
  color: var(--c-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.lightbox__arrow:hover { background: rgba(246,239,227,0.22); }
.lightbox__arrow::before {
  content: '';
  width: 11px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}
.lightbox__arrow--prev { left: 22px; }
.lightbox__arrow--prev::before { transform: rotate(135deg) translate(-2px, -2px); }
.lightbox__arrow--next { right: 22px; }
.lightbox__arrow--next::before { transform: rotate(-45deg) translate(-2px, -2px); }

@media (max-width: 640px) {
  .lightbox__close { top: 14px; right: 14px; width: 40px; height: 40px; }
  .lightbox__arrow { width: 42px; height: 42px; }
  .lightbox__arrow--prev { left: 10px; }
  .lightbox__arrow--next { right: 10px; }
}

/* ============================================================
   BOOKING MODAL
   ============================================================ */
.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s var(--ease-soft), visibility 0.35s;
}
.booking-modal.open { opacity: 1; visibility: visible; }
.booking-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(29,51,39,0.7);
  backdrop-filter: blur(6px);
}
.booking-modal__box {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 540px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--c-cream);
  border: 1px solid rgba(62,82,35,0.1);
  border-radius: var(--radius);
  padding: 2.5rem;
  transform: translateY(20px);
  transition: transform 0.4s var(--ease-lux);
}
.booking-modal.open .booking-modal__box { transform: translateY(0); }
.booking-modal__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(62,82,35,0.08);
  color: var(--c-ink);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.booking-modal__close:hover { background: rgba(62,82,35,0.15); }
.booking-modal .h3 { margin-bottom: 0.5rem; color: var(--c-ink); }
.booking-modal__room-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(62,82,35,0.05);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.booking-modal__room-info img {
  width: 72px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.booking-modal__room-name { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; }
.booking-modal__room-price { font-size: var(--fs-small); color: var(--c-muted); }

.booking-form, .avail-form { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-field span {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.form-field input,
.form-field select,
.form-field textarea {
  background: rgba(62,82,35,0.06);
  border: 1px solid rgba(62,82,35,0.14);
  border-radius: 4px;
  padding: 0.75em 1em;
  min-height: 44px;
  font-size: var(--fs-small);
  color: var(--c-ink);
  transition: border-color 0.2s;
  -webkit-appearance: none;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--c-sage); }
.form-field textarea { resize: vertical; min-height: 80px; }

.form-hint {
  font-size: 0.76rem;
  color: var(--c-muted-2);
  margin-top: -0.5rem;
}

.modal-deposit-note {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--c-muted);
}

.booking-estimate, .avail-nights {
  background: rgba(201,139,75,0.12);
  border: 1px solid rgba(201,139,75,0.3);
  border-radius: 4px;
  padding: 1rem 1.25rem;
  font-size: var(--fs-small);
  color: var(--c-ink);
  font-weight: 500;
  min-height: 48px;
  display: flex;
  align-items: center;
}
.avail-nights:empty { display: none; }

/* ============================================================
   AVAILABILITY / BOOKING FLOW (3 steps)
   ============================================================ */
.avail-unit-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  margin-bottom: 1rem;
}

.avail-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: var(--c-muted);
  transition: color 0.2s;
}
.avail-back:hover { color: var(--c-ink); }

.avail-results {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.avail-result {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(62,82,35,0.04);
  border: 1px solid rgba(62,82,35,0.08);
  border-radius: 12px;
}
.avail-result img {
  width: 72px;
  height: 90px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.avail-result__body { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 0; }
.avail-result__body h3 { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500; color: var(--c-ink); }
.avail-result__body p { font-size: 0.8rem; color: var(--c-muted); }
.avail-result__beds { color: var(--c-muted-2); }
.avail-result__total {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.2rem;
}
.avail-result__estimate-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.avail-result__total strong { font-family: var(--font-serif); font-size: 1.05rem; color: var(--c-ink); }
.avail-result .btn {
  align-self: flex-start;
  margin-top: 0.4rem;
  min-height: 44px;
  font-size: 0.74rem;
}

.avail-result--unavailable {
  background: rgba(62,82,35,0.02);
  filter: grayscale(0.6);
  opacity: 0.6;
}
.avail-result__unavailable-text {
  font-style: italic;
  color: var(--c-muted-2);
}

.avail-empty {
  text-align: center;
  padding-block: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.avail-empty p { font-size: var(--fs-small); color: var(--c-muted); }

.booking-summary {
  display: flex;
  gap: 1rem;
  background: rgba(201,139,75,0.1);
  border: 1px solid rgba(201,139,75,0.25);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.booking-summary img {
  width: 72px;
  height: 90px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.booking-summary__name { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; color: var(--c-ink); }
.booking-summary p { font-size: 0.8rem; color: var(--c-muted); margin-top: 0.15rem; }
.booking-summary__total {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.booking-summary__total span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted-2);
}
.booking-summary__total strong { font-family: var(--font-serif); font-size: 1.1rem; color: var(--c-ink); }

.confirm-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.75em;
  min-height: 44px;
  padding-block: 0.5rem;
  cursor: pointer;
}
.confirm-notice input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  accent-color: var(--c-sage);
}
.confirm-notice span {
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--c-muted);
}

.confirm-notice-static {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--c-ink);
  background: rgba(201,139,75,0.1);
  border: 1px solid rgba(201,139,75,0.25);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 1.25rem;
}
.booking-success__ref {
  font-size: 0.85rem;
  color: var(--c-muted);
  margin-bottom: 1rem;
}
.booking-success__ref strong { color: var(--c-ink); font-family: var(--font-mono, monospace); }
.booking-success__deposit { font-weight: 500; color: var(--c-ink); margin-top: 0.75rem; }

/* ============================================================
   SCROLL REVEAL (data-reveal) — fade + 20px rise, fires once via
   IntersectionObserver (see main.js initRevealObserver).
   ============================================================ */
[data-reveal] { opacity: 1; }
[data-reveal] h2, [data-reveal] .h2, [data-reveal] .kicker, [data-reveal] .body-text,
[data-reveal] .section-sub, [data-reveal] .about__actions {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-lux), transform 0.8s var(--ease-lux);
}
[data-reveal].is-visible h2, [data-reveal].is-visible .h2, [data-reveal].is-visible .kicker,
[data-reveal].is-visible .body-text, [data-reveal].is-visible .section-sub,
[data-reveal].is-visible .about__actions {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .hero__bg { animation-duration: 18s; }
  .footer__inner { grid-template-columns: 1fr; gap: 2rem; padding-block: 3rem; }

  /* Activities: drop the fan entirely — plain scroll-snap list, dots instead */
  .fan-arrow { display: none; }
  .fan-carousel { max-width: none; margin-top: 2rem; }
  .fan-track {
    position: static;
    height: auto;
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-inline: 8vw;
    scroll-padding-inline: 8vw;
  }
  .fan-track::-webkit-scrollbar { display: none; }
  .fan-card {
    position: static;
    left: auto;
    margin-left: 0;
    width: 85vw;
    flex: 0 0 85vw;
    scroll-snap-align: center;
    transform: none !important;
    opacity: 1 !important;
    z-index: auto !important;
  }
  .fan-card--center:hover .fan-card__inner,
  .fan-card--center:hover .fan-card__media img { transform: none; }

  .fan-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1.25rem;
  }
  .fan-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(246,239,227,0.25);
    transition: background 0.3s, transform 0.3s;
  }
  .fan-dot.active {
    background: var(--c-copper);
    transform: scale(1.3);
  }

  .form-row { grid-template-columns: 1fr; }
  .booking-modal__box { padding: 2rem 1.5rem; }
}

@media (max-width: 480px) {
  .transfers-strip__list li { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
}

/* ============================================================
   PREFERS REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-reveal] h2, [data-reveal] .h2, [data-reveal] .kicker, [data-reveal] .body-text,
  [data-reveal] .section-sub, [data-reveal] .about__actions {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .room-card { opacity: 1 !important; transform: none !important; }
  .hero__bg { animation: none !important; }
  .fan-card, .fan-card__inner, .fan-card__media img, .fan-arrow {
    transition: none !important;
  }
}