:root {
  --wine: #4f1b0b;
  --wine-dark: #351208;
  --gold: #ffa600;
  --gold-light: #ffc906;
  --cream: #faf3e8;
  --cream-dark: #f1e5d0;
  --ink: #2a1a10;
  --max: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* ---------- Intro splash ---------- */
/* Hidden by default (fail-safe): JS must explicitly opt in with .intro-show,
   so if JS fails for any reason the overlay never blocks the page. */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--wine-dark);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.intro-overlay.intro-show { display: flex; opacity: 1; pointer-events: auto; }
.intro-overlay.intro-hide { opacity: 0; pointer-events: none; }
.intro-overlay.intro-done { display: none; }

.intro-logo-wrap {
  width: min(260px, 60vw);
  transform: scale(1);
  opacity: 1;
  transition: transform 0.8s cubic-bezier(0.34, 1.1, 0.4, 1), opacity 0.6s ease;
}
.intro-logo-wrap.intro-shrink { transform: scale(0.28); opacity: 0.9; }

body.intro-lock { overflow: hidden; }

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
}

h1, h2, h3, .brand-word {
  font-family: 'Fraunces', serif;
  letter-spacing: 0.02em;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.72rem;
  /* Wine, not gold: gold-on-cream measures ~1.8:1 contrast, well under
     the 4.5:1 WCAG AA minimum for text this small. Sections on dark
     backgrounds (hero, restaurant, map overlay) already override this
     to gold-light, which has strong contrast there. */
  color: var(--wine);
  margin-bottom: 10px;
}

section h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  color: var(--wine);
  margin-bottom: 14px;
}

/* A quiet nod to the castle-like stone build: a small wrought-iron
   flourish under each section heading — diamond, bar, finial — like the
   hardware on an old wooden gate. Decorative only, brand gold. */
section h2::after {
  content: '';
  display: block;
  width: 120px;
  height: 8px;
  margin-top: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M4 0 L8 4 L4 8 L0 4 Z' fill='%23ffa600'/%3E%3Crect x='12' y='3.4' width='96' height='1.2' rx='0.6' fill='%23ffa600' opacity='0.55'/%3E%3Ccircle cx='114' cy='4' r='1.6' fill='%23ffa600' opacity='0.8'/%3E%3C/svg%3E") no-repeat left center / contain;
}

@media (max-width: 640px) {
  section h2::after { width: 96px; margin-top: 10px; }
}

.section-intro {
  max-width: 640px;
  color: #5b4535;
  margin-bottom: 44px;
}

.center { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- Progress bar & back-to-top ---------- */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index: 300;
  transition: width 0.1s linear;
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--wine);
  color: var(--gold-light);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(79,27,11,0.35);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  z-index: 200;
}
.back-to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--gold); color: var(--wine-dark); }

.whatsapp-float {
  position: fixed;
  left: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(37,211,102,0.4);
  z-index: 200;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 30px rgba(37,211,102,0.5); }

.btn-whatsapp {
  background: #25D366;
  color: #fff;
}
.btn-whatsapp:hover { background: #1ebe57; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(37,211,102,0.35); }

.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 400;
  background: var(--wine-dark);
  color: #e9dcc9;
  padding: 18px 24px;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.25);
}
.cookie-banner.show { display: flex; }
.cookie-banner p { font-size: 0.85rem; max-width: 640px; margin: 0; }
.cookie-banner-actions { display: flex; gap: 14px; align-items: center; flex-shrink: 0; }
.cookie-banner-actions a { font-size: 0.82rem; color: var(--gold-light); border-bottom: 1px solid transparent; }
.cookie-banner-actions a:hover { border-color: var(--gold-light); }
.cookie-banner-actions button {
  background: var(--gold-light);
  color: var(--wine-dark);
  border: none;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 9px 18px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cookie-banner-actions button:hover { background: var(--gold); }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in-view { opacity: 1; transform: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
  padding: 18px 0;
}

.site-header.scrolled {
  background: rgba(53, 18, 8, 0.94);
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  padding: 10px 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
}

.brand-logo-full { display: inline-block; height: 64px; width: auto; transition: height 0.3s ease; }
.brand-logo-full .lahuta-logo-svg { height: 100%; width: auto; display: block; }
.site-header.scrolled .brand-logo-full { height: 50px; }

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

nav.main-nav a {
  color: #f2e6d4;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  position: relative;
  padding: 4px 0;
}

nav.main-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0%;
  height: 1.5px;
  background: var(--gold-light);
  transition: width 0.25s ease;
}

nav.main-nav a:hover::after,
nav.main-nav a.active::after { width: 100%; }

