/* =============================================================
   AQ'S BEACH RESORT
   styles.css
   ============================================================= */

/* ---- Design tokens ----------------------------------------- */
:root {
  --ocean:        #0e7490;
  --ocean-light:  #34aecb;
  --ocean-deep:   #0a4c5e;
  --ocean-fg:     #ffffff;
  --palm:         #3e8e63;
  --palm-deep:    #2c6b48;
  --palm-light:   #6cb98c;
  --sand:         #f7edd8;
  --sand-deep:    #e9d3a3;
  --sand-line:    #ddc389;
  --bg:           #fffdf8;
  --surface:      #fbf3e2;
  --card:         #ffffff;
  --ink:          #0f2e3a;
  --fg:           #1c3b47;
  --muted:        #5c7883;
  --border:       #e7dcc0;
  --border-soft:  #f0e6cd;

  --shadow-xs:    0 1px 3px rgba(14,60,74,.08), 0 1px 2px rgba(14,60,74,.05);
  --shadow-sm:    0 4px 16px -4px rgba(14,60,74,.14), 0 1px 4px rgba(14,60,74,.07);
  --shadow-soft:  0 20px 60px -20px rgba(14,116,144,.25), 0 4px 12px rgba(14,60,74,.06);
  --shadow-elegant: 0 12px 40px -8px rgba(14,116,144,.42);
  --shadow-glass: 0 8px 32px -8px rgba(10,40,50,.18), 0 2px 8px rgba(10,40,50,.06);
  --shadow-lifted:0 32px 64px -24px rgba(10,40,50,.32), 0 8px 24px rgba(10,40,50,.08);

  --grad-hero:    linear-gradient(160deg,#eafaff 0%,#dff3f6 40%,#f7edd8 100%);
  --grad-accent:  linear-gradient(135deg,#ffe08a 0%,#f0c265 45%,#dba646 100%);
  --grad-ocean:   linear-gradient(145deg,#1596b8 0%,#0e7490 55%,#0a4c5e 100%);
  --grad-ocean-soft: linear-gradient(145deg,rgba(21,150,184,.08),rgba(14,116,144,.04));
  --grad-palm:    linear-gradient(135deg,#6cb98c 0%,#3e8e63 50%,#2c6b48 100%);
  --grad-footer:  radial-gradient(130% 90% at 15% 0%,rgba(10,76,94,.75),transparent 55%),
                  radial-gradient(90% 70% at 88% 105%,rgba(62,142,99,.22),transparent 55%),
                  linear-gradient(175deg,#0a2e38 0%,#071e24 100%);

  --font-display: "Clash Display", "Poppins", system-ui, sans-serif;
  --font-body:    "General Sans", "Poppins", system-ui, sans-serif;
  --ease-out-quint: cubic-bezier(.22,1,.36,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);

  --radius-sm:  .5rem;
  --radius-md:  1rem;
  --radius-lg:  1.5rem;
  --radius-xl:  2rem;
}

/* ---- Reset -------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html  { scroll-behavior:smooth }
body  { font-family:var(--font-body); color:var(--fg); background:var(--bg);
        line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased;
        scroll-padding-top:88px; will-change:auto }
img   { max-width:100%; display:block }
a     { color:inherit; text-decoration:none }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit }
::selection { background:rgba(240,194,101,.5); color:#0a2e38 }

.container { max-width:1480px; margin:0 auto; padding:0 2rem; position:relative }

@media (hover:hover) {
  ::-webkit-scrollbar { width:8px; height:8px }
  ::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#1596b8,#0a4c5e); border-radius:10px; border:2px solid #fbf3e2 }
  ::-webkit-scrollbar-track { background:#fbf3e2 }
}

/* PLACEHOLDER NOTE — remove this banner once real photos/copy are in place */
.placeholder-banner {
  background:var(--grad-accent); color:#3a2a05; text-align:center;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
  padding:.6rem 1rem; position:relative; z-index:70;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.95rem 1.85rem; border-radius:.9rem;
  font-weight:700; font-size:.9rem; letter-spacing:.01em;
  border:1.5px solid transparent;
  position:relative; overflow:hidden;
  transition:transform .4s var(--ease-out-quint),
             box-shadow .35s ease, background .3s ease,
             border-color .3s ease, color .3s ease;
  will-change:transform;
}
.btn-primary {
  background:var(--grad-ocean); color:var(--ocean-fg);
  box-shadow:var(--shadow-elegant), inset 0 1px 0 rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.1);
}
.btn-primary:hover { opacity:.94; transform:translateY(-2px); box-shadow:0 20px 50px -12px rgba(14,116,144,.55) }
.btn-ghost {
  background:rgba(255,255,255,.8); border-color:var(--border);
  color:var(--fg); backdrop-filter:blur(8px); box-shadow:var(--shadow-xs);
}
.btn-ghost:hover { border-color:var(--ocean); color:var(--ocean); background:#fff; box-shadow:var(--shadow-sm) }
.btn-accent {
  background:var(--grad-palm); color:#fff;
  border-color:rgba(255,255,255,.2);
  box-shadow:0 8px 24px -6px rgba(44,107,72,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-accent:hover { opacity:.93; transform:translateY(-1px); box-shadow:0 14px 32px -6px rgba(44,107,72,.55) }
.btn-pill  { border-radius:999px; padding:.65rem 1.2rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em }
.btn-block { width:100%; justify-content:center; padding:1.1rem 1.5rem }
.btn-sm    { padding:.65rem 1.15rem; font-size:.8rem }

.btn::before {
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(120px 120px at var(--rx,50%) var(--ry,50%),rgba(255,255,255,.3),transparent 60%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.btn:hover::before { opacity:1 }
.btn[data-magnetic] { transform:translate3d(var(--mx,0),var(--my,0),0) }
.btn[data-magnetic]:hover { box-shadow:0 20px 44px -12px rgba(14,116,144,.5) }
.btn:active { transform:translate3d(var(--mx,0),var(--my,0),0) scale(.975) }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(255,253,248,.65);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.5);
  transition:background .4s var(--ease-out-quint), box-shadow .4s var(--ease-out-quint), border-color .4s ease;
}
.nav.scrolled {
  background:rgba(255,253,248,.88);
  box-shadow:0 4px 24px -8px rgba(14,60,74,.14), 0 1px 0 rgba(14,60,74,.05);
  border-bottom-color:rgba(14,116,144,.1);
}
.nav-inner { max-width:1480px; margin:0 auto; padding:0 2rem; height:5rem; display:flex; align-items:center; justify-content:space-between; gap:1.25rem }

.brand      { display:flex; align-items:center; gap:.7rem }
.brand-logo { height:2.6rem; width:auto; display:block; border-radius:8px;
              box-shadow:0 6px 18px -8px rgba(14,116,144,.5);
              transition:transform .35s var(--ease-spring), box-shadow .3s ease }
.brand:hover .brand-logo { transform:translateY(-2px) scale(1.05); box-shadow:0 10px 24px -8px rgba(14,116,144,.65) }
.brand-logo--footer { height:2.9rem; box-shadow:0 8px 22px -10px rgba(0,0,0,.55) }
@media (max-width:640px) { .brand-logo { height:2.2rem } .brand-logo--footer { height:2.4rem } }

.brand-title { font-family:var(--font-display); font-weight:700; font-size:.95rem; letter-spacing:.02em; color:var(--ink) }
.brand-title.light { color:#fff }
.brand-sub  { font-size:.68rem; color:var(--muted); font-weight:600; letter-spacing:.09em }
.brand-sub.light { color:rgba(255,255,255,.55) }

.nav-links { display:none; gap:.15rem; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted) }
.nav-links a { position:relative; padding:.5rem .95rem; border-radius:999px; transition:color .2s ease, background .2s ease }
.nav-links a:hover { color:var(--ocean); background:rgba(14,116,144,.07) }
.nav-links a.active { color:var(--ocean); background:rgba(14,116,144,.09) }
.nav-links a::after {
  content:""; position:absolute; left:50%; bottom:.28rem; transform:translateX(-50%) scaleX(0);
  width:.42rem; height:3px; border-radius:2px; background:var(--palm);
  transition:transform .3s var(--ease-out-quint), opacity .3s; opacity:0;
}
.nav-links a.active::after { transform:translateX(-50%) scaleX(1); opacity:1 }

.nav-cta { display:none }
.menu-btn { display:inline-flex; padding:.5rem; border-radius:.5rem; transition:background .2s ease }
.menu-btn:hover { background:rgba(14,116,144,.07) }
@media (min-width:1024px) { .nav-links { display:flex } .menu-btn { display:none } }
@media (min-width:768px)  { .nav-cta { display:inline-flex } }

.mobile-menu {
  padding:1rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap:.2rem;
  background:rgba(255,253,248,.97); border-top:1px solid var(--border-soft); backdrop-filter:blur(16px);
}
.mobile-menu[hidden] { display:none !important }
.mobile-menu a:not(.btn) {
  padding:.72rem .9rem; border-radius:.55rem; font-size:.82rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  transition:color .2s ease, background .2s ease;
}
.mobile-menu a:not(.btn):hover { color:var(--ocean); background:rgba(14,116,144,.06) }
.mobile-menu .btn { margin-top:.75rem; justify-content:center }
@media (min-width:1024px) { .mobile-menu { display:none !important } }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; padding:120px 2rem 8rem; isolation:isolate; background:var(--grad-hero) }
/* PLACEHOLDER — swap this url() for images/hero/hero-bg.jpg (a real resort photo) once available */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:0;
}
.hero > * { position:relative; z-index:2 }

.hero-slider{
  position:absolute;
  inset:0;
  z-index:-1;
}

.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity .8s ease;
}

.hero-slide.active{
  opacity:1;
}

.hero-controls{
  position:absolute;
  left:50%;
  bottom:32px;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  z-index:3;
}

.hero-controls button{
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  cursor:pointer;
  font-size:20px;
  transition:.2s;
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.hero-controls button:hover{
  transform:scale(1.08);
}

.hero-grid { max-width:1300px; margin:0 auto; display:grid; gap:2.5rem; align-items:center; text-align:center; justify-items:center }
.hero-copy { max-width:44rem }

.badge {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.48rem 1.05rem; background:rgba(255,255,255,.9);
  border:1.5px solid rgba(14,116,144,.14); color:var(--ocean);
  font-weight:700; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  border-radius:999px; margin-bottom:1.75rem;
  box-shadow:0 2px 10px rgba(14,116,144,.1), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(8px);
}

.display {
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(2.3rem,5.5vw,4.1rem);
  line-height:1.06; color:var(--ink); margin-bottom:1.4rem;
  letter-spacing:-.02em; text-wrap:balance;
}

.lead { font-size:1.12rem; color:var(--muted); margin-bottom:2.25rem; max-width:38rem; margin-left:auto; margin-right:auto; line-height:1.75; text-wrap:pretty }
.hero-ctas { display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center }

/* Ambient floating shapes */
.float-shape {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle,rgba(14,116,144,.09) 0%,transparent 70%);
  pointer-events:none; z-index:1;
  animation:floatShape var(--dur,12s) ease-in-out var(--delay,0s) infinite;
}
@keyframes floatShape { 0%,100%{transform:translateY(0) rotate(0deg)} 33%{transform:translateY(-18px) rotate(4deg)} 66%{transform:translateY(10px) rotate(-3deg)} }

/* Signature: hand-drawn wave divider under the hero */
.wave-divider { position:relative; display:block; width:100%; line-height:0; margin-top:-6px }
.wave-divider svg { width:100%; height:70px; display:block }

/* ============================================================
   INTRO
   ============================================================ */
.intro { padding:5.5rem 2rem 2rem; background:var(--bg) }
.intro-inner { max-width:52rem; margin:0 auto; text-align:center }
.intro .eyebrow { justify-content:center; display:flex }
.intro p { font-size:1.05rem; color:var(--muted); line-height:1.85 }

/* ============================================================
   SECTION TYPOGRAPHY HELPERS
   ============================================================ */
.section-head { max-width:48rem; margin-bottom:3.5rem }
.section-head.center { text-align:center; margin-left:auto; margin-right:auto }
.eyebrow     { font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.24em; color:var(--ocean); display:block; margin-bottom:.8rem }
.eyebrow-acc { color:var(--palm) }
.h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(1.9rem,4.2vw,3.1rem); line-height:1.08; color:var(--ink); margin-bottom:1.1rem; letter-spacing:-.015em; text-wrap:balance }
.h2.light { color:#fff }
.sub       { font-size:1.05rem; color:var(--muted); line-height:1.72; text-wrap:pretty }
.sub.light { color:rgba(255,255,255,.78) }

/* ============================================================
   COTTAGES
   ============================================================ */
.cottages { padding:7rem 2rem; background:var(--surface); position:relative }
.cot-grid { display:grid; grid-template-columns:1fr; gap:1.75rem; margin-top:1rem }
@media (min-width:640px)  { .cot-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px) { .cot-grid { grid-template-columns:repeat(3,1fr) } }

.cot-card {
  background:var(--card); border:1px solid var(--border-soft); border-radius:1.4rem;
  overflow:hidden; box-shadow:var(--shadow-xs);
  opacity:0; transform:translateY(28px);
  transition:transform .5s var(--ease-out-quint), box-shadow .35s ease, border-color .35s ease, opacity .6s var(--ease-out-quint);
  transition-delay:var(--d,0ms);
  display:flex; flex-direction:column;
}
.reveal.in .cot-card { opacity:1; transform:translateY(0) }
.cot-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lifted); border-color:rgba(14,116,144,.18) }

.cot-media { position:relative; aspect-ratio:4/3; overflow:hidden }
.cot-media img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out-quint) }
.cot-card:hover .cot-media img { transform:scale(1.08) }
.cot-price-tag {
  position:absolute; top:.9rem; right:.9rem;
  background:var(--grad-accent); color:#3a2a05;
  font-size:.7rem; font-weight:800; letter-spacing:.02em;
  padding:.4rem .85rem; border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}

