/*
Theme Name: Sarana
Theme URI: https://sarana.life
Author: Sarana Life
Author URI: https://sarana.life
Description: Luxury Private Villas — Trang, Thailand
Version: 1.0.16
License: Private
Text Domain: sarana

Changelog:
1.0.16 (2026-05-09) — NEW page.php generic template. Theme had only dedicated
                      page-{slug}.php files (page-home, page-villas, page-about-sarana,
                      etc.) — no fallback for arbitrary Pages. Result: visiting
                      /privacy-policy/ silently fell through to index.php which
                      hardcoded get_template_part('page','home') → page rendered
                      empty / wrong content. Fix: page.php renders any Page with
                      a clean dark header (eyebrow + serif title) OR Hero metabox
                      if enabled, then full-width cream content section with
                      luxury typography for h2/h3/p/ul/a/blockquote/hr from the
                      WP block editor. Max reading width 760px.
1.0.15 (2026-05-09) — Dead-code cleanup. Removed the 3 tnm_cookie_border_*
                      filter hooks from functions.php (added in v1.0.14).
                      They became no-ops in TNM Cookie Consent plugin v1.0.2
                      which dropped apply_filters() for border fields and made
                      admin Settings the sole source of truth. Brand styling
                      (radius/color/width) now configured via wp-admin →
                      Settings → Sarana Cookie Consent → Card 3 (Colors).
1.0.14 (2026-05-09) — Cookie banner brand-styling. functions.php adds 3 more
                      filters (tnm_cookie_border_radius, tnm_cookie_border_color,
                      tnm_cookie_border_width) that override TNM Cookie Consent
                      defaults to match Sarana sharp-luxury aesthetic: radius 0
                      (squared) + 1px gold border (sarana_color_gold theme option,
                      defaults to #b8955a). Honors plugin v1.0.1+ filter API.
1.0.13 (2026-05-09) — TNM Cookie Consent integration. functions.php adds two
                      filter hooks at the bottom (tnm_cookie_brand_name and
                      tnm_cookie_privacy_url) that white-label the new
                      tnm-cookie-consent plugin for Sarana — admin menu reads
                      "Sarana Cookie Consent", banner link points to
                      sarana_page_url('privacy-policy'). Filters are no-ops if
                      the plugin is deactivated. Plugin lives at
                      /wp-content/plugins/tnm-cookie-consent/ — ships
                      separately from the theme.
1.0.12 (2026-05-09) — Defensive guard for floor plan shortcode call.
                      Wrapped do_shortcode( '[sarana_villa_floor_plan]' )
                      in shortcode_exists() check so the literal tag text
                      cannot render if the Sarana Villas plugin is
                      deactivated. Same pattern as the v1.0.8 archive
                      delegate (later reverted in v1.0.9). Plugin v0.4.1
                      ships the corresponding mobile-label fix.
1.0.11 (2026-05-09) — single-villa.php adds [sarana_villa_floor_plan] shortcode
                      call before get_footer() (1-line patch). Renders the
                      floating Floor Plan trigger + modal popover provided by
                      Sarana Villas plugin v0.4.0. If a villa has no floor
                      plan set, shortcode returns '' (no element, no error).
                      Plugin owns CSS/JS/markup — theme only hosts the call.
1.0.10 (2026-05-08) — Single-villa Reserve sidebar specs polish: 5 inline
                      SVG icons (bed / bath / users / droplet / maximize)
                      led each row, gold currentColor stroke. New
                      `.sv-sidebar-specs__detail` style — sub-detail line
                      (bed_config under Bedrooms) shows italic dim
                      gold-cream, 11px, indented 24px to align under label.
                      Used `:has()` to drop bottom-border on row above
                      detail for visual grouping.
1.0.9 (2026-05-08) — Reverted /villas/ archive grid back to image-driven
                     villa-card layout (v1.0.7 state) per client direction.
                     The [sarana_villa_specs_grid] shortcode (plugin v0.3.0)
                     remains available for ad-hoc use elsewhere.
                     Single-villa Reserve sidebar specs extended: adds
                     bed_config detail line under Bedrooms + Pool (size
                     or type fallback) + Total Area; reordered for
                     hierarchy (Beds → Baths → Guests → Pool → Area).
1.0.8 (2026-05-08) — archive-villa.php now delegates the villa grid to the
                     Sarana Villas plugin v0.3.0 [sarana_villa_specs_grid]
                     shortcode (single source of truth). Removed inline
                     WP_Query + villa-card loop. Hero + filter bar preserved.
                     [Reverted in v1.0.9]
                     Empty-state fallback if plugin deactivated. No CSS
                     changes needed in theme — plugin ships its own
                     specs-grid.css (conditionally enqueued).
1.0.7 (2026-05-08) — Mobile hero padding fix on single villa pages. Was: hero
                     content collided with fixed nav logo on small screens
                     (eyebrow text overlapped "SARANA.LIFE" wordmark) because
                     generic `section { padding:80px 24px }` ate available
                     viewport but content stack (eyebrow + 2-line title +
                     subtitle + 2 CTAs) was taller than 100vh - 160px on
                     iPhones. Fix: explicit `.hero` override with
                     `padding: var(--nav-height) 24px 40px`, `height:auto`
                     + `min-height:100vh`. Plus mobile typography scaling
                     + CTA buttons flex-row no-wrap (≤560px).
1.0.6 (2026-05-08) — Contact page Google Map field now accepts ANY Google
                     Maps URL. Smart render: embed URLs (?pb=...) render as
                     iframe map · short URLs (maps.app.goo.gl), place URLs,
                     and all other Google Maps URLs render as luxury "View
                     on Google Maps" CTA button (opens new tab). New helper
                     sarana_render_contact_map() in inc/metabox-contact.php.
1.0.5 (2026-05-08) — single-villa.php Reserve card "Begin the conversation"
                     anchor now reads from sarana-booking plugin's
                     sarana_booking_get_text('eyebrow') helper so the
                     Reserve card link and the inquiry form eyebrow stay
                     in sync when the client edits Settings → Sarana
                     Booking. function_exists() fallback preserves the
                     hardcoded string if the plugin is deactivated.
1.0.4 (2026-05-08) — Homepage "Our Villas" section: removed "Check Availability"
                     primary CTA per client direction. Section now shows only
                     "View All Villas" secondary CTA → cleaner, less duplicated
                     with global Book Now button. The _sarana_villas_cta meta
                     field is preserved (commented inline) for easy re-enable.
1.0.3 (2026-05-08) — Book Now button auto-opens in new tab when URL is
                     external (different host) or special protocol (mailto:,
                     tel:, sms:, line:, whatsapp:). Internal /booking/ stays
                     in same tab. New helper sarana_book_now_target_attrs().
1.0.2 (2026-05-08) — Villa CPT removed (moved to sarana-villas plugin).
                     Book Now URL now editable via Theme Option
                     (sarana_book_now_url) — supports any URL incl. external
                     booking, WhatsApp, LINE, mailto:, tel:. /villas/ archive
                     grid switched to 2 columns for luxury feel.
1.0.1 (2026-05-08) — Booking system extracted to sarana-booking plugin.
                     Theme now calls [sarana_booking_section] in page-home.php
                     and [sarana_villa_inquiry_form] in single-villa.php.
                     Booking-related selectors (.booking-section, .sif-*,
                     .sv-booking-card) remain in this file as theme-level styling.
1.0.0 — Initial release.
*/