nav.main-nav a:hover { color: var(--gold-light); }
nav.main-nav a.active { color: var(--gold-light); }
nav.main-nav a.btn::after { display: none; }

.btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow .2s ease;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--wine-dark);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(255,166,0,0.35); }

.btn-outline {
  border-color: var(--gold);
  color: var(--gold-light);
}
.btn-outline:hover { background: var(--gold); color: var(--wine-dark); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 210;
}
.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--gold-light);
  display: block;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.2s ease, width 0.3s ease;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23FFC906' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center;
  background-size: 9px 6px;
  border: 1px solid rgba(255, 201, 6, 0.45);
  color: var(--gold-light);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  border-radius: 2px;
  padding: 7px 26px 7px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.lang-select:hover { border-color: var(--gold-light); }
.lang-select option { color: var(--wine-dark); background: #fff; }

html[lang="sq"] .en-gloss { display: none !important; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 66vh;
  padding: 130px 0 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; }

.hero-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 60%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s ease, transform 8s ease-out;
}
.hero-bg-layer.active { opacity: 1; transform: scale(1); }

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(40,15,6,0.5) 0%, rgba(40,15,6,0.4) 55%, rgba(40,15,6,0.62) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  padding: 0 24px;
}

.hero-content .eyebrow { color: var(--gold-light); text-align: center; }

.hero-content h1.hero-tagline {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
  max-width: 620px;
  margin: 14px auto 14px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.hero-word {
  display: inline-block;
  position: relative;
  min-height: 1.3em;
  overflow: hidden;
  color: var(--gold-light);
}

.hero-word-inner {
  display: inline-block;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hero-word-inner.swap-out { opacity: 0; transform: translateY(14px); }
.hero-word-inner.swap-in-start { opacity: 0; transform: translateY(-14px); }

.hero-sub {
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  color: #e9dcc9;
  max-width: 440px;
  margin: 0 auto 30px;
}

.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.btn-arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 0.25s ease;
}
.btn:hover .btn-arrow { transform: translateX(4px); }

.hero-dots {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 9px;
}

/* On narrow screens the dots sit up out of the counting-sheep lane,
   so they never collide with the fence or the parade. */
@media (max-width: 640px) {
  .hero-dots { bottom: 54px; }
}
.hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-dot.active { background: var(--gold-light); border-color: var(--gold-light); transform: scale(1.2); }
.hero-dot:hover { border-color: var(--gold-light); }

/* Counting sheep: one small standalone fence — two rails, three posts,
   leaning a touch — near the bottom-right of the hero. Not a full-width
   fence line; just the little obstacle the parade hops over. */
.hero-fence {
  position: absolute;
  left: 63%;
  bottom: 6px;
  width: 88px;
  height: 30px;
  z-index: 1;
  pointer-events: none;
  transform: translateX(-50%) rotate(-2deg);
  transform-origin: center bottom;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 38'%3E%3Crect x='6' y='4' width='9' height='32' rx='2' fill='%23ffc906'/%3E%3Crect x='51' y='4' width='9' height='32' rx='2' fill='%23ffc906'/%3E%3Crect x='97' y='4' width='9' height='32' rx='2' fill='%23ffc906'/%3E%3Crect x='0' y='9' width='112' height='5.5' rx='2' fill='%23ffc906'/%3E%3Crect x='0' y='23' width='112' height='5.5' rx='2' fill='%23ffc906'/%3E%3C/svg%3E") no-repeat center bottom / contain;
}

@media (max-width: 640px) {
  .hero-fence { width: 44px; height: 15px; }
}

/* ---------- About ---------- */
.about {
  position: relative;
  overflow: hidden;
  padding: 110px 0 90px;
  background: var(--cream);
}

.playful-pair {
  position: absolute;
  bottom: 18px;
  right: 26px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  z-index: 1;
  pointer-events: none;
}
.playful-kid { font-size: 2.5rem; animation: playBounce 1.7s ease-in-out infinite; }
.playful-goat { font-size: 2.1rem; animation: playBounce 1.7s ease-in-out infinite 0.28s; }
@keyframes playBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-15px) rotate(-8deg); }
  50% { transform: translateY(0) rotate(0deg); }
  72% { transform: translateY(-6px) rotate(6deg); }
}

@media (max-width: 640px) {
  .playful-pair { right: 12px; bottom: 12px; transform: scale(0.8); transform-origin: bottom right; }
}

.story-mark { width: 84px; margin-bottom: 18px; }
.lahuta-logo-svg { width: 100%; height: auto; overflow: visible; }
/* Only the bow slides — the string stays completely fixed in place,
   everywhere the logo appears, like a bow being drawn across a string. */
