/* =========================================================
   SAKWO RESORT — STYLE SHEET
   Design tokens
   Color:  --forest #1F3A2E (deep forest green, primary)
           --forest-dark #142720 (footer / overlays)
           --cream #F7F1E6 (base background)
           --beige #EDE3D0 (tinted section background)
           --brown #6B4A32 (earthy accent text)
           --gold #B98B4E (accent / CTAs)
           --gold-light #D9B77C (hover accent)
           --white #FFFFFF
           --ink #22201B (body text)
   Type:   Playfair Display (display / headings)
           Manrope (body, UI, data)
   Signature: a single hand-drawn contour "ridge line" (an SVG silhouette of
   Sankhu's terraced hills) used as a recurring divider/watermark motif —
   ties every section back to the resort's valley setting.
   ========================================================= */

:root{
  --forest: #1F3A2E;
  --forest-dark: #10201A;
  --forest-soft: #2E4E3D;
  --cream: #F7F1E6;
  --beige: #ECE2CD;
  --brown: #6B4A32;
  --gold: #B98B4E;
  --gold-light: #D9B77C;
  --white: #FFFFFF;
  --ink: #23211C;
  --ink-soft: #565248;

  --font-display: 'Playfair Display', serif;
  --font-body: 'Manrope', sans-serif;

  --container-w: 1240px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 50px -25px rgba(16, 32, 26, 0.45);
  --shadow-card: 0 14px 34px -18px rgba(16, 32, 26, 0.35);
  --ease: cubic-bezier(.25,.8,.35,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: 90px; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; }

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

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

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior:auto !important; }
}

/* Subtle grain for a premium, non-flat surface */
.grain-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 9999;
  opacity: .035; mix-blend-mode: multiply;
  background-image: 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.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================== TYPOGRAPHY =========================== */
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--forest);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 600;
}
.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .74rem;
  color: var(--gold);
  margin: 0 0 12px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.eyebrow::before{
  content:"";
  width: 26px; height:1px;
  background: var(--gold);
  display:inline-block;
}
.section-title{
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
}
.section-subtitle{
  max-width: 620px;
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 0 0 44px;
}

/* =========================== BUTTONS =========================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor:pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn--gold{ background: var(--gold); color: var(--white); box-shadow: 0 14px 30px -14px rgba(185,139,78,.7); }
.btn--gold:hover{ background: var(--gold-light); }
.btn--forest{ background: var(--forest); color: var(--cream); }
.btn--forest:hover{ background: var(--forest-soft); }
.btn--ghost{ background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn--ghost:hover{ background: rgba(255,255,255,.12); border-color: #fff; }
.btn--ghost-dark{ background: transparent; color: var(--forest); border-color: var(--forest); }
.btn--ghost-dark:hover{ background: var(--forest); color: var(--cream); }
.btn--full{ width:100%; }
.btn--large{ padding: 18px 40px; font-size: .92rem; }

/* =========================== NAVBAR =========================== */
.navbar{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  padding: 20px 0;
  transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s;
}
.navbar.scrolled{
  padding: 12px 0;
  background: rgba(247,241,230,.88);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 30px -18px rgba(16,32,26,.4);
}
.navbar__inner{
  display:flex; align-items:center; justify-content:space-between;
}
.logo{ display:flex; flex-direction:column; line-height:1; }
.logo__mark{
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: .12em;
  color: var(--white);
  transition: color .4s;
}
.navbar.scrolled .logo__mark{ color: var(--forest); }
.logo__sub{
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-top: 4px;
}
.navbar.scrolled .logo__sub{ color: var(--gold); }

.nav-links{ display:flex; align-items:center; gap: 34px; }
.nav-link{
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.92);
  position: relative;
  padding: 4px 0;
  transition: color .4s;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background: var(--gold); transition: width .3s var(--ease);
}
.nav-link:hover::after{ width:100%; }
.navbar.scrolled .nav-link{ color: var(--ink); }
.nav-link--cta{
  background: var(--gold); color:#fff !important;
  padding: 10px 22px; border-radius: 999px;
  text-transform: uppercase; font-size: .74rem; letter-spacing: .08em;
}
.nav-link--cta::after{ display:none; }
.nav-link--cta:hover{ background: var(--gold-light); }

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width: 40px; height: 40px; background: transparent; border:none;
}
.hamburger span{
  width: 22px; height:2px; background: var(--white); margin:0 auto;
  transition: transform .35s var(--ease), opacity .3s, background .3s;
}
.navbar.scrolled .hamburger span{ background: var(--forest); }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-backdrop{
  position: fixed; inset:0; background: rgba(16,32,26,.55); backdrop-filter: blur(2px);
  z-index: 480; opacity:0; pointer-events:none; transition: opacity .35s;
}
.mobile-backdrop.active{ opacity:1; pointer-events:auto; }

