/* ============ TOKENS ============ */
:root{
  --cream: #F8F1E7;
  --paper: #FFFCF7;
  --espresso: #3B2A21;
  --espresso-soft: #5C4636;
  --sage: #97A982;
  --terracotta: #C2876A;
  --gold: #C9A368;
  --line: rgba(59,42,33,0.12);
  --radius: 18px;
  --shadow: 0 20px 50px -15px rgba(59,42,33,0.25);
  --font-display: "Fraunces", serif;
  --font-body: "Outfit", sans-serif;
  --container: 1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
body{
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--espresso);
  overflow-x:hidden;
  width:100%;
  font-size: 16px;
  line-height: 1.6;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
em{font-style:italic; color: var(--terracotta);}
ul{list-style:none;}

h1,h2,h3{font-family:var(--font-display); font-weight:600; color:var(--espresso); line-height:1.08;}
h2{font-size:clamp(2.1rem, 4vw, 3.2rem); font-weight:500;}
h3{font-size:1.3rem; font-weight:600;}

.section-eyebrow{
  font-family: var(--font-body);
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:0.78rem;
  color:var(--terracotta);
  font-weight:600;
  margin-bottom:0.6rem;
}
.section-sub{color:var(--espresso-soft); max-width:520px; margin:0.6rem auto 0;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

section{padding: 7rem 6vw; max-width: var(--container); margin:0 auto; overflow:visible;}
@media(max-width:768px){ section{padding: 4rem 5vw;} }
@media(max-width:480px){ section{padding: 3.2rem 4.5vw;} }

.reveal-up{ opacity:0; transform: translateY(36px); }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 0.95rem 1.9rem;
  border-radius: 100px;
  font-weight:600;
  font-size:0.95rem;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .3s ease;
  white-space:nowrap;
}
.btn-primary{ background: var(--espresso); color: var(--cream); box-shadow: 0 10px 25px -8px rgba(59,42,33,0.45); }
.btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px -8px rgba(59,42,33,0.5); }
.btn-ghost{ border:1.5px solid var(--espresso); color:var(--espresso); background:transparent; }
.btn-ghost:hover{ background: var(--espresso); color: var(--cream); transform: translateY(-3px); }
.btn-whatsapp{ background:#25D366; color:#fff; box-shadow: 0 10px 25px -8px rgba(37,211,102,0.4); }
.btn-whatsapp:hover{ background:#1ebe5a; transform:translateY(-3px); }

/* ============ LOADER ============ */
#loader{
  position:fixed; inset:0; background:var(--espresso); z-index:9999;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition: opacity .7s ease, visibility .7s ease;
}
#loader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-video-wrap{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:min(280px,62vw);
  transition: transform .7s cubic-bezier(.6,0,.2,1), opacity .7s ease;
  padding:10px;
  border: 3px solid var(--gold);
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  box-shadow: 0 0 0 1px rgba(212,165,116,0.35), 0 20px 50px -12px rgba(0,0,0,0.6);
}
/* As the loader starts to dismiss, the logo shrinks + drifts up toward the navbar slot
   right before the whole loader fades, so the motion reads as one continuous handoff. */
#loader.shrink .loader-video-wrap{
  transform: scale(0.16) translateY(-44vh);
  opacity:0;
}
#loaderVideo{
  width:100%; max-width:240px;
  object-fit:contain;
  display:block;
}
.loader-fallback{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
}
/* Hide fallback once the real video is actively playing */
#loaderVideo.video-ready ~ .loader-fallback{ display:none; }

.loader-thread{
  width:1px; height:60px; background: var(--gold);
  animation: threadGrow 1.1s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes threadGrow{ 0%{height:0;} 50%{height:60px;} 100%{height:0;} }
.loader-text{ font-family:var(--font-display); color:var(--cream); letter-spacing:0.3em; text-transform:uppercase; font-size:0.85rem; }

/* Invisible marker sitting in normal page flow at the nav's logo position.
   Not used for measurement (kept simple/robust) — the nav logo itself fades in
   on a slight delay so it reads as the loader animation "landing" in the navbar. */
.logo-fly-target{ position:fixed; top:0; left:0; width:0; height:0; pointer-events:none; }

/* ============ NAV ============ */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0.85rem 6vw;
  background: rgba(248,241,231,0.6);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition: background .4s ease, border-color .4s ease, padding .4s ease;
}
#nav.scrolled{ background: rgba(248,241,231,0.95); border-color: var(--line); padding: 0.6rem 6vw; }

