/* ═══════════════════════════════════════════
   VELORIA GRAND — Design System v3.0
   ═══════════════════════════════════════════ */
:root {
  --void: #03030A;
  --midnight: #080818;
  --obsidian: #0D0D2B;
  --gold: #C9A84C;
  --gold-light: #E8C97A;
  --gold-muted: #8A6F35;
  --ivory: #F5F0E8;
  --silk: #B8B0A0;
  --purple-deep: #1A0A3D;
  --glass: rgba(255,255,255,0.04);
  --glass-border: rgba(201,168,76,0.15);
  --forest: #080F0A;
  --sage: #2A3A2E;
  --sage-light: #3D5A42;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Jost',sans-serif; background:var(--void); color:var(--ivory); overflow-x:hidden; cursor:none; }
a { color:inherit; text-decoration:none; }
button { cursor:none; font-family:inherit; border:none; background:none; color:inherit; }
input,textarea,select { font-family:inherit; }
ul { list-style:none; }

/* ── Scroll Progress ── */
.scroll-progress { position:fixed; top:0; left:0; height:2px; background:var(--gold); z-index:100000; width:0; transition:width 0.1s linear; }

/* ── Custom Cursor ── */
.cursor-dot { position:fixed; top:0; left:0; z-index:99999; width:20px; height:20px; border:1.5px solid var(--gold); border-radius:50%; pointer-events:none; transition:width 0.3s var(--ease),height 0.3s var(--ease),background 0.3s,border-color 0.3s,opacity 0.3s; transform:translate(-50%,-50%); mix-blend-mode:difference; opacity:0; }
.cursor-dot.visible { opacity:1; }
.cursor-dot.hover { width:60px; height:60px; background:rgba(201,168,76,0.25); border-color:var(--gold-light); }

/* ── Page Loader ── */
.page-loader { position:fixed; inset:0; z-index:100000; background:var(--void); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity 0.6s ease,visibility 0.6s ease; }
.page-loader.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loader-text { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,5vw,4rem); color:var(--gold); letter-spacing:0.3em; display:flex; gap:2px; }
.loader-text span { opacity:0; animation:letterIn 0.4s var(--ease) forwards; }
.loader-line { width:0; height:1px; background:var(--gold); margin-top:16px; animation:lineExpand 1s 0.8s var(--ease) forwards; }
@keyframes letterIn { to { opacity:1 } }
@keyframes lineExpand { to { width:120px } }

/* ── Glass ── */
.glass { background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); }

/* ── Buttons ── */
.btn-gold { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; background:linear-gradient(135deg,var(--gold),var(--gold-light),var(--gold)); background-size:200% 200%; color:var(--void); font-weight:500; font-size:0.9rem; letter-spacing:0.08em; text-transform:uppercase; border-radius:4px; animation:shimmer 3s infinite; transition:transform 0.3s var(--ease),box-shadow 0.3s; }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(201,168,76,0.3); }
.btn-gold .arrow { transition:transform 0.3s; }
.btn-gold:hover .arrow { transform:translateX(4px); }
.btn-ghost { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border:1px solid var(--gold); color:var(--gold); font-weight:400; font-size:0.9rem; letter-spacing:0.08em; text-transform:uppercase; border-radius:4px; position:relative; overflow:hidden; transition:color 0.4s,transform 0.3s; }
.btn-ghost::before { content:''; position:absolute; inset:0; background:var(--gold); transform:translateY(100%); transition:transform 0.4s var(--ease); }
.btn-ghost:hover { color:var(--void); transform:translateY(-2px); }
.btn-ghost:hover::before { transform:translateY(0); }
.btn-ghost span { position:relative; z-index:1; }
@keyframes shimmer { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ── Scroll Reveal — FIXED: always visible as fallback ── */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.8s var(--ease),transform 0.8s var(--ease); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s }
.reveal-delay-2 { transition-delay:0.2s }
.reveal-delay-3 { transition-delay:0.3s }
.reveal-delay-4 { transition-delay:0.4s }
.reveal-delay-5 { transition-delay:0.5s }
/* No-JS fallback */
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; } }

/* ── Text Reveal ── */
.text-reveal-word { display:inline-block; clip-path:inset(0 100% 0 0); animation:textReveal 1s var(--ease) forwards; animation-play-state:paused; }
.text-reveal-word.animate { animation-play-state:running; }
@keyframes textReveal { to { clip-path:inset(0 0% 0 0) } }