:root {
  --gold: #b8955a;
  --gold-light: #d4b07a;
  --dark: #0d0d0d;
  --deep: #111410;
  --cream: #f5f0e8;
  --text-muted: #888880;
  --white: #ffffff;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--deep);
  color: var(--cream);
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

/* NAVBAR */
#navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 28px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, rgba(13,13,13,0.9), transparent);
  transition: background 0.4s, padding 0.4s;
}
#navbar.scrolled {
  background: rgba(13,13,13,0.97);
  padding: 18px 60px;
  box-shadow: 0 1px 0 rgba(184,149,90,0.2);
}
.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 6px;
  color: var(--gold);
  text-transform: uppercase;
  text-decoration: none;
}
.nav-logo span { color: var(--cream); }
.nav-logo-img {
  height: 40px;
  width: auto;
  display: block;
}
.footer-logo-img {
  height: 36px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
}
.nav-links > li { position: relative; }
.nav-links a, .nav-links > li > a {
  color: var(--cream);
  text-decoration: none;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  opacity: 0.8;
  transition: opacity 0.3s, color 0.3s;
}
.nav-links a:hover { opacity: 1; color: var(--gold); }

/* Dropdown */
.nav-links .has-dropdown > a { padding-right: 12px; }
.nav-links .has-dropdown > a::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  vertical-align: middle;
  margin-top: -2px;
}
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13,13,13,0.97);
  border: 1px solid rgba(184,149,90,0.15);
  border-radius: 2px;
  padding: 12px 0;
  min-width: 200px;
  list-style: none;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  z-index: 200;
}
#navbar .has-dropdown:hover > .nav-dropdown,
#navbar .nav-links .menu-item-has-children:hover > .sub-menu { display: block; }
.nav-dropdown li a,
.nav-links .sub-menu li a {
  display: block;
  padding: 8px 24px;
  font-size: 10px;
  letter-spacing: 1.5px;
  white-space: nowrap;
  opacity: 0.7;
}
.nav-dropdown li a:hover,
.nav-links .sub-menu li a:hover { opacity: 1; color: var(--gold); background: rgba(184,149,90,0.06); }

/* WP menu dropdown support */
.nav-links .menu-item-has-children { position: relative; }
.nav-links .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  vertical-align: middle;
  margin-top: -2px;
}
.nav-links .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(13,13,13,0.97);
  border: 1px solid rgba(184,149,90,0.15);
  border-radius: 2px;
  padding: 12px 0;
  min-width: 200px;
  list-style: none;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  z-index: 200;
}

.nav-book {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 10px 28px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  border-radius: 2px;
}
.nav-book:hover {
  background: var(--gold);
  color: var(--dark);
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 110;
}
.nav-hamburger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--cream);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile Menu Overlay */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 105;
  background: rgba(13,13,13,0.98);
  flex-direction: column;
  padding: 28px 40px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.35s;
}
.mobile-menu.open {
  display: flex;
  opacity: 1;
}
.mobile-menu__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}
.mobile-menu__close {
  background: none;
  border: none;
  color: var(--cream);
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
}
.mobile-nav-links, .mobile-nav .nav-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-nav-links > li, .mobile-nav .nav-links > li {
  border-bottom: 1px solid rgba(184,149,90,0.1);
}
.mobile-nav-links a, .mobile-nav .nav-links a {
  display: block;
  padding: 14px 0;
  color: var(--cream);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.8;
}
.mobile-nav-links a:hover, .mobile-nav .nav-links a:hover { color: var(--gold); opacity: 1; }
.mobile-nav .nav-dropdown,
.mobile-nav .sub-menu,
.mobile-nav-links .sub-menu {
  display: none;
  list-style: none;
  padding-left: 20px;
  /* Reset desktop dropdown styles */
  position: static;
  transform: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.mobile-nav .nav-dropdown.open,
.mobile-nav .sub-menu.open { display: block; }
.mobile-nav .nav-dropdown li a,
.mobile-nav .sub-menu li a {
  padding: 10px 0;
  font-size: 11px;
  letter-spacing: 1.5px;
  white-space: normal;
  opacity: 0.6;
}
.mobile-nav .nav-dropdown li a:hover,
.mobile-nav .sub-menu li a:hover {
  opacity: 1;
  color: var(--gold);
  background: transparent;
}
.mobile-book-btn {
  display: block;
  margin-top: 30px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-decoration: none;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: all 0.3s;
  border-radius: 2px;
}
.mobile-book-btn:hover { background: var(--gold); color: var(--dark); }

/* Page hero for inner pages */
.page-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13,13,13,0.5);
  z-index: 1;
}
.page-hero__content {
  position: relative;
  z-index: 2;
  padding: 120px 40px 60px;
}
.page-hero__eyebrow {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.page-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 12px;
}
.page-hero__tagline {
  font-size: 13px;
  letter-spacing: 2px;
  color: rgba(245,240,232,0.7);
  text-transform: uppercase;
}

