/* =========================================================
   MĀRÉ — Bandra West, Mumbai
   Theme stylesheet
   ========================================================= */

:root{
  --cream:#FBF2E1;
  --cream-deep:#F3E2C4;
  --paper:#FFFCF5;
  --espresso:#3A2115;
  --espresso-70:rgba(58,33,21,.72);
  --espresso-45:rgba(58,33,21,.45);
  --butter:#F2B52C;
  --butter-deep:#DE9B12;
  --tomato:#E1481F;
  --tomato-deep:#C23A17;
  --coral:#F0906E;
  --leaf:#5C7A46;
  --leaf-deep:#3F5730;
  --sky:#A7CAD2;
  --white:#FFFDF8;
  --line:rgba(58,33,21,.14);
  --shadow-sm:0 8px 24px -14px rgba(58,33,21,.4);
  --shadow-lg:0 30px 60px -24px rgba(58,33,21,.4);
  --radius-a:63% 37% 54% 46% / 43% 37% 63% 57%;
  --radius-b:39% 61% 47% 53% / 55% 45% 55% 45%;
  --radius-c:48% 52% 37% 63% / 61% 43% 57% 39%;
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-hand:'Caveat', cursive;
  --container:1280px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--cream);
  color:var(--espresso);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.05;
  margin:0;
  color:var(--espresso);
}

p{ margin:0; }

ul{ margin:0; padding:0; list-style:none; }

button{ font-family:inherit; cursor:pointer; }

input,select,textarea{ font-family:inherit; font-size:16px; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--espresso); color:var(--cream); padding:.8rem 1.4rem;
  z-index:9999; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{
  outline:3px solid var(--tomato);
  outline-offset:3px;
  border-radius:2px;
}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(1.25rem,4vw,3rem);
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tomato);
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--tomato);
  display:inline-block;
}

.hand{
  font-family:var(--font-hand);
  font-weight:600;
  color:var(--tomato);
  transform:rotate(-3deg);
  display:inline-block;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.95rem 1.9rem;
  border-radius:100px;
  font-weight:600;
  font-size:.95rem;
  border:2px solid transparent;
  transition:transform .35s var(--ease), background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
  white-space:nowrap;
}
.btn-primary{
  background:var(--tomato);
  color:var(--white);
  box-shadow:0 12px 24px -10px rgba(225,72,31,.55);
}
.btn-primary:hover{ background:var(--tomato-deep); transform:translateY(-3px) scale(1.015); box-shadow:0 16px 28px -10px rgba(225,72,31,.6); }
.btn-primary:active{ transform:translateY(-1px) scale(.99); }
.btn-secondary{
  background:transparent;
  color:var(--espresso);
  border-color:var(--espresso);
}
.btn-secondary:hover{ background:var(--espresso); color:var(--cream); transform:translateY(-3px); }
.btn-light{
  background:var(--cream);
  color:var(--espresso);
}
.btn-light:hover{ background:var(--white); transform:translateY(-3px); }
.btn-outline-light{
  background:transparent;
  color:var(--cream);
  border-color:rgba(251,242,225,.55);
}
.btn-outline-light:hover{ background:var(--cream); color:var(--espresso); transform:translateY(-3px); }