/* Brand with logo image */
.nav-brand{ display:flex; align-items:center; gap:0.6rem; font-family:var(--font-display); font-weight:600; font-size:1.15rem; z-index:600; }
.nav-logo-img{
  height:42px; width:auto; object-fit:contain;
  border-radius:50%;
  opacity:0; transform:scale(0.5);
  transition: height .4s ease, opacity .5s ease .1s, transform .5s cubic-bezier(.2,.8,.2,1) .1s;
}
/* Once the loader is dismissed, the nav logo settles into place — completing the "fly in" handoff */
body.intro-done .nav-logo-img{ opacity:1; transform:scale(1); }
#nav.scrolled .nav-logo-img{ height:34px; }
.nav-brand-text{ font-family:var(--font-display); font-weight:600; font-size:1.15rem; }
.nav-brand-text em{ font-style:normal; font-weight:300; opacity:0.7; font-size:0.92rem; color:var(--espresso); }

@media(max-width:480px){
  .nav-brand-text{ font-size:1rem; }
  .nav-logo-img{ height:34px; }
}

#navLinks{ display:flex; align-items:center; gap:1.6rem; }
#navLinks a{ font-size:0.9rem; font-weight:500; position:relative; }
#navLinks a:not(.nav-cta):not(.social-icon)::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:1.5px; background:var(--terracotta);
  transition: width .3s ease;
}
#navLinks a:not(.nav-cta):not(.social-icon):hover::after{ width:100%; }
.nav-cta{ background:var(--espresso); color:var(--cream); padding:0.55rem 1.2rem; border-radius:100px; }
.nav-cta:hover{ background: var(--terracotta); }

/* Nav social icons */
.nav-socials{ display:flex; align-items:center; gap:0.6rem; margin-left:0.4rem; padding-left:1rem; border-left:1px solid var(--line); }
.social-icon{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background: transparent;
  color: var(--espresso-soft);
  transition: color .25s, background .25s, transform .25s;
}
.social-icon:hover{ transform: translateY(-2px); }
.social-icon[data-social="instagram"]:hover{ color:#E1306C; background:rgba(225,48,108,0.1); }
.social-icon[data-social="facebook"]:hover{ color:#1877F2; background:rgba(24,119,242,0.1); }
.social-icon[data-social="youtube"]:hover{ color:#FF0000; background:rgba(255,0,0,0.1); }

#navToggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; z-index:600; }
#navToggle span{ width:24px; height:2px; background:var(--espresso); border-radius:2px; transition:.3s; }

@media(max-width:1020px){
  #navToggle{ display:flex; }
  #navLinks{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw,320px);
    background: var(--paper); flex-direction:column; justify-content:center; align-items:flex-start;
    padding: 2rem 2rem;
    gap:1.5rem;
    transform: translateX(100%); transition: transform .45s cubic-bezier(.2,.8,.2,1);
    box-shadow: -10px 0 40px rgba(0,0,0,0.1);
    overflow-y:auto;
  }
  #navLinks.open{ transform: translateX(0); }
  .nav-cta{ margin-top:0.5rem; }
  .nav-socials{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:1rem; margin-left:0; gap:1rem; }
  .social-icon{ width:40px; height:40px; background:var(--cream); }
}

/* ============ HERO ============ */
#hero{
  position:relative; min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  overflow:hidden; text-align:center; color:var(--cream);
}
@media(max-width:480px){
  #hero{ padding-top: 5rem; }
  .hero-actions{ flex-direction:column; width:100%; max-width:320px; }
  .hero-actions .btn{ width:100%; }
  .hero-thread{ display:none; }
}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform: scale(1.08);
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(40,28,21,0.55) 0%, rgba(40,28,21,0.72) 55%, rgba(40,28,21,0.9) 100%);
}
.hero-thread{ position:absolute; left:6%; top:0; height:100%; width:120px; opacity:0.35; pointer-events:none; }
.hero-thread svg{ width:100%; height:100%; }
#threadPath{ fill:none; stroke:var(--gold); stroke-width:1.4; stroke-dasharray:6 10; }
.hero-content{ position:relative; z-index:2; max-width:780px; padding: 0 1.5rem; }
.hero-eyebrow{ text-transform:uppercase; letter-spacing:0.25em; font-size:0.78rem; color:var(--gold); font-weight:600; margin-bottom:1.2rem; }
#hero h1{ font-size:clamp(2.8rem, 7vw, 5.4rem); color:var(--paper); margin-bottom:1.1rem; }
.hero-tagline{ font-size:clamp(1.05rem,2vw,1.3rem); font-weight:300; opacity:0.92; margin-bottom:2.2rem; }
.hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.2rem; }
.hero-actions .btn-ghost{ border-color: var(--cream); color:var(--cream); }
.hero-actions .btn-ghost:hover{ background:var(--cream); color:var(--espresso); }
.hero-meta{ font-size:0.85rem; letter-spacing:0.05em; opacity:0.85; }
.hero-meta .dot{ margin:0 0.6rem; }