/* Page content section for inner pages */
.page-content-section {
  padding: 80px 60px;
  background: var(--deep);
}
.page-content-inner {
  max-width: 800px;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.9;
  color: rgba(245,240,232,0.75);
}
.page-content-inner h2, .page-content-inner h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  color: var(--cream);
  margin: 40px 0 16px;
}
.page-content-inner a { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════
   GENERIC PAGE TEMPLATE (page.php — v1.0.16)
   Used for /privacy-policy/, /terms/, /fact-sheet/, etc.
═══════════════════════════════════════════════════════════════════ */

.page-default-header {
  background: var(--deep, #111410);
  padding: 140px 24px 80px;
  text-align: center;
  border-bottom: 1px solid rgba(184, 149, 90, 0.15);
}
.page-default-header-inner {
  max-width: 800px;
  margin: 0 auto;
}
.page-default-header .section-eyebrow {
  margin-bottom: 16px;
}
.page-default-title {
  font-family: var(--font-heading, 'Cormorant Garamond'), serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 1px;
  color: var(--cream, #f5f0e8);
  margin: 0;
}

.page-default-content {
  background: var(--cream, #f5f0e8);
  padding: 80px 24px 100px;
  color: var(--dark, #0d0d0d);
}
.page-default-content-inner {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-body, 'Montserrat'), sans-serif;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(13, 13, 13, 0.85);
}
.page-default-content-inner h2 {
  font-family: var(--font-heading, 'Cormorant Garamond'), serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.5px;
  margin: 56px 0 16px;
  color: var(--dark, #0d0d0d);
}
.page-default-content-inner h2:first-child { margin-top: 0; }
.page-default-content-inner h3 {
  font-family: var(--font-body, 'Montserrat'), sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 36px 0 12px;
  color: var(--gold, #b8955a);
}
.page-default-content-inner h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 28px 0 10px;
  color: var(--dark, #0d0d0d);
}
.page-default-content-inner p {
  margin: 0 0 18px;
}
.page-default-content-inner ul,
.page-default-content-inner ol {
  margin: 0 0 18px 24px;
  padding: 0;
}
.page-default-content-inner li {
  margin-bottom: 8px;
}
.page-default-content-inner a {
  color: var(--gold, #b8955a);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.3s ease;
}
.page-default-content-inner a:hover,
.page-default-content-inner a:focus {
  color: var(--dark-beige, #7E6A4B);
}
.page-default-content-inner hr {
  border: 0;
  border-top: 1px solid rgba(13, 13, 13, 0.12);
  margin: 40px 0;
}
.page-default-content-inner blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--gold, #b8955a);
  font-family: var(--font-heading, 'Cormorant Garamond'), serif;
  font-size: 18px;
  font-style: italic;
  color: rgba(13, 13, 13, 0.7);
}
.page-default-content-inner code {
  background: rgba(184, 149, 90, 0.08);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 13px;
}

@media (max-width: 600px) {
  .page-default-header { padding: 90px 20px 50px; }
  .page-default-content { padding: 50px 20px 70px; }
  .page-default-content-inner h2 { font-size: 26px; margin: 40px 0 12px; }
  .page-default-content-inner h3 { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   INNER PAGE SECTIONS (About, Dining, Experience, etc.)
═══════════════════════════════════════════════════════════════════ */

.page-section {
  padding: 40px 60px;
  background: var(--deep);
}
.page-section__narrow {
  max-width: 800px;
  margin: 0 auto;
}
.page-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}
.page-section__inner--reverse { direction: rtl; }
.page-section__inner--reverse > * { direction: ltr; }
.page-section__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 2px;
}
.section-eyebrow {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 18px;
  line-height: 1.15;
}
.section-title em { font-style: italic; color: var(--gold); }
.section-body {
  font-size: 14px;
  line-height: 1.9;
  color: rgba(245,240,232,0.7);
}
.section-body p { margin-bottom: 1em; }
.section-body a { color: var(--gold); text-decoration: underline; }

/* Buttons */
.btn-primary {
  display: inline-block;
  padding: 14px 32px;
  background: var(--gold);
  color: var(--dark);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.3s;
  margin-top: 16px;
}
.btn-primary:hover { background: var(--gold-light); }
.btn-secondary {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.3s;
  margin-top: 16px;
}
.btn-secondary:hover { background: var(--gold); color: var(--dark); }

/* Testimonial */
.testimonial-block { max-width: 700px; margin: 0 auto; text-align: center; }
.testimonial-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 300;
  font-style: italic;
  color: var(--cream);
  line-height: 1.6;
  margin: 0 0 20px;
}
.testimonial-author {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
}
.testimonial-source {
  color: var(--text-muted);
  font-style: normal;
  margin-left: 8px;
}

/* Trang external links grid */
.trang-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.trang-link-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid rgba(184,149,90,0.2);
  border-radius: 2px;
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s;
}
.trang-link-card:hover { border-color: var(--gold); background: rgba(184,149,90,0.05); }
.trang-link-card strong {
  font-size: 13px;
  color: var(--cream);
  font-weight: 500;
}
.trang-link-card span {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Dining cards */
.dining-grid {
  max-width: 1200px;
  margin: 0 auto;
}
.dining-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(184,149,90,0.1);
}
.dining-card--reverse { direction: rtl; }
.dining-card--reverse > * { direction: ltr; }
.dining-card__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 2px;
}
.dining-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 16px;
}
.dining-card__desc {
  font-size: 14px;
  line-height: 1.9;
  color: rgba(245,240,232,0.7);
  margin-bottom: 8px;
}
.dining-card__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Promo cards grid */
.promos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.promo-card {
  background: var(--dark);
  border: 1px solid rgba(184,149,90,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.promo-card__img { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.promo-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-card__badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--gold);
  color: var(--dark);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
}
.promo-card__body { padding: 24px; }
.promo-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 10px;
}
.promo-card__desc {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(245,240,232,0.65);
  margin: 0 0 12px;
}
.promo-card__price {
  font-size: 16px;
  color: var(--gold);
  font-weight: 500;
  margin: 0 0 14px;
}

/* Events grid */
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.event-card {
  background: var(--dark);
  border: 1px solid rgba(184,149,90,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.event-card__img { aspect-ratio: 16/10; overflow: hidden; }
.event-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card__body { padding: 24px; }
.event-card__date {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}
.event-card__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 10px;
}
.event-card__desc {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(245,240,232,0.65);
  margin: 0 0 14px;
}

/* News grid */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.news-card {
  background: var(--dark);
  border: 1px solid rgba(184,149,90,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.news-card__img { aspect-ratio: 16/10; overflow: hidden; }
.news-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__body { padding: 24px; }
.news-card__date {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}
.news-card__title {
  font-size: 16px;
  font-weight: 500;
  color: var(--cream);
  margin: 0 0 10px;
  line-height: 1.4;
}
.news-card__title a { color: inherit; text-decoration: none; transition: color 0.3s; }
.news-card__title a:hover { color: var(--gold); }
.news-card__excerpt {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(245,240,232,0.6);
  margin: 0 0 14px;
}

/* Inner page responsive */
@media (max-width: 860px) {
  .page-section { padding: 60px 24px; }
  .page-section__inner { grid-template-columns: 1fr; gap: 30px; }
  .page-section__inner--reverse { direction: ltr; }
  .dining-card { grid-template-columns: 1fr; gap: 30px; padding: 10px 0; }
  .dining-card--reverse { direction: ltr; }
  .promos-grid { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr; }
  .trang-links-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .trang-links-grid { grid-template-columns: 1fr; }
}

/* HERO */
.hero {
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(13,13,13,0.3) 0%, rgba(13,13,13,0.1) 40%, rgba(13,13,13,0.6) 100%),
    url('https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?w=1800&q=80') center/cover no-repeat;
  transform: scale(1.05);
  animation: heroZoom 12s ease-out forwards;
}
@keyframes heroZoom {
  from { transform: scale(1.05); }
  to { transform: scale(1.0); }
}
.hero-content {
  position: relative;
  text-align: center;
  z-index: 2;
  animation: fadeUp 1.4s ease-out 0.3s both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow {
  font-size: 10px;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 40px;
  margin-bottom: 20px;
  animation: fadeUp 1.4s ease-out 0.5s both;
}
.hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(56px, 8vw, 110px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 2px;
  margin-bottom: 12px;
  animation: fadeUp 1.4s ease-out 0.7s both;
}
.hero-title em {
  font-style: italic;
  color: var(--gold-light);
}
.hero-subtitle {
  font-size: 12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.7;
  margin-bottom: 30px;
  animation: fadeUp 1.4s ease-out 0.9s both;
}
.hero-cta {
  display: inline-flex;
  gap: 20px;
  animation: fadeUp 1.4s ease-out 1.1s both;
}
.btn-primary {
  background: var(--gold);
  color: var(--dark);
  padding: 16px 44px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-secondary {
  background: transparent;
  color: var(--cream);
  padding: 16px 44px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(245,240,232,0.4);
  transition: all 0.3s;
}
.btn-secondary:hover { border-color: var(--cream); transform: translateY(-2px); }

.hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: fadeUp 1.4s ease-out 1.5s both;
}
.hero-scroll span {
  font-size: 9px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.5;
}
.scroll-line {
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1); }
}

/* INTRO STRIP */
.intro-strip {
  padding: 80px 60px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: 0;
  border-top: 1px solid rgba(184,149,90,0.2);
  border-bottom: 1px solid rgba(184,149,90,0.2);
}
.intro-divider {
  background: rgba(184,149,90,0.2);
}
.intro-item {
  text-align: center;
  padding: 20px 40px;
}
.intro-item .num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 52px;
  font-weight: 300;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
}
.intro-item .label {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 0.6;
}

/* SECTION COMMON */
section { padding: 120px 60px; }
.section-eyebrow {
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 300;
  line-height: 1.15;
  margin-bottom: 24px;
}
.section-title em { font-style: italic; color: var(--gold-light); }
.section-body {
  font-size: 13px;
  line-height: 1.9;
  opacity: 0.7;
  max-width: 500px;
}

/* ABOUT */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}
.about-img-wrap {
  position: relative;
}
.about-img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  display: block;
}
.about-img-accent {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(184,149,90,0.4);
  z-index: -1;
}
.about-tag {
  position: absolute;
  top: 30px;
  right: -50px;
  background: var(--gold);
  color: var(--dark);
  padding: 20px 28px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 500;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

/* VILLAS */
.villas-section { background: #0a0a09; }
.villas-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}
.villas-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.villas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.villa-img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.villa-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,0.9) 0%, rgba(13,13,13,0.1) 60%);
  transition: opacity 0.4s;
}
.villa-card:hover .villa-overlay { opacity: 0.7; }
.villa-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  transform: translateY(10px);
  transition: transform 0.4s;
}
.villa-card:hover .villa-info { transform: translateY(0); }
.villa-detail {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.4s 0.1s;
}
.villa-card:hover .villa-detail { opacity: 1; }
.villa-price {
  font-size: 11px;
  letter-spacing: 2px;
  opacity: 0.7;
  margin-top: 6px;
}

