/* =========================================================
   HOTEL GOLDEN LEAF — Design System
   Deep emerald + gold leaf identity, Dehradun luxury stay
   ========================================================= */

:root{
  /* --- Color tokens --- */
  --emerald-deep:  #27602F;
  --emerald-mid:   #24583F;
  --emerald-soft:  #337259;
  --sage:          #8FB79E;
  --gold:          #C9A227;
  --gold-light:    #E8C766;
  --gold-pale:     #F3E2A9;
  --ivory:         #F7F3E8;
  --ivory-dim:     #EFE9D8;
  --charcoal:      #211E18;
  --charcoal-soft: #4A463D;
  --white:         #FFFFFF;

  /* --- Type --- */
  --font-display: 'Cinzel', serif;
  --font-accent:  'Cormorant Garamond', serif;
  --font-body:    'Jost', sans-serif;

  /* --- Motion --- */
  --ease: cubic-bezier(.22,.68,.32,1);
  --dur-fast: .3s;
  --dur-med: .6s;
  --dur-slow: 1.1s;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--ivory);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--emerald-deep);
  margin:0 0 .5em;
  line-height:1.25;
  letter-spacing:.01em;
}
p{margin:0 0 1em;}
:focus-visible{outline:3px solid var(--gold); outline-offset:3px;}

.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  font-family:var(--font-accent);
  font-style:italic;
  font-size:1.15rem;
  color:var(--gold);
  letter-spacing:.06em;
  display:inline-block;
  margin-bottom:10px;
}

.section{ padding:40px 0; position:relative; }
.section--tight{ padding:30px 0; }
.section--dark{ background:var(--emerald-deep); color:var(--ivory-dim); }
.section--dark h2,.section--dark h3{ color:var(--gold-light); }
.section--ivory-dim{ background:var(--ivory-dim); }