.scroll-cue{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
  font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream); opacity:0.75; z-index:2;
}
.scroll-cue span{ width:1px; height:30px; background:var(--cream); position:relative; overflow:hidden; }
.scroll-cue span::after{
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--gold);
  animation: scrollLine 1.6s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{top:-100%;} 50%{top:0;} 100%{top:100%;} }

/* ============ ABOUT ============ */
.about-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:4.5rem; align-items:center; }
.about-image{ position:relative; }
.about-image > img{ border-radius:var(--radius); box-shadow:var(--shadow); aspect-ratio: 4/5; object-fit:cover; width:100%; }
.about-image-tag{
  position:absolute; bottom:1.2rem; left:1.2rem; background:rgba(255,252,247,0.92);
  padding:0.5rem 1rem; border-radius:100px; font-size:0.8rem; font-weight:600; backdrop-filter:blur(6px);
  z-index:3;
}

/* Floating ambience photos, each with a soft blurred "glow" of itself behind it */
.about-image-collage{
  position:absolute; inset:0; pointer-events:none; z-index:2;
}
.about-collage-photo{
  position:absolute; pointer-events:auto;
  border-radius:14px; overflow:hidden;
  box-shadow: 0 16px 36px -10px rgba(59,42,33,0.45);
  border: 3px solid var(--paper);
}
.about-collage-photo img{ position:relative; z-index:2; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; display:block; }
.about-collage-blur{
  position:absolute; inset:-14px; z-index:1;
  background-size:cover; background-position:center;
  filter: blur(18px) saturate(130%);
  opacity:0.85; transform:scale(1.08);
}
.about-collage-1{ width:46%; aspect-ratio:4/5; left:-8%; bottom:8%; transform:rotate(-4deg); }
.about-collage-2{ width:40%; aspect-ratio:3/4; right:-10%; top:10%; transform:rotate(5deg); }
@media(max-width:880px){
  .about-collage-1{ width:40%; left:0; bottom:5%; }
  .about-collage-2{ width:34%; right:0; top:5%; }
  .about-collage-blur{ inset:-8px; }
  .about-image{ overflow:hidden; }
}
@media(max-width:560px){
  .about-collage-1{ width:38%; bottom:4%; }
  .about-collage-2{ width:32%; top:4%; }
  .about-collage-blur{ inset:-6px; }
}

.about-copy h2{ margin-bottom:1.3rem; }
.about-copy p{ color:var(--espresso-soft); margin-bottom:1.1rem; max-width:520px; }
.about-stats{ display:flex; gap:2.4rem; margin-top:2rem; flex-wrap:wrap; }
.about-stats strong{ display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--terracotta); }
.about-stats span{ font-size:0.8rem; color:var(--espresso-soft); text-transform:uppercase; letter-spacing:0.05em; }
@media(max-width:880px){ .about-grid{ grid-template-columns:1fr; gap:2.5rem; } }

/* ============ THREAD DIVIDER ============ */
.thread-divider{ max-width: var(--container); margin: 0 auto; padding: 0 6vw; }
.thread-divider svg{ width:100%; height:60px; overflow:visible; }
.divider-path{ fill:none; stroke:var(--terracotta); stroke-width:1.5; stroke-linecap:round; }