/* ABOUT VIDEO PLAYER */
.about-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dark, #0d0d0d);
  cursor: pointer;
}
.about-video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease, filter 0.4s;
}
.about-video-wrap:hover .about-video-thumb {
  transform: scale(1.04);
  filter: brightness(0.75);
}
.about-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.about-video-play svg {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.6));
  transition: transform 0.3s ease;
}
.about-video-wrap:hover .about-video-play svg {
  transform: scale(1.1);
}
/* No-thumbnail state (Vimeo without poster) */
.about-video-wrap:not(:has(.about-video-thumb)) {
  background: linear-gradient(135deg, #1a1a16 0%, #111410 100%);
}

/* EXPERIENCE CARDS (formerly Amenities) */

/* ── Desktop Grid ── */
.exp-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 70px;
  border: 1px solid rgba(184,149,90,0.15);
}
.exp-grid-card {
  padding: 50px 36px;
  border-right: 1px solid rgba(184,149,90,0.15);
  transition: background 0.3s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.exp-grid-card:last-child { border-right: none; }
.exp-grid-card:hover { background: rgba(184,149,90,0.05); }
.exp-grid-card--link:hover { cursor: pointer; }
.exp-grid-card__img {
  margin: -50px -36px 30px;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.exp-grid-card__img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s;
}
.exp-grid-card:hover .exp-grid-card__img img { transform: scale(1.07); }
.exp-grid-card__icon {
  font-size: 28px;
  margin-bottom: 20px;
  display: block;
}
.exp-grid-card__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  margin-bottom: 10px;
}
.exp-grid-card__desc {
  font-size: 11px;
  line-height: 1.8;
  opacity: 0.5;
  letter-spacing: 0.5px;
}

/* ── Mobile Scroll (hidden on desktop) ── */
.exp-cards-mobile { display: none; }

.exp-cards-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 12.5vw;
  scroll-padding: 0 12.5vw;
}
.exp-cards-scroll::-webkit-scrollbar { display: none; }
.exp-cards-scroll { scrollbar-width: none; }