/* ── Orbs ── */
.orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; animation:drift 20s ease-in-out infinite; }
.orb-1 { width:400px; height:400px; background:rgba(201,168,76,0.08); top:10%; left:15%; animation-duration:25s; }
.orb-2 { width:350px; height:350px; background:rgba(26,10,61,0.3); top:50%; right:10%; animation-duration:30s; animation-delay:-5s; }
.orb-3 { width:300px; height:300px; background:rgba(201,168,76,0.05); bottom:15%; left:50%; animation-duration:22s; animation-delay:-10s; }
@keyframes drift { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(30px,-20px) scale(1.05)} 66%{transform:translate(-20px,15px) scale(0.97)} }

/* ── Navigation ── */
.main-nav { position:fixed; top:0; left:0; right:0; z-index:1000; height:72px; padding:0 48px; display:flex; align-items:center; justify-content:space-between; transition:all 0.5s var(--ease); }
.main-nav.scrolled { height:64px; background:rgba(3,3,10,0.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--glass-border); }
.nav-logo { font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:300; letter-spacing:0.3em; color:var(--gold); text-transform:uppercase; }
.nav-links { display:flex; gap:32px; align-items:center; }
.nav-links a { font-size:0.85rem; letter-spacing:0.06em; color:var(--silk); text-transform:uppercase; position:relative; padding:4px 0; transition:color 0.3s; }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:var(--gold); transition:width 0.4s var(--ease); }
.nav-links a:hover { color:var(--ivory); }
.nav-links a:hover::after { width:100%; }
.nav-book { padding:10px 24px; border:1px solid var(--gold); font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); position:relative; overflow:hidden; transition:color 0.4s; border-radius:4px; }
.nav-book::before { content:''; position:absolute; inset:0; background:var(--gold); transform:translateY(100%); transition:transform 0.4s var(--ease); }
.nav-book:hover { color:var(--void); }
.nav-book:hover::before { transform:translateY(0); }
.nav-book span { position:relative; z-index:1; }
.hamburger { display:none; flex-direction:column; gap:6px; width:28px; padding:4px 0; z-index:1002; }
.hamburger span { display:block; height:1px; background:var(--gold); transition:all 0.4s var(--ease); }
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
.mobile-menu { position:fixed; inset:0; z-index:1001; background:rgba(3,3,10,0.97); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:32px; opacity:0; visibility:hidden; transition:all 0.5s var(--ease); }
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-menu a { font-family:'Cormorant Garamond',serif; font-size:2rem; color:var(--ivory); letter-spacing:0.1em; transform:translateY(20px); opacity:0; transition:all 0.5s var(--ease); }
.mobile-menu.open a { transform:translateY(0); opacity:1; }

/* ── Hero ── */
.hero { position:relative; height:100svh; min-height:700px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding-top:72px; padding-bottom:120px; box-sizing:border-box; }
.hero-bg { position:absolute; inset:0; z-index:0; background:url('images/hero.png') center/cover no-repeat; }
.hero-bg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 50%,rgba(26,10,61,0.6) 0%,transparent 50%),radial-gradient(ellipse at 70% 30%,rgba(201,168,76,0.06) 0%,transparent 40%),linear-gradient(to bottom,rgba(3,3,10,0.3),rgba(3,3,10,0.7)); }
.hero-noise { position:absolute; inset:0; z-index:1; opacity:0.03; pointer-events:none; }
.hero-content { position:relative; z-index:2; padding:0 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; width:100%; max-width:1000px; margin:0 auto; }
.hero-eyebrow { position:relative; display:block; font-size:0.7rem; font-weight:400; letter-spacing:0.35em; text-transform:uppercase; color:var(--gold); margin-bottom:24px; }
.hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(3rem,8vw,6.5rem); font-weight:300; line-height:1.1; color:var(--ivory); margin-bottom:24px; }
.hero-title em { font-family:'IM Fell English',serif; font-style:italic; color:var(--gold); }
.hero-sub { font-size:1rem; color:var(--silk); letter-spacing:0.04em; margin-bottom:40px; max-width:500px; margin-left:auto; margin-right:auto; }
.hero-ctas { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.scroll-indicator { position:absolute; bottom:140px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:12px; }
.scroll-line { width:1px; height:60px; background:linear-gradient(to bottom,var(--gold),transparent); animation:scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{opacity:0.3;transform:scaleY(0.6)} 50%{opacity:1;transform:scaleY(1)} }
.scroll-text { font-size:0.65rem; letter-spacing:0.2em; color:var(--silk); text-transform:uppercase; writing-mode:vertical-rl; }

/* Booking Widget */
.booking-widget { position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:3; width:90%; max-width:900px; padding:24px 32px; border-radius:16px 16px 0 0; border-top:2px solid var(--gold-muted); display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; }
.booking-field { flex:1; min-width:140px; }
.booking-field label { display:block; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--silk); margin-bottom:8px; }
.booking-field input,.booking-field select { width:100%; padding:10px 12px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:4px; color:var(--ivory); font-size:0.9rem; transition:border-color 0.3s,box-shadow 0.3s; }
.booking-field input:focus,.booking-field select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,0.15); }
.booking-submit { flex:0 0 auto; padding:12px 24px; background:linear-gradient(135deg,var(--gold),var(--gold-light)); color:var(--void); font-weight:500; font-size:0.85rem; letter-spacing:0.05em; border-radius:4px; transition:box-shadow 0.3s,transform 0.3s; }
.booking-submit:hover { box-shadow:0 4px 24px rgba(201,168,76,0.3); transform:translateY(-2px); }

