/* ============ TOKENS ============ */
:root{
  --teal:#1B7A7A;
  --teal-dark:#0E3D3D;
  --teal-night:#0A2422;
  --lime:#8BC53F;
  --coral:#FF5A5F;
  --cream:#F4E9D8;
  --paper:#FBF6EC;
  --charcoal:#2B2B2B;
  --tangerine:#F2994A;

  --display: Georgia, 'Times New Roman', serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--body);
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{width:min(1180px, calc(100% - 48px)); margin:0 auto;}
.section{padding:120px 0;}
.eyebrow{
  font-family:var(--mono); font-size:12px; letter-spacing:3px;
  text-transform:uppercase; color:var(--teal); font-weight:700; margin:0 0 14px;
}
.eyebrow.center{text-align:center;}
h2{
  font-family:var(--display); font-weight:700; font-size:clamp(34px,4.5vw,54px);
  line-height:1.08; margin:0 0 20px; color:var(--charcoal);
}
h2.center{text-align:center;}
.body-copy{font-size:16px; line-height:1.7; color:#4a453d; max-width:520px;}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 26px; border-radius:999px; font-weight:700; font-size:14px;
  border:2px solid var(--charcoal); transition:transform .25s ease, background .25s ease, color .25s ease;
}
.btn-dark{background:var(--charcoal); color:var(--paper);}
.btn-dark:hover{transform:translateY(-2px); background:var(--teal); border-color:var(--teal);}
.btn-outline{background:transparent; color:var(--paper); border-color:var(--paper);}
.btn-outline:hover{transform:translateY(-2px); background:var(--paper); color:var(--charcoal);}
.btn-pill{padding:11px 20px; font-size:13px; border-color:var(--charcoal);}
.btn-pill:hover{background:var(--charcoal); color:var(--paper);}

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:20px 0;
  transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
}
.nav.scrolled{
  background:rgba(251,246,236,0.92);
  backdrop-filter:blur(10px);
  padding:12px 0;
  box-shadow:0 6px 24px rgba(0,0,0,0.08);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:700; font-size:20px; color:var(--paper);}
.nav.scrolled .brand{color:var(--charcoal);}
.brand-mark{width:38px; height:38px; border-radius:50%;}
.nav-links{display:flex; gap:28px; font-size:14px; font-weight:700; color:var(--paper);}
.nav.scrolled .nav-links{color:var(--charcoal);}
.nav-links a{opacity:.85; transition:opacity .2s ease;}
.nav-links a:hover{opacity:1;}
.nav .btn-pill{color:var(--paper); border-color:var(--paper);}
.nav.scrolled .btn-pill{color:var(--charcoal); border-color:var(--charcoal);}
@media(max-width:720px){.nav-links{display:none;}}

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  overflow:hidden; color:var(--paper);
}
.hero-bg{
  position:absolute; inset:-40px 0 0 0; background-size:cover; background-position:center;
  will-change:transform;
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,36,34,.35) 0%, rgba(10,36,34,.55) 55%, rgba(10,36,34,.92) 100%);
}
.hero-inner{position:relative; z-index:2; padding-bottom:110px;}
.hero-title{font-family:var(--display); font-weight:700; font-size:clamp(38px,6.4vw,84px); line-height:1.02; margin:10px 0 22px;}
.hero-title .line{display:block; overflow:hidden;}
.hero-title .accent em{font-style:normal; color:var(--lime);}
.lede{max-width:560px; font-size:clamp(20px,2.6vw,30px); line-height:1.45; color:#e8e2d3; margin:0 0 34px;}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap;}

.scroll-cue{
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  width:34px; height:34px; color:var(--paper); z-index:2;
  animation:bob 2.2s ease-in-out infinite;
}
.scroll-cue svg{width:100%; height:100%;}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

.neon-badge{
  position:absolute; top:110px; right:5%; z-index:3;
  display:flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:999px;
  border:1.5px solid rgba(214,240,94,.7);
  color:var(--lime); font-family:var(--display); font-style:italic; font-weight:700; font-size:15px;
  letter-spacing:1px;
  text-shadow:0 0 6px var(--lime), 0 0 16px rgba(139,197,63,.8);
  box-shadow:0 0 18px rgba(139,197,63,.25) inset;
  animation:flicker 5s infinite;
}
.neon-dot{width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime);}
@keyframes flicker{
  0%,19%,21%,23%,80%,100%{opacity:1;}
  20%,22%,24%,25%{opacity:.4;}
  26%{opacity:1;}
}
@media(max-width:720px){.neon-badge{top:88px; right:20px; font-size:12px; padding:8px 14px;}}