.cot-body { padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; gap:.6rem; flex:1 }
.cot-name { font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:var(--ink) }
.cot-meta { display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--muted); font-weight:600 }
.cot-meta .dot-sep { width:3px; height:3px; border-radius:50%; background:var(--muted) }
.cot-body .btn { margin-top:.6rem; align-self:flex-start }

/* ============================================================
   COTTAGE MODAL (popup with gallery)
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0; z-index:70;
  background:rgba(9,35,42,.72); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; padding:1.25rem;
  animation:fadeIn .22s ease;
}
.modal-overlay[hidden] { display:none !important }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

.cot-modal {
  background:var(--card); border-radius:1.6rem; width:100%; max-width:980px; max-height:92vh;
  overflow-y:auto; box-shadow:0 50px 100px -20px rgba(0,0,0,.5);
  display:grid; grid-template-columns:1fr 1fr;
  animation:lbZoomIn .35s var(--ease-out-quint);
}
@keyframes lbZoomIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
@media (max-width:800px) { .cot-modal { grid-template-columns:1fr } }

.cot-modal-close {
  position:absolute; top:1.1rem; right:1.1rem; z-index:20;
  width:2.6rem; height:2.6rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(9,35,42,.4);
  backdrop-filter:blur(8px); color:#fff;
  display:grid; place-items:center; font-size:1rem; transition:all .28s ease;
}
.cot-modal-close:hover { background:rgba(9,35,42,.65); transform:scale(1.08) rotate(90deg) }

.cot-gallery { position:relative; background:#0a2e38; min-height:280px }
.cot-gallery-main { position:relative; width:100%; height:100%; min-height:280px; overflow:hidden }
.cot-gallery-main img { width:100%; height:100%; object-fit:cover; display:block; animation:lbZoomIn .35s var(--ease-out-quint) }
.cot-gal-btn {
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:2.6rem; height:2.6rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.25); background:rgba(9,35,42,.4);
  backdrop-filter:blur(8px); color:#fff; display:grid; place-items:center;
  font-size:1rem; transition:all .25s ease;
}
.cot-gal-btn:hover { background:rgba(9,35,42,.65); transform:translateY(-50%) scale(1.08) }
.cot-gal-prev { left:.7rem } .cot-gal-next { right:.7rem }
.cot-thumbs { display:flex; gap:8px; padding:.75rem; position:absolute; bottom:0; left:0; right:0; overflow-x:auto; background:linear-gradient(to top,rgba(9,35,42,.85),transparent) }
.cot-thumb { width:52px; height:52px; border-radius:.6rem; overflow:hidden; flex-shrink:0; cursor:pointer; border:2px solid rgba(255,255,255,.25); transition:all .22s ease }
.cot-thumb img { width:100%; height:100%; object-fit:cover }
.cot-thumb.active, .cot-thumb:hover { border-color:var(--palm-light); transform:scale(1.06) }

.cot-modal-info { padding:2.1rem 2.2rem; display:flex; flex-direction:column; gap:1.1rem }
.cot-modal-price { font-family:var(--font-display); font-weight:600; font-size:1.6rem; color:var(--ocean) }
.cot-modal-price span { font-size:.85rem; font-weight:600; color:var(--muted); margin-left:.35rem }
.cot-modal-title { font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:var(--ink) }
.cot-modal-meta { display:flex; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted); font-weight:600 }
.cot-modal-desc { font-size:.92rem; color:var(--fg); line-height:1.75 }
.cot-modal-rules { background:var(--surface); border:1px solid var(--border-soft); border-radius:.9rem; padding:1rem 1.15rem; font-size:.85rem; color:var(--muted); line-height:1.7 }
.cot-modal-rules strong { color:var(--ink); display:block; margin-bottom:.35rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.1em }
.cot-modal-info .btn { margin-top:.4rem }

/* ============================================================
   RESORT MAP
   ============================================================ */