.section-head{ max-width:680px; margin:0 auto 56px; text-align:center; }
.section-head p{ color:var(--charcoal-soft); font-size:1.08rem; }
.section--dark .section-head p{ color:#CFE0D6; }

/* --- Buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 34px;
  font-family:var(--font-body);
  font-size:.86rem;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:2px;
  border:1.5px solid transparent;
  transition:all var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  color:var(--emerald-deep);
  box-shadow:0 8px 24px -8px rgba(201,162,39,.55);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -8px rgba(201,162,39,.7); }
.btn-outline{
  border-color:var(--gold-light);
  color:var(--ivory);
  background:transparent;
}
.btn-outline:hover{ background:rgba(232,199,102,.12); border-color:var(--gold); }
.btn-outline-dark{
  border-color:var(--emerald-deep);
  color:var(--emerald-deep);
}
.btn-outline-dark:hover{ background:var(--emerald-deep); color:var(--ivory); }
.btn-sm{ padding:11px 22px; font-size:.75rem; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1200;
  background:linear-gradient(to bottom, rgba(28,71,54,.85), rgba(28,71,54,0));
  transition:background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), padding var(--dur-fast) var(--ease);
  padding:18px 0;
}
.site-header.is-scrolled{
  background:var(--emerald-deep);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.5);
  padding:10px 0;
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(16px, 2.5vw, 40px);
  flex-wrap:nowrap;
  width:100%;
  max-width:100%;
  padding:0 clamp(20px, 3.5vw, 48px);
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:88px; width:auto; max-width:none; transition:height var(--dur-fast) var(--ease); display:block; }
.site-header.is-scrolled .brand img{ height:70px; }

.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(12px, 1.8vw, 30px);
  flex-wrap:nowrap;
  margin:0 auto;
}
.main-nav a{
  display:inline-block; line-height:1.4;
  font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
  color:var(--ivory-dim); position:relative; padding:6px 0;
}
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width var(--dur-fast) var(--ease);
}
.main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
.main-nav a.active{ color:var(--gold-light); }

.header-actions{ display:flex; align-items:center; gap:16px; flex-shrink:0; }
.header-phone{ display:flex; align-items:center; gap:8px; color:var(--gold-light); font-size:.85rem; letter-spacing:.03em; line-height:1; white-space:nowrap; }
.header-phone svg{ width:16px; height:16px; flex-shrink:0; }

.nav-toggle{
  display:none; background:none; border:none; width:32px; height:24px; position:relative; z-index:1210; flex-shrink:0;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:2px; background:var(--gold-light);
  transition:all var(--dur-fast) var(--ease);
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:11px; }
.nav-toggle span:nth-child(3){ top:22px; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(11px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-11px) rotate(-45deg); }

/* =========================================================
   LEAF-VEIN DIVIDER  (signature element)
   ========================================================= */
.leaf-divider{
  display:flex; justify-content:center; align-items:center;
  padding:6px 0; margin:0 auto;
  max-width:260px;
}
.leaf-divider svg{ width:100%; height:auto; overflow:visible; }
.leaf-divider path{
  fill:none; stroke:var(--gold); stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:400;
  stroke-dashoffset:400;
  transition:stroke-dashoffset 1.6s var(--ease);
}
.leaf-divider.in-view path{ stroke-dashoffset:0; }
.leaf-divider .leaf-dot{
  fill:var(--gold); opacity:0; transform:scale(0);
  transform-origin:center;
  transition:opacity .5s ease .9s, transform .5s var(--ease) .9s;
}
.leaf-divider.in-view .leaf-dot{ opacity:1; transform:scale(1); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden;
  padding-top:40px;
}
.hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  animation:heroZoom 18s ease-in-out infinite alternate;
}
@keyframes heroZoom{ from{ transform:scale(1);} to{ transform:scale(1.09);} }
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(12, 28, 20, 0.45) 0%, rgba(12, 28, 20, 0.15) 50%, rgba(12, 28, 20, 0.35) 100%),
    linear-gradient(to right, rgba(12, 28, 20, 0.40) 0%, rgba(12, 28, 20, 0.10) 60%, transparent 100%);
  z-index:1;
  pointer-events:none;
}
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-content{
  text-align:left; color:var(--white);
  max-width:600px; padding:0;
}
.hero-badge{
  width:150px; margin:0 0 22px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
  animation:fadeDown 1s var(--ease) both;
}
.hero-badge img{ width:100%; height:auto; }
.hero-content .eyebrow{ animation:fadeDown 1s var(--ease) .15s both; }
.hero-content h1{
  color:var(--white);
  font-size:clamp(1.4rem, 3vw, 3.4rem);
  margin-bottom:.3em;
  animation:fadeUp 1s var(--ease) .3s both;
}
.hero-content h1 span{ color:var(--gold-light); }
.hero-sub{
  font-family:var(--font-accent); font-style:italic;
  font-size:clamp(1.05rem,2vw,1.4rem);
  color:var(--ivory-dim);
  max-width:560px; margin:0 0 34px;
  animation:fadeUp 1s var(--ease) .45s both;
}
.hero-ctas{
  display:flex; gap:16px; justify-content:flex-start; flex-wrap:wrap;
  animation:fadeUp 1s var(--ease) .6s both;
}
.hero-tags{
  display:flex; gap:10px; justify-content:flex-start; flex-wrap:wrap; margin-top:34px;
  animation:fadeUp 1s var(--ease) .75s both;
}
.hero-tag{
  border:1px solid rgba(232,199,102,.4); color:var(--gold-pale);
  padding:7px 16px; border-radius:30px; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2; color:var(--gold-pale); display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  animation:fadeUp 1s var(--ease) .9s both;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(var(--gold-light), transparent); animation:scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{ transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(26px);} to{ opacity:1; transform:translateY(0);} }
@keyframes fadeDown{ from{ opacity:0; transform:translateY(-20px);} to{ opacity:1; transform:translateY(0);} }

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.55s; }

/* Directional entrance for the split (image + text) sections — layers on top
   of the parent .reveal fade so image and copy glide in from opposite sides */
.split-media{ transition:opacity .9s var(--ease) .1s, transform .9s var(--ease) .1s; opacity:0; transform:translateX(-46px); }
.split-text{ transition:opacity .9s var(--ease) .22s, transform .9s var(--ease) .22s; opacity:0; transform:translateX(46px); }
.split.in-view .split-media,
.split.in-view .split-text{ opacity:1; transform:translateX(0); }
.split.reverse .split-media{ transform:translateX(46px); }
.split.reverse .split-text{ transform:translateX(-46px); }

