/* ===== BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --sand:#F5EDE0;--sand-dark:#E8DCC8;--sand-medium:#D9CCBA;
  --terracotta:#C4572A;--gold:#D4A853;--gold-light:#E8D5B0;
  --brown:#2C1810;--brown-medium:#5C4033;
  --night:#0A0F1E;--night-light:#141B2D;--night-medium:#1E2640;
  --cream:#F0E6D6;--cream-muted:rgba(240,230,214,0.6);
  --font-display:'Cormorant Garamond',serif;
  --font-body:'Inter',sans-serif;
  --ease:cubic-bezier(0.33,1,0.68,1);
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-weight:300;color:var(--brown);background:var(--sand);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section-label{display:inline-block;font-family:var(--font-body);font-size:0.72rem;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:16px}
.day-section .section-label{color:var(--terracotta)}
.night-section .section-label{color:var(--gold)}
.section-title{font-family:var(--font-display);font-weight:300;font-size:clamp(1.8rem,3.5vw,2.4rem);letter-spacing:-0.02em;line-height:1.2;margin-bottom:48px}
.night-section .section-title{color:var(--cream)}
.section-divider{width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:0 auto}

/* ===== NAV ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:16px 0;transition:background 0.5s,backdrop-filter 0.5s,border-color 0.5s}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{font-family:var(--font-display);font-size:1.1rem;font-weight:400;letter-spacing:0.15em;color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,0.3)}
.nav-links{display:flex;gap:32px}
.nav-links a{font-size:0.78rem;font-weight:400;letter-spacing:0.06em;color:var(--cream);text-shadow:0 1px 8px rgba(0,0,0,0.3);transition:color 0.3s,opacity 0.3s;opacity:0.85}
.nav-links a:hover{opacity:1}
.nav-cta{font-size:0.72rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-light);border:1px solid rgba(212,168,83,0.4);padding:8px 20px;transition:all 0.3s;text-shadow:0 1px 8px rgba(0,0,0,0.3)}
.nav-cta:hover{background:rgba(212,168,83,0.15);border-color:var(--gold)}
.nav.scrolled{background:rgba(245,237,224,0.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(212,168,83,0.12)}
.nav.scrolled .nav-logo,.nav.scrolled .nav-links a{color:var(--brown);text-shadow:none}
.nav.scrolled .nav-cta{color:var(--terracotta);border-color:rgba(196,87,42,0.3);text-shadow:none}
.nav.scrolled .nav-cta:hover{background:rgba(196,87,42,0.08)}
.nav.nav-dark.scrolled{background:rgba(10,15,30,0.92)}
.nav.nav-dark.scrolled .nav-logo,.nav.nav-dark.scrolled .nav-links a{color:var(--cream);text-shadow:none}
.nav.nav-dark.scrolled .nav-cta{color:var(--gold-light);border-color:rgba(212,168,83,0.3);text-shadow:none}
.nav.nav-dark.scrolled .nav-cta:hover{background:rgba(212,168,83,0.15);border-color:var(--gold)}
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;width:28px;height:20px;position:relative;z-index:101}
.nav-hamburger span{display:block;width:100%;height:1.5px;background:var(--cream);position:absolute;left:0;transition:all 0.3s var(--ease)}
.nav.scrolled .nav-hamburger span{background:var(--brown)}
.nav.nav-dark .nav-hamburger span,.nav.nav-dark.scrolled .nav-hamburger span{background:var(--cream)}
.nav-hamburger span:nth-child(1){top:0}
.nav-hamburger span:nth-child(2){top:9px}
.nav-hamburger span:nth-child(3){top:18px}
.nav-hamburger.active span:nth-child(1){top:9px;transform:rotate(45deg)}
.nav-hamburger.active span:nth-child(2){opacity:0}
.nav-hamburger.active span:nth-child(3){top:9px;transform:rotate(-45deg)}

/* ===== HERO ===== */
.hero{position:relative;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(0.9) contrast(1.05)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0.1) 40%,rgba(245,237,224,0.35) 78%,#F5EDE0 100%)}
.hero-content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.hero-location{display:flex;align-items:center;gap:6px;font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--gold-light);text-shadow:0 2px 12px rgba(0,0,0,0.4)}
.hero-location iconify-icon{font-size:0.85rem}
.hero-title{font-family:var(--font-display);font-weight:300;font-size:clamp(4rem,12vw,9rem);letter-spacing:0.2em;color:#fff;text-shadow:0 4px 40px rgba(0,0,0,0.3);line-height:1}
.hero-subtitle{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(1rem,2vw,1.3rem);color:var(--gold-light);text-shadow:0 2px 12px rgba(0,0,0,0.3);margin-top:-4px}
.hero-line{width:60px;height:1px;background:var(--gold);margin:12px 0}
@property --border-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.hero-cta{position:relative;display:inline-block;padding:16px 44px;background:rgba(255,255,255,0.08);backdrop-filter:blur(8px);border:none;color:var(--gold-light);font-family:var(--font-body);font-size:0.76rem;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;cursor:pointer;text-shadow:0 1px 8px rgba(0,0,0,0.3);transition:background 0.4s,transform 0.3s,box-shadow 0.3s;margin-top:4px}
.hero-cta::before{content:'';position:absolute;inset:0;padding:1px;background:conic-gradient(from var(--border-angle),transparent 30%,var(--gold) 50%,transparent 70%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:border-spin 4s linear infinite}
@keyframes border-spin{to{--border-angle:360deg}}
.hero-cta:hover{background:rgba(212,168,83,0.15);transform:translateY(-2px);box-shadow:0 8px 32px rgba(212,168,83,0.2)}
.scroll-indicator{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2}
.scroll-indicator span{font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--cream-muted)}
.scroll-line{width:1px;height:36px;background:var(--gold);animation:scroll-pulse 2s ease-in-out infinite;transform-origin:top}
@keyframes scroll-pulse{0%,100%{transform:scaleY(0.3);opacity:0.3}50%{transform:scaleY(1);opacity:1}}

/* ===== PHILOSOPHY ===== */
.philosophy{padding:120px 0 80px;position:relative}
.philosophy::before{content:'';position:absolute;top:0;left:30%;width:400px;height:400px;background:radial-gradient(ellipse,rgba(212,168,83,0.06),transparent 70%);pointer-events:none}
.philosophy-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center}
.philosophy-text h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-0.02em;line-height:1.3;margin-bottom:24px;color:var(--brown)}
.philosophy-text p{font-size:0.82rem;line-height:1.75;color:var(--brown-medium);margin-bottom:16px}
.philosophy-image{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/5}
.philosophy-image img{width:100%;height:100%;object-fit:cover;filter:saturate(0.85) contrast(1.05)}
.philosophy-image::after{content:'';position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(to bottom,transparent,rgba(245,237,224,0.6));pointer-events:none}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:80px;padding-top:40px;border-top:1px solid rgba(212,168,83,0.15)}
.stat{text-align:center}
.stat-value{display:block;font-family:var(--font-display);font-weight:300;font-size:1.8rem;color:var(--brown);letter-spacing:-0.02em}
.stat-label{display:block;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--brown-medium);margin-top:4px}