.resort-map { padding:7rem 2rem; background:var(--bg) }
.map-illustration-wrap {
  position:relative; max-width:900px; margin:2.5rem auto 0;
  border-radius:1.6rem; overflow:hidden; box-shadow:var(--shadow-soft);
  border:1px solid var(--border-soft);
}
.map-illustration-wrap svg { width:100%; height:auto; display:block }

.map-pin {
  position:absolute; transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center; cursor:pointer;
  background:none; border:0; padding:0;
}
.map-pin-dot {
  width:2.1rem; height:2.1rem; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--grad-ocean); box-shadow:0 6px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.3);
  display:grid; place-items:center; transition:transform .3s var(--ease-spring), box-shadow .3s ease;
  border:2px solid #fff;
}
.map-pin-dot span { transform:rotate(45deg); font-size:.95rem; line-height:1 }
.map-pin:hover .map-pin-dot, .map-pin.active .map-pin-dot { transform:rotate(-45deg) scale(1.15); box-shadow:0 10px 22px rgba(0,0,0,.35) }
.map-pin-label {
  margin-top:.3rem; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink); background:rgba(255,255,255,.9); padding:.15rem .5rem; border-radius:.4rem;
  white-space:nowrap; box-shadow:var(--shadow-xs);
}

.map-popover {
  position:absolute; z-index:15; max-width:230px;
  background:var(--card); border-radius:1rem; padding:1rem 1.15rem;
  box-shadow:var(--shadow-lifted); border:1px solid var(--border-soft);
  animation:lbZoomIn .22s var(--ease-out-quint);
}
.map-popover[hidden] { display:none !important }
.map-popover h4 { font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--ink); margin-bottom:.35rem }
.map-popover p  { font-size:.8rem; color:var(--muted); line-height:1.55 }
.map-popover-close { position:absolute; top:.5rem; right:.5rem; width:1.5rem; height:1.5rem; border-radius:50%; display:grid; place-items:center; color:var(--muted); font-size:.8rem }
.map-popover-close:hover { background:var(--surface); color:var(--ink) }