/* Pillar icons: gentle continuous float once revealed + playful hover response */
.pillar-icon{ transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.pillar:hover .pillar-icon{ transform:scale(1.1) rotate(-6deg); box-shadow:0 16px 32px -10px rgba(201,162,39,.65); }
.reveal-stagger.in-view .pillar-icon{ animation:iconFloat 3.6s ease-in-out infinite; }
.reveal-stagger.in-view .pillar:nth-child(2) .pillar-icon{ animation-delay:.4s; }
.reveal-stagger.in-view .pillar:nth-child(3) .pillar-icon{ animation-delay:.8s; }
@keyframes iconFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

/* Amenity icons: small lift + tint pulse on hover */
.amenity svg{ transition:transform .4s var(--ease); }
.amenity:hover svg{ transform:translateY(-4px) scale(1.08); }

/* Testimonial cards: lift on hover to match room-card language */
.testi-card{ transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.testi-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -18px rgba(28,71,54,.35); }

/* Gold button shimmer sweep on hover */
.btn-gold{ position:relative; overflow:hidden; }
.btn-gold::before{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg); transition:left .7s var(--ease);
}
.btn-gold:hover::before{ left:130%; }

/* Floating WhatsApp / call buttons: soft pulsing ring to draw the eye */
.float-btn{ position:relative; }
.float-btn::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,255,255,.55);
  animation:floatPulse 2.6s ease-out infinite;
}
.float-btn.call::after{ animation-delay:.6s; }
.float-btn:hover::after{ animation-play-state:paused; }
@keyframes floatPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.45); }
  70%{ box-shadow:0 0 0 14px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* =========================================================
   INTRO / WELCOME
   ========================================================= */
.intro{ text-align:center; max-width:760px; margin:0 auto; }
.intro h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); }
.intro p{ font-size:1.1rem; color:var(--charcoal-soft); }
.intro-pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px;
}
.intro-pillars--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width: 980px){ .intro-pillars--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 680px){ .intro-pillars--4{ grid-template-columns:1fr; } 
.hero-content{
  text-align:center; color:var(--white);
  max-width:600px; padding:0;
}
.hero-content .hero-ctas{
  display: flex;
    gap: 16px;
    justify-content:center;
    flex-wrap: wrap;
    animation: fadeUp 1s var(--ease) .6s both;
}
.hero-content .hero-tags{
  display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 34px;
    animation: fadeUp 1s var(--ease) .75s both;
}
}
.pillar{ text-align:center; padding:0 12px; }
.pillar-icon{
  width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--gold-pale), var(--gold));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px -10px rgba(201,162,39,.5);
}
.pillar-icon svg{ width:28px; height:28px; stroke:var(--emerald-deep); }
.pillar h4{ font-size:1.05rem; letter-spacing:.03em; }
.pillar p{ color:var(--charcoal-soft); font-size:.95rem; }

/* =========================================================
   ROOM / CARD GRID
   ========================================================= */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; align-items:stretch; }
.room-card{
  display:flex; flex-direction:column; background:var(--white);
  border-radius:10px; overflow:hidden;
  box-shadow:0 20px 40px -22px rgba(28,71,54,.3);
  transition:transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.room-card:hover{ transform:translateY(-8px); box-shadow:0 30px 54px -20px rgba(28,71,54,.4); }
.room-card-media{ position:relative; height:250px; overflow:hidden; flex-shrink:0; }
.room-card-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.room-card:hover .room-card-media img{ transform:scale(1.08); }
.room-card-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,71,54,.55) 0%, rgba(28,71,54,0) 45%);
}
.room-card-tag{
  position:absolute; top:16px; left:16px; z-index:2;
  background:var(--gold); color:var(--emerald-deep);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 13px; border-radius:20px; font-weight:600;
  box-shadow:0 8px 18px -6px rgba(0,0,0,.4);
}
.room-card-body{ display:flex; flex-direction:column; flex:1; padding:26px 26px 24px; }
.room-card-body h3{ font-size:1.25rem; margin-bottom:8px; }
.room-card-body p{ color:var(--charcoal-soft); font-size:.9rem; margin-bottom:0; }
.room-card-meta{
  display:flex; flex-wrap:wrap; gap:10px 18px; margin:18px 0;
  padding:16px 0; border-top:1px solid var(--ivory-dim); border-bottom:1px solid var(--ivory-dim);
}
.room-card-meta span{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.76rem; letter-spacing:.02em; color:var(--charcoal-soft); font-weight:500;
}
.room-card-meta svg{ width:15px; height:15px; stroke:var(--gold); flex-shrink:0; }
.room-card-link{
  margin-top:auto; color:var(--emerald-deep); font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; transition:color var(--dur-fast) var(--ease);
}
.room-card-link svg{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease); }
.room-card:hover .room-card-link{ color:var(--gold); }
.room-card:hover .room-card-link svg{ transform:translateX(5px); }