/* ===== SUITES ===== */
.suites{padding:80px 0 120px;position:relative}
.suites::before{content:'';position:absolute;bottom:0;right:10%;width:500px;height:500px;background:radial-gradient(ellipse,rgba(196,87,42,0.04),transparent 70%);pointer-events:none}
.suites-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.suite-card{border-radius:12px;overflow:hidden;background:rgba(255,255,255,0.5);border:1px solid rgba(212,168,83,0.1);transition:transform 0.5s var(--ease),box-shadow 0.5s var(--ease)}
.suite-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(44,24,16,0.08)}
.suite-image{position:relative;aspect-ratio:4/3;overflow:hidden}
.suite-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s var(--ease);filter:saturate(0.85) contrast(1.05)}
.suite-card:hover .suite-image img{transform:scale(1.05)}
.suite-image::after{content:'';position:absolute;bottom:0;left:0;right:0;height:30%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,0.5));pointer-events:none}
.suite-info{padding:24px}
.suite-info h3{font-family:var(--font-display);font-weight:400;font-size:1.3rem;letter-spacing:0.02em;margin-bottom:8px}
.suite-info p{font-size:0.76rem;color:var(--brown-medium);line-height:1.6;margin-bottom:12px}
.suite-price{font-size:0.72rem;font-weight:500;letter-spacing:0.06em;color:var(--terracotta)}

