/* ============ Vasundhara — shared styles ============ */
:root{
  --cream: oklch(0.972 0.018 85);
  --cream-2: oklch(0.94 0.022 85);
  --cream-3: oklch(0.88 0.03 80);
  --ink: oklch(0.18 0.015 60);
  --ink-2: oklch(0.32 0.02 60);
  --ink-3: oklch(0.5 0.02 60);
  --amber: oklch(0.74 0.16 72);
  --amber-deep: oklch(0.58 0.17 55);
  --amber-light: oklch(0.86 0.12 80);
  --olive: oklch(0.42 0.07 120);
  --line: oklch(0.85 0.02 80);
  --serif: "Instrument Serif", "Cormorant Garamond", serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Keep anchor targets clear of the fixed nav */
[id]{scroll-margin-top:96px}
@media (max-width:960px){[id]{scroll-margin-top:80px}}
body{
  font-family:var(--sans);background:var(--cream);color:var(--ink);
  font-weight:400;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 40px;
  background:color-mix(in oklab, var(--cream) 88%, transparent);
  backdrop-filter:saturate(1.3) blur(14px);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease, color .35s ease;
}
.nav.scrolled{
  background:color-mix(in oklab, var(--cream) 88%, transparent);
  backdrop-filter:saturate(1.3) blur(14px);
  -webkit-backdrop-filter:saturate(1.3) blur(14px);
  border-bottom-color:var(--line);
}
.nav:has(.mobile-open){background:var(--cream)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom-color:var(--line)!important;transition:none!important}

.nav.dark{color:var(--cream)}
.nav.dark.scrolled{background:color-mix(in oklab, var(--ink) 75%, transparent);border-bottom-color:oklch(0.3 0.02 60)}
.nav.dark .nav-links a{color:oklch(0.8 0.02 80)}
.nav.dark .nav-links a:hover{color:var(--cream)}
.nav.dark .nav-cta{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.nav.dark .hamburger span{background:var(--cream)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:24px;letter-spacing:.2px}
.logo-mark{
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, oklch(0.88 0.14 80), var(--amber-deep) 70%);
  box-shadow: inset -2px -3px 6px oklch(0.4 0.15 50 / .4), 0 6px 16px oklch(0.6 0.15 60 / .25);
  position:relative;flex:none;
}
.logo-mark::after{
  content:"";position:absolute;top:6px;left:8px;width:10px;height:6px;border-radius:50%;
  background:oklch(0.98 0.02 85 / .75);filter:blur(1px);
}
.logo em{font-style:italic;color:var(--amber-deep)}
.nav.dark .logo em{color:var(--amber)}
.nav-links{display:flex;gap:32px;font-size:14px;font-family:var(--sans);text-transform:none;letter-spacing:normal;align-items:center}
.nav-links a{position:relative;padding:6px 0;color:var(--ink-2);font-family:var(--sans);font-size:14px;font-weight:400;text-transform:none;letter-spacing:normal;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-cta{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 20px;border:1px solid var(--ink);border-radius:999px;
  background:var(--ink);color:var(--cream);transition:all .25s;
}
.nav-cta:hover{background:var(--amber-deep);border-color:var(--amber-deep)}
.nav-cta.wa-cta{display:inline-flex;align-items:center;gap:8px}
.nav-cta .wa-ico{width:16px;height:16px;display:block;color:currentColor}

/* ============ KITCHEN DISH IMAGES (product pages) ============ */
.dish .dish-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;z-index:0;
  filter:saturate(1.05) contrast(1.02);
  transition:transform 1.2s cubic-bezier(.22,1,.36,1);
}
.dish:hover .dish-img{transform:scale(1.06)}
.hamburger{display:none;width:36px;height:36px;position:relative;z-index:60}
.hamburger span{position:absolute;left:6px;right:6px;height:1.5px;background:var(--ink);transition:transform .3s, top .3s, opacity .2s}
.hamburger span:nth-child(1){top:12px}
.hamburger span:nth-child(2){top:18px}
.hamburger span:nth-child(3){top:24px}
.hamburger.open span:nth-child(1){top:18px;transform:rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){top:18px;transform:rotate(-45deg)}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:16px 26px;border-radius:999px;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  transition:transform .25s, background .25s, color .25s, border-color .25s;
}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:var(--amber-deep);transform:translateY(-1px)}
.btn-ghost{border:1px solid currentColor}
.btn-ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn .arrow{transition:transform .25s}
.btn:hover .arrow{transform:translateX(4px)}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}