/* =========================================================
   Header / Nav
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:500;
  background:rgba(251,242,225,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.site-header.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -20px rgba(58,33,21,.5);
}
.header-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:1.1rem clamp(1.25rem,4vw,3rem);
  display:flex;
  align-items:center;
  gap:2rem;
}
.logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.7rem;
  letter-spacing:.03em;
  color:var(--espresso);
  margin-right:auto;
}
.main-nav ul{ display:flex; gap:2.1rem; }
.nav-link{
  position:relative;
  font-weight:600;
  font-size:.95rem;
  padding:.3rem 0;
  color:var(--espresso-70);
  transition:color .25s ease;
}
.nav-link::after{
  content:"";
  position:absolute; left:0; bottom:-2px;
  width:100%; height:2px;
  background:var(--tomato);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .35s var(--ease);
}
.nav-link:hover, .nav-link.active{ color:var(--espresso); }
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); transform-origin:left; }

.nav-cta{ margin-left:.5rem; }

.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:42px; height:42px;
  background:transparent;
  border:none;
  padding:0;
  margin-left:.25rem;
}
.hamburger span{
  display:block;
  width:24px; height:2px;
  background:var(--espresso);
  margin:0 auto;
  transition:transform .3s var(--ease), opacity .3s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position:fixed;
  inset:0;
  top:0;
  background:var(--espresso);
  color:var(--cream);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:2rem clamp(1.5rem,8vw,4rem);
  gap:2.2rem;
  transform:translateY(-100%);
  transition:transform .45s var(--ease);
  z-index:499;
  visibility:hidden;
}
.mobile-menu.is-open{ transform:translateY(0); visibility:visible; }
.mobile-menu ul{ display:flex; flex-direction:column; gap:1.4rem; width:100%; }
.mobile-menu a{
  font-family:var(--font-display);
  font-size:clamp(2rem,9vw,3rem);
  font-weight:600;
  color:var(--cream);
}
.mobile-menu .btn{ margin-top:1rem; }
.mobile-menu-foot{
  margin-top:1rem;
  color:rgba(251,242,225,.6);
  font-size:.9rem;
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  padding:clamp(3rem,8vw,5.5rem) 0 clamp(4rem,10vw,7rem);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero-copy{ position:relative; }
.hero-copy .eyebrow{ margin-bottom:1.4rem; }
.hero-title{
  font-size:clamp(2.6rem,6.2vw,5.1rem);
  letter-spacing:-.01em;
}
.hero-title em{
  font-style:italic;
  color:var(--tomato);
}
.hero-sub{
  margin-top:1.6rem;
  max-width:32rem;
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  color:var(--espresso-70);
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.4rem;
}
.hero-meta{
  display:flex;
  gap:2.4rem;
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
  max-width:34rem;
}
.hero-meta div strong{
  display:block;
  font-family:var(--font-display);
  font-size:1.5rem;
}
.hero-meta div span{
  font-size:.82rem;
  color:var(--espresso-70);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.hero-visual{
  position:relative;
  height:clamp(360px,46vw,560px);
}
.hero-img{
  position:absolute;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.hero-img img{ width:100%; height:100%; object-fit:cover; }
.hero-img-main{
  width:74%;
  height:88%;
  top:0; right:0;
  border-radius:var(--radius-a);
  animation:float-slow 9s ease-in-out infinite;
}
.hero-img-sm{
  width:44%;
  height:46%;
  left:0; bottom:0;
  border-radius:var(--radius-b);
  border:8px solid var(--cream);
  animation:float-slow 7s ease-in-out infinite reverse;
}
.hero-badge{
  position:absolute;
  left:6%;
  top:6%;
  width:118px; height:118px;
  background:var(--butter);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:.85rem;
  color:var(--espresso);
  box-shadow:var(--shadow-sm);
  animation:spin-slow 18s linear infinite;
  z-index:3;
}
.hero-badge span{ display:block; font-size:1.5rem; }

@keyframes float-slow{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}
@keyframes spin-slow{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

.hero-doodle{
  position:absolute;
  pointer-events:none;
  color:var(--tomato);
}
.hero-doodle-bean{
  width:38px; height:auto;
  top:-2px; left:48%;
  opacity:.65;
  animation:doodle-drift 8s ease-in-out infinite;
}
.hero-doodle-star{
  width:20px; height:auto;
  top:12px; left:38%;
  color:var(--butter-deep);
  opacity:.8;
  animation:doodle-twinkle 3.4s ease-in-out infinite;
}
@keyframes doodle-drift{
  0%,100%{ transform:rotate(-8deg) translateY(0); }
  50%{ transform:rotate(6deg) translateY(-6px); }
}
@keyframes doodle-twinkle{
  0%,100%{ opacity:.5; transform:scale(1) rotate(0deg); }
  50%{ opacity:1; transform:scale(1.15) rotate(-8deg); }
}

.scroll-cue{
  position:absolute;
  bottom:1.4rem;
  left:clamp(1.25rem,4vw,3rem);
  display:flex;
  align-items:center;
  gap:.6rem;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--espresso-70);
}
.scroll-cue::after{
  content:"";
  width:1px; height:34px;
  background:var(--espresso-45);
  animation:scroll-line 2.2s ease-in-out infinite;
}
@keyframes scroll-line{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  51%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* =========================================================
   Reveal utility (scroll animations)
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-scale{ opacity:0; transform:scale(.92); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-scale.is-visible{ opacity:1; transform:scale(1); }
.reveal-delay-1.is-visible{ transition-delay:.1s; }
.reveal-delay-2.is-visible{ transition-delay:.2s; }
.reveal-delay-3.is-visible{ transition-delay:.3s; }

/* =========================================================
   Intro / Story
   ========================================================= */