/* ── Section Common ── */
.section-pad { padding:128px 48px; }
.section-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2.5rem,5vw,4.5rem); font-weight:300; text-align:center; margin-bottom:8px; }
.section-line { width:80px; height:1px; background:var(--gold); margin:16px auto; }
.section-subtitle { text-align:center; font-size:0.85rem; color:var(--silk); letter-spacing:0.06em; margin-bottom:64px; }

/* ── Rooms ── */
.rooms-section { background:var(--midnight); min-height:100vh; }
.rooms-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1200px; margin:0 auto; }
.room-card { position:relative; aspect-ratio:3/4; border-radius:16px; overflow:hidden; min-height:450px; transition:transform 0.5s var(--ease),box-shadow 0.5s; cursor:pointer; }
.room-card:hover { transform:translateY(-12px); box-shadow:0 30px 80px rgba(201,168,76,0.2); }
.room-card-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 0.6s var(--ease); }
.room-card:hover .room-card-bg { transform:scale(1.08); }
.room-card-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(3,3,10,0.9) 0%,rgba(3,3,10,0.3) 40%,transparent 70%); }
.room-badge { position:absolute; top:16px; left:16px; z-index:2; padding:4px 12px; border-radius:999px; font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase; font-weight:500; }
.room-badge.featured { background:var(--gold); color:var(--void); }
.room-badge.new { background:var(--ivory); color:var(--void); }
.room-card-content { position:absolute; bottom:0; left:0; right:0; padding:24px; z-index:2; }
.room-card-name { font-family:'Cormorant Garamond',serif; font-size:1.5rem; margin-bottom:4px; }
.room-card-price { color:var(--gold); font-size:0.9rem; margin-bottom:8px; }
.room-specs { display:flex; gap:12px; flex-wrap:wrap; font-size:0.75rem; color:var(--silk); margin-bottom:12px; opacity:0; transition:opacity 0.4s 0.1s; }
.room-card:hover .room-specs { opacity:1; }
.view-suite { font-size:0.8rem; color:var(--gold); letter-spacing:0.06em; text-transform:uppercase; position:relative; display:inline-block; opacity:0; transition:opacity 0.4s 0.2s; }
.room-card:hover .view-suite { opacity:1; }
.view-suite::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:1px; background:var(--gold); transition:width 0.3s; }
.view-suite:hover::after { width:100%; }

