:root{
  --teal:#23b1ba;
  --teal-deep:#16939b;
  --brown:#745642;
  --brown-deep:#5a4333;
  --sand:#f4eee8;
  --cream:#fbf8f4;
  --ink:#172125;
  --muted:#59656c;
  --white:#ffffff;
  --header-bg:rgba(14, 25, 29, 0.72);
  --border:rgba(116, 86, 66, 0.16);
  --shadow:0 18px 50px rgba(15, 23, 30, 0.12);
  --radius:24px;
  --radius-sm:18px;
  --container:1200px;
}

*{box-sizing:border-box}
html {
    scroll-behavior: smooth;
}

body * {
  scroll-behavior: smooth;
}

.hero-reveal,
.reveal-group,
.reveal-item {
  opacity: 0;
  transform: translateY(48px) scale(.985);
  transition: opacity .85s ease, transform .95s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--delay, 0ms);
}

.hero-reveal.is-visible,
.reveal-group.is-visible,
.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.hero-actions.hero-reveal {
  transition-duration: 1.05s;
}

.section-heading.reveal-group p,
.section-heading.reveal-group h2,
.story-reveal p,
.story-reveal h2 {
  opacity: inherit;
}

.experience-card.reveal-item,
.room-card.reveal-item,
.service-item.reveal-item {
  will-change: transform, opacity;
}


.parallax-section,
.hero,
section {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}
body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{
  width:min(calc(100% - 2rem),var(--container));
  margin-inline:auto;
}
.narrow{max-width:900px}
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
  backdrop-filter:blur(16px);
  background:var(--header-bg);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav-wrap{
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand img{
  width:152px;
  height:auto;
  object-fit:contain;
}
.desktop-nav{
  display:flex;
  align-items:center;
  gap:1.6rem;
}
.desktop-nav a{
  color:rgba(255,255,255,0.92);
  font-weight:700;
  letter-spacing:.02em;
  font-size:.95rem;
  position:relative;
}
.desktop-nav a:not(.book-now)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:var(--teal);
  transition:width .28s ease;
}
.desktop-nav a:hover::after{width:100%}
.book-now{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:.85rem 1.2rem;
  border-radius:999px;
  background:linear-gradient(135deg,var(--teal) 0%,#35c6ce 100%);
  color:var(--white)!important;
  box-shadow:0 10px 30px rgba(35,177,186,.28);
  transition:transform .25s ease, box-shadow .25s ease;
}
.book-now:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(35,177,186,.34)}
.menu-toggle{
  display:none;
  width:52px;
  height:52px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.08);
  cursor:pointer;
  padding:0;
}
.menu-toggle span{
  display:block;
  width:22px;
  height:2px;
  margin:5px auto;
  background:#fff;
  transition:transform .25s ease, opacity .25s ease;
}
.mobile-nav{
  display:none;
  padding:0 1rem 1rem;
  background:rgba(10,17,20,0.95);
}
.mobile-nav a{
  color:#fff;
  display:block;
  padding:1rem .5rem;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-weight:700;
}
.mobile-book{margin-top:1rem; text-align:center}

