@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ==========================================================================
   EMUNA GUEST HOUSE & RESIDENCES - KAMPALA, UGANDA
   Hospitality, Luxury Serviced Apartments, Dining & Rooftop Lounge
   ========================================================================== */

:root {
  --primary: #28b16d;
  --primary-hover: #21965a;
  --primary-light: #e9f7f0;
  --primary-border: #a7e3c5;
  --whatsapp: #25d366;
  --whatsapp-hover: #20ba59;
  --secondary: #006169;
  --secondary-dark: #0a2e40;
  --accent: #eb5322;
  --accent-light: #fef0eb;
  --dark: #1b2a32;
  --text-main: #222222;
  --text-muted: #6b7280;
  --text-light: #9ca3af;
  --bg-page: #f8fafc;
  --bg-card: #ffffff;
  --border-light: #e5e7eb;
  --border-subtle: #f1f5f9;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 35px -5px rgba(10, 46, 64, 0.15);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  color: var(--text-main);
  background-color: var(--bg-page);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

button, input, select {
  font: inherit;
}

/* Container */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================================================
   TOP BAR & HEADER
   ========================================================================== */
.top-bar {
  background: var(--secondary-dark);
  color: #d1d5db;
  font-size: 0.8125rem;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-left, .top-bar-right {
  display: flex;
  align-items: center;
  gap: 18px;
}

.top-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--transition);
}

.top-link:hover {
  color: #ffffff;
}

.header {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-img {
  height: 44px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  list-style: none;
}

.nav-link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  position: relative;
  padding: 8px 0;
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

.nav-link:hover, .nav-link.active {
  color: var(--primary);
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.badge-tag {
  background: var(--primary-light);
  color: var(--primary);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-primary {
  background: var(--primary);
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(40, 177, 109, 0.32);
}

.btn-whatsapp-header {
  background: var(--whatsapp);
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
  transition: var(--transition);
}

.btn-whatsapp-header:hover {
  background: var(--whatsapp-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

/* ==========================================================================
   HERO SECTION (HOSPITALITY & GUEST HOUSE)
   ========================================================================== */
.hero {
  position: relative;
  min-height: 580px;
  background-image: linear-gradient(to bottom, rgba(10, 46, 64, 0.76), rgba(10, 46, 64, 0.92)),
                    url('https://images.unsplash.com/photo-1577495508048-b635879837f1?auto=format&fit=crop&w=1600&q=75');
  background-size: cover;
  background-position: center 35%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 0 90px;
}

.hero-content {
  text-align: center;
  color: #ffffff;
  max-width: 980px;
}

.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(40, 177, 109, 0.2);
  border: 1px solid rgba(52, 211, 153, 0.4);
  padding: 6px 16px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  color: #4ade80;
  margin-bottom: 24px;
  backdrop-filter: blur(6px);
  letter-spacing: 0.5px;
}

.hero-title {
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 20px;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
}

/* Animated Dynamic Changing Text */
.dynamic-highlight {
  display: inline-block;
  color: #34d399;
  position: relative;
  border-bottom: 3px solid rgba(52, 211, 153, 0.5);
  padding-bottom: 2px;
  min-height: 1.25em;
  text-shadow: 0 0 20px rgba(52, 211, 153, 0.4);
}

.dynamic-text {
  transition: opacity 0.2s ease;
}

.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.9em;
  background-color: #34d399;
  margin-left: 4px;
  vertical-align: middle;
  animation: cursorBlink 0.8s infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero-subtitle {
  font-size: 1.2rem;
  color: #e2e8f0;
  margin: 0 auto 38px;
  max-width: 760px;
  line-height: 1.6;
  font-weight: 400;
}

/* Hero Action CTAs */
.hero-cta-group {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.btn-hero-whatsapp {
  background: var(--whatsapp);
  color: #ffffff;
  border: none;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
  transition: var(--transition);
}

.btn-hero-whatsapp:hover {
  background: var(--whatsapp-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5);
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(4px);
  transition: var(--transition);
}

.btn-hero-secondary:hover {
  background: #ffffff;
  color: var(--secondary-dark);
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* Hero Showcase Bar */
.hero-quick-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 16px;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.showcase-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.06);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}

.showcase-item:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: #34d399;
  transform: translateY(-2px);
}

.showcase-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.15rem;
  flex-shrink: 0;
}

.showcase-text-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
}

.showcase-text-desc {
  font-size: 0.75rem;
  color: #cbd5e1;
}

/* ==========================================================================
   TRUST & HOSPITALITY HIGHLIGHTS
   ========================================================================== */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.trust-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trust-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--dark);
}

.trust-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* ==========================================================================
   GUEST SUITES SECTION & CARDS
   ========================================================================== */
.section {
  padding: 68px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 28px;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--dark);
  letter-spacing: -0.5px;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-top: 4px;
}

/* Filter bar */
.category-filter-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 28px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.category-tab-btn {
  padding: 10px 20px;
  border: 1px solid var(--border-light);
  background: #ffffff;
  color: var(--text-main);
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.category-tab-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.category-tab-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(40, 177, 109, 0.28);
}

/* Properties / Suites Grid (COMPACT & SLEEK) */
.properties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}

.property-card {
  background: #ffffff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
}

.property-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-border);
}

.card-img-wrapper {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: #e2e8f0;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

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

.card-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.badge-verified {
  background: #ffffff;
  color: var(--primary);
  font-size: 0.65rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  box-shadow: var(--shadow-sm);
}

.badge-feature {
  background: var(--secondary-dark);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.btn-favorite {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  color: var(--text-muted);
  transition: var(--transition);
}

.btn-favorite:hover, .btn-favorite.active {
  background: #ffffff;
  color: #ef4444;
  transform: scale(1.1);
}

.card-body {
  padding: 13px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 6px;
  margin-bottom: 2px;
}

.property-price {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  white-space: nowrap;
}

.property-price span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.cheques-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--secondary);
  background: #e0f2fe;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.property-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 3px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-location {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: 0.74rem;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-specs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
}

.spec-item svg {
  width: 13px;
  height: 13px;
}

.facility-chip {
  background: #f1f5f9;
  color: #334155;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 5px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 8px;
  gap: 6px;
  flex-wrap: nowrap;
}

.agent-info {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.agent-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-agency {
  font-size: 0.62rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.action-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-light);
  background: #ffffff;
  color: var(--text-main);
  cursor: pointer;
  transition: var(--transition);
}

.action-icon-btn.call:hover {
  background: var(--bg-page);
  border-color: var(--primary);
  color: var(--primary);
}

.btn-whatsapp-book {
  background: var(--whatsapp);
  color: #ffffff;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  font-size: 0.74rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(37, 211, 102, 0.25);
}

.btn-whatsapp-book svg {
  width: 14px;
  height: 14px;
}

.btn-whatsapp-book:hover {
  background: var(--whatsapp-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.4);
}

/* ==========================================================================
   ON-SITE AMENITIES SHOWCASE (RESTAURANT, ROOFTOP BAR, SHOPS)
   ========================================================================== */
.amenities-section {
  background: #ffffff;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.amenity-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.amenity-feature-card {
  background: var(--bg-page);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.amenity-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.amenity-img-box {
  position: relative;
  height: 220px;
}

.amenity-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.amenity-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(10, 46, 64, 0.9);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

.amenity-card-content .btn-whatsapp-book {
  white-space: normal;
  text-align: center;
  line-height: 1.35;
  padding: 9px 12px;
}

.amenity-card-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.amenity-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 8px;
}

.amenity-card-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 18px;
  flex-grow: 1;
}

.amenity-perks-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.8125rem;
  color: var(--dark);
  font-weight: 600;
}

.amenity-perks-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.amenity-perks-list svg {
  color: var(--primary);
  flex-shrink: 0;
}

/* ==========================================================================
   OCCASIONS SECTION
   ========================================================================== */
.occasions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.occasion-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  transition: var(--transition);
}

.occasion-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.occasion-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
}

.occasion-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}

.occasion-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* ==========================================================================
   FACILITIES & COMFORT SECTION (FIXED & POLISHED)
   ========================================================================== */
.facilities-section {
  background: #ffffff;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.facilities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.facility-card {
  background: var(--bg-page);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.facility-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-border);
}

.facility-img-wrap {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: var(--secondary-dark);
}

.facility-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.facility-card:hover .facility-img-wrap img {
  transform: scale(1.08);
}

.facility-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(10, 46, 64, 0.88);
  color: #4ade80;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.facility-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.facility-icon-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.facility-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.facility-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}

.facility-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Backward compatibility for area classes */
.areas-section {
  background: #ffffff;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.area-card {
  position: relative;
  height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.area-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.area-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.area-card:hover .area-img {
  transform: scale(1.08);
}

.area-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 46, 64, 0.92) 0%, rgba(10, 46, 64, 0.25) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  color: #ffffff;
}

.area-name {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 4px;
}

.area-stats {
  font-size: 0.8125rem;
  color: #cbd5e1;
  display: flex;
  justify-content: space-between;
}

