/* css/style.css */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#B8922A;
  --gold-light:#D4A940;
  --gold-pale:#FDF6E3;
  --gold-border:rgba(184,146,42,0.2);
  --gold-dim:rgba(184,146,42,0.08);
  --navy:#0A2240;
  --navy-mid:#153660;
  --blue:#1565C0;
  --blue-light:#1976D2;
  --black:#0D0D0D;
  --text:#1A1A1A;
  --text-mid:#3A3A3A;
  --text-muted:#6B7280;
  --white:#FFFFFF;
  --offwhite:#F9FAFB;
  --light:#F3F6FA;
  --border:#E5E9F0;
  --red:#C0392B;
  --trans:0.28s cubic-bezier(0.4,0,0.2,1);
}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;font-weight:400;background:var(--white);color:var(--text);overflow-x:hidden;}

/* NAV */
nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 64px;
  height:72px;
  background:rgba(255,255,255,0.97);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);
  transition:box-shadow var(--trans);
}

nav.scrolled{
  box-shadow:0 2px 24px rgba(10,34,64,0.09);
}

.nav-logo-img{
  height:40px;
  width:auto;
  display:block;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:36px;
  list-style:none;
}

.nav-links a{
  font-size:12px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--navy);
  text-decoration:none;
  position:relative;
  transition:color var(--trans);
}

.nav-links a::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:0;
  height:2px;
  background:var(--gold);
  transition:width var(--trans);
}

.nav-links a:hover{
  color:var(--blue);
}

.nav-links a:hover::after{
  width:100%;
}

.nav-join{
  background:var(--navy) !important;
  color:var(--white) !important;
  padding:10px 26px;
  letter-spacing:0.1em !important;
}

.nav-join::after{
  display:none !important;
}

.nav-join:hover{
  background:var(--gold) !important;
}

.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:8px;
  background:none;
  border:none;
}

.hamburger span{
  display:block;
  width:24px;
  height:2px;
  background:var(--navy);
  transition:var(--trans);
}

/* DRAWER */
.drawer{
  position:fixed;
  inset:0;
  z-index:2000; /* higher than nav */
  background:rgba(10,34,64,0.98);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:28px;

  /* hidden state */
  transform:translateX(100%);
  visibility:hidden;
  pointer-events:none;

  transition:
    transform 0.4s cubic-bezier(0.4,0,0.2,1),
    visibility 0.4s ease;
}

.drawer.open{
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
}

.drawer-close{
  position:absolute;
  top:24px;
  right:28px;
  font-size:24px;
  color:rgba(255,255,255,0.5);
  background:none;
  border:none;
  cursor:pointer;
  transition:color var(--trans);
}

.drawer-close:hover{
  color:var(--gold);
}

.drawer a{
  font-family:'Playfair Display',serif;
  font-size:30px;
  font-weight:700;
  color:var(--white);
  text-decoration:none;
  transition:color 0.2s;
}

.drawer a:hover{
  color:var(--gold);
}

.drawer-join{
  margin-top:8px;
  background:var(--gold);
  padding:12px 32px;
  border-radius:0;
  font-size:14px !important;
}
/* HERO */
.hero{
  position:relative;min-height:100vh;
  display:grid;grid-template-columns:1fr 1fr;
  padding-top:72px;overflow:hidden;
}
.hero-left{
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 60px 80px 80px;background:var(--white);
  position:relative;z-index:2;
}
.hero-pre{
  display:inline-flex;align-items:center;gap:12px;
  font-size:10px;font-weight:700;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:24px;
  opacity:0;animation:fadeUp 0.7s 0.2s forwards;
}
.hero-pre::before{content:'';display:block;width:36px;height:2px;background:var(--gold);}
.hero-h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(44px,5.2vw,74px);font-weight:700;
  line-height:1.06;color:var(--navy);margin-bottom:24px;
  opacity:0;animation:fadeUp 0.7s 0.35s forwards;
}
.hero-h1 em{font-style:italic;color:var(--gold);}
.hero-sub{
  font-size:16px;font-weight:300;line-height:1.8;
  color:var(--text-muted);max-width:460px;margin-bottom:44px;
  opacity:0;animation:fadeUp 0.7s 0.5s forwards;
}
.hero-actions{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  opacity:0;animation:fadeUp 0.7s 0.65s forwards;
}
.btn-navy{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--navy);color:var(--white);
  padding:14px 32px;font-size:12px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  text-decoration:none;border:2px solid var(--navy);
  transition:background var(--trans),border-color var(--trans),transform 0.2s;
}
.btn-navy:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-2px);}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--navy);
  padding:12px 30px;font-size:12px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  text-decoration:none;border:2px solid var(--border);
  transition:border-color var(--trans),color var(--trans);
}
.btn-outline:hover{border-color:var(--navy);}
.arr::after{content:' →';display:inline-block;transition:transform 0.2s;}
.arr:hover::after{transform:translateX(4px);}