.lahuta-logo-svg .lahuta-instrument { transform-origin: center top; }
.lahuta-logo-svg .lahuta-string { animation: none; }
.lahuta-logo-svg .lahuta-bow {
  transform-box: fill-box;
  transform-origin: center;
  animation: lahutaPluck 5s ease-in-out infinite;
}

.intro-logo-wrap .lahuta-bow {
  animation: lahutaPluckIntro 1.1s ease-in-out 0.35s 1 both;
}

/* The whole instrument tilts naturally into playing position — pivoting
   from the top (pegbox) — while the bow slides across the fixed string,
   then settles back to upright as it finishes. Intro only. */
.intro-logo-wrap .lahuta-instrument {
  transform-box: fill-box;
  animation: lahutaTiltIntro 1.4s cubic-bezier(0.45, 0, 0.2, 1) 0.15s 1 both;
}

@keyframes lahutaTiltIntro {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(30deg); }
  75% { transform: rotate(30deg); }
  100% { transform: rotate(0deg); }
}

/* Clean, clearly visible swing to both sides — roughly 5mm either way. */
@keyframes lahutaPluckIntro {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-30px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(30px); }
  90% { transform: translateX(0); }
}

@keyframes lahutaPluck {
  0%, 70%, 100% { transform: translateX(0); }
  78% { transform: translateX(-30px); }
  86% { transform: translateX(0); }
  94% { transform: translateX(30px); }
  100% { transform: translateX(0); }
}

.about .grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}

.about-photo {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(79,27,11,0.25);
}
.about-photo img { border-radius: 4px; }

.about-badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  background: rgba(53,18,8,0.85);
  color: var(--gold-light);
  padding: 10px 16px;
  font-family: 'Fraunces', serif;
  font-size: 0.85rem;
  border-radius: 2px;
  /* thin double frame, like an engraved plaque set into stone */
  box-shadow: inset 0 0 0 1px rgba(255, 201, 6, 0.4), inset 0 0 0 3px rgba(53, 18, 8, 0.85), inset 0 0 0 4px rgba(255, 201, 6, 0.18);
}