/* ===== TRANSITION ===== */
.transition-section{position:relative;height:100vh;background:linear-gradient(to bottom,var(--sand) 0%,var(--sand-dark) 15%,#8B6F4E 30%,#4A3A2E 45%,#1E1B2E 65%,var(--night) 85%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.star{position:absolute;border-radius:50%;background:var(--gold-light);animation:twinkle var(--dur,3s) ease-in-out var(--del,0s) infinite}
@keyframes twinkle{0%,100%{opacity:0}50%{opacity:0.9}}
.transition-content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.transition-line{width:48px;height:1px;background:var(--gold);opacity:0.5}
.transition-quote{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(1.4rem,3.5vw,2.6rem);color:var(--gold);line-height:1.7;padding:32px 24px;text-shadow:0 2px 20px rgba(0,0,0,0.3)}

/* ===== NIGHT SECTIONS BASE ===== */
.night-section{background:var(--night);color:var(--cream);position:relative}
.night-section p{color:var(--cream-muted)}
.night-glow{position:absolute;width:600px;height:600px;background:radial-gradient(ellipse,rgba(212,168,83,0.06),transparent 70%);pointer-events:none;top:-200px;right:-100px}

/* ===== WELLNESS ===== */
.wellness{padding:120px 0 80px}
.wellness-hero{position:relative;border-radius:16px;overflow:hidden;margin-bottom:60px;aspect-ratio:16/7}
.wellness-hero img{width:100%;height:100%;object-fit:cover;filter:saturate(0.8) contrast(1.1)}
.wellness-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(10,15,30,0.85) 0%,rgba(10,15,30,0.4) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:center;padding:48px 56px;max-width:50%}
.wellness-overlay h2{font-family:var(--font-display);font-weight:300;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--cream);letter-spacing:-0.02em;line-height:1.3;margin-bottom:16px}
.wellness-overlay p{font-size:0.8rem;line-height:1.75;color:var(--cream-muted)}
.treatments-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.treatment-card{padding:32px 28px;border-radius:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(212,168,83,0.1);transition:transform 0.4s var(--ease),border-color 0.4s,box-shadow 0.4s}
.treatment-card:hover{transform:translateY(-3px);border-color:rgba(212,168,83,0.25);box-shadow:0 12px 40px rgba(212,168,83,0.08)}
.treatment-icon{width:48px;height:48px;border-radius:12px;background:rgba(212,168,83,0.1);border:1px solid rgba(212,168,83,0.15);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--gold);font-size:1.2rem}
.treatment-card h3{font-family:var(--font-display);font-weight:400;font-size:1.15rem;color:var(--cream);margin-bottom:10px}
.treatment-card p{font-size:0.76rem;line-height:1.7;margin-bottom:14px}
.treatment-duration{font-size:0.68rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold)}

/* ===== CUISINE ===== */
.cuisine{padding:80px 0 100px}
.cuisine::before{content:'';position:absolute;top:20%;left:-5%;width:500px;height:500px;background:radial-gradient(ellipse,rgba(196,87,42,0.05),transparent 70%);pointer-events:none}
.cuisine-bento{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;gap:20px;min-height:420px}
.bento-large{grid-row:1/3;position:relative;border-radius:14px;overflow:hidden}
.bento-large img{width:100%;height:100%;object-fit:cover;filter:saturate(0.85) contrast(1.05)}
.bento-large::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(10,15,30,0.8) 0%,transparent 50%)}
.bento-overlay{position:absolute;bottom:0;left:0;right:0;padding:32px;z-index:2}
.bento-overlay h3{font-family:var(--font-display);font-weight:400;font-size:1.4rem;color:var(--cream);margin-bottom:8px}
.bento-overlay p{font-size:0.76rem;color:var(--cream-muted)}
.bento-text-card{height:100%;padding:32px;border-radius:14px;background:rgba(255,255,255,0.03);border:1px solid rgba(212,168,83,0.1);display:flex;flex-direction:column;justify-content:center;transition:border-color 0.4s,box-shadow 0.4s}
.bento-text-card:hover{border-color:rgba(212,168,83,0.25);box-shadow:0 8px 32px rgba(212,168,83,0.06)}
.bento-text-card h3{font-family:var(--font-display);font-weight:400;font-size:1.2rem;color:var(--cream);margin-bottom:10px}
.bento-text-card p{font-size:0.76rem;line-height:1.7}

/* ===== EXCURSIONS ===== */
.excursions{padding:80px 0 120px}
.excursions-list{display:flex;flex-direction:column;gap:24px}
.excursion-card{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:center;padding:20px;border-radius:14px;background:rgba(255,255,255,0.02);border:1px solid rgba(212,168,83,0.08);transition:transform 0.4s var(--ease),border-color 0.4s,box-shadow 0.4s}
.excursion-card:hover{transform:translateX(4px);border-color:rgba(212,168,83,0.2);box-shadow:0 8px 32px rgba(212,168,83,0.06)}
.excursion-image{aspect-ratio:3/2;border-radius:10px;overflow:hidden;position:relative}
.excursion-image img{width:100%;height:100%;object-fit:cover;filter:saturate(0.85) contrast(1.05)}
.excursion-image::after{content:'';position:absolute;bottom:0;left:0;right:0;height:25%;background:linear-gradient(to bottom,transparent,rgba(10,15,30,0.4));pointer-events:none}
.excursion-info h3{font-family:var(--font-display);font-weight:400;font-size:1.3rem;color:var(--cream);margin-bottom:8px}
.excursion-info p{font-size:0.78rem;line-height:1.7;margin-bottom:12px}
.excursion-duration{font-size:0.68rem;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:6px}
.excursion-duration iconify-icon{font-size:0.8rem}