.hero-stats{
  display:flex;margin-top:52px;padding-top:36px;
  border-top:1px solid var(--border);
  opacity:0;animation:fadeUp 0.7s 0.8s forwards;
}
.stat{flex:1;padding:0 24px;}
.stat:first-child{padding-left:0;}
.stat+.stat{border-left:1px solid var(--border);}
.stat-n{font-family:'Playfair Display',serif;font-size:34px;font-weight:700;color:var(--navy);display:block;line-height:1;}
.stat-l{font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);display:block;margin-top:5px;}

.hero-right{position:relative;overflow:hidden;min-height:calc(100vh - 72px);}
.hero-right img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  transform:scale(1.06);animation:zoomOut 10s ease-out forwards;
}
.hero-right-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,34,64,0.75) 0%,transparent 55%);
}
.hero-caption{position:absolute;bottom:0;left:0;right:0;padding:36px 36px 32px;}
.hero-quote{
  font-family:'Playfair Display',serif;
  font-size:17px;font-style:italic;color:var(--white);line-height:1.5;margin-bottom:8px;
}
.hero-attr{font-size:11px;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-light);}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes zoomOut{from{transform:scale(1.06);}to{transform:scale(1.0);}}

/* MARQUEE */
.marquee{background:var(--navy);padding:14px 0;overflow:hidden;white-space:nowrap;}
.marquee-track{display:inline-flex;animation:mroll 38s linear infinite;}
.marquee-track:hover{animation-play-state:paused;}
.marquee-item{
  display:inline-flex;align-items:center;gap:18px;
  font-size:11px;font-weight:600;letter-spacing:0.16em;
  text-transform:uppercase;color:rgba(255,255,255,0.65);padding:0 36px;
}
.mdot{width:4px;height:4px;border-radius:50%;background:var(--gold);flex-shrink:0;}
@keyframes mroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* TRUST */
.trust{
  background:var(--light);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:28px 80px;display:flex;justify-content:center;gap:56px;flex-wrap:wrap;
}
.trust-item{
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:600;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--text-muted);
}
.trust-item svg{width:18px;height:18px;stroke:var(--gold);fill:none;stroke-width:1.5;flex-shrink:0;}

/* SECTIONS */
.sec{padding:96px 80px;}
.sec-alt{background:var(--light);}
.sec-navy{background:var(--navy);}
.lbl{
  display:inline-flex;align-items:center;gap:12px;
  font-size:10px;font-weight:700;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:16px;
}
.lbl::before{content:'';width:28px;height:2px;background:var(--gold);}
.h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(34px,4vw,52px);font-weight:700;
  line-height:1.1;color:var(--navy);
}
.h2 em{font-style:italic;color:var(--gold);}
.h2-w{color:var(--white);}
.subp{
  font-size:16px;font-weight:300;line-height:1.8;
  color:var(--text-muted);margin-top:14px;max-width:520px;
}
.subp-w{color:rgba(255,255,255,0.55);}
.row-btw{
  display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:48px;gap:20px;flex-wrap:wrap;
}
.va{
  font-size:11px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--blue);text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;
  transition:color var(--trans);white-space:nowrap;
}
.va::after{content:'→';transition:transform 0.2s;}
.va:hover{color:var(--gold);}
.va:hover::after{transform:translateX(4px);}
.va-w{color:rgba(255,255,255,0.55);}
.va-w:hover{color:var(--gold);}

