/* ==========================================================
   Smilensee — Main Stylesheet
   ========================================================== */

:root{
  --bg:#06182d;--bg2:#092441;--gold:#ffc13b;--text:#f7fbff;--muted:#a9bdce;
  --line:rgba(255,255,255,.13);--glass:rgba(8,28,49,.66);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
.container{width:min(1180px,calc(100% - 46px));margin:auto}
.noise{position:fixed;inset:0;pointer-events:none;z-index:2000;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header{position:fixed;z-index:100;left:0;right:0;top:0;height:78px;display:flex;align-items:center;background:linear-gradient(180deg,rgba(2,13,27,.72),transparent);transition:.3s}
header.scrolled{height:68px;background:rgba(3,17,32,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;gap:30px}
.logo{font-size:28px;font-weight:800;letter-spacing:-1.8px}
.logo span{color:var(--gold)}
.logo i{font-size:13px;font-style:normal;margin-left:4px}
nav{margin-left:auto;display:flex;gap:27px;font-size:13px}
nav a{opacity:.92;transition:.2s}
nav a:hover{color:var(--gold)}
.btn{border:0;border-radius:999px;background:var(--gold);color:#081a2b;font-weight:800;padding:13px 22px;cursor:pointer;transition:.25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 15px 35px rgba(255,193,59,.2)}
.btn.dark{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--line)}
.menu{display:none;background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--line);width:42px;height:42px;border-radius:50%}

.section{position:relative;overflow:hidden;padding:105px 0}
.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:var(--gold);font-weight:800;display:flex;gap:9px;align-items:center}
.eyebrow:before{content:"";width:26px;height:1px;background:var(--gold)}
h1,h2,h3,p{margin-top:0}
h2{font-size:clamp(42px,6vw,72px);line-height:.94;letter-spacing:-.055em;margin:14px 0 18px}
.script{font-family:"Playfair Display",serif;font-style:italic;color:var(--gold)}
.lead{max-width:520px;color:var(--muted);line-height:1.7;font-size:15px}

.rail{position:fixed;z-index:80;left:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
.rail span{font-size:9px;color:#fff;opacity:.55;writing-mode:vertical-rl}
.rail i{width:1px;height:62px;background:rgba(255,255,255,.2)}
.rail b{width:7px;height:7px;border-radius:50%;background:#8798a7;transition:.25s}
.rail b.active{background:var(--gold);transform:scale(1.7)}

.hero{
  height:100vh;min-height:100vh;padding:0;background:#031323;
  position:relative;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(90deg,rgba(2,13,26,.82) 0%,rgba(2,13,26,.38) 42%,rgba(2,13,26,.08) 72%,rgba(2,13,26,.18) 100%),
    linear-gradient(0deg,rgba(2,13,26,.28),transparent 48%),
    url("hero-exact.png");
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  transform:scale(1.01);transform-origin:50% 52%;will-change:transform;
}
.hero-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,rgba(84,216,232,.10),transparent 30%);pointer-events:none}
.hero-content{
  position:sticky;top:0;z-index:3;height:100vh;min-height:100vh;
  display:flex;align-items:center;padding-top:0;
}
.hero-copy{width:55%;margin-top:-18vh}
.hero h1{font-size:clamp(60px,8.2vw,112px);line-height:.82;letter-spacing:-.075em;margin:17px 0 25px;text-shadow:0 5px 28px rgba(0,0,0,.28)}
.hero h1 .script{font-size:1.04em}
.actions{display:flex;gap:11px;margin:28px 0 42px}
.stats{display:flex;gap:36px}
.stat strong{display:block;font-size:23px}
.stat small{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.09em}
.booking{
  position:absolute;right:0;top:50%;transform:translateY(-45%);width:365px;padding:20px;
  border:1px solid var(--line);border-radius:24px;background:rgba(8,27,47,.67);
  backdrop-filter:blur(22px);box-shadow:0 25px 80px rgba(0,0,0,.3)
}
.booking h3{font-size:17px;margin-bottom:14px}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px}
.tab{border:0;background:transparent;color:#a9bdce;border-radius:12px;padding:9px 3px;font-size:10px;cursor:pointer}
.tab b{display:block;color:#fff;font-size:17px;margin-bottom:3px}.tab.active{background:rgba(255,193,59,.1);color:var(--gold)}
.field{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:11px 13px;margin:8px 0}
.field label{display:block;color:#7690a7;text-transform:uppercase;font-size:8px;letter-spacing:.1em;margin-bottom:4px}
.field input,.field select{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:12px}
.field option{color:#111}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.booking .btn{width:100%;margin-top:5px}
.scroll{position:fixed;z-index:8;bottom:25px;left:50%;transform:translateX(-50%);font-size:9px;text-transform:uppercase;letter-spacing:.15em;display:flex;gap:10px;align-items:center;color:#c5d3dd}
.wheel{width:20px;height:31px;border:1px solid rgba(255,255,255,.6);border-radius:20px;position:relative}
.wheel:after{content:"";position:absolute;width:3px;height:6px;border-radius:3px;background:var(--gold);top:6px;left:50%;animation:wheel 1.4s infinite}
@keyframes wheel{to{transform:translate(-50%,13px);opacity:0}}
@media(max-width:1050px){.rail{display:none}.cards{grid-template-columns:repeat(2,1fr)}nav{display:none}.menu{display:block}.hero-copy{width:58%}.booking{width:38%}.about-box{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){
  .container{width:calc(100% - 28px)}.hero{height:100vh;min-height:100vh}
  .hero-content{align-items:flex-start;padding-top:92px}.hero-copy{width:100%;margin-top:0}
  .hero h1{font-size:62px}.hero-bg{background-position:center center}
  .booking{top:auto;bottom:70px;left:0;width:100%;transform:none}.stats{gap:18px}.scroll{display:none}
}
.stays{background:linear-gradient(180deg,#06182d,#092441)}
.stays .container,.packages .container,.contact .container{perspective:1400px}
.stays-horizontal{
  height:100vh;
  min-height:760px;
  padding-top:105px;
  padding-bottom:0;
}
.stays-horizontal .container{
  height:100%;
  display:flex;
  flex-direction:column;
}
.stays-horizontal .stays-heading{
  flex:0 0 auto;
}
.stays-horizontal .cards{
  display:flex;
  flex-wrap:nowrap;
  gap:18px;
  width:max-content;
  margin-top:38px;
  will-change:transform;
}
.stays-horizontal .card{
  flex:0 0 330px;
  width:330px;
  height:420px;
  border-radius:19px;
  overflow:hidden;
  position:relative;
  border:1px solid var(--line);
  transform-style:preserve-3d;
}
.card .pic{position:absolute;inset:0;background-size:cover;background-position:center;transition:.7s}
.card:hover .pic{transform:scale(1.08)}
.card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(2,11,22,.92))}
.card-content{position:absolute;z-index:2;left:16px;right:16px;bottom:15px}
.badge{display:inline-block;background:var(--gold);color:#102033;border-radius:20px;padding:5px 8px;font-size:8px;font-weight:800;margin-bottom:7px}
.card h3{font-size:14px;margin-bottom:5px}.meta{display:flex;justify-content:space-between;color:#c5d3dd;font-size:9px}.meta strong{color:#fff}

.packages{background:linear-gradient(180deg,#092441,#052033)}
.package-grid{display:grid;grid-template-columns:1.35fr .82fr .82fr;grid-template-rows:210px 210px;gap:14px}
.package{position:relative;border-radius:19px;overflow:hidden;background-size:cover;background-position:center;border:1px solid var(--line)}
.package.large{grid-row:1/3}
.package:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(2,11,22,.93))}
.package-copy{position:absolute;z-index:2;bottom:16px;left:18px;right:18px}.package h3{font-size:16px;margin:5px 0}.package p{font-size:10px;color:#cad6df;margin-bottom:8px}.price{color:var(--gold);font-weight:800}.old{text-decoration:line-through;color:#8498aa;font-size:9px;margin-left:5px}

.destinations{background:#061a2f}
.destination-row{display:flex;justify-content:space-between;gap:12px;position:relative;padding:15px 0 30px}
.destination{flex:1;text-align:center}
.destination .circle{width:116px;height:116px;margin:auto;border-radius:50%;border:1px solid rgba(255,255,255,.3);padding:4px;overflow:hidden;transition:.35s}
.destination:hover .circle{transform:translateY(-10px) scale(1.05);border-color:var(--gold)}
.destination img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.destination span{display:block;font-size:11px;margin-top:9px;color:#e4edf4}

.experiences{background:linear-gradient(180deg,#061a2f,#071e35)}
.experience-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.exp{padding:20px 8px;text-align:center;border:1px solid var(--line);background:rgba(255,255,255,.035);border-radius:12px;min-height:105px;transition:.3s}
.exp:hover{background:rgba(255,193,59,.08);transform:translateY(-7px)}
.exp .icon{font-size:25px;height:36px}.exp span{font-size:9px;color:#d9e5ed}

.about{background:#071d34}
.about-box{border:1px solid var(--line);border-radius:20px;padding:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:rgba(255,255,255,.025)}
.benefit{padding:10px 18px;border-right:1px solid var(--line)}.benefit:last-child{border:0}.benefit b{display:block;font-size:11px;margin-bottom:7px}.benefit p{font-size:9px;margin:0;line-height:1.5;color:var(--muted)}

    /* ---------- BUSINESS SERVICES ---------- */
    .business {
      background:
        radial-gradient(circle at 90% 20%, rgba(84,216,232,.13), transparent 25%),
        #071d34;
    }
    .service-grid {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 16px;
    }
    .service {
      min-height: 250px;
      padding: 28px;
      border-radius: 25px;
      background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
      border: 1px solid var(--border);
      transform-style: preserve-3d;
      position: relative;
      overflow: hidden;
    }
    .service::before {
      content: "";
      position: absolute;
      width: 120px;
      height: 120px;
      right: -45px;
      top: -45px;
      border-radius: 50%;
      background: rgba(255,191,63,.12);
      filter: blur(3px);
    }
    .service-icon {
      font-size: 2rem;
      margin-bottom: 28px;
    }
    .service h3 { margin-bottom: 10px; }
    .service p { font-size: .83rem; margin: 0; }
    .service-tag {
      position: absolute;
      bottom: 20px;
      right: 20px;
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--gold);
    }


.contact{min-height:650px;background:
linear-gradient(90deg,rgba(2,11,22,.88),rgba(2,11,22,.35)),
url("footer-exact.jpg") center/cover;display:flex;align-items:center}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end}
.contact-card{padding:24px;border-radius:22px;background:rgba(5,23,41,.66);border:1px solid var(--line);backdrop-filter:blur(18px)}
.contact-line{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:11px}.contact-line:last-child{border:0}
footer{padding:22px 0;border-top:1px solid var(--line);font-size:9px;color:#8ea3b5;display:flex;justify-content:space-between}

.modal{position:fixed;z-index:500;inset:0;display:grid;place-items:center;padding:20px;background:rgba(0,8,18,.8);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transition:.25s}
.modal.open{opacity:1;visibility:visible}.modal-box{width:min(600px,100%);padding:30px;border-radius:25px;background:#0a2744;border:1px solid var(--line);position:relative}.close{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.06);color:#fff;font-size:22px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:8px}.form input,.form select,.form textarea{width:100%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#fff;padding:12px;border-radius:10px;outline:0}.form textarea{grid-column:1/-1;min-height:90px}.form button{grid-column:1/-1}

.reveal{opacity:0;transform:translateY(45px)}
@media(max-width:720px){
  .container{width:calc(100% - 28px)}
  .hero{height:auto;min-height:100vh}
  .hero-content{align-items:flex-start;padding-top:92px;padding-bottom:24px;flex-direction:column;height:auto;min-height:100vh}
  .hero-copy{width:100%;min-height:calc(100vh - 92px)}
  .hero h1{font-size:62px}
  .booking{display:none}
  .stats{gap:18px}
  .stays-horizontal{height:100vh;min-height:700px;padding-top:80px}
  .stays-horizontal .cards{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y;
    overscroll-behavior-x:contain;
    padding:0 0 20px;
    gap:14px;
    scrollbar-width:none;
  }
  .stays-horizontal .cards::-webkit-scrollbar{display:none}
  .stays-horizontal .card{flex-basis:280px;width:280px;height:390px}
  .package-grid{grid-template-columns:1fr;grid-template-rows:240px 180px 180px 180px}
  .package.large{grid-row:auto}
  .destination-row{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
  .destination .circle{width:75px;height:75px}
  .destination span{font-size:9px}
  .experience-grid{grid-template-columns:repeat(4,1fr)}
  .about-box{grid-template-columns:1fr}
  .benefit{border-right:0;border-bottom:1px solid var(--line);padding:15px}
  .contact-grid{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .form textarea,.form button{grid-column:auto}
  footer{display:block;line-height:2}
}

@media(max-width:720px){
  .service-grid{grid-template-columns:1fr}
}


/* =========================================================
   EDITABLE 4-COLUMN FOOTER
   Designed from the supplied reference image.
   Background image is intentionally NOT used.
========================================================= */
.site-footer{
  position:relative;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,193,59,.045), transparent 28%),
    linear-gradient(180deg,#07192c 0%,#041323 100%);
  color:var(--text);
  border-top:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

.site-footer-inner{
  width:min(1180px,calc(100% - 46px));
  margin:0 auto;
  min-height:330px;
  padding:58px 0 52px;
  display:grid;
  grid-template-columns:1.35fr .9fr 1fr 1.15fr 1.05fr;
  column-gap:34px;
  align-items:start;
}

.footer-column{min-width:0}

.footer-brand{padding-top:0}

.footer-logo{
  display:inline-flex;
  align-items:center;
  font-size:32px;
  line-height:1;
  font-weight:800;
  letter-spacing:-2px;
  color:#f7fbff;
  margin-bottom:27px;
}

.footer-logo span{color:var(--gold)}
.footer-logo i{
  font-size:14px;
  font-style:normal;
  margin-left:5px;
  color:#f7fbff;
  transform:translateY(-8px);
}

.footer-slogan{
  margin:0;
  color:#e1e9ef;
  font-size:13px;
  line-height:1.75;
  max-width:310px;
}

.footer-socials{
  display:flex;
  gap:18px;
  margin-top:27px;
}

.social-link{
  width:40px;
  height:40px;
  border:1.5px solid rgba(255,255,255,.72);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  transition:.25s ease;
}

.social-link:hover{
  color:var(--gold);
  border-color:var(--gold);
  transform:translateY(-3px);
}

.social-link svg{
  width:18px;
  height:18px;
  display:block;
  fill:currentColor;
  stroke:currentColor;
  stroke-width:1.4;
}

.footer-heading{
  margin:4px 0 20px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.035em;
}

.footer-links{
  display:flex;
  flex-direction:column;
  gap:11px;
}

.footer-links a{
  color:#d7e0e7;
  font-size:12px;
  line-height:1.25;
  transition:.2s ease;
}

.footer-links a:hover{
  color:var(--gold);
  transform:translateX(3px);
}

.footer-newsletter p{
  margin:0 0 25px;
  color:#dfe7ed;
  font-size:13px;
  line-height:1.7;
}

.footer-newsletter-form{
  height:45px;
  display:flex;
  align-items:stretch;
  border:1px solid rgba(255,255,255,.18);
  border-radius:24px;
  overflow:hidden;
  background:rgba(3,15,29,.62);
  max-width:285px;
}

.footer-newsletter-form input{
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  padding:0 16px;
  font-size:11px;
}

.footer-newsletter-form input::placeholder{
  color:#d0d8df;
}

.footer-newsletter-form button{
  width:52px;
  flex:0 0 52px;
  border:0;
  background:var(--gold);
  color:#081a2b;
  cursor:pointer;
  font-size:18px;
  font-weight:800;
  transition:.2s ease;
}

.footer-newsletter-form button:hover{
  background:#ffd267;
}

.site-footer-bottom{
  background:rgba(0,7,17,.32);
  border-top:1px solid rgba(255,255,255,.055);
}

.site-footer-bottom-inner{
  width:min(1180px,calc(100% - 46px));
  min-height:78px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#d0d9e0;
  font-size:11px;
}

.footer-legal{
  display:flex;
  align-items:center;
  gap:16px;
}

.footer-legal a{
  color:#d0d9e0;
  transition:.2s ease;
}

.footer-legal a:hover{color:var(--gold)}


/* ---------- FOOTER CONTACT COLUMN ---------- */
.footer-contact{
  min-width:0;
  padding-left:4px;
}
.footer-contact-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:2px;
}
.footer-contact-item{
  display:flex;
  align-items:center;
  gap:12px;
  color:#d7e0e7;
  font-size:12px;
  line-height:1.35;
  min-width:0;
  transition:.2s ease;
}
.footer-contact-item:hover{
  color:var(--gold);
}
.footer-contact-icon{
  flex:0 0 38px;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--gold);
  background:rgba(255,255,255,.025);
  font-size:18px;
}

@media(max-width:1050px){
  .site-footer-inner{
    grid-template-columns:1.2fr 1fr 1fr;
    row-gap:45px;
  }
  .footer-newsletter{grid-column:2}
  .footer-contact{grid-column:3}
}

@media(max-width:720px){
  .site-footer-inner{
    width:calc(100% - 28px);
    grid-template-columns:1fr 1fr;
    column-gap:30px;
    row-gap:42px;
    padding:48px 0 42px;
  }

  .footer-brand,
  .footer-newsletter,
  .footer-contact{
    grid-column:1/-1;
  }

  .footer-logo{font-size:29px}
  .footer-slogan{font-size:12px}
  .footer-heading{font-size:11px}
  .footer-links a{font-size:11px}
  .footer-newsletter-form{max-width:100%}

  .site-footer-bottom-inner{
    width:calc(100% - 28px);
    min-height:100px;
    padding:20px 0;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:13px;
    line-height:1.6;
  }

  .footer-legal{
    gap:10px;
    flex-wrap:wrap;
  }
}




/* ==========================================================
   Smilensee — Final Reference Refinements
   (kept after main styles so !important overrides still apply
   in the same cascade order as the original inline version)
   ========================================================== */


/* Smilensee final reference refinements */
.hero-copy{
  transform:translateY(38px);
}
.hero h1{
  font-size:clamp(48px,6.2vw,82px) !important;
  line-height:.86 !important;
}
.hero h1 .script{
  font-family:"Playfair Display",serif !important;
  font-style:italic !important;
  font-weight:600 !important;
  letter-spacing:-.035em !important;
}
.contact{
  min-height:650px;
  background:
    linear-gradient(90deg,rgba(2,11,22,.78),rgba(2,11,22,.30)),
    url("footer-exact.jpg") center/cover !important;
}

/* ---------- UNMATCHED SERVICES ---------- */
.unmatched-services{margin-top:58px}
.unmatched-heading{text-align:center;margin-bottom:30px}
.unmatched-heading .eyebrow{justify-content:center;margin-bottom:8px;font-size:10px}
.unmatched-heading .eyebrow:before{display:none}
.unmatched-heading h2{font-size:30px;line-height:1;letter-spacing:-.035em;margin:0}
.unmatched-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:start}
.unmatched-item{text-align:center;min-width:0}
.unmatched-icon{width:52px;height:52px;margin:0 auto 12px;display:grid;place-items:center;color:var(--gold)}
.unmatched-icon svg{width:48px;height:48px;display:block}
.unmatched-item h3{font-size:13px;line-height:1.2;margin:0 0 9px}
.unmatched-item p{color:#cbd7e0;font-size:11px;line-height:1.45;margin:0}
@media(max-width:1050px){.unmatched-grid{grid-template-columns:repeat(3,1fr);row-gap:28px}}
@media(max-width:720px){.unmatched-services{margin-top:40px}.unmatched-grid{grid-template-columns:repeat(2,1fr);gap:28px 12px}.unmatched-heading h2{font-size:28px}}




/* ---------- FOOTER ALIGNMENT FIX ONLY ---------- */
.site-footer{
  display:block !important;
  width:100%;
  padding:0 !important;
  margin:0;
  border-top:1px solid rgba(255,255,255,.08);
}

.site-footer-inner{
  width:min(1130px,calc(100% - 56px)) !important;
  margin:0 auto !important;
  min-height:330px;
  padding:58px 0 52px;
  display:grid !important;
  grid-template-columns:1.25fr .9fr 1fr 1.15fr;
  column-gap:62px;
  align-items:start;
}

.site-footer-bottom{
  width:100%;
  display:block !important;
  clear:both;
  background:rgba(0,7,17,.32);
  border-top:1px solid rgba(255,255,255,.055);
}

.site-footer-bottom-inner{
  width:min(1130px,calc(100% - 56px)) !important;
  min-height:78px;
  margin:0 auto !important;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

@media(max-width:1050px){
  .site-footer-inner{
    width:min(900px,calc(100% - 42px)) !important;
    grid-template-columns:1.2fr 1fr 1fr;
    row-gap:45px;
  }
  .footer-newsletter{grid-column:2/-1}
  .site-footer-bottom-inner{
    width:min(900px,calc(100% - 42px)) !important;
  }
}

@media(max-width:720px){
  .site-footer-inner{
    width:calc(100% - 28px) !important;
    grid-template-columns:1fr 1fr;
    column-gap:30px;
    row-gap:42px;
    padding:48px 0 42px;
  }
  .site-footer-bottom-inner{
    width:calc(100% - 28px) !important;
    min-height:100px;
    padding:20px 0;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:13px;
  }
}

/* Accessibility: skip link (hidden until focused, no impact on default appearance) */
.skip-link{position:absolute;top:-40px;left:0;background:var(--gold);color:#081a2b;padding:10px 16px;font-weight:800;font-size:12px;z-index:9999;border-radius:0 0 8px 0;transition:top .2s}
.skip-link:focus{top:0}

/* ==========================================================
   IMMERSIVE UPGRADES — parallax, 3D tilt, mask reveals, magnetic CTAs
   All rules below are additive; nothing above this block was removed.
   ========================================================== */

/* Scroll progress bar */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--gold),#54d8e8);z-index:3000;pointer-events:none}

/* Hero depth-parallax orbs — pure CSS/GSAP, no extra image assets needed */
.hero-orb{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none;z-index:2;opacity:.55;will-change:transform}
.hero-orb.o1{width:260px;height:260px;background:radial-gradient(circle,rgba(255,193,59,.55),transparent 70%);top:12%;left:8%}
.hero-orb.o2{width:340px;height:340px;background:radial-gradient(circle,rgba(84,216,232,.42),transparent 70%);bottom:8%;right:14%}
.hero-orb.o3{width:180px;height:180px;background:radial-gradient(circle,rgba(255,193,59,.35),transparent 70%);top:52%;left:44%}
@media(max-width:1050px){.hero-orb{display:none}}

/* Image wipe / mask reveal for stay & package images */
.mask-reveal{clip-path:inset(0 0 100% 0)}

/* 3D flip-in for section headings (relies on the ancestor .container perspective above) */
.flip-reveal{opacity:0;transform:rotateX(-70deg);transform-origin:50% 100%}

/* Magnetic buttons — GSAP drives the transform, this just hints the browser */
.btn{will-change:transform}

/* Eyebrow label split into per-letter spans by script.js */
.eyebrow .char{display:inline-block}

/* Package & destination tilt need a 3D-aware transform box (cards already have this) */
.package{transform-style:preserve-3d}

/* Letters are now individual inline-block spans (added by script.js for the
   letter-reveal effect) instead of one plain text node — flex containers
   don't wrap by default, so without this a long eyebrow label could run off
   the edge on narrow phones instead of wrapping like the original text did. */
.eyebrow{flex-wrap:wrap;row-gap:4px}

/* ==========================================================
   RESPONSIVE ENHANCEMENTS
   Fills the gaps between the existing 1050px/720px breakpoints:
   a smoother tablet step, small-phone refinements, and short
   landscape viewports. Nothing here removes earlier rules —
   these only add or override at their specific widths.
   ========================================================== */

/* ---- Tablets (1050px down to 721px): give a couple of grids their own
   middle step instead of jumping straight from 3 columns to 1. Scoped with
   min-width so it never overlaps the 720px phone rules above it. ---- */
@media(max-width:1050px) and (min-width:721px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .package-grid{grid-template-columns:1fr 1fr;grid-template-rows:240px 200px 200px}
  .package.large{grid-column:1/-1;grid-row:auto}
  .package:not(.large){grid-row:auto}
}

/* ---- Earlier hero stacking for tablet portrait (iPad-class devices) ----
   The existing 720px rule already stacks the hero for phones; this range
   query is scoped strictly to 721–900px so it can only apply to tablets
   and never overrides the phone-specific rules above it in the cascade. */
@media(max-width:900px) and (min-width:721px){
  .hero-content{align-items:flex-start;padding-top:100px}
  .hero-copy{width:100%;margin-top:0;transform:none}
  .hero h1{font-size:clamp(44px,9vw,72px) !important}
  .booking{position:relative;top:0;right:0;transform:none;width:100%;margin-top:28px}
  .scroll{display:none}
}

/* ---- Small phones (480px and under) ---- */
@media(max-width:480px){
  .hero h1{font-size:40px !important}
  .lead{font-size:13px}
  .stats{flex-wrap:wrap;gap:14px 22px}
  .actions{flex-wrap:wrap}
  .tabs{grid-template-columns:repeat(2,1fr);gap:6px}
  .package-grid{grid-template-columns:1fr;grid-template-rows:none}
  .package{height:210px}
  .package.large{height:230px}
  .destination-row{grid-template-columns:repeat(4,1fr);gap:15px}
  .destination .circle{width:75px;height:75px}
  .experience-grid{grid-template-columns:repeat(3,1fr)}
  .exp{min-height:88px;padding:14px 6px}
  .unmatched-grid{grid-template-columns:1fr 1fr;gap:24px 10px}
  .service-grid{grid-template-columns:1fr}
  .contact-card{padding:18px}
  .modal-box{padding:20px;width:calc(100% - 24px)}
  .site-footer-inner{grid-template-columns:1fr}
  .footer-column{grid-column:auto !important}
  .site-footer-bottom-inner{align-items:flex-start}
}

/* ---- Short landscape viewports (phones rotated sideways) ----
   A 100vh hero plus an absolutely-positioned booking card can overwhelm a
   short screen; relax the height and let it size to content instead. */
@media(max-height:480px) and (orientation:landscape){
  .hero{height:auto;min-height:100vh}
  .hero-content{position:relative;height:auto;min-height:auto;padding:110px 0 40px}
  .booking{position:relative;top:0;right:0;transform:none;width:100%;margin-top:24px}
  .scroll{display:none}
}

/* ---- Respect reduced-motion preference: keep content visible instead of
   relying on scroll-triggered reveals, and skip decorative motion ---- */
@media(prefers-reduced-motion:reduce){
  .reveal,.flip-reveal,.mask-reveal{opacity:1 !important;transform:none !important;clip-path:none !important}
  .hero-orb{display:none}
}



/* ==========================================================
   MOBILE HANDPICKED STAYS — FIXED TOUCH HORIZONTAL SCROLL
   ========================================================== */
@media (max-width:720px){
  .stays-horizontal{
    overflow:hidden;
    height:auto;
    min-height:700px;
  }

  .stays-horizontal .container{
    overflow:visible;
    width:calc(100% - 28px);
    /* iOS Safari has a long-standing bug where a scrollable element
       (overflow-x:auto) nested inside an ancestor with CSS `perspective`
       set can fail to receive touch-scroll gestures at all, even though
       it scrolls fine with a mouse. The perspective on `.container` is
       only there for the desktop-only hover tilt and the heading
       flip-in — neither needed on touch — so drop it here to make sure
       nothing upstream of the card track can block real finger swipes. */
    perspective:none;
  }

  .stays-horizontal .card{
    transform-style:flat;
  }

  .stays-horizontal .cards{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    /* The SCROLL CONTAINER must stay constrained to the viewport width —
       it's the CHILDREN (fixed-width cards, nowrap) that overflow it.
       width:max-content here would make this box grow to fit all the
       cards, so it would never overflow its own bounds and
       overflow-x:auto would have nothing left to scroll. */
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    overscroll-behavior-x:contain;

    scroll-snap-type:x proximity;
    scrollbar-width:none;

    padding:0 0 20px;
    margin-top:38px;
    gap:14px;

    /* Prevent GSAP/other transforms from interfering on mobile */
    transform:none !important;
  }

  .stays-horizontal .cards::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
  }

  .stays-horizontal .card{
    flex:0 0 280px !important;
    width:280px !important;
    min-width:280px !important;
    max-width:280px !important;
    height:390px;
    scroll-snap-align:start;
  }
}