/* =========================================================
   SPLIT / FEATURE SECTIONS
   ========================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split-media{ position:relative; }
.split-media img{ border-radius:6px; width:100%; height:370px; object-fit:cover; box-shadow:0 30px 60px -24px rgba(28,71,54,.4); }
.split-media::before{
  content:''; position:absolute; top:22px; left:-22px; right:22px; bottom:-22px;
  border:1.5px solid var(--gold); border-radius:6px; z-index:-1;
}
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }
.split-text .eyebrow{ display:block; }
.split-text h2{ font-size:clamp(1.8rem,2vw,2.5rem); }
.split-text p{ color:var(--charcoal-soft); font-size:1.05rem; }
.feature-list{ margin:26px 0 32px; display:flex; flex-direction:column; gap:14px; }
.feature-list li{ display:flex; align-items:center; gap:12px; font-size:.98rem; color:var(--charcoal); }
.feature-list svg{ width:20px; height:20px; stroke:var(--gold); flex-shrink:0; }

/* =========================================================
   WELLNESS / BANNER STRIP
   ========================================================= */
.wellness-strip{
  position:relative; min-height:420px; display:flex; align-items:center;
  background-size:cover; background-position:center;
  border-radius:6px; overflow:hidden;
}
.wellness-strip::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(28,71,54,.92) 32%, rgba(28,71,54,.35) 75%);
}
.wellness-content{ position:relative; z-index:2; padding:30px; max-width:580px; }
.wellness-content .eyebrow{ color:var(--gold-light); }
.wellness-content h2{ color:var(--white); font-size:clamp(1.7rem,3vw,2.3rem); }
.wellness-content p{ color:var(--ivory-dim); }

/* =========================================================
   EXPERIENCE / VIDEO STRIP (Content Left, Video Right)
   ========================================================= */