/* SQUARE DESTINATIONS GRID (mobile responsive squares) */
.dest-grid-square{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:4px;
}
.square-dest{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  display:block;
  text-decoration:none;
  background:var(--light);
}
.square-dest img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94);
}
.square-dest:hover img{transform:scale(1.06);}
.square-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,34,64,0.85) 0%,rgba(10,34,64,0.08) 55%,transparent 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px 20px;
  transition:background var(--trans);
}
.square-dest:hover .square-overlay{
  background:linear-gradient(to top,rgba(10,34,64,0.92) 0%,rgba(10,34,64,0.2) 65%,transparent 100%);
}
.square-overlay .dn{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--white);line-height:1.2;}
.square-overlay .dd{font-size:10px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-light);margin-top:4px;}
.darr{
  position:absolute;right:16px;bottom:22px;
  width:32px;height:32px;border:1px solid rgba(255,255,255,0.25);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--white);font-size:13px;
  opacity:0;transform:translateX(-6px);
  transition:opacity 0.3s,transform 0.3s,border-color 0.3s;
}
.square-dest:hover .darr{opacity:1;transform:translateX(0);border-color:var(--gold);}

/* PLACES SQUARE GRID */
.places-square-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:4px;
}
.place-square{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  display:block;
  text-decoration:none;
  background:var(--light);
}
.place-square img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.65s cubic-bezier(0.25,0.46,0.45,0.94);
}
.place-square:hover img{transform:scale(1.07);}
.place-square-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,34,64,0.88) 0%,rgba(10,34,64,0.05) 55%,transparent 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:22px 18px;
}
.place-square:hover .place-square-overlay{
  background:linear-gradient(to top,rgba(10,34,64,0.95) 0%,rgba(10,34,64,0.2) 65%,transparent 100%);
}
.place-name{
  font-family:'Playfair Display',serif;
  font-size:18px;font-weight:700;color:var(--white);line-height:1.2;
}
.place-region{
  font-size:10px;font-weight:600;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--gold-light);margin-top:4px;
}
.place-arrow{
  position:absolute;right:14px;bottom:20px;
  width:30px;height:30px;border:1px solid rgba(255,255,255,0.25);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--white);font-size:12px;
  opacity:0;transform:translateX(-6px);
  transition:opacity 0.3s,transform 0.3s,border-color 0.3s;
}
.place-square:hover .place-arrow{opacity:1;transform:translateX(0);border-color:var(--gold);}

/* CATEGORIES */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
.cc{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:36px 12px;
  text-decoration:none;color:var(--navy);
  background:var(--white);border:1px solid var(--border);
  position:relative;overflow:hidden;
  transition:color var(--trans),border-color var(--trans),background var(--trans),transform 0.2s,box-shadow 0.2s;
}
.cc:hover{background:var(--navy);color:var(--white);border-color:var(--navy);transform:translateY(-3px);box-shadow:0 8px 28px rgba(10,34,64,0.14);}
.cc:hover svg{stroke:var(--white);}
.cc svg{width:28px;height:28px;stroke:var(--navy);fill:none;stroke-width:1.5;transition:stroke var(--trans);}
.ct{font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;text-align:center;}

/* ALL DESTINATIONS LIST */
.dest-list-section{background:var(--navy);padding:80px 80px;}
.dest-columns{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px 0;
}
@media(max-width:1200px){.dest-columns{grid-template-columns:repeat(3,1fr);}}
@media(max-width:900px){.dest-columns{grid-template-columns:repeat(2,1fr);}}
.dest-list-item{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  text-decoration:none;color:rgba(255,255,255,0.55);
  font-size:14px;font-weight:400;
  transition:color var(--trans),background var(--trans),padding-left var(--trans);
}
.dest-list-item:hover{
  color:var(--white);background:rgba(255,255,255,0.04);padding-left:26px;
}
.dest-list-item::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--gold);opacity:0.4;flex-shrink:0;
  transition:opacity var(--trans);
}
.dest-list-item:hover::before{opacity:1;}