.intro{
  padding:clamp(3.25rem,7vw,5.5rem) 0;
  position:relative;
}
.intro-grid{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.intro-statement{
  font-size:clamp(1.9rem,3.6vw,3.1rem);
  line-height:1.16;
}
.intro-statement .hand{ font-size:1.15em; }
.intro-text{
  margin-top:1.8rem;
  max-width:32rem;
  color:var(--espresso-70);
  font-size:1.05rem;
}
.intro-visual{
  position:relative;
}
.intro-img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--radius-c);
  box-shadow:var(--shadow-lg);
}
.intro-tag{
  position:absolute;
  bottom:-1.4rem;
  left:-1.6rem;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  padding:1.1rem 1.5rem;
  box-shadow:var(--shadow-sm);
  max-width:220px;
  transform:rotate(-4deg);
}
.intro-tag p{ font-family:var(--font-hand); font-size:1.5rem; color:var(--tomato); line-height:1; }
.intro-tag span{ font-size:.78rem; color:var(--espresso-70); }

/* =========================================================
   Signature Menu
   ========================================================= */
.signature-menu{
  padding:clamp(3.5rem,7vw,5.5rem) 0;
  background:var(--paper);
  position:relative;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:2rem;
  margin-bottom:clamp(2.2rem,5vw,3.4rem);
  flex-wrap:wrap;
}
.section-title{
  font-size:clamp(2.2rem,4.8vw,3.6rem);
  margin-top:.6rem;
}
.section-head p{
  max-width:26rem;
  color:var(--espresso-70);
}

.menu-filters{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-bottom:2.4rem;
}
.menu-filter{
  padding:.55rem 1.3rem;
  border-radius:100px;
  border:1.5px solid var(--line);
  background:transparent;
  font-weight:600;
  font-size:.86rem;
  color:var(--espresso-70);
  transition:all .3s ease;
}
.menu-filter:hover{ border-color:var(--espresso); color:var(--espresso); }
.menu-filter.is-active{
  background:var(--espresso);
  border-color:var(--espresso);
  color:var(--cream);
}

.menu-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem;
}
.menu-card{
  background:var(--cream);
  border-radius:22px;
  padding:1.6rem 1.5rem 1.8rem;
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
  box-shadow:0 2px 0 var(--line);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s ease;
}
.menu-card:hover{
  transform:translateY(-7px);
  border-color:transparent;
  box-shadow:var(--shadow-lg);
}
.menu-card-media{
  width:100%;
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;
  margin-bottom:1.1rem;
  background:var(--cream-deep);
}
.menu-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.menu-card:hover .menu-card-media img{ transform:scale(1.08); }
.menu-card-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.8rem;
}
.menu-card-row h3{
  font-size:1.15rem;
}
.menu-card-price{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--tomato);
  white-space:nowrap;
}
.menu-card p{
  margin-top:.55rem;
  font-size:.9rem;
  color:var(--espresso-70);
  line-height:1.5;
}
.menu-card-tag{
  position:absolute;
  top:1.1rem; right:1.1rem;
  background:var(--butter);
  color:var(--espresso);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:.3rem .6rem;
  border-radius:100px;
  z-index:2;
}
.menu-card-tag.tag-sky{ background:var(--sky); }
.menu-card-tag.tag-leaf{ background:var(--leaf); color:var(--cream); }
.menu-card[data-cat]{ display:none; }
.menu-card.is-shown{ display:block; }

