:root{--ink:#0f1a17;--deep:#12332e;--moss:#4f7a5a;--clay:#8c6144;--mist:#eef3ef;--line:#d5dfd8;--serif:'Fraunces',Georgia,serif;--sans:'Poppins',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.7;font-weight:300;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15}
em{font-style:italic;color:var(--clay)}
/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:.9rem clamp(1rem,4vw,3rem);color:#fff;transition:background .3s,color .3s,box-shadow .3s}
.site-header.solid{background:#fff;color:var(--ink);box-shadow:0 1px 0 var(--line)}
.logo img{height:46px;width:auto}.logo-black{display:none}
.solid .logo-white{display:none}.solid .logo-black{display:block}
.nav{display:flex;align-items:center;gap:2rem;font-size:.9rem;font-weight:400}
.nav a{text-decoration:none}.nav a:hover{opacity:.7}
.nav-cta{border:1px solid currentColor;padding:.5rem 1.2rem;border-radius:99px}
.burger{display:none;background:none;border:0;width:40px;height:40px;position:relative;color:inherit}
.burger span{position:absolute;left:8px;right:8px;height:2px;background:currentColor;transition:.3s}
.burger span:first-child{top:15px}.burger span:last-child{top:23px}
/* hero */
.hero{min-height:100svh;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:6rem 1.25rem 3rem}
.hero-in{max-width:900px}
.hero h1{font-size:clamp(2.8rem,9vw,6.5rem);letter-spacing:-.01em;margin-bottom:1.2rem}
.hero h1 em{color:#fff}
.hero p{font-size:clamp(1rem,2.4vw,1.35rem);font-weight:400}
.hero .sub{margin-top:.4rem;opacity:.85;font-weight:300}
/* intro */
.intro{background:var(--deep);color:#fff;text-align:center;padding:clamp(4rem,9vw,7rem) 1.25rem}
.intro>*{max-width:760px;margin-inline:auto}
.intro h2{font-size:clamp(2rem,5vw,3.4rem);margin-bottom:1.5rem}
.intro .lead{font-size:1.1rem;margin-bottom:1.2rem;font-weight:400}
.intro em{color:#d9b99b}
.intro p{opacity:.9}
/* about */
.about{display:grid;grid-template-columns:1fr 2fr;gap:3rem;padding-block:clamp(4rem,8vw,7rem)}
.year{display:block;color:var(--clay);font-weight:500;margin-bottom:.6rem}
.about-side h3{font-size:clamp(1.6rem,3vw,2.2rem)}
.about-text p{margin-bottom:1.2rem;color:#33423d}
.about-text .big{font-size:1.2rem;color:var(--ink)}
.about-text strong{font-weight:500;color:var(--ink)}
.btn{display:inline-block;background:var(--deep);color:#fff;text-decoration:none;padding:.9rem 2.2rem;border-radius:99px;font-weight:400;margin-top:.6rem;transition:background .2s}
.btn:hover{background:var(--moss)}
.btn-light{background:#fff;color:var(--deep)}.btn-light:hover{background:var(--mist)}
/* gallery */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid figure{position:relative;overflow:hidden;border-radius:6px;cursor:zoom-in;aspect-ratio:4/3;background:var(--mist)}
.grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.grid figure:hover img{transform:scale(1.04)}
.grid figcaption{position:absolute;inset:auto 0 0 0;padding:2rem 1rem .8rem;color:#fff;font-size:.85rem;background:linear-gradient(transparent,rgba(0,0,0,.65))}
/* band */
.band{margin-top:clamp(4rem,8vw,7rem);background:var(--mist);text-align:center;padding:clamp(3.5rem,8vw,6rem) 1.25rem}
.band h2{font-size:clamp(2rem,5.5vw,4rem);margin-bottom:2rem}
.video{padding-block:clamp(3rem,7vw,6rem) 0}
.video video{width:100%;aspect-ratio:16/9;border-radius:8px;background:#000}
/* amenities */
.amenities{background:var(--deep);color:#fff;margin-top:clamp(3rem,7vw,6rem);padding:clamp(4rem,8vw,6rem) 1.25rem}
.amenities h2{text-align:center;font-size:clamp(2rem,5vw,3.2rem);margin-bottom:2.5rem}
.amenities ul{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem;max-width:900px;margin-inline:auto}
.amenities li{padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:1.15rem}
.amenities em{font-family:var(--serif);color:#d9b99b}
/* enquire */
.enquire{width:min(640px,100% - 2.5rem);margin:clamp(4rem,8vw,6rem) auto}
.enquire h2{text-align:center;font-size:clamp(2rem,5vw,3rem);margin-bottom:2rem}
form{display:grid;gap:1rem}
input,textarea{width:100%;font:inherit;padding:.95rem 1.1rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
input:focus,textarea:focus{outline:2px solid var(--moss);border-color:transparent}
button[type=submit]{font:inherit;font-weight:400;background:#000;color:#fff;border:0;border-radius:6px;padding:.95rem;cursor:pointer}
button[type=submit]:hover{background:#333}
.notice{padding:.8rem 1rem;border-radius:6px;margin-bottom:1rem;text-align:center}
.ok{background:#e3f1e6;color:#1d5a2b}.err{background:#fbe6e3;color:#8a2a1e}
/* marquee */
.marquee{overflow:hidden;background:var(--ink);color:#fff;padding:1.6rem 0}
.marquee div{display:flex;width:max-content;animation:slide 30s linear infinite}
.marquee span{font-family:var(--serif);font-size:clamp(1.6rem,4vw,3rem);white-space:nowrap}
.marquee em{color:#d9b99b}
@keyframes slide{to{transform:translateX(-50%)}}
/* pairs & info */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(3rem,6vw,5rem)}
.pair img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px}
.info{text-align:center;padding-block:clamp(2.5rem,5vw,4rem) 0}
.info h3{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:1rem}
.info p{max-width:560px;margin-inline:auto;color:#33423d}
.grid-sm{margin-top:clamp(3rem,6vw,5rem)}
/* footer & floats */
.footer{margin-top:clamp(4rem,8vw,6rem);padding:2rem 1.25rem;background:var(--mist);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.9rem}
.footer a{text-decoration:none}
.wa{position:fixed;right:20px;bottom:20px;z-index:40;width:58px;height:58px;border-radius:50%;background:#25d366;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.wa img{width:32px}
.callnow{display:none;position:fixed;left:16px;bottom:20px;z-index:40;background:#008a00;color:#fff;text-decoration:none;padding:.8rem 1.4rem;border-radius:99px;font-weight:500;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;padding:1rem;cursor:zoom-out}
.lightbox.show{display:flex}.lightbox img{max-height:90vh;object-fit:contain}
.lightbox button{position:absolute;top:12px;right:18px;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer}
/* responsive */
@media(max-width:900px){
  .about{grid-template-columns:1fr;gap:1.5rem}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .burger{display:block}
  .nav{position:absolute;inset:0 0 auto 0;padding:5.5rem 1.5rem 2rem;flex-direction:column;align-items:flex-start;gap:1.2rem;background:#fff;color:var(--ink);font-size:1.1rem;transform:translateY(-100%);transition:transform .35s;z-index:-1;box-shadow:0 10px 30px rgba(0,0,0,.1)}
  .nav.open{transform:none}
  .site-header:has(.nav.open){background:#fff;color:var(--ink)}
  .site-header:has(.nav.open) .logo-white{display:none}.site-header:has(.nav.open) .logo-black{display:block}
  .amenities ul{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
  .callnow{display:block}
  .footer{justify-content:center;text-align:center;padding-bottom:5rem}
}
@media(max-width:480px){.grid{gap:.6rem}.logo img{height:38px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee div{animation:none}}

/* ===== animation ===== */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--clay);transform:scaleX(0);transform-origin:0 50%;z-index:60;pointer-events:none}
.js .reveal{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),clip-path 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
.js .grid figure.reveal{clip-path:inset(12% 8% 12% 8% round 6px)}
.js .grid figure.reveal.in{clip-path:inset(0 round 6px)}
.js .pair img.reveal{clip-path:inset(0 100% 0 0 round 6px);transform:none}
.js .pair img.reveal.in{clip-path:inset(0 round 6px)}
.js .amenities li.reveal{transform:translateX(-32px)}
.js .amenities li.reveal.in{transform:none}
@media(prefers-reduced-motion:no-preference){
  .js .hero-in h1,.js .hero-in p{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
  .js .hero-in p{animation-delay:.25s}.js .hero-in .sub{animation-delay:.4s}
  .js .site-header{animation:drop .8s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes rise{from{opacity:0;transform:translateY(46px)}}
@keyframes drop{from{transform:translateY(-100%)}}
.btn,.nav-cta,button[type=submit]{transition:transform .25s,background .25s,color .25s,box-shadow .25s}
.btn:hover,button[type=submit]:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.18)}
.nav-cta:hover{background:#fff;color:var(--ink);opacity:1}
.grid figure{transition:box-shadow .4s}.grid figure:hover{box-shadow:0 14px 30px rgba(0,0,0,.2)}
.marquee:hover div{animation-play-state:paused}
.burger[aria-expanded=true] span:first-child{top:19px;transform:rotate(45deg)}
.burger[aria-expanded=true] span:last-child{top:19px;transform:rotate(-45deg)}

/* ===== extra responsive ===== */
@media(min-width:1600px){html{font-size:112.5%}.wrap{width:min(1400px,100% - 4rem)}}
@media(min-width:2200px){html{font-size:125%}.wrap{width:min(1700px,100% - 6rem)}}
@media(max-width:1100px){.nav{gap:1.2rem}.about{gap:2rem}}
@media(max-width:900px){.hero{padding-inline:1.5rem}.amenities ul{gap:0 2rem}}
@media(max-width:760px){
  .site-header{padding-inline:max(1rem,env(safe-area-inset-left))}
  .nav{max-height:100svh;overflow-y:auto}
  .btn{width:100%;text-align:center}.band .btn{width:auto}
  .wa{bottom:max(20px,env(safe-area-inset-bottom))}
}
@media(max-width:600px){
  .hero h1{font-size:clamp(2.4rem,13vw,3.6rem)}
  .intro,.band,.amenities{padding-inline:1rem}
  .amenities li{font-size:1rem}
  .marquee span{font-size:1.4rem}
}
@media(max-width:380px){.grid{grid-template-columns:1fr}.wrap,.enquire{width:calc(100% - 1.5rem)}.callnow{padding:.7rem 1rem;font-size:.85rem}}
@media(max-height:520px) and (orientation:landscape){.hero{min-height:auto;padding:6rem 1.5rem 3rem}}