.exp-card {
  flex: 0 0 75vw;
  scroll-snap-align: center;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(184,149,90,0.15);
  text-decoration: none;
  color: inherit;
  display: block;
}
.exp-card__img {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.exp-card__img img {
  width: 100%; height: 100%; object-fit: cover;
}
.exp-card__icon {
  font-size: 24px;
  padding: 16px 20px 0;
  display: block;
}
.exp-card__name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-weight: 400;
  padding: 4px 20px 0;
  margin: 0;
}
.exp-card__desc {
  font-size: 11px;
  opacity: 0.5;
  padding: 8px 20px 20px;
  line-height: 1.8;
  letter-spacing: 0.5px;
}

/* Progress dots */
.exp-cards-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.exp-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(184,149,90,0.25);
  transition: background 0.3s, transform 0.3s;
}
.exp-dot.active {
  background: var(--gold);
  transform: scale(1.3);
}

/* Swipe hint */
.exp-cards-hint {
  text-align: center;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.5;
  margin-top: 12px;
  animation: expHintPulse 2s ease-in-out infinite;
}
@keyframes expHintPulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }

/* Learn More footer */
.exp-cards-footer {
  text-align: center;
  margin-top: 40px;
}

/* ── Mobile: show scroll, hide grid (≤ 860px) ── */
@media (max-width: 860px) {
  .exp-cards-grid { display: none !important; }
  .exp-cards-mobile { display: block; margin-top: 40px; }
  #experience-cards { padding-left: 0; padding-right: 0; }
}

/* ── Keep old class names as aliases for backward compat ── */
.amenities-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin-top: 70px; border: 1px solid rgba(184,149,90,0.15); }
.amenity { padding: 50px 36px; border-right: 1px solid rgba(184,149,90,0.15); transition: background 0.3s; }
.amenity:last-child { border-right: none; }
.amenity:hover { background: rgba(184,149,90,0.05); }
.amenity-icon { font-size: 28px; margin-bottom: 20px; display: block; }
.amenity-name { font-family: 'Cormorant Garamond', serif; font-size: 20px; margin-bottom: 10px; }
.amenity-desc { font-size: 11px; line-height: 1.8; opacity: 0.5; letter-spacing: 0.5px; }

/* SARANA PHILOSOPHY (formerly Experience Banner) */
.philosophy,
.experience {
  position: relative;
  padding: 0;
  height: 400px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.philosophy-bg,
.experience-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(13,13,13,0.65), rgba(13,13,13,0.65)),
    url('https://images.unsplash.com/photo-1540541338287-41700207dee6?w=1600&q=80') center/cover;
}
.philosophy-content,
.experience-content {
  position: relative;
  text-align: center;
  max-width: 700px;
  padding: 40px;
}
.philosophy-quote,
.experience-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 32px;
  color: var(--cream);
}
.philosophy-attr,
.experience-attr {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
}

/* BOOKING */
.booking-section {
  background: var(--cream);
  color: var(--dark);
  text-align: center;
}
.booking-section .section-eyebrow { color: var(--gold); }
.booking-section .section-title { color: var(--dark); margin: 0 auto 16px; }
.booking-section .section-body { color: rgba(13,13,13,0.6); margin: 0 auto 50px; }
.booking-form {
  display: inline-flex;
  gap: 0;
  border: 1px solid rgba(13,13,13,0.15);
  background: white;
  max-width: 900px;
  width: 100%;
}
.booking-field {
  flex: 1;
  padding: 22px 28px;
  border-right: 1px solid rgba(13,13,13,0.1);
  text-align: left;
}
.booking-field:last-of-type { border-right: none; }
.booking-field label {
  display: block;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.booking-field input, .booking-field select {
  background: none;
  border: none;
  outline: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--dark);
  width: 100%;
}
.booking-field select option { color: var(--dark); }
.booking-submit {
  background: var(--gold);
  color: white;
  border: none;
  padding: 22px 40px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s;
  white-space: nowrap;
}
.booking-submit:hover { background: #a07a40; }
.booking-note {
  margin-top: 20px;
  font-size: 11px;
  color: rgba(13,13,13,0.4);
  letter-spacing: 1px;
}

/* FOOTER */
.site-footer {
  padding: 80px 60px 40px;
  border-top: 1px solid rgba(184,149,90,0.2);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}
.footer-logo { display: block; margin-bottom: 16px; font-size: 20px; }
.footer-tagline {
  font-size: 12px;
  line-height: 1.9;
  opacity: 0.5;
  margin: 0 0 20px;
}
.footer-address {
  font-style: normal;
  font-size: 12px;
  line-height: 2;
  opacity: 0.6;
  margin-bottom: 20px;
}
.footer-address a { color: var(--cream); text-decoration: none; transition: color 0.3s; }
.footer-address a:hover { color: var(--gold); }
.footer-social {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}
.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  transition: background 0.2s, color 0.2s, transform 0.2s;
  text-decoration: none;
  flex-shrink: 0;
}
.footer-social-icon:hover {
  background: var(--gold, #b8955a);
  color: #fff;
  transform: translateY(-2px);
}
.footer-col-title {
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
  font-weight: 500;
}
.footer-nav { list-style: none; padding: 0; margin: 0; }
.footer-nav li { margin-bottom: 12px; }
.footer-nav a {
  color: var(--cream);
  text-decoration: none;
  font-size: 12px;
  opacity: 0.5;
  transition: opacity 0.3s;
  letter-spacing: 1px;
}
.footer-nav a:hover { opacity: 1; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid rgba(184,149,90,0.1);
  font-size: 11px;
  opacity: 0.6;
  letter-spacing: 1px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer-bottom a { color: var(--cream); text-decoration: none; transition: color 0.3s; }
.footer-bottom a:hover { color: var(--gold); }
.footer-book-link {
  border: 1px solid var(--gold);
  color: var(--gold) !important;
  padding: 8px 24px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 2px;
  transition: all 0.3s;
  opacity: 1 !important;
}
.footer-book-link:hover { background: var(--gold); color: var(--dark) !important; }

/* FLOATING BOOK */
.float-book {
  position: fixed;
  bottom: 36px;
  right: 36px;
  z-index: 99;
  background: var(--gold);
  color: var(--dark);
  padding: 16px 30px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(184,149,90,0.4);
  transition: all 0.3s;
  animation: fadeUp 1s ease-out 2s both;
}
.float-book:hover {
  background: var(--gold-light);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(184,149,90,0.5);
}

/* SCROLL REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* GALLERY */
.gallery-filter {
  background: transparent;
  border: 1px solid rgba(184,149,90,0.3);
  color: var(--cream);
  padding: 8px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  opacity: 0.6;
}
.gallery-filter:hover, .gallery-filter.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
  opacity: 1;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: 6px;
}
.g-item {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}
.g-wide { grid-column: span 2; }
.g-tall { grid-row: span 2; }
.g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.4s;
  filter: brightness(0.88);
}
.g-item:hover img {
  transform: scale(1.07);
  filter: brightness(1);
}
.g-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,0.7) 0%, transparent 50%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.4s;
}
.g-item:hover .g-overlay { opacity: 1; }
.g-overlay span {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cream);
}
.g-item.hidden {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   GALLERY PAGE (dedicated page — masonry + filters)
═══════════════════════════════════════════════════════════════════ */

/* Sticky Filter Bar */
.gallery-page-filters {
  position: sticky;
  top: 70px;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 20px 60px;
  background: rgba(10,10,9,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(184,149,90,0.12);
}
.gp-filter {
  background: transparent;
  border: 1px solid rgba(184,149,90,0.3);
  color: var(--cream);
  padding: 8px 22px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 2px;
}
.gp-filter:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.gp-filter.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark);
}