.view-full-menu{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:2.6rem;
  font-weight:700;
  font-size:1.05rem;
  color:var(--espresso);
  border-bottom:2px solid var(--tomato);
  padding-bottom:.15rem;
  transition:gap .3s ease, color .3s ease;
}
.view-full-menu:hover{ gap:.9rem; color:var(--tomato); }

/* =========================================================
   Editorial
   ========================================================= */
.editorial{
  padding:clamp(4rem,8vw,7rem) 0;
  background:var(--espresso);
  color:var(--cream);
  position:relative;
  overflow:hidden;
}
.editorial-grid{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:2rem;
}
.editorial-title{
  font-size:clamp(2.6rem,7vw,5.6rem);
  color:var(--cream);
  max-width:20ch;
}
.editorial-title em{ font-style:italic; color:var(--butter); }
.editorial-body{
  max-width:30rem;
  margin-top:2rem;
  color:rgba(251,242,225,.72);
  font-size:1.08rem;
  margin-left:auto;
}
.editorial-imgs{
  position:relative;
  height:clamp(280px,32vw,420px);
  margin-top:2rem;
}
.editorial-img{
  position:absolute;
  border-radius:var(--radius-b);
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
}
.editorial-img img{ width:100%; height:100%; object-fit:cover; }
.editorial-img-1{ width:52%; height:100%; left:0; top:0; border-radius:var(--radius-a); }
.editorial-img-2{ width:38%; height:72%; right:4%; bottom:0; border-radius:var(--radius-c); border:7px solid var(--espresso); }
.editorial-stat{
  position:absolute;
  right:2%;
  top:-6%;
  background:var(--tomato);
  color:var(--white);
  width:128px; height:128px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  box-shadow:var(--shadow-lg);
  z-index:3;
}
.editorial-stat strong{ font-family:var(--font-display); font-size:1.9rem; line-height:1; }
.editorial-stat span{ font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; margin-top:.2rem; }

/* =========================================================
   Gallery
   ========================================================= */
.gallery{
  padding:clamp(3.5rem,7vw,5.5rem) 0;
}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-rows:120px;
  gap:1rem;
}
.gallery-item{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:var(--cream-deep);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.gallery-item:hover img{ transform:scale(1.07); }
.gallery-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(58,33,21,.55) 100%);
  opacity:0;
  transition:opacity .4s ease;
}
.gallery-item:hover::after{ opacity:1; }
.gallery-cap{
  position:absolute;
  left:1rem; bottom:1rem;
  color:var(--white);
  font-size:.85rem;
  font-weight:600;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
  z-index:2;
}
.gallery-item:hover .gallery-cap{ opacity:1; transform:translateY(0); }

.gallery-item.g1{ grid-column:span 2; grid-row:span 3; }
.gallery-item.g2{ grid-column:span 2; grid-row:span 2; }
.gallery-item.g3{ grid-column:span 2; grid-row:span 2; }
.gallery-item.g4{ grid-column:span 2; grid-row:span 2; }
.gallery-item.g5{ grid-column:span 3; grid-row:span 2; }
.gallery-item.g6{ grid-column:span 3; grid-row:span 2; }
.gallery-item.g7{ grid-column:span 2; grid-row:span 3; }
.gallery-item.g8{ grid-column:span 4; grid-row:span 2; }

/* =========================================================
   Full Menu tabs
   ========================================================= */