/* ============ SIGNATURE DISHES (Rotating Plates) ============ */
#specials{ overflow:visible; }
.specials-stage{ margin-top:3.5rem; position:relative; }
.plate-carousel{
  position:relative;
  min-height:480px;
  display:flex; align-items:center; justify-content:center;
}
.plate-item{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.82);
  opacity:0; pointer-events:none;
  transition: all 0.6s cubic-bezier(.2,.8,.2,1);
  display:flex; flex-direction:column; align-items:center; gap:2rem;
  width:min(500px,90vw);
  text-align:center;
}
.plate-item.active{
  opacity:1; pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
  position:relative; top:auto; left:auto; transform:none;
}
.plate-ring{
  width:220px; height:220px; border-radius:50%;
  border:3px solid var(--terracotta);
  padding:8px;
  box-shadow: 0 0 0 1px var(--gold), var(--shadow);
  animation: plateRotate 12s linear infinite;
  flex-shrink:0;
  background: repeating-conic-gradient(var(--paper) 0deg 4deg, transparent 4deg 8deg);
}
.plate-item.active .plate-ring{ animation: plateRotate 12s linear infinite; }
@keyframes plateRotate{
  from{ box-shadow: 0 0 0 1px var(--gold), 0 8px 30px -10px rgba(193,135,106,0.5); }
  50%{ box-shadow: 0 0 0 3px var(--gold), 0 20px 50px -10px rgba(193,135,106,0.7); }
  to{ box-shadow: 0 0 0 1px var(--gold), 0 8px 30px -10px rgba(193,135,106,0.5); }
}
.plate-inner{
  width:100%; height:100%; border-radius:50%; overflow:hidden;
  background: var(--cream);
  display:flex; align-items:center; justify-content:center;
  border: 2px dashed var(--gold);
}
.plate-img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.plate-placeholder{
  display:none; align-items:center; justify-content:center;
  font-size:5rem; width:100%; height:100%;
  background: linear-gradient(135deg, var(--cream) 0%, #eddbc5 100%);
}
.plate-label{ padding:0 1rem; }
.plate-label h3{ font-size:1.5rem; margin-bottom:0.5rem; }
.plate-label p{ color:var(--espresso-soft); font-size:0.95rem; max-width:360px; margin:0 auto 0.8rem; }
.plate-price{
  display:inline-block;
  font-family:var(--font-display); font-size:1.3rem; font-weight:700;
  color:var(--terracotta);
  background: rgba(194,135,106,0.1);
  padding:0.3rem 1rem; border-radius:100px;
  border:1px solid rgba(194,135,106,0.3);
}

.plate-dots{ display:flex; gap:0.6rem; justify-content:center; margin-top:2rem; }
.plate-dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--line); border:1.5px solid var(--terracotta);
  cursor:pointer; transition: all .3s ease; padding:0;
}
.plate-dot.active{ background:var(--terracotta); transform:scale(1.3); }

.plate-arrows{ display:flex; gap:1rem; justify-content:center; margin-top:1.4rem; }
.plate-arrow{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--espresso); background:transparent;
  font-size:1.2rem; cursor:pointer; color:var(--espresso);
  display:flex; align-items:center; justify-content:center;
  transition: all .3s ease;
}
.plate-arrow:hover{ background:var(--espresso); color:var(--cream); transform:scale(1.1); }

@media(max-width:600px){
  .plate-ring{ width:170px; height:170px; }
  .plate-label h3{ font-size:1.25rem; }
  .plate-carousel{ min-height:400px; }
}

/* ============ SHOWCASE CAROUSEL (Horizontal Scrolling Cards) ============ */
.menu-showcase-section{ max-width:100%; padding-left:0; padding-right:0; }
.menu-showcase-section .section-eyebrow,
.menu-showcase-section h2,
.menu-showcase-section .section-sub{ padding:0 6vw; }
.menu-showcase-section h2{ max-width:var(--container); margin-left:auto; margin-right:auto; }

.showcase-carousel-wrap{
  position:relative;
  max-width:var(--container);
  margin:2.5rem auto 0;
  padding:0 6vw;
}
.showcase-carousel{
  display:flex;
  gap:1.4rem;
  overflow-x:auto;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:0.5rem 0 1.5rem;
  cursor:grab;
}
.showcase-carousel::-webkit-scrollbar{ display:none; }
.showcase-carousel:active{ cursor:grabbing; }

.showcase-card{
  flex:0 0 260px;
  background:var(--paper);
  border-radius:var(--radius);
  border:1px solid var(--line);
  overflow:hidden;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change:transform;
}
.showcase-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.showcase-card-img{
  height:180px; overflow:hidden; position:relative;
  background: linear-gradient(135deg, var(--cream) 0%, #eddbc5 100%);
  display:flex; align-items:center; justify-content:center;
}
.showcase-card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.showcase-card:hover .showcase-card-img img{ transform:scale(1.06); }
.showcase-emoji{
  font-size:3.5rem;
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.showcase-card-body{ padding:1.2rem 1.3rem 1.4rem; }
.showcase-tag{
  display:inline-block;
  font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--terracotta); background:rgba(194,135,106,0.12);
  padding:0.2rem 0.7rem; border-radius:100px; margin-bottom:0.6rem;
}
.showcase-card-body h3{ font-size:1.05rem; margin-bottom:0.4rem; line-height:1.2; }
.showcase-card-body p{ color:var(--espresso-soft); font-size:0.86rem; line-height:1.45; margin-bottom:0.8rem; }
.showcase-price{ font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--terracotta); }