.about p { color: #4a382a; margin-bottom: 16px; }

.about-stats {
  display: flex;
  gap: 34px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.about-stats div { text-align: left; }
.about-stats strong {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  color: var(--wine);
}
.about-stats span { font-size: 0.78rem; color: #7a6551; text-transform: uppercase; letter-spacing: 0.08em; }

/* ---------- Mini review card ---------- */
.mini-review {
  position: relative;
  max-width: 620px;
  margin: 0 auto 46px;
  background: #fff;
  border-radius: 10px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  box-shadow: 0 16px 36px rgba(79,27,11,0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mini-review:hover { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(79,27,11,0.24); }

/* Floating platform badge (Google / Booking / Tripadvisor) on the
   top-left corner of each rating card. */
.mini-review-logo {
  position: absolute;
  top: -17px;
  left: 20px;
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(79, 27, 11, 0.18);
  pointer-events: none;
}
.mini-review-logo svg { width: 21px; height: 21px; display: block; }

/* The Google card sits at the end of Our Story, rating the whole place */
.about .mini-review { margin: 54px auto 0; }

.mini-review-score { display: flex; align-items: baseline; gap: 2px; flex-shrink: 0; }
.mini-review-number { font-family: 'Fraunces', serif; font-weight: 700; font-size: 2.5rem; color: var(--wine); line-height: 1; }
.mini-review-outof { font-family: 'Fraunces', serif; font-size: 1rem; color: #9a8a78; }

.mini-review-meta { text-align: left; flex: 1; min-width: 190px; }
.mini-review-meta strong { display: block; font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--wine); }
.mini-review-meta span { font-size: 0.82rem; color: #7a6551; }

.mini-review-link {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--wine);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.mini-review-link:hover { color: var(--gold); border-color: var(--gold); }

@media (max-width: 560px) {
  .mini-review { flex-direction: column; text-align: center; padding: 32px 24px 26px; }
  .mini-review-meta { text-align: center; }
}

/* ---------- Meet Your Host ---------- */
/* Bottom padding trimmed: this section and Rooms share the same
   --cream-dark background, so full padding on both sides left an
   uninterrupted, oddly empty gap between the quote and "Stay With Us". */
.host-section { position: relative; overflow: hidden; padding: 100px 0 50px; background: var(--cream-dark); }

.host-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 60px;
  align-items: center;
}

.host-photo-col { display: flex; flex-direction: column; align-items: center; text-align: center; }

.host-photo-circle {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 20px 44px rgba(79,27,11,0.22), 0 0 0 6px #fff, 0 0 0 8px var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.host-photo-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
.host-photo-placeholder { width: 62%; height: 62%; fill: var(--gold-light); }

.host-superhost-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px 8px 8px;
  box-shadow: 0 8px 20px rgba(79,27,11,0.14);
  font-family: 'Fraunces', serif;
  font-size: 0.85rem;
  color: var(--wine);
}
.host-badge-icon { width: 22px; height: 22px; flex-shrink: 0; }
.host-badge-icon svg { width: 100%; height: 100%; display: block; }

.host-info { text-align: left; }
.host-info h2 { color: var(--wine); margin-bottom: 10px; }

.host-rating {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Fraunces', serif;
  color: var(--wine);
  margin-bottom: 18px;
  font-size: 1.05rem;
}
.host-rating-star { color: var(--gold-light); font-size: 1.1rem; }
.host-rating .mini-review-number { font-weight: 700; font-size: 1.2rem; }

.host-bio { color: #4a382a; line-height: 1.75; margin-bottom: 26px; max-width: 520px; }

.host-quote {
  border-left: 3px solid var(--gold-light);
  padding-left: 20px;
  max-width: 480px;
}
.host-quote p { font-family: 'Fraunces', serif; font-style: italic; color: var(--wine); font-size: 1.02rem; line-height: 1.6; margin-bottom: 8px; }
.host-quote cite { font-style: normal; font-size: 0.8rem; color: #9a8a78; }

@media (max-width: 900px) {
  .host-grid { grid-template-columns: 1fr; text-align: center; }
  .host-info { text-align: center; }
  .host-rating { justify-content: center; }
  .host-bio, .host-quote { margin-left: auto; margin-right: auto; }
  .host-quote { border-left: none; border-top: 3px solid var(--gold-light); padding-left: 0; padding-top: 16px; }
}

/* ---------- Rooms ---------- */
.rooms { position: relative; overflow: hidden; padding: 50px 0 90px; background: var(--cream-dark); }

.hopping-goat {
  position: absolute;
  bottom: 20px;
  left: 5%;
  font-size: 2.6rem;
  z-index: 1;
  pointer-events: none;
  animation: goatHop 2.6s ease-in-out infinite;
}
@keyframes goatHop {
  0%, 100% { transform: translate(0, 0) scaleX(1); }
  15% { transform: translate(8px, -24px) scaleX(1); }
  30% { transform: translate(18px, 0) scaleX(1); }
  45% { transform: translate(18px, 0) scaleX(-1); }
  60% { transform: translate(8px, -24px) scaleX(-1); }
  75% { transform: translate(0, 0) scaleX(-1); }
}

@media (max-width: 640px) {
  .hopping-goat { left: 4%; font-size: 2.1rem; }
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.room-card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(79,27,11,0.10);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.room-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(79,27,11,0.18); }

.room-card .room-img { height: 210px; overflow: hidden; }
.room-card .room-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.room-card:hover .room-img img { transform: scale(1.06); }

.room-body { padding: 22px 22px 26px; }
.room-body h3 { font-family: 'Fraunces', serif; color: var(--wine); font-size: 1.15rem; margin-bottom: 6px; }
.room-price { color: var(--gold); font-weight: 700; font-size: 0.95rem; margin-bottom: 10px; }
.room-price span { color: #9a8a78; font-weight: 500; font-size: 0.78rem; }

.room-price-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--gold);
  font-weight: 700;
  font-size: 0.95rem;
  font-family: 'Montserrat', sans-serif;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.room-price-link:hover { color: var(--wine); border-color: var(--wine); }
.room-body p { color: #6b5847; font-size: 0.9rem; }

.room-note {
  margin-top: 30px;
  font-size: 0.85rem;
  color: #7a6551;
  text-align: center;
}

/* ---------- Experiences ---------- */
.experiences { position: relative; padding: 90px 0; background: var(--cream); overflow: hidden; }

.goat-path {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  height: 30px;
  pointer-events: none;
  z-index: 1;
}
.wandering-goat {
  position: absolute;
  left: -40px;
  font-size: 2.4rem;
  display: inline-block;
  animation: goatWalk 38s linear infinite, goatBob 0.8s ease-in-out infinite;
}
@keyframes goatWalk {
  0% { left: -40px; transform: scaleX(1); }
  48% { transform: scaleX(1); }
  50% { left: calc(100% + 40px); transform: scaleX(1); }
  50.01% { transform: scaleX(-1); }
  98% { transform: scaleX(-1); }
  100% { left: -40px; transform: scaleX(-1); }
}
@keyframes goatBob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -4px; }
}

@media (max-width: 640px) {
  .wandering-goat { font-size: 1.9rem; }
  .pecking-chicken { font-size: 1.8rem; }
}

.exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 220px) 200px;
  gap: 18px;
}
.exp-tile {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
}
.exp-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.exp-tile:hover img { transform: scale(1.08); }
.exp-tile.big { grid-column: span 2; grid-row: span 2; }
.exp-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px;
  background: linear-gradient(0deg, rgba(53,18,8,0.85), transparent);
  color: #f6ead6;
}
.exp-caption h3 { font-family: 'Fraunces', serif; font-size: 1.05rem; color: var(--gold-light); margin-bottom: 4px; }
.exp-caption p { font-size: 0.8rem; color: #eaddc9; }

/* ---------- Restaurant ---------- */
.restaurant {
  position: relative;
  overflow: hidden;
  padding: 90px 0;
  background: var(--wine);
  color: #f3e6d4;
}
.restaurant .eyebrow { color: var(--gold-light); }
.restaurant h2 { color: #fff; }
.restaurant .section-intro { color: #d9c4ac; }

.menu-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

.menu-tab {
  font-family: 'Fraunces', serif;
  background: transparent;
  border: 1px solid rgba(255, 201, 6, 0.35);
  color: #d9c4ac;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.menu-tab:hover { border-color: var(--gold-light); color: #fff; transform: translateY(-1px); }
.menu-tab.active {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--wine-dark);
  border-color: transparent;
}

.menu-columns { max-width: 640px; margin: 0 auto 50px; }

.menu-col { display: none; }
.menu-col.active { display: block; animation: menuFadeIn 0.35s ease; }

@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.menu-subhead {
  font-family: 'Fraunces', serif;
  color: var(--gold-light);
  font-size: 1rem;
  letter-spacing: 0.05em;
  margin: 30px 0 6px;
}
.menu-subhead:first-child { margin-top: 0; }
.menu-subhead .en-gloss { color: #b89f85; font-size: 0.8rem; }

.menu-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.12);
  font-size: 0.95rem;
}
.menu-item .name { color: #f3e6d4; }
.menu-item .name small { display: block; color: #b89f85; font-size: 0.72rem; margin-top: 2px; }
.menu-item .price { color: var(--gold-light); font-weight: 600; white-space: nowrap; }

.menu-footer-note {
  text-align: center;
  color: #c9b299;
  font-size: 0.85rem;
}


/* ---------- Gallery ---------- */
.gallery { position: relative; overflow: hidden; padding: 90px 0; background: var(--cream-dark); }

.peeking-goat {
  position: absolute;
  /* Sits in the gap between the section intro text and the filter tabs
     (measured ~224-268px here) so it never overlaps the "GALLERY"
     eyebrow label the way it did at top:90px. */
  top: 232px;
  left: -30px;
  font-size: 1.8rem;
  z-index: 1;
  pointer-events: none;
  animation: goatPeek 8s ease-in-out infinite;
}
@keyframes goatPeek {
  0%, 75%, 100% { left: -30px; transform: rotate(0deg); }
  85% { left: 6px; transform: rotate(-6deg); }
  92% { left: 6px; transform: rotate(4deg); }
}

@media (max-width: 640px) {
  .peeking-goat { top: 258px; font-size: 1.6rem; }
}

/* ---------- More farm animals: chickens, and a second goat ---------- */
.pecking-chicken {
  position: absolute;
  bottom: 16px;
  right: 8%;
  font-size: 2.2rem;
  z-index: 1;
  pointer-events: none;
  animation: chickenPeck 2.6s ease-in-out infinite;
}
@keyframes chickenPeck {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  8% { transform: translateY(5px) rotate(-18deg); }
  16% { transform: translateY(0) rotate(0deg); }
  24% { transform: translateY(5px) rotate(-18deg); }
  32% { transform: translateY(0) rotate(0deg); }
}

.running-chicken {
  position: absolute;
  bottom: 22px;
  font-size: 2.0rem;
  z-index: 1;
  pointer-events: none;
  animation: chickenRun 24s linear infinite, chickenBob 0.45s ease-in-out infinite;
}
@keyframes chickenRun {
  0% { left: -40px; transform: scaleX(1); }
  46% { transform: scaleX(1); }
  50% { left: calc(100% + 40px); transform: scaleX(1); }
  50.01% { transform: scaleX(-1); }
  96% { transform: scaleX(-1); }
  100% { left: -40px; transform: scaleX(-1); }
}
@keyframes chickenBob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -3px; }
}

.peeking-goat-2 {
  position: absolute;
  bottom: 40px;
  right: -44px;
  font-size: 2.7rem;
  z-index: 1;
  pointer-events: none;
  animation: goatPeek2 9s ease-in-out infinite;
}
@keyframes goatPeek2 {
  0%, 78%, 100% { right: -44px; transform: rotate(0deg) scaleX(-1); }
  88% { right: 10px; transform: rotate(6deg) scaleX(-1); }
  95% { right: 10px; transform: rotate(-4deg) scaleX(-1); }
}

@media (max-width: 640px) {
  .running-chicken { font-size: 1.7rem; }
  .peeking-goat-2 { font-size: 2.2rem; bottom: 20px; right: -34px; }
}

.gallery-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
}
.gallery-tab {
  font-family: 'Montserrat', sans-serif;
  background: transparent;
  border: 1px solid rgba(79, 27, 11, 0.25);
  color: var(--wine);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.gallery-tab:hover { border-color: var(--gold); transform: translateY(-1px); }
.gallery-tab.active {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--wine-dark);
  border-color: transparent;
}

/* Natural masonry: images keep their own aspect ratio and flow into columns. */
.gallery-grid {
  columns: 4 240px;
  column-gap: 14px;
}
.gallery-grid img {
  width: 100%;
  display: block;
  margin-bottom: 14px;
  border-radius: 4px;
  cursor: pointer;
  break-inside: avoid;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.35s ease;
}
.gallery-grid img:hover { transform: scale(1.025); box-shadow: 0 14px 30px rgba(79,27,11,0.25); }
.gallery-grid img.gallery-hidden {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20,8,4,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40px;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 84vw;
  max-height: 85vh;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transition: opacity 0.2s ease;
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 34px;
  color: #f3e6d4;
  font-size: 2rem;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}
.lightbox-nav {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255, 201, 6, 0.3);
  color: #f3e6d4;
  font-size: 2rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0 18px;
  line-height: 1;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lightbox-nav:hover { background: rgba(255, 201, 6, 0.15); border-color: var(--gold-light); }

@media (max-width: 640px) {
  .gallery-grid { columns: 2 160px; }
  .lightbox-nav { width: 42px; height: 42px; font-size: 1.5rem; margin: 0 8px; }
}

/* ---------- Booking modal ---------- */
.room-book-cta { text-align: center; margin-top: 36px; }
.room-book-cta .room-note { margin-top: 14px; }

.booking-modal-frame {
  width: min(480px, 92vw);
  height: min(720px, 88vh);
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  border: 3px solid var(--gold);
}
.booking-modal-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Contact ---------- */
.contact { position: relative; overflow: hidden; padding: 90px 0 100px; background: var(--cream); }
.contact .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: stretch;
}
.contact-info {
  background: #fff;
  border-radius: 6px;
  padding: 40px;
  box-shadow: 0 12px 30px rgba(79,27,11,0.10);
}
.contact-info h3 { font-family: 'Fraunces', serif; color: var(--wine); margin-bottom: 20px; font-size: 1.3rem; }
.contact-row { display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start; }
.contact-row .icon {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cream-dark); color: var(--wine);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 1rem;
}
.contact-row div a, .contact-row div p { font-size: 0.94rem; color: #4a382a; }
.contact-row div strong { display: block; color: var(--wine); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }

.contact-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

.map-wrap {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(79,27,11,0.10);
  min-height: 340px;
}
.map-wrap img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.map-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(53,18,8,0.15), rgba(53,18,8,0.88) 78%);
}
.map-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px;
  color: #f3e6d4;
  text-align: center;
}
.map-overlay .eyebrow { color: var(--gold-light); }
.map-overlay p { font-size: 1rem; margin-bottom: 18px; }