/* ── Room Modal ── */
.room-modal { position:fixed; inset:0; z-index:10000; background:rgba(3,3,10,0.95); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all 0.5s var(--ease); }
.room-modal.open { opacity:1; visibility:visible; }
.room-modal-inner { width:90%; max-width:1000px; max-height:90vh; display:grid; grid-template-columns:1fr 1fr; border-radius:16px; overflow:hidden; background:var(--obsidian); transform:translateY(60px); transition:transform 0.6s var(--ease); }
.room-modal.open .room-modal-inner { transform:translateY(0); }
.modal-gallery { position:relative; min-height:400px; }
.modal-gallery-main { width:100%; height:100%; background-size:cover; background-position:center; }
.modal-info { padding:40px; overflow-y:auto; }
.modal-info h2 { font-family:'Cormorant Garamond',serif; font-size:2rem; margin-bottom:8px; }
.modal-info .price { color:var(--gold); font-size:1.1rem; margin-bottom:24px; }
.modal-amenities { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.modal-amenity { padding:6px 14px; font-size:0.75rem; border-radius:999px; border:1px solid var(--glass-border); color:var(--silk); }
.modal-close { position:absolute; top:24px; right:24px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:var(--ivory); border:1px solid rgba(255,255,255,0.2); border-radius:50%; transition:transform 0.3s,border-color 0.3s; z-index:10; }
.modal-close:hover { transform:rotate(90deg); border-color:var(--gold); }

/* ── Dining ── */
.dining-section { background:var(--void); }
.dining-tabs { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:48px; }
.dining-tab { padding:10px 24px; border-radius:999px; font-size:0.85rem; letter-spacing:0.04em; border:1px solid var(--glass-border); color:var(--silk); transition:all 0.3s var(--ease); cursor:pointer; }
.dining-tab.active { background:var(--gold); color:var(--void); border-color:var(--gold); }
.dining-tab:hover { border-color:var(--gold-muted); }
.dining-panel { display:none; max-width:1100px; margin:0 auto; opacity:0; transition:opacity 0.3s; }
.dining-panel.active { display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; opacity:1; }
.dining-img { width:100%; height:500px; border-radius:16px; background-size:cover; background-position:center; }
.dining-content .cuisine-badge { display:inline-block; padding:4px 14px; border-radius:999px; background:rgba(201,168,76,0.15); color:var(--gold); font-size:0.75rem; letter-spacing:0.08em; margin-bottom:16px; }
.dining-content h3 { font-family:'Cormorant Garamond',serif; font-size:2.5rem; margin-bottom:8px; }
.dining-hours { color:var(--silk); font-size:0.85rem; margin-bottom:16px; }
.dining-desc { color:var(--silk); line-height:1.7; margin-bottom:24px; }
.menu-toggle { color:var(--gold); font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; margin-top:24px; display:flex; align-items:center; gap:8px; cursor:pointer; }
.menu-toggle .arrow { transition:transform 0.3s; }
.menu-toggle.open .arrow { transform:rotate(180deg); }
.menu-expandable { max-height:0; overflow:hidden; transition:max-height 0.6s var(--ease); }
.menu-expandable.open { max-height:2000px; }
.menu-cats { display:flex; gap:8px; margin:24px 0 16px; flex-wrap:wrap; }
.menu-cat { padding:6px 16px; border-radius:999px; font-size:0.8rem; border:1px solid var(--glass-border); color:var(--silk); transition:all 0.3s; cursor:pointer; }
.menu-cat.active { background:var(--gold); color:var(--void); border-color:var(--gold); }
.menu-items { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.menu-item { padding:16px; border-radius:8px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.04); transition:border-color 0.3s; }
.menu-item:hover { border-color:var(--glass-border); }
.menu-item-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.menu-item-name { font-weight:500; font-size:0.95rem; }
.menu-item-price { color:var(--gold); font-size:0.9rem; }
.menu-item-desc { font-size:0.8rem; color:var(--silk); line-height:1.5; }
.menu-item-tag { display:inline-block; margin-top:6px; padding:2px 8px; border-radius:4px; font-size:0.65rem; background:rgba(201,168,76,0.15); color:var(--gold); }

/* ── Spa ── */
.spa-section { background:var(--forest); min-height:100vh; }
.spa-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; }
.spa-card { background:#0D1A10; border:1px solid rgba(100,180,120,0.12); border-radius:20px; overflow:hidden; text-align:center; transition:transform 0.5s var(--ease),box-shadow 0.5s,border-color 0.4s; }
.spa-card:hover { transform:translateY(-10px); box-shadow:0 32px 80px rgba(80,180,100,0.12); border-color:rgba(100,180,120,0.35); }
.spa-card-image { height:180px; position:relative; overflow:hidden; background-size:cover; background-position:center; }
.spa-card-image::before { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(5,15,10,0.15) 0%, rgba(5,15,10,0.45) 100%); z-index:1; pointer-events:none; transition:opacity 0.4s ease; }
.spa-card:hover .spa-card-image::before { opacity:0.6; }
.spa-card:hover .spa-card-image::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,0.06) 50%,transparent 70%); animation:shimmerSweep 1.2s ease forwards; z-index:2; }
@keyframes shimmerSweep { from{transform:translateX(-100%)} to{transform:translateX(100%)} }
.spa-card-overlay-dark { position:absolute; inset:0; background:linear-gradient(to bottom, rgba(5,15,10,0.15) 0%, rgba(5,15,10,0.4) 100%); z-index:1; }
.spa-card-body { padding:28px 28px 32px; }
.spa-card-icon { font-size:28px; margin-bottom:16px; display:block; }
.spa-card-name { font-family:'Cormorant Garamond',serif; font-size:22px; color:var(--ivory); margin-bottom:12px; display:block; }
.spa-card-duration { display:inline-block; padding:4px 14px; background:rgba(100,180,120,0.1); border:1px solid rgba(100,180,120,0.2); border-radius:999px; color:rgba(122,200,140,0.8); font-size:0.7rem; letter-spacing:0.05em; margin-bottom:10px; }
.spa-card-price { display:block; font-family:'Cormorant Garamond',serif; font-size:24px; color:#7aaa8a; margin-bottom:16px; }
.spa-card-benefits { list-style:none; padding:0; margin:0 0 24px; text-align:left; }
.spa-card-benefits li { font-size:0.8rem; color:rgba(184,176,160,0.7); padding:4px 0 4px 14px; position:relative; }
.spa-card-benefits li::before { content:'·'; position:absolute; left:0; color:rgba(122,200,140,0.5); }
.spa-card-cta { width:100%; padding:14px; background:none; border:1px solid rgba(100,180,120,0.25); border-radius:8px; color:rgba(122,200,140,0.8); font-family:'Jost',sans-serif; font-size:0.7rem; letter-spacing:0.15em; transition:all 0.3s; }
.spa-card-cta:hover { background:rgba(100,180,120,0.08); border-color:rgba(100,180,120,0.5); color:#7aaa8a; }

/* ── Experiences ── */
.exp-section { background:linear-gradient(180deg,var(--midnight) 0%,var(--void) 100%); }
.exp-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:1200px; margin:0 auto; }
.exp-card { background:#08081A; border:1px solid rgba(201,168,76,0.1); border-radius:16px; overflow:hidden; transition:transform 0.4s var(--ease),box-shadow 0.4s,border-color 0.3s; }
.exp-card:hover { transform:translateY(-8px); box-shadow:0 28px 70px rgba(201,168,76,0.1); border-color:rgba(201,168,76,0.3); }
.exp-visual { height:130px; position:relative; overflow:hidden; background-size:cover; background-position:center; }
.exp-visual::before { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(3,5,15,0.2) 0%, rgba(3,5,30,0.6) 100%); z-index:1; pointer-events:none; transition:opacity 0.4s ease; }
.exp-card:hover .exp-visual::before { opacity:0.5; }
.exp-body { padding:20px 20px 24px; }
.exp-name { font-family:'Cormorant Garamond',serif; font-size:18px; color:var(--ivory); margin-bottom:8px; }
.exp-desc { font-size:0.75rem; color:var(--silk); line-height:1.5; margin-bottom:16px; }
.exp-cta { font-size:0.65rem; letter-spacing:0.15em; color:rgba(201,168,76,0.6); background:none; border:none; padding:0; font-family:'Jost',sans-serif; transition:color 0.2s; }
.exp-cta:hover { color:var(--gold); }

/* ── Story ── */
.story-section { background:var(--obsidian); }
.story-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:64px; max-width:1200px; margin:0 auto; align-items:center; }
.story-image { width:100%; height:600px; border-radius:16px; background-size:cover; background-position:center; position:relative; }
.story-caption { position:absolute; bottom:24px; left:24px; font-size:0.8rem; color:var(--gold); letter-spacing:0.06em; }
.story-content h2 { font-family:'Cormorant Garamond',serif; font-size:clamp(2rem,4vw,3.5rem); margin-bottom:24px; }
.story-content p { color:var(--silk); line-height:1.8; margin-bottom:16px; font-size:0.95rem; }
.timeline { margin-top:48px; display:flex; position:relative; padding:24px 0; }
.timeline::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--gold-muted); }
.timeline-node { flex:1; text-align:center; position:relative; }
.timeline-dot { width:12px; height:12px; border-radius:50%; background:var(--gold); margin:0 auto 12px; position:relative; z-index:1; }
.timeline-dot.active { animation:dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0.4)} 50%{box-shadow:0 0 0 8px rgba(201,168,76,0)} }
.timeline-year { font-family:'Cormorant Garamond',serif; font-size:1.2rem; color:var(--gold); margin-bottom:4px; }
.timeline-text { font-size:0.75rem; color:var(--silk); }
.marquee-strip { overflow:hidden; padding:24px 0; margin-top:48px; border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); }
.marquee-inner { display:flex; gap:48px; white-space:nowrap; animation:marqueeScroll 20s linear infinite; }
@keyframes marqueeScroll { to { transform:translateX(-50%) } }
.marquee-item { font-size:0.8rem; letter-spacing:0.1em; color:var(--silk); text-transform:uppercase; flex-shrink:0; }