.showcase-arrows{ display:flex; gap:0.8rem; justify-content:center; margin-top:1.2rem; }
.showcase-arrow{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--espresso); background:transparent;
  font-size:1.1rem; cursor:pointer; color:var(--espresso);
  display:flex; align-items:center; justify-content:center;
  transition: all .3s ease;
}
.showcase-arrow:hover{ background:var(--espresso); color:var(--cream); }

@media(max-width:600px){
  .showcase-card{ flex:0 0 220px; }
  .showcase-card-img{ height:150px; }
}

/* ============ MENU ============ */
.menu-tabs{ display:flex; justify-content:center; gap:0.6rem; margin:2.6rem 0 3rem; flex-wrap:wrap; }
@media(max-width:600px){
  .menu-tabs{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding-bottom:0.5rem; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-left:-4.5vw; margin-right:-4.5vw; padding-left:4.5vw; padding-right:4.5vw; }
  .menu-tabs::-webkit-scrollbar{ display:none; }
  .tab-btn{ flex:0 0 auto; }
}
.tab-btn{
  font-family:var(--font-body); font-weight:600; font-size:0.88rem;
  padding:0.7rem 1.4rem; border-radius:100px; border:1.5px solid var(--line);
  background:var(--paper); color:var(--espresso-soft); cursor:pointer; transition: all .3s ease;
}
.tab-btn.active, .tab-btn:hover{ background:var(--espresso); color:var(--cream); border-color:var(--espresso); }
.menu-panel{ display:none; }
.menu-panel.active{ display:block; animation: fadeIn .5s ease; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }
.menu-cols{ display:grid; grid-template-columns: repeat(4, 1fr); gap:2.5rem; }
@media(max-width:1024px){ .menu-cols{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px){ .menu-cols{ grid-template-columns: 1fr; } }
.menu-col h3{
  font-size:1.05rem; color:var(--terracotta); margin-bottom:0.9rem; margin-top:1.8rem;
  text-transform:uppercase; letter-spacing:0.08em; font-weight:700;
}
.menu-col h3:first-child{ margin-top:0; }
.menu-col ul li{
  display:flex; align-items:baseline; gap:0.4rem;
  padding:0.55rem 0; border-bottom:1px dashed var(--line);
  font-size:0.93rem;
}
.menu-col ul li span{ color:var(--espresso); font-weight:500; }
.menu-col ul li i{ flex:1; border-bottom:1px dotted var(--line); margin-bottom:4px; }
.menu-col ul li b{ font-family:var(--font-display); color:var(--espresso); font-weight:600; }

/* ============ ORDER ON WHATSAPP ============ */
.order-section{
  background: var(--espresso);
  max-width:100%;
  padding: 6rem 6vw;
  text-align:center;
}
.order-inner{ max-width:640px; margin:0 auto; }
.order-section .section-eyebrow{ color:var(--gold); }
.order-section h2{ color:var(--cream); margin-bottom:1rem; }
.order-section .section-sub{ color:rgba(248,241,231,0.72); }
.order-icon{ font-size:2.8rem; margin-bottom:1rem; }
.order-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2rem; }
.order-actions .btn-ghost{ border-color:var(--cream); color:var(--cream); }
.order-actions .btn-ghost:hover{ background:var(--cream); color:var(--espresso); }

