/* ===========================================================
   Greenleaf Hotel & Resort — Home page
   =========================================================== */

   :root{
    --green-950:#0e1f16;
    --green-900:#14301f;
    --green-800:#1c4029;
    --green-700:#26522f;
  
    --cream:#f7f3ea;
    --cream-dim:#efe8d8;
    --ink:#1c1a15;
    --ink-soft:#54503f;
    --paper:#fffdf8;
  
    --gold-100:#f6e6b8;
    --gold-300:#e9c877;
    --gold-500:#c9a24a;
    --gold-600:#a9812f;
  
    --font-display:'Cormorant Garamond', serif;
    --font-body:'Jost', sans-serif;
    --ease:cubic-bezier(.16,.8,.3,1);
  }
  
  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; font-family:var(--font-body); color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; }
  img{ max-width:100%; display:block; }
  a{ color:inherit; text-decoration:none; }
  h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; margin:0; }
  button{ font-family:inherit; }
  
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  }
  
  /* ---------- shared ---------- */
  .eyebrow{ letter-spacing:.22em; text-transform:uppercase; font-size:.72rem; font-weight:500; color:var(--gold-300); margin:0 0 14px; }
  .eyebrow-dark{ color:var(--gold-600); }
  
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 30px; border-radius:2px; font-size:.82rem; font-weight:500; letter-spacing:.05em; text-transform:uppercase;
    border:1px solid transparent; cursor:pointer; text-decoration:none;
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .btn-gold{ background:linear-gradient(180deg, var(--gold-300), var(--gold-500)); color:var(--green-950); }
  .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(201,162,74,.55); }
  
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--stagger,0) * 100ms); }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  .reveal-fade{ opacity:0; transform:translateY(16px); transition:opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s); }
  .reveal-fade.in-view{ opacity:1; transform:translateY(0); }
  
  .section-head{ max-width:640px; margin:0 auto; text-align:center; }
  .section-head h2{ font-size:clamp(2rem, 4vw, 2.7rem); color:var(--green-900); }
  
  /* ===========================================================
     HEADER
     =========================================================== */

     .brand{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .brand-logo{
      width:70px;
      height:70px;
      flex:none;
      object-fit:contain;
      transition:transform .3s ease;
    }
    .brand:hover .brand-logo{
      transform:rotate(8deg);
    }

  .site-header{
    position:fixed; inset:0 0 auto 0; z-index:100;
    height:96px; padding:0 5vw; display:flex; align-items:center;
    background:transparent; border-bottom:1px solid transparent;
    transition:background .4s ease, height .4s ease, box-shadow .4s ease, border-color .4s ease;
  }
  .site-header.scrolled{
    height:80px;
    background:var(--green-950); border-bottom-color:rgba(247,243,234,.08);
    box-shadow:0 10px 30px -18px rgba(0,0,0,.6);
  }
  .site-header.scrolled .main-nav a{ font-size:1rem; font-weight:700; }
  .header-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
  
  .brand{ display:flex; align-items:center; gap:12px; color:var(--cream); }
  .brand-mark{ width:34px; height:34px; }
  .brand-mark svg{ width:100%; height:100%; fill:none; stroke:var(--gold-300); stroke-width:1.4; }
  .brand-name{ display:flex; flex-direction:column; line-height:1.25; font-size:1.02rem; letter-spacing:.08em; font-weight:500; }
  .brand-name em{ font-style:normal; font-size:.62rem; letter-spacing:.16em; color:rgba(247,243,234,.55); font-weight:400; }
  
  .main-nav{ display:flex; gap:32px; }
  .main-nav a{ color:rgba(247,243,234,.85); font-size:medium; font-weight: bold; letter-spacing:.03em; position:relative; padding:4px 0; }
  .main-nav a::after{ content:''; position:absolute; left:0; bottom:-3px; width:0; height:1px; background:var(--gold-500); transition:width .3s var(--ease); }
  .main-nav a:hover::after, .main-nav a.active::after{ width:100%; }
  .main-nav a.active{ color:var(--gold-300); }
  .nav-cta{ padding:11px 24px; font-size:.78rem; }
  .nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; position:relative; z-index:101; }
  .nav-toggle span{ width:22px; height:2px; background:var(--cream); display:block; transition:transform .35s var(--ease), opacity .3s ease; }
  .header-inner:has(.main-nav.open) .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .header-inner:has(.main-nav.open) .nav-toggle span:nth-child(2){ opacity:0; }
  .header-inner:has(.main-nav.open) .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  
  /* ===========================================================
     SECTION 1 — HERO SLIDER
     =========================================================== */
  .hero{ position:relative; height:100vh; min-height:640px; overflow:hidden; background:var(--green-950); }
  .hero-slides{ position:absolute; inset:0; }
  .hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; }
  .hero-slide.is-active{ opacity:1; }
  .hero-slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); transition:transform 8s linear; }
  .hero-slide.is-active img{ transform:scale(1); }
  .hero-overlay{
    position:absolute; inset:0; z-index:1;
    background:linear-gradient(90deg, rgba(14,31,22,.88) 0%, rgba(14,31,22,.6) 38%, rgba(14,31,22,.15) 70%, rgba(14,31,22,.02) 100%);
  }
  .hero-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; max-width:640px; padding:0 5vw; color:var(--cream); }
  .hero-title .line{ overflow:hidden; display:block; }
  .hero-title .line span{
    display:block; font-family:var(--font-display); font-size:clamp(2.4rem, 5.6vw, 4.2rem); line-height:1.08; font-weight:600;
    color:var(--cream); transform:translateY(112%); transition:transform 1s var(--ease);
  }
  .hero-title .line:nth-child(1) span{ transition-delay:.15s; }
  .hero-title .line:nth-child(2) span{ transition-delay:.32s; }
  .hero-title.in-view .line span{ transform:translateY(0); }
  .hero-sub{ font-size:1rem; line-height:1.75; color:rgba(247,243,234,.82); max-width:440px; margin:22px 0 34px; font-weight:300; }
  .hero-actions{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
  
  .watch-video{ display:flex; align-items:center; gap:12px; background:none; border:0; color:var(--cream); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
  .play-ring{
    width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(247,243,234,.6);
    display:flex; align-items:center; justify-content:center; transition:border-color .3s ease, background .3s ease;
  }
  .play-ring svg{ width:13px; height:13px; fill:var(--cream); }
  .watch-video:hover .play-ring{ border-color:var(--gold-300); background:rgba(233,200,119,.12); }
  
  .hero-dots{ position:absolute; z-index:2; left:50%; bottom:34px; transform:translateX(-50%); display:flex; gap:10px; }
  .dot{ width:8px; height:8px; border-radius:50%; border:0; background:rgba(247,243,234,.4); cursor:pointer; transition:background .3s ease, transform .3s ease; padding:0; }
  .dot.is-active{ background:var(--gold-300); transform:scale(1.3); }
  
  /* ===========================================================
     SECTION 2 — COMFORT & CONVENIENCE
     =========================================================== */
     .comfort-section{ background:var(--cream); padding:100px 5vw; text-align:center; }

     .comfort-grid{
       display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
       max-width:960px; margin:52px auto 0;
     }
     
     .comfort-item{
       padding:40px 26px 34px; background:var(--green-900); border-radius:10px;
       box-shadow:0 20px 40px -26px rgba(20,48,31,.4);
       transition:transform .4s cubic-bezier(.16,.8,.3,1), box-shadow .4s cubic-bezier(.16,.8,.3,1), background .4s ease;
     }
     .comfort-item:hover{
       transform:translateY(-10px);
       background:var(--green-800);
       box-shadow:0 30px 50px -22px rgba(20,48,31,.5);
     }
     
     .comfort-icon{
       width:70px; height:70px; margin:0 auto 22px; border-radius:50%;
       display:flex; align-items:center; justify-content:center;
       background:rgba(233,200,119,.12);
       transition:transform .4s cubic-bezier(.16,.8,.3,1), background .4s ease;
     }
     .comfort-item:hover .comfort-icon{
       transform:translateY(-4px) scale(1.06);
       background:var(--gold-500);
     }
     .comfort-icon svg{
       width:28px; height:28px; fill:none; stroke:var(--gold-300);
       stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
       transition:stroke .4s ease;
     }
     .comfort-item:hover .comfort-icon svg{ stroke:var(--green-950); }
     
     .comfort-item h4{
       font-size:1rem; letter-spacing:.08em; text-transform:uppercase;
       color:var(--cream); margin-bottom:12px; font-family:var(--font-display); font-weight:600;
     }
     .comfort-item p{
       font-size:.9rem; line-height:1.6; color:rgba(247,243,234,.62); margin:0; font-weight:300;
     }
     
     @media (max-width: 720px){
       .comfort-section{ padding:70px 6vw; }
       .comfort-grid{ grid-template-columns:1fr; gap:20px; }
     }
  
  /* ===========================================================
     SECTION 3 — FIND YOUR PERFECT STAY
     =========================================================== */
     /* ===========================================================
   Room Tariff & Plans section
   Assumes shared :root palette (--green-*, --cream*, --gold-*,
   --ink*, --paper, --font-display, --font-body, --ease) and
   .reveal / .eyebrow / .section-head / .head-divider are already
   defined globally, same as the rest of the site.
   =========================================================== */

.tariff-section{ background:var(--cream); padding:100px 5vw 110px; }

.tariff-note{
  margin-top:16px; font-size:.85rem; line-height:1.8; color:var(--ink-soft);
  max-width:680px; margin-left:auto; margin-right:auto; font-weight:300;
}
.tariff-note strong{ color:var(--green-800); font-weight:600; }

.tariff-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  max-width:1240px; margin:52px auto 0;
}

.tariff-card{
  background:var(--paper); border:1px solid #e6ddc4; border-radius:8px;
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s ease;
}
.tariff-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 55px -32px rgba(20,48,31,.32);
  border-color:var(--gold-500);
}