/* ---------- Footer ---------- */
footer {
  background: var(--wine-dark);
  color: #cbb79d;
  padding: 46px 0 26px;
  text-align: center;
}

/* The same ironwork motif, mirrored and centered, to close the page. */
footer .container::before {
  content: '';
  display: block;
  width: 160px;
  height: 8px;
  margin: 0 auto 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 8'%3E%3Cpath d='M80 0 L84 4 L80 8 L76 4 Z' fill='%23ffc906'/%3E%3Crect x='14' y='3.4' width='54' height='1.2' rx='0.6' fill='%23ffc906' opacity='0.5'/%3E%3Crect x='92' y='3.4' width='54' height='1.2' rx='0.6' fill='%23ffc906' opacity='0.5'/%3E%3Ccircle cx='8' cy='4' r='1.6' fill='%23ffc906' opacity='0.8'/%3E%3Ccircle cx='152' cy='4' r='1.6' fill='%23ffc906' opacity='0.8'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.85;
}
footer p a { border-bottom: 1px solid transparent; }
footer p a:hover { color: var(--gold-light); border-color: var(--gold-light); }
footer .brand { justify-content: center; margin-bottom: 10px; }
footer .footer-logo-full { height: 84px; }
footer .footer-location {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #d8c7b3;
  margin-bottom: 14px;
}
footer p { font-size: 0.82rem; }
footer .footer-links { display: flex; gap: 22px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
footer .footer-links a { font-size: 0.82rem; color: #e3cdae; }
footer .footer-links a:hover { color: var(--gold-light); }

footer .footer-social { display: flex; gap: 16px; justify-content: center; margin-bottom: 18px; }
footer .footer-social a {
  color: #e3cdae;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 201, 6, 0.3);
  border-radius: 50%;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
footer .footer-social a:hover { color: var(--gold-light); border-color: var(--gold-light); transform: translateY(-2px); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  nav.main-nav {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--wine-dark);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    gap: 26px;
  }
  nav.main-nav.open { transform: translateX(0); }
  .nav-toggle { display: flex; }
  .about .grid, .contact .grid { grid-template-columns: 1fr; }
  .exp-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 240px) repeat(2, 160px); }
  .exp-tile.big { grid-column: span 2; grid-row: span 1; }

  /* Bigger tap area (44px+, per WCAG 2.5.5) for the stacked mobile menu —
     the horizontal desktop nav is untouched. */
  nav.main-nav a { padding: 13px 0; }

  /* On tablet/phone the content column runs edge-to-edge, so a
     corner-docked button at bottom:24px sits directly over body text
     (found overlapping a menu price, a story paragraph, and a photo
     caption). Floating both buttons higher moves them into the
     whitespace between sections instead. */
  .back-to-top, .whatsapp-float { bottom: 84px; }
}