.experience-section{
  padding: 40px 0 50px;
}
.experience-strip,
.wellness-strip-video{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  width: 100%;
}
.experience-content{
  display: flex;
  flex-direction: column;
}
.experience-content .eyebrow{
  display: inline-block;
  color: var(--gold);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.experience-content h2{
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  color: var(--emerald-deep);
  line-height: 1.25;
  margin-bottom: 18px;
}
.experience-content p{
  color: var(--charcoal-soft);
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 16px;
}
.experience-highlights{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 10px 0 24px;
}
.exp-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ivory-dim);
  border: 1px solid rgba(201, 162, 39, 0.35);
  padding: 8px 16px;
  border-radius: 30px;
  font-size: 0.82rem;
  color: var(--emerald-deep);
  font-weight: 500;
  letter-spacing: .03em;
}
.exp-tag svg{
  width: 16px;
  height: 16px;
  stroke: var(--gold);
  flex-shrink: 0;
}
.experience-ctas{
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.experience-video-wrapper,
.wellness-video{
  position: relative;
  width: 100%;
}
.experience-video-card{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 50px -18px rgba(28, 71, 54, 0.38);
  border: 2px solid rgba(201, 162, 39, 0.3);
  background: var(--charcoal);
  aspect-ratio: 4 / 4.4;
}
.experience-video-card video,
.wellness-video video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 14px;
}
.video-overlay-badge{
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(28, 71, 54, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 199, 102, 0.35);
  border-radius: 10px;
  padding: 10px 16px;
  color: var(--white);
  display: flex;
  flex-direction: column;
}
.video-overlay-badge span{
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--gold-light);
  letter-spacing: .04em;
}
.video-overlay-badge small{
  font-size: 0.72rem;
  color: var(--ivory-dim);
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (max-width: 980px){
  .experience-strip,
  .wellness-strip-video{
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .experience-video-card{
    aspect-ratio: 16 / 10;
    max-height: 400px;
  }
}
@media (max-width: 680px){
  .experience-video-card{
    aspect-ratio: 16 / 11;
  }
  .experience-ctas{
    flex-direction: column;
    align-items: stretch;
  }
  .experience-ctas .btn{
    text-align: center;
    justify-content: center;
  }
}

/* =========================================================
   AMENITIES
   ========================================================= */
.amenities-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:rgba(232,199,102,.18);
  border:1px solid rgba(232,199,102,.18);
}
.amenity{
  background:var(--emerald-deep); padding:36px 22px; text-align:center;
  transition:background var(--dur-fast) var(--ease);
}
.amenity:hover{ background:var(--emerald-soft); }
.amenity svg{ width:32px; height:32px; stroke:var(--gold-light); margin-bottom:14px; }
.amenity h4{ color:var(--gold-pale); font-size:.92rem; letter-spacing:.03em; margin-bottom:4px; }
.amenity p{ color:#B8CCC1; font-size:.8rem; margin:0; }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.testi-card{
  background:var(--white); border:1px solid var(--ivory-dim);
  border-radius:6px; padding:34px; position:relative;
  box-shadow:0 14px 34px -22px rgba(28,71,54,.25);
}
.testi-quote{ font-size:2.4rem; color:var(--gold); font-family:var(--font-display); line-height:1; margin-bottom:6px; }
.testi-card p{ color:var(--charcoal-soft); font-style:italic; font-family:var(--font-accent); font-size:1.15rem; }
.testi-name{ font-family:var(--font-body); font-style:normal; color:var(--emerald-deep); font-weight:600; font-size:.92rem; letter-spacing:.02em; margin-top:16px; }
.testi-stars{ color:var(--gold); letter-spacing:2px; font-size:.9rem; margin-top:4px; }

/* =========================================================
   CTA BANNER
   ========================================================= */
.cta-banner{
  background:linear-gradient(120deg, var(--emerald-deep), var(--emerald-soft));
  border-radius:8px; padding:60px; text-align:center;
  position:relative; overflow:hidden;
}
.cta-banner::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 20%, rgba(232,199,102,.16), transparent 55%);
}
.cta-banner *{ position:relative; z-index:1; }
.cta-banner h2{ color:var(--white); font-size:clamp(1.7rem,3.2vw,2.4rem); }
.cta-banner p{ color:var(--ivory-dim); max-width:520px; margin:0 auto 30px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background:var(--emerald-deep); color:#B8CCC1; padding-top:90px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:50px;
  padding-bottom:60px; border-bottom:1px solid rgba(232,199,102,.15);
}
.footer-brand{ margin-bottom:18px; }
.footer-brand img{ height:100px; width:auto; }
.footer-col h5{
  color:var(--gold-light); font-family:var(--font-body); text-transform:uppercase;
  font-size:.78rem; letter-spacing:.14em; margin-bottom:20px;
}
.footer-col ul li{ margin-bottom:12px; font-size:.92rem; }
.footer-col ul li a:hover{ color:var(--gold-light); }
.footer-contact li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:16px; font-size:.9rem; }
.footer-contact svg{ width:18px; height:18px; stroke:var(--gold); flex-shrink:0; margin-top:2px; }
.footer-social{ display:flex; gap:12px; margin-top:22px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(232,199,102,.3);
  display:flex; align-items:center; justify-content:center; transition:all var(--dur-fast) var(--ease);
}
.footer-social a:hover{ background:var(--gold); border-color:var(--gold); }
.footer-social svg{ width:16px; height:16px; stroke:var(--gold-light); }
.footer-social a:hover svg{ stroke:var(--emerald-deep); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding:26px 0; font-size:.82rem; color:#7FA091;
}
.footer-bottom a{ color:#7FA091; }
.footer-bottom a:hover{ color:var(--gold-light); }

/* =========================================================
   PAGE HERO (interior pages)
   ========================================================= */
.page-hero{
  position:relative; min-height:66vh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center; overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(28,71,54,.96) 5%, rgba(28,71,54,.45) 20%, rgba(28,71,54,.65) 100%);
}
.page-hero-content{ position:relative; z-index:2; padding:120px 0 70px; color:var(--white); width:100%; }
.breadcrumb{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-pale); margin-bottom:14px; }
.breadcrumb a{ color:var(--gold-pale); }
.breadcrumb a:hover{ color:var(--white); }
.page-hero h1{ color:var(--white); font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:.2em; }
.page-hero p{ color:var(--ivory-dim); max-width:600px; font-family:var(--font-accent); font-style:italic; font-size:1.15rem; }