/* Delivery platform badges */
.order-delivery-badges{
  display:flex; gap:1.5rem; justify-content:center; align-items:center;
  margin-top:2rem; padding-top:2rem;
  border-top:1px solid rgba(255,255,255,0.12);
}
.delivery-badge{
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  padding:0.7rem 1.5rem; border-radius:100px;
  background: rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.15);
  transition: background .3s ease, transform .3s ease;
  min-width:120px;
}
.delivery-badge:hover{ background:rgba(255,255,255,0.15); transform:translateY(-2px); }
.delivery-badge span{ font-family:var(--font-body); font-weight:700; font-size:0.95rem; transition: color .3s ease; }
.delivery-badge.zomato span{ color:#E23744; }
.delivery-badge.swiggy span{ color:#FC8019; }
.delivery-badge.zomato:hover{ background:#E23744; border-color:#E23744; }
.delivery-badge.swiggy:hover{ background:#FC8019; border-color:#FC8019; }
.delivery-badge.zomato:hover span,
.delivery-badge.swiggy:hover span{ color:#fff; }

@media(max-width:480px){
  .order-actions{ flex-direction:column; align-items:center; }
  .order-actions .btn{ width:100%; max-width:320px; }
  .order-delivery-badges{ flex-direction:column; }
}

/* ============ WHY ============ */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; margin-top:3rem; }
@media(max-width:900px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:540px){ .why-grid{ grid-template-columns:1fr; } }
.why-card{
  background:var(--paper); border-radius:var(--radius); padding:2.2rem 1.6rem;
  border:1px solid var(--line); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  will-change: transform;
}
.why-card:hover{ box-shadow: var(--shadow); }
.why-icon{ font-size:1.8rem; margin-bottom:1rem; }
.why-card h3{ margin-bottom:0.6rem; font-size:1.1rem; }
.why-card p{ color:var(--espresso-soft); font-size:0.92rem; }

/* ============ AMENITIES ============ */
#amenities{ background:transparent; }
.amenities-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:3rem;
}
@media(max-width:900px){ .amenities-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .amenities-grid{ grid-template-columns:1fr; } }

.amenity-card{
  background:var(--paper);
  border-radius:var(--radius);
  padding:1.8rem 1.5rem;
  border:1px solid var(--line);
  text-align:center;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  will-change:transform;
}
.amenity-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.amenity-icon{ font-size:2.2rem; margin-bottom:0.8rem; }
.amenity-card h3{ font-size:1.05rem; margin-bottom:0.5rem; }
.amenity-card p{ color:var(--espresso-soft); font-size:0.88rem; line-height:1.5; }

.amenity-inquiry{
  text-align:center; margin-top:3rem; padding:2.5rem;
  background:var(--paper); border-radius:var(--radius);
  border:1px solid var(--line);
}
.amenity-inquiry p{ font-family:var(--font-display); font-size:1.3rem; font-weight:500; margin-bottom:1.2rem; color:var(--espresso); }
.amenity-inquiry .btn-primary{ gap:0.3rem; }

/* Animated WhatsApp icon: neutral by default, fills WhatsApp green with a white glyph on hover —
   same "fly to colour" treatment as the nav social icons. */
.amenity-wa-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:54px; height:54px; border-radius:50%;
  margin: 0 auto 1.1rem; color:var(--espresso-soft);
  background: var(--cream); border:1.5px solid var(--line);
  transition: color .3s ease, background .3s ease, transform .3s ease, border-color .3s ease;
}
.amenity-wa-icon:hover{
  color:#fff; background:#25D366; border-color:#25D366;
  transform: translateY(-3px) scale(1.06);
}

/* ============ GALLERY ============ */
.gallery-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows:160px; gap:1rem; margin-top:3rem;
}
.gallery-item{ overflow:hidden; border-radius:14px; position:relative; cursor:pointer; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item.large{ grid-column: span 2; grid-row: span 2; }
@media(max-width:768px){
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:130px; }
  .gallery-item.large{ grid-column:span 2; grid-row:span 2; }
}
@media(max-width:420px){
  .gallery-grid{ grid-template-columns: 1fr 1fr; grid-auto-rows:110px; gap:0.6rem; }
}

/* Lightbox overlay for viewing gallery photos full-size */
.lightbox{
  position:fixed; inset:0; z-index:10000;
  background: rgba(26,18,14,0.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; }
.lightbox img{
  max-width:90vw; max-height:86vh; border-radius:8px;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.7);
  opacity:0; transform:scale(0.96);
  transition: opacity .25s ease, transform .25s ease;
}
.lightbox.open img{ opacity:1; transform:scale(1); }
.lightbox-close{
  position:absolute; top:1.5rem; right:1.5rem;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.1); color:#fff; border:none;
  font-size:1.8rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .25s ease;
}
.lightbox-close:hover{ background:rgba(255,255,255,0.22); }
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,0.1); color:#fff; border:none;
  font-size:2rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition: background .25s ease;
}
.lightbox-nav:hover{ background:rgba(255,255,255,0.22); }
.lightbox-prev{ left:1.2rem; }
.lightbox-next{ right:1.2rem; }
@media(max-width:600px){
  .lightbox-nav{ width:40px; height:40px; font-size:1.6rem; }
  .lightbox-close{ width:38px; height:38px; top:1rem; right:1rem; font-size:1.5rem; }
  .lightbox-prev{ left:0.5rem; }
  .lightbox-next{ right:0.5rem; }
}