/* Masonry Grid (CSS columns) */
.gallery-page-grid {
  columns: 3;
  column-gap: 6px;
  padding: 20px 60px 80px;
}
.gp-item {
  break-inside: avoid;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.gp-item img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.88);
  transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.4s;
}
.gp-item:hover img {
  transform: scale(1.07);
  filter: brightness(1);
}

/* Per-device aspect ratio via CSS custom properties */
@media (min-width: 1025px) {
  .gp-item[style*="--ratio-desktop"] { aspect-ratio: var(--ratio-desktop); }
  .gp-item[style*="--ratio-desktop"] img { height: 100%; object-fit: cover; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  .gp-item[style*="--ratio-tablet"] { aspect-ratio: var(--ratio-tablet); }
  .gp-item[style*="--ratio-tablet"] img { height: 100%; object-fit: cover; }
}
@media (max-width: 600px) {
  .gp-item[style*="--ratio-mobile"] { aspect-ratio: var(--ratio-mobile); }
  .gp-item[style*="--ratio-mobile"] img { height: 100%; object-fit: cover; }
}

/* Hover Overlay */
.gp-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,13,13,0.75) 0%, transparent 50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.4s;
}
.gp-item:hover .gp-overlay { opacity: 1; }
.gp-overlay__name {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream);
  margin-bottom: 4px;
}
.gp-overlay__cat {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
}

/* Filter animation states */
.gp-item.gp-hiding {
  opacity: 0;
  transform: scale(0.95);
}
.gp-item.gp-hidden {
  display: none;
}

/* Lightbox nav arrows */
#lbPrev:hover, #lbNext:hover { opacity: 1; }