.parallax{
  position:relative;
  background-image:var(--bg-image);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
}
.hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero-overlay,
.story-overlay,
.services-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(8,16,19,.42) 0%,rgba(8,16,19,.58) 100%);
}
.hero-content,
.story-band .container,
.services-band .container{
  position:relative;
  z-index:1;
}
.hero-content{
  padding-top:110px;
  color:#fff;
}
.eyebrow{
  margin:0 0 1rem;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.eyebrow.accent{color:var(--teal)}
.eyebrow.light{color:#ddf9fa}
h1,h2,h3{
  margin:0;
  font-family:'Sora',sans-serif;
  line-height:1.1;
}
h1{
  max-width:820px;
  font-size:clamp(2.6rem,7vw,5.5rem);
  margin-bottom:1rem;
}
.hero .lead{
  max-width:680px;
  font-size:clamp(1.05rem,2vw,1.35rem);
  color:rgba(255,255,255,.92);
  margin:0 0 2rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:1rem 1.4rem;
  border-radius:999px;
  font-weight:800;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,var(--teal) 0%,#41d3db 100%);
  color:#fff;
  box-shadow:0 14px 34px rgba(35,177,186,.28);
}
.btn-secondary{
  color:#fff;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(255,255,255,.08);
}
.scroll-indicator{
  position:absolute;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:2;
  width:34px;
  height:54px;
  border:2px solid rgba(255,255,255,.6);
  border-radius:999px;
  display:grid;
  place-items:start center;
  padding-top:10px;
}
.scroll-indicator span{
  width:6px;
  height:12px;
  border-radius:999px;
  background:#fff;
  animation:scrollDot 1.6s infinite;
}
@keyframes scrollDot{
  0%{transform:translateY(0);opacity:1}
  70%{transform:translateY(16px);opacity:0}
  100%{transform:translateY(0);opacity:0}
}
.content-section{
  padding:110px 0;
}
.light-section{background:linear-gradient(180deg,var(--cream) 0%,#fff 100%)}
.section-heading{
  max-width:760px;
  margin-bottom:3rem;
}
.section-heading.center{text-align:center;margin-inline:auto;margin-bottom:3.4rem}
.section-heading.white h2,.section-heading.white p{color:#fff}
.section-heading h2{
  font-size:clamp(2rem,4vw,3.6rem);
  margin-bottom:1rem;
}
.section-heading p{
  margin:0;
  font-size:1.05rem;
  color:var(--muted);
}
.experience-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}
.card,
.room-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.experience-card img,
.room-card img{
  aspect-ratio:4/3;
  width:100%;
  object-fit:cover;
}
.card-body,
.room-content{
  padding:1.5rem;
}
.card-body h3,
.room-content h3{
  font-size:1.35rem;
  margin-bottom:.75rem;
}
.card-body p,
.room-content p{
  margin:0;
  color:var(--muted);
}
.story-band{
  min-height:58vh;
  display:flex;
  align-items:center;
}
.story-band h2{
  color:#fff;
  font-size:clamp(2rem,4vw,3.4rem);
}
.rooms-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:1.5rem;
}
.room-card-large{grid-column:span 6}
.room-card{grid-column:span 3}
.room-tag{
  display:inline-flex;
  padding:.45rem .75rem;
  border-radius:999px;
  background:rgba(35,177,186,.12);
  color:var(--teal-deep);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:1rem;
}
.text-link{
  display:inline-block;
  margin-top:1rem;
  color:var(--brown);
  font-weight:800;
}
.services-band{
  padding:110px 0;
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem;
  position:relative;
  z-index:1;
}
.service-item{
  background:rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:22px;
  min-height:160px;
  padding:1.25rem 1rem;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.9rem;
}
.service-item span{
  font-weight:800;
  max-width:140px;
}
.service-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:rgba(35,177,186,.2);
  border:1px solid rgba(255,255,255,.22);
}
.service-icon svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:#fff;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.site-footer{
  background:linear-gradient(180deg,#132126 0%,#0d171a 100%);
  color:#dbe6e8;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .7fr .7fr 1fr;
  gap:2rem;
  padding:90px 0 50px;
}
.footer-brand img{
  width:170px;
  margin-bottom:1rem;
}
.footer-brand p,
.footer-block p{
  margin:0;
  color:#b5c3c7;
}
.footer-block h3{
  color:#fff;
  font-size:1.2rem;
  margin-bottom:1rem;
}
.footer-block a{
  display:block;
  color:#dbe6e8;
  margin-bottom:.8rem;
}
.footer-btn{margin-top:1rem}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-bottom-wrap{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#aab8bc;
}

@media (max-width: 1100px){
  .experience-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .room-card-large{grid-column:span 12}
  .room-card{grid-column:span 4}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 820px){
  .desktop-nav{display:none}
  .menu-toggle{display:block}
  .mobile-nav.is-open{display:block}
  .parallax{background-attachment:scroll}
  .content-section,.services-band{padding:88px 0}
  .experience-grid,
  .services-grid,
  .footer-grid{grid-template-columns:1fr}
  .room-card{grid-column:span 12}
  h1{font-size:clamp(2.3rem,11vw,4rem)}
  .brand img{width:126px}
}


.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 9999;
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

/* Hover effect */
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

/* Icon */
.whatsapp-icon {
    width: 28px;
    height: 28px;
    fill: #fff;
}

/* Tooltip */
.whatsapp-tooltip {
    position: absolute;
    right: 70px;
    background: #111;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Show tooltip on hover */
.whatsapp-float:hover .whatsapp-tooltip {
    opacity: 1;
    transform: translateX(0);
}

/* Pulse animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 15px;
        right: 15px;
    }

    .whatsapp-icon {
        width: 24px;
        height: 24px;
    }

    .whatsapp-tooltip {
        display: none;
    }
}