/* CTA */
.cta-sec{
  background:var(--navy);padding:100px 80px;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px;
}
@media(max-width:1200px){.cta-sec{grid-template-columns:1fr;gap:40px;padding:80px 48px;}}
.cta-h2{font-family:'Playfair Display',serif;font-size:clamp(34px,4vw,52px);font-weight:700;line-height:1.1;color:var(--white);}
.cta-h2 em{font-style:italic;color:var(--gold);}
.cta-p{font-size:16px;font-weight:300;line-height:1.8;color:rgba(255,255,255,0.55);margin-bottom:32px;}
.btn-gold-solid{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold);color:var(--white);
  padding:14px 32px;font-size:12px;font-weight:600;
  letter-spacing:0.1em;text-transform:uppercase;
  text-decoration:none;border:2px solid var(--gold);
  transition:background var(--trans),color var(--trans),transform 0.2s;
}
.btn-gold-solid:hover{background:transparent;color:var(--gold);transform:translateY(-2px);}
.btn-ghost-w{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:rgba(255,255,255,0.6);
  padding:12px 28px;font-size:12px;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;
  text-decoration:none;border:2px solid rgba(255,255,255,0.2);
  transition:border-color var(--trans),color var(--trans);
}
.btn-ghost-w:hover{border-color:var(--gold);color:var(--gold);}

/* FOOTER */
footer{background:var(--navy);border-top:1px solid rgba(255,255,255,0.06);}
.ft{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:60px;padding:80px 80px 60px;border-bottom:1px solid rgba(255,255,255,0.07);}
@media(max-width:1200px){.ft{grid-template-columns:1fr 1fr;gap:40px;padding:60px 48px 48px;}}
@media(max-width:900px){.ft{grid-template-columns:1fr;padding:48px 28px 40px;gap:32px;}}
.ft-about{font-size:14px;font-weight:300;line-height:1.85;color:rgba(255,255,255,0.38);max-width:280px;margin:16px 0 24px;}
.social{display:flex;gap:10px;}
.sbtn{
  width:36px;height:36px;border:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:rgba(255,255,255,0.35);
  transition:border-color var(--trans),color var(--trans);
}
.sbtn:hover{border-color:var(--gold);color:var(--gold);}
.sbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;}
.fh{font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;}
.flinks{list-style:none;display:flex;flex-direction:column;gap:12px;}
.flinks a{font-size:13px;font-weight:300;color:rgba(255,255,255,0.38);text-decoration:none;transition:color var(--trans);}
.flinks a:hover{color:var(--white);}
.fb{display:flex;justify-content:space-between;align-items:center;padding:22px 80px;flex-wrap:wrap;gap:12px;}
@media(max-width:900px){.fb{padding:20px 28px;}}
.fcopy{font-size:12px;color:rgba(255,255,255,0.22);}
.flegal{display:flex;gap:20px;}
.flegal a{font-size:11px;color:rgba(255,255,255,0.22);text-decoration:none;transition:color var(--trans);}
.flegal a:hover{color:rgba(255,255,255,0.7);}

/* SCROLL REVEAL */
.rev{opacity:0;transform:translateY(28px);transition:opacity 0.65s,transform 0.65s;}
.rev.in{opacity:1;transform:translateY(0);}
.rev-d1{transition-delay:0.1s;}

/* RESPONSIVE GLOBAL */
@media(max-width:1200px){
  nav{padding:0 40px;}
  .sec{padding:80px 48px;}
  .trust{padding:26px 48px;gap:36px;}
  .hero-left{padding:60px 40px 60px 48px;}
  .dest-list-section{padding:80px 48px;}
  .dest-grid-square{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));}
  .places-square-grid{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));}
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;}
  .hero-left{padding:80px 32px 60px;}
  .hero-right{min-height:55vw;}
  nav{padding:0 28px;}
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .sec{padding:64px 28px;}
  .trust{padding:22px 28px;gap:20px;}
  .dest-list-section{padding:64px 28px;}
  .dest-grid-square{grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));}
  .places-square-grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));}
  .hero-stats{flex-wrap:wrap;}
  .stat{min-width:130px;}
}