/* =========================== HERO =========================== */
.hero{
  position: relative;
  height: 100svh; min-height: 560px;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; }
.hero__img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.08);
  animation: heroZoom 16s ease-out forwards;
}
@keyframes heroZoom{ to{ transform: scale(1); } }
.hero__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(16,32,26,.55) 0%, rgba(16,32,26,.35) 40%, rgba(16,32,26,.85) 100%);
}
.hero__content{ position:relative; z-index:2; color:#fff; max-width: 760px; }
.hero__content .eyebrow{ color: var(--gold-light); }
.hero__content .eyebrow::before{ background: var(--gold-light); }
.hero__title{
  color:#fff;
  font-size: clamp(2.5rem, 6vw, 4.4rem);
  margin-bottom: 22px;
}
.hero__text{
  font-size: 1.1rem;
  color: rgba(255,255,255,.88);
  max-width: 520px;
  margin-bottom: 34px;
}
.hero__actions{ display:flex; gap:18px; flex-wrap:wrap; }

.scroll-indicator{
  position:absolute; bottom: 34px; left:50%; transform: translateX(-50%);
  z-index:2; color: rgba(255,255,255,.85);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size: .68rem; letter-spacing:.24em; text-transform:uppercase;
}
.scroll-indicator span{
  width: 1px; height: 34px; background: rgba(255,255,255,.6);
  position:relative; overflow:hidden;
}
.scroll-indicator span::after{
  content:""; position:absolute; top:-100%; left:0; width:100%; height:100%;
  background: var(--gold-light);
  animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* reveal-on-scroll (used across all sections) */
.reveal{ opacity:0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform: translateY(0); }

/* =========================== QUICK BOOKING BAR =========================== */
.booking-bar-wrap{
  position: relative; z-index: 40;
  margin-top: -58px;
}
.booking-bar{
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 22px 26px;
  display:grid;
  grid-template-columns: 1fr 1fr 1.2fr .9fr auto;
  gap: 0;
  align-items:stretch;
}
.booking-field{
  padding: 0 22px;
  border-right: 1px solid #EBE4D5;
  display:flex; flex-direction:column; justify-content:center;
  position:relative;
}
.booking-field:first-child{ padding-left:4px; }
.booking-field label{
  font-size: .68rem; text-transform:uppercase; letter-spacing:.14em;
  color: var(--brown); font-weight:700; margin-bottom:6px;
}
.booking-field input[type="date"], .booking-field select{
  border:none; background:transparent; font-size: .96rem; color: var(--ink);
  font-weight:600; padding:0; width:100%;
}
.booking-bar__submit{ margin-left: 22px; }

.guests-toggle{
  border:none; background:transparent; padding:0; display:flex; align-items:center;
  justify-content:space-between; gap:8px; font-size:.96rem; font-weight:600; color:var(--ink);
  width:100%;
}
.guests-toggle i{ font-size:.7rem; color: var(--gold); transition: transform .3s; }
.guests-toggle[aria-expanded="true"] i{ transform: rotate(180deg); }

.guests-panel{
  position:absolute; top: calc(100% + 14px); left:0;
  background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  padding: 20px; width: 280px; z-index: 50;
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.guests-panel.open{ opacity:1; visibility:visible; transform:translateY(0); }
.guests-row{ display:flex; align-items:center; justify-content:space-between; padding: 10px 0; }
.guests-row + .guests-row{ border-top: 1px solid #F0EAD9; }
.guests-row__title{ margin:0; font-weight:700; font-size:.9rem; }
.guests-row__sub{ margin:0; font-size:.76rem; color: var(--ink-soft); }
.stepper{ display:flex; align-items:center; gap:14px; }
.stepper__btn{
  width:30px; height:30px; border-radius:50%; border: 1px solid var(--forest);
  background: transparent; color: var(--forest); font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition: all .25s;
}
.stepper__btn:hover{ background: var(--forest); color:#fff; }
.stepper__value{ min-width: 16px; text-align:center; font-weight:700; }
.guests-done{ margin-top: 14px; padding: 10px; font-size:.72rem; }

.booking-error{
  color:#B33A3A; font-size:.85rem; margin: 14px 4px 0; font-weight:600; min-height: 0;
}

/* =========================== AVAILABILITY RESULTS =========================== */
.availability{ padding: 90px 0 30px; }
.availability__summary{ color: var(--ink-soft); margin-top:-20px; margin-bottom: 30px; }
.availability-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 26px; }
.avail-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-card);
  display:flex; flex-direction:column;
}
.avail-card__img{ height: 190px; overflow:hidden; }
.avail-card__img img{ width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.avail-card:hover .avail-card__img img{ transform: scale(1.08); }
.avail-card__body{ padding: 20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.avail-card__body h3{ font-size: 1.2rem; margin-bottom:6px; }
.avail-card__meta{ font-size:.82rem; color: var(--ink-soft); margin-bottom:10px; }
.avail-card__facilities{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom: 14px; }
.avail-tag{
  font-size:.7rem; background: var(--beige); color: var(--brown); padding: 4px 10px; border-radius: 999px;
}
.avail-card__status{
  display:flex; align-items:center; gap:8px; font-weight:700; font-size:.82rem; margin-bottom: 14px;
}
.avail-card__status.available{ color: #2E7D4F; }
.avail-card__status.unavailable{ color: #A3A3A3; }
.avail-card__status i{ font-size:.6rem; }
.avail-card__footer{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.avail-card__price{ font-weight:700; color: var(--forest); font-size:.85rem; }
.avail-card.is-unavailable{ opacity:.55; }
.avail-card.is-unavailable .btn{ pointer-events:none; opacity:.5; }

/* =========================== SECTIONS GENERIC =========================== */
.section{ padding: 100px 0; }
.section--tint{ background: var(--beige); }

/* =========================== ROOMS =========================== */
.rooms-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.room-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-card);
  display:flex; flex-direction:column;
}
.room-card__gallery{ position:relative; height: 240px; overflow:hidden; cursor:pointer; }
.room-card__gallery img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.room-card__gallery:hover img{ transform: scale(1.1); }
.room-card__capacity{
  position:absolute; top:16px; left:16px; background: rgba(16,32,26,.72); color:#fff;
  font-size:.72rem; padding: 6px 14px; border-radius:999px; backdrop-filter: blur(4px);
}
.room-card__expand{
  position:absolute; bottom:14px; right:14px; width:36px; height:36px; border-radius:50%;
  background: rgba(255,255,255,.9); color: var(--forest); display:flex; align-items:center; justify-content:center;
  opacity:0; transform: translateY(6px); transition: all .3s;
}
.room-card__gallery:hover .room-card__expand{ opacity:1; transform:translateY(0); }
.room-card__body{ padding: 26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.room-card__body h3{ font-size: 1.32rem; margin-bottom: 8px; }
.room-card__body p{ color: var(--ink-soft); font-size:.94rem; margin: 0 0 16px; }
.room-card__features{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 22px; }
.room-card__features li{
  font-size:.74rem; color: var(--forest); background: var(--beige); padding: 5px 12px; border-radius: 999px;
  display:flex; align-items:center; gap:6px;
}
.room-card__features li i{ color: var(--gold); font-size:.6rem; }
.room-card__body .btn{ margin-top:auto; align-self:flex-start; }

/* =========================== SERVICES =========================== */
.services-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.service-card{
  background:#fff; border-radius: var(--radius-md); padding: 32px 26px;
  box-shadow: var(--shadow-card); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 40px -20px rgba(16,32,26,.3); }
.service-card__icon{
  width: 54px; height:54px; border-radius: 50%; background: var(--beige); color: var(--forest);
  display:flex; align-items:center; justify-content:center; font-size: 1.25rem; margin-bottom: 18px;
}
.service-card h3{ font-size: 1.08rem; margin-bottom: 8px; }
.service-card p{ color: var(--ink-soft); font-size:.9rem; margin:0; }

/* =========================== EXPERIENCE (split) =========================== */
.experience__grid{
  display:grid; grid-template-columns: 1.05fr 1fr; gap: 70px; align-items:center;
}
.experience__media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); }
.experience__media img{ width:100%; height: 560px; object-fit:cover; }
.experience__badge{
  position:absolute; bottom: 24px; left:24px; background: rgba(255,255,255,.92);
  padding: 12px 20px; border-radius: 999px; font-weight:700; font-size:.82rem; color: var(--forest);
  display:flex; align-items:center; gap:10px;
}
.experience__badge-line{ width:8px; height:8px; border-radius:50%; background: var(--gold); }
.experience__content p{ color: var(--ink-soft); }
.experience__list{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 26px 0 34px; }
.experience__list li{ display:flex; align-items:center; gap:10px; font-weight:600; font-size:.92rem; color: var(--ink); }
.experience__list li i{ color: var(--gold); width:18px; }

/* =========================== ABOUT =========================== */
.about__grid{ display:grid; grid-template-columns: .95fr 1.15fr; gap: 70px; align-items:center; }
.about__collage{ position:relative; height: 480px; }
.collage{ position:absolute; border-radius: var(--radius-md); object-fit:cover; box-shadow: var(--shadow-card); }
.collage--1{ width:72%; height:78%; top:0; left:0; z-index:1; }
.collage--2{ width:52%; height:46%; bottom:0; right:0; z-index:2; border: 6px solid var(--cream); }
.collage--3{ width:38%; height:34%; top: 10%; right:0; z-index:3; border: 6px solid var(--cream); display:none; }
.about__content p{ color: var(--ink-soft); }
.stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.stat{ text-align:center; background:#fff; border-radius: var(--radius-md); padding: 24px 12px; box-shadow: var(--shadow-card); }
.stat__num{ font-family: var(--font-display); font-size: 1.7rem; color: var(--gold); margin:0 0 6px; }
.stat__label{ font-size:.76rem; color: var(--brown); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin:0; }

/* =========================== PACKAGES =========================== */
.packages-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 26px; }
.package-card{
  background:#fff; border-radius: var(--radius-md); padding: 34px 28px; box-shadow: var(--shadow-card);
  display:flex; flex-direction:column; position:relative; transition: transform .35s var(--ease);
}
.package-card:hover{ transform: translateY(-6px); }
.package-card--featured{ background: var(--forest); color: var(--cream); }
.package-card--featured h3, .package-card--featured .package-card__price{ color:#fff; }
.package-card--featured .package-card__tag{ color: var(--gold-light); }
.package-card--featured ul li{ color: rgba(247,241,230,.9); }
.package-card--featured ul li i{ color: var(--gold-light); }
.package-card__ribbon{
  position:absolute; top: -13px; right: 26px; background: var(--gold); color:#fff;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; padding: 6px 14px; border-radius: 999px; font-weight:700;
}
.package-card h3{ font-size: 1.3rem; margin-bottom: 4px; }
.package-card__tag{ color: var(--ink-soft); font-size:.86rem; margin: 0 0 20px; }
.package-card ul{ margin-bottom: 24px; flex:1; }
.package-card ul li{ display:flex; align-items:center; gap:10px; font-size:.9rem; padding: 6px 0; color: var(--ink-soft); }
.package-card ul li i{ color: var(--gold); font-size:.78rem; }
.package-card__price{ font-weight:700; color: var(--forest); font-size:.84rem; text-transform:uppercase; letter-spacing:.04em; margin-bottom: 18px; }

/* =========================== OFFER BANNER =========================== */
.offer-banner{ position:relative; padding: 130px 0; overflow:hidden; }
.offer-banner__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.offer-banner__overlay{ position:absolute; inset:0; background: linear-gradient(120deg, rgba(16,32,26,.88), rgba(16,32,26,.55)); }
.offer-banner__content{ position:relative; z-index:1; text-align:center; color:#fff; max-width: 640px; margin:0 auto; }
.offer-banner__content h2{ color:#fff; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.offer-banner__content p{ color: rgba(255,255,255,.85); margin-bottom: 30px; }

/* =========================== GALLERY =========================== */
.gallery-filters{ display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 34px; }
.gallery-filter{
  border: 1px solid var(--forest); background: transparent; color: var(--forest);
  padding: 9px 20px; border-radius: 999px; font-size:.78rem; font-weight:700; letter-spacing:.03em;
  transition: all .3s;
}
.gallery-filter:hover{ background: var(--beige); }
.gallery-filter.active{ background: var(--forest); color:#fff; }
.gallery-grid{
  columns: 4 260px; column-gap: 18px;
}
.gallery-item{
  break-inside: avoid; margin-bottom: 18px; border-radius: var(--radius-md); overflow:hidden;
  position:relative; cursor:pointer; box-shadow: var(--shadow-card);
  transition: opacity .3s, transform .3s;
}
.gallery-item img{ width:100%; display:block; transition: transform .6s var(--ease); }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item__overlay{
  position:absolute; inset:0; background: linear-gradient(0deg, rgba(16,32,26,.7), transparent 55%);
  opacity:0; transition: opacity .3s; display:flex; align-items:flex-end; padding: 16px;
}
.gallery-item:hover .gallery-item__overlay{ opacity:1; }
.gallery-item__overlay span{ color:#fff; font-weight:700; font-size:.82rem; text-transform: capitalize; }
.gallery-item.hidden{ display:none; }

/* =========================== TESTIMONIALS =========================== */
.testimonial-slider{ max-width: 720px; margin: 0 auto; text-align:center; }
.testimonial-track{ position:relative; min-height: 220px; }
.testimonial-card{
  position:absolute; inset:0; opacity:0; visibility:hidden; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
  background:#fff; border-radius: var(--radius-md); padding: 44px 40px; box-shadow: var(--shadow-card);
}
.testimonial-card.active{ opacity:1; visibility:visible; transform:translateY(0); position:relative; }
.testimonial-card__stars{ color: var(--gold); font-size:.9rem; margin-bottom: 16px; }
.testimonial-card p{ font-family: var(--font-display); font-style:italic; font-size: 1.18rem; color: var(--ink); margin: 0 0 18px; }
.testimonial-card__name{ font-family: var(--font-body) !important; font-style: normal !important; font-size: .8rem !important; font-weight:700; color: var(--brown); text-transform:uppercase; letter-spacing:.04em; }
.testimonial-controls{ display:flex; align-items:center; justify-content:center; gap: 22px; margin-top: 30px; }
.testimonial-btn{
  width: 42px; height:42px; border-radius:50%; border: 1px solid var(--forest); background: transparent; color: var(--forest);
  display:flex; align-items:center; justify-content:center; transition: all .3s;
}
.testimonial-btn:hover{ background: var(--forest); color:#fff; }
.testimonial-dots{ display:flex; gap:8px; }
.testimonial-dot{ width:8px; height:8px; border-radius:50%; background: #DCD3BE; border:none; padding:0; transition: all .3s; }
.testimonial-dot.active{ background: var(--gold); width: 22px; border-radius: 4px; }

/* =========================== RESERVATION FORM =========================== */
.reservation-form{
  background:#fff; border-radius: var(--radius-lg); padding: 44px; box-shadow: var(--shadow-soft);
  max-width: 900px; margin: 0 auto;
}
.reservation-form__section + .reservation-form__section{ margin-top: 36px; padding-top: 32px; border-top: 1px solid #F0EAD9; }
.reservation-form__section h3{ font-size: 1.15rem; margin-bottom: 20px; }
.form-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.form-field{ display:flex; flex-direction:column; gap: 8px; }
.form-field--full{ margin-top: 20px; }
.form-field label{ font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--brown); }
.form-field input, .form-field textarea{
  border: 1px solid #E3DAC6; border-radius: var(--radius-sm); padding: 13px 16px; font-size:.94rem;
  background: var(--cream); transition: border-color .3s, box-shadow .3s;
}
.form-field input:focus, .form-field textarea:focus{
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,139,78,.18); outline:none;
}
.form-field textarea{ resize: vertical; }

.room-select-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 14px; }
.room-select-card{
  border: 1.5px solid #E3DAC6; border-radius: var(--radius-sm); padding: 16px; cursor:pointer;
  transition: all .3s; background: var(--cream);
}
.room-select-card:hover{ border-color: var(--gold); }
.room-select-card.selected{ border-color: var(--forest); background: #EEF3EE; box-shadow: 0 0 0 3px rgba(31,58,46,.1); }
.room-select-card h4{ margin:0 0 4px; font-family: var(--font-body); font-size:.94rem; font-weight:700; color: var(--forest); }
.room-select-card p{ margin:0; font-size:.78rem; color: var(--ink-soft); }
.room-select-info{ margin-top: 16px; font-size:.86rem; color: var(--forest); font-weight:600; min-height: 0; }
.form-error{ color:#B33A3A; font-weight:600; font-size:.88rem; margin: 22px 0 0; }

/* =========================== CONTACT =========================== */
.contact-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 20px; margin-bottom: 40px; }
.contact-card{
  background:#fff; border-radius: var(--radius-md); padding: 30px 22px; text-align:center; box-shadow: var(--shadow-card);
  transition: transform .3s var(--ease);
}
a.contact-card:hover{ transform: translateY(-6px); }
.contact-card i{ font-size: 1.5rem; color: var(--gold); margin-bottom: 14px; }
.contact-card h3{ font-size: .96rem; margin-bottom: 6px; }
.contact-card p{ margin:0; color: var(--ink-soft); font-size:.86rem; }
.contact-cta{ display:flex; gap: 16px; flex-wrap:wrap; justify-content:center; }

/* =========================== MAP =========================== */
.map-block{ display:grid; grid-template-columns: 1fr 1.3fr; gap: 0; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); }
.map-block__card{ background: var(--forest); color: var(--cream); padding: 44px 36px; display:flex; flex-direction:column; gap:12px; }
.map-block__card h3{ color:#fff; font-size: 1.3rem; margin-bottom: 6px; }
.map-block__card p{ margin:0; color: rgba(247,241,230,.85); display:flex; align-items:center; gap:10px; }
.map-block__card .btn{ margin-top: 18px; align-self:flex-start; }
.map-block__visual{
  background: repeating-linear-gradient(135deg, #E4DAC3, #E4DAC3 12px, #EEE6D5 12px, #EEE6D5 24px);
  display:flex; align-items:center; justify-content:center; min-height: 300px;
}
.map-block__open{
  display:flex; flex-direction:column; align-items:center; gap:14px; color: var(--forest);
  background: rgba(255,255,255,.85); padding: 30px 44px; border-radius: var(--radius-md);
  font-weight:700; letter-spacing:.03em; transition: all .3s; box-shadow: var(--shadow-card);
}
.map-block__open:hover{ background:#fff; transform: translateY(-4px); }
.map-block__open i{ font-size: 2rem; color: var(--gold); }

/* =========================== FOOTER =========================== */
.footer{ background: var(--forest-dark); color: rgba(247,241,230,.82); padding: 80px 0 0; }
.footer__grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(247,241,230,.12); }
.footer__col h4{ color:#fff; font-family: var(--font-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom: 18px; }
.footer__col a{ display:block; padding: 6px 0; font-size:.88rem; color: rgba(247,241,230,.78); transition: color .3s; }
.footer__col a:hover{ color: var(--gold-light); }
.footer__col p{ font-size:.88rem; color: rgba(247,241,230,.7); }
.logo--footer .logo__mark{ color:#fff; }
.footer__social{ display:flex; gap: 12px; margin-top: 18px; }
.footer__social a{ width:38px; height:38px; border-radius:50%; border: 1px solid rgba(247,241,230,.3); display:flex; align-items:center; justify-content:center; padding:0; }
.footer__social a:hover{ background: var(--gold); border-color: var(--gold); color:#fff; }
.footer__note{ font-size:.82rem; }
.footer__bottom{ text-align:center; padding: 26px 0; font-size:.8rem; color: rgba(247,241,230,.55); }

/* =========================== FLOATING BUTTONS =========================== */
.fab-stack{ position: fixed; right: 22px; bottom: 26px; z-index: 300; display:flex; flex-direction:column; gap: 14px; }
.fab{
  width: 54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.25rem; box-shadow: 0 14px 30px -12px rgba(16,32,26,.5);
  transition: transform .3s var(--ease);
}
.fab:hover{ transform: scale(1.1); }
.fab--whatsapp{ background: #25D366; }
.fab--call{ background: var(--forest); }
.fab--book{ background: var(--gold); animation: fabPulse 2.6s ease-in-out infinite; }
@keyframes fabPulse{ 0%,100%{ box-shadow: 0 14px 30px -12px rgba(185,139,78,.6);} 50%{ box-shadow: 0 14px 30px -12px rgba(185,139,78,.95), 0 0 0 8px rgba(185,139,78,.12);} }

.back-to-top{
  position: fixed; left: 22px; bottom: 26px; z-index: 300;
  width: 46px; height:46px; border-radius:50%; border:1px solid var(--forest);
  background: rgba(247,241,230,.9); color: var(--forest); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(10px); transition: all .35s var(--ease);
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background: var(--forest); color:#fff; }

/* =========================== LIGHTBOX =========================== */
.lightbox{
  position: fixed; inset:0; background: rgba(10,18,15,.94); z-index: 900;
  display:flex; align-items:center; justify-content:center;
  animation: fadeIn .3s var(--ease);
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.lightbox[hidden]{ display:none; }
.lightbox__img{ max-width: 88vw; max-height: 82vh; border-radius: 10px; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.lightbox__close{
  position:absolute; top: 24px; right: 30px; background:transparent; border:none; color:#fff;
  font-size: 2.2rem; line-height:1; cursor:pointer;
}
.lightbox__nav{
  position:absolute; top:50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border:none;
  color:#fff; width: 52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size: 1.1rem; transition: background .3s;
}
.lightbox__nav:hover{ background: rgba(255,255,255,.28); }
.lightbox__nav--prev{ left: 24px; }
.lightbox__nav--next{ right: 24px; }
.lightbox__counter{ position:absolute; bottom: 26px; left:50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size:.82rem; letter-spacing:.08em; }

/* =========================== MODALS =========================== */
.modal{ position: fixed; inset:0; z-index: 950; display:flex; align-items:center; justify-content:center; padding: 20px; }
.modal[hidden]{ display:none; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(16,32,26,.6); backdrop-filter: blur(3px); animation: fadeIn .3s var(--ease); }
.modal__box{
  position:relative; background: #fff; border-radius: var(--radius-lg); padding: 46px 40px; max-width: 460px; width:100%;
  text-align:center; box-shadow: var(--shadow-soft); animation: modalPop .35s var(--ease);
}
@keyframes modalPop{ from{ opacity:0; transform: translateY(18px) scale(.97); } to{ opacity:1; transform:translateY(0) scale(1); } }
.modal__close{ position:absolute; top: 14px; right: 18px; background:transparent; border:none; font-size: 1.6rem; color: var(--ink-soft); }
.modal__icon{ font-size: 2.4rem; color: var(--gold); margin-bottom: 16px; }
.modal__icon--success{ color: #2E7D4F; }
.modal__box h3{ font-size: 1.4rem; }
.modal__box p{ color: var(--ink-soft); font-size:.94rem; }
.modal__actions{ display:flex; flex-wrap:wrap; gap: 12px; justify-content:center; margin-top: 24px; }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 1080px){
  .experience__grid, .about__grid{ grid-template-columns: 1fr; gap: 44px; }
  .experience__media img{ height: 420px; }
  .about__collage{ height: 360px; }
  .map-block{ grid-template-columns: 1fr; }
  .gallery-grid{ columns: 3 220px; }
}

@media (max-width: 900px){
  .nav-links{
    position: fixed; top:0; right:0; height: 100vh; width: min(320px, 84vw);
    background: var(--cream); flex-direction: column; align-items: flex-start; justify-content:flex-start;
    padding: 100px 34px 40px; gap: 26px; transform: translateX(100%); transition: transform .4s var(--ease);
    z-index: 490; box-shadow: -20px 0 50px rgba(0,0,0,.15);
  }
  .nav-links.open{ transform: translateX(0); }
  .nav-link{ color: var(--forest) !important; font-size: 1rem; }
  .nav-link--cta{ margin-top: 10px; }
  .hamburger{ display:flex; }

  .booking-bar{ grid-template-columns: 1fr 1fr; gap: 18px; padding: 26px; }
  .booking-field{ border-right:none; padding: 0; border-bottom: 1px solid #EFE9DA; padding-bottom: 14px; }
  .booking-bar__submit{ grid-column: 1 / -1; margin-left:0; margin-top: 6px; }
  .guests-panel{ left:0; right:0; width:auto; }

  .stats{ grid-template-columns: 1fr 1fr; }
  .gallery-grid{ columns: 2 200px; }
}

@media (max-width: 600px){
  .section{ padding: 70px 0; }
  .hero__actions{ flex-direction: column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .booking-bar{ grid-template-columns: 1fr; }
  .contact-cta{ flex-direction: column; }
  .contact-cta .btn{ width:100%; }
  .footer__grid{ grid-template-columns: 1fr 1fr; }
  .gallery-grid{ columns: 1 100%; }
  .modal__box{ padding: 34px 24px; }
  .fab{ width: 48px; height:48px; font-size: 1.05rem; }
}