/* ============================================================
   Y3 SUITES — DESIGN SYSTEM
   Palette: Canopy Deep / Leaf Bright / Mist Grey / Cloud / Chembarathi Amber / Ivory
   Type: Fraunces (display) + Inter (body)
   Signature: hand-drawn botanical (Chembarathi/hibiscus) line-art dividers
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=Playfair+Display:wght@400;500;600&family=Poppins:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* Core palette */
  --canopy:        #1f4d33;   /* deep forest green — dark sections, headers */
  --leaf:           #3eb651;  /* brand green — CTAs, active states */
  --leaf-dark:      #2f9a41;
  --mist:           #707477;  /* slate grey — body copy */
  --cloud:          #e6e6e6;  /* light neutral background */
  --amber:          #d98e42;  /* Chembarathi amber — contrast accent */
  --amber-dark:     #c17a30;
  --ivory:          #faf8f4;  /* warm off-white base */
  --charcoal:       #17211b;  /* hero overlay / footer */

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 28px;

  --shadow-soft: 0 10px 40px rgba(23,33,27,0.10);
  --shadow-strong: 0 20px 60px rgba(23,33,27,0.22);

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--canopy);
  background:var(--ivory);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0 0 .5em; color:var(--canopy); font-weight:600; line-height:1.15; }
p{ margin:0 0 1em; color:var(--mist); }
.container{ width:min(1200px, 92%); margin:0 inset; margin-inline:auto; }
section{ padding:96px 0; }
:focus-visible{ outline:3px solid var(--amber); outline-offset:3px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:.78rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--leaf-dark);
  margin-bottom:14px;
}
.eyebrow::before{
  content:''; width:22px; height:1px; background:var(--amber);
}