/* ── Gallery Page Responsive ── */
@media (max-width: 1024px) {
  .gallery-page-grid { columns: 2; padding: 16px 24px 60px; }
  .gallery-page-filters { padding: 16px 24px; top: 56px; }
}
@media (max-width: 600px) {
  .gallery-page-grid { columns: 1; padding: 12px 16px 40px; }
  .gallery-page-filters { padding: 12px 16px; top: 50px; gap: 6px; }
  .gp-filter { padding: 6px 14px; font-size: 8px; letter-spacing: 2px; }
  /* Overlay always visible on mobile */
  .gp-overlay { opacity: 1; }
  .gp-overlay__name { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════════════════════ */

.contact-page {
  padding: 80px 60px;
  background: var(--deep, #111410);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
.contact-intro {
  font-size: 14px;
  line-height: 1.9;
  opacity: 0.7;
  margin-bottom: 36px;
  max-width: 480px;
}
.contact-details {
  margin-bottom: 36px;
}
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
.contact-icon {
  flex-shrink: 0;
  color: var(--gold);
  margin-top: 2px;
}
.contact-label {
  display: block;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.contact-value {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.8;
}
.contact-link {
  color: var(--cream);
  text-decoration: none;
  transition: color 0.3s;
}
.contact-link:hover { color: var(--gold); opacity: 1; }

.contact-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
}
.contact-hours {
  margin-bottom: 32px;
}
.contact-hours-text {
  font-size: 13px;
  line-height: 1.8;
  opacity: 0.7;
}
.contact-social {
  margin-bottom: 32px;
}
.contact-social-icons {
  display: flex;
  gap: 14px;
}
.contact-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(184,149,90,0.25);
  border-radius: 50%;
  color: var(--cream);
  text-decoration: none;
  transition: all 0.3s;
}
.contact-social-icon:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(184,149,90,0.08);
}
.contact-note {
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.5;
  font-style: italic;
}

/* Map */
.contact-map-col { position: sticky; top: 100px; }
.contact-map {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(184,149,90,0.12);
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(0.3) brightness(0.85);
  transition: filter 0.4s;
}
.contact-map:hover iframe { filter: grayscale(0) brightness(1); }
.contact-map--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(184,149,90,0.04);
}
.contact-map-placeholder {
  text-align: center;
  color: var(--cream);
  opacity: 0.4;
}
.contact-map-placeholder p {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── Contact Page Responsive ── */
@media (max-width: 860px) {
  .contact-page { padding: 60px 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-map-col { position: static; }
  .contact-map { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .contact-page { padding: 40px 16px; }
  .contact-social-icon { width: 36px; height: 36px; }
}

@media (max-width: 1024px) {
  #navbar { padding: 20px 24px; }
  #navbar.scrolled { padding: 14px 24px; }
  .nav-links { gap: 20px; }
  .nav-links a, .nav-links > li > a { font-size: 8px; letter-spacing: 2px; }
}

@media (max-width: 860px) {
  #navbar .nav-links { display: none !important; }
  .nav-book { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-menu .mobile-nav .nav-links,
  .mobile-menu .mobile-nav-links { display: block !important; }
  .float-book { display: none; }
  .hero-scroll { display: none; }
  section { padding: 80px 24px; }
  #gallery { padding: 60px 0 !important; }
  #gallery > .reveal:first-child { padding: 0 24px; margin-bottom: 30px; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; gap: 2px; }
  .gallery-grid .g-item { aspect-ratio: 1 / 1; }
  .gallery-grid .g-item img { width: 100%; height: 100%; object-fit: cover; }
  .g-wide { grid-column: span 1; }
  .g-tall { grid-row: span 1; }
  .g-overlay { display: none; }
  .intro-strip { padding: 50px 24px; grid-template-columns: 1fr 1fr 1fr; }
  .intro-divider { display: none; }
  .about { grid-template-columns: 1fr; gap: 50px; }
  .about-tag { display: none; }
  .about-text { text-align: center; }
  .about-text .section-body { margin-left: auto; margin-right: auto; }
  .about-text .btn-secondary { margin-left: auto; margin-right: auto; }
  .villas-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .villas-header-actions { flex-direction: column; align-items: flex-start; gap: 8px; }
  .exp-cards-grid { grid-template-columns: 1fr 1fr; }
  .amenities-grid { grid-template-columns: 1fr 1fr; }
  .booking-form { flex-direction: column; }
  .booking-field { border-right: none; border-bottom: 1px solid rgba(13,13,13,0.1); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .villas-header { flex-direction: column; align-items: flex-start; gap: 20px; }
  .page-content-section { padding: 60px 24px; }

  /* ─── Hero (mobile ≤860px) — v1.0.7 single-villa hero fix ─── */
  /* Override generic `section { padding: 80px 24px }` — hero needs nav clearance */
  .hero {
    padding: var(--nav-height, 80px) 24px 40px;
    height: auto;
    min-height: 100vh;
  }
  .hero-eyebrow {
    margin-top: 0;        /* nav-padding handles clearance now */
  }
}

@media (max-width: 560px) {
  .intro-strip { grid-template-columns: 1fr; gap: 0; padding: 40px 20px; }
  .intro-item { padding: 16px 20px; }
  .intro-item .num { font-size: 38px; }
  .villas-grid { grid-template-columns: 1fr; }
  .exp-cards-grid { grid-template-columns: 1fr; }
  .amenities-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .page-hero__content { padding: 100px 20px 40px; }

  /* ─── Hero typography + CTAs (mobile ≤560px) — v1.0.7 ─── */
  .hero-eyebrow {
    font-size: 9px;
    letter-spacing: 4px;
    margin-bottom: 14px;
  }
  .hero-title {
    font-size: clamp(40px, 10vw, 60px);  /* was clamp(56px, 8vw, 110px) */
    line-height: 1.05;
    letter-spacing: 1px;
  }
  .hero-subtitle {
    font-size: 12px;
    letter-spacing: 3px;
    margin-bottom: 24px;
  }
  .hero-cta {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  .hero-cta .btn-primary,
  .hero-cta .btn-secondary,
  .hero-cta a {
    padding: 12px 16px;
    font-size: 10px;
    letter-spacing: 1.5px;
    white-space: nowrap;     /* "BOOK ON AIRBNB" → 1 line */
    flex: 0 1 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SINGLE VILLA PAGE
═══════════════════════════════════════════════════════════════════ */

/* ── Two-column layout ── */
.sv-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 40px 80px;
  align-items: start;
}

/* ── Left: content column ── */
.sv-content {
  min-width: 0;
}

/* ── Breadcrumb ── */
.sv-breadcrumb {
  position: static;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted, #888880);
  margin-bottom: 20px;
  background: none;
  padding: 0;
  width: auto;
}
.sv-breadcrumb a {
  color: var(--text-muted, #888880);
  text-decoration: none;
  transition: color 0.2s;
}
.sv-breadcrumb a:hover { color: var(--gold, #b8955a); }
.sv-breadcrumb span { color: var(--text-muted, #888880); }

/* ── Title ── */
.sv-h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 300;
  line-height: 1.1;
  color: var(--cream, #f5f0e8);
  margin: 0 0 16px;
}

/* ── Specs line ── */
.sv-specs-line {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, #888880);
  margin: 0 0 28px;
}

/* ── Divider ── */
.sv-rule {
  border: none;
  border-top: 1px solid rgba(184, 149, 90, 0.2);
  margin: 0 0 32px;
}

/* ── Description ── */
.sv-desc {
  font-size: 14px;
  line-height: 1.85;
  color: rgba(245, 240, 232, 0.72);
  margin-bottom: 44px;
}
.sv-desc p { margin: 0 0 1em; }

/* ── Highlights / Amenities ── */
.sv-highlights {
  margin-bottom: 48px;
}
.sv-highlights-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 300;
  color: var(--cream, #f5f0e8);
  margin: 0 0 24px;
}
.sv-highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sv-highlight-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(245, 240, 232, 0.8);
}
.sv-highlight-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--gold, #b8955a);
}
.sv-highlight-icon svg {
  width: 16px;
  height: 16px;
}

/* ── Inline gallery ── */
.sv-gallery-section {
  margin-bottom: 16px;
}
.sv-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.sv-gallery-grid .g-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  cursor: pointer;
}
.sv-gallery-grid .g-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.sv-gallery-grid .g-item:hover img { transform: scale(1.05); }
.sv-gallery-grid .g-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: flex-end;
  padding: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}
.sv-gallery-grid .g-item:hover .g-overlay { opacity: 1; }
.sv-gallery-grid .g-overlay span {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream, #f5f0e8);
}

/* ── Right: sticky sidebar ── */
.sv-sidebar {
  position: sticky;
  top: 90px;
  align-self: start;
}

/* ── Booking card ── */
.sv-booking-card {
  background: var(--deep, #111410);
  border: 1px solid rgba(184, 149, 90, 0.2);
  padding: 32px 28px;
}
.sv-booking-eyebrow {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold, #b8955a);
  margin: 0 0 16px;
}
.sv-booking-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 4px;
}
.sv-bprice-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 40px;
  font-weight: 300;
  color: var(--cream, #f5f0e8);
  line-height: 1;
}
.sv-bprice-per {
  font-size: 12px;
  color: var(--text-muted, #888880);
  letter-spacing: 0.04em;
}
.sv-bprice-usd {
  font-size: 11px;
  color: var(--text-muted, #888880);
  opacity: 0.6;
  margin: 0 0 16px;
}
.sv-booking-rule {
  border: none;
  border-top: 1px solid rgba(184, 149, 90, 0.15);
  margin: 20px 0;
}

/* ── Book Direct button ── */
.sv-book-btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  background: var(--gold, #b8955a);
  color: var(--dark, #0d0d0d);
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
  margin-bottom: 14px;
}
.sv-book-btn:hover {
  background: var(--cream, #f5f0e8);
  color: var(--dark, #0d0d0d);
}

/* ── Alt platform links ── */
.sv-alt-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.sv-alt-links > span {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #888880);
}
.sv-alt-links a {
  font-size: 11px;
  font-weight: 500;
  color: rgba(245, 240, 232, 0.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 149, 90, 0.3);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.sv-alt-links a:hover {
  color: var(--gold, #b8955a);
  border-color: var(--gold, #b8955a);
}

/* ── Booking fine print ── */
.sv-booking-note {
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text-muted, #888880);
  margin: 0;
}

.sv-enquire-link {
  display: block;
  margin-top: 18px;
  padding: 11px 0;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold, #b8955a);
  text-decoration: none;
  text-align: center;
  border: 1px solid var(--gold, #b8955a);
  transition: background 0.2s, color 0.2s;
}
.sv-enquire-link:hover {
  background: var(--gold, #b8955a);
  color: var(--dark, #0d0d0d);
}

/* ── Sidebar specs list ── */
.sv-sidebar-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sv-sidebar-specs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(184, 149, 90, 0.1);
  font-size: 12px;
}
.sv-sidebar-specs li:last-child { border-bottom: none; }
.sv-sidebar-specs li span:first-child {
  color: var(--text-muted, #888880);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10px;
}
.sv-sidebar-specs li span:last-child {
  color: var(--cream, #f5f0e8);
  font-weight: 500;
}

/* ── Sidebar specs — icons + sub-detail (v1.0.10) ───────────────── */

/* Icon-led label spans */
.sv-sidebar-specs--icons li span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sv-sidebar-specs--icons li span:first-child svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--gold, #b8955a);
  display: block;
}

/* Row directly above a sub-detail row — drop bottom border (visual grouping) */
.sv-sidebar-specs li:has(+ .sv-sidebar-specs__detail) {
  border-bottom: 0;
  padding-bottom: 4px;
}

/* Sub-detail row (e.g. "1 × King bed" under Bedrooms) */
.sv-sidebar-specs li.sv-sidebar-specs__detail {
  padding-top: 0;
  padding-bottom: 10px;
  border-top: 0;
  margin-top: -4px;
  justify-content: flex-start;
}
.sv-sidebar-specs li.sv-sidebar-specs__detail span:first-child {
  /* hide empty placeholder span (kept for HTML symmetry) */
  display: none;
}
.sv-sidebar-specs li.sv-sidebar-specs__detail span:last-child {
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
  color: rgba(212, 197, 160, 0.65);  /* dim gold-cream tint */
  text-transform: none;
  margin-left: 24px;  /* align under label text (icon 14px + gap 10px) */
}

/* ── Lightbox ── */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.3s;
}
#lightboxImg {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.8);
}
#lightboxCaption {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--gold, #b8955a);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.sv-lb-close {
  position: absolute;
  top: 28px;
  right: 36px;
  background: none;
  border: none;
  color: white;
  font-size: 36px;
  cursor: pointer;
  opacity: 0.5;
  line-height: 1;
  transition: opacity 0.2s;
}
.sv-lb-close:hover { opacity: 1; }

/* ── Other Villas ── */
.sv-others {
  background: var(--dark, #0d0d0d);
  padding: 90px 60px;
  border-top: 1px solid rgba(184, 149, 90, 0.1);
}
.sv-others-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .sv-layout {
    grid-template-columns: 1fr 300px;
    gap: 40px;
    padding: 48px 28px 72px;
  }
}

@media (max-width: 800px) {
  .sv-layout {
    grid-template-columns: 1fr;
    padding: 36px 20px 60px;
  }
  .sv-sidebar {
    position: static;
    top: auto;
  }
  .sv-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sv-highlights-grid {
    grid-template-columns: 1fr;
  }
  .sv-others {
    padding: 60px 20px;
  }
}

@media (max-width: 480px) {
  .sv-gallery-grid {
    grid-template-columns: 1fr;
  }
  .sv-bprice-num { font-size: 34px; }
}

/* ═══════════════════════════════════════════════════════════════════
   VILLAS PAGE
═══════════════════════════════════════════════════════════════════ */

/* Grid column variants */
.villas-grid--3col { grid-template-columns: repeat(3, 1fr); }
.villas-grid--2col { grid-template-columns: repeat(2, 1fr); }

/* Intro header */
.villas-page-intro {
  padding: 80px 60px 60px;
  background: var(--deep, #111410);
  text-align: center;
}
.villas-page-intro-inner {
  max-width: 680px;
  margin: 0 auto;
}

/* Filter bar */
.villas-filter-bar {
  background: var(--dark, #0d0d0d);
  padding: 20px 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(184, 149, 90, 0.15);
}

/* Grid section */
.villas-page-grid-section {
  padding: var(--section-pad, 80px) 60px;
  background: var(--deep, #111410);
}
.villas-page-grid-inner {
  max-width: 1400px;
  margin: 0 auto;
}
.villas-empty {
  text-align: center;
  color: var(--text-muted, #888880);
  padding: 60px 0;
  font-size: 13px;
  letter-spacing: 0.05em;
}

@media (max-width: 900px) {
  .villas-grid--3col { grid-template-columns: repeat(2, 1fr); }
  .villas-grid--2col { grid-template-columns: 1fr; }
  .villas-page-intro { padding: 60px 24px 40px; }
  .villas-filter-bar { padding: 16px 24px; }
  .villas-page-grid-section { padding: 60px 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   VILLA CARD
═══════════════════════════════════════════════════════════════════ */

.villa-card {
  background: var(--dark);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.villa-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.villa-img-wrap {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  position: relative;
}

.villa-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.villa-card:hover .villa-img-wrap img {
  transform: scale(1.05);
}

/* Semi-transparent gradient overlay sits above the image */
.villa-card .villa-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 13, 13, 0.85) 0%,
    rgba(13, 13, 13, 0.2)  50%,
    transparent            100%
  );
  pointer-events: none;
}

.villa-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  color: var(--cream);
}

.villa-name {
  font-family: var(--font-heading, 'Cormorant Garamond'), serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--cream);
}

.villa-detail {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 4px;
  line-height: 1.5;
}

.villa-price {
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-top: 8px;
}

/* Footer strip beneath the image */
.villa-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(13, 13, 13, 0.9);
  border-top: 1px solid rgba(184, 149, 90, 0.2);
  flex-shrink: 0;
}

.villa-specs {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.btn-villa-book {
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 8px 20px;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-villa-book:hover {
  background: var(--gold);
  color: var(--dark);
}

/* Responsive */
@media (max-width: 600px) {
  .villas-grid { grid-template-columns: 1fr; }
  .villa-card-footer {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .villa-name { font-size: 18px; }
}