/* ── Testimonials ── */
.testimonials-section { background:var(--void); }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; }
.testimonial-card { padding:32px; border-radius:16px; background:var(--glass); border:1px solid var(--glass-border); border-left:3px solid var(--gold-muted); transition:all 0.4s var(--ease); }
.testimonial-card:hover { border-left-color:var(--gold); box-shadow:0 8px 32px rgba(201,168,76,0.08); }
.testimonial-stars { display:flex; gap:4px; margin-bottom:16px; }
.testimonial-stars svg { width:16px; height:16px; fill:var(--gold); }
.testimonial-quote { font-family:'IM Fell English',serif; font-style:italic; font-size:1rem; line-height:1.7; color:var(--ivory); margin-bottom:20px; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.testimonial-avatar { width:40px; height:40px; border-radius:50%; background:var(--gold-muted); display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-size:0.9rem; color:var(--void); font-weight:600; }
.testimonial-name { font-size:0.85rem; font-weight:500; }
.testimonial-meta { font-size:0.75rem; color:var(--silk); }

/* ── Contact ── */
.contact-section { background:var(--void); }
.contact-layout { display:grid; grid-template-columns:1fr 1.2fr; gap:64px; max-width:1100px; margin:0 auto; align-items:start; }
.contact-info h2 { font-family:'Cormorant Garamond',serif; font-size:3rem; margin-bottom:24px; }
.contact-detail { padding:12px 0; border-bottom:1px solid rgba(255,255,255,0.05); font-size:0.9rem; color:var(--silk); }
.contact-detail strong { color:var(--ivory); display:block; margin-bottom:4px; }
.form-group { margin-bottom:24px; }
.form-group label { display:block; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--silk); margin-bottom:8px; }
.form-group input,.form-group textarea,.form-group select { width:100%; padding:12px 16px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:4px; color:var(--ivory); font-size:0.9rem; transition:border-color 0.3s,box-shadow 0.3s; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(201,168,76,0.15); }
.map-panel { padding:48px; border-radius:16px; min-height:500px; display:flex; flex-direction:column; justify-content:center; }
.map-visual { position:relative; width:100%; height:280px; margin-bottom:32px; }
.island { position:absolute; width:60px; height:36px; border-radius:50%; background:rgba(201,168,76,0.15); border:1px solid var(--gold-muted); display:flex; align-items:center; justify-content:center; font-size:0.6rem; color:var(--gold); letter-spacing:0.05em; }
.map-coords { font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--ivory); margin-bottom:8px; }
.map-detail { font-size:0.85rem; color:var(--silk); line-height:1.7; }
.transfer-badges { display:flex; gap:16px; margin-top:16px; }
.transfer-badge { display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:8px; background:rgba(255,255,255,0.03); border:1px solid var(--glass-border); font-size:0.8rem; color:var(--silk); }

