
:root{
  --navy:#002D5B;
  --navy-deep:#061D33;
  --gold:#A67C32;
  --gold-soft:#C8A66A;
  --sand:#F3E8D2;
  --sand-light:#FBF3E4;
  --stone:#D7C8AD;
  --ink:#1F2C34;
  --muted:#6D6B63;
  --white:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  background:var(--sand-light);
  color:var(--ink);
  line-height:1.65;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(circle at 15% 10%,rgba(166,124,50,.10),transparent 28%),
    radial-gradient(circle at 85% 28%,rgba(0,45,91,.08),transparent 32%),
    linear-gradient(180deg,var(--sand-light),#fffaf0 55%,var(--sand));
}
h1,h2,h3{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:500;
  line-height:1.05;
  margin:0 0 18px;
  color:var(--navy);
}
h1{font-size:clamp(48px,8vw,104px);letter-spacing:.055em}
h2{font-size:clamp(34px,5vw,66px)}
h3{font-size:27px}
p{margin:0 0 18px}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.topbar{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 34px;
  background:rgba(251,243,228,.86);
  color:var(--navy);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(166,124,50,.18);
  box-shadow:0 10px 35px rgba(6,29,51,.06);
}
.brand-lockup{display:flex;align-items:center;gap:14px}
.brand-lockup img{width:92px;height:auto}
.logo-text{
  font-family:Georgia,"Times New Roman",serif;
  letter-spacing:.18em;
  font-size:18px;
  color:var(--navy);
}
nav{display:flex;gap:19px;align-items:center;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:700}
nav a{opacity:.9}
nav a:hover{color:var(--gold)}
.cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 23px;border-radius:999px;
  background:var(--navy);color:white;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:12px;
  box-shadow:0 18px 38px rgba(0,45,91,.22);
  border:1px solid rgba(255,255,255,.2);
}
.cta.gold{background:var(--gold);box-shadow:0 18px 38px rgba(166,124,50,.22)}
.cta.ghost{background:transparent;color:white;border:1px solid rgba(255,255,255,.72)}
.hero{
  min-height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  color:white;
}
.hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.04);
  transform:scale(1.03);
  animation:slowZoom 20s ease-in-out infinite alternate;
}
.hero:after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,29,51,.82),rgba(6,29,51,.38),rgba(6,29,51,.08)),
    linear-gradient(180deg,rgba(0,0,0,.18),transparent 42%,rgba(0,0,0,.35));
}
@keyframes slowZoom{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.hero-content{
  position:relative;z-index:2;max-width:930px;padding:165px 7vw 95px;
}
.eyebrow{
  letter-spacing:.28em;text-transform:uppercase;font-size:12px;font-weight:900;color:var(--gold-soft);margin-bottom:18px
}
.hero h1{color:white;text-shadow:0 18px 65px rgba(0,0,0,.38)}
.hero p{
  font-size:clamp(18px,2.35vw,29px);
  max-width:760px;color:#fff8ea;
}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.section{padding:96px 7vw}
.container{max-width:1200px;margin:0 auto}
.intro{
  max-width:900px;margin:0 auto 46px;text-align:center
}
.intro p{font-size:19px;color:var(--muted)}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:58px;align-items:center}
.card{
  background:rgba(255,250,240,.86);
  border:1px solid rgba(166,124,50,.18);
  border-radius:34px;
  padding:38px;
  box-shadow:0 28px 75px rgba(6,29,51,.09);
}
.photo{
  border-radius:34px;overflow:hidden;
  box-shadow:0 35px 90px rgba(6,29,51,.20);
  border:1px solid rgba(255,255,255,.35);
}
.photo img{height:585px;width:100%;object-fit:cover}
.signature{
  font-family:Georgia,"Times New Roman",serif;
  color:var(--gold);
  font-size:28px;
  margin-top:18px;
}
.pill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:30px}
.pill{
  background:white;border:1px solid rgba(0,45,91,.10);
  border-radius:20px;padding:17px 18px;font-weight:800;color:var(--navy);
  box-shadow:0 12px 30px rgba(0,45,91,.05)
}
.band{
  background:
    linear-gradient(rgba(0,45,91,.88),rgba(0,45,91,.88)),
    url("images/lulu-beach-5.jpeg");
  background-size:cover;background-position:center;
  color:white;text-align:center;padding:96px 7vw;
}
.band h2{color:white}
.band p{max-width:830px;margin:0 auto 26px;color:#fff4df;font-size:20px}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.feature{
  background:rgba(255,255,255,.72);
  border-radius:28px;padding:29px;border:1px solid rgba(166,124,50,.16);
  box-shadow:0 18px 55px rgba(6,29,51,.06)
}
.feature h3{font-size:25px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gallery-grid img{
  height:315px;width:100%;object-fit:cover;border-radius:24px;cursor:pointer;
  transition:transform .3s ease, filter .3s ease;
}
.gallery-grid img:hover{transform:translateY(-4px);filter:saturate(1.05)}
.gallery-grid img:nth-child(1),.gallery-grid img:nth-child(4){grid-column:span 2}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}
.price-card{
  background:white;border-radius:32px;padding:40px;border:1px solid rgba(166,124,50,.18);
  box-shadow:0 24px 65px rgba(6,29,51,.08);position:relative;overflow:hidden
}
.price-card:before{
  content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(90deg,var(--navy),var(--gold));
}
.price{
  font-size:60px;font-family:Georgia,"Times New Roman",serif;color:var(--navy);
  margin:10px 0
}
.list{padding-left:20px;margin:12px 0 0}
.layout{
  background:white;border-radius:34px;padding:36px;
  border:1px solid rgba(166,124,50,.18);
  box-shadow:0 24px 70px rgba(6,29,51,.08)
}
.beach-map{display:grid;gap:18px;margin-top:22px}
.row{display:grid;grid-template-columns:repeat(9,1fr);gap:10px}
.seat{
  padding:13px 6px;text-align:center;border-radius:14px;background:#ECF4EE;color:#244937;font-weight:800;
  border:1px solid #C9DFD4;font-size:13px
}
.seat.booked{background:#F4E2DC;color:#743325;border-color:#EDC6BC}
.walkway{text-align:center;color:var(--muted);font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:900}
.form{display:grid;gap:14px}
input,select,textarea{
  width:100%;padding:15px 16px;border-radius:16px;border:1px solid rgba(0,45,91,.18);
  font:inherit;background:white;color:var(--ink)
}
textarea{min-height:120px}
.page-hero{
  min-height:54vh;
  display:flex;flex-direction:column;justify-content:end;
  padding:170px 7vw 72px;
  background:linear-gradient(rgba(6,29,51,.54),rgba(6,29,51,.68)),var(--bg);
  background-size:cover;background-position:center;color:white
}
.page-hero h1{color:white}
.page-hero p{font-size:23px;max-width:820px;color:#fff4df}
.faq-item{
  background:white;padding:26px;border-radius:22px;margin-bottom:14px;
  border:1px solid rgba(166,124,50,.16);
}
.floating{
  position:fixed;right:18px;bottom:18px;z-index:1001;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end
}
.floating a{
  background:var(--navy);color:white;padding:12px 16px;border-radius:999px;font-weight:900;font-size:12px;
  box-shadow:0 14px 34px rgba(6,29,51,.25);letter-spacing:.05em;text-transform:uppercase
}
.footer{background:var(--navy-deep);color:white;padding:58px 7vw}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;max-width:1200px;margin:auto}
.footer h3{color:white}
.small{color:#dce3e6;font-size:14px}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:2000;padding:30px}
.lightbox img{max-height:88vh;border-radius:18px}
.logo-panel{
  background:var(--sand);
  border-radius:34px;
  padding:35px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 28px 75px rgba(6,29,51,.09);
}
.logo-panel img{width:100%;max-width:520px;border-radius:22px}
@media(max-width:920px){
  .topbar{display:block;text-align:center;padding:12px 16px}
  .brand-lockup{justify-content:center}
  .brand-lockup img{width:78px}
  nav{justify-content:center;overflow:auto;gap:13px;margin-top:10px;font-size:11px;padding-bottom:4px}
  .split,.footer-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gallery-grid img:nth-child(n){grid-column:span 1;height:230px}
  .row{grid-template-columns:repeat(3,1fr)}
  .photo img{height:430px}
  .floating{left:12px;right:12px}
  .floating a{flex:1;text-align:center}
}