/* ============ TICKER ============ */
.ticker{
  background:var(--teal-dark); color:var(--cream); overflow:hidden;
  padding:16px 0; white-space:nowrap;
}
.ticker-track{
  display:inline-flex; gap:22px; align-items:center;
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  animation:scroll-left 26s linear infinite;
}
.ticker .dot{color:var(--coral);}
@keyframes scroll-left{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ============ REVEAL ANIMATION ============ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .7s ease;
  transition-delay:calc(var(--d,0) * 0.09s);
}
.reveal.in-view{opacity:1; transform:none;}

/* ============ ABOUT ============ */
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center;}
.stat-row{display:flex; gap:36px; margin-top:34px;}
.stat b{display:block; font-family:var(--display); font-size:28px; color:var(--teal);}
.stat span{font-size:12px; color:#7a7166; text-transform:uppercase; letter-spacing:1px;}
.about-art{position:relative; display:flex; align-items:center; justify-content:center; min-height:340px;}
.badge-float{width:260px; animation:float 5s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-16px) rotate(2deg);}}
.leaf{position:absolute; border-radius:50% 0 50% 50%; opacity:.5;}
.leaf-a{width:120px; height:120px; background:var(--lime); top:-10px; left:0; animation:drift 7s ease-in-out infinite;}
.leaf-b{width:80px; height:80px; background:var(--coral); bottom:0; right:10px; animation:drift 6s ease-in-out infinite reverse;}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0deg);}50%{transform:translate(10px,-14px) rotate(12deg);}}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;} .about-art{order:-1;}}

/* ============ MENU ============ */
.menu{background:var(--teal-night); color:var(--paper);}
.menu .eyebrow{color:var(--lime);}
.menu h2{color:var(--paper);}
.menu-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:56px;
}
.menu-card{
  background:rgba(251,246,236,0.05);
  border:1px solid rgba(251,246,236,0.15);
  border-radius:20px; padding:26px;
  transition:transform .35s ease, background .35s ease, border-color .35s ease;
}
.menu-card:hover{
  transform:translateY(-10px);
  background:rgba(251,246,236,0.09);
  border-color:var(--accent);
}
.menu-card-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.menu-icon{font-size:26px;}
.menu-price{font-family:var(--mono); font-weight:700; color:var(--accent);}
.menu-card h3{font-family:var(--display); font-size:21px; margin:0 0 8px;}
.menu-card p{font-size:13.5px; line-height:1.6; color:#cfd6d1; margin:0;}
@media(max-width:900px){.menu-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.menu-grid{grid-template-columns:1fr;}}

.menu-upsell{
  display:flex; align-items:center; justify-content:center; gap:16px;
  flex-wrap:wrap; margin:48px auto 0; max-width:fit-content;
  padding:22px 42px; border:1px solid var(--lime); border-radius:999px;
  background:rgba(139,197,63,0.08);
  font-size:20px; font-weight:700; color:var(--paper); text-decoration:none;
  transition:border-color .3s ease, background .3s ease, transform .3s ease;
}
.menu-upsell:hover{background:rgba(139,197,63,0.16); transform:translateY(-3px);}
.menu-upsell-logo{height:22px; width:auto;}

/* ============ VISIT ============ */
.visit-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center;}
.info-list{margin:30px 0 34px; border-top:1px solid rgba(43,43,43,.15);}
.info-row{display:flex; gap:18px; padding:16px 0; border-bottom:1px solid rgba(43,43,43,.15); font-size:14.5px;}
.info-label{flex:0 0 100px; font-weight:700; color:var(--teal); font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:1px; padding-top:2px;}
.visit-sign{
  background:var(--charcoal); border-radius:24px; padding:60px 30px;
  display:flex; justify-content:center;
}
.sign-post{display:flex; flex-direction:column; gap:18px; align-items:center;}
.sign-post span{
  font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:2px;
  color:var(--paper);
  text-shadow:0 0 6px rgba(244,233,216,.6), 0 0 18px rgba(139,197,63,.5);
  animation:flicker 6s infinite;
}
.sign-post span:nth-child(2){animation-delay:.4s;}
.sign-post span:nth-child(3){animation-delay:.8s;}
@media(max-width:820px){.visit-grid{grid-template-columns:1fr;}}

/* ============ FOOTER ============ */
.footer{background:var(--teal-dark); color:var(--cream); padding:44px 0;}
.footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.footer .brand{color:var(--paper); font-size:17px;}
.footer p{margin:0; font-size:13px; opacity:.8;}
.social{display:flex; gap:14px;}
.social a{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(244,233,216,.4);
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
  transition:background .2s ease, border-color .2s ease;
}
.social a:hover{background:var(--lime); border-color:var(--lime); color:var(--charcoal);}

@media(prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}