.full-menu{
  padding:clamp(3.5rem,7vw,5.5rem) 0;
  background:var(--paper);
}
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  border-bottom:1px solid var(--line);
  margin-bottom:2.6rem;
  padding-bottom:1.4rem;
}
.tab-btn{
  background:transparent;
  border:none;
  padding:.65rem 1.5rem;
  border-radius:100px;
  font-family:var(--font-display);
  font-size:1.15rem;
  font-weight:600;
  color:var(--espresso-70);
  transition:all .3s ease;
}
.tab-btn:hover{ color:var(--espresso); }
.tab-btn.is-active{ background:var(--tomato); color:var(--white); }

.tab-panel{ display:none; }
.tab-panel.is-active{ display:block; animation:fade-in .5s ease; }
@keyframes fade-in{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

.menu-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 3.5rem;
}
.menu-list-item{
  display:flex;
  justify-content:space-between;
  gap:1.2rem;
  padding:1.15rem 0;
  border-bottom:1px dashed var(--line);
}
.menu-list-item h4{
  font-size:1.08rem;
  font-family:var(--font-body);
  font-weight:700;
}
.menu-list-item p{
  margin-top:.3rem;
  font-size:.85rem;
  color:var(--espresso-70);
  max-width:28rem;
}
.menu-list-price{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--tomato);
  white-space:nowrap;
}

/* =========================================================
   Instagram section
   ========================================================= */
.social{
  padding:clamp(3.5rem,7vw,5.25rem) 0;
  text-align:center;
}
.social-head{ max-width:34rem; margin:0 auto 2.6rem; }
.social-handle{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:1rem;
  font-weight:700;
  color:var(--tomato);
  font-size:1.05rem;
}
.social-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:.9rem;
}
.social-tile{
  aspect-ratio:1/1;
  border-radius:16px;
  overflow:hidden;
  position:relative;
  background:var(--cream-deep);
}
.social-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.social-tile:nth-child(even){ margin-top:1.4rem; }
.social-tile:hover img{ transform:scale(1.1) rotate(1deg); }
.social-tile::after{
  content:"♡";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem;
  color:var(--white);
  background:rgba(58,33,21,.35);
  opacity:0;
  transition:opacity .35s ease;
}
.social-tile:hover::after{ opacity:1; }

/* =========================================================
   Visit
   ========================================================= */
.visit{
  padding:clamp(3.5rem,7vw,5.5rem) 0;
  background:var(--espresso);
  color:var(--cream);
}
.visit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,6vw,5rem);
  align-items:center;
}
.visit-title{ font-size:clamp(2.2rem,4.8vw,3.6rem); color:var(--cream); }
.visit-list{ margin-top:2.2rem; display:flex; flex-direction:column; gap:1.5rem; }
.visit-list li{ display:flex; gap:1rem; }
.visit-ico{
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(251,242,225,.1);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:1.1rem;
}
.visit-list h4{
  font-family:var(--font-body);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--butter);
  margin-bottom:.3rem;
}
.visit-list p, .visit-list a{ color:rgba(251,242,225,.85); font-size:1rem; line-height:1.5; }
.visit-list a:hover{ color:var(--butter); }
.visit-actions{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }

.map-graphic{
  position:relative;
  aspect-ratio:1/1;
  border-radius:28px;
  background:
    radial-gradient(circle at 30% 30%, rgba(242,181,44,.18), transparent 55%),
    repeating-linear-gradient(0deg, rgba(251,242,225,.06) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(251,242,225,.06) 0 1px, transparent 1px 44px);
  border:1px solid rgba(251,242,225,.18);
  overflow:hidden;
}
.map-road{
  position:absolute;
  background:rgba(251,242,225,.16);
}
.map-road.horizontal{ left:0; right:0; top:38%; height:14px; }
.map-road.vertical{ top:0; bottom:0; left:32%; width:14px; }
.map-road-label{
  position:absolute;
  font-family:var(--font-body);
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(251,242,225,.42);
  white-space:nowrap;
}
.map-road-label.label-v{ left:calc(32% + 24px); top:8%; writing-mode:vertical-rl; }
.map-road-label.label-h{ left:4%; top:calc(38% - 22px); }
.map-building{
  position:absolute;
  background:rgba(251,242,225,.07);
  border:1px solid rgba(251,242,225,.13);
  border-radius:5px;
}
.map-building.mb-1{ width:16%; height:14%; left:8%; top:12%; }
.map-building.mb-2{ width:12%; height:10%; left:44%; top:14%; }
.map-building.mb-3{ width:14%; height:12%; left:60%; top:52%; }
.map-building.mb-4{ width:10%; height:9%; left:12%; top:56%; }
.map-building.mb-5{ width:18%; height:11%; left:60%; top:12%; }
.map-pin{
  position:absolute;
  left:32%; top:38%;
  transform:translate(-50%,-100%);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.map-pin-dot{
  width:26px; height:26px;
  background:var(--tomato);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  box-shadow:0 0 0 8px rgba(225,72,31,.22);
  animation:pulse-pin 2.4s ease-in-out infinite;
}
@keyframes pulse-pin{
  0%,100%{ box-shadow:0 0 0 8px rgba(225,72,31,.22); }
  50%{ box-shadow:0 0 0 14px rgba(225,72,31,.1); }
}
.map-pin-label{
  margin-top:.6rem;
  background:var(--cream);
  color:var(--espresso);
  font-weight:700;
  font-size:.8rem;
  padding:.35rem .8rem;
  border-radius:100px;
  white-space:nowrap;
}
.map-caption{
  position:absolute;
  left:1.4rem; bottom:1.4rem;
  right:5.5rem;
  font-size:.78rem;
  color:rgba(251,242,225,.55);
}
.map-note{
  position:absolute;
  right:1.2rem; bottom:1.2rem;
  width:74px; height:74px;
  border-radius:50%;
  background:var(--butter);
  color:var(--espresso);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--font-hand);
  font-weight:700;
  font-size:1rem;
  line-height:1.1;
  transform:rotate(6deg);
  box-shadow:var(--shadow-sm);
  z-index:3;
}

/* =========================================================
   Final CTA
   ========================================================= */
.final-cta{
  padding:clamp(4rem,9vw,6.5rem) 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.final-cta-title{
  font-size:clamp(2.4rem,6.5vw,4.6rem);
  max-width:20ch;
  margin:0 auto;
}
.final-cta-title em{ font-style:italic; color:var(--tomato); }
.final-cta p{
  max-width:30rem;
  margin:1.4rem auto 0;
  color:var(--espresso-70);
  font-size:1.08rem;
}
.final-cta .btn{ margin-top:2.4rem; }
.cta-blob{
  position:absolute;
  width:340px; height:340px;
  border-radius:50%;
  background:var(--butter);
  opacity:.25;
  filter:blur(20px);
  z-index:-1;
}
.cta-blob-1{ top:-140px; left:-100px; }
.cta-blob-2{ bottom:-160px; right:-120px; background:var(--coral); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--espresso);
  color:rgba(251,242,225,.75);
  padding:clamp(3.5rem,7vw,5rem) 0 2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2.5rem;
  padding-bottom:2.6rem;
  border-bottom:1px solid rgba(251,242,225,.14);
}
.footer-brand{ font-family:var(--font-display); font-size:1.8rem; color:var(--cream); }
.footer-tag{ margin-top:.9rem; max-width:22rem; font-size:.95rem; }
.footer-col h5{
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--butter);
  margin-bottom:1.1rem;
}
.footer-col li{ margin-bottom:.7rem; }
.footer-col a:hover{ color:var(--cream); }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  padding-top:1.6rem;
  font-size:.85rem;
}
.footer-hand{ font-family:var(--font-hand); font-size:1.3rem; color:var(--butter); }