.area-tag {
  color: #4ade80;
  font-weight: 700;
}

/* ==========================================================================
   WHATSAPP BOOKING BANNER
   ========================================================================== */
.whatsapp-cta-banner {
  background: linear-gradient(135deg, #075e54 0%, #128c7e 100%);
  border-radius: var(--radius-lg);
  padding: 48px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-shadow: 0 10px 30px rgba(7, 94, 84, 0.3);
}

.whatsapp-cta-content h3 {
  font-size: 1.85rem;
  font-weight: 800;
  margin-bottom: 10px;
}

.whatsapp-cta-content p {
  color: #e2f7f1;
  font-size: 1rem;
  max-width: 620px;
  line-height: 1.55;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: #0f172a;
  color: #94a3b8;
  padding: 64px 0 28px;
  font-size: 0.875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-col h4 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a:hover {
  color: #ffffff;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8125rem;
}
.footer-legal { display: flex; align-items: center; gap: 10px; color: #64748b; }
.footer-legal a { color: #94a3b8; text-decoration: none; }
.footer-legal a:hover { color: #ffffff; text-decoration: underline; }

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1024px) {
  .hero-quick-showcase {
    grid-template-columns: repeat(2, 1fr);
  }
  .facilities-grid, .areas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .amenity-card-grid {
    grid-template-columns: 1fr;
  }
  .occasions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1100px) {
  .logo-link {
    flex-shrink: 0;
  }
  .logo-img {
    height: 36px;
  }
  .nav-links {
    gap: 14px;
  }
  .nav-link {
    font-size: 0.85rem;
  }
  .header-actions {
    gap: 8px;
  }
  .header .btn-whatsapp-header {
    display: none;
  }
}

@media (max-width: 880px) {
  .nav-links, .top-bar {
    display: none;
  }
  .mobile-menu-btn {
    display: block;
    padding: 6px;
  }
  .logo-img {
    height: 30px;
  }
  .header-actions {
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.2rem;
  }
  .hero-quick-showcase {
    grid-template-columns: 1fr;
  }
  .facilities-grid, .areas-grid {
    grid-template-columns: 1fr;
  }
  .properties-grid {
    grid-template-columns: 1fr;
  }
  .occasions-grid {
    grid-template-columns: 1fr;
  }
  .trust-grid {
    grid-template-columns: 1fr;
  }
  .whatsapp-cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 32px 20px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* ==========================================================================
   DYNAMIC SITE ADDITIONS (API-driven content)
   ========================================================================== */
.status-pill { font-size: 0.62rem; font-weight: 800; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; display:inline-flex; }
.status-pill.badge-available { background: #dcfce7; color: #166534; }
.status-pill.badge-occupied { background: #dbeafe; color: #1e40af; }
.status-pill.badge-maintenance { background: #fef3c7; color: #92400e; }
.status-pill.badge-unavailable { background: #e5e7eb; color: #4b5563; }
.card-desc { font-size: 0.78rem; color: #475569; margin-bottom: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.venue-occupied-note { margin-top: auto; padding: 8px 10px; font-size: 0.75rem; line-height: 1.45; color: #475569; background: #f8fafc; border: 1px dashed var(--border-light); border-radius: 8px; }
.btn-detail { background: var(--secondary-dark); color: #fff; padding: 6px 10px; border-radius: var(--radius-sm); font-size: 0.74rem; font-weight: 800; flex: 1; text-align: center; border: none; cursor: pointer; }
.btn-detail:hover { background: var(--secondary); }
.property-title a { color: inherit; }

/* Page hero for interior pages */
.page-hero { background: linear-gradient(135deg, #0a2e40, #006169); color: #fff; padding: 54px 0; }
.page-hero h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: 8px; }
.page-hero p { color: #cbd5e1; max-width: 720px; }

/* Detail page */
.detail-layout { display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; align-items: start; }
.detail-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 20px; }
.detail-gallery img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid var(--border-light); }
.detail-gallery img.main { grid-column: 1 / -1; height: 380px; }
.detail-side { position: sticky; top: 90px; }
.contact-cta-stack { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.btn-call-now { background: var(--secondary-dark); color: #fff; padding: 14px; border-radius: var(--radius-sm); font-weight: 800; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-call-now:hover { background: var(--secondary); }
.btn-wa-big { background: var(--whatsapp); color: #fff; padding: 14px; border-radius: var(--radius-sm); font-weight: 800; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-wa-big:hover { background: var(--whatsapp-hover); }
.detail-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.detail-list li { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px; font-size: 0.82rem; font-weight: 600; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin: 18px 0; }
.spec-box { background: var(--bg-page); border: 1px solid var(--border-light); border-radius: 10px; padding: 12px; text-align: center; }
.spec-box .v { font-weight: 800; font-size: 1.05rem; }
.spec-box .l { font-size: 0.72rem; color: var(--text-muted); }
.section-title-center { text-align: center; }

/* Filter bar for listing */
.filter-panel { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 24px; box-shadow: var(--shadow-sm); }
.filter-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.filter-row label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; display: block; margin-bottom: 4px; }
.filter-row input, .filter-row select { width: 100%; padding: 9px 10px; border: 1px solid var(--border-light); border-radius: 8px; font: inherit; }
.empty-state { grid-column: 1/-1; text-align: center; padding: 50px 20px; background: #fff; border-radius: 12px; border: 1px dashed #cbd5e1; }

/* Gallery page */
.gallery-masonry { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-masonry figure { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--border-light); }
.gallery-masonry img { width: 100%; height: 200px; object-fit: cover; transition: transform .4s; }
.gallery-masonry figure:hover img { transform: scale(1.06); }
.gallery-masonry figcaption { position: absolute; inset: auto 0 0 0; background: linear-gradient(transparent, rgba(10,46,64,.85)); color: #fff; padding: 20px 12px 10px; font-size: 0.82rem; font-weight: 600; }

/* Testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.testimonial-card { background: #fff; border: 1px solid var(--border-light); border-radius: 12px; padding: 22px; box-shadow: var(--shadow-sm); }
.testimonial-card .stars { color: #f59e0b; margin-bottom: 8px; }
.testimonial-card .who { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.testimonial-card .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 800; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-card { background: #fff; border: 1px solid var(--border-light); border-radius: 12px; padding: 20px; }
.contact-card .row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.field label { display: block; font-size: 0.74rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border-light); border-radius: 9px;
  font: inherit; font-size: 0.95rem; color: var(--text); background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(40, 177, 109, 0.14);
}
.field textarea { min-height: 130px; resize: vertical; }
.map-embed { border: 0; width: 100%; height: 320px; border-radius: 12px; }

/* Menu — traditional printed menu sheet */
.menu-showcase { margin-top: 40px; }
.menu-sheet {
  position: relative;
  background-color: #fffdf6;
  background-image: radial-gradient(ellipse at top, rgba(198, 169, 105, 0.10), transparent 55%);
  border: 1px solid #e5d9bf;
  border-radius: 6px;
  box-shadow: 0 30px 60px -34px rgba(10, 46, 64, 0.45);
  padding: 58px 54px 40px;
}
.menu-sheet::before {
  content: '';
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(170, 140, 80, 0.35);
  border-radius: 3px;
  pointer-events: none;
}
.menu-sheet-head { position: relative; text-align: center; margin-bottom: 38px; }
.menu-eyebrow { display: block; font-size: 0.68rem; letter-spacing: 0.42em; text-transform: uppercase; color: #a08346; font-weight: 700; margin-bottom: 10px; }
.menu-sheet-title { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 600; line-height: 1.02; color: var(--secondary-dark); }
.menu-sheet-sub { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.2rem; color: #7a684a; margin-top: 6px; }
.menu-rule { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 20px auto 0; max-width: 340px; color: #c2a15f; font-size: 0.85rem; }
.menu-rule::before, .menu-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #c2a15f); }
.menu-rule::after { transform: scaleX(-1); }
.menu-courses { column-count: 2; column-gap: 64px; }
.menu-course { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 34px; }
.menu-course-title { display: flex; align-items: center; gap: 14px; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--secondary-dark); letter-spacing: 0.02em; margin-bottom: 6px; }
.menu-course-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(170, 140, 80, 0.55), transparent); }
.menu-course-note { font-size: 0.8rem; font-style: italic; color: #8d7a58; margin: -2px 0 12px; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-dish { padding: 9px 0; }
.menu-dish-line { display: flex; align-items: baseline; gap: 8px; }
.menu-dish-name { font-weight: 600; font-size: 0.97rem; color: #25333c; }
.menu-dish-dots { flex: 1 1 20px; min-width: 18px; border-bottom: 1.5px dotted rgba(160, 131, 70, 0.55); transform: translateY(-4px); }
.menu-dish-price { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.15rem; font-weight: 700; color: var(--secondary-dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-dish-desc { margin-top: 1px; font-size: 0.8rem; font-style: italic; color: #8d7a58; line-height: 1.45; }
.menu-sheet-foot { margin-top: 8px; padding-top: 22px; border-top: 1px solid rgba(170, 140, 80, 0.28); text-align: center; font-size: 0.78rem; letter-spacing: 0.04em; color: #8d7a58; }
.menu-empty { padding: 26px 0; text-align: center; font-style: italic; color: #8d7a58; }

@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-side { position: static; }
  .detail-gallery img.main { height: 250px; }
  .spec-grid { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MOBILE POLISH (phones and small tablets)
   ========================================================================== */
@media (max-width: 760px) {
  .menu-sheet { padding: 34px 20px 26px; box-shadow: 0 18px 40px -28px rgba(10, 46, 64, 0.4); }
  .menu-sheet::before { inset: 7px; }
  .menu-sheet-head { margin-bottom: 26px; }
  .menu-rule { margin-top: 14px; }
  .menu-courses { column-count: 1; }
  .menu-course { margin-bottom: 28px; }
  .menu-course-title { font-size: 1.35rem; }
  .menu-dish { padding: 8px 0; }
  .menu-dish-name { font-size: 0.93rem; }
  .menu-dish-price { font-size: 1.05rem; }
}

@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .section { padding: 44px 0; }
  .section-title { font-size: 1.45rem; }
  .section-subtitle { font-size: 0.88rem; }
  .page-hero { padding: 38px 0; }
  .page-hero h1 { font-size: 1.7rem; }
  .page-hero p { font-size: 0.92rem; }
  .category-filter-bar { gap: 6px; margin-bottom: 20px; }
  .category-tab-btn { padding: 8px 14px; font-size: 0.82rem; }
  .contact-card { padding: 16px; }
  .contact-cta-stack { max-width: none !important; }
  .contact-cta-stack .btn-call-now,
  .contact-cta-stack .btn-wa-big { width: 100%; padding: 13px; font-size: 0.92rem; }
  .gallery-masonry { grid-template-columns: 1fr; gap: 10px; }
  .gallery-masonry img { height: 200px; }
  .header-actions .btn-whatsapp-header { padding: 9px 12px; font-size: 0.82rem; gap: 6px; }
  .logo-img { height: 26px; }
}

@media (max-width: 380px) {
  .menu-sheet { padding: 28px 15px 22px; }
  .menu-sheet-title { font-size: 2rem; }
  .menu-dish-line { gap: 6px; }
  .menu-dish-dots { min-width: 10px; }
}

/* Restaurant hero uses a per-venue photo set from JavaScript */
#restHero { background-size: cover; background-position: center; background-repeat: no-repeat; }
#restGallery { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 600px) {
  #restGallery { grid-template-columns: 1fr; }
}

/* Three-up mission/vision row keeps its shape on tablets, stacks on phones */
.trust-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
  .trust-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .trust-grid--3 { grid-template-columns: 1fr; }
}

/* Very narrow phones (folded devices, ~280px) */
@media (max-width: 400px) {
  .testimonial-grid { grid-template-columns: 1fr; }
  .menu-eyebrow { letter-spacing: 0.26em; font-size: 0.62rem; }
}
@media (max-width: 340px) {
  .logo-img { height: 22px; }
  .header-inner { gap: 6px; }
}
@media (max-width: 340px) {
  .mobile-menu-btn { padding: 4px; }
}

/* ==========================================================================
   BRIGHT THEME — "Emuna by Day"
   A light, airy layer over the existing layout: white surfaces, Emuna teal,
   warm gold reserved for accents, generous radii and soft shadows. The hero
   photo is sharp instead of blurred. Structure and CMS hooks are untouched.
   ========================================================================== */

:root {
  --primary: #006169;
  --primary-hover: #00787f;
  --primary-light: #e7f3f4;
  --primary-border: #b6dbe0;
  --whatsapp: #128c4a;
  --whatsapp-hover: #0f7a41;
  --secondary: #0a7d86;
  --secondary-dark: #06333c;
  --accent: #b18a4a;
  --accent-light: #f8f0e2;
  --dark: #0a2e40;
  --text-main: #16282f;
  --text-muted: #52686f;
  --text-light: #647a82;
  --bg-page: #f4f8f9;
  --bg-card: #ffffff;
  --border-light: #dfe8eb;
  --border-subtle: #eef3f5;
  --shadow-sm: 0 1px 2px rgba(10, 46, 64, 0.06), 0 1px 3px rgba(10, 46, 64, 0.05);
  --shadow-md: 0 4px 12px -2px rgba(10, 46, 64, 0.09), 0 2px 6px -2px rgba(10, 46, 64, 0.06);
  --shadow-lg: 0 16px 34px -14px rgba(10, 46, 64, 0.16), 0 6px 14px -8px rgba(10, 46, 64, 0.09);
  --shadow-xl: 0 28px 60px -22px rgba(10, 46, 64, 0.22), 0 12px 24px -16px rgba(10, 46, 64, 0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --gold-ink: #8a611c;
  --gold-fill: #c9a25e;
  --gold-wash: #f6ecd9;
  --gold-on-dark: #f2dcae;
  --film-gold: #8a611c;
  --film-ink: #0a2e40;
  --film-panel: #ffffff;
  --film-line: #dfe8eb;
  --line-glass: rgba(10, 46, 64, 0.08);
  --scrim: rgba(6, 32, 41, 0.62);
  --on-dark: #f4f9fa;
  --on-dark-muted: rgba(244, 249, 250, 0.82);
  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
  background: var(--bg-page);
  color-scheme: light;
}

body {
  background:
    radial-gradient(1100px 620px at 88% -8%, rgba(0, 120, 128, 0.09), transparent 62%),
    radial-gradient(900px 560px at 4% 104%, rgba(201, 162, 94, 0.08), transparent 60%),
    var(--bg-page);
  color: var(--text-main);
}

::selection {
  background: rgba(0, 120, 128, 0.2);
  color: var(--secondary-dark);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #eaf1f3; }
::-webkit-scrollbar-thumb { background: #bcced3; border-radius: 999px; border: 2px solid #eaf1f3; }
::-webkit-scrollbar-thumb:hover { background: #9db3ba; }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

img { color: transparent; }

.muted { color: var(--text-muted); }
.small { font-size: 0.85rem; }
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* ---------------------------------------------------------------- header
   #siteHeader carries the sticky position. .header cannot be sticky on its
   own because it sits inside #siteHeader, so it would unstick as soon as the
   wrapper scrolled past — that is what made the desktop nav appear to hide. */
#siteHeader {
  position: sticky;
  top: 0;
  z-index: 100;
}

.top-bar {
  background: var(--secondary-dark);
  color: #cfe2e6;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar .top-link { color: #cfe2e6; }
.top-bar .top-link:hover { color: #ffffff; }
.top-bar-right .top-link { color: var(--gold-on-dark) !important; font-weight: 700 !important; letter-spacing: 0.04em; }
.top-bar-right .top-link:hover { color: #ffffff !important; }

.header {
  position: static;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line-glass);
  box-shadow: none;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: #d5e2e6;
  box-shadow: 0 8px 24px -14px rgba(10, 46, 64, 0.28);
}

.header-inner { height: 78px; }
.logo-img { height: 46px; }

.nav-links { gap: 30px; }

.nav-link {
  color: #3c5058;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 0;
}

.nav-link:hover { color: var(--primary); }
.nav-link.active { color: var(--primary); }

.nav-link.active::after {
  height: 3px;
  left: 10%;
  width: 80%;
  background: linear-gradient(90deg, var(--primary), var(--gold-fill));
  border-radius: 999px;
}

/* Tab glyphs belong to the mobile bottom bar; the desktop navbar stays text-only. */
.nav-link > svg { display: none; }

/* The "More" tab and its sheet are mobile-only; desktop shows every item inline. */
.nav-more-item,
.nav-sheet,
.nav-sheet-backdrop { display: none; }

/* ---------------------------------------------------------------- buttons */
.btn-primary {
  background: var(--primary);
  color: #ffffff;
  border: 1px solid var(--primary);
  border-radius: var(--radius-md);
  padding: 13px 24px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px -12px rgba(0, 97, 105, 0.55);
}

.btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(0, 97, 105, 0.6);
}

.btn-whatsapp-header,
.btn-hero-whatsapp,
.btn-whatsapp-book,
.btn-wa-big {
  background: var(--whatsapp);
  border: 1px solid var(--whatsapp);
  border-radius: var(--radius-md);
  color: #ffffff;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 22px -12px rgba(18, 140, 74, 0.55);
}

.btn-whatsapp-header:hover,
.btn-hero-whatsapp:hover,
.btn-whatsapp-book:hover,
.btn-wa-big:hover {
  background: var(--whatsapp-hover);
  border-color: var(--whatsapp-hover);
  box-shadow: 0 16px 30px -14px rgba(18, 140, 74, 0.65);
}

.btn-hero-whatsapp,
.btn-hero-secondary {
  padding: 17px 30px;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.btn-hero-whatsapp {
  background: var(--whatsapp);
  color: #ffffff;
  border: 1px solid var(--whatsapp);
  box-shadow: 0 18px 34px -16px rgba(18, 140, 74, 0.7);
}

.btn-hero-whatsapp:hover {
  background: var(--whatsapp-hover);
  border-color: var(--whatsapp-hover);
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -18px rgba(18, 140, 74, 0.75);
}

.btn-hero-secondary {
  background: rgba(3, 14, 18, 0.42);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
}

.btn-hero-secondary:hover {
  background: #ffffff;
  color: var(--primary);
  border-color: #ffffff;
}

/* ---------------------------------------------------------------- hero
   The photo is the hero: sharp and visible across the whole band, lifted out of
   it with a black cinematic shadow — a soft well behind the headline, a heavier
   top and bottom bar and a corner vignette — so light type stays legible on any
   photo a manager uploads. */
.hero {
  --hero-image: url('https://images.unsplash.com/photo-1577495508048-b635879837f1?auto=format&fit=crop&w=1600&q=75');
  position: relative;
  min-height: 84vh;
  background-image: none;
  padding: 108px 0 88px;
  overflow: hidden;
  isolation: isolate;
  color: var(--on-dark);
}

.hero::before {
  content: '';
  position: absolute;
  inset: -2%;
  z-index: 0;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  filter: saturate(1.08) contrast(1.12) brightness(0.94);
  transform: scale(1.03);
  animation: heroDrift 34s ease-in-out infinite alternate;
  will-change: transform;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(58% 46% at 50% 44%, rgba(3, 14, 18, 0.68) 0%, rgba(3, 14, 18, 0.42) 46%, rgba(3, 14, 18, 0) 78%),
    linear-gradient(180deg, rgba(3, 14, 18, 0.5) 0%, rgba(3, 14, 18, 0.12) 30%, rgba(3, 14, 18, 0.3) 74%, rgba(3, 14, 18, 0.72) 100%),
    radial-gradient(125% 105% at 50% 50%, rgba(3, 12, 15, 0) 42%, rgba(3, 12, 15, 0.62) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1020px;
}

@keyframes heroDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(0, -1.2%, 0); }
}

.hero-badge-pill {
  background: rgba(3, 14, 18, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--on-dark);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: var(--radius-full);
  box-shadow: none;
  backdrop-filter: blur(8px);
  margin-bottom: 28px;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5.1rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 24px;
  text-shadow: 0 4px 34px rgba(2, 10, 13, 0.75), 0 1px 3px rgba(2, 10, 13, 0.6);
}

.dynamic-highlight {
  color: var(--gold-on-dark);
  font-style: italic;
  border-bottom: 0;
  padding-bottom: 0;
  text-shadow: 0 4px 30px rgba(2, 10, 13, 0.8), 0 1px 3px rgba(2, 10, 13, 0.65);
}

.typewriter-cursor {
  width: 2px;
  background-color: var(--gold-fill);
  box-shadow: none;
}

.hero-subtitle {
  font-size: 1.06rem;
  color: rgba(244, 249, 250, 0.92);
  max-width: 660px;
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 40px;
  text-shadow: 0 3px 26px rgba(2, 10, 13, 0.8), 0 1px 3px rgba(2, 10, 13, 0.6);
}

.hero-cta-group { gap: 14px; margin-bottom: 48px; }

/* ------------------------------------------------------- header text entrance
   The copy arrives in sequence out of the black shadow: badge, headline, subhead,
   CTAs. CSS-only and short, so it never fights the typewriter or a CMS re-render,
   and no filter/opacity is left behind that would break the glass buttons. */
@keyframes heroRiseIn {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes heroRuleDraw {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

.hero .hero-badge-pill,
.hero .hero-title,
.hero .hero-subtitle,
.hero .hero-cta-group,
.page-hero h1,
.page-hero p {
  animation: heroRiseIn 0.85s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.hero .hero-badge-pill { animation-delay: 0.05s; }
.hero .hero-title { animation-delay: 0.16s; }
.hero .hero-subtitle { animation-delay: 0.3s; }
.hero .hero-cta-group { animation-delay: 0.42s; }
.page-hero h1 { animation-delay: 0.05s; }
.page-hero p { animation-delay: 0.18s; }

.page-hero h1::after {
  transform-origin: left center;
  animation: heroRuleDraw 0.7s cubic-bezier(0.2, 0.75, 0.25, 1) 0.3s both;
}

/* ------------------------------------------------------- floating WhatsApp
   One always-available booking entry point on every page. It sits under the
   bottom tab bar (120), nav sheet (124/125) and photo lightbox (200) so overlays
   always win, and folds out a label only on hover-capable pointers. */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 115;
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--whatsapp);
  color: #ffffff;
  box-shadow: 0 16px 32px -14px rgba(18, 140, 74, 0.7), 0 2px 8px rgba(6, 30, 38, 0.16);
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wa-float-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: 0 15px;
}

.wa-float-label {
  flex: 0 1 auto;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: max-width 0.3s ease, opacity 0.2s ease;
}

.wa-float-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--whatsapp);
  opacity: 0;
  pointer-events: none;
  animation: waRing 3s ease-out 1.4s infinite;
}

@keyframes waRing {
  0% { transform: scale(1); opacity: 0.5; }
  70% { transform: scale(1.45); opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

@media (hover: hover) {
  .wa-float:hover,
  .wa-float:focus-visible {
    background: var(--whatsapp-hover);
    box-shadow: 0 20px 40px -14px rgba(15, 122, 65, 0.72), 0 2px 8px rgba(6, 30, 38, 0.16);
    transform: translateY(-2px);
  }

  .wa-float:hover .wa-float-label,
  .wa-float:focus-visible .wa-float-label {
    max-width: 130px;
    padding-right: 20px;
    opacity: 1;
  }
}

.wa-float:focus-visible {
  outline: 3px solid var(--gold-fill);
  outline-offset: 3px;
}

/* Keyboard focus reveals the label even on touch-only devices. */
.wa-float:focus-visible .wa-float-label {
  max-width: 130px;
  padding-right: 20px;
  opacity: 1;
}

@media (max-width: 880px) {
  .wa-float {
    right: 16px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------------------------------------------------------------- banner slider
   CMS-managed promotional carousel. Management places it at a chosen position
   on a page, and it stays hidden until a slide has an image, so the hero is
   never displaced by an empty band. White copy always sits on the image
   scrim, never directly on an unknown photo. */
.promo-placement {
  width: 100%;
}

.promo-placement--banner {
  padding: 26px 0 6px;
}

/* The banner is a promotional band, so it runs wider than the site's content
   column and only keeps a small gutter from the screen edge. */
.banner-slider {
  --bs-gutter: clamp(10px, 1.6vw, 24px);
  position: relative;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 var(--bs-gutter);
}

.bs-viewport {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 6;
  max-height: 460px;
  min-height: 260px;
  border-radius: var(--radius-lg);
  background: var(--secondary-dark);
  box-shadow: var(--shadow-lg);
  touch-action: pan-y;
}

.bs-live { height: 100%; }

.bs-track {
  display: flex;
  height: 100%;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.bs-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
}

.bs-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bs--fade .bs-track { display: block; }

.bs--fade .bs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.bs--fade .bs-slide.is-active { opacity: 1; }

.bs-caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  color: var(--on-dark);
}

/* The copy follows the site's own column so it lines up with the page around
   it, while the picture behind it runs the full width of the band. The inner
   box cancels the band's gutter, so the column is measured from the screen
   edge and not from the image. */
.bs-caption-inner {
  width: calc(100% + 2 * var(--bs-gutter));
  margin-left: calc(-1 * var(--bs-gutter));
  padding: clamp(20px, 3vw, 34px) 0;
}

.bs-caption-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.bs-caption::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(96deg, rgba(6, 32, 41, 0.86) 0%, rgba(6, 32, 41, 0.62) 46%, rgba(6, 32, 41, 0) 84%);
}

.bs-badge {
  background: var(--gold-fill);
  color: #2c1e05;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--radius-full);
}

.bs-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 2.1rem);
  line-height: 1.18;
  max-width: 24ch;
  text-shadow: 0 1px 12px rgba(6, 32, 41, 0.5);
}

.bs-text {
  max-width: 48ch;
  font-size: 0.95rem;
  color: var(--on-dark-muted);
}

.bs-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: var(--radius-full);
  background: #ffffff;
  color: var(--secondary-dark);
  font-weight: 700;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}

.bs-cta:hover { background: var(--gold-wash); color: var(--gold-ink); }

.bs-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(10, 46, 64, 0.1);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--secondary-dark);
  cursor: pointer;
  transition: var(--transition);
}

.bs-arrow:hover { background: #ffffff; scale: 1.07; }

.bs-prev { left: 14px; }

.bs-next { right: 14px; }

.bs-dots {
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  gap: 4px;
}

/* The button carries a tall transparent hit area and paints only the dot,
   so the controls stay small to look at but comfortable to press. */
.bs-dots button {
  position: relative;
  width: 24px;
  height: 34px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.bs-dots button::after {
  content: '';
  position: absolute;
  inset: 12px 7px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.55);
  transition: var(--transition);
}

.bs-dots button.is-active::after { inset: 12px 3px; background: #ffffff; }

.bs-arrow:focus-visible,
.bs-dots button:focus-visible,
.bs-cta:focus-visible {
  outline: 3px solid var(--gold-on-dark);
  outline-offset: 2px;
}

@media (max-width: 880px) {
  .bs-viewport { aspect-ratio: 16 / 10; min-height: 300px; }
  .bs-caption-inner { padding-bottom: 46px; }
  .bs-text { display: none; }
  .bs-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bs-track,
  .bs-slide,
  .bs--fade .bs-slide { transition: none; }
  .bs-arrow:hover { scale: none; }
}

/* ---------------------------------------------------------------- ribbon
   CMS-managed announcement strip. It sticks with the header because it lives
   inside #siteHeader, so a message stays in view while the page is read.
   The accent only tints a wash behind a dark base, so the white copy always
   keeps its contrast whatever colour management picks. Management can replace
   the whole background with --ribbon-base-*, in which case the copy colour
   switches to a readable ink for that background. */
.site-ribbon {
  --ribbon-accent: var(--gold-fill);
  --ribbon-base-a: var(--secondary-dark);
  --ribbon-base-b: var(--primary);
  --ribbon-base-c: var(--secondary);
  --ribbon-ink: #ffffff;
  --ribbon-ink-invert: #0a2e40;
  --ribbon-line: rgba(255, 255, 255, 0.55);
  --ribbon-chip: rgba(255, 255, 255, 0.16);
  --ribbon-chip-strong: rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg, var(--ribbon-base-a) 0%, var(--ribbon-base-b) 58%, var(--ribbon-base-c) 100%);
  color: var(--ribbon-ink);
}

.site-ribbon::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(58% 180% at 10% 50%, var(--ribbon-accent), transparent 62%);
  opacity: 0.3;
}

.site-ribbon--shimmer::before {
  inset: -20% -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.42) 50%, transparent 58%);
  opacity: 1;
  animation: ribbonShimmer 3.6s ease-in-out infinite;
}

@keyframes ribbonShimmer {
  0% { transform: translateX(-42%); }
  55%, 100% { transform: translateX(42%); }
}

.site-ribbon--stripe::before {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 12px, transparent 12px 24px),
    radial-gradient(58% 180% at 10% 50%, var(--ribbon-accent), transparent 62%);
  opacity: 0.7;
  animation: ribbonStripes 1.2s linear infinite;
}

@keyframes ribbonStripes {
  /* Two background layers: only the stripes slide, the accent wash stays put. */
  to { background-position: 33.94px 0, 0 0; }
}

.site-ribbon--static::before {
  animation: none;
}

/* Colour drift: the accent sweeps across a dark base, so the copy never ends up
   sitting on a bright band and losing contrast. */
.site-ribbon--gradient {
  background: linear-gradient(100deg, var(--ribbon-base-a) 0%, var(--ribbon-base-b) 30%, var(--ribbon-base-c) 50%, var(--ribbon-base-b) 70%, var(--ribbon-base-a) 100%);
  background-size: 220% 100%;
  animation: ribbonDrift 14s linear infinite;
}

.site-ribbon--gradient::before {
  background: linear-gradient(100deg, transparent 38%, var(--ribbon-accent) 50%, transparent 62%);
  background-size: 300% 100%;
  opacity: 0.4;
  animation: ribbonSweep 7s linear infinite;
}

@keyframes ribbonDrift {
  to { background-position: 220% 0; }
}

@keyframes ribbonSweep {
  to { background-position: -300% 0; }
}

/* Attention pulse: the badge ring expands, for offers with limited space. */
.site-ribbon--pulse .ribbon-mark {
  background: var(--ribbon-accent);
  color: var(--secondary-dark);
  animation: ribbonPulse 2s ease-out infinite;
}

@keyframes ribbonPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.42); }
  70% { box-shadow: 0 0 0 11px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Sparkle: two offset star layers for festive occasions. */
.site-ribbon--sparkle::before {
  opacity: 0.9;
  background-image:
    radial-gradient(2px 2px at 8% 32%, #ffffff 60%, transparent 61%),
    radial-gradient(1.6px 1.6px at 27% 72%, var(--ribbon-accent) 60%, transparent 61%),
    radial-gradient(2px 2px at 46% 26%, #ffffff 60%, transparent 61%),
    radial-gradient(1.6px 1.6px at 64% 68%, var(--ribbon-accent) 60%, transparent 61%),
    radial-gradient(2px 2px at 83% 30%, #ffffff 60%, transparent 61%),
    radial-gradient(58% 180% at 10% 50%, var(--ribbon-accent), transparent 62%);
  animation: ribbonTwinkle 2.6s ease-in-out infinite alternate;
}

.site-ribbon--sparkle::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  background-image:
    radial-gradient(1.6px 1.6px at 16% 62%, var(--ribbon-accent) 60%, transparent 61%),
    radial-gradient(2px 2px at 36% 40%, #ffffff 60%, transparent 61%),
    radial-gradient(1.6px 1.6px at 55% 58%, var(--ribbon-accent) 60%, transparent 61%),
    radial-gradient(2px 2px at 74% 44%, #ffffff 60%, transparent 61%),
    radial-gradient(1.6px 1.6px at 92% 60%, var(--ribbon-accent) 60%, transparent 61%);
  animation: ribbonTwinkle 2.6s ease-in-out 0.9s infinite alternate-reverse;
}

@keyframes ribbonTwinkle {
  from { opacity: 0.3; }
  to { opacity: 0.95; }
}

/* Live countdown chip: filled by site.js from the ribbon's end date. */
.ribbon-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  background: var(--ribbon-accent);
  color: var(--secondary-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.site-ribbon--countdown .ribbon-count {
  animation: ribbonCountPulse 1.8s ease-in-out infinite;
}

@keyframes ribbonCountPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.ribbon-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 42px;
  padding: 7px 0;
}

.ribbon-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ribbon-chip);
  color: var(--ribbon-accent);
}

.ribbon-copy {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* The marquee track is wider than its box, so it must be clipped there rather
   than allowed to run on underneath the button and the close icon. */
.site-ribbon--marquee .ribbon-copy {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
}

.ribbon-scroll {
  display: flex;
  width: max-content;
  animation: ribbonScroll 24s linear infinite;
}

.ribbon-scroll .ribbon-text {
  padding-right: 56px;
  white-space: nowrap;
}

@keyframes ribbonScroll {
  to { transform: translateX(-50%); }
}

/* Let people actually read it. */
.site-ribbon:hover .ribbon-scroll,
.site-ribbon:focus-within .ribbon-scroll {
  animation-play-state: paused;
}

.ribbon-cta {
  flex: 0 0 auto;
  padding: 5px 14px;
  border: 1px solid var(--ribbon-line);
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ribbon-ink);
  transition: background 0.2s ease, color 0.2s ease;
}

.ribbon-cta:hover {
  background: var(--ribbon-ink);
  color: var(--ribbon-ink-invert);
}

.ribbon-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--ribbon-chip);
  color: var(--ribbon-ink);
  cursor: pointer;
  transition: background 0.2s ease;
}

.ribbon-close:hover {
  background: var(--ribbon-chip-strong);
}

.ribbon-cta:focus-visible,
.ribbon-close:focus-visible {
  outline: 2px solid var(--ribbon-ink);
  outline-offset: 2px;
}

/* On a phone the message gets the full width on its own line and the controls
   drop below, instead of squeezing a long announcement into a narrow column. */
@media (max-width: 600px) {
  .ribbon-inner {
    display: grid;
    grid-template-areas: "mark copy copy" "count cta close";
    grid-template-columns: auto 1fr auto;
    column-gap: 10px;
    row-gap: 8px;
    align-items: center;
  }
  .ribbon-copy { grid-area: copy; font-size: 0.76rem; }
  .ribbon-mark { grid-area: mark; width: 22px; height: 22px; }
  .ribbon-count { grid-area: count; justify-self: start; font-size: 0.66rem; padding: 3px 9px; }
  .ribbon-cta { grid-area: cta; justify-self: end; }
  .ribbon-close { grid-area: close; }
}

/* ---------------------------------------------------------------- preloader
   Brand curtain shown before the page is ready. It is above everything (400)
   on purpose and only exists once js/preloader.js has run, so a blocked script
   or disabled JS leaves the site fully visible. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(62% 46% at 50% 38%, rgba(201, 162, 94, 0.16), transparent 70%),
    rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  overflow: hidden;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.preloader.is-done .preloader-inner {
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
}

.preloader-mark {
  position: relative;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
}

.preloader-mark svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.preloader-mark img {
  width: 46px;
  border-radius: 14px;
  box-shadow: 0 14px 28px -16px rgba(10, 46, 64, 0.55);
  opacity: 0;
  animation: plLogoIn 0.6s ease 0.05s forwards;
}

.pl-ring-track {
  fill: none;
  stroke: rgba(6, 51, 60, 0.10);
  stroke-width: 2;
}

.pl-ring-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  animation: plRingDraw 1.1s cubic-bezier(0.2, 0.75, 0.25, 1) 0.1s forwards;
}

@keyframes plRingDraw {
  to { stroke-dashoffset: 0; }
}

/* A single gold highlight keeps orbiting while a slow page loads. */
.pl-ring-orbit {
  fill: none;
  stroke: var(--gold-fill);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 26 301;
  transform-origin: 60px 60px;
  opacity: 0;
  animation: plOrbitIn 0.35s ease 0.9s forwards, plOrbitSpin 2.6s linear 0.9s infinite;
}

@keyframes plOrbitIn {
  to { opacity: 0.85; }
}

@keyframes plOrbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes plLogoIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}

.preloader-word {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--secondary-dark);
  opacity: 0;
  animation: plWordIn 0.7s ease 0.3s forwards;
}

.preloader-word span {
  color: var(--gold-ink);
}

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

.preloader-bar {
  width: min(220px, 58vw);
  height: 2px;
  border-radius: 999px;
  background: rgba(6, 51, 60, 0.12);
  overflow: hidden;
}

.preloader-bar i {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--gold-fill) 45%, var(--accent) 72%, transparent);
  animation: plBarSweep 1.35s cubic-bezier(0.55, 0.1, 0.45, 0.9) infinite;
}

@keyframes plBarSweep {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(370%); }
}

/* On handover the bar completes instead of stopping mid-way. */
.preloader.is-done .preloader-bar i {
  animation: none;
  width: 100%;
  transform: none;
  background: linear-gradient(90deg, var(--gold-fill), var(--accent));
  transition: width 0.3s ease;
}

.preloader-tag {
  max-width: min(520px, 86vw);
  font-size: 0.6rem;
  line-height: 1.9;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  opacity: 0;
  animation: plWordIn 0.7s ease 0.5s forwards;
}

.hero-quick-showcase {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px;
}

.showcase-item {
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.showcase-item:hover {
  background: var(--primary-light);
  border-color: var(--primary-border);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.showcase-icon {
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
  color: var(--primary);
  border-radius: 999px;
  width: 42px;
  height: 42px;
}

.showcase-text-title { color: var(--text-main); font-size: 0.88rem; letter-spacing: 0; }
.showcase-text-desc { color: var(--text-muted); font-size: 0.75rem; }

/* ---------------------------------------------------------------- trust */
.trust-item {
  padding: 4px 24px;
  border-left: 1px solid var(--border-subtle);
}

.trust-grid > .trust-item:first-child { border-left: 0; padding-left: 0; }

.trust-icon-box {
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
  color: var(--primary);
  border-radius: 50%;
  font-size: 1.2rem;
}

.trust-title { color: var(--text-main); font-size: 0.92rem; }
.trust-desc { color: var(--text-muted); font-size: 0.8rem; line-height: 1.6; }

/* ---------------------------------------------------------------- sections */
.section { padding: 96px 0; }

.amenities-section,
.facilities-section,
.areas-section {
  background: linear-gradient(180deg, #eef5f6 0%, #f4f8f9 100%);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 500;
  color: var(--secondary-dark);
  letter-spacing: -0.015em;
  line-height: 1.14;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 0.96rem;
  line-height: 1.72;
  margin-top: 12px;
  max-width: 66ch;
}

/* A centred header must centre the subtitle box too, otherwise the capped
   width leaves the paragraph hugging the left edge of the container. */
.section-header--center {
  display: block;
  text-align: center;
}

.section-header--center .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------- filters */
.category-tab-btn {
  background: #ffffff;
  border: 1px solid var(--border-light);
  color: #3c5058;
  border-radius: var(--radius-full);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 20px;
  box-shadow: var(--shadow-sm);
}

.category-tab-btn:hover {
  border-color: var(--primary-border);
  color: var(--primary);
  background: var(--primary-light);
}

.category-tab-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 10px 20px -12px rgba(0, 97, 105, 0.6);
}

/* ---------------------------------------------------------------- property cards */
.properties-grid { gap: 24px; }

/* Overflow link under a capped card grid */
.section-more {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.section-more[hidden] { display: none; }

.section-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 13px 26px;
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-full);
  background: #ffffff;
  color: var(--secondary-dark);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

.section-more a svg { color: var(--primary); }

.section-more a:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.section-more a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.property-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.property-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-border);
  box-shadow: var(--shadow-xl);
}

.card-img-wrapper { height: 210px; background: #e9eff1; }
.card-img-wrapper::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(6, 32, 41, 0.34));
  pointer-events: none;
}

.card-img { filter: saturate(1.03); }
.property-card:hover .card-img { transform: scale(1.05); }

.badge-verified {
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-full);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.badge-feature {
  background: var(--gold-wash) !important;
  color: var(--gold-ink) !important;
  border: 1px solid rgba(138, 97, 28, 0.24);
  border-radius: var(--radius-full);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.btn-favorite {
  background: rgba(255, 255, 255, 0.94);
  color: #5c7078;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
}

.btn-favorite:hover, .btn-favorite.active {
  background: #ffffff;
  color: var(--accent);
}

.property-price { color: var(--secondary-dark); font-family: var(--font-display); font-size: 1.32rem; font-weight: 600; }
.property-price span { color: var(--text-muted); font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.04em; }
.cheques-badge {
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-full);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.property-title { color: var(--text-main); }
.card-desc { color: var(--text-muted); }
.property-location { color: var(--text-light); }
.property-specs { border-color: var(--border-subtle); }
.spec-item { color: #3c5058; }
.facility-chip {
  background: #f4f8f9;
  color: #3c5058;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.status-pill { border-radius: var(--radius-full); font-weight: 700; letter-spacing: 0.04em; }
.status-pill.badge-available { background: #e3f5ea; color: #0f6b39; }
.status-pill.badge-occupied { background: var(--gold-wash); color: var(--gold-ink); }
.status-pill.badge-maintenance { background: #fdeede; color: #946318; }
.status-pill.badge-unavailable { background: #eef2f4; color: #52686f; }

.btn-detail {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary-border);
  border-radius: var(--radius-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
}

.btn-detail:hover { background: var(--primary); color: #ffffff; }

.action-icon-btn {
  background: #ffffff;
  border: 1px solid var(--border-light);
  color: #3c5058;
  border-radius: var(--radius-sm);
}

.action-icon-btn.call:hover {
  background: var(--primary-light);
  border-color: var(--primary-border);
  color: var(--primary);
}

.btn-whatsapp-book { box-shadow: var(--shadow-sm); }
/* ---------------------------------------------------------------- amenities */
.amenity-feature-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.amenity-feature-card:hover {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-xl);
}

.amenity-img-box { height: 260px; overflow: hidden; background: #e9eff1; }
.amenity-img-box img { filter: saturate(1.03); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.amenity-feature-card:hover .amenity-img-box img { transform: scale(1.05); }

.amenity-card-badge {
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-full);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.amenity-card-title {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--secondary-dark);
}

.amenity-card-desc { color: var(--text-muted); }
.amenity-perks-list { color: #33474f; }
.amenity-perks-list svg { color: var(--primary); }

/* ---------------------------------------------------------------- occasions */
.occasion-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  box-shadow: var(--shadow-sm);
}

.occasion-card:hover {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.occasion-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--gold-wash);
  border: 1px solid rgba(138, 97, 28, 0.18);
  color: var(--gold-ink);
  font-size: 1.55rem;
  margin-bottom: 16px;
}

.occasion-title { color: var(--text-main); }
.occasion-desc { color: var(--text-muted); }

/* ---------------------------------------------------------------- facilities */
.facility-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.facility-card:hover {
  border-color: var(--primary-border);
  box-shadow: var(--shadow-xl);
}

.facility-img-wrap { height: 190px; background: #e9eff1; }
.facility-img-wrap img { filter: saturate(1.03); }
.facility-img-wrap::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 44%;
  background: linear-gradient(180deg, transparent, rgba(6, 32, 41, 0.3));
  pointer-events: none;
}

.facility-badge {
  background: rgba(255, 255, 255, 0.94);
  color: var(--primary);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-full);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
}

.facility-icon-circle {
  background: var(--primary-light);
  border: 1px solid var(--primary-border);
  color: var(--primary);
  border-radius: 50%;
  font-size: 1rem;
}

.facility-title { color: var(--text-main); }
.facility-desc { color: var(--text-muted); }

/* ---------------------------------------------------------------- CTA banner
   One deep-teal block per page gives the bright layout a confident anchor and
   keeps the conversion button at maximum contrast. */
.whatsapp-cta-banner {
  position: relative;
  background:
    radial-gradient(70% 130% at 85% 0%, rgba(201, 162, 94, 0.3), transparent 62%),
    linear-gradient(135deg, #006169 0%, #0a7d86 52%, #06333c 100%);
  border: 1px solid rgba(6, 51, 60, 0.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}

.whatsapp-cta-content h3 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.8vw, 2.35rem);
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.whatsapp-cta-content p { color: rgba(244, 249, 250, 0.86); }

.whatsapp-cta-banner .btn-whatsapp-header { white-space: nowrap; }

/* ---------------------------------------------------------------- contact & forms */
.contact-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-md);
}

.contact-card strong { color: var(--text-main); }
.contact-card a { color: var(--primary); }
.contact-card a:hover { text-decoration: underline; }
.contact-card a.btn-primary,
.contact-card a.btn-primary:hover { color: #ffffff; text-decoration: none; }
.contact-card a.btn-call-now { color: var(--secondary-dark); text-decoration: none; }
.contact-card a.btn-call-now:hover { color: var(--primary); text-decoration: none; }
.contact-card .row { border-bottom: 1px solid var(--border-subtle); padding-bottom: 12px; }
.contact-card .row:last-of-type { border-bottom: 0; }
.contact-card .row > span:first-child {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--primary);
  margin-top: 2px;
}

.btn-call-now {
  background: #ffffff;
  border: 1px solid var(--primary-border);
  color: var(--primary);
  border-radius: var(--radius-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.76rem;
  font-weight: 700;
  min-height: 50px;
  box-shadow: var(--shadow-sm);
}

.btn-call-now:hover { background: var(--primary-light); border-color: var(--primary); color: var(--secondary-dark); }

.btn-wa-big {
  border-radius: var(--radius-md);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.76rem;
  font-weight: 700;
  min-height: 50px;
}

.map-embed {
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg);
  filter: saturate(0.94);
  box-shadow: var(--shadow-md);
}

.field label {
  color: var(--text-muted);
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.field input, .field select, .field textarea,
.filter-row input, .filter-row select {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  padding: 12px 14px;
  box-shadow: var(--shadow-sm);
}

.field input::placeholder, .field textarea::placeholder,
.filter-row input::placeholder { color: #8fa3aa; }

.field input:focus, .field select:focus, .field textarea:focus,
.filter-row input:focus, .filter-row select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 120, 128, 0.16);
}

.filter-panel {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.filter-row label { color: var(--text-muted); }

.empty-state {
  background: #f7fbfb;
  border: 1px dashed var(--primary-border);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

.empty-state h3 { color: var(--secondary-dark); font-family: var(--font-display); font-weight: 500; }

/* ---------------------------------------------------------------- gallery */
.gallery-masonry { gap: 18px; }
.gallery-masonry figure {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: #e9eff1;
  box-shadow: var(--shadow-sm);
}
.gallery-masonry img { height: 240px; filter: saturate(1.03); }
.gallery-masonry figure:hover img { transform: scale(1.05); filter: saturate(1.06); }
.gallery-masonry figcaption {
  background: linear-gradient(transparent, rgba(6, 32, 41, 0.78));
  padding: 32px 16px 14px;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
}

/* ---------------------------------------------------------------- detail page
   Photo block follows the classifieds pattern: one large stage, a counter,
   edge arrows, a scrollable thumb strip and a full-screen viewer. */
.detail-gallery { display: block; position: relative; margin-bottom: 22px; }

.pg-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #0e1a1e;
  box-shadow: var(--shadow-md);
}

.pg-stage .pg-img {
  display: block;
  width: 100%;
  height: clamp(260px, 42vw, 470px);
  object-fit: cover;
  border: 0;
  border-radius: 0;
  cursor: zoom-in;
}

.pg-topbar {
  position: absolute;
  top: 14px;
  left: 66px;
  right: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pg-back {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--secondary-dark);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.pg-back:hover { color: var(--primary); background: #ffffff; }
.pg-back:active { transform: scale(0.94); }
.pg-back svg { width: 20px; height: 20px; }

.pg-counter {
  padding: 6px 13px;
  border-radius: var(--radius-full);
  background: rgba(6, 32, 41, 0.72);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pg-all {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.95);
  color: var(--secondary-dark);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color 0.18s ease, background 0.18s ease;
}
.pg-all:hover { color: var(--primary); background: #ffffff; }
.pg-all svg { width: 15px; height: 15px; }

.pg-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--secondary-dark);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.pg-arrow.prev { left: 12px; }
.pg-arrow.next { right: 12px; }
.pg-arrow:hover { color: var(--primary); background: #ffffff; }
.pg-arrow svg { width: 20px; height: 20px; }

.pg-strip {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 4px 2px 8px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.pg-thumb {
  flex: 0 0 auto;
  width: 104px;
  height: 74px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: #e8eef0;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.pg-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  filter: none;
}
.pg-thumb.is-active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 97, 105, 0.16); }

.pg-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: #06141a;
}
.pg-lightbox[hidden] { display: none; }

.pg-lb-bar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  color: #ffffff;
}
.pg-lb-heading {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.95rem;
  font-weight: 700;
}
.pg-lb-counter { font-size: 0.8rem; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.pg-lb-close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
}
.pg-lb-close:hover { background: rgba(255, 255, 255, 0.22); }
.pg-lb-close svg { width: 18px; height: 18px; }

.pg-lb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 8px 8px;
  overflow: hidden;
}
.pg-lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
}
.pg-lb-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
}
.pg-lb-arrow:hover { background: rgba(255, 255, 255, 0.28); }
.pg-lb-arrow.prev { left: 16px; }
.pg-lb-arrow.next { right: 16px; }
.pg-lb-arrow svg { width: 22px; height: 22px; }

.pg-lb-strip {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  justify-content: safe center;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
}
.pg-lb-strip .pg-thumb { width: 76px; height: 54px; opacity: 0.55; }
.pg-lb-strip .pg-thumb.is-active { opacity: 1; border-color: #ffffff; box-shadow: none; }

body.pg-locked { overflow: hidden; }

.detail-layout h1 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--secondary-dark);
  letter-spacing: -0.015em;
}
.detail-layout h3 {
  color: var(--text-main);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.detail-layout h3::after {
  content: '';
  display: block;
  width: 42px;
  height: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--gold-fill), transparent);
}
.detail-side { top: 104px; }
.spec-grid { gap: 12px; }
.spec-box {
  background: #f7fbfb;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 10px;
}
.spec-box .v { color: var(--secondary-dark); font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.spec-box .l { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.64rem; margin-top: 2px; }
.detail-list li {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: #33474f;
}

/* ---------------------------------------------------------------- restaurant menu */
.menu-sheet {
  background-color: #ffffff;
  background-image:
    radial-gradient(ellipse at top, rgba(201, 162, 94, 0.09), transparent 58%),
    linear-gradient(180deg, #ffffff 0%, #f7fbfb 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
.menu-sheet::before { border-color: var(--gold-wash); }
.menu-eyebrow { color: var(--gold-ink); letter-spacing: 0.4em; }
.menu-sheet-title, .menu-course-title, .menu-dish-price { color: var(--secondary-dark); }
.menu-dish-name { color: var(--text-main); }
.menu-sheet-sub, .menu-dish-desc, .menu-course-note, .menu-sheet-foot { color: var(--text-muted); }
.menu-dish-dots { border-bottom-color: #cfdbe0; }
.menu-rule { color: var(--gold-fill); }

/* ---------------------------------------------------------------- imagery & icons */
#aboutImage {
  display: block;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-light);
  filter: saturate(1.03);
  box-shadow: var(--shadow-lg);
}

/* CMS icon fields may contain emoji; keep them natural on white surfaces. */
.trust-icon-box:not(:has(svg)),
.occasion-icon:not(:has(svg)),
.facility-icon-circle:not(:has(svg)),
.showcase-icon:not(:has(svg)) {
  filter: none;
}

/* ---------------------------------------------------------------- testimonials */
.testimonial-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  color: #33474f;
  box-shadow: var(--shadow-md);
}
.testimonial-card .stars { color: var(--gold-ink); }
.testimonial-card .avatar { background: var(--primary-light); color: var(--primary); }

/* ---------------------------------------------------------------- page hero */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 380px;
  padding: 112px 0 60px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(0, 120, 128, 0.13), transparent 58%),
    radial-gradient(70% 110% at 88% 18%, rgba(201, 162, 94, 0.14), transparent 62%),
    linear-gradient(180deg, #f2f8f9 0%, #ffffff 100%);
  border-bottom: 1px solid var(--border-light);
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.86) 100%);
  pointer-events: none;
}

/* A CMS section image turns the band into a cinematic photo header: the picture
   fills the band, the black shadow carries the copy, and the type flips to light. */
.page-hero::after {
  content: '';
  position: absolute;
  inset: -2%;
  z-index: -2;
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
  filter: saturate(1.08) contrast(1.12) brightness(0.94);
  transform: scale(1.04);
  opacity: 0;
  transition: opacity 0.9s ease;
  animation: heroDrift 34s ease-in-out infinite alternate;
}

.page-hero.has-hero-image { min-height: 420px; }
.page-hero.has-hero-image::after { opacity: 1; }

.page-hero.has-hero-image::before {
  background:
    linear-gradient(90deg, rgba(3, 14, 18, 0.88) 0%, rgba(3, 14, 18, 0.66) 36%, rgba(3, 14, 18, 0.2) 70%, rgba(3, 14, 18, 0) 100%),
    linear-gradient(180deg, rgba(3, 14, 18, 0.5) 0%, rgba(3, 14, 18, 0.06) 40%, rgba(3, 14, 18, 0.62) 100%),
    radial-gradient(70% 90% at 82% 12%, rgba(201, 162, 94, 0.2), transparent 62%);
}

.page-hero .container { position: relative; z-index: 1; }

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.8vw, 4.1rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--secondary-dark);
  margin-bottom: 14px;
  text-shadow: none;
}

.page-hero h1::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--gold-fill));
}

.page-hero p {
  color: var(--text-muted);
  max-width: 680px;
  font-size: 1rem;
  line-height: 1.72;
}

/* Only page heros that actually carry a CMS photo switch to light type on black shadow. */
.page-hero.has-hero-image h1 {
  color: #ffffff;
  text-shadow: 0 4px 34px rgba(2, 10, 13, 0.8), 0 1px 3px rgba(2, 10, 13, 0.6);
}
.page-hero.has-hero-image h1::after {
  background: linear-gradient(90deg, var(--gold-on-dark), var(--gold-fill));
}
.page-hero.has-hero-image p {
  color: rgba(244, 249, 250, 0.9);
  text-shadow: 0 3px 24px rgba(2, 10, 13, 0.78), 0 1px 3px rgba(2, 10, 13, 0.6);
}

/* ---------------------------------------------------------------- footer */
.footer {
  background: linear-gradient(180deg, #06333c 0%, #042229 100%);
  color: rgba(244, 249, 250, 0.74);
  border-top: 1px solid rgba(6, 51, 60, 0.6);
  padding: 76px 0 30px;
}

.footer-col h4 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-on-dark);
  margin-bottom: 20px;
}

.footer-links a { color: rgba(244, 249, 250, 0.78); transition: color 0.25s ease; }
.footer-links a:hover { color: #ffffff; }
.footer-col a { color: rgba(244, 249, 250, 0.78); }
.footer-col a:hover { color: #ffffff; }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.12); color: rgba(244, 249, 250, 0.6); }
.footer-legal { color: rgba(244, 249, 250, 0.55); }
.footer-legal a { color: rgba(244, 249, 250, 0.78); }
.footer-legal a:hover { color: #ffffff; }

/* ---------------------------------------------------------------- mobile nav
   App-style bottom tab bar: four primary tabs plus a "More" tab that lifts a
   sheet with the rest, so nothing needs swiping sideways to find. */
@media (max-width: 880px) {
  .header-inner { height: 62px; }
  .logo-img { height: 32px; }

  /* A blurred or filtered ancestor becomes the containing block for a fixed
     descendant, which would pin the tab bar under the header instead of to the
     viewport. The mobile header is opaque, so the blur is dropped here. */
  .header,
  .header.is-scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 14px -10px rgba(10, 46, 64, 0.3);
  }

  .nav-links {
    display: flex;
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    gap: 2px;
    align-items: stretch;
    margin: 0;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--border-light);
    border-bottom: 0;
    box-shadow: 0 -12px 30px -20px rgba(10, 46, 64, 0.45);
  }

  .nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
  }

  .nav-item--overflow { display: none; }
  .nav-more-item { display: flex; }

  .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 50px;
    padding: 6px 4px;
    border: 0;
    border-radius: var(--radius-md);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: none;
    text-align: center;
    color: var(--text-light);
  }

  .nav-link:hover { color: var(--primary); }

  .nav-link.active {
    color: var(--primary);
    background: var(--primary-light);
  }

  .nav-link.active::after { display: none; }

  .nav-link svg {
    display: block;
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
  }

  /* "More" sheet: the overflow items, lifted above the tab bar. */
  .nav-sheet-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 124;
    background: rgba(6, 32, 41, 0.42);
  }

  .nav-sheet:not([hidden]) {
    display: block;
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    z-index: 125;
    max-height: min(56vh, 420px);
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: sheetLift 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }

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

  .nav-sheet-inner { padding: 8px; }

  .nav-sheet-title {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-light);
    padding: 6px 10px 8px;
  }

  .nav-sheet-list { list-style: none; display: grid; gap: 2px; }

  .nav-sheet-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 50px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 600;
  }

  .nav-sheet-row svg:first-child { width: 20px; height: 20px; color: var(--primary); flex: 0 0 auto; }
  .nav-sheet-row span { flex: 1 1 auto; }
  .nav-sheet-row svg:last-child { width: 16px; height: 16px; color: #a9bcc2; flex: 0 0 auto; }
  .nav-sheet-row:hover { background: var(--primary-light); color: var(--primary); text-decoration: none; }
  .nav-sheet-row.active { background: var(--primary-light); color: var(--primary); }

  body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- motion */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.properties-grid .property-card:nth-child(2),
.amenities-grid > *:nth-child(2),
.facilities-grid > *:nth-child(2),
.occasions-grid > *:nth-child(2),
.trust-grid > *:nth-child(2) { transition-delay: 0.07s; }

.properties-grid .property-card:nth-child(3),
.facilities-grid > *:nth-child(3),
.occasions-grid > *:nth-child(3),
.trust-grid > *:nth-child(3) { transition-delay: 0.14s; }

.properties-grid .property-card:nth-child(4),
.facilities-grid > *:nth-child(4),
.occasions-grid > *:nth-child(4),
.trust-grid > *:nth-child(4) { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .hero::before, #restHero::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card-img, .amenity-img-box img, .facility-img-wrap img, .gallery-masonry img { transition: none; }
  .hero .hero-badge-pill, .hero .hero-title, .hero .hero-subtitle, .hero .hero-cta-group,
  .page-hero h1, .page-hero p, .page-hero h1::after { animation: none; }
  .ribbon-scroll, .site-ribbon::before, .site-ribbon--gradient,
  .site-ribbon--pulse .ribbon-mark, .site-ribbon--countdown .ribbon-count { animation: none; }
  .site-ribbon--sparkle::after { animation: none; }
  .ribbon-scroll { display: block; width: auto; }
  .ribbon-scroll .ribbon-text { padding-right: 0; white-space: normal; }
  .ribbon-scroll .ribbon-text + .ribbon-text { display: none; }
  .site-ribbon--marquee .ribbon-copy { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .wa-float-ring { animation: none; opacity: 0; }
  .wa-float { transition: none; }
  .preloader, .preloader-inner { transition: none; }
  .preloader-mark img, .preloader-word, .preloader-tag { animation: none; opacity: 1; transform: none; }
  .pl-ring-fill { animation: none; stroke-dashoffset: 0; }
  .pl-ring-orbit { animation: none; opacity: 0; }
  .preloader-bar i { animation: none; width: 100%; }
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  .trust-item { border-left: 0; padding: 4px 0; }
  .hero { min-height: 0; }
}

@media (max-width: 768px) {
  .section { padding: 68px 0; }
  .hero { padding: 86px 0 64px; }
  .hero-title { font-size: clamp(2.35rem, 9vw, 3.4rem); }
  .hero-subtitle { font-size: 0.98rem; }
  .hero-quick-showcase { padding: 8px; }
  .page-hero { min-height: 300px; padding: 100px 0 44px; }
  .page-hero h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
  .pg-stage .pg-img { height: 320px; }
  .contact-card { padding: 20px; }
}

@media (max-width: 600px) {
  .section { padding: 56px 0; }
  .hero { padding: 72px 0 52px; }
  .hero-cta-group { flex-direction: column; align-items: stretch; margin-bottom: 36px; }
  .btn-hero-whatsapp, .btn-hero-secondary { justify-content: center; width: 100%; padding: 16px 20px; }
  .hero-badge-pill { font-size: 0.6rem; letter-spacing: 0.1em; padding: 8px 14px; line-height: 1.5; }
  .section-title { font-size: clamp(1.75rem, 7vw, 2.2rem); }
  .page-hero { padding: 92px 0 38px; }
  .page-hero h1::after { margin-top: 14px; }
  .whatsapp-cta-banner { padding: 30px 22px; }
  .footer { padding: 52px 0 24px; }
  .top-bar { display: none; }
  .category-tab-btn { padding: 10px 14px; font-size: 0.68rem; }
  .amenity-img-box { height: 210px; }
  .pg-stage .pg-img { height: 240px; }
  .pg-arrow { width: 36px; height: 36px; }
  .pg-thumb { width: 86px; height: 62px; }
  .pg-lb-arrow { width: 40px; height: 40px; }
  .pg-lb-strip .pg-thumb { width: 62px; height: 46px; }
  .gallery-masonry img { height: 220px; }
}