/* Sticky WhatsApp / call button */
.float-actions{ position:fixed; right:22px; bottom:22px; z-index:900; display:flex; flex-direction:column; gap:12px; }
.float-btn{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.4); transition:transform var(--dur-fast) var(--ease);
}
.float-btn:hover{ transform:scale(1.08) translateY(-2px); }
.float-btn.call{ background:var(--gold); }
.float-btn.whatsapp{ background:#25D366; }
.float-btn svg{ width:24px; height:24px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1240px) and (min-width: 981px){
  .brand img{ height:68px; }
  .site-header.is-scrolled .brand img{ height:56px; }
  .main-nav{ gap:14px; margin:0 auto; }
  .main-nav a{ font-size:.74rem; letter-spacing:.06em; }
  .header-phone span{ display:inline; }
  .header-actions{ gap:12px; }
  .btn-sm{ padding:9px 15px; font-size:.68rem; }
}
@media (max-width: 1080px) and (min-width: 981px){
  .header-phone{ display:none; }
  .main-nav{ gap:11px; }
  .main-nav a{ font-size:.70rem; letter-spacing:.04em; }
}

@media (max-width: 980px){
  .main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .card-grid{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; gap:40px; }
  .split.reverse{ direction:ltr; }
  .split-media img{ height:340px; }
  .intro-pillars{ grid-template-columns:1fr; gap:36px; }
  .amenities-grid{ grid-template-columns:repeat(2,1fr); }
  .testi-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:40px; }
}

@media (max-width: 680px){
  .brand img{ height:60px; }
  .site-header.is-scrolled .brand img{ height:48px; }
  .site-header{ padding:12px 0; }
  .site-header.is-scrolled{ padding:8px 0; }
  .section{ padding:70px 0; }
  .card-grid{ grid-template-columns:1fr; }
  .header-phone{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .cta-banner{ padding:40px 24px; }
  .wellness-content{ padding:36px 26px; max-width:none; }
  .amenities-grid{ grid-template-columns:1fr 1fr; }
  .split-media::before{ display:none; }
}

/* =========================================================
   BENEFIT GRID  (icon cards, alternating tones — "Premium Amenities" style)
   ========================================================= */
.benefit-layout{ display:grid; grid-template-columns:.85fr 1.15fr; gap:36px; align-items:stretch; }
.benefit-intro{
  background:var(--ivory-dim); border-radius:8px; padding:44px 40px;
  display:flex; flex-direction:column; justify-content:center;
}
.benefit-intro p{ color:var(--charcoal-soft); font-size:1.02rem; }
.benefit-video{
  margin-top:26px; display:flex; align-items:center; gap:18px; cursor:pointer;
}
.benefit-video-btn{
  width:64px; height:64px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px -8px rgba(201,162,39,.6);
  transition:transform var(--dur-fast) var(--ease);
}
.benefit-video:hover .benefit-video-btn{ transform:scale(1.08); }
.benefit-video-btn svg{ width:20px; height:20px; fill:var(--emerald-deep); margin-left:3px; }
.benefit-video-label{ font-family:var(--font-display); font-size:1rem; color:var(--emerald-deep); }
.benefit-video-label span{ display:block; font-family:var(--font-body); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--charcoal-soft); margin-top:4px; }

.benefit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--ivory-dim); border-radius:8px; overflow:hidden; }
.benefit-card{ background:var(--white); padding:34px 30px; transition:background var(--dur-fast) var(--ease); }
.benefit-card svg{ width:34px; height:34px; stroke:var(--gold); stroke-width:1.6; margin-bottom:16px; }
.benefit-card h4{ font-size:1.1rem; margin-bottom:8px; }
.benefit-card p{ color:var(--charcoal-soft); font-size:.9rem; margin:0; }
.benefit-card--dark{ background:var(--emerald-deep); }
.benefit-card--dark h4{ color:var(--gold-pale); }
.benefit-card--dark p{ color:#B8CCC1; }
.benefit-card--dark svg{ stroke:var(--gold-light); }
.benefit-card:hover{ background:var(--ivory-dim); }
.benefit-card--dark:hover{ background:var(--emerald-soft); }

/* =========================================================
   RIBBON BANNER  ("Why Choose Us" flag panel)
   ========================================================= */
.ribbon-banner{
  background:linear-gradient(150deg, var(--gold), var(--gold-light) 120%);
  color:var(--emerald-deep);
  padding:52px 44px 66px;
  border-radius:8px 8px 0 0;
  position:relative;
  clip-path:polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
  box-shadow:0 24px 50px -20px rgba(201,162,39,.5);
}
.ribbon-banner h3{ color:var(--emerald-deep); font-size:1.6rem; margin-bottom:22px; }
.ribbon-list{ display:flex; flex-direction:column; gap:16px; margin-bottom:28px; }
.ribbon-list li{ display:flex; align-items:center; gap:12px; font-size:.98rem; font-weight:500; }
.ribbon-check{
  width:26px; height:26px; border-radius:50%; background:var(--emerald-deep); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.ribbon-check svg{ width:14px; height:14px; stroke:var(--gold-light); stroke-width:3; }
.ribbon-banner .btn{ background:var(--emerald-deep); color:var(--ivory); box-shadow:none; }
.ribbon-banner .btn:hover{ background:var(--charcoal); }

.location-layout{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }

/* =========================================================
   ROOM SPECS STRIP
   ========================================================= */
.room-specs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:rgba(28,71,54,.1); border-radius:8px; overflow:hidden; margin:44px 0;
}
.room-spec{ background:var(--white); padding:26px 20px; text-align:center; }
.room-spec svg{ width:26px; height:26px; stroke:var(--gold); margin-bottom:10px; }
.room-spec .room-spec-label{ display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--charcoal-soft); margin-bottom:4px; }
.room-spec .room-spec-value{ display:block; font-family:var(--font-display); font-size:1.05rem; color:var(--emerald-deep); }