/* =========================================================
   Modal
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(58,33,21,.55);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  z-index:1000;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.modal-overlay.is-open{ opacity:1; visibility:visible; }
.modal{
  background:var(--paper);
  border-radius:26px;
  padding:clamp(1.8rem,4vw,2.8rem);
  max-width:520px;
  width:100%;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  box-shadow:var(--shadow-lg);
  transform:translateY(24px) scale(.97);
  transition:transform .4s var(--ease);
}
.modal-overlay.is-open .modal{ transform:translateY(0) scale(1); }
.modal h3{ font-size:1.9rem; margin-bottom:.4rem; }
.modal-sub{ color:var(--espresso-70); font-size:.92rem; margin-bottom:1.6rem; }
.modal-close{
  position:absolute;
  top:1.2rem; right:1.2rem;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  background:transparent;
  font-size:1.3rem;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  color:var(--espresso);
  transition:background .25s ease, transform .25s ease;
}
.modal-close:hover{ background:var(--cream-deep); transform:rotate(90deg); }

.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-group{ margin-bottom:1.1rem; }
.form-group.full{ grid-column:1 / -1; }
.form-group label{
  display:block;
  font-size:.8rem;
  font-weight:700;
  margin-bottom:.4rem;
  color:var(--espresso-70);
}
.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:.75rem .9rem;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:var(--cream);
  color:var(--espresso);
  transition:border-color .25s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:var(--tomato);
  outline:none;
}
.form-group textarea{ resize:vertical; min-height:80px; }
.field-error{
  font-size:.78rem;
  color:var(--tomato-deep);
  margin-top:.35rem;
  display:none;
}
.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea{ border-color:var(--tomato); }
.form-group.has-error .field-error{ display:block; }
.modal-form .btn{ width:100%; margin-top:.6rem; }
.modal-success{ text-align:center; padding:2rem 0; }
.modal-success{ animation:success-pop .5s var(--ease); }
.modal-success-ico{
  width:64px; height:64px;
  border-radius:50%;
  background:var(--leaf);
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.8rem;
  margin:0 auto 1.2rem;
  animation:success-pop .55s var(--ease) .1s backwards;
}
@keyframes success-pop{
  0%{ opacity:0; transform:scale(.7); }
  100%{ opacity:1; transform:scale(1); }
}
.modal-success h4{ font-size:1.4rem; margin-bottom:.5rem; }
.modal-success p{ color:var(--espresso-70); font-size:.95rem; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1080px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ height:380px; order:-1; }
  .intro-grid{ grid-template-columns:1fr; }
  .intro-visual{ max-width:420px; margin:0 auto; }
  .menu-grid{ grid-template-columns:repeat(2,1fr); }
  .visit-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(4,1fr); grid-auto-rows:110px; }
  .gallery-item.g1,.gallery-item.g7{ grid-column:span 2; grid-row:span 2; }
  .gallery-item.g8{ grid-column:span 4; }
  .social-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:860px){
  .main-nav, .nav-cta{ display:none; }
  .hamburger{ display:flex; }
  .menu-list{ grid-template-columns:1fr; }
  .editorial-imgs{ height:320px; }
}

@media (max-width:640px){
  .menu-grid{ grid-template-columns:1fr 1fr; }
  .hero-meta{ gap:1.4rem; flex-wrap:wrap; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .gallery-item{ grid-column:span 1 !important; grid-row:span 2 !important; }
  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  .form-row{ grid-template-columns:1fr; }
  .section-head{ flex-direction:column; align-items:flex-start; }
  .social-grid{ grid-template-columns:repeat(2,1fr); }
  .social-tile:nth-child(even){ margin-top:0; }
  .visit-actions .btn{ width:100%; }
  .visit-actions{ flex-direction:column; }
  .intro-tag{ left:0; bottom:-1.6rem; }
}

@media (max-width:420px){
  .menu-grid{ grid-template-columns:1fr; }
  .menu-list-item{ flex-direction:column; align-items:flex-start; gap:.3rem; }
  .menu-list-price{ font-size:.95rem; }
  .hero-doodle{ display:none; }
  .map-note{ width:60px; height:60px; font-size:.82rem; }
}