/* ===== RESERVE ===== */
.reserve{position:relative;min-height:80vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.reserve-bg{position:absolute;inset:0}
.reserve-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(0.7) contrast(1.1)}
.reserve-overlay{position:absolute;inset:0;background:rgba(10,15,30,0.75)}
.reserve-content{position:relative;z-index:2;text-align:center;max-width:560px;padding:60px 24px}
.reserve-content h2{font-family:var(--font-display);font-weight:300;font-size:clamp(2rem,5vw,3.2rem);color:var(--cream);letter-spacing:-0.02em;margin-bottom:16px}
.reserve-content>p{font-size:0.85rem;color:var(--cream-muted);margin-bottom:36px}
.reserve-cta{display:inline-block;padding:18px 52px;background:linear-gradient(135deg,var(--gold),var(--terracotta));color:#fff;font-family:var(--font-body);font-size:0.78rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;border-radius:2px;transition:transform 0.3s,box-shadow 0.3s}
.reserve-cta:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(212,168,83,0.3)}
.reserve-contact{margin-top:40px;display:flex;gap:32px;justify-content:center;flex-wrap:wrap}
.reserve-contact span{font-size:0.76rem;color:var(--cream-muted);letter-spacing:0.04em}

/* ===== FOOTER ===== */
.footer{background:var(--night);border-top:1px solid rgba(212,168,83,0.08);padding:60px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-col h4{font-family:var(--font-display);font-weight:400;font-size:1rem;color:var(--cream);letter-spacing:0.06em;margin-bottom:16px}
.footer-col p{font-size:0.76rem;color:var(--cream-muted);line-height:1.7}
.footer-col a{display:block;font-size:0.76rem;color:var(--cream-muted);margin-bottom:10px;transition:color 0.3s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.06);padding-top:24px;text-align:center}
.footer-bottom p{font-size:0.68rem;color:rgba(240,230,214,0.35);letter-spacing:0.06em}

/* ===== ANIMATIONS ===== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.8s var(--ease),transform 0.8s var(--ease)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity 0.8s var(--ease),transform 0.8s var(--ease)}
.reveal-left.visible{opacity:1;transform:translateX(0)}
.stagger-up .reveal-child{opacity:0;transform:translateY(24px);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease)}
.stagger-up.visible .reveal-child{opacity:1;transform:translateY(0)}
.stagger-up.visible .reveal-child:nth-child(1){transition-delay:0s}
.stagger-up.visible .reveal-child:nth-child(2){transition-delay:0.12s}
.stagger-up.visible .reveal-child:nth-child(3){transition-delay:0.24s}
.stagger-up.visible .reveal-child:nth-child(4){transition-delay:0.36s}

/* ===== MOBILE NAV OVERLAY ===== */
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(10,15,30,0.96);backdrop-filter:blur(20px);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:28px}
.mobile-overlay.active{display:flex}
.mobile-overlay a{font-family:var(--font-display);font-size:1.6rem;font-weight:300;color:var(--cream);letter-spacing:0.06em;transition:color 0.3s}
.mobile-overlay a:hover{color:var(--gold)}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
  .philosophy-grid{grid-template-columns:1fr;gap:40px}
  .philosophy-image{aspect-ratio:3/2;max-height:400px}
  .suites-grid{grid-template-columns:repeat(2,1fr)}
  .suites-grid .suite-card:nth-child(3){grid-column:1/-1;max-width:400px;justify-self:center}
  .wellness-hero{aspect-ratio:16/9}
  .wellness-overlay{max-width:60%}
  .excursion-card{grid-template-columns:220px 1fr}
}
@media(max-width:768px){
  .nav-links,.nav-cta{display:none}
  .nav-hamburger{display:block}
  .hero-title{letter-spacing:0.12em}
  .stats-strip{grid-template-columns:repeat(2,1fr);gap:20px}
  .suites-grid{grid-template-columns:1fr}
  .suites-grid .suite-card:nth-child(3){max-width:none}
  .treatments-grid{grid-template-columns:1fr}
  .cuisine-bento{grid-template-columns:1fr;grid-template-rows:auto}
  .bento-large{grid-row:auto;min-height:280px}
  .wellness-overlay{max-width:100%;padding:32px}
  .wellness-hero{aspect-ratio:auto;min-height:360px}
  .excursion-card{grid-template-columns:1fr;gap:16px}
  .excursion-image{aspect-ratio:16/9}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .reserve-contact{flex-direction:column;gap:12px}
}
@media(max-width:480px){
  .container{padding:0 16px}
  .hero-title{font-size:clamp(2.8rem,14vw,4rem)}
  .section-title{font-size:1.6rem}
  .philosophy{padding:80px 0 60px}
  .suites,.wellness,.cuisine,.excursions{padding:60px 0}
}