.map-legend { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:1.75rem }
.map-legend-item { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--border-soft); padding:.4rem .85rem; border-radius:999px }

.map-note { text-align:center; font-size:.82rem; color:var(--muted); margin-top:1.5rem }

/* ============================================================
   GOOGLE MAP / DIRECTIONS
   ============================================================ */
.directions { padding:5.5rem 2rem; background:var(--surface) }
.dir-grid { display:grid; gap:2.5rem; max-width:1100px; margin:0 auto; align-items:center }
@media (min-width:900px) { .dir-grid { grid-template-columns:1fr 1.1fr } }
.dir-copy .h2 { margin-bottom:.8rem }
.dir-ctas { display:flex; flex-wrap:wrap; gap:.85rem; margin-top:1.5rem }
.dir-map-embed { border-radius:1.4rem; overflow:hidden; box-shadow:var(--shadow-soft); border:1px solid var(--border-soft); aspect-ratio:4/3 }
.dir-map-embed iframe { width:100%; height:100%; border:0; display:block; filter:saturate(1.05) }

/* ============================================================
   PRICING
   ============================================================ */
.pricing { padding:6rem 2rem; background:var(--bg) }
.price-table-wrap { max-width:640px; margin:2rem auto 0; background:var(--card); border:1px solid var(--border-soft); border-radius:1.4rem; overflow:hidden; box-shadow:var(--shadow-sm) }
.price-table { width:100%; border-collapse:collapse }
.price-table tr { border-bottom:1px solid var(--border-soft) }
.price-table tr:last-child { border-bottom:0 }
.price-table td { padding:1.2rem 1.6rem; font-size:.95rem }
.price-table td:first-child { font-weight:600; color:var(--ink) }
.price-table td:last-child { text-align:right; font-weight:700; color:var(--ocean); font-family:var(--font-display) }
.price-note { text-align:center; font-size:.82rem; color:var(--muted); margin-top:1.25rem }

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.faq { padding:6.5rem 2rem; background:var(--surface) }
.faq-list { max-width:760px; margin:2rem auto 0; display:flex; flex-direction:column; gap:.85rem }
.faq-item { background:var(--card); border:1px solid var(--border-soft); border-radius:1rem; overflow:hidden; box-shadow:var(--shadow-xs); transition:box-shadow .3s ease, border-color .3s ease }
.faq-item.open { border-color:rgba(14,116,144,.25); box-shadow:var(--shadow-sm) }
.faq-q {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.25rem 1.5rem; text-align:left; font-weight:600; font-size:.98rem; color:var(--ink);
}
.faq-icon { flex-shrink:0; width:1.6rem; height:1.6rem; border-radius:50%; background:var(--surface); display:grid; place-items:center; transition:transform .35s var(--ease-out-quint), background .3s ease; color:var(--ocean); font-size:.85rem }
.faq-item.open .faq-icon { transform:rotate(45deg); background:var(--grad-ocean); color:#fff }
.faq-a { max-height:0; overflow:hidden; transition:max-height .38s var(--ease-out-quint) }
.faq-a-inner { padding:0 1.5rem 1.35rem; font-size:.9rem; color:var(--muted); line-height:1.7 }

/* ============================================================
   RESORT RULES & VISITOR INFO
   ============================================================ */
.visitor-info { padding:6.5rem 2rem; background:var(--bg) }
.vi-grid { display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2rem }
@media (min-width:640px)  { .vi-grid { grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px) { .vi-grid { grid-template-columns:repeat(3,1fr) } }
.vi-card { background:var(--surface); border:1px solid var(--border-soft); border-radius:1.1rem; padding:1.6rem 1.5rem; display:flex; gap:1rem; align-items:flex-start }
.vi-icon { width:2.6rem; height:2.6rem; border-radius:.75rem; background:var(--grad-palm); color:#fff; display:grid; place-items:center; font-size:1.1rem; flex-shrink:0 }
.vi-card h4 { font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--ink); margin-bottom:.35rem }
.vi-card p  { font-size:.85rem; color:var(--muted); line-height:1.6 }

/* ============================================================
   CONTACT
   ============================================================ */
.contact { padding:7rem 2rem; background:var(--grad-ocean); color:#fff; position:relative; overflow:hidden }
.contact-glow { position:absolute; top:-10rem; right:-10rem; width:40rem; height:40rem; border-radius:50%; background:rgba(255,224,138,.14); filter:blur(90px) }
.contact::after {
  content:""; position:absolute; bottom:-8rem; left:-6rem; width:30rem; height:30rem;
  border-radius:50%; background:rgba(255,255,255,.05); filter:blur(70px); pointer-events:none;
}
.contact-inner { position:relative; z-index:1; max-width:900px; margin:0 auto; text-align:center }
.contact-items { display:grid; grid-template-columns:1fr; gap:1.35rem; margin:2.75rem 0 2.5rem; text-align:left }
@media (min-width:640px) { .contact-items { grid-template-columns:repeat(2,1fr) } }
.cinfo { display:flex; gap:.8rem; align-items:flex-start }
.cicon { width:2.55rem; height:2.55rem; flex-shrink:0; border-radius:.8rem; background:rgba(255,224,138,.2); color:#ffe08a; display:grid; place-items:center; font-weight:700; font-size:1rem; border:1px solid rgba(255,224,138,.18) }
.ck { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em; color:#ffe08a; margin-bottom:.28rem }
.cv { font-size:.875rem; line-height:1.45; color:rgba(255,255,255,.88) }
.contact-ctas { display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--grad-footer); color:#fff; padding:4.5rem 2rem 2.5rem; position:relative; overflow:hidden }
.footer::after { content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,224,138,.5),transparent) }
.footer .container { position:relative; z-index:1 }
.footer-grid { display:grid; grid-template-columns:1fr; gap:2.75rem; margin-bottom:3.25rem }
@media (min-width:768px) { .footer-grid { grid-template-columns:1.55fr 1fr 1fr 1.35fr } }
.footer-brand .brand { margin-bottom:1.1rem }
.footer-blurb { font-size:.855rem; color:rgba(255,255,255,.55); max-width:24rem; line-height:1.75 }
.footer-h     { font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.18em; color:#ffe08a; margin-bottom:1.1rem }
.footer ul    { list-style:none; display:flex; flex-direction:column; gap:.55rem; font-size:.855rem; color:rgba(255,255,255,.65) }
.footer ul a  { transition:color .22s ease, transform .22s ease; display:inline-block }
.footer ul a:hover { color:#ffe08a; transform:translateX(5px) }
.footer .socials { display:flex; gap:.7rem; margin-top:.3rem }
.footer .socials a {
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1);
  display:grid; place-items:center; font-size:.85rem; transition:all .25s ease;
}
.footer .socials a:hover { background:#ffe08a; color:var(--ocean-deep); transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.25) }
.footer-bottom { padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.09); display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:.75rem; font-size:.72rem; color:rgba(255,255,255,.45) }
@media (min-width:768px) { .footer-bottom { flex-direction:row } }
.footer-bottom > div { display:flex; gap:1.5rem }
.footer-bottom a:hover { color:#ffe08a }

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  position:fixed; bottom:1.75rem; right:1.75rem; width:3rem; height:3rem; border-radius:50%;
  background:rgba(14,74,94,.94); backdrop-filter:blur(12px); color:#fff;
  display:grid; place-items:center; font-size:1.2rem; font-weight:700;
  border:1px solid rgba(255,255,255,.22); box-shadow:0 12px 32px -8px rgba(14,74,94,.6);
  opacity:0; transform:translateY(.5rem); pointer-events:none;
  transition:all .35s var(--ease-out-quint); z-index:40;
}
.back-to-top.show { opacity:1; transform:translateY(0); pointer-events:auto }
.back-to-top:hover { transform:translateY(-5px); box-shadow:0 20px 44px -10px rgba(14,74,94,.7), 0 0 0 7px rgba(255,224,138,.2) }

/* ============================================================
   REVEAL / STAGGER ANIMATIONS
   ============================================================ */
.reveal { opacity:0; transform:translateY(1.1rem); transition:opacity .95s var(--ease-out-quint), transform .95s var(--ease-out-quint) }
.reveal.in { opacity:1; transform:translateY(0) }
.reveal-stagger > * { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease-out-quint), transform .8s var(--ease-out-quint) }
.reveal-stagger.in > * { opacity:1; transform:translateY(0) }
.reveal-stagger.in > *:nth-child(1) { transition-delay:.05s }
.reveal-stagger.in > *:nth-child(2) { transition-delay:.12s }
.reveal-stagger.in > *:nth-child(3) { transition-delay:.19s }
.reveal-stagger.in > *:nth-child(4) { transition-delay:.26s }
.reveal-stagger.in > *:nth-child(5) { transition-delay:.33s }
.reveal-stagger.in > *:nth-child(6) { transition-delay:.40s }

[data-parallax] { transform:translate3d(0,var(--py,0px),0); will-change:transform }

/* ============================================================
   SECTION PIP INDICATORS
   ============================================================ */
.section-pips { position:fixed; right:18px; top:50%; transform:translateY(-50%); display:none; flex-direction:column; gap:13px; z-index:45 }
@media (min-width:1100px) { .section-pips { display:flex } }
.section-pips button { width:9px; height:9px; border-radius:50%; background:rgba(14,116,144,.22); border:1px solid rgba(14,116,144,.24); position:relative; transition:all .35s var(--ease-out-quint) }
.section-pips button:hover  { transform:scale(1.3); background:rgba(14,116,144,.5) }
.section-pips button.active { background:var(--palm); height:26px; border-radius:5px; box-shadow:0 0 0 4px rgba(62,142,99,.2) }
.section-pips button[data-label]::before {
  content:attr(data-label); position:absolute; right:20px; top:50%; transform:translateY(-50%) translateX(8px);
  font:600 11px/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase;
  background:#0a2e38; color:#fff; padding:6px 10px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:all .25s ease;
}
.section-pips button:hover::before { opacity:1; transform:translateY(-50%) translateX(0) }

/* ============================================================
   ACCESSIBILITY / REDUCED MOTION
   ============================================================ */
a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--palm); outline-offset:3px; border-radius:6px }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
  .float-shape { animation:none }
}

@media (max-width:768px){

  .map-popover{
    left:12px !important;
    right:12px !important;
    top:auto !important;
    bottom:16px;

    width:auto;
    max-width:none;

    border-radius:1.2rem;
  }

  .display{
    font-size:clamp(1.8rem, 7vw, 2.5rem);
    line-height:1.1;
}

  .hero-ctas{
    gap:.8rem;
  }

.hero-ctas .btn{
    padding:.7rem 1rem;
    font-size:.85rem;
}

  .hero-controls{
    bottom:44px;
  }

  .hero-controls button{
    width:40px;
    height:40px;
    font-size:18px;
  }

}