/* ── Footer ── */
.site-footer { background:var(--void); padding:96px 48px 32px; border-top:1px solid var(--glass-border); }
.footer-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:48px; flex-wrap:wrap; gap:32px; }
.footer-tagline { font-size:0.85rem; color:var(--silk); margin-top:4px; }
.footer-links { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }
.footer-col h4 { font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:16px; }
.footer-col a { display:block; font-size:0.85rem; color:var(--silk); padding:4px 0; transition:color 0.3s; }
.footer-col a:hover { color:var(--ivory); }
.footer-newsletter { display:flex; gap:0; max-width:400px; margin:48px auto; border-radius:4px; overflow:hidden; }
.footer-newsletter input { flex:1; padding:12px 16px; background:rgba(255,255,255,0.04); border:1px solid var(--glass-border); border-right:none; color:var(--ivory); font-size:0.85rem; }
.footer-newsletter input:focus { outline:none; border-color:var(--gold); }
.footer-newsletter button { padding:12px 24px; background:var(--gold); color:var(--void); font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase; font-weight:500; transition:background 0.3s; }
.footer-newsletter button:hover { background:var(--gold-light); }
.social-icons { display:flex; gap:12px; margin-top:16px; }
.social-icon { width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; transition:all 0.3s; }
.social-icon:hover { background:var(--gold); border-color:var(--gold); color:var(--void); }
.social-icon svg { width:16px; height:16px; }
.footer-bottom { text-align:center; padding-top:32px; border-top:1px solid rgba(255,255,255,0.05); font-size:0.75rem; color:var(--silk); }
.footer-bottom span { display:block; margin-top:4px; color:rgba(255,255,255,0.3); }