.tariff-media{ aspect-ratio:4/3; overflow:hidden; }
.tariff-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.tariff-card:hover .tariff-media img{ transform:scale(1.08); }

.tariff-card-body{ padding:26px 26px 26px; }

.tariff-card-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.tariff-index{
  font-family:var(--font-display); font-size:1rem; font-weight:600;
  color:var(--gold-600); letter-spacing:.04em;
}
.tariff-card-head h3{ font-size:1.35rem; color:var(--green-900); }

.tariff-legend{
  display:flex; flex-wrap:wrap; gap:16px 20px;
  padding-bottom:18px; margin-bottom:18px; border-bottom:1px dashed #ddd2b0;
}
.tariff-legend span{
  display:flex; align-items:center; gap:7px;
  font-size:.76rem; color:var(--ink-soft); letter-spacing:.02em;
}
.tariff-legend svg{
  width:16px; height:16px; fill:none; stroke:var(--gold-600);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}

/* native <details> disclosure, no JS required */
.tariff-details{ border-top:0; }
.tariff-summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 18px; border-radius:4px;
  background:var(--green-950); color:var(--gold-300);
  font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  transition:background .3s ease;
}
.tariff-summary::-webkit-details-marker{ display:none; }
.tariff-summary:hover{ background:var(--green-800); }
.tariff-summary svg{
  width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s var(--ease);
}
.tariff-details[open] .tariff-summary svg{ transform:rotate(180deg); }
.tariff-details[open] .tariff-summary{ border-radius:4px 4px 0 0; }

