:root{
  --navy: #2D2B70;
  --navy-dark: #0a0a24;
  --navy-darker: #06061a;
  --red: #EB1E24;
  --cream: #F7F5F0;
  --white: #ffffff;
  --gold: #C9A24B;
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;
  --max-width: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--navy-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
section{position:relative;}
.section-inner{max-width:var(--max-width); margin:0 auto; padding:80px 24px;}

.eyebrow{
  font-size:13px; letter-spacing:2.5px; text-transform:uppercase;
  color: var(--red); font-weight:700; margin-bottom:12px;
}
.eyebrow.center{text-align:center;}
.section-title{
  font-family:var(--font-serif); font-weight:600; font-size:clamp(28px,4vw,44px);
  color:var(--navy-dark); margin-bottom:18px; line-height:1.2;
}
.section-title.center{text-align:center;}
.section-lede{
  max-width:680px; color:#4a4a5a; font-size:17px;
}
.section-lede.center{margin:0 auto 40px; text-align:center;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:100px; font-weight:600; font-size:14px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--red); color:#fff; box-shadow:0 8px 20px rgba(235,30,36,.35);}
.btn-primary:hover{background:#d11117;}
.btn-outline{border:1.5px solid rgba(255,255,255,.7); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);}
.btn-outline-dark{border:1.5px solid var(--navy); color:var(--navy);}
.btn-outline-dark:hover{background:var(--navy); color:#fff;}
.btn-whatsapp{background:#25D366; color:#fff;}
.btn-whatsapp:hover{background:#1ebe5b;}

/* Topbar */
.topbar{
  background:var(--navy-darker); color:#cfd0e6; font-size:13px;
  text-align:center; padding:7px 12px;
}
.topbar a{opacity:.9;}
.topbar a:hover{opacity:1; text-decoration:underline;}
.topbar .dot{margin:0 12px; opacity:.5;}

/* Nav */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,36,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-inner{
  max-width:var(--max-width); margin:0 auto; padding:10px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand-logo{height:52px; width:auto;}
.nav-links{display:flex; gap:32px;}
.nav-links a{
  color:#e9e9f4; font-size:14.5px; font-weight:500; position:relative;
}
.nav-links a:hover{color:#fff;}
.nav-cta{flex-shrink:0;}
.hamburger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;
}
.hamburger span{width:24px; height:2px; background:#fff; display:block;}

/* Hero */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; color:#fff;
}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  filter:saturate(1.05);
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(6,6,26,.55) 0%, rgba(6,6,26,.72) 55%, rgba(6,6,26,.92) 100%);
}
.hero-content{
  position:relative; z-index:2; text-align:center; max-width:760px; padding:0 24px;
}
.hero .eyebrow{color:var(--gold); justify-content:center; display:flex;}
.hero h1{
  font-family:var(--font-serif); font-weight:700; font-size:clamp(52px,10vw,110px);
  letter-spacing:2px; line-height:1;
}
.tagline{
  font-family:var(--font-serif); font-style:italic; font-size:clamp(18px,2.4vw,26px);
  color:var(--gold); margin-top:10px;
}
.hero-desc{
  margin:22px auto 34px; max-width:560px; color:#dcdce8; font-size:16px;
}
.hero-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.scroll-cue{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  color:#fff; font-size:20px; opacity:.7; animation:bob 2s infinite;
  z-index:2;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

/* Stats */
.stats{background:var(--navy-dark); color:#fff;}
.stats-inner{
  max-width:var(--max-width); margin:0 auto; padding:44px 24px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;
}
.stat-num{
  display:block; font-family:var(--font-serif); font-weight:700; font-size:clamp(24px,3vw,34px);
  color:var(--gold);
}
.stat-label{display:block; font-size:13px; color:#b9baD0; margin-top:6px; letter-spacing:.3px;}

/* Framed image (story / flavours) */
.framed-image{
  border-radius:18px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(10,10,36,.35);
  border:1px solid rgba(10,10,36,.06);
}
.story{background:var(--cream);}
.flavours{background:var(--navy-dark); color:#fff;}
.flavours .section-title{color:#fff;}
.flavours .section-lede{color:#c9cadd;}

/* Menu gallery */
.menu{background:var(--cream);}
.menu-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:20px;
}
.menu-grid figure{
  cursor:pointer; border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 10px 24px -12px rgba(10,10,36,.25); transition:transform .2s ease, box-shadow .2s ease;
}
.menu-grid figure:hover{transform:translateY(-6px); box-shadow:0 18px 32px -14px rgba(10,10,36,.35);}
.menu-grid img{aspect-ratio:3/4; object-fit:cover; width:100%;}
.menu-grid figcaption{
  padding:12px 14px; font-size:14px; font-weight:600; color:var(--navy-dark);
  border-top:1px solid #f0efe8;
}

/* Gallery */
.gallery{background:var(--navy-dark); color:#fff;}
.gallery .section-title{color:#fff;}
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.gallery-grid img{
  border-radius:14px; aspect-ratio:3/4; object-fit:cover; width:100%;
  transition:transform .3s ease;
}
.gallery-grid img:hover{transform:scale(1.03);}

/* Locations */
.locations{background:var(--cream);}
.loc-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
}
.loc-card{
  background:#fff; border-radius:18px; padding:36px; box-shadow:0 14px 30px -18px rgba(10,10,36,.25);
  border:1px solid #f0efe8;
}
.loc-card h3{
  font-family:var(--font-serif); font-size:26px; color:var(--navy); margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.flag{
  background:var(--red); color:#fff; font-size:11px; font-family:var(--font-sans);
  font-weight:700; padding:4px 10px; border-radius:100px; letter-spacing:.5px;
}
.loc-address{color:#4a4a5a; margin-bottom:10px;}
.loc-phone a{font-weight:600; color:var(--navy);}
.loc-phone a:hover{text-decoration:underline;}
.loc-actions{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap;}

/* Footer */
.footer{
  background:var(--navy-darker); color:#9a9bbd; text-align:center; padding:56px 24px;
}
.footer-logo{height:70px; width:auto; margin:0 auto 14px; filter:brightness(0) invert(1);}
.footer-tagline{font-family:var(--font-serif); font-style:italic; color:var(--gold); margin-bottom:16px;}
.footer-copy{font-size:13px;}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(6,6,26,.94); z-index:1000;
  display:none; align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{display:flex;}
.lightbox img{max-height:92vh; max-width:92vw; border-radius:8px;}
.lightbox-close{
  position:absolute; top:24px; right:28px; background:none; border:none; color:#fff;
  font-size:26px; cursor:pointer;
}

/* Floating WhatsApp */
.fab-whatsapp{
  position:fixed; bottom:24px; right:24px; z-index:90;
  background:#25D366; color:#fff; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(37,211,102,.45);
}

/* Responsive */
@media (max-width:900px){
  .nav-links{
    position:fixed; top:64px; left:0; right:0; background:var(--navy-darker);
    flex-direction:column; padding:20px 24px; gap:18px;
    transform:translateY(-150%); opacity:0; transition:all .25s ease; pointer-events:none;
  }
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .hamburger{display:flex;}
  .nav-cta .btn span{display:none;}
  .stats-inner{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .loc-grid{grid-template-columns:1fr;}
  .topbar{font-size:11.5px;}
}
@media (max-width:520px){
  .nav-cta{display:none;}
}