/* ── Toast ── */
.toast { position:fixed; bottom:-80px; right:24px; z-index:100001; padding:16px 24px; border-radius:8px; background:var(--obsidian); border:1px solid var(--glass-border); display:flex; align-items:center; gap:12px; font-size:0.9rem; transition:bottom 0.4s var(--ease); }
.toast.show { bottom:24px; }
.toast-success .toast-icon { color:#4CAF50; }
.toast-icon { font-size:1.2rem; }

/* ── Back to Top ── */
.back-to-top { position:fixed; bottom:32px; right:32px; z-index:9998; width:44px; height:44px; border-radius:50%; background:var(--gold); color:var(--void); display:flex; align-items:center; justify-content:center; font-size:1.2rem; opacity:0; visibility:hidden; transition:all 0.3s var(--ease); box-shadow:0 4px 20px rgba(201,168,76,0.3); }
.back-to-top.visible { opacity:1; visibility:visible; }
.back-to-top:hover { transform:translateY(-4px) rotate(360deg); }

/* ── Currency ── */
.currency-select { background:transparent; border:1px solid var(--glass-border); color:var(--silk); padding:4px 8px; border-radius:4px; font-size:0.75rem; margin-right:16px; }
.currency-select option { background:var(--void); color:var(--ivory); }

/* ══════ RESPONSIVE ══════ */
@media(max-width:1024px) {
  .rooms-grid,.spa-grid,.testimonials-grid { grid-template-columns:repeat(2,1fr); }
  .exp-grid { grid-template-columns:repeat(3,1fr); }
  .story-layout,.contact-layout { grid-template-columns:1fr; }
  .dining-panel.active { grid-template-columns:1fr; }
  .dining-img { height:300px; }
  .footer-links { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  .section-pad { padding:80px 24px; }
  .main-nav { height:56px; padding:0 24px; }
  .nav-links { display:none; }
  .hamburger { display:flex; }
  .rooms-grid,.spa-grid,.testimonials-grid { grid-template-columns:1fr; }
  .exp-grid { grid-template-columns:repeat(2,1fr); }
  .room-modal-inner { grid-template-columns:1fr; }
  .modal-gallery { height:250px; }
  .booking-widget { flex-direction:column; padding:16px; width:100%; border-radius:12px 12px 0 0; }
  .booking-field { min-width:100%; }
  .hero-ctas { flex-direction:column; align-items:center; }
  .hero { padding-top:60px; }
  .menu-items { grid-template-columns:1fr; }
  .footer-top { flex-direction:column; }
  .footer-links { grid-template-columns:1fr 1fr; }
  .cursor-dot { display:none; }
  body { cursor:auto; }
  .scroll-indicator { bottom:180px; }
  .spa-card-image { height:140px; }
}
@media(max-width:480px) { .exp-grid { grid-template-columns:1fr; } .hero-title { font-size:2.5rem; } }

/* ══════════════════════════════════════════════
   EXPERIENCE MODAL SYSTEM
══════════════════════════════════════════════ */

/* ── Enhanced Enquire Button ── */
.exp-card { cursor:pointer; }
.exp-cta {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:0.65rem;
  letter-spacing:0.15em;
  color:rgba(201,168,76,0.65);
  background:none;
  border:1px solid rgba(201,168,76,0.18);
  border-radius:999px;
  padding:7px 16px;
  font-family:'Jost',sans-serif;
  transition:all 0.35s cubic-bezier(0.22,1,0.36,1);
  position:relative;
  overflow:hidden;
}
.exp-cta::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(201,168,76,0.08),transparent);
  transform:translateX(-100%);
  transition:transform 0.5s ease;
}
.exp-cta:hover {
  color:var(--gold);
  border-color:rgba(201,168,76,0.55);
  background:rgba(201,168,76,0.05);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(201,168,76,0.15);
}
.exp-cta:hover::before { transform:translateX(100%); }
.exp-cta-arrow {
  display:inline-block;
  transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.exp-cta:hover .exp-cta-arrow { transform:translateX(5px); }

/* ── Modal Overlay ── */
.exp-modal-overlay {
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(2,4,12,0);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  pointer-events:none;
  transition:background 0.45s ease, backdrop-filter 0.45s ease;
}
.exp-modal-overlay.active {
  background:rgba(2,4,12,0.78);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  pointer-events:all;
}

/* ── Modal Panel ── */
.exp-modal-panel {
  position:relative;
  width:100%;
  max-width:780px;
  max-height:90vh;
  overflow-y:auto;
  background:linear-gradient(155deg,rgba(14,18,32,0.97),rgba(8,10,20,0.99));
  border:1px solid rgba(201,168,76,0.18);
  border-radius:24px;
  box-shadow:0 40px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.04) inset;
  opacity:0;
  transform:scale(0.88) translateY(32px);
  transition:opacity 0.45s cubic-bezier(0.22,1,0.36,1), transform 0.45s cubic-bezier(0.22,1,0.36,1);
  scrollbar-width:thin;
  scrollbar-color:rgba(201,168,76,0.2) transparent;
}
.exp-modal-overlay.active .exp-modal-panel {
  opacity:1;
  transform:scale(1) translateY(0);
}

/* ── Close Button ── */
.exp-modal-close {
  position:absolute;
  top:18px;
  right:20px;
  z-index:10;
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  color:rgba(245,240,232,0.7);
  font-size:22px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:all 0.25s ease;
  backdrop-filter:blur(8px);
}
.exp-modal-close:hover {
  background:rgba(201,168,76,0.15);
  border-color:rgba(201,168,76,0.4);
  color:var(--gold);
  transform:rotate(90deg);
}