.tariff-table{
  width:100%; border-collapse:collapse;
  background:var(--cream-dim); border:1px solid #e6ddc4; border-top:0;
  border-radius:0 0 4px 4px; overflow:hidden;
  animation:tariffOpen .35s var(--ease);
}
@keyframes tariffOpen{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }

.tariff-table th{
  background:var(--green-900); color:var(--cream);
  font-family:var(--font-body); font-size:.7rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:10px 12px; text-align:left;
}
.tariff-table th:first-child{ border-radius:0; }
.tariff-table td{
  padding:10px 12px; font-size:.82rem; color:var(--ink);
  border-top:1px solid #e6ddc4;
}
.tariff-table td:first-child{
  font-weight:600; color:var(--green-800); letter-spacing:.03em;
}
.tariff-table tbody tr:nth-child(even){ background:rgba(233,200,119,.08); }
.tariff-table tbody tr:hover{ background:rgba(201,162,74,.16); }

.tariff-gst{
  margin:8px 2px 0; font-size:.7rem; color:var(--ink-soft); font-style:italic;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 980px){
  .tariff-grid{ grid-template-columns:1fr; max-width:560px; }
}
@media (max-width: 720px){
  .tariff-section{ padding:80px 6vw 90px; }
  .tariff-table{ font-size:.78rem; }
  .tariff-table th, .tariff-table td{ padding:8px 8px; }
}
  
  /* ===========================================================
     SECTION 4 — GUEST EXPERIENCE (testimonials + stats)
     =========================================================== */
  .experience-section{
    position:relative; overflow:hidden;
    max-height:70vh; min-height:560px;
    display:flex; align-items:center;
    background:var(--cream-dim);
    padding:56px 5vw;
  }
  .experience-inner{ position:relative; z-index:2; max-width:900px; margin:0 auto; width:100%; }
  .light-heading{ color:var(--green-900); }
  
  /* testimonial slider */
  .testimonial-slider{ position:relative; margin:34px auto 0; max-width:720px; text-align:center; }
  .quote-mark{ display:inline-block; width:38px; margin-bottom:14px; opacity:.7; }
  .quote-mark svg{ width:100%; fill:var(--gold-500); }
  
  .testimonial-track{ position:relative; min-height:190px; }
  .testimonial-slide{
    position:absolute; inset:0; opacity:0; transform:translateY(14px);
    transition:opacity .6s var(--ease), transform .6s var(--ease); pointer-events:none;
  }
  .testimonial-slide.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; position:relative; }
  .t-stars{ color:var(--gold-600); font-size:1rem; letter-spacing:3px; margin-bottom:14px; }
  .t-quote{ font-family:var(--font-display); font-style:italic; font-size:1.25rem; line-height:1.55; color:var(--ink); margin:0 0 20px; font-weight:500; }
  .t-person{ display:inline-flex; align-items:center; gap:14px; }
  .t-person img{ width:46px; height:46px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-500); }
  .t-person div{ text-align:left; }
  .t-person strong{ display:block; color:var(--green-900); font-size:.9rem; font-weight:600; }
  .t-person span{ display:block; font-size:.76rem; color:var(--ink-soft); margin-top:2px; }
  
  .testimonial-controls{ display:flex; align-items:center; justify-content:center; gap:22px; margin-top:26px; }
  .t-arrow{
    width:38px; height:38px; border-radius:50%; border:1px solid #ddd2b0; background:var(--paper);
    color:var(--green-900); cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .3s ease, border-color .3s ease, color .3s ease;
  }
  .t-arrow svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .t-arrow:hover{ background:var(--gold-500); border-color:var(--gold-500); color:var(--green-950); }
  .testimonial-dots{ display:flex; gap:9px; }
  .t-dot{ width:7px; height:7px; border-radius:50%; border:0; background:#ddd2b0; cursor:pointer; padding:0; transition:background .3s ease, transform .3s ease; }
  .t-dot.is-active{ background:var(--gold-600); transform:scale(1.3); }
  
  /* stats strip */
  .stats-strip{
    margin-top:36px; padding-top:30px; border-top:1px dashed #ddd2b0;
    display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; text-align:center;
  }
  .stat-num{ font-family:var(--font-display); font-size:clamp(1.7rem, 3vw, 2.3rem); font-weight:600; color:var(--green-800); }
  .stat-plus{ font-family:var(--font-display); font-size:1.3rem; color:var(--green-800); }
  .stat p{ margin:6px 0 0; font-size:1rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
  
  /* ===========================================================
     FOOTER
     =========================================================== */
  .site-footer{
    position:relative; overflow:hidden;
    background:var(--green-950); color:rgba(247,243,234,.75);
    border-top:1px solid rgba(233,200,119,.18);
  }
  .footer-leaf{ position:absolute; right:-30px; bottom:-30px; width:220px; opacity:.05; pointer-events:none; }
  .footer-leaf svg{ width:100%; fill:none; stroke:var(--gold-300); stroke-width:2; }
  
  .footer-scroll{ position:relative; z-index:1; }
  
  .footer-top{
    max-width:1240px; margin:0 auto; padding:64px 5vw 40px;
    display:grid; grid-template-columns:1.3fr 1fr 1.2fr 1.3fr; gap:36px;
  }
  .footer-col h4{ color:var(--gold-300); font-size:1rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:20px; }
  .footer-col a{ display:block; font-size:1rem; font-weight:700; color:rgba(247,243,234,.7); margin-bottom:12px; transition:color .3s ease, transform .3s ease; }
  .footer-col a:hover{ color:var(--gold-300); transform:translateX(3px); }
  
  .footer-brand p{ font-size:1rem; font-weight:700; line-height:1.6; color:rgba(247,243,234,.6); margin:14px 0 20px; max-width:270px; }
  .footer-brand .brand-name em{ color:rgba(247,243,234,.55); }
  .footer-social{ display:flex; gap:12px; }
  .footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(247,243,234,.25); display:flex; align-items:center; justify-content:center; margin:0; }
  .footer-social a:hover{ background:var(--gold-500); border-color:var(--gold-500); transform:translateY(-3px); }
  .footer-social svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .footer-social a:hover svg{ stroke:var(--green-950); }
  
  .footer-contact .contact-row{
    display:flex; align-items:flex-start; gap:10px; font-size:1rem; font-weight:700;
    color:rgba(247,243,234,.7); margin-bottom:16px; line-height:1.4;
  }
  .footer-contact .contact-row svg{ width:18px; height:18px; flex:none; margin-top:1px; fill:none; stroke:var(--gold-300); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .footer-contact .contact-row:hover{ color:var(--gold-300); transform:none; }
  
  .footer-newsletter p{ font-size:1rem; font-weight:700; color:rgba(247,243,234,.6); margin:0 0 16px; }
  .newsletter-form{ display:flex; border:1px solid rgba(247,243,234,.25); border-radius:4px; overflow:hidden; }
  .newsletter-form input{
    flex:1; background:transparent; border:0; outline:none; padding:13px 14px;
    color:var(--cream); font-family:var(--font-body); font-size:1rem; font-weight:700;
  }
  .newsletter-form input::placeholder{ color:rgba(247,243,234,.45); }
  .newsletter-form button{
    width:46px; border:0; background:var(--gold-500); color:var(--green-950); cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .3s ease;
  }
  .newsletter-form button:hover{ background:var(--gold-300); }
  .newsletter-form button svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .newsletter-note{ font-size:1rem; font-weight:700; color:var(--gold-300); margin:10px 0 0; min-height:16px; }
  
  .footer-bottom{
    border-top:1px solid rgba(247,243,234,.1);
    padding:20px 5vw; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size:1rem; font-weight:700; color:rgba(247,243,234,.5);
  }
  .footer-legal{ display:flex; gap:10px; align-items:center; }
  .footer-legal a{ font-weight:700; }
  .footer-legal a:hover{ color:var(--gold-300); }
  
  /* ===========================================================
     BACK TO TOP
     =========================================================== */
  .back-to-top{
    position:fixed; right:26px; bottom:26px; z-index:90;
    width:46px; height:46px; border-radius:50%;
    background:var(--green-900); color:var(--gold-300); border:1px solid var(--gold-600);
    font-size:1.1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transform:translateY(10px);
    transition:opacity .35s ease, transform .35s ease, visibility .35s;
    box-shadow:0 12px 24px -12px rgba(0,0,0,.5);
  }
  .back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
  .back-to-top:hover{ background:var(--gold-500); color:var(--green-950); }
  
  /* ===========================================================
     RESPONSIVE
     =========================================================== */
  @media (max-width: 1080px){
    .comfort-grid{ grid-template-columns:repeat(3, 1fr); gap:36px 20px; }
    .footer-top{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 980px){
    .room-grid{ grid-template-columns:1fr 1fr; }
    .stats-strip{ grid-template-columns:1fr 1fr; gap:36px 20px; }
  }
  @media (max-width: 980px){
    .nav-cta{ display:none; }
    .nav-toggle{ display:flex; }
  }
  @media (max-width: 720px){
    .comfort-grid{ grid-template-columns:1fr 1fr; }
    .room-grid{ grid-template-columns:1fr; }
    .rooms-head{ flex-direction:column; align-items:flex-start; }
    .hero-overlay{ background:linear-gradient(180deg, rgba(14,31,22,.55) 10%, rgba(14,31,22,.95) 92%); }
    .footer-top{ grid-template-columns:1fr; padding:70px 6vw 40px; }
    .comfort-section, .rooms-section{ padding:80px 6vw 90px; }
    .experience-section{ max-height:none; padding:70px 6vw; }
    .t-quote{ font-size:1.05rem; }
    .stats-strip{ grid-template-columns:1fr 1fr; gap:26px 16px; }
  }
  
  /* ===========================================================
     MOBILE / TABLET SIDEBAR NAV
     =========================================================== */
  @media (max-width: 980px){
    .main-nav{
      display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
      gap:0; position:fixed; top:0; right:0; bottom:0; z-index:99;
      width:78%; max-width:340px;
      padding:110px 30px 40px;
      background:var(--green-950);
      overflow-y:auto;
      transform:translateX(100%);
      visibility:hidden;
      transition:transform .5s cubic-bezier(.16,.8,.3,1), visibility .5s, box-shadow .5s ease;
      box-shadow:
        -20px 0 50px -18px rgba(0,0,0,0),
        -100vw 0 0 100vw rgba(14,31,22,0);
    }
    .main-nav.open{
      transform:translateX(0);
      visibility:visible;
      box-shadow:
        -20px 0 50px -18px rgba(0,0,0,.5),
        -100vw 0 0 100vw rgba(14,31,22,.6);
    }
  
    .main-nav a{
      display:flex; align-items:center; gap:16px;
      width:100%; padding:16px 4px;
      border-bottom:1px solid rgba(247,243,234,.08);
      font-family:var(--font-display); font-size:1.15rem; font-weight:500;
      color:rgba(247,243,234,.85);
      opacity:0; transform:translateX(24px);
      transition:opacity .4s ease, transform .4s ease, color .3s ease;
    }
    .main-nav a::after{ display:none; }
    .main-nav.open a{ opacity:1; transform:translateX(0); }
    .main-nav.open a:nth-child(1){ transition-delay:.1s; }
    .main-nav.open a:nth-child(2){ transition-delay:.16s; }
    .main-nav.open a:nth-child(3){ transition-delay:.22s; }
    .main-nav.open a:nth-child(4){ transition-delay:.28s; }
    .main-nav.open a:nth-child(5){ transition-delay:.34s; }
    .main-nav a.active{ color:var(--gold-300); }
  
    /* icon before each link, drawn with CSS mask so it inherits color */
    .main-nav a::before{
      content:''; width:20px; height:20px; flex:none; border-radius:2px;
      background-color:var(--gold-300);
      -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
      -webkit-mask-position:center; mask-position:center;
      -webkit-mask-size:contain; mask-size:contain;
    }
    .main-nav a:nth-child(1)::before{
      -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l9 8h-3v9h-5v-6h-2v6H6v-9H3z'/%3E%3C/svg%3E");
      mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l9 8h-3v9h-5v-6h-2v6H6v-9H3z'/%3E%3C/svg%3E");
    }
    .main-nav a:nth-child(2)::before{
      -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E");
      mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E");
    }
    .main-nav a:nth-child(3)::before{
      -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18v-6a2 2 0 012-2h14a2 2 0 012 2v6h-2v-4H5v4zm0 2h18v2H3z'/%3E%3C/svg%3E");
      mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18v-6a2 2 0 012-2h14a2 2 0 012 2v6h-2v-4H5v4zm0 2h18v2H3z'/%3E%3C/svg%3E");
    }
    .main-nav a:nth-child(4)::before{
      -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4zm2 2v9.6L9 12l3 4 3-3 3 4V6z'/%3E%3C/svg%3E");
      mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4zm2 2v9.6L9 12l3 4 3-3 3 4V6z'/%3E%3C/svg%3E");
    }
    .main-nav a:nth-child(5)::before{
      -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm0 2v.4L12 13l8-6.6V6zm16 2.9l-7.4 6.1a1 1 0 01-1.2 0L4 8.9V18h16z'/%3E%3C/svg%3E");
      mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm0 2v.4L12 13l8-6.6V6zm16 2.9l-7.4 6.1a1 1 0 01-1.2 0L4 8.9V18h16z'/%3E%3C/svg%3E");
    }
  }
  @media (max-width: 400px){
    .main-nav{ width:86%; padding:100px 24px 32px; }
  }
  /* ===========================================================
   ADD-ON: Book Now inside the mobile/tablet sidebar nav
   Paste this after your existing
   "MOBILE / TABLET SIDEBAR NAV" @media block in style.css.
   No HTML changes needed — works with your current markup
   where .nav-cta sits as a sibling of .main-nav.
   =========================================================== */

@media (max-width: 980px){

  /* stagger the icon links a touch further so Book Now can follow them in */
  .main-nav.open a:nth-child(1){ transition-delay:.1s; }
  .main-nav.open a:nth-child(2){ transition-delay:.16s; }
  .main-nav.open a:nth-child(3){ transition-delay:.22s; }
  .main-nav.open a:nth-child(4){ transition-delay:.28s; }
  .main-nav.open a:nth-child(5){ transition-delay:.34s; }
  .main-nav.open a:nth-child(6){ transition-delay:.4s; }

  /* Book Now — becomes a floating gold button, hidden until the sidebar opens */
  .nav-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    position:fixed;
    z-index:100;
    right:30px;
    bottom:40px;
    width:calc(78% - 60px);
    max-width:280px;
    box-sizing:border-box;
    padding:15px 4px;
    font-size:.85rem;
    transform:translateX(160%);
    visibility:hidden;
    transition:transform .5s cubic-bezier(.16,.8,.3,1), visibility .5s;
    box-shadow:0 20px 40px -18px rgba(0,0,0,.5);
  }

  /* slides in together with the sidebar, right after the last link */
  .header-inner:has(.main-nav.open) .nav-cta{
    transform:translateX(0);
    visibility:visible;
    transition-delay:.46s;
  }

  /* calendar-check icon, drawn with CSS mask so it inherits the button's text color */
  .nav-cta::before{
    content:'';
    width:18px;
    height:18px;
    flex:none;
    background-color:var(--green-950);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M3 8a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3Cpath d='M8.5 15l2 2 4-4'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M3 8a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2z'/%3E%3Cpath d='M8.5 15l2 2 4-4'/%3E%3C/svg%3E");
  }
}

@media (max-width: 400px){
  .nav-cta{ width:calc(86% - 48px); right:24px; bottom:32px; }
}