/* =========================================================
   ROOM GALLERY STRIP
   ========================================================= */
.room-gallery{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:16px; }
.room-gallery img{ width:100%; height:100%; min-height:180px; object-fit:cover; border-radius:6px; }
.room-gallery .room-gallery-tall{ grid-row:span 2; min-height:100%; }

/* =========================================================
   FOREST / GREEN FEATURE STRIP
   ========================================================= */
.forest-strip{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--ivory-dim); border:1px solid rgba(201,162,39,.3);
  border-radius:8px; padding:20px 26px; margin:36px 0;
}
.forest-strip svg{ width:30px; height:30px; stroke:var(--emerald-deep); flex-shrink:0; }
.forest-strip strong{ color:var(--emerald-deep); font-family:var(--font-display); font-size:1rem; margin-right:6px; }
.forest-strip span{ color:var(--charcoal-soft); font-size:.95rem; }

@media (max-width: 980px){
  .benefit-layout{ grid-template-columns:1fr; }
  .benefit-grid{ grid-template-columns:1fr 1fr; }
  .location-layout{ grid-template-columns:1fr; }
  .room-specs{ grid-template-columns:1fr 1fr; }
  .room-gallery{ grid-template-columns:1fr 1fr; }
  .room-gallery .room-gallery-tall{ grid-row:auto; }
}
@media (max-width: 680px){
  .benefit-grid{ grid-template-columns:1fr; }
  .room-specs{ grid-template-columns:1fr 1fr; }
  .room-gallery{ grid-template-columns:1fr; }
  .ribbon-banner{ padding:40px 28px 50px; clip-path:polygon(0 0, 100% 0, 100% 92%, 50% 100%, 0 92%); }
}

/* =========================================================
   ROOM MEDIA — overlapping circular photo (reference design)
   ========================================================= */
.room-media{ position:relative; padding:0 46px 46px 0; }
.room-media-main{
  border-radius:6px; width:100%; height:480px; object-fit:cover;
  box-shadow:0 30px 60px -24px rgba(28,71,54,.4); position:relative; z-index:1;
}
.room-media-accent{
  position:absolute; top:22px; left:-22px; bottom:24px; width:60px;
  background:var(--gold); border-radius:6px; z-index:0;
}
.room-media-circle{
  position:absolute; right:0; bottom:0; width:52%; aspect-ratio:1/1;
  border-radius:50%; overflow:hidden; border:7px solid var(--white); z-index:2;
  box-shadow:0 22px 44px -16px rgba(28,71,54,.5);
}
.room-media-circle img{ width:100%; height:100%; object-fit:cover; }
.room-media-badge{
  position:absolute; left:24px; bottom:-8px; width:66px; height:66px; border-radius:50%; z-index:3;
  background:#000;
  display:flex; align-items:center; justify-content:center; padding:12px;
  box-shadow:0 10px 24px -6px rgba(201,162,39,.65);
}
.room-media-badge img{ width:100%; height:100%; object-fit:contain; }

@media (max-width: 980px){
  .room-media{ padding:0 30px 30px 0; }
  .room-media-main{ height:340px; }
}
@media (max-width: 680px){
  .room-media{ padding:0 0 40px 0; }
  .room-media-accent{ display:none; }
  .room-media-circle{ width:48%; right:6px; }
}