/* ── Modal Image Zone ── */
.exp-modal-img-wrap { position:relative; height:300px; overflow:hidden; border-radius:24px 24px 0 0; }
.exp-modal-img {
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  transition:transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.exp-modal-overlay.active .exp-modal-img { transform:scale(1.04); }
.exp-modal-img-gradient {
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(5,8,20,0) 30%, rgba(5,8,20,0.85) 100%);
  pointer-events:none;
}
.exp-modal-badge {
  position:absolute;
  bottom:20px;
  left:24px;
  background:rgba(201,168,76,0.15);
  border:1px solid rgba(201,168,76,0.35);
  backdrop-filter:blur(10px);
  border-radius:999px;
  padding:6px 16px;
  font-family:'Jost',sans-serif;
  font-size:0.65rem;
  letter-spacing:0.14em;
  color:var(--gold);
  text-transform:uppercase;
}

/* ── Modal Body Content ── */
.exp-modal-body { padding:32px 36px 36px; }
.exp-modal-category {
  font-family:'Jost',sans-serif;
  font-size:0.65rem;
  letter-spacing:0.2em;
  color:rgba(201,168,76,0.6);
  text-transform:uppercase;
  margin-bottom:10px;
}
.exp-modal-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem,4vw,2.6rem);
  font-weight:400;
  color:var(--ivory);
  line-height:1.15;
  margin-bottom:16px;
}
.exp-modal-desc {
  font-size:0.9rem;
  color:var(--silk);
  line-height:1.75;
  margin-bottom:24px;
}

/* ── Chips Row ── */
.exp-modal-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:24px;
}
.exp-chip {
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.1);
  font-family:'Jost',sans-serif;
  font-size:0.72rem;
  color:rgba(245,240,232,0.65);
  letter-spacing:0.04em;
}
.exp-chip-icon { font-size:0.85rem; opacity:0.7; }

/* ── Highlights Grid ── */
.exp-modal-highlights {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:28px;
}
.exp-highlight {
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(201,168,76,0.1);
  border-radius:12px;
  padding:16px 18px;
  transition:border-color 0.3s ease;
}
.exp-highlight:hover { border-color:rgba(201,168,76,0.3); }
.exp-highlight-label {
  display:block;
  font-family:'Jost',sans-serif;
  font-size:0.62rem;
  letter-spacing:0.14em;
  color:rgba(201,168,76,0.55);
  text-transform:uppercase;
  margin-bottom:6px;
}
.exp-highlight-value {
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;
  color:var(--ivory);
}

/* ── Footer ── */
.exp-modal-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:20px;
  border-top:1px solid rgba(201,168,76,0.1);
  flex-wrap:wrap;
}
.exp-modal-price-wrap { display:flex; flex-direction:column; gap:2px; }
.exp-modal-price-label {
  font-family:'Jost',sans-serif;
  font-size:0.62rem;
  letter-spacing:0.12em;
  color:rgba(201,168,76,0.5);
  text-transform:uppercase;
}
.exp-modal-price {
  font-family:'Cormorant Garamond',serif;
  font-size:1.7rem;
  color:var(--gold);
}
.exp-modal-book-btn {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 28px;
  background:linear-gradient(135deg,#2a5a35,#3a7a48);
  border:none;
  border-radius:999px;
  font-family:'Jost',sans-serif;
  font-size:0.75rem;
  letter-spacing:0.12em;
  color:#F5F0E8;
  cursor:pointer;
  text-decoration:none;
  transition:all 0.35s cubic-bezier(0.22,1,0.36,1);
  position:relative;
  overflow:hidden;
}
.exp-modal-book-btn::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,#3a7a48,#4a9a5a);
  opacity:0;
  transition:opacity 0.3s ease;
}
.exp-modal-book-btn:hover { transform:translateY(-3px); box-shadow:0 14px 40px rgba(42,90,53,0.5); }
.exp-modal-book-btn:hover::before { opacity:1; }
.exp-modal-book-btn span { position:relative; z-index:1; transition:transform 0.3s ease; }
.exp-modal-book-btn:hover span { transform:translateX(4px); }

/* no-scroll when modal open */
body.exp-modal-open { overflow:hidden; }

@media(max-width:600px) {
  .exp-modal-img-wrap { height:220px; }
  .exp-modal-body { padding:24px 20px 28px; }
  .exp-modal-highlights { grid-template-columns:1fr; }
  .exp-modal-footer { flex-direction:column; align-items:flex-start; }
  .exp-modal-book-btn { width:100%; justify-content:center; }
}