/* ==========================================================================
   DESIGN SYSTEM & VARIABLES — Hotel Tejasvi (Refined Spiritual-Luxury Theme)
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;600;700&display=swap');

   :root {
       /* Core Brand Palette — saffron warmth, deep ink, sandstone */
       --primary: #C8762A;        /* Saffron-amber — sacred, warm */
       --primary-hover: #A85E1F;
       --primary-light: #FEF3E6;
       --primary-glow: rgba(200, 118, 42, 0.18);
       --primary-gold: #D4A853;
       --dark: #1A1612;           /* Deep ink */
       --dark-section: #100E0C;
       --dark-mid: #231F1A;
       --text-dark: #2B2218;
       --text-muted: #7A6858;
       --text-light: #B09A88;
       --bg-light: #FDFAF6;       /* Warm parchment */
       --bg-sand: #F5EEE4;
       --white: #FFFFFF;
       --emerald: #1B6B50;        /* Trust / nature */
       --whatsapp: #25D366;
       --whatsapp-dark: #128C7E;
   
       /* Typography */
       --font-display: 'Cormorant Garamond', Georgia, serif;
       --font-body: 'DM Sans', system-ui, sans-serif;
   
       /* Tokens */
       --transition: all 0.32s cubic-bezier(0.25, 0.8, 0.25, 1);
       --transition-slow: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
       --radius-lg: 18px;
       --radius-md: 10px;
       --radius-sm: 5px;
       --radius-pill: 50px;
       --shadow-xs: 0 1px 3px rgba(26,22,18,0.06);
       --shadow-sm: 0 3px 12px rgba(26,22,18,0.08);
       --shadow-md: 0 8px 32px rgba(26,22,18,0.10);
       --shadow-lg: 0 20px 50px rgba(26,22,18,0.16);
       --shadow-gold: 0 8px 24px rgba(200, 118, 42, 0.22);
       --max-width: 1200px;
   }
   
   /* ==========================================================================
      RESET & BASE
      ========================================================================== */
   *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
   
   html {
       scroll-behavior: smooth;
       scroll-padding-top: 80px;
   }
   
   body {
       font-family: var(--font-body);
       font-size: 16px;
       line-height: 1.65;
       color: var(--text-dark);
       background-color: var(--bg-light);
       overflow-x: hidden;
   }
   
   h1, h2, h3, h4 {
       font-family: var(--font-display);
       font-weight: 700;
       color: var(--dark);
       line-height: 1.2;
   }
   
   a { color: inherit; text-decoration: none; transition: var(--transition); }
   img { max-width: 100%; height: auto; display: block; }
   input, select, textarea { font-family: var(--font-body); font-size: 14px; outline: none; }
   
   .container {
       width: 100%;
       max-width: var(--max-width);
       margin: 0 auto;
       padding: 0 28px;
   }
   
   /* ==========================================================================
      BUTTONS
      ========================================================================== */
   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 9px;
       padding: 13px 30px;
       font-family: var(--font-body);
       font-size: 14px;
       font-weight: 600;
       letter-spacing: 0.3px;
       border-radius: var(--radius-md);
       cursor: pointer;
       transition: var(--transition);
       border: 2px solid transparent;
       text-transform: none;
       position: relative;
       overflow: hidden;
   }
   
   .btn::after {
       content: '';
       position: absolute;
       inset: 0;
       background: rgba(255,255,255,0);
       transition: background 0.2s;
   }
   .btn:hover::after { background: rgba(255,255,255,0.07); }
   
   .btn-primary {
       background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
       color: var(--white);
       box-shadow: var(--shadow-gold);
   }
   .btn-primary:hover {
       transform: translateY(-2px);
       box-shadow: 0 10px 28px rgba(200, 118, 42, 0.38);
   }
   
   .btn-secondary {
       background-color: var(--dark);
       color: var(--white);
       border-color: var(--dark);
   }
   .btn-secondary:hover {
       background-color: var(--primary);
       border-color: var(--primary);
       transform: translateY(-2px);
       box-shadow: var(--shadow-gold);
   }
   
   .btn-outline {
       background-color: transparent;
       border-color: var(--primary);
       color: var(--primary);
   }
   .btn-outline:hover {
       background: linear-gradient(135deg, var(--primary), var(--primary-hover));
       color: var(--white);
       transform: translateY(-2px);
       box-shadow: var(--shadow-gold);
   }
   
   .btn-whatsapp {
       background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
       color: var(--white);
       box-shadow: 0 6px 18px rgba(37, 211, 102, 0.25);
   }
   .btn-whatsapp:hover {
       transform: translateY(-2px);
       box-shadow: 0 10px 28px rgba(37, 211, 102, 0.38);
   }
   
   .btn-ghost-white {
       background: rgba(255,255,255,0.12);
       border-color: rgba(255,255,255,0.5);
       color: var(--white);
       backdrop-filter: blur(6px);
   }
   .btn-ghost-white:hover {
       background: rgba(255,255,255,0.22);
       border-color: var(--white);
       transform: translateY(-2px);
   }
   
   .btn-lg { padding: 16px 36px; font-size: 16px; }
   .btn-full { width: 100%; }
   
   .svg-icon-mini { width: 18px; height: 18px; flex-shrink: 0; }
   .svg-icon { width: 22px; height: 22px; flex-shrink: 0; }
   
   /* ==========================================================================
      SECTION TITLES
      ========================================================================== */
   .section-title-wrapper { margin-bottom: 56px; }
   
   .section-subtitle {
       font-family: var(--font-body);
       font-size: 12px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 3px;
       color: var(--primary);
       display: inline-flex;
       align-items: center;
       gap: 8px;
       margin-bottom: 12px;
   }
   .section-subtitle::before {
       content: '';
       width: 28px;
       height: 2px;
       background: var(--primary);
       border-radius: 2px;
       display: inline-block;
   }
   
   .section-heading {
       font-family: var(--font-display);
       font-size: 42px;
       font-weight: 700;
       color: var(--dark);
       margin-bottom: 16px;
   }
   
   .section-desc {
       max-width: 580px;
       margin: 0 auto;
       font-size: 16px;
       color: var(--text-muted);
   }
   
   .text-center { text-align: center; }
   .text-center .section-subtitle::before { display: none; }
   .text-white { color: var(--white) !important; }
   .text-beige { color: #EDD9C0; }
   .text-muted { color: var(--text-muted); }
   
   /* ==========================================================================
      STICKY HEADER
      ========================================================================== */
   .main-header {
       position: fixed;
       top: 0; left: 0;
       width: 100%;
       z-index: 1000;
       background-color: rgba(253, 250, 246, 0.92);
       backdrop-filter: blur(14px);
       -webkit-backdrop-filter: blur(14px);
       border-bottom: 1px solid rgba(200, 118, 42, 0.1);
       transition: var(--transition);
   }
   
   .main-header.scrolled {
       background-color: rgba(253, 250, 246, 0.97);
       box-shadow: var(--shadow-md);
       border-color: rgba(200, 118, 42, 0.15);
   }
   
   .header-container {
       max-width: var(--max-width);
       margin: 0 auto;
       padding: 16px 28px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       transition: var(--transition);
   }
   .main-header.scrolled .header-container { padding: 11px 28px; }
   
   .logo {
       font-family: var(--font-display);
       font-size: 26px;
       font-weight: 700;
       color: var(--dark);
       display: flex;
       align-items: center;
       gap: 4px;
       letter-spacing: -0.3px;
   }
   .logo-accent { color: var(--primary); }
   .logo-dot { color: var(--primary); font-size: 10px; margin: 0 2px; vertical-align: middle; }
   
   .nav-menu {
       display: flex;
       align-items: center;
       gap: 6px;
   }
   
   .nav-link {
       font-size: 13px;
       font-weight: 500;
       color: var(--text-muted);
       padding: 7px 10px;
       border-radius: var(--radius-sm);
       transition: var(--transition);
   }
   .nav-link:hover, .nav-link.active {
       color: var(--primary);
       background: var(--primary-light);
   }
   
   .header-actions { display: flex; align-items: center; gap: 12px; }
   
   .call-header-btn {
       font-size: 13px;
       padding: 8px 16px;
       color: var(--text-dark);
       border: 1px solid rgba(200,118,42,0.25);
       border-radius: var(--radius-md);
       background: transparent;
   }
   .call-header-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
   
   .nav-book-btn { font-size: 13px; padding: 9px 22px; }
   
   .hamburger {
       display: none;
       flex-direction: column;
       justify-content: space-between;
       width: 24px;
       height: 18px;
       background: transparent;
       border: none;
       cursor: pointer;
       z-index: 1010;
   }
   .hamburger .bar {
       width: 100%;
       height: 2px;
       background-color: var(--dark);
       border-radius: 2px;
       transition: var(--transition);
   }
   
   /* ==========================================================================
      HERO SECTION — Illustrated Scenic Background (no photo dependency)
      ========================================================================== */
   .hero-section {
       position: relative;
       min-height: 92vh;
       padding: 150px 0 90px;
       display: flex;
       align-items: center;
       overflow: hidden;
       background-color: var(--dark);
   }
   
   /* Multi-layer atmospheric background */
   .hero-bg {
       position: absolute;
       inset: 0;
       z-index: 1;
       background:
           /* fine noise texture */
           radial-gradient(circle at 1px 1px, rgba(200,118,42,0.045) 1px, transparent 0),
           /* saffron sunrise bloom — bottom left */
           radial-gradient(ellipse 55% 45% at 0% 100%, rgba(200,90,20,0.38) 0%, transparent 60%),
           /* golden moon halo — top right */
           radial-gradient(ellipse 50% 55% at 100% 0%, rgba(212,168,83,0.22) 0%, transparent 55%),
           /* warm amber glow — mid left */
           radial-gradient(ellipse 60% 50% at 12% 38%, rgba(200,118,42,0.20) 0%, transparent 60%),
           /* deep teal horizon band */
           radial-gradient(ellipse 100% 20% at 50% 72%, rgba(20,55,70,0.45) 0%, transparent 70%),
           /* base deep-night gradient */
           linear-gradient(168deg, #1C1108 0%, #120D06 38%, #0A0F12 72%, #060A0E 100%);
       background-size: 22px 22px, auto, auto, auto, auto, auto;
   }
   
   /* Subtle animated aurora shimmer */
   .hero-bg::after {
       content: '';
       position: absolute;
       inset: 0;
       background:
           radial-gradient(ellipse 80% 30% at 50% 85%, rgba(26,80,100,0.28) 0%, transparent 60%),
           radial-gradient(ellipse 40% 40% at 80% 20%, rgba(180,100,20,0.12) 0%, transparent 55%);
       animation: heroAurora 12s ease-in-out infinite alternate;
   }
   @keyframes heroAurora {
       0%   { opacity: 0.6; transform: scaleX(1)   scaleY(1);   }
       50%  { opacity: 1;   transform: scaleX(1.04) scaleY(1.03); }
       100% { opacity: 0.7; transform: scaleX(0.97) scaleY(1.02); }
   }
   
   /* Stylized mountain / ghat silhouette using clip-path shapes */
   .hero-scene {
       position: absolute;
       inset: 0;
       z-index: 2;
       pointer-events: none;
       overflow: hidden;
   }
   
   .hero-scene svg {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 100%;
   }
   
   .hero-container {
       position: relative;
       z-index: 3;
       display: flex;
       flex-direction: column;
       justify-content: center;
   }
   
   .hero-content {
       max-width: 680px;
       color: var(--white);
       margin-bottom: 56px;
   }
   
   .hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: rgba(200, 118, 42, 0.2);
       border: 1px solid rgba(200, 118, 42, 0.4);
       color: #F0C070;
       font-size: 11px;
       font-weight: 700;
       padding: 6px 16px;
       border-radius: var(--radius-pill);
       letter-spacing: 2px;
       text-transform: uppercase;
       margin-bottom: 24px;
       backdrop-filter: blur(6px);
   }
   .hero-badge svg { width: 14px; height: 14px; }
   
   .hero-content h1 {
       font-family: var(--font-display);
       font-size: 68px;
       font-weight: 700;
       color: var(--white);
       margin-bottom: 6px;
       letter-spacing: -1.5px;
       line-height: 1.05;
   }
   .hero-content h1 em {
       font-style: italic;
       color: var(--primary-gold);
   }
   
   .hero-tagline {
       font-family: var(--font-body);
       font-size: 18px;
       font-weight: 400;
       color: rgba(255,255,255,0.72);
       margin-bottom: 20px;
       line-height: 1.5;
   }
   
   .hero-desc {
       font-size: 15px;
       color: rgba(255, 255, 255, 0.6);
       margin-bottom: 36px;
       max-width: 560px;
       line-height: 1.7;
   }
   
   .hero-ctas {
       display: flex;
       flex-wrap: wrap;
       gap: 14px;
       margin-bottom: 48px;
   }
   
   .hero-trust-row {
       display: flex;
       align-items: center;
       gap: 24px;
       flex-wrap: wrap;
   }
   
   .hero-trust-item {
       display: flex;
       align-items: center;
       gap: 8px;
       color: rgba(255,255,255,0.65);
       font-size: 13px;
       font-weight: 500;
   }
   .hero-trust-item svg {
       width: 16px; height: 16px;
       color: var(--primary-gold);
       flex-shrink: 0;
   }
   
   /* Search Bar */
   .search-bar-container {
       width: 100%;
       background: rgba(255,255,255,0.96);
       padding: 28px 28px 24px;
       border-radius: var(--radius-lg);
       box-shadow: 0 24px 60px rgba(0,0,0,0.35);
       border: 1px solid rgba(200,118,42,0.15);
       backdrop-filter: blur(12px);
   }
   
   .search-bar-label {
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 2px;
       color: var(--primary);
       margin-bottom: 18px;
       display: flex;
       align-items: center;
       gap: 8px;
   }
   .search-bar-label svg { width: 14px; height: 14px; }
   
   .quick-search-form {
       display: grid;
       grid-template-columns: 1fr 1fr 1fr 200px;
       gap: 14px;
       align-items: flex-end;
   }
   
   .search-group { display: flex; flex-direction: column; gap: 7px; }
   
   .search-group label {
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.8px;
       color: var(--text-muted);
       display: flex;
       align-items: center;
       gap: 5px;
   }
   .search-group label svg { width: 13px; height: 13px; color: var(--primary); }
   
   .search-group input,
   .search-group select {
       padding: 12px 14px;
       border: 1.5px solid #E8DED2;
       border-radius: var(--radius-md);
       background: var(--bg-light);
       color: var(--text-dark);
       font-weight: 500;
       font-size: 14px;
       transition: var(--transition);
   }
   .search-group input:focus, .search-group select:focus {
       border-color: var(--primary);
       box-shadow: 0 0 0 3px var(--primary-glow);
       background: var(--white);
   }
   
   .search-btn { height: 48px; font-size: 14px; }
   
   /* ==========================================================================
      QUICK HIGHLIGHTS STRIP
      ========================================================================== */
   .highlights-section {
       padding: 48px 0;
       background: var(--white);
       border-bottom: 1px solid rgba(200,118,42,0.08);
   }
   
   .highlights-grid {
       display: grid;
       grid-template-columns: repeat(6, 1fr);
       gap: 10px;
   }
   
   .highlight-item {
       text-align: center;
       padding: 20px 12px;
       border-radius: var(--radius-md);
       transition: var(--transition);
       border: 1px solid transparent;
   }
   .highlight-item:hover {
       border-color: rgba(200,118,42,0.15);
       background: var(--primary-light);
       transform: translateY(-4px);
   }
   
   .highlight-icon {
       width: 52px;
       height: 52px;
       margin: 0 auto 14px;
       background: var(--primary-light);
       color: var(--primary);
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 14px;
       transition: var(--transition);
   }
   .highlight-item:hover .highlight-icon {
       background: var(--primary);
       color: var(--white);
       box-shadow: var(--shadow-gold);
   }
   .highlight-icon svg { width: 24px; height: 24px; }
   
   .highlight-item h3 { font-family: var(--font-body); font-size: 13px; font-weight: 700; margin-bottom: 4px; }
   .highlight-item p { font-size: 11px; color: var(--text-muted); }
   
   /* ==========================================================================
      ABOUT SECTION
      ========================================================================== */
   .about-section { padding: 90px 0; background: var(--bg-light); }
   
   .about-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 70px;
       align-items: center;
   }
   
   .about-image-wrapper { position: relative; }
   
   .about-img {
       width: 100%;
       height: 500px;
       object-fit: cover;
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-md);
   }
   
   /* Decorative frame */
   .about-image-wrapper::before {
       content: '';
       position: absolute;
       top: -14px; left: -14px;
       right: 14px; bottom: -14px;
       border: 2px solid rgba(200,118,42,0.25);
       border-radius: calc(var(--radius-lg) + 4px);
       z-index: -1;
   }
   
   .experience-card {
       position: absolute;
       bottom: -22px;
       right: -22px;
       background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
       color: var(--white);
       padding: 24px 28px;
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-gold);
       text-align: center;
       min-width: 160px;
   }
   
   .exp-num {
       display: block;
       font-family: var(--font-display);
       font-size: 34px;
       font-weight: 700;
       line-height: 1;
       margin-bottom: 5px;
   }
   
   .exp-text {
       font-size: 11px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 1.2px;
       opacity: 0.9;
   }
   
   .about-text p { margin-bottom: 20px; color: var(--text-muted); line-height: 1.75; }
   
   .about-meta-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px;
       margin: 32px 0 36px;
       border-top: 1px solid rgba(200,118,42,0.12);
       border-bottom: 1px solid rgba(200,118,42,0.12);
       padding: 22px 0;
   }
   
   .meta-item { font-size: 14px; }
   .meta-item strong { display: block; color: var(--dark); margin-bottom: 3px; font-weight: 700; }
   .meta-item span { color: var(--text-muted); }
   
   /* ==========================================================================
      ROOMS SECTION
      ========================================================================== */
   .rooms-section {
       padding: 90px 0;
       background-color: var(--dark-section);
       position: relative;
   }
   .rooms-section::before {
       content: '';
       position: absolute;
       inset: 0;
       background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(200,118,42,0.06) 0%, transparent 60%);
       pointer-events: none;
   }
   
   /* --- Slider wrapper --- */
   .rooms-slider-outer {
       position: relative;
       margin-top: 44px;
   }
   
   .rooms-slider-viewport {
       overflow: hidden;
       border-radius: var(--radius-lg);
   }
   
   .rooms-grid {
       display: flex;
       gap: 24px;
       transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
       will-change: transform;
   }
   
   /* Each card is exactly 1/3 of viewport minus gaps */
   .room-card {
       background: var(--white);
       border-radius: var(--radius-lg);
       overflow: hidden;
       box-shadow: var(--shadow-md);
       transition: transform 0.45s cubic-bezier(0.4,0,0.2,1), box-shadow 0.45s;
       border: 1px solid rgba(255,255,255,0.04);
       flex: 0 0 calc((100% - 48px) / 3);
       min-width: calc((100% - 48px) / 3);
   }
   .room-card:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow-lg);
   }
   
   /* Slider nav arrows */
   .slider-arrow {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 48px;
       height: 48px;
       border-radius: 50%;
       background: var(--white);
       color: var(--dark);
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       z-index: 10;
       box-shadow: 0 4px 18px rgba(0,0,0,0.28);
       transition: var(--transition);
       border: none;
   }
   .slider-arrow:hover {
       background: var(--primary);
       color: var(--white);
       box-shadow: var(--shadow-gold);
       transform: translateY(-50%) scale(1.08);
   }
   .slider-arrow svg { width: 20px; height: 20px; }
   .slider-arrow-prev { left: -22px; }
   .slider-arrow-next { right: -22px; }
   .slider-arrow:disabled { opacity: 0.35; cursor: not-allowed; transform: translateY(-50%); }
   .slider-arrow:disabled:hover { background: var(--white); color: var(--dark); box-shadow: 0 4px 18px rgba(0,0,0,0.28); }
   
   /* Dot indicators */
   .slider-dots {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       margin-top: 28px;
   }
   .slider-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: rgba(200,118,42,0.25);
       cursor: pointer;
       transition: var(--transition);
       border: none;
       padding: 0;
   }
   .slider-dot.active {
       width: 24px;
       border-radius: 4px;
       background: var(--primary);
   }
   
   /* Slide counter badge */
   .slider-counter {
       text-align: center;
       margin-top: 14px;
       font-size: 13px;
       color: rgba(255,255,255,0.45);
       font-weight: 500;
       letter-spacing: 0.5px;
   }
   .slider-counter span { color: var(--primary-gold); font-weight: 700; }
   
   .room-img-wrapper {
       position: relative;
       height: 230px;
       overflow: hidden;
   }
   
   .room-img {
       width: 100%; height: 100%;
       object-fit: cover;
       transition: var(--transition-slow);
   }
   .room-card:hover .room-img { transform: scale(1.07); }
   
   .room-badge {
       position: absolute;
       top: 14px; left: 14px;
       padding: 4px 12px;
       border-radius: var(--radius-pill);
       font-family: var(--font-body);
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 0.5px;
       box-shadow: var(--shadow-sm);
   }
   .room-badge-amber { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: var(--white); }
   .room-badge-green { background: linear-gradient(135deg, #1B6B50, #0D4A35); color: var(--white); }
   .room-badge-blue { background: linear-gradient(135deg, #1A4A7A, #0D2E50); color: var(--white); }
   
   .room-content { padding: 22px 22px 20px; }
   
   .room-content h3 {
       font-family: var(--font-display);
       font-size: 21px;
       margin-bottom: 8px;
       color: var(--dark);
   }
   
   .room-desc {
       font-size: 13px;
       color: var(--text-muted);
       margin-bottom: 16px;
       line-height: 1.6;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
   }
   
   /* Facilities as chip-style pills */
   .room-facilities {
       list-style: none;
       display: flex;
       flex-wrap: wrap;
       gap: 7px;
       margin-bottom: 18px;
       padding-top: 14px;
       border-top: 1px solid rgba(200,118,42,0.1);
   }
   .room-facilities li {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       font-size: 11px;
       font-weight: 600;
       color: var(--text-dark);
       background: var(--bg-light);
       border: 1px solid rgba(200,118,42,0.14);
       border-radius: 20px;
       padding: 4px 10px;
       white-space: nowrap;
       transition: var(--transition);
   }
   .room-facilities li:hover {
       background: var(--primary-light);
       border-color: rgba(200,118,42,0.35);
       color: var(--primary);
   }
   .room-facilities svg { width: 13px; height: 13px; color: var(--primary); flex-shrink: 0; }
   
   /* Room CTAs — two full-width stacked buttons */
   .room-ctas {
       display: flex;
       flex-direction: column;
       gap: 8px;
   }
   .room-ctas .btn-avail {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 7px;
       padding: 10px 16px;
       font-size: 13px;
       font-weight: 700;
       border-radius: var(--radius-md);
       border: 1.5px solid var(--primary);
       color: var(--primary);
       background: transparent;
       cursor: pointer;
       transition: var(--transition);
       text-decoration: none;
       letter-spacing: 0.2px;
   }
   .room-ctas .btn-avail:hover {
       background: var(--primary);
       color: var(--white);
       box-shadow: var(--shadow-gold);
       transform: translateY(-1px);
   }
   .room-ctas .btn-avail svg { width: 15px; height: 15px; flex-shrink: 0; }
   
   .room-ctas .btn-wa {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       padding: 10px 16px;
       font-size: 13px;
       font-weight: 700;
       border-radius: var(--radius-md);
       background: linear-gradient(135deg, #25D366, #128C7E);
       color: var(--white);
       cursor: pointer;
       transition: var(--transition);
       text-decoration: none;
       border: none;
       letter-spacing: 0.2px;
   }
   .room-ctas .btn-wa:hover {
       transform: translateY(-1px);
       box-shadow: 0 6px 20px rgba(37,211,102,0.35);
   }
   .room-ctas .btn-wa svg { width: 16px; height: 16px; flex-shrink: 0; }
   
   /* ==========================================================================
      AMENITIES SECTION
      ========================================================================== */
   .amenities-section { padding: 90px 0; background: var(--white); }
   
   .amenities-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 18px;
       margin-top: 44px;
   }
   
   .amenity-card {
       background: var(--bg-light);
       border: 1.5px solid rgba(200,118,42,0.1);
       padding: 28px 20px;
       border-radius: var(--radius-md);
       text-align: center;
       transition: var(--transition);
   }
   .amenity-card:hover {
       background: var(--primary-light);
       transform: translateY(-5px);
       border-color: rgba(200,118,42,0.35);
       box-shadow: var(--shadow-gold);
   }
   
   .amenity-svg {
       width: 36px; height: 36px;
       margin: 0 auto 16px;
       color: var(--primary);
       display: block;
       transition: var(--transition);
   }
   .amenity-card:hover .amenity-svg { transform: scale(1.1); }
   
   .amenity-card h4 { font-family: var(--font-body); font-size: 14px; font-weight: 700; margin-bottom: 7px; }
   .amenity-card p { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
   
   /* ==========================================================================
      DINING SECTION
      ========================================================================== */
   .dining-section { padding: 90px 0; background: var(--bg-sand); }
   
   .dining-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 70px;
       align-items: center;
   }
   
   .dining-content p { margin-bottom: 20px; color: var(--text-muted); line-height: 1.75; }
   
   .dining-features {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 14px;
       margin-top: 32px;
   }
   
   .d-feat-item {
       font-size: 14px;
       font-weight: 600;
       color: var(--text-dark);
       display: flex;
       align-items: center;
       gap: 9px;
   }
   .d-feat-item svg { width: 18px; height: 18px; color: var(--emerald); flex-shrink: 0; }
   
   .dining-image-wrapper { position: relative; }
   
   .dining-img {
       width: 100%;
       height: 420px;
       object-fit: cover;
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-md);
   }
   
   /* ==========================================================================
      ATTRACTIONS SECTION
      ========================================================================== */
   .attractions-section {
       padding: 90px 0;
       background-color: var(--dark-mid);
       position: relative;
   }
   .attractions-section::before {
       content: '';
       position: absolute;
       inset: 0;
       background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(200,118,42,0.08) 0%, transparent 65%);
       pointer-events: none;
   }
   
   .attractions-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 22px;
       margin-top: 44px;
   }
   
   .attraction-card {
       background: rgba(255,255,255,0.04);
       border: 1px solid rgba(255,255,255,0.07);
       border-radius: var(--radius-lg);
       padding: 32px 22px;
       text-align: center;
       transition: var(--transition);
   }
   .attraction-card:hover {
       background: rgba(200,118,42,0.08);
       transform: translateY(-6px);
       border-color: rgba(200,118,42,0.35);
       box-shadow: 0 16px 40px rgba(0,0,0,0.3);
   }
   
   .attr-icon {
       width: 56px; height: 56px;
       background: rgba(200,118,42,0.14);
       color: var(--primary-gold);
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 16px;
       margin: 0 auto 22px;
       transition: var(--transition);
   }
   .attraction-card:hover .attr-icon {
       background: var(--primary);
       color: var(--white);
       box-shadow: var(--shadow-gold);
   }
   .attr-icon svg { width: 26px; height: 26px; }
   
   .attraction-card h3 { font-family: var(--font-display); font-size: 20px; color: var(--white); margin-bottom: 8px; }
   .attraction-card .distance {
       font-size: 12px;
       font-weight: 700;
       color: var(--primary-gold);
       text-transform: uppercase;
       letter-spacing: 0.8px;
       margin-bottom: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 5px;
   }
   .attraction-card .distance svg { width: 12px; height: 12px; }
   .attraction-card .attr-desc { font-size: 13px; color: var(--text-light); line-height: 1.6; }
   
   /* ==========================================================================
      GALLERY SECTION
      ========================================================================== */
   .gallery-section { padding: 90px 0; background: var(--bg-light); }
   
   .gallery-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 14px;
       margin-top: 44px;
   }
   
   .gallery-item {
       position: relative;
       height: 210px;
       border-radius: var(--radius-md);
       overflow: hidden;
       cursor: pointer;
       box-shadow: var(--shadow-xs);
       transition: var(--transition);
   }
   .gallery-item:first-child {
       grid-column: span 2;
       height: 280px;
   }
   .gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
   
   .gallery-item img {
       width: 100%; height: 100%;
       object-fit: cover;
       transition: var(--transition-slow);
   }
   .gallery-item:hover img { transform: scale(1.08); }
   
   .gallery-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(26,22,18,0.85) 0%, rgba(26,22,18,0.2) 60%, transparent 100%);
       display: flex;
       align-items: flex-end;
       justify-content: flex-start;
       padding: 16px;
       opacity: 0;
       transition: var(--transition);
   }
   .gallery-item:hover .gallery-overlay { opacity: 1; }
   
   .gallery-overlay span {
       color: var(--white);
       font-size: 13px;
       font-weight: 600;
       letter-spacing: 0.5px;
       display: flex;
       align-items: center;
       gap: 6px;
   }
   .gallery-overlay span::before {
       content: '';
       width: 20px;
       height: 2px;
       background: var(--primary-gold);
       display: inline-block;
   }
   
   /* ==========================================================================
      REVIEWS SECTION
      ========================================================================== */
   .reviews-section { padding: 90px 0; background: var(--white); }
   
   .reviews-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 28px;
       margin-top: 44px;
   }
   
   .review-card {
       background: var(--bg-light);
       padding: 36px 30px;
       border-radius: var(--radius-lg);
       box-shadow: var(--shadow-sm);
       border: 1.5px solid rgba(200,118,42,0.08);
       transition: var(--transition);
       position: relative;
   }
   .review-card::before {
       content: '\201C';
       position: absolute;
       top: 20px; right: 24px;
       font-family: var(--font-display);
       font-size: 80px;
       color: rgba(200,118,42,0.12);
       line-height: 1;
   }
   .review-card:hover {
       transform: translateY(-5px);
       border-color: rgba(200,118,42,0.28);
       box-shadow: var(--shadow-md);
   }
   
   .rating-stars {
       color: var(--primary);
       font-size: 18px;
       margin-bottom: 18px;
       letter-spacing: 2px;
       display: flex;
       align-items: center;
       gap: 2px;
   }
   .rating-stars svg { width: 18px; height: 18px; fill: var(--primary); }
   
   .review-text {
       font-size: 15px;
       color: var(--text-dark);
       font-style: italic;
       margin-bottom: 24px;
       line-height: 1.7;
       font-family: var(--font-display);
   }
   
   .reviewer-meta {
       display: flex;
       align-items: center;
       gap: 12px;
       border-top: 1px solid rgba(200,118,42,0.1);
       padding-top: 18px;
   }
   
   .reviewer-avatar {
       width: 40px; height: 40px;
       border-radius: 50%;
       background: linear-gradient(135deg, var(--primary), var(--primary-hover));
       color: var(--white);
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: var(--font-display);
       font-size: 18px;
       font-weight: 600;
       flex-shrink: 0;
   }
   
   .reviewer-name { font-weight: 700; font-size: 15px; color: var(--dark); margin-bottom: 2px; }
   .reviewer-tag { font-size: 12px; color: var(--text-muted); }
   
   /* ==========================================================================
      FAQ SECTION
      ========================================================================== */
   .faq-section { padding: 90px 0; background: var(--bg-sand); }
   
   .faq-accordion-wrapper { max-width: 820px; margin: 44px auto 0; }
   
   .faq-item {
       background: var(--white);
       border-radius: var(--radius-md);
       margin-bottom: 10px;
       overflow: hidden;
       box-shadow: var(--shadow-xs);
       border: 1px solid rgba(200,118,42,0.08);
       transition: var(--transition);
   }
   .faq-item.active {
       border-color: rgba(200,118,42,0.22);
       box-shadow: var(--shadow-sm);
   }
   
   .faq-header {
       width: 100%;
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 22px 24px;
       background: none;
       border: none;
       text-align: left;
       font-family: var(--font-body);
       font-size: 16px;
       font-weight: 600;
       color: var(--dark);
       cursor: pointer;
       transition: var(--transition);
   }
   .faq-header:hover { color: var(--primary); }
   .faq-item.active .faq-header { color: var(--primary); }
   
   .faq-toggle-icon {
       width: 30px; height: 30px;
       background: var(--primary-light);
       color: var(--primary);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       transition: var(--transition);
   }
   .faq-toggle-icon svg { width: 16px; height: 16px; transition: var(--transition); }
   .faq-item.active .faq-toggle-icon {
       background: var(--primary);
       color: var(--white);
   }
   .faq-item.active .faq-toggle-icon svg { transform: rotate(45deg); }
   
   .faq-body {
       max-height: 0;
       overflow: hidden;
       transition: max-height 0.38s ease-out;
   }
   .faq-body p {
       font-size: 14.5px;
       color: var(--text-muted);
       padding: 0 24px 22px;
       line-height: 1.75;
   }
   .faq-item.active .faq-body { max-height: 250px; }
   
   /* ==========================================================================
      CONTACT & BOOKING SECTION
      ========================================================================== */
   .contact-section {
       padding: 90px 0;
       background: var(--dark-section);
       position: relative;
   }
   
   .contact-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 64px;
   }
   
   .contact-lead-text { color: var(--text-light); margin-bottom: 40px; line-height: 1.7; }
   
   .contact-details-list {
       display: flex;
       flex-direction: column;
       gap: 28px;
       margin-bottom: 40px;
   }
   
   .contact-detail-item { display: flex; gap: 18px; color: var(--white); }
   
   .detail-icon {
       width: 46px; height: 46px;
       background: rgba(200,118,42,0.12);
       color: var(--primary-gold);
       border-radius: 12px;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       transition: var(--transition);
   }
   .contact-detail-item:hover .detail-icon {
       background: var(--primary);
       color: var(--white);
   }
   .detail-icon svg { width: 20px; height: 20px; }
   
   .contact-detail-item h4 { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
   .contact-detail-item p { font-size: 15px; color: var(--white); }
   .contact-detail-item a:hover { color: var(--primary-gold); }
   
   .map-container {
       border-radius: var(--radius-lg);
       overflow: hidden;
       border: 1px solid rgba(255,255,255,0.08);
       box-shadow: var(--shadow-lg);
   }
   
   /* Booking Form */
   .booking-inquiry-box {
       background: var(--white);
       border-radius: var(--radius-lg);
       padding: 40px;
       box-shadow: var(--shadow-lg);
       border: 1px solid rgba(200,118,42,0.1);
   }
   
   .booking-inquiry-box > h3 {
       font-family: var(--font-display);
       font-size: 28px;
       margin-bottom: 6px;
   }
   
   .form-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 28px; line-height: 1.6; }
   
   .booking-form { display: flex; flex-direction: column; gap: 16px; }
   
   .form-group { display: flex; flex-direction: column; gap: 7px; }
   .form-row { display: flex; gap: 16px; }
   .col-6 { width: 50%; }
   
   .form-group label {
       font-size: 11px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 1px;
       color: var(--text-muted);
       display: flex;
       align-items: center;
       gap: 5px;
   }
   .form-group label svg { width: 13px; height: 13px; color: var(--primary); }
   
   .form-group input,
   .form-group select,
   .form-group textarea {
       width: 100%;
       padding: 12px 14px;
       border: 1.5px solid #E8DED2;
       border-radius: var(--radius-md);
       background: var(--bg-light);
       font-size: 14px;
       color: var(--text-dark);
       transition: var(--transition);
   }
   .form-group input:focus,
   .form-group select:focus,
   .form-group textarea:focus {
       border-color: var(--primary);
       background: var(--white);
       box-shadow: 0 0 0 3px var(--primary-glow);
   }
   
   .form-submit-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
   
   /* ==========================================================================
      FOOTER
      ========================================================================== */
   .main-footer {
       background: var(--dark);
       color: var(--white);
       padding: 64px 0 0;
       border-top: 1px solid rgba(200,118,42,0.12);
   }
   
   .footer-grid {
       display: grid;
       grid-template-columns: 2fr 1fr 1fr 2fr;
       gap: 44px;
       margin-bottom: 56px;
   }
   
   .brand-col .logo { margin-bottom: 20px; font-size: 28px; }
   
   .footer-desc { font-size: 13px; color: var(--text-light); margin-bottom: 24px; line-height: 1.7; }
   
   .trust-stars {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       background: rgba(200,118,42,0.12);
       border: 1px solid rgba(200,118,42,0.2);
       padding: 8px 16px;
       border-radius: var(--radius-pill);
   }
   .trust-stars .stars { color: var(--primary-gold); font-size: 14px; letter-spacing: 2px; }
   .trust-stars span { color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 500; }
   
   .footer-col h4 {
       font-family: var(--font-body);
       font-size: 12px;
       font-weight: 700;
       color: var(--text-light);
       text-transform: uppercase;
       letter-spacing: 2px;
       margin-bottom: 22px;
   }
   
   .footer-links { list-style: none; display: flex; flex-direction: column; gap: 11px; }
   .footer-links a {
       font-size: 14px;
       color: rgba(255,255,255,0.65);
       display: flex;
       align-items: center;
       gap: 6px;
       transition: var(--transition);
   }
   .footer-links a::before {
       content: '';
       width: 0;
       height: 1.5px;
       background: var(--primary);
       display: inline-block;
       transition: width 0.25s ease;
   }
   .footer-links a:hover { color: var(--white); padding-left: 2px; }
   .footer-links a:hover::before { width: 10px; }
   
   .contact-col p { font-size: 14px; color: rgba(255,255,255,0.65); margin-bottom: 14px; line-height: 1.65; }
   .footer-phone { font-size: 14px !important; }
   .footer-phone strong { color: var(--primary-gold); font-size: 20px; display: block; margin-top: 4px; }
   
   .footer-bottom {
       background: rgba(0,0,0,0.25);
       padding: 24px 0;
       border-top: 1px solid rgba(255,255,255,0.04);
   }
   .footer-bottom-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 12px;
       color: var(--text-light);
   }
   
   /* ==========================================================================
      LIGHTBOX
      ========================================================================== */
   .lightbox-modal {
       display: none;
       position: fixed;
       inset: 0;
       background: rgba(10,8,5,0.97);
       z-index: 2000;
       align-items: center;
       justify-content: center;
       opacity: 0;
       transition: opacity 0.3s ease;
   }
   .lightbox-modal.active { display: flex; opacity: 1; }
   
   .lightbox-close {
       position: absolute;
       top: 22px; right: 28px;
       width: 44px; height: 44px;
       background: rgba(255,255,255,0.1);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--white);
       cursor: pointer;
       z-index: 2010;
       transition: var(--transition);
   }
   .lightbox-close svg { width: 20px; height: 20px; }
   .lightbox-close:hover { background: var(--primary); }
   
   .lightbox-content-wrapper {
       position: relative;
       max-width: 80%;
       max-height: 80%;
       display: flex;
       flex-direction: column;
       align-items: center;
   }
   
   .lightbox-img {
       max-width: 100%;
       max-height: 70vh;
       border-radius: var(--radius-md);
       box-shadow: 0 20px 60px rgba(0,0,0,0.8);
       transform: scale(0.96);
       transition: transform 0.3s ease;
   }
   .lightbox-modal.active .lightbox-img { transform: scale(1); }
   
   .lightbox-caption {
       font-family: var(--font-body);
       font-size: 14px;
       color: rgba(255,255,255,0.7);
       margin-top: 18px;
       text-align: center;
       font-weight: 500;
   }
   
   .lightbox-prev, .lightbox-next {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       width: 48px; height: 48px;
       background: rgba(255,255,255,0.08);
       border: 1px solid rgba(255,255,255,0.12);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       color: var(--white);
       cursor: pointer;
       user-select: none;
       transition: var(--transition);
       z-index: 2005;
   }
   .lightbox-prev:hover, .lightbox-next:hover { background: var(--primary); border-color: var(--primary); }
   .lightbox-prev svg, .lightbox-next svg { width: 20px; height: 20px; }
   .lightbox-prev { left: 28px; }
   .lightbox-next { right: 28px; }
   
   /* ==========================================================================
      FLOATING CTAs
      ========================================================================== */
   .desktop-floating-whatsapp {
       position: fixed;
       bottom: 30px; right: 30px;
       width: 58px; height: 58px;
       background: linear-gradient(135deg, #25D366, #128C7E);
       color: var(--white);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 6px 24px rgba(37, 211, 102, 0.4);
       z-index: 999;
       transition: var(--transition);
   }
   .desktop-floating-whatsapp:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 12px 32px rgba(37,211,102,0.5); }
   .desktop-floating-whatsapp svg { width: 28px; height: 28px; }
   
   /* Pulse ring */
   .desktop-floating-whatsapp::before {
       content: '';
       position: absolute;
       inset: -6px;
       border-radius: 50%;
       border: 2px solid rgba(37,211,102,0.4);
       animation: pulse-ring 2.5s ease-out infinite;
   }
   @keyframes pulse-ring {
       0% { transform: scale(1); opacity: 0.6; }
       100% { transform: scale(1.5); opacity: 0; }
   }
   
   .mobile-sticky-actions {
       display: none;
       position: fixed;
       bottom: 0; left: 0;
       width: 100%;
       height: 62px;
       z-index: 999;
   }
   .mobile-action-btn {
       width: 50%;
       height: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       font-size: 13px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 0.5px;
   }
   .mobile-call { background: var(--dark); color: var(--white); }
   .mobile-whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); color: var(--white); }
   .mobile-action-btn svg { width: 19px; height: 19px; }
   
   /* ==========================================================================
      RESPONSIVE
      ========================================================================== */
   @media (max-width: 1024px) {
       /* Rooms slider: show 2 cards */
       .room-card { flex: 0 0 calc((100% - 24px) / 2); min-width: calc((100% - 24px) / 2); }
       .slider-arrow-prev { left: -18px; }
       .slider-arrow-next { right: -18px; }
       .amenities-grid { grid-template-columns: repeat(3, 1fr); }
       .attractions-grid { grid-template-columns: repeat(2, 1fr); }
       .gallery-grid { grid-template-columns: repeat(3, 1fr); }
       .gallery-item:first-child { grid-column: span 1; height: 210px; }
       .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
       .highlights-grid { grid-template-columns: repeat(3, 1fr); }
       .quick-search-form { grid-template-columns: 1fr 1fr; }
   }
   
   @media (max-width: 768px) {
       html { scroll-padding-top: 70px; }
       .header-container { padding: 14px 20px; }
       .call-header-btn { display: none; }
       .hamburger { display: flex; }
   
       .nav-menu {
           position: fixed;
           top: 68px; left: -100%;
           width: 100%;
           height: calc(100vh - 68px);
           background: var(--bg-light);
           flex-direction: column;
           align-items: center;
           justify-content: flex-start;
           padding-top: 40px;
           gap: 8px;
           transition: var(--transition);
           z-index: 1005;
           overflow-y: auto;
       }
       .nav-menu.active { left: 0; }
       .nav-link { font-size: 18px; padding: 10px 24px; width: 80%; text-align: center; }
   
       .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
       .hamburger.active .bar:nth-child(2) { opacity: 0; }
       .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
   
       .hero-section { min-height: auto; padding: 120px 0 60px; }
       .hero-content h1 { font-size: 44px; }
       .hero-tagline { font-size: 16px; }
       .hero-trust-row { gap: 16px; }
       .quick-search-form { grid-template-columns: 1fr; gap: 14px; }
       .search-btn { height: 50px; }
   
       /* Rooms slider: show 1 card on mobile */
       .room-card { flex: 0 0 100%; min-width: 100%; }
       .slider-arrow { width: 38px; height: 38px; }
       .slider-arrow-prev { left: 4px; }
       .slider-arrow-next { right: 4px; }
   
       .about-grid, .dining-grid, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
       .about-image-wrapper, .dining-image-wrapper { order: 2; }
       .about-img { height: 320px; }
       .about-image-wrapper::before { display: none; }
       .experience-card { right: 0; bottom: -18px; }
       .dining-img { height: 280px; }
   
       .reviews-grid { grid-template-columns: 1fr; }
       .highlights-grid { grid-template-columns: repeat(2, 1fr); }
   
       .desktop-floating-whatsapp { display: none; }
       .mobile-sticky-actions { display: flex; }
       body { padding-bottom: 62px; }
   }
   
   @media (max-width: 480px) {
       .container { padding: 0 18px; }
       .hero-content h1 { font-size: 36px; }
       .hero-ctas { flex-direction: column; }
       .hero-ctas .btn { width: 100%; }
       .section-heading { font-size: 32px; }
       .amenities-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
       .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
       .gallery-item { height: 140px; }
       .gallery-item:first-child { height: 140px; }
       .attractions-grid { grid-template-columns: 1fr; }
       .about-meta-grid { grid-template-columns: 1fr; }
       .dining-features { grid-template-columns: 1fr; }
       .booking-inquiry-box { padding: 24px 18px; }
       .form-row { flex-direction: column; gap: 16px; }
       .col-6 { width: 100%; }
       .footer-grid { grid-template-columns: 1fr; }
       .footer-bottom-container { flex-direction: column; gap: 8px; text-align: center; }
       .lightbox-prev { left: 8px; }
       .lightbox-next { right: 8px; }
       .lightbox-content-wrapper { max-width: 92%; }
       .highlights-grid { grid-template-columns: repeat(3, 1fr); }
   }