.check-pills{ display:flex; gap:34px; flex-wrap:wrap; margin:26px 0 6px; }
.check-pill{ display:flex; align-items:center; gap:12px; }
.check-pill-icon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--ivory-dim); border:1px solid rgba(201,162,39,.3);
  display:flex; align-items:center; justify-content:center;
}
.check-pill-icon svg{ width:18px; height:18px; stroke:var(--gold); stroke-width:2.5; }
.check-pill span{ font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; color:var(--charcoal-soft); font-weight:500; }

/* Mobile nav drawer */
.mobile-nav{
  position:fixed; inset:0; background:var(--emerald-deep); z-index:1150;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transform:translateY(-100%); transition:transform .5s var(--ease);
}
.mobile-nav.is-open{ transform:translateY(0); }
.mobile-nav a{ font-family:var(--font-display); font-size:1.5rem; color:var(--ivory); letter-spacing:.04em; }
.mobile-nav a.active{ color:var(--gold-light); }
.mobile-nav .btn{ margin-top:10px; }
.mobile-nav-close{
  position:absolute; top:22px; right:22px; width:44px; height:44px;
  background:none; border:1.5px solid rgba(232,199,102,.4); border-radius:50%;
  color:var(--gold-light); font-size:1.9rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.mobile-nav-close:hover{ background:rgba(232,199,102,.12); border-color:var(--gold); transform:rotate(90deg); }

/* =========================================================
   BLOG — listing grid, cards, single post
   ========================================================= */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.blog-card{
  display:flex; flex-direction:column; background:var(--white); border-radius:8px; overflow:hidden;
  box-shadow:0 16px 34px -18px rgba(28,71,54,.28); transition:transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:0 26px 46px -18px rgba(28,71,54,.4); }
.blog-card-media{ position:relative; height:210px; overflow:hidden; }
.blog-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.blog-card:hover .blog-card-media img{ transform:scale(1.07); }
.blog-card-tag{
  position:absolute; top:16px; left:16px; background:var(--gold); color:var(--emerald-deep);
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  padding:5px 12px; border-radius:20px;
}
.blog-card-body{ padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.blog-card-date{ font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sage); margin-bottom:10px; }
.blog-card h3{ font-size:1.18rem; line-height:1.35; margin-bottom:10px; }
.blog-card p{ color:var(--charcoal-soft); font-size:.92rem; flex:1; margin-bottom:18px; }
.blog-card-link{
  color:var(--emerald-deep); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  font-weight:600; display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
}
.blog-card-link svg{ width:14px; height:14px; transition:transform var(--dur-fast) var(--ease); }
.blog-card:hover .blog-card-link svg{ transform:translateX(5px); }

/* Single post */
.post-meta{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; font-size:.82rem; letter-spacing:.04em; color:var(--sage); margin-bottom:6px; }
.post-meta .post-tag{
  background:var(--gold); color:var(--emerald-deep); font-weight:600; text-transform:uppercase;
  letter-spacing:.08em; font-size:.68rem; padding:5px 12px; border-radius:20px;
}
.post-body{ max-width:760px; margin:0 auto; }
.post-body img.post-hero-img{ width:100%; height:380px; object-fit:cover; border-radius:6px; margin-bottom:36px; box-shadow:0 24px 48px -20px rgba(28,71,54,.35); }
.post-content p{ font-size:1.05rem; color:var(--charcoal-soft); margin-bottom:1.3em; line-height:1.85; }
.post-content strong{ color:var(--emerald-deep); }
.post-cta-inline{
  border-left:3px solid var(--gold); background:var(--ivory-dim); padding:22px 26px; border-radius:0 6px 6px 0; margin:34px 0;
}
.post-cta-inline p{ margin:0 0 14px; color:var(--charcoal); }
.related-posts{ margin-top:20px; }

@media (max-width: 980px){
  .blog-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px){
  .blog-grid{ grid-template-columns:1fr; }
  .post-body img.post-hero-img{ height:220px; }
}

/* FAQ accordion (homepage) */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.faq-item{
  background:var(--ivory-dim); border:1px solid rgba(28,71,54,.08); border-radius:6px;
  padding:18px 22px;
}
.faq-item summary{
  cursor:pointer; font-family:var(--font-body); font-weight:600; color:var(--emerald-deep);
  font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:1.3rem; color:var(--gold); font-weight:400; flex-shrink:0; transition:transform var(--dur-fast) var(--ease);
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin:14px 0 2px; color:var(--charcoal-soft); font-size:.96rem; line-height:1.7; }