/* ============ TESTIMONIALS + GOOGLE RATING ============ */
.google-rating-wrap{ display:flex; justify-content:center; margin:2rem 0 0; }
.google-rating-badge{
  display:inline-flex; align-items:center; gap:1.2rem;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.2rem 2rem;
  box-shadow: 0 8px 24px -8px rgba(59,42,33,0.12);
}
.google-rating-logo{ flex-shrink:0; }
.google-rating-score{ display:flex; align-items:center; gap:0.6rem; margin-bottom:0.2rem; }
.rating-number{ font-family:var(--font-display); font-size:2rem; font-weight:700; color:var(--espresso); line-height:1; }
.rating-stars{ display:flex; gap:1px; }
.rating-stars .star{ font-size:1.2rem; color:#FBBC05; line-height:1; }
.rating-stars .star.half{ position:relative; color:#ddd; }
.rating-stars .star.half::before{ content:"★"; position:absolute; left:0; top:0; color:#FBBC05; width:50%; overflow:hidden; }
.google-rating-label{ font-size:0.82rem; color:var(--espresso-soft); margin-bottom:0.4rem; }
.google-review-link{
  display:inline-block; font-size:0.8rem; font-weight:600;
  color:var(--terracotta); text-decoration:underline;
  text-underline-offset:2px;
}
.google-review-link:hover{ color:var(--espresso); }

/* Rotating Google Reviews carousel — one slide visible at a time, auto-advancing */
.review-carousel{ max-width:680px; margin:3rem auto 0; }
.review-track{ position:relative; min-height:200px; }
.review-slide{
  position:absolute; inset:0;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:2.4rem 2.6rem; text-align:center;
  opacity:0; visibility:hidden;
  transform:translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.review-slide.active{ opacity:1; visibility:visible; transform:translateY(0); position:relative; }
.review-slide::before{
  content:"""; font-family:var(--font-display); font-size:3.5rem; color:var(--terracotta);
  opacity:0.3; display:block; line-height:1; margin-bottom:-0.6rem;
}
.review-slide p{ font-style:italic; color:var(--espresso-soft); margin-bottom:0.8rem; font-size:1.02rem; }
.review-slide .testi-stars{ color:#FBBC05; font-size:0.95rem; margin-bottom:0.6rem; letter-spacing:2px; }
.review-slide span{ font-weight:600; font-size:0.9rem; color:var(--terracotta); }

.review-dots{ display:flex; gap:0.6rem; justify-content:center; margin-top:1.6rem; }
.review-dot{
  width:8px; height:8px; border-radius:50%; background:var(--line);
  border:none; cursor:pointer; transition: background .3s, transform .3s;
}
.review-dot.active{ background:var(--terracotta); transform:scale(1.3); }

@media(max-width:600px){
  .google-rating-badge{ flex-direction:column; text-align:center; padding:1.2rem 1.5rem; }
  .review-slide{ padding:2rem 1.4rem; }
}

/* Rotating Google Reviews carousel — one slide visible at a time, auto-advances */
.review-carousel{ max-width:680px; margin:2.8rem auto 0; text-align:center; }
.review-track{ position:relative; min-height:170px; }
.review-slide{
  position:absolute; inset:0;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:2.2rem 2.4rem; opacity:0; pointer-events:none;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.review-slide.active{ opacity:1; pointer-events:auto; transform:translateY(0); position:relative; }
.review-slide .testi-stars{ color:#FBBC05; font-size:0.95rem; margin-bottom:0.8rem; letter-spacing:2px; justify-content:center; display:flex; }
.review-slide p{ font-style:italic; color:var(--espresso-soft); margin-bottom:0.8rem; }
.review-slide span{ font-weight:600; font-size:0.88rem; color:var(--terracotta); }
.review-dots{ display:flex; gap:0.55rem; justify-content:center; margin-top:1.6rem; }
.review-dot{
  width:8px; height:8px; border-radius:50%; background:var(--line); border:none; cursor:pointer;
  transition: background .25s, transform .25s;
}
.review-dot.active{ background:var(--terracotta); transform:scale(1.3); }
@media(max-width:600px){
  .review-track{ min-height:210px; }
  .review-slide{ padding:1.8rem 1.6rem; }
}

/* ============ FAQ ============ */
.faq-list{ max-width:720px; margin:3rem auto 0; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:1.4rem 0; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-display); font-size:1.05rem; color:var(--espresso); font-weight:500;
  gap:1rem;
}
.faq-q span{ font-size:1.4rem; color:var(--terracotta); transition: transform .35s ease; flex-shrink:0; }
.faq-item.open .faq-q span{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .4s ease; }
.faq-a p{ padding-bottom:1rem; color:var(--espresso-soft); max-width:600px; }
.faq-wa-link{
  display:inline-flex; align-items:center; gap:0.4rem;
  background:#25D366; color:#fff;
  padding:0.55rem 1.2rem; border-radius:100px; font-size:0.85rem; font-weight:600;
  margin-bottom:1.2rem;
  transition: background .3s ease, transform .3s ease;
}
.faq-wa-link:hover{ background:#1ebe5a; transform:translateY(-2px); }

/* ============ CONTACT ============ */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:3.5rem; align-items:stretch; }
.contact-copy h2{ margin-bottom:1.6rem; }
.contact-list{ margin-bottom:1.6rem; }
.contact-list li{ display:flex; flex-direction:column; gap:0.2rem; padding:1rem 0; border-bottom:1px dashed var(--line); }
.contact-list strong{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--terracotta); }
.contact-list a:hover{ color:var(--terracotta); }

/* Animated social row — same fly-to-colour treatment as the nav icons */
.contact-socials{ display:flex; gap:0.8rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.contact-social-icon{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background: var(--espresso); color: var(--cream);
  transition: color .3s ease, background .3s ease, transform .3s ease;
}
.contact-social-icon:hover{ transform: translateY(-3px) scale(1.06); }
.contact-social-icon[data-social="instagram"]:hover{ background:#E1306C; }
.contact-social-icon[data-social="whatsapp"]:hover{ background:#25D366; }
.contact-social-icon[data-social="email"]:hover{ background:var(--terracotta); }
.contact-social-icon[data-social="facebook"]:hover{ background:#1877F2; }
.contact-social-icon[data-social="youtube"]:hover{ background:#FF0000; }
.contact-social-icon[data-social="gmaps"]:hover{ background:#4285F4; }

.contact-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.contact-map{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:380px; box-shadow:var(--shadow); }
@media(max-width:880px){ .contact-grid{ grid-template-columns:1fr; } .contact-map{ min-height:300px; } }

/* ============ FOOTER ============ */
footer{ background:var(--espresso); color:var(--cream); padding:4rem 6vw 2.2rem; text-align:center; }
.footer-brand{ font-family:var(--font-display); font-size:1.5rem; margin-bottom:0.6rem; }
.footer-brand span{ opacity:0.7; font-weight:300; }
.footer-inner > p{ opacity:0.75; margin-bottom:1.4rem; font-size:0.92rem; }
.footer-email a{ opacity:0.85; transition:opacity .25s, color .25s; }
.footer-email a:hover{ opacity:1; color:var(--gold); }

/* Footer social icons */
.footer-socials{ display:flex; gap:0.8rem; justify-content:center; margin-bottom:1.6rem; flex-wrap:wrap; }
.footer-social-icon{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,0.08); color:rgba(248,241,231,0.8);
  border:1px solid rgba(255,255,255,0.12);
  transition: all .3s ease;
}
.footer-social-icon:hover{ background:rgba(255,255,255,0.18); color:#fff; transform:translateY(-3px); }
.footer-social-icon[aria-label="Instagram"]:hover{ background:#E1306C; border-color:#E1306C; }
.footer-social-whatsapp:hover{ background:#25D366 !important; border-color:#25D366 !important; }
.footer-social-icon[aria-label="Facebook"]:hover{ background:#1877F2; border-color:#1877F2; }
.footer-social-icon[aria-label="YouTube"]:hover{ background:#FF0000; border-color:#FF0000; }
.footer-social-gmaps:hover{ background:#4285F4 !important; border-color:#4285F4 !important; }

.footer-links{ display:flex; gap:1.8rem; justify-content:center; margin-bottom:2rem; flex-wrap:wrap; }
.footer-links a{ font-size:0.88rem; opacity:0.85; }
.footer-links a:hover{ opacity:1; color:var(--gold); }
.footer-copy{ font-size:0.78rem; opacity:0.5; margin-bottom:0 !important; }

/* ============ FLOAT BUTTON ============ */
.float-btn{
  position:fixed; bottom:1.8rem; right:1.8rem; z-index:400;
  width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 25px -5px rgba(0,0,0,0.35);
  animation: floatPulse 2.6s ease-in-out infinite;
}
@media(max-width:480px){
  .float-btn{ width:48px; height:48px; bottom:1.1rem; right:1.1rem; }
  .float-btn svg{ width:22px; height:22px; }
}
@keyframes floatPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

/* ============ MISC ============ */
#loadingbar{ position:fixed; top:0; left:0; height:3px; background:var(--gold); width:0%; z-index:9998; transition: width .2s ease; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; }
.why-card{ transform-style: preserve-3d; }

/* Safety: if JS never runs, don't leave content invisible */
.no-js .menu-col ul li, .no-js .why-card, .no-js .gallery-item,
.no-js .review-slide, .no-js .faq-item, .no-js .plate-item,
.no-js .amenity-card, .no-js .showcase-card, .no-js .about-collage-photo{
  opacity:1 !important; transform:none !important;
}
.no-js .plate-item{ position:relative; top:auto; left:auto; transform:none; }
.no-js .review-slide{ position:relative; margin-bottom:1rem; }