.tagline{ font-style:italic; font-weight:400; color:var(--leaf-dark); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border-radius:100px; font-family:var(--font-body);
  font-weight:600; font-size:.95rem; cursor:pointer; border:2px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn-primary{ background:var(--leaf); color:#fff; box-shadow:0 8px 24px rgba(62,182,81,.35); }
.btn-primary:hover{ background:var(--leaf-dark); transform:translateY(-3px); box-shadow:0 14px 30px rgba(62,182,81,.4); }
.btn-outline{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff; }
.btn-outline:hover{ background:#fff; color:var(--canopy); transform:translateY(-3px); }
.btn-dark{ background:var(--canopy); color:#fff; }
.btn-dark:hover{ background:var(--charcoal); transform:translateY(-3px); }
.btn-amber{ background:var(--amber); color:#fff; box-shadow:0 8px 24px rgba(217,142,66,.35); }
.btn-amber:hover{ background:var(--amber-dark); transform:translateY(-3px); }
.btn-sm{ padding:10px 20px; font-size:.85rem; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:20px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(250,248,244,.92); backdrop-filter:blur(10px);
  padding:12px 0; box-shadow:0 4px 24px rgba(23,33,27,.08);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:flex; align-items:center; gap:10px; transition:.4s; }
.logo-badge{ display:flex; align-items:center; }
.logo-badge img{ height:36px; width:auto; display:block; }


.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.main-nav a{
  display:flex; align-items:center; gap:5px; padding:9px 12px; border-radius:100px;
  font-size:.85rem; font-weight:500; color:rgba(255,255,255,.92); transition:background .3s, color .3s;
  white-space:nowrap;
}
.site-header.is-scrolled .main-nav a{ color:var(--canopy); }
.main-nav a:hover, .main-nav a.active{ background:rgba(255,255,255,.14); }
.site-header.is-scrolled .main-nav a:hover, .site-header.is-scrolled .main-nav a.active{ background:rgba(62,182,81,.12); color:var(--leaf-dark); }

.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:260px;
  background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-strong);
  padding:10px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.has-dropdown:hover .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ color:var(--canopy) !important; border-radius:var(--radius-sm); padding:11px 14px; display:block; }
.dropdown a:hover{ background:var(--cloud) !important; }

.header-cta{ display:flex; align-items:center; gap:14px; }
.nav-toggle{ display:none; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(23,33,27,.35), rgba(23,33,27,.75)), var(--hero-bg, var(--canopy));
  background-size:cover; background-position:center; overflow:hidden;
}
.hero-fallback{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(circle at 20% 20%, rgba(62,182,81,.35), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(217,142,66,.3), transparent 50%),
    linear-gradient(160deg, var(--charcoal), var(--canopy) 60%, #12331f);
}
.hero .container{ position:relative; z-index:2; padding-top:90px; }
.hero-content{ max-width:680px; }
.hero-rating{
  display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.14);
  backdrop-filter:blur(6px); padding:9px 18px 9px 9px; border-radius:100px; margin-bottom:26px;
  color:#fff; font-size:.88rem; font-weight:500; 
  align-self:center;
}
.hero-rating .stars{ background:var(--amber); color:#fff; border-radius:100px; padding:4px 10px; font-weight:700; font-size:.85rem; }
.hero-eyebrow{
  display:block; color:rgba(255,255,255,.85); font-size:.85rem; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; margin-bottom:20px;
}
.hero h1{ color:#fff; font-size:clamp(2.6rem, 5.6vw, 4.6rem); font-weight:600; margin-bottom:.3em; }
.hero h1 em{ font-style:italic; color:var(--leaf); font-weight:500; }
.hero p.lead{ color:rgba(255,255,255,.85); font-size:1.15rem; max-width:520px; margin-bottom:36px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
.hero-scroll{
  position:absolute; bottom:110px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.7); font-size:.75rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.hero-scroll .line{ width:1px; height:38px; background:rgba(255,255,255,.5); animation:scrollPulse 2s infinite; }
@keyframes scrollPulse{ 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; } }

/* organic hill-silhouette divider between hero and next section */
.hill-divider{ position:absolute; left:0; right:0; bottom:-1px; z-index:3; line-height:0; }
.hill-divider svg{ width:100%; height:auto; display:block; }
.hill-divider path{ fill:var(--ivory); }

/* ---------- Section headers ---------- */
.section-head{ max-width:640px; margin:0 auto 56px; text-align:center; }
.section-head.left{ margin:0 0 56px; text-align:left; }
.section-head h2{ font-size:clamp(2rem, 3.4vw, 2.8rem); }

/* ---------- Botanical divider (signature motif) ---------- */
.botanical-divider{ display:flex; align-items:center; justify-content:center; gap:16px; margin:6px 0 40px; }
.botanical-divider svg{ width:46px; height:46px; }
.botanical-divider .stem{ width:60px; height:1px; background:linear-gradient(90deg, transparent, var(--amber)); }
.botanical-divider .stem.right{ background:linear-gradient(90deg, var(--amber), transparent); }

/* ---------- Suite Cards ---------- */
.suite-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; }
.suite-card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; background:var(--canopy);
  aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:flex-end;
  box-shadow:var(--shadow-soft); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.suite-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-strong); }
.suite-photo{
  position:absolute; inset:0; background:var(--photo-tone, linear-gradient(135deg,#2f6b45,#1f4d33)) center/cover no-repeat;
  transition:transform .6s var(--ease);
}
.suite-card:hover .suite-photo{ transform:scale(1.06); }
.suite-photo.is-placeholder::after{
  content:'Suite Photo Coming Soon'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:0 20px; color:rgba(255,255,255,.4); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}
.suite-card::before{
  content:''; position:absolute; inset:0; background:linear-gradient(180deg, transparent 35%, rgba(10,18,13,.92) 100%); z-index:1;
}
.suite-card-body{ position:relative; z-index:2; padding:26px; color:#fff; }
.suite-tag{ display:inline-block; background:rgba(255,255,255,.16); backdrop-filter:blur(4px); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:100px; margin-bottom:12px; color:var(--amber); }
.suite-card-body h3{ color:#fff; font-size:1.3rem; margin-bottom:6px; }
.suite-card-body p{ color:rgba(255,255,255,.75); font-size:.9rem; margin-bottom:14px; }
.suite-link{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.88rem; color:#fff; transition:gap .3s; }
.suite-link:hover{ gap:11px; color:var(--leaf); }

/* ---------- Amenities strip ---------- */
.amenities-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.amenity-item{ text-align:center; padding:34px 20px; border-radius:var(--radius-md); background:#fff; box-shadow:var(--shadow-soft); transition:transform .4s var(--ease); }
.amenity-item:hover{ transform:translateY(-6px); }
.amenity-item .icon{ width:52px; height:52px; margin:0 auto 18px; color:var(--leaf); }
.amenity-item h4{ font-size:1.05rem; margin-bottom:6px; }
.amenity-item p{ font-size:.88rem; margin:0; }

/* ---------- Reviews carousel ---------- */
.reviews-section{ background:var(--canopy); color:#fff; position:relative; overflow:hidden; }
.reviews-track{ display:flex; gap:26px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none; }
.reviews-track::-webkit-scrollbar{ display:none; }
.review-card{ flex:0 0 min(420px, 85vw); scroll-snap-align:start; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); padding:32px; }
.review-stars{ color:var(--amber); letter-spacing:3px; margin-bottom:16px; font-size:1.1rem; }
.review-card p.quote{ color:rgba(255,255,255,.9); font-size:1rem; margin-bottom:20px; }
.review-author{ display:flex; align-items:center; gap:12px; }
.review-avatar{ width:42px; height:42px; border-radius:50%; background:var(--leaf); display:flex; align-items:center; justify-content:center; font-weight:700; }
.review-author strong{ display:block; font-size:.92rem; }
.review-author span{ font-size:.8rem; color:rgba(255,255,255,.6); }
.carousel-nav{ display:flex; gap:12px; margin-top:30px; justify-content:center; }
.carousel-nav button{ width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; cursor:pointer; transition:background .3s; }
.carousel-nav button:hover{ background:rgba(255,255,255,.15); }

/* ---------- Gallery grid ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:180px; grid-auto-flow:dense; gap:16px; }
.gallery-item{ position:relative; border-radius:var(--radius-md); overflow:hidden; cursor:pointer; background:var(--photo, linear-gradient(135deg,#2f6b45,#1f4d33)) center/cover no-repeat; }
.gallery-item.tall{ grid-row:span 2; }
.gallery-item.wide{ grid-column:span 2; }
.gallery-item::after{ content:attr(data-label); position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px; color:#fff; font-size:.85rem; font-weight:600; background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55)); opacity:0; transition:opacity .35s; }
.gallery-item:hover::after{ opacity:1; }
.gallery-item:hover{ transform:scale(1.02); }
.gallery-item{ transition:transform .4s var(--ease); }

/* ---------- Route Map ---------- */
.route-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.route-card{ background:#fff; border-radius:var(--radius-md); padding:30px; box-shadow:var(--shadow-soft); position:relative; }
.route-card .distance{ font-family:var(--font-display); font-size:2.2rem; color:var(--leaf-dark); font-weight:600; }
.route-card .distance sup{ font-size:1rem; font-family:var(--font-body); color:var(--mist); font-weight:500; }
.route-card h4{ margin:10px 0 4px; }
.route-card p{ font-size:.88rem; }
.route-card a.map-link{ display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600; color:var(--leaf-dark); margin-top:10px; }
.route-card a.map-link:hover{ text-decoration:underline; }

/* ---------- Offers banner ---------- */
.offers-banner{ background:linear-gradient(120deg, var(--amber), var(--amber-dark)); border-radius:var(--radius-lg); padding:60px; color:#fff; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; position:relative; overflow:hidden; }
.offers-banner::before{ content:''; position:absolute; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.08); top:-160px; right:-100px; }
.offers-banner h2{ color:#fff; margin-bottom:10px; }
.offers-banner p{ color:rgba(255,255,255,.9); margin-bottom:0; max-width:420px; }

/* ---------- Blog teaser ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.blog-card{ background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .4s var(--ease); }
.blog-card:hover{ transform:translateY(-6px); }
.blog-thumb{ height:200px; background:linear-gradient(135deg,#3eb651,#1f4d33); }
.blog-card-body{ padding:24px; }
.blog-date{ font-size:.78rem; color:var(--amber-dark); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.blog-card h4{ font-size:1.1rem; margin:10px 0; }

/* ---------- Enquiry form ---------- */
.enquiry-section{ background:var(--cloud); }
.enquiry-wrap{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); display:grid; grid-template-columns:1fr 1fr; overflow:hidden; }
.enquiry-info{ background:var(--canopy); color:#fff; padding:56px; position:relative; overflow:hidden; }
.enquiry-info h2{ color:#fff; }
.enquiry-info p{ color:rgba(255,255,255,.78); }
.enquiry-info ul{ margin-top:28px; }
.enquiry-info li{ display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:.94rem; }
.enquiry-info li .ico{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.enquiry-form{ padding:56px; min-width:0; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; min-width:0; }
.form-group{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.form-group.full{ grid-column:1/-1; }
.form-group label{ font-size:.82rem; font-weight:600; color:var(--canopy); }
.form-group input, .form-group select, .form-group textarea{
  width:100%; min-width:0; box-sizing:border-box;
  padding:13px 16px; border-radius:var(--radius-sm); border:1.5px solid #e2e0d8; font-family:var(--font-body);
  font-size:.94rem; color:var(--canopy); transition:border-color .3s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ border-color:var(--leaf); outline:none; }
.form-note{ font-size:.8rem; color:var(--mist); margin-top:12px; }

/* ---------- Comparison table (Platinum collection) ---------- */
.compare-table{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); }
.compare-table th, .compare-table td{ padding:18px 22px; text-align:left; border-bottom:1px solid var(--cloud); }
.compare-table th{ background:var(--canopy); color:#fff; font-family:var(--font-body); font-weight:600; font-size:.88rem; text-transform:uppercase; letter-spacing:.04em; }
.compare-table tr:last-child td{ border-bottom:none; }
.compare-table td.price{ font-family:var(--font-display); font-weight:600; color:var(--leaf-dark); font-size:1.1rem; }
.tick-yes{ color:var(--leaf-dark); font-weight:700; }
.tick-no{ color:var(--mist); opacity:.5; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--charcoal); color:rgba(255,255,255,.72); padding:80px 0 30px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:50px; margin-bottom:60px; }
.footer-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:1.4rem; color:#fff; margin-bottom:16px; }
.footer-col h4{ color:#fff; font-family:var(--font-body); font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:20px; }
.footer-col ul li{ margin-bottom:12px; font-size:.92rem; }
.footer-col a:hover{ color:var(--leaf); }
.footer-social{ display:flex; gap:12px; margin-top:20px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; transition:background .3s; color:#fff; }
.footer-social a:hover{ background:var(--leaf); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; }
.newsletter-form{ display:flex; gap:0; margin-top:16px; border-radius:100px; overflow:hidden; background:rgba(255,255,255,.08); }
.newsletter-form input{ flex:1; background:transparent; border:none; padding:13px 18px; color:#fff; font-size:.88rem; }
.newsletter-form input::placeholder{ color:rgba(255,255,255,.45); }
.newsletter-form button{ background:var(--leaf); border:none; color:#fff; padding:0 20px; cursor:pointer; }

/* ---------- WhatsApp popup ---------- */
.whatsapp-float{
  position:fixed; bottom:28px; right:28px; z-index:1200; width:62px; height:62px;
  border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.5); cursor:pointer; border:none;
}
.whatsapp-float::before{
  content:''; position:absolute; inset:0; border-radius:50%; background:#25D366;
  animation:wa-pulse 2.4s infinite; z-index:-1;
}
@keyframes wa-pulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.9); opacity:0; } }
.whatsapp-float svg{ width:30px; height:30px; }
.whatsapp-tooltip{
  position:fixed; bottom:100px; right:28px; z-index:1199; background:#fff; color:var(--canopy);
  padding:14px 18px; border-radius:var(--radius-md); box-shadow:var(--shadow-strong); font-size:.88rem;
  max-width:230px; opacity:0; visibility:hidden; transform:translateY(10px); transition:.35s var(--ease);
}
.whatsapp-tooltip.show{ opacity:1; visibility:visible; transform:translateY(0); }
.whatsapp-tooltip strong{ display:block; margin-bottom:2px; }
.whatsapp-tooltip .close-tip{ position:absolute; top:6px; right:8px; cursor:pointer; color:var(--mist); font-size:1rem; background:none; border:none; }

/* ---------- Scroll reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }

/* ---------- Back to top ---------- */
.back-to-top{ position:fixed; bottom:28px; left:28px; z-index:1150; width:48px; height:48px; border-radius:50%; background:var(--canopy); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:.3s; border:none; cursor:pointer; }
.back-to-top.show{ opacity:1; visibility:visible; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .suite-grid{ grid-template-columns:repeat(2,1fr); }
  .amenities-strip{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .route-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .enquiry-wrap{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 780px){
  .main-nav{ position:fixed; top:0; right:0; height:100vh; width:min(320px,84%); background:var(--ivory); flex-direction:column; align-items:stretch; padding:100px 26px 40px; transform:translateX(100%); transition:transform .4s var(--ease); box-shadow:var(--shadow-strong); overflow-y:auto; }
  .main-nav.open{ transform:translateX(0); }
  .main-nav > ul{ display:flex; flex-direction:column; align-items:stretch; gap:0; flex-wrap:wrap; width:100%; }
  .main-nav a{ color:var(--canopy) !important; padding:14px 16px; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; display:none; min-width:0; width:100%; padding:0 0 0 14px; }
  .has-dropdown.open .dropdown{ display:block; }
  .nav-toggle{
    display:flex; align-items:center; justify-content:center; z-index:1300;
    width:44px; height:44px; padding:0; border:none; border-radius:50%;
    background:rgba(255,255,255,.14); color:#fff; cursor:pointer;
  }
  .site-header.is-scrolled .nav-toggle{ background:rgba(31,77,51,.08); color:var(--canopy); }
  .header-cta .btn-primary span{ display:none; }
  .suite-grid, .blog-grid, .footer-grid, .gallery-grid{ grid-template-columns:1fr 1fr; }
  section{ padding:64px 0; }
  .offers-banner{ padding:40px; }
}
@media (max-width: 560px){
  .suite-grid, .amenities-strip, .route-grid, .blog-grid, .footer-grid, .form-row{ grid-template-columns:1fr; }
  /* keep the gallery as a 2-up masonry on phones, not one image per screen */
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:132px; gap:10px; }
  .gallery-item.wide{ grid-column:span 2; }
  .gallery-item.tall{ grid-row:span 2; }
  .enquiry-form, .enquiry-info{ padding:34px 26px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
/* Hero centering override */
.hero .container{
  display:flex !important;
  flex-direction:column;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.hero-content{
  display:flex !important;
  flex-direction:column;
  align-items:center !important;
  max-width:900px;
}
.hero-rating{ align-self:center; }
.hero h1{ text-align:center; }
.hero p.lead{ text-align:center; margin-left:auto; margin-right:auto; }
.hero-actions{ justify-content:center !important; }
.hero-eyebrow{ text-align:center; }
/* Hero refinements */
.hero-rating{ margin-bottom:32px !important; padding:8px 20px 8px 8px !important; }
.hero-eyebrow{ margin-bottom:22px !important; }
.hero p.lead{ font-size:.95rem !important; margin-bottom:20px !important; max-width:560px !important; }
.hero h1{ font-weight:400 !important; margin-bottom:34px !important; }
.hero-actions{ margin-bottom:8px !important; }

/* ============================================================
   PREMIUM HERO UPGRADE
   ============================================================ */

/* Ken Burns background layer (separate from text, so zoom never shifts content) */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; overflow:hidden; background:var(--canopy); }
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  animation:heroZoom 20s ease-in-out infinite alternate; z-index:0;
}
@keyframes heroZoom{ 0%{ transform:scale(1); } 100%{ transform:scale(1.08); } }

/* Cinematic gradient: darker top/bottom, lighter through the middle */
.hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,15,12,.6) 0%,
    rgba(10,15,12,.2) 32%,
    rgba(10,15,12,.15) 60%,
    rgba(10,15,12,.7) 100%);
}
.hero .container{ position:relative; z-index:2; display:flex !important; justify-content:center; padding-top:0; }
.hero-content{ display:flex !important; flex-direction:column; align-items:center; max-width:900px; }

/* Floating rating badge — glassmorphism, top-right, out of main eyeline */
.hero-rating-float{
  position:absolute; top:110px; right:5%; z-index:3;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.1); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.25);
  padding:10px 18px 10px 8px; border-radius:100px;
  color:#fff; font-size:.82rem; font-weight:500;
}
.hero-rating-float .stars{ background:var(--amber); color:#fff; border-radius:100px; padding:4px 10px; font-weight:700; font-size:.8rem; }

/* Thin gold divider between the location tag and headline */
.hero-divider{ display:block; width:60px; height:2px; background:var(--amber); margin:0 auto 28px; }

/* Bolder, tighter serif headline */
.hero h1{
  font-family:'Playfair Display', serif; font-weight:600 !important; letter-spacing:-.01em;
  color:#fff; font-size:clamp(2.4rem, 5.2vw, 4.4rem); line-height:1.25 !important;
  text-align:center; margin-bottom:30px !important;
}

/* Lighter, smaller body copy */
.hero p.lead{
  font-family:'Poppins',sans-serif; font-weight:300 !important; letter-spacing:.01em;
  font-size:.92rem !important; max-width:520px !important; margin:0 auto 32px !important;
  color:rgba(255,255,255,.75); text-align:center;
}

/* CTA hierarchy: Check Availability primary, Explore Suites secondary + real hover lift */
.hero-actions{ display:flex; gap:16px; justify-content:center !important; margin-bottom:8px !important; }
.hero .btn{ transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s; }
.hero .btn:hover{ transform:translateY(-3px) scale(1.03); }
.hero .btn-primary:hover{ box-shadow:0 16px 34px rgba(62,182,81,.45); }
.hero .btn-outline:hover{ box-shadow:0 10px 24px rgba(255,255,255,.15); }

/* On phones, top-align the hero and pin the reviews badge just under the
   header so it never lands on top of the headline */
@media (max-width:600px){
  .hero{ align-items:flex-start; }
  .hero .container{ padding-top:112px; padding-bottom:64px; }
  .hero-rating-float{
    top:74px; right:auto; left:50%; transform:translateX(-50%);
    white-space:nowrap; font-size:.74rem; padding:6px 14px 6px 6px;
  }
  .hero-rating-float .stars{ font-size:.72rem; padding:3px 8px; }
  .hero h1{ font-size:clamp(2rem, 8vw, 2.9rem); margin-bottom:22px !important; }
  .hero p.lead{ margin-bottom:22px !important; }
}

/* Staggered fade-up entrance on load */
.fade-in-up{ opacity:0; transform:translateY(18px); animation:fadeInUp .8s ease forwards; }
@keyframes fadeInUp{ to{ opacity:1; transform:translateY(0); } }

/* Scroll cue: pulsing line + traveling dot */
/* ============================================================
   SCROLL CUE — advanced version (mouse icon + auto fade on scroll)
   ============================================================ */
.scroll-cue{
  position:fixed; bottom:44px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:none; border:none; cursor:pointer; padding:8px;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.scroll-cue-label{
  font-family:Arial, Helvetica, sans-serif;
  color:rgba(255,255,255,.75); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
}
.scroll-cue-mouse{
  position:relative; width:24px; height:38px; border:2px solid rgba(255,255,255,.55);
  border-radius:14px; display:flex; justify-content:center;
}
.scroll-cue-dot{
  width:4px; height:8px; margin-top:7px; border-radius:3px;
  background:#3eb651;
  animation:scrollCueMove 1.6s ease-in-out infinite;
}
@keyframes scrollCueMove{
  0%{ opacity:0; transform:translateY(0); }
  30%{ opacity:1; }
  70%{ opacity:1; }
  100%{ opacity:0; transform:translateY(12px); }
}
.scroll-cue:hover .scroll-cue-mouse{ border-color:rgba(255,255,255,.85); }
.scroll-cue.is-hidden{ opacity:0; transform:translateX(-50%) translateY(10px); pointer-events:none; }
/* the "scroll below" mouse cue is a desktop affordance; on phones it just
   collides with the hero CTAs */
@media (max-width:600px){ .scroll-cue{ display:none; } }
/* ============================================================
   CURATED FEATURES SECTION
   ============================================================ */
.curated-section{
  position:relative; padding:110px 0; overflow:hidden; background:var(--charcoal);
}
.curated-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:brightness(.35) saturate(.8);
}
.curated-overlay{
  position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(10,15,12,.92) 20%, rgba(10,15,12,.75) 60%, rgba(10,15,12,.5) 100%);
}
.curated-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:.85fr 1.3fr; gap:60px; align-items:center;
}
.curated-text h2{ color:#fff; font-size:clamp(2.2rem, 3.6vw, 3rem); margin-bottom:22px; }
.curated-text p{ color:rgba(255,255,255,.68); font-size:1rem; line-height:1.75; max-width:440px; }
.curated-icons{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
.curated-item{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-md); padding:26px 18px; text-align:left;
  transition:transform .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.curated-item:hover, .curated-item.is-active{
  background:rgba(62,182,81,.08); border-color:var(--leaf); transform:translateY(-6px);
}
.curated-icon{
  width:42px; height:42px; margin-bottom:16px; color:rgba(255,255,255,.55);
  transition:color .4s var(--ease);
}
.curated-item:hover .curated-icon, .curated-item.is-active .curated-icon{ color:var(--leaf); }
.curated-item h4{ color:#fff; font-size:.92rem; font-weight:600; margin:0; }

@media (max-width:1024px){
  .curated-grid{ grid-template-columns:1fr; }
  .curated-icons{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:560px){
  .curated-section{ padding:70px 0; }
  .curated-icons{ grid-template-columns:1fr 1fr; gap:14px; }
  .curated-item{ padding:20px 14px; }
}
/* ============================================================
   SPLIT-SCREEN SUITE REVEAL
   ============================================================ */
.split-intro{ max-width:640px; margin:0 auto 60px; text-align:center; }
.split-intro h2{ font-size:clamp(2rem, 3.4vw, 2.7rem); margin-bottom:14px; }

.split-reveal{ display:grid; grid-template-columns:1fr 1fr; gap:70px; }

.split-visual{
  position:sticky; top:110px; height:72vh; border-radius:0;
  overflow:hidden; box-shadow:var(--shadow-strong); align-self:start;
}
.split-image{
  position:absolute; inset:0; width:100%; height:100%;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0; transform:scale(1.05); transition:opacity 1s var(--ease), transform 1.2s var(--ease);
}
.split-image.active{ opacity:1; transform:scale(1); }
.split-counter{
  position:absolute; bottom:24px; right:24px; z-index:3;
  color:#fff; font-size:.85rem; font-weight:600; letter-spacing:.05em;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px); padding:8px 16px; border-radius:100px;
}

.split-list{ display:flex; flex-direction:column; }
.split-row{
  min-height:72vh; display:flex; flex-direction:column; justify-content:center;
  padding:40px 0; border-top:1px solid var(--cloud);
  opacity:.35; transition:opacity .5s var(--ease);
}
.split-row:first-child{ border-top:none; }
.split-row.is-active{ opacity:1; }
.split-row-thumb{ display:none; width:100%; aspect-ratio:16/10; border-radius:var(--radius-md); background-size:cover; background-position:center; margin-bottom:20px; }
.split-tag{ font-size:.82rem; font-weight:600; color:var(--amber-dark); letter-spacing:.02em; margin-bottom:10px; display:block; }
.split-row h3{ font-size:1.8rem; margin-bottom:14px; }
.split-row p{ max-width:420px; margin-bottom:26px; }

@media (max-width:900px){
  .split-reveal{ grid-template-columns:1fr; gap:0; }
  .split-visual{ display:none; }
  .split-row-thumb{ display:block; }
  .split-row{ min-height:auto; opacity:1; padding:36px 0; }
}
#suites{ background:#ffff; }
/* ============================================================
   ROUTE MAP — tabbed timeline
   ============================================================ */
.route-tabs{
  display:flex; justify-content:center; gap:36px; margin-bottom:50px; flex-wrap:wrap;
  border-bottom:1px solid rgba(0,0,0,.08); padding-bottom:0;
}
.route-tab{
  background:none; border:none; cursor:pointer; padding:0 0 16px;
  font-size:1rem; font-weight:600; color:var(--mist); position:relative;
}
.route-tab::after{
  content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%;
  background:var(--canopy); transform:scaleX(0); transition:transform .3s var(--ease);
}
.route-tab.active{ color:var(--canopy); }
.route-tab.active::after{ transform:scaleX(1); }

.route-timeline{
  display:none; background:var(--leaf); border-radius:var(--radius-lg);
  padding:40px 50px; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.route-timeline.active{ display:flex; }
.route-waypoints{ display:flex; align-items:center; flex:1; min-width:280px; }
.waypoint{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.wp-dot{
  width:44px; height:44px; border-radius:50%; border:2px solid rgba(255,255,255,.7);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0;
}
.wp-label{ color:#fff; font-size:.85rem; font-weight:600; white-space:nowrap; }
.wp-line{ flex:1; height:1px; background:rgba(255,255,255,.5); margin:0 8px 26px; min-width:20px; }

.route-dest{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.route-logo-card{
  background:#fff; border-radius:var(--radius-md); padding:14px 22px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.route-logo-card img{ height:44px; width:auto; }
.route-dest-info{ color:#fff; font-size:.82rem; font-weight:500; text-align:center; }
.route-dest .map-link{ color:#fff; font-weight:600; font-size:.85rem; text-decoration:underline; }

@media (max-width:900px){
  .route-timeline{ flex-direction:column; align-items:stretch; padding:32px; }
  .route-waypoints{ justify-content:center; }
  .route-dest{ padding-top:20px; border-top:1px solid rgba(255,255,255,.2); }
}
@media (max-width:620px){
  /* the horizontal 5-stop timeline can't fit a phone — stack it vertically */
  .route-tabs{ gap:14px 20px; margin-bottom:30px; }
  .route-tab{ font-size:.9rem; padding-bottom:12px; }
  .route-timeline{ padding:24px 22px; gap:20px; }
  .route-waypoints{ flex-direction:column; align-items:flex-start; gap:0; width:100%; min-width:0; }
  .waypoint{ flex-direction:row; align-items:center; gap:14px; }
  .wp-dot{ width:38px; height:38px; font-size:.9rem; }
  .wp-label{ white-space:normal; font-size:.92rem; }
  .wp-line{ flex:0 0 auto; width:2px; height:16px; min-width:0; margin:3px 0 3px 18px; }
}
@media (max-width:380px){
  .route-tabs{ gap:12px 14px; }
  .route-tab{ font-size:.84rem; }
}
/* ============================================================
   MONSOON OFFER — video-style hero with rain overlay + countdown
   ============================================================ */
.monsoon-section{
  position:relative; min-height:90vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center; padding:100px 0;
}
.monsoon-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  animation:heroZoom 24s ease-in-out infinite alternate; filter:brightness(.55) saturate(.9);
}
.monsoon-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,15,12,.55) 0%, rgba(10,15,12,.75) 100%);
}
.monsoon-section::before, .monsoon-section::after{
  content:''; position:absolute; left:0; right:0; height:150px; z-index:1; pointer-events:none;
}
.monsoon-section::before{ top:0; background:linear-gradient(180deg, var(--ivory) 0%, rgba(250,248,244,0) 100%); }
.monsoon-section::after{ bottom:0; background:linear-gradient(180deg, rgba(250,248,244,0) 0%, var(--ivory) 100%); }
.rain-canvas{
  position:absolute; inset:0; z-index:1; pointer-events:none; width:100%; height:100%;
}
.monsoon-content{ position:relative; z-index:2; max-width:640px; }
.monsoon-tag{
  display:inline-block; color:var(--amber); font-size:.78rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:20px;
}
.monsoon-content h2{ color:#fff; font-size:clamp(2.2rem, 4.4vw, 3.4rem); margin-bottom:20px; }
.monsoon-content p{ color:rgba(255,255,255,.8); font-size:1.02rem; max-width:480px; margin:0 auto 40px; }

.monsoon-countdown{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:40px; }
.cd-item{
  background:rgba(255,255,255,.08); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius-md); padding:16px 22px; min-width:78px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.cd-item span{ font-family:var(--font-display); font-size:1.9rem; font-weight:600; color:#fff; }
.cd-item label{ font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.cd-sep{ color:rgba(255,255,255,.4); font-size:1.6rem; font-weight:300; }

.monsoon-checklist{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:24px; margin-bottom:44px; padding:0; list-style:none;
}
.monsoon-checklist li{ white-space:nowrap; flex-shrink:0; }
.monsoon-checklist li{ display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.85); font-size:.92rem; font-weight:500; }
.check-icon{
  width:22px; height:22px; color:var(--leaf); flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
}

@media (max-width:560px){
  .monsoon-countdown{ gap:10px; }
  .cd-item{ min-width:64px; padding:12px 14px; }
  .cd-item span{ font-size:1.4rem; }
}
/* ============================================================
   AERIAL FILM — full-width landscape drone reel
   ============================================================ */
.aerial-section{
  position:relative; min-height:72vh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--charcoal);
}
.aerial-video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; background:#0e1512;
}
.aerial-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,15,12,.5) 0%, rgba(10,15,12,.15) 40%, rgba(10,15,12,.92) 100%),
    linear-gradient(90deg, rgba(10,15,12,.7) 0%, rgba(10,15,12,.2) 52%, rgba(10,15,12,0) 100%);
}
.aerial-inner{
  position:relative; z-index:2;
  padding-top:140px; padding-bottom:clamp(64px,11vh,120px);
}
.aerial-copy{ color:#fff; max-width:560px; }
.aerial-eyebrow{
  display:block; color:var(--amber); font-size:.74rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px;
}
.aerial-copy h2{
  font-family:var(--font-display); font-weight:400; color:#fff;
  font-size:clamp(2.2rem,4.4vw,3.6rem); line-height:1.12; margin:0 0 20px;
  text-shadow:0 4px 24px rgba(10,15,12,.5);
}
.aerial-copy p{
  color:rgba(255,255,255,.8); font-size:1.02rem; line-height:1.8; margin:0 0 34px;
  max-width:480px; text-shadow:0 2px 14px rgba(10,15,12,.4);
}
.aerial-play{
  position:absolute; inset:0; margin:auto; z-index:3;
  width:78px; height:78px; border-radius:50%;
  border:1px solid rgba(255,255,255,.5); background:rgba(15,20,17,.4); backdrop-filter:blur(6px);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:opacity .45s var(--ease), transform .3s var(--ease), background .3s var(--ease);
}
.aerial-play svg{ width:30px; height:30px; margin-left:4px; }
.aerial-play:hover{ transform:scale(1.06); background:rgba(15,20,17,.62); }
.aerial-section.is-playing .aerial-play{ opacity:0; pointer-events:none; transform:scale(.9); }
.aerial-sound{
  position:absolute; bottom:26px; right:26px; z-index:3; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.32); background:rgba(15,20,17,.42); backdrop-filter:blur(6px);
  color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.aerial-sound:hover{ background:rgba(15,20,17,.7); transform:scale(1.06); }
.aerial-sound svg{ width:19px; height:19px; }
.aerial-sound .ico-on{ display:none; }
.aerial-sound.is-on .ico-off{ display:none; }
.aerial-sound.is-on .ico-on{ display:block; }
@media (max-width:600px){
  .aerial-section{ min-height:66vh; }
  .aerial-veil{
    background:linear-gradient(180deg, rgba(10,15,12,.45) 0%, rgba(10,15,12,.28) 34%, rgba(10,15,12,.95) 100%);
  }
  .aerial-inner{ padding-top:96px; padding-bottom:52px; }
  .aerial-copy{ max-width:none; }
  .aerial-copy p{ max-width:none; font-size:.96rem; }
  .aerial-sound{ bottom:16px; right:16px; }
}
/* ============================================================
   ENQUIRY INFO PANEL — luxury upgrade
   ============================================================ */
.enquiry-info{ position:relative; overflow:hidden; padding:0 !important; }
.enquiry-info-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  animation:heroZoom 26s ease-in-out infinite alternate;
}
.enquiry-info-overlay{
  position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(31,77,51,.95) 10%, rgba(23,33,27,.9) 100%);
}
.enquiry-info-content{ position:relative; z-index:2; padding:56px; }
.enquiry-info-content h2{ color:#fff; }
.enquiry-info-content p{ color:rgba(255,255,255,.78); }

.enquiry-contact-list{ list-style:none; margin:0 0 36px; padding:0; }
.enquiry-contact-list li{
  display:flex; align-items:center; gap:16px; margin-bottom:14px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-md); padding:14px 18px;
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.enquiry-contact-list li:hover{
  transform:translateX(6px); background:rgba(62,182,81,.12); border-color:rgba(62,182,81,.4);
}
.enquiry-contact-list li span:last-child{ color:#fff; font-size:.95rem; font-weight:500; min-width:0; overflow-wrap:anywhere; }
.enquiry-contact-list .ico{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--leaf) 0%, var(--leaf-dark) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -3px 6px rgba(0,0,0,.25),
    0 6px 14px rgba(0,0,0,.3);
}
.enquiry-contact-list .ico svg{ width:19px; height:19px; }

.enquiry-trust{
  display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.75); font-size:.85rem;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.12);
}
.enquiry-trust .stars{
  background:var(--amber); color:#fff; border-radius:100px; padding:4px 10px; font-weight:700; font-size:.82rem; flex-shrink:0;
}

@media (max-width:900px){
  .enquiry-info-content{ padding:40px 30px; }
}
@media (max-width:560px){
  .enquiry-info-content{ padding:34px 22px; }
  .enquiry-contact-list li{ gap:13px; padding:13px 14px; }
  .enquiry-contact-list li span:last-child{ font-size:.9rem; }
}
/* ============================================================
   LIVE WEATHER — compact animated badge
   ============================================================ */
.weather-badge{
  position:absolute; top:24px; right:24px; z-index:3;
  display:inline-flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  border-radius:100px; padding:10px 18px 10px 10px;
  backdrop-filter:blur(8px);
}
.weather-badge-icon{
  font-size:1.5rem; display:inline-block;
  animation:weatherFloat 3s ease-in-out infinite;
}
@keyframes weatherFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-4px) rotate(-4deg); }
}
.weather-badge-text{ display:flex; flex-direction:column; line-height:1.2; }
.weather-badge-temp{ color:#fff; font-weight:700; font-size:1.05rem; }
.weather-badge-cond{ color:rgba(255,255,255,.6); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:560px){
  /* on desktop the badge floats over the panel's top-right corner;
     on phones that lands on top of the heading, so drop it into flow */
  .weather-badge{ position:static; margin:0 0 22px; }
}
.gallery-filter-btn{
  padding:10px 22px; border-radius:100px; border:1.5px solid var(--cloud);
  background:#fff; color:var(--mist); font-weight:600; font-size:.88rem; cursor:pointer;
  transition:background .3s, color .3s, border-color .3s;
}
.gallery-filter-btn.active, .gallery-filter-btn:hover{
  background:var(--leaf); color:#fff; border-color:var(--leaf);
}
/* ============================================================
   GOOGLE-REVIEW-STYLE CAROUSEL WITH EXPAND
   ============================================================ */
.reviews-section{ padding:90px 0; overflow:hidden; }
.gr-carousel{ display:flex; align-items:center; gap:20px; max-width:640px; margin:0 auto; }
.gr-card-wrap{ overflow:hidden; flex:1; }
.gr-track{ display:flex; transition:transform .5s var(--ease); }
.gr-card{ flex:0 0 100%; }

.gr-shot{
  background:#fff; border-radius:var(--radius-md); padding:22px; box-shadow:var(--shadow-strong);
}
.gr-shot-header{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.gr-shot-header > div:nth-child(2){ flex:1; }
.gr-shot-header strong{ display:block; font-size:.92rem; color:var(--canopy); }
.gr-shot-meta{ font-size:.74rem; color:var(--mist); }
.gr-avatar{
  width:38px; height:38px; border-radius:50%; background:var(--leaf); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0;
}
.gr-logo{
  width:26px; height:26px; border-radius:50%; background:#fff; border:1px solid var(--cloud);
  color:#4285F4; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center;
}
.gr-shot-stars{ color:var(--amber); font-size:.95rem; margin-bottom:12px; }
.gr-shot-stars span{ color:var(--mist); font-size:.78rem; font-weight:500; margin-left:8px; }
.gr-shot-text{
  color:var(--canopy); font-size:.9rem; line-height:1.6; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.gr-readmore{
  display:block; margin:14px auto 0; background:none; border:none; cursor:pointer;
  color:var(--amber); font-weight:600; font-size:.85rem;
}
.gr-full{
  max-height:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .4s var(--ease), margin .4s var(--ease);
  opacity:0; margin-top:0;
}
.gr-full.open{ max-height:300px; opacity:1; margin-top:14px; }
.gr-full p{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md); padding:18px; color:rgba(255,255,255,.85); font-size:.9rem; line-height:1.7; margin:0;
}

.gr-arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:transparent; color:#fff; cursor:pointer; flex-shrink:0; font-size:1.1rem;
  transition:background .3s, transform .3s;
}
.gr-arrow:hover{ background:rgba(255,255,255,.12); transform:scale(1.08); }

@media (max-width:700px){
  .gr-carousel{ gap:8px; }
  .gr-arrow{ width:36px; height:36px; font-size:.95rem; }
}
/* Fix: review dots — proper circles, centered */
.review-dots{
  display:flex !important; justify-content:center !important; align-items:center;
  gap:8px; width:100%; margin-top:24px; padding:0;
}
.review-dot{
  width:9px !important; height:9px !important; min-width:9px; padding:0 !important;
  border-radius:50% !important; background:rgba(255,255,255,.4) !important;
  border:none; cursor:pointer; appearance:none; -webkit-appearance:none;
  transition:background .3s, transform .3s; flex-shrink:0;
}
.review-dot.active{ background:#fff !important; transform:scale(1.3); }
@media (max-width:640px){
  .monsoon-checklist{ gap:14px; }
  .monsoon-checklist li{ font-size:.82rem; }
  .check-icon{ width:18px; height:18px; }
}
/* ============================================================
   COLLECTION PAGES — shared styles for all 5 suite collections
   ============================================================ */
.col-hero{
  position:relative; min-height:78vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center; padding:140px 20px 70px;
}
.col-hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  animation:heroZoom 22s ease-in-out infinite alternate; filter:brightness(.5) saturate(.9);
}
.col-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,15,12,.55) 0%, rgba(10,15,12,.8) 100%);
}
.col-hero-content{ position:relative; z-index:2; max-width:680px; }
.col-hero-number{
  display:inline-block; color:rgba(255,255,255,.5); font-size:.78rem; font-weight:600;
  letter-spacing:.14em; margin-bottom:18px;
}
.col-hero-content h1{ color:#fff; font-size:clamp(2.2rem, 4.6vw, 3.6rem); line-height:1.2; margin-bottom:22px; }
.col-hero-content p{ color:rgba(255,255,255,.78); font-size:1rem; max-width:540px; margin:0 auto 32px; }

.col-feature{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.col-feature.reverse{ direction:rtl; }
.col-feature.reverse > *{ direction:ltr; }
.col-feature-photo{
  aspect-ratio:4/3; border-radius:var(--radius-lg); background-size:cover; background-position:center;
  box-shadow:var(--shadow-strong);
}
.col-badge{
  display:inline-block; background:var(--leaf); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:7px 16px; border-radius:100px; margin-bottom:18px;
}
.col-feature-body h2{ font-size:clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom:6px; }
.col-lede{ color:var(--amber-dark); font-weight:600; font-size:.95rem; margin-bottom:16px; }
.col-amenity-list{ list-style:none; padding:0; margin:20px 0 28px; }
.col-amenity-list li{
  position:relative; padding-left:26px; margin-bottom:10px; color:var(--mist); font-size:.94rem;
}
.col-amenity-list li::before{
  content:'✓'; position:absolute; left:0; top:0; color:var(--leaf-dark); font-weight:700;
}
.col-cta-row{ display:flex; gap:14px; flex-wrap:wrap; }

.col-hero-warm .col-hero-overlay{
  background:linear-gradient(180deg, rgba(31,20,10,.6) 0%, rgba(10,15,12,.82) 100%);
}

@media (max-width:900px){
  .col-feature{ grid-template-columns:1fr; gap:32px; }
  .col-feature.reverse{ direction:ltr; }
}
/* ============================================================
   AMENITIES PAGE
   ============================================================ */
.amen-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.amen-box{
  background:#fff; border:1px solid var(--cloud); border-radius:var(--radius-md);
  padding:32px 26px; transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.amen-box:hover, .amen-box.is-active{ transform:translateY(-6px); border-color:var(--leaf); box-shadow:var(--shadow-soft); }
.amen-icon{ width:38px; height:38px; color:var(--leaf); margin-bottom:16px; }
.amen-box h4{ font-size:1.05rem; margin-bottom:8px; }
.amen-box p{ font-size:.88rem; margin:0; }

.trust-strip{ display:flex; justify-content:space-around; flex-wrap:wrap; gap:20px; text-align:center; }
.trust-item strong{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--leaf-dark); }
.trust-item span{ font-size:.8rem; color:var(--mist); text-transform:uppercase; letter-spacing:.06em; }

.amen-cinematic{
  position:relative; height:60vh; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:20px; overflow:hidden; text-align:center;
}
.amen-cinematic-bg{ position:absolute; inset:0; background-size:cover; background-position:center; animation:heroZoom 20s ease-in-out infinite alternate; }
.amen-cinematic-overlay{ position:absolute; inset:0; background:rgba(10,15,12,.5); }
.amen-play-btn{
  position:relative; z-index:2; width:76px; height:76px; border-radius:50%;
  background:rgba(255,255,255,.15); backdrop-filter:blur(6px); border:2px solid rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .3s, background .3s;
}
.amen-play-btn:hover, .amen-play-btn:focus-visible{ transform:scale(1.1); background:rgba(255,255,255,.25); }
.amen-play-btn svg{ width:26px; height:26px; margin-left:4px; transition:fill .3s; }
.amen-play-btn:hover svg, .amen-play-btn:focus-visible svg{ fill:var(--amber); }
.amen-cinematic-text{ position:relative; z-index:2; color:#fff; }
.amen-cinematic-text h2{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.6rem); margin-bottom:6px; }
.amen-cinematic-text p{ color:rgba(255,255,255,.75); font-style:italic; font-family:var(--font-display); font-size:1.1rem; }

.amen-honest-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:0; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); }
.amen-honest-card{ position:relative; padding:40px; background:#fff; }
.amen-honest-card.dark{ background:var(--canopy); color:#fff; }
.amen-honest-card.dark h4{ color:#fff; }
.amen-honest-card.dark p{ color:rgba(255,255,255,.75); }
.amen-honest-photo{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.15; }
.amen-honest-body{ position:relative; z-index:2; }
.amen-honest-card h4{ font-size:1.2rem; margin-bottom:12px; }

.amen-faq-item{ border-bottom:1px solid rgba(0,0,0,.08); }
.amen-faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 4px; font-family:var(--font-body); font-weight:600; font-size:1rem; color:var(--canopy);
}
.amen-faq-q span{ font-size:1.4rem; color:var(--leaf-dark); transition:transform .3s var(--ease); }
.amen-faq-item.is-open .amen-faq-q span{ transform:rotate(45deg); }
.amen-faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.amen-faq-item.is-open .amen-faq-a{ max-height:200px; }
.amen-faq-a p{ padding:0 4px 20px; margin:0; color:var(--mist); }

.amen-closing-grid{ display:grid; grid-template-columns:1fr 1fr; }
.amen-closing-panel{ position:relative; height:280px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.amen-closing-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .6s var(--ease); }
.amen-closing-panel:hover .amen-closing-bg{ transform:scale(1.08); }
.amen-closing-overlay{ position:absolute; inset:0; background:rgba(10,15,12,.5); }
.amen-closing-text{ position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center; }
.amen-closing-text h3{ color:#fff; font-size:1.6rem; margin:0; }

@media (max-width:900px){
  .amen-grid{ grid-template-columns:1fr 1fr; }
  .amen-honest-grid{ grid-template-columns:1fr; }
  .amen-closing-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .amen-grid{ grid-template-columns:1fr; }
}

/* ---------- The Two Infinity Pools (themed interlude) ---------- */
.pool-theme{
  position:relative; padding:0; isolation:isolate;
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%, rgba(47,157,163,.28), transparent 60%),
    radial-gradient(ellipse 60% 45% at 100% 100%, rgba(217,142,66,.1), transparent 60%),
    linear-gradient(170deg, var(--canopy) 0%, #0f4b4e 30%, #0b3a41 55%, #0a2e35 76%, var(--charcoal) 100%);
}
.pool-theme-inner{ position:relative; z-index:2; padding:118px 0 100px; }

.pool-theme-aura{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.pool-theme-aura span{
  position:absolute; border-radius:50%; filter:blur(60px); mix-blend-mode:screen;
  animation:poolAuraDrift 26s ease-in-out infinite alternate;
}
.pool-theme-aura span:nth-child(1){ width:36vw; height:36vw; top:-10%; left:-8%; background:radial-gradient(circle, rgba(47,157,163,.4), transparent 70%); }
.pool-theme-aura span:nth-child(2){ width:30vw; height:30vw; bottom:-12%; right:-6%; background:radial-gradient(circle, rgba(217,142,66,.26), transparent 70%); animation-delay:-9s; animation-duration:32s; }
.pool-theme-aura span:nth-child(3){ width:22vw; height:22vw; top:40%; left:60%; background:radial-gradient(circle, rgba(205,245,240,.12), transparent 70%); animation-delay:-18s; animation-duration:22s; }
@keyframes poolAuraDrift{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(4%, 6%) scale(1.15); } }

/* Rising pool bubbles — a quiet band behind the section heading only (not the
   full scrolly height below), so they stay near the top and visibly fade out
   with a gap before reaching the very top edge rather than running off it. */
.pool-bubbles{
  position:absolute; top:0; left:0; right:0; height:clamp(420px, 56vh, 640px);
  z-index:1; pointer-events:none; overflow:hidden;
}
.pool-bubbles span{
  position:absolute; bottom:-4%; left:var(--left); width:var(--size); height:var(--size);
  border-radius:50%;
  background:radial-gradient(circle at 30% 26%, rgba(255,255,255,.85), rgba(205,245,240,.22) 50%, rgba(205,245,240,.04) 78%);
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 0 5px rgba(205,245,240,.2);
  opacity:0;
  animation:poolBubbleRise var(--dur) ease-in infinite;
  animation-delay:var(--delay);
}
@keyframes poolBubbleRise{
  0%{ transform:translate(0,0) scale(.75); opacity:0; }
  12%{ opacity:.6; }
  55%{ transform:translate(6px,-23vh) scale(1); }
  82%{ opacity:.3; }
  100%{ transform:translate(-5px,-40vh) scale(1.05); opacity:0; }
}

.pool-theme-wave{ position:absolute; left:0; width:100%; line-height:0; z-index:3; pointer-events:none; }
.pool-theme-wave svg{ display:block; width:100%; height:auto; }
.pool-theme-wave.is-bottom{ bottom:-1px; transform:rotate(180deg); }

.pool-theme-head{ text-align:center; max-width:760px; margin:0 auto 64px; }
.pool-theme-head h2{
  color:#fff; font-weight:500; letter-spacing:-.01em; line-height:1.06;
  font-size:clamp(2.6rem, 6vw, 4.4rem); margin-bottom:20px;
}
.pool-theme-head h2 em{
  display:block; font-style:italic; font-weight:400; color:var(--amber);
  font-size:.92em; margin-top:.08em;
}
.pool-theme-head p{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  color:rgba(255,255,255,.56); font-size:1.08rem; letter-spacing:.01em; margin:0;
}


/* ---- Two-chapter scrollytelling: a pinned stage cross-fades between the
   shared and private pool as the user scrolls through a tall wrapper. ---- */
.pool-chapters{ position:relative; height:230vh; }
.pool-chapters-sticky{
  position:sticky; top:110px; height:68vh; min-height:440px; max-height:720px;
  overflow:hidden; border-radius:var(--radius-lg);
  box-shadow:0 30px 70px rgba(4,10,8,.5);
}

.pool-chapters-nav{
  position:absolute; top:26px; left:50%; transform:translateX(-50%); z-index:10;
  display:flex; align-items:center; gap:16px;
}
.pool-chapters-num{
  background:none; border:none; cursor:pointer; padding:4px 2px;
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:1.05rem; color:rgba(255,255,255,.4); transition:color .4s var(--ease);
}
.pool-chapters-num.is-active{ color:var(--amber); }
.pool-chapters-track{ width:110px; height:1px; background:rgba(255,255,255,.22); position:relative; }
.pool-chapters-fill{
  position:absolute; inset:0; width:100%; background:var(--amber);
  transform:scaleX(0); transform-origin:left;
}

.pool-chapter{
  position:absolute; inset:0; display:flex; align-items:stretch;
  will-change:opacity;
}
.pool-chapter-1{ opacity:1; }
.pool-chapter-2{ opacity:0; flex-direction:row-reverse; }

.pool-chapter-media{ position:relative; flex:0 0 66%; height:100%; overflow:hidden; }
.pool-chapter-img{
  position:absolute; inset:-3%; will-change:transform;
}

/* Local slider: a small, click-through set of 2-3 photos per pool, nested
   inside the chapter's own scroll-driven pan/zoom layer so the parallax
   keeps applying no matter which of its photos is currently showing. */
.pool-chapter-slider{
  position:absolute; inset:0; display:flex; width:300%; height:100%;
  transition:transform .7s var(--ease);
}
.pool-chapter-slide{ flex:0 0 33.3334%; height:100%; background-size:cover; background-position:center; }

.pool-chapter-slide-arrow{
  position:absolute; right:20px; bottom:20px; z-index:4; width:38px; height:38px;
  border-radius:50%; border:1px solid rgba(255,255,255,.35); cursor:pointer; padding:0;
  background:rgba(10,16,13,.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.pool-chapter-slide-arrow svg{ width:14px; height:14px; }
.pool-chapter-slide-arrow:hover{ background:var(--amber); border-color:var(--amber); transform:scale(1.08); }

.pool-chapter-slide-dots{ position:absolute; right:68px; bottom:37px; z-index:4; display:flex; gap:6px; }
.pool-chapter-slide-dots span{
  width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.4);
  transition:background .3s, transform .3s;
}
.pool-chapter-slide-dots span.is-active{ background:var(--amber); transform:scale(1.3); }

.pool-chapter-copy{
  flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  padding:0 56px;
}
.pool-chapter-label{
  display:block; font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:1.05rem; color:var(--amber); margin-bottom:14px;
}
.pool-chapter-copy h3{ color:#fff; font-size:clamp(2rem, 3.2vw, 2.9rem); line-height:1.08; margin-bottom:18px; }
.pool-chapter-copy p{ color:rgba(255,255,255,.68); font-size:1.02rem; line-height:1.7; max-width:38ch; margin-bottom:0; }
.pool-chapter-link{
  display:inline-flex; margin-top:22px; font-weight:600; color:var(--amber);
  font-size:.92rem; border-bottom:1px solid transparent; transition:border-color .3s;
}
.pool-chapter-link:hover{ border-color:var(--amber); }

.pool-chapter-1 .pool-chapter-copy{
  border-left:1px solid rgba(217,142,66,.4); padding-left:56px; text-align:left; align-items:flex-start;
}
.pool-chapter-2 .pool-chapter-copy{
  border-right:1px solid rgba(217,142,66,.4); padding-right:56px; padding-left:0;
  text-align:right; align-items:flex-end;
}

.pool-chapter-mist{
  position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0;
  background:radial-gradient(ellipse 65% 55% at 50% 50%, rgba(240,245,242,.6), transparent 70%);
  filter:blur(10px);
}

@media (max-width:1100px){
  .pool-chapter-copy{ padding:0 40px; }
  .pool-chapter-1 .pool-chapter-copy{ padding-left:40px; }
  .pool-chapter-2 .pool-chapter-copy{ padding-right:40px; }
  .pool-chapter-copy h3{ font-size:clamp(1.7rem, 4vw, 2.3rem); }
}
@media (max-width:760px){
  .pool-chapters{ height:auto; }
  .pool-chapters-sticky{
    position:static; height:auto; max-height:none; overflow:visible;
    border-radius:0; box-shadow:none;
  }
  .pool-chapters-nav{ display:none; }
  .pool-chapter{
    position:static !important; opacity:1 !important; transform:none !important;
    display:flex !important; flex-direction:column !important; margin-bottom:56px;
  }
  .pool-chapter:last-child{ margin-bottom:0; }
  .pool-chapter-media{ flex:0 0 auto; height:50vh; min-height:320px; border-radius:var(--radius-lg); overflow:hidden; }
  .pool-chapter-img{ transform:none !important; }
  .pool-chapter-copy{
    padding:28px 4px 0 !important; text-align:left !important; align-items:flex-start !important;
    border-left:1px solid rgba(217,142,66,.4) !important; border-right:none !important;
  }
  .pool-chapter-mist{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .pool-theme-aura span{ animation:none; }
  .pool-bubbles span{ animation:none; display:none; }
}
/* ============================================================
   THE Y3 EXPERIENCE PAGE — nearby attractions grid
   ============================================================ */
.exp-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.exp-card{
  background:#fff; border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-soft); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.exp-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-strong); }
.exp-photo{ height:190px; background-size:cover; background-position:center; }
.exp-photo.is-placeholder{
  background:linear-gradient(135deg, var(--canopy), var(--amber-dark));
  display:flex; align-items:center; justify-content:center;
}
.exp-photo.is-placeholder span{
  color:rgba(255,255,255,.85); font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.exp-body{ padding:24px; }
.exp-tag{
  display:inline-block; background:var(--cloud); color:var(--leaf-dark); font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:100px; margin-bottom:12px;
}
.exp-body h3{ font-size:1.15rem; margin-bottom:8px; }
.exp-body p{ font-size:.88rem; margin-bottom:14px; }
.exp-meta{ font-size:.78rem; color:var(--amber-dark); font-weight:600; }

@media (max-width:900px){ .exp-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .exp-grid{ grid-template-columns:1fr; } }
/* ============================================================
   THE Y3 EXPERIENCE PAGE — nearby attractions grid
   ============================================================ */
.exp-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.exp-card{
  background:#fff; border-radius:var(--radius-md); overflow:hidden;
  box-shadow:var(--shadow-soft); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.exp-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-strong); }
.exp-photo{ height:190px; background-size:cover; background-position:center; }
.exp-photo.is-placeholder{
  background:linear-gradient(135deg, var(--canopy), var(--amber-dark));
  display:flex; align-items:center; justify-content:center;
}
.exp-photo.is-placeholder span{
  color:rgba(255,255,255,.85); font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.exp-body{ padding:24px; }
.exp-tag{
  display:inline-block; background:var(--cloud); color:var(--leaf-dark); font-size:.72rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:100px; margin-bottom:12px;
}
.exp-body h3{ font-size:1.15rem; margin-bottom:8px; }
.exp-body p{ font-size:.88rem; margin-bottom:14px; }
.exp-meta{ font-size:.78rem; color:var(--amber-dark); font-weight:600; }

.exp-toggle{
  display:inline-flex; align-items:center; gap:4px; margin-top:14px; background:none; border:none;
  cursor:pointer; color:var(--leaf-dark); font-weight:600; font-size:.82rem; padding:0;
}
.exp-detail{
  max-height:0; overflow:hidden; transition:max-height .5s var(--ease), margin .4s var(--ease);
  margin-top:0;
}
.exp-card.is-open .exp-detail{ max-height:600px; margin-top:16px; }
.exp-detail p{ font-size:.85rem; color:var(--mist); margin-bottom:10px; padding-top:14px; border-top:1px solid var(--cloud); }
.exp-detail p:first-child{ padding-top:0; border-top:none; }
.exp-detail strong{ color:var(--canopy); }

/* Article page typography (blog posts) */
.article-wrap{ max-width:720px; margin:0 auto; }
.article-body p{ font-size:1.02rem; line-height:1.85; color:var(--mist); margin-bottom:22px; }
.article-body h3{ font-size:1.35rem; margin:36px 0 14px; color:var(--canopy); }
.article-body h3:first-of-type{ margin-top:0; }

@media (max-width:900px){ .exp-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .exp-grid{ grid-template-columns:1fr; } }

.gallery-page .main-nav > ul > li > a {
    color: #2f6b45;
}
/* Menu hover */
.gallery-page .main-nav > ul > li > a:hover {
    color: #555555;
    background: #eeeeee;
}
/* ============================================================
   ABOUT / OUR STORY PAGE
   ============================================================ */

/* Letter section */
.story-letter{ position:relative; padding:20px 0; }
.story-quote-mark{
  font-family:var(--font-display); font-size:5rem; color:var(--amber); opacity:.4; line-height:1; display:block; margin-bottom:-10px;
}
.story-letter p{
  font-family:var(--font-display); font-style:italic; font-size:1.3rem; line-height:1.7; color:var(--canopy);
  margin-bottom:20px;
}
.story-signature{ display:block; margin-top:24px; font-weight:600; color:var(--leaf-dark); font-size:.92rem; }

/* Growing-vine scroll timeline */
.story-timeline{ position:relative; max-width:720px; margin:0 auto; padding-left:50px; }
.story-vine{
  position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:rgba(0,0,0,.08);
}
.story-vine-fill{
  position:absolute; left:0; top:0; width:100%; height:0%; background:var(--leaf);
  transition:height .2s linear;
}
.story-milestone{ position:relative; margin-bottom:56px; }
.story-milestone:last-child{ margin-bottom:0; }
.story-dot{
  position:absolute; left:-50px; top:4px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--leaf); z-index:2;
}
.story-year{ display:block; font-size:.78rem; font-weight:700; color:var(--amber-dark); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.story-milestone-body h3{ font-size:1.3rem; margin-bottom:10px; }
.story-milestone-body p{ margin:0; max-width:520px; }

/* Values grid */
.story-values-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.story-value-card{
  background:#fff; border:1px solid var(--cloud); border-radius:var(--radius-md); padding:30px 24px;
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.story-value-card:hover{ transform:translateY(-6px); border-color:var(--leaf); box-shadow:var(--shadow-soft); }
.story-value-icon{ width:36px; height:36px; color:var(--leaf); margin-bottom:16px; }
.story-value-card h4{ font-size:1.02rem; margin-bottom:8px; }
.story-value-card p{ font-size:.85rem; margin:0; }


/* By the numbers */
.story-stats{ position:relative; padding:100px 0; overflow:hidden; }
.story-stats-bg{ position:absolute; inset:0; background-size:cover; background-position:center; animation:heroZoom 24s ease-in-out infinite alternate; }
.story-stats-overlay{ position:absolute; inset:0; background:rgba(10,15,12,.72); }
.story-stats-content{ position:relative; z-index:2; text-align:center; }
.story-stats-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; max-width:800px; margin:0 auto; }
.story-stat-num{ display:block; font-family:var(--font-display); font-size:3rem; font-weight:600; color:#fff; }
.story-stat label{ font-size:.8rem; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.06em; }

@media (max-width:900px){
  .story-stats-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:560px){
  .story-values-grid{ grid-template-columns:1fr; }
  .story-timeline{ padding-left:40px; }
  .story-dot{ left:-40px; }
}
/* Footer social icon fix */
.footer-social a{ color:#fff !important; }
.footer-social a svg{ stroke:#fff !important; fill:none!important; }
.footer-social a[aria-label="WhatsApp"] svg{ fill:#fff !important; stroke:none !important; }
/* ============================================================
   SUITE DETAIL MODAL — click-to-expand, no separate page needed
   ============================================================ */
.suite-modal-overlay{
  position:fixed; inset:0; z-index:3000; background:rgba(10,15,12,.85);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.suite-modal-overlay.is-active{ opacity:1; visibility:visible; }
.suite-modal-box{
  background:#fff; border-radius:var(--radius-lg); overflow:hidden; max-width:900px; width:100%;
  max-height:88vh; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; position:relative;
  transform:scale(.95); transition:transform .35s var(--ease);
}
.suite-modal-overlay.is-active .suite-modal-box{ transform:scale(1); }
.suite-modal-photo-wrap{ position:relative; min-height:280px; overflow:hidden; background:var(--canopy); }
.suite-modal-photo-track{ position:relative; width:100%; height:100%; min-height:280px; }
.suite-modal-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity .4s var(--ease);
}
.suite-modal-slide.active{ opacity:1; }
.suite-modal-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.85); color:var(--canopy); font-size:1rem;
  transition:background .3s, transform .3s;
}
.suite-modal-arrow:hover{ background:#fff; transform:translateY(-50%) scale(1.08); }
.suite-modal-arrow-left{ left:14px; }
.suite-modal-arrow-right{ right:14px; }
.suite-modal-dots{ position:absolute; bottom:14px; left:0; right:0; z-index:3; display:flex; justify-content:center; gap:7px; }
.suite-modal-dots .dot{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); border:none; cursor:pointer;
  transition:background .3s, transform .3s;
}
.suite-modal-dots .dot.active{ background:#fff; transform:scale(1.3); }
.suite-modal-content{ padding:40px; }
.suite-modal-tag{ display:inline-block; background:var(--leaf); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:100px; margin-bottom:16px; }
.suite-modal-content h2{ font-size:1.6rem; margin-bottom:14px; }
.suite-modal-content p{ margin-bottom:20px; }
.suite-modal-close{
  position:absolute; top:16px; right:16px; z-index:2; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.9); border:none; font-size:1.4rem; cursor:pointer; color:var(--canopy);
}
@media (max-width:700px){
  .suite-modal-box{ grid-template-columns:1fr; max-height:90vh; }
  .suite-modal-photo{ min-height:200px; }
  .suite-modal-content{ padding:26px; }
}
/* ============================================================
   FIND YOUR FIT — bridge section between suites and comparison table
   ============================================================ */
.fit-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.fit-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-md);
  padding:30px 24px; text-align:left; cursor:pointer; color:#fff;
  transition:transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.fit-card:hover{ transform:translateY(-6px); background:rgba(62,182,81,.12); border-color:var(--leaf); }
.fit-icon{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%;
  background:var(--leaf); color:#fff; font-size:1.1rem; font-weight:700; margin-bottom:16px;
}
.fit-card h4{ color:#fff; font-size:1.05rem; margin-bottom:8px; }
.fit-card p{ color:rgba(255,255,255,.7); font-size:.88rem; margin:0; }

.row-highlight{ animation:rowPulse 1.6s ease; }
@keyframes rowPulse{
  0%{ background:rgba(62,182,81,.25); }
  100%{ background:transparent; }
}

@media (max-width:900px){ .fit-grid{ grid-template-columns:1fr; } }
/* ============================================================
   PLATINUM CARDS — premium full-bleed treatment
   ============================================================ */
.plat-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.plat-card{
  position:relative; aspect-ratio:3/4.2; border-radius:var(--radius-lg); overflow:hidden;
  cursor:pointer; box-shadow:var(--shadow-soft); transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.plat-card:hover{ transform:translateY(-10px); box-shadow:var(--shadow-strong); }
.plat-photo{
  position:absolute; inset:0; background:var(--photo-tone) center/cover no-repeat;
  transition:transform .7s var(--ease);
}
.plat-card:hover .plat-photo{ transform:scale(1.08); }
.plat-overlay{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,15,12,.15) 0%, rgba(10,15,12,.2) 40%, rgba(10,15,12,.92) 100%);
}
.plat-index{
  position:absolute; top:24px; left:24px; z-index:2; font-family:var(--font-display);
  font-size:2.2rem; font-weight:600; color:rgba(255,255,255,.35);
}
.plat-price{
  position:absolute; top:26px; right:24px; z-index:2; background:rgba(255,255,255,.14);
  backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); color:#fff;
  font-size:.78rem; font-weight:600; padding:8px 14px; border-radius:100px;
}
.plat-body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:28px; }
.plat-tag{
  display:inline-block; color:var(--amber); font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px;
}
.plat-body h3{ color:#fff; font-size:1.35rem; line-height:1.3; margin-bottom:18px; }
.plat-cta{
  display:inline-flex; align-items:center; gap:6px; color:#fff; font-weight:600; font-size:.9rem;
  border-top:1px solid rgba(255,255,255,.2); padding-top:16px; width:100%;
}
.plat-cta .arrow{ transition:transform .3s var(--ease); }
.plat-card:hover .plat-cta .arrow{ transform:translateX(6px); }

@media (max-width:900px){ .plat-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .plat-grid{ grid-template-columns:1fr; } }
/* Find Your Fit — animated match reveal */
.fit-wrap{ position:relative; min-height:220px; }
.fit-grid, .fit-loading, .fit-result{
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.fit-loading, .fit-result{
  position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; opacity:0;
}
.fit-loading.show, .fit-result.show{ display:flex; opacity:1; }
.fit-grid.hide{ opacity:0; pointer-events:none; position:absolute; inset:0; }

.fit-loading-dots{ display:flex; gap:8px; margin-bottom:16px; }
.fit-loading-dots span{
  width:10px; height:10px; border-radius:50%; background:var(--leaf);
  animation:fitDotPulse 1s ease-in-out infinite;
}
.fit-loading-dots span:nth-child(2){ animation-delay:.15s; }
.fit-loading-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes fitDotPulse{ 0%,100%{ transform:scale(.6); opacity:.4; } 50%{ transform:scale(1); opacity:1; } }
.fit-loading p{ color:rgba(255,255,255,.7); font-size:.9rem; margin:0; }

.fit-result-label{ color:var(--amber); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:10px; }
.fit-result h3{ color:#fff; font-size:1.6rem; margin-bottom:10px; }
.fit-result p{ color:rgba(255,255,255,.75); max-width:420px; margin-bottom:26px; }
.fit-result-actions{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; justify-content:center; }
.fit-result-again{ background:none; border:none; color:rgba(255,255,255,.6); text-decoration:underline; cursor:pointer; font-size:.88rem; }
.atlas-section{
  --atlas-dark2:#0d1410; --atlas-ivory:#f8f6f0;
  position:relative;
}
.atlas-grid{ display:grid; grid-template-columns:42% 58%; min-height:600px; }

.atlas-panel{
  background:var(--canopy); color:var(--atlas-ivory);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:64px 56px 44px;
}
.atlas-eyebrow{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--amber); margin-bottom:18px;
}
.atlas-intro{ max-width:640px; margin:0 auto; text-align:center; padding:80px 24px 44px; }
   .atlas-intro h2{
     font-family:var(--font-display); font-weight:400; font-size:clamp(2.2rem,3.4vw,3.2rem);
     line-height:1.1; margin:0 0 16px; color:var(--canopy);
   }
.atlas-intro p{
     max-width:480px; margin:0 auto; color:var(--stone); font-size:1rem; line-height:1.65;
   }

.atlas-list-window{
  position:relative; height:280px; overflow:hidden; margin:28px 0 20px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%);
}
.atlas-list-track{ position:relative; transition:transform .55s var(--ease); }
.atlas-item{
  display:flex; align-items:center; gap:18px; width:100%; height:56px; text-align:left;
  background:none; border:none; border-bottom:1px solid rgba(248,246,240,.1);
  padding:0 4px; cursor:pointer; color:rgba(248,246,240,.4); overflow:hidden;
}
.atlas-item-num{ font-family:var(--font-display); font-size:.85rem; color:rgba(248,246,240,.35); transition:color .4s var(--ease); }
.atlas-item-name{ font-family:var(--font-display); font-size:1.05rem; font-weight:400; flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color .4s var(--ease), transform .4s var(--ease);
  }
.atlas-item-tag{ font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(248,246,240,.3); transition:color .4s var(--ease); white-space:nowrap; }
.atlas-item.is-active{ color:var(--atlas-ivory); }
.atlas-item.is-active .atlas-item-num{ color:var(--amber); }
.atlas-item.is-active .atlas-item-name{ color:var(--atlas-ivory); transform:translateX(4px); }
.atlas-item.is-active .atlas-item-tag{ color:var(--amber); }
.atlas-item:hover .atlas-item-name{ color:var(--atlas-ivory); }

.atlas-detail{ min-height:108px; }
.atlas-detail-inner{ opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.atlas-detail-inner.is-shown{ opacity:1; transform:translateY(0); }
.atlas-detail-desc{ color:rgba(248,246,240,.68); font-size:.92rem; line-height:1.7; max-width:400px; margin:0 0 18px; }
.atlas-detail-amenities{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.atlas-pill{ font-size:.7rem; letter-spacing:.03em; color:rgba(248,246,240,.75); border:1px solid rgba(248,246,240,.2); border-radius:100px; padding:6px 13px; }
.atlas-detail-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.atlas-price{ font-family:var(--font-display); font-size:1.05rem; color:var(--atlas-ivory); }
.atlas-view-btn{
  display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:100px;
  border:1px solid var(--amber); background:var(--amber); color:var(--atlas-dark2);
  font-weight:600; font-size:.82rem; cursor:pointer; white-space:nowrap; text-decoration:none;
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.atlas-view-btn:hover{ background:transparent; color:var(--atlas-ivory); transform:translateX(2px); }

.atlas-nav{ display:flex; align-items:center; gap:18px; margin-top:20px; }
.atlas-nav-btn{
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(248,246,240,.25);
  background:transparent; color:var(--atlas-ivory); cursor:pointer; display:grid; place-items:center; font-size:1rem;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.atlas-nav-btn:hover{ border-color:var(--amber); background:rgba(217,142,66,.12); }
.atlas-count{ font-family:var(--font-display); font-size:.85rem; color:rgba(248,246,240,.5); letter-spacing:.05em; }

.atlas-visual{ position:relative; overflow:hidden; }
.atlas-photos{ position:absolute; inset:0; }
.atlas-photo{
  position:absolute; inset:0; background-size:cover; background-position:center; background-color:var(--canopy);
  opacity:0; transform:scale(1.04); transition:opacity 1.1s var(--ease);
}
.atlas-photo.is-active{ opacity:1; transition:opacity 1.1s var(--ease), transform 9s linear; transform:scale(1.14); }
.atlas-visual-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(13,20,16,.35) 0%, rgba(13,20,16,0) 18%, rgba(13,20,16,0) 82%, rgba(13,20,16,.25) 100%),
             linear-gradient(0deg, rgba(13,20,16,.3) 0%, rgba(13,20,16,0) 22%);
}
.atlas-visual-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:48px 52px;
  pointer-events:none;
}
.atlas-caption-tag{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); margin-bottom:12px; text-shadow:0 2px 10px rgba(13,20,16,.5);
}
.atlas-caption-title{
  font-family:var(--font-display); font-weight:400; color:#fff; margin:0;
  font-size:clamp(2rem,3.6vw,3.4rem); line-height:1.08; max-width:600px;
  text-shadow:0 4px 20px rgba(13,20,16,.55);
}
@media (prefers-reduced-motion: reduce){
  .atlas-photo, .atlas-item-name, .atlas-detail-inner{ transition:none !important; }
  .atlas-photo.is-active{ transform:none; }
}

@media (max-width:900px){
  .atlas-intro{ padding:48px 24px 32px; }
  /* minmax(0,1fr) stops the single column being forced wider than the
     viewport by the horizontal suite-chip strip inside the panel */
  .atlas-grid{ grid-template-columns:minmax(0,1fr); }
  .atlas-visual{ height:52vh; order:1; min-width:0; }
  .atlas-panel{ order:2; padding:40px 24px 44px; min-width:0; }
  .atlas-panel > div{ min-width:0; }
  .atlas-list-window{ height:auto; overflow-x:auto; overflow-y:hidden; -webkit-mask-image:none; mask-image:none; margin:28px -24px; padding:0 24px; }
  .atlas-list-track{ display:flex; gap:4px; transform:none !important; }
  .atlas-item{ flex:0 0 auto; width:144px; height:auto; flex-direction:column; align-items:flex-start; gap:4px; border-bottom:none; border-right:1px solid rgba(248,246,240,.14); padding:10px 16px; }
  .atlas-item-name{ white-space:normal; font-size:.86rem; line-height:1.3; }
  .atlas-item-tag{ display:none; }
  .atlas-view-btn{ flex:1 1 100%; justify-content:center; }
  .atlas-visual-caption{ padding:24px 24px 28px; }
}
@media (max-width:560px){
  .atlas-visual{ height:42vh; }
  .atlas-caption-tag{ font-size:.66rem; margin-bottom:8px; }
  .atlas-caption-title{ font-size:clamp(1.3rem,6vw,1.7rem); line-height:1.15; }
  .atlas-visual-caption{ padding:16px 18px 20px; }
  .atlas-panel{ padding:28px 18px 30px; }
  .atlas-list-window{ margin-left:-18px; margin-right:-18px; padding-left:18px; padding-right:18px; }
  .atlas-item{ width:136px; padding:8px 14px; }
  .atlas-item-name{ font-size:.84rem; }
  .atlas-detail-desc{ font-size:.86rem; margin-bottom:14px; max-width:none; }
  .atlas-pill{ font-size:.66rem; padding:5px 11px; }
  .atlas-detail-amenities{ gap:6px; margin-bottom:18px; }
  .atlas-price{ font-size:.9rem; }
  .atlas-view-btn{ padding:13px 18px; font-size:.78rem; }
}
/* ============================================================
   SUITE DETAIL PAGE TEMPLATE — luxury boutique structure
   ============================================================ */

/* ---- Hero banner (350-450px, per spec) ---- */
.suite-hero{
  position:relative; height:420px; margin-top:0; background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.suite-hero-overlay{ position:absolute; inset:0; background:rgba(10,15,12,.5); }
.suite-hero-content{ position:relative; z-index:2; color:#fff; padding:0 20px; }
.suite-hero-content h1{ color:#fff; font-size:clamp(2rem, 4vw, 3rem); margin-bottom:14px; }
.suite-hero-content p{ color:rgba(255,255,255,.85); font-size:1.05rem; max-width:520px; margin:0 auto; }

/* ---- Gallery ---- */
.suite-gallery-section{ padding-top:70px; }
.suite-gallery-main{
  position:relative; height:560px; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-strong);
}
.suite-gallery-slide{
  position:absolute; inset:0; background:var(--canopy) center/cover no-repeat;
  opacity:0; transition:opacity .6s var(--ease);
}
.suite-gallery-slide.active{ opacity:1; }
.suite-gallery-slide[data-label]::after{
  content:attr(data-label); position:absolute; bottom:24px; left:24px; z-index:2;
  background:rgba(255,255,255,.9); color:var(--canopy); font-size:.82rem; font-weight:600;
  padding:8px 16px; border-radius:100px;
}
.suite-gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px;
  border-radius:50%; border:none; cursor:pointer; background:rgba(255,255,255,.85); color:var(--canopy); font-size:1.1rem;
  transition:background .3s;
}
.suite-gallery-arrow:hover{ background:#fff; }
.suite-gallery-prev{ left:20px; }
.suite-gallery-next{ right:20px; }
.suite-gallery-dots{ display:flex; justify-content:center; gap:8px; margin-top:20px; }
.suite-gallery-dots .dot{ width:8px; height:8px; border-radius:50%; background:var(--cloud); border:none; cursor:pointer; transition:background .3s, transform .3s; }
.suite-gallery-dots .dot.active{ background:var(--leaf); transform:scale(1.25); }

/* ---- Room info + booking ---- */
.suite-info-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:60px; align-items:start; }
.suite-info-main h2{ font-size:clamp(1.8rem, 3vw, 2.4rem); margin:14px 0 26px; }
.suite-info-main p{ font-size:1.02rem; line-height:1.85; margin-bottom:22px; }
.suite-booking-card{
  position:sticky; top:110px; background:#fff; border:1px solid var(--cloud); border-radius:var(--radius-lg);
  padding:34px; box-shadow:var(--shadow-soft);
}
.suite-booking-label{ font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--mist); }
.suite-booking-price{ font-family:var(--font-display); font-size:1.6rem; font-weight:600; color:var(--canopy); margin-bottom:24px; }
.suite-booking-field{ margin-bottom:16px; }
.suite-booking-field label{ display:block; font-size:.78rem; font-weight:600; margin-bottom:6px; color:var(--canopy); }
.suite-booking-field input{
  width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1.5px solid #e2e0d8; font-size:.9rem;
}
.suite-booking-note{ font-size:.78rem; color:var(--mist); margin-top:14px; text-align:center; }

/* ---- Amenities row ---- */
.suite-amenities-section{ background:var(--cloud); }
.suite-amenities-row{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; text-align:center; }
.suite-amenity{ padding:20px 10px; }
.suite-amenity-icon{ width:36px; height:36px; margin:0 auto 14px; color:var(--leaf); }
.suite-amenity h4{ font-size:.9rem; margin-bottom:6px; }
.suite-amenity p{ font-size:.78rem; color:var(--mist); margin:0; }

/* ---- Experience / highlight ---- */
.suite-experience-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center; }
.suite-experience-photo{ aspect-ratio:5/4; border-radius:var(--radius-lg); background-size:cover; background-position:center; box-shadow:var(--shadow-strong); }
.suite-experience-text h2{ font-size:clamp(1.8rem, 3vw, 2.4rem); margin:14px 0 20px; }
.suite-experience-text p{ font-size:1.02rem; margin-bottom:28px; }

/* ---- Features (numbered) ---- */
.suite-features-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:34px; }
.suite-feature-num{ display:block; font-family:var(--font-display); font-size:1.8rem; color:var(--amber); font-weight:600; margin-bottom:14px; }
.suite-feature h4{ font-size:1.1rem; margin-bottom:10px; }
.suite-feature p{ font-size:.9rem; margin:0; }

/* ---- Explore more stays ---- */
.suite-more-section{ background:var(--cloud); }
.suite-more-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.suite-more-card{ display:block; background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-soft); transition:transform .4s var(--ease); }
.suite-more-card:hover{ transform:translateY(-6px); }
.suite-more-photo{ height:190px; background-size:cover; background-position:center; }
.suite-more-body{ padding:24px; }
.suite-more-body h4{ font-size:1.1rem; margin-bottom:8px; }
.suite-more-body p{ font-size:.88rem; margin-bottom:14px; }
.suite-more-cta{ font-weight:600; font-size:.85rem; color:var(--leaf-dark); }

/* ============================================================
   FOOTER LOCATOR — "Within Range" radar sweep
   Injected by initFooterMap() into every .footer-grid
   ============================================================ */
.footer-atlas{ min-width:0; }
.fmap{
  display:block; margin-top:4px; color:inherit; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.fmap svg{
  width:100%; height:auto; display:block; overflow:visible;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.3));
}

/* Field + rings draw in */
.rdr-field{ opacity:0; transition:opacity .9s var(--ease); }
.footer-atlas.is-live .rdr-field{ opacity:1; }

.rdr-rings circle{
  fill:none; stroke:rgba(255,255,255,.12); stroke-width:1; opacity:0;
  transform-box:view-box; transform-origin:160px 118px; transform:scale(.7);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.rdr-rings circle:nth-child(1){ transition-delay:.05s; }
.rdr-rings circle:nth-child(2){ transition-delay:.15s; }
.rdr-rings circle:nth-child(3){ transition-delay:.25s; }
.footer-atlas.is-live .rdr-rings circle{ opacity:1; transform:scale(1); }

.rdr-ring-labels text{
  fill:rgba(255,255,255,.3); font:6.5px var(--font-body); letter-spacing:.1em;
  opacity:0; transition:opacity .6s ease .45s;
}
.footer-atlas.is-live .rdr-ring-labels text{ opacity:1; }

.rdr-cross line{ stroke:rgba(255,255,255,.07); stroke-width:1; }

/* The beam sweeps forever */
.rdr-sweep{
  transform-box:view-box; transform-origin:160px 118px;
  opacity:0; transition:opacity .6s ease .5s;
}
.footer-atlas.is-live .rdr-sweep{ opacity:1; animation:rdrSweep 6s linear infinite; }
@keyframes rdrSweep{ to{ transform:rotate(360deg); } }
.fmap:hover .rdr-sweep{ animation-duration:2.4s; }
.rdr-beam-wide{ fill:var(--leaf); opacity:.08; }
.rdr-beam-hot{ fill:var(--leaf); opacity:.20; }
.rdr-beam-edge{ stroke:var(--leaf); stroke-width:1.4; opacity:.7; }

/* Landmarks ping as the beam passes */
.rdr-dot{ fill:var(--leaf); fill-opacity:.32; }
.rdr-ping{ fill:none; stroke:var(--leaf); stroke-width:1.2; opacity:0; transform-box:view-box; }
.rdr-label{ fill:rgba(255,255,255,.82); font:7.5px var(--font-body); letter-spacing:.05em; opacity:0; }
.footer-atlas.is-live .rdr-dot{ animation:rdrDot 6s linear infinite; animation-delay:var(--d); }
.footer-atlas.is-live .rdr-ping{ animation:rdrPing 6s linear infinite; animation-delay:var(--d); }
.footer-atlas.is-live .rdr-label{ animation:rdrLabel 6s linear infinite; animation-delay:var(--d); }
.fmap:hover .rdr-dot, .fmap:hover .rdr-ping, .fmap:hover .rdr-label{ animation-duration:2.4s; }
@keyframes rdrDot{ 0%,4%{ fill-opacity:.3; } 5%{ fill-opacity:1; } 22%{ fill-opacity:.3; } 100%{ fill-opacity:.3; } }
@keyframes rdrPing{ 0%{ opacity:0; transform:scale(.3); } 4%{ opacity:.85; } 20%{ opacity:0; transform:scale(2.6); } 100%{ opacity:0; transform:scale(.3); } }
@keyframes rdrLabel{ 0%,3%{ opacity:0; } 7%{ opacity:1; } 17%{ opacity:1; } 26%{ opacity:0; } 100%{ opacity:0; } }

/* Y3 Suites marker at the centre */
.rdr-home-halo{
  fill:none; stroke:var(--leaf); stroke-width:1.5; opacity:0;
  transform-box:view-box; transform-origin:160px 118px;
}
.footer-atlas.is-live .rdr-home-halo{ animation:rdrHalo 3s ease-out infinite 1s; }
@keyframes rdrHalo{ 0%{ transform:scale(.4); opacity:.7; } 100%{ transform:scale(3); opacity:0; } }
.rdr-home-hex{
  fill:#fff; stroke:var(--leaf); stroke-width:1.5; opacity:0;
  transform-box:view-box; transform-origin:160px 118px;
  transition:opacity .5s ease .3s;
}
.footer-atlas.is-live .rdr-home-hex{ opacity:1; animation:rdrHome 3s ease-in-out infinite 1s; }
@keyframes rdrHome{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }
.rdr-home-label{
  fill:#fff; font:700 7px var(--font-body); letter-spacing:.14em;
  opacity:0; transition:opacity .5s ease .9s;
}
.footer-atlas.is-live .rdr-home-label{ opacity:1; }

/* Readout */
.fmap-meta{ display:flex; flex-direction:column; gap:3px; margin-top:14px; }
.fmap-coords{ font-family:var(--font-body); font-size:.82rem; color:#fff; letter-spacing:.02em; }
.fmap-place{ font-size:.78rem; color:rgba(255,255,255,.55); }
.fmap-cta{
  font-size:.8rem; color:var(--leaf); margin-top:5px;
  transition:letter-spacing .3s var(--ease);
}
.fmap:hover .fmap-cta{ letter-spacing:.05em; }

@media (prefers-reduced-motion: reduce){
  .rdr-sweep{ display:none; }
  .rdr-dot{ fill-opacity:1 !important; }
  .rdr-label{ opacity:1 !important; }
  .rdr-ping{ display:none; }
}
@media (max-width:1024px){
  .footer-atlas{ grid-column:1 / -1; }
  .fmap{ max-width:380px; }
}

/* ---- Testimonials ---- */
.suite-testimonial-section{ background:var(--canopy); padding:90px 0; }
.suite-testimonial-track{ position:relative; max-width:640px; margin:0 auto; min-height:180px; }
.suite-testimonial{
  position:absolute; inset:0; opacity:0; transition:opacity .5s var(--ease); text-align:center;
}
.suite-testimonial.active{ opacity:1; position:relative; }
.suite-testimonial-stars{ color:var(--amber); font-size:1.1rem; margin-bottom:16px; }
.suite-testimonial p{ font-family:var(--font-display); font-style:italic; font-size:1.2rem; color:#fff; margin-bottom:18px; }
.suite-testimonial span{ color:rgba(255,255,255,.6); font-size:.88rem; }
.suite-testimonial-dots{ display:flex; justify-content:center; gap:8px; margin-top:26px; }
.suite-testimonial-dots .dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); border:none; cursor:pointer; transition:background .3s, transform .3s; }
.suite-testimonial-dots .dot.active{ background:#fff; transform:scale(1.25); }

/* ---- Final CTA ---- */
.suite-final-cta{ position:relative; height:60vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.suite-final-cta-bg{ position:absolute; inset:0; background-size:cover; background-position:center; animation:heroZoom 22s ease-in-out infinite alternate; }
.suite-final-cta-overlay{ position:absolute; inset:0; background:rgba(10,15,12,.6); }
.suite-final-cta-content{ position:relative; z-index:2; color:#fff; }
.suite-final-cta-content h2{ color:#fff; font-size:clamp(2rem, 4vw, 3rem); margin-bottom:14px; }
.suite-final-cta-content p{ color:rgba(255,255,255,.8); margin-bottom:28px; }

@media (max-width:900px){
  .suite-info-grid, .suite-experience-grid{ grid-template-columns:1fr; }
  .suite-booking-card{ position:static; }
  .suite-amenities-row{ grid-template-columns:repeat(2, 1fr); }
  .suite-features-grid{ grid-template-columns:1fr 1fr; }
  .suite-more-grid{ grid-template-columns:1fr; }
  .suite-gallery-main{ height:340px; }
}
@media (max-width:560px){
  .suite-hero{ height:340px; }
  .suite-features-grid{ grid-template-columns:1fr; }
}
/* Collection Page Unique Styles */
.col-hero-number {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3em;
    color: var(--amber);
    margin-bottom: 20px;
    opacity: 0.8;
}

.suite-hero h1 {
    line-height: 1.1;
    margin-bottom: 15px;
}

.suite-info-main h2 {
    color: var(--canopy);
    line-height: 1.2;
}
/* ============================================================
   SIGNATURE TABS — Custom Styles
   ============================================================ */
.sig-tabs-nav-section {
    padding: 60px 0 20px;
    text-align: center;
    background: var(--ivory);
}

.sig-tab-btns {
    display: inline-flex;
    background: var(--cloud);
    padding: 8px;
    border-radius: 100px;
    gap: 8px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.sig-tab-btn {
    border: none;
    background: none;
    padding: 14px 32px;
    border-radius: 100px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mist);
    cursor: pointer;
    transition: all 0.4s var(--ease);
}

.sig-tab-btn.active {
    background: var(--leaf);
    color: #fff;
    box-shadow: 0 8px 20px rgba(62, 182, 81, 0.3);
}

/* Tab Switching Logic */
.sig-tab-pane {
    display: none;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

.sig-tab-pane.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Fix for Booking Card styling on this page */
.sig-tab-pane .suite-booking-card {
    position: sticky;
    top: 110px;
}