/* ---------- Critter swarm: many lightweight farm-animal decorations ----------
   Generated by script.js. All animation is transform/opacity only (no `left`
   or `margin` tweening) so the browser compositor handles it on its own layer,
   which keeps dozens of instances cheap even on low-end phones. */
.critter {
  position: absolute;
  bottom: var(--b, 10px);
  left: var(--side, 50%);
  font-size: var(--size, 2rem);
  line-height: 1;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  color: var(--critter-color, var(--wine));
}

/* All farm-animal icons are single-color SVGs so they render in exact
   brand hex, not whatever colors an emoji font happens to ship with. */
/* height:1em + width:auto keeps each icon's intrinsic aspect ratio, so
   the drawing fills its box exactly — a square box would letterbox the
   wide animal shapes and float their feet ~25% above the box bottom. */
.playful-goat svg, .hopping-goat svg, .wandering-goat svg,
.pecking-chicken svg, .running-chicken svg,
.peeking-goat svg, .peeking-goat-2 svg,
.critter svg {
  width: auto;
  height: 1em;
  display: block;
}

.playful-goat { color: var(--gold); }
.hopping-goat { color: var(--wine); }
.wandering-goat { color: var(--gold); }
.pecking-chicken { color: var(--wine); }
.running-chicken { color: var(--gold-light); }
.peeking-goat { color: var(--wine); }
.peeking-goat-2 { color: var(--gold); }