.split-line{display:block;overflow:hidden}
.split-line>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.split-line.in>span{transform:translateY(0)}

/* ============ FOOTER ============ */
.foot{background:var(--ink);color:oklch(0.82 0.02 80);padding:80px 40px 40px}
.foot-grid{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;padding-bottom:60px;border-bottom:1px solid oklch(0.3 0.02 60)}
.foot h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);margin-bottom:20px}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot ul a:hover,.foot ul li:hover{color:var(--amber)}
.foot-brand p{max-width:360px;font-size:14px;line-height:1.6;margin-top:14px}
.foot-bot{max-width:1400px;margin:40px auto 0;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:oklch(0.6 0.02 80)}

/* ============ MOBILE ============ */
@media (max-width: 960px){
  .nav{padding:16px 20px}
  .nav-links{display:none}
  .nav-cta{display:none}
  .hamburger{display:block}
  .nav-links.mobile-open{
    display:flex;flex-direction:column;
    position:fixed;top:90px;left:0;right:0;bottom:0;
    background:var(--cream);padding:40px 24px;gap:12px;z-index:49;
    animation:slideDown .3s ease;
  }
  .nav.dark .nav-links.mobile-open{background:var(--ink)}
  .nav.dark .nav-links.mobile-open a{color:var(--cream);border-bottom-color:oklch(0.3 0.02 60)}
  .nav-links.mobile-open a{font-family:var(--serif);font-size:34px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink)}
  .nav-links.mobile-open a::after{display:none}
  @keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
  .foot{padding:60px 20px 30px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px;padding-bottom:40px}
  .foot-bot{flex-direction:column;gap:10px;align-items:center;text-align:center;margin-top:24px}
}

/* ============ BRAND LOGO IMAGE (shared) ============ */
.logo{gap:0}
.logo .logo-img{height:69px;width:69px;display:block;object-fit:contain;transition:transform .25s}
.logo:hover .logo-img{transform:scale(1.04)}
.foot .logo .logo-img{height:81px;width:81px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
@media (max-width:960px){
  .logo .logo-img{height:60px;width:60px}
  .foot .logo .logo-img{height:72px;width:72px}
}

/* ============ WHATSAPP FLOAT (shared) ============ */
.wa{
  position:fixed;left:22px;bottom:22px;z-index:60;
  width:56px;height:56px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px rgba(37,211,102,.45);
  transition:transform .3s;
}
.wa:hover{transform:scale(1.08)}
.wa img{width:32px;height:32px}

/* ============ FOOTER ALIASES (for newer pages that use .foot-cols) ============ */
/* On .foot (dark) — match index.html */
.foot .foot-cols{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;padding-bottom:60px;border-bottom:1px solid oklch(0.3 0.02 60)}
.foot .foot-cols h4{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);margin-bottom:20px}
.foot .foot-cols ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot .foot-cols li{font-size:14px;margin:0}
.foot .foot-cols a{color:oklch(0.82 0.02 80);text-decoration:none;transition:color .2s}
.foot .foot-cols a:hover{color:var(--amber)}
.foot .foot-brand p{max-width:360px;font-size:14px;line-height:1.6;margin-top:14px;color:oklch(0.82 0.02 80)}
.foot .foot-bot{color:oklch(0.6 0.02 80)}
@media (max-width:960px){
  .foot .foot-cols{grid-template-columns:1fr 1fr;gap:30px;padding-bottom:40px}
}