.critter-walk {
  left: 0;
  animation: critterWalk var(--dur, 20s) linear infinite,
             critterBob var(--bdur, 0.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s), 0s;
}
@keyframes critterWalk {
  0%              { transform: translateX(-6vw) scaleX(1); }
  48%             { transform: translateX(106vw) scaleX(1); }
  50%             { transform: translateX(106vw) scaleX(-1); }
  98%             { transform: translateX(-6vw) scaleX(-1); }
  100%            { transform: translateX(-6vw) scaleX(-1); }
}
@keyframes critterBob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

/* A gentle head-down-to-graze nod — small and grounded, not a full-body
   tip, so it still reads as an animal standing in place eating. */
.critter-graze {
  transform-origin: bottom center;
  animation: critterGraze var(--dur, 3.2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes critterGraze {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  35%      { transform: translateY(1px) rotate(-3deg); }
  65%      { transform: translateY(0) rotate(0deg); }
}

.critter-peck {
  transform-origin: bottom center;
  animation: critterPeck var(--dur, 2.6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Peacock in full display: tail fanned, swaying slowly side to side. */
.critter-display {
  transform-origin: bottom center;
  animation: critterDisplay var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes critterDisplay {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate(2.5deg); }
}
@keyframes critterPeck {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  8%       { transform: translateY(3px) rotate(-12deg); }
  16%      { transform: translateY(0) rotate(0deg); }
  24%      { transform: translateY(3px) rotate(-12deg); }
  32%      { transform: translateY(0) rotate(0deg); }
}

/* Counting sheep over the hero fence. The run (heroRun) is one steady
   left-to-right line, and the leap (heroLeap) is keyframed so its arc
   lands exactly on the fence: the fence sits at 63% of the hero's width,
   and 63vw is the 60% point of the -14vw → 114vw path the animals travel.
   The negative margin-left centers each animal on that path so the math
   holds at any screen size. Leap uses the separate `translate`/`rotate`
   properties so it composes with heroRun's transform instead of fighting it. */
.hero-jumper {
  position: absolute;
  left: 0;
  bottom: 8px;
  /* the goat/sheep icons are 1.5x wider than tall, so half-width = 0.75em */
  margin-left: calc(var(--size, 3rem) * -0.75);
  font-size: var(--size, 3rem);
  line-height: 1;
  color: var(--critter-color, var(--cream));
  z-index: 1;
  pointer-events: none;
  will-change: transform, translate;
  transform-origin: bottom center;
  animation: heroRun var(--dur, 16s) linear infinite,
             heroLeap var(--dur, 16s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.hero-jumper svg {
  width: auto;
  height: 1em;
  display: block;
  animation: jumperTrot 0.65s ease-in-out infinite;
  animation-delay: var(--trot-delay, 0s);
}

/* The run rides on the `translate` property and the leap on `transform`.
   That split matters: individual transform properties apply BEFORE the
   `transform` list, so this order keeps the leap's rotate from tilting
   the run's huge translateX vector (which would fling the animal
   vertically by sin(angle) x hundreds of px). */
@keyframes heroRun {
  from { translate: -14vw 0; }
  to   { translate: 114vw 0; }
}
@keyframes heroLeap {
  0%, 51%, 69%, 100% { transform: none; }
  53.5% { transform: translateY(-20px) rotate(-6deg); }
  56.5% { transform: translateY(-34px) rotate(-2deg); }
  60%   { transform: translateY(-38px) rotate(1deg); }
  63.5% { transform: translateY(-34px) rotate(4deg); }
  66.5% { transform: translateY(-20px) rotate(6deg); }
}
@keyframes jumperTrot {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -3px; }
}

/* A thin strip of grass along the very bottom of the hero — same flat
   brand-gold silhouette style as the animals and the fence. */
.hero-meadow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  z-index: 1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 16'%3E%3Cpath d='M3 16 Q4 8 6 3 Q7 10 8 16 Z' fill='%23ffc906'/%3E%3Cpath d='M10 16 Q12 10 15 6 Q14 12 13 16 Z' fill='%23ffa600'/%3E%3Cpath d='M18 16 Q19 6 21 1 Q22 9 23 16 Z' fill='%23ffc906'/%3E%3Cpath d='M27 16 Q28 11 31 8 Q30 13 30 16 Z' fill='%23ffc906'/%3E%3Cpath d='M35 16 Q36 7 38 4 Q39 11 40 16 Z' fill='%23ffa600'/%3E%3Cpath d='M42 16 Q43 11 45 9 Q44 14 44 16 Z' fill='%23ffc906'/%3E%3C/svg%3E") repeat-x bottom left / 46px 16px;
}

@media (max-width: 640px) {
  .hero-meadow { height: 12px; background-size: 34px 12px; }
}

/* Taller grass tufts and little flowers scattered through the meadow,
   each swaying gently at its own pace, pivoting from the ground. */
.hero-flower,
.hero-grass {
  position: absolute;
  bottom: 2px;
  left: var(--side, 50%);
  font-size: var(--size, 1.4rem);
  line-height: 1;
  color: var(--critter-color, var(--gold-light));
  z-index: 1;
  pointer-events: none;
  transform-origin: bottom center;
  animation: meadowSway var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.hero-flower svg,
.hero-grass svg {
  height: 1em;
  width: auto;
  display: block;
}

@keyframes meadowSway {
  0%, 100% { transform: rotate(-3.5deg); }
  50%      { transform: rotate(3.5deg); }
}

/* The resident peacock: standing proudly in the hero meadow, tail fanned,
   swaying at its own unhurried pace while the parade passes by. */
.hero-peacock {
  position: absolute;
  left: 8%;
  bottom: 5px;
  font-size: 3.6rem;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
  transform-origin: bottom center;
  animation: meadowSway 8s ease-in-out infinite;
}
.hero-peacock svg { height: 1em; width: auto; display: block; }

@media (max-width: 640px) {
  .hero-peacock { font-size: 2.6rem; left: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  .critter, .hero-jumper, .hero-jumper svg, .hero-flower, .hero-grass, .hero-peacock,
  .playful-kid, .playful-goat, .hopping-goat, .wandering-goat,
  .pecking-chicken, .running-chicken, .peeking-goat, .peeking-goat-2,
  .lahuta-logo-svg .lahuta-bow, .lahuta-logo-svg .lahuta-instrument {
    animation: none !important;
  }
}