/* Cloud Kitchen — shared design system */
:root{
  --cream:#F4EFE6;
  --cream-2:#EDE6D8;
  --olive:#4A5236;
  --olive-deep:#353B27;
  --clay:#C4643B;
  --clay-dark:#A85330;
  --sage:#C9CFAF;
  --peach:#E2B08F;
  --ink:#26251F;
  --line:rgba(38,37,31,.14);
  --line-light:rgba(244,239,230,.14);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Instrument Sans',Helvetica,sans-serif;
  --ease:cubic-bezier(.2,.65,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none}
::selection{background:var(--olive);color:var(--cream)}

/* grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");}

/* page enter */
.page{animation:pageIn .7s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;
  justify-content:space-between;padding:1.1rem 4vw;transition:background .35s ease,box-shadow .35s ease}
nav.scrolled{background:rgba(244,239,230,.92);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line)}
nav.on-dark:not(.scrolled){color:var(--cream)}
nav.on-dark:not(.scrolled) .btn-line{border-color:var(--cream);color:var(--cream)}
.logo{font-family:var(--serif);font-weight:600;font-size:1.35rem;letter-spacing:-.02em}
.logo em{font-style:italic;font-weight:400;color:var(--olive)}
nav.on-dark:not(.scrolled) .logo em{color:var(--sage)}
.nav-links{display:flex;gap:2.2rem;font-size:.85rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.nav-links a{position:relative;padding:.2rem 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--clay);transition:width .3s ease}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--clay)}
nav.on-dark:not(.scrolled) .nav-links a.active{color:var(--peach)}
.nav-cta{display:flex;gap:.7rem;align-items:center}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--sans);font-weight:600;
  font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;padding:.85rem 1.6rem;
  border-radius:999px;border:1.5px solid var(--ink);transition:transform .3s var(--ease),
  background .3s,border-color .3s,color .3s,box-shadow .3s}
.btn:active{transform:scale(.97)}
.btn svg{width:15px;height:15px;flex:0 0 auto}
.btn-solid{background:var(--olive);border-color:var(--olive);color:var(--cream)}
.btn-solid:hover{background:var(--olive-deep);border-color:var(--olive-deep);transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(53,59,39,.5)}
.btn-line:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px)}
.btn-clay{background:var(--clay);border-color:var(--clay);color:#fff}
.btn-clay:hover{background:var(--clay-dark);border-color:var(--clay-dark);transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(196,100,59,.55)}

/* type */
.kicker{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--olive);margin-bottom:1.6rem}
.kicker::before{content:"";width:34px;height:1.5px;background:var(--clay)}
.kicker.light{color:var(--sage)}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,6.6vw,6rem);line-height:1.02;letter-spacing:-.03em}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.4vw,3.6rem);line-height:1.05;letter-spacing:-.025em}
h1 em,h2 em{font-style:italic;color:var(--olive)}
.on-dark h1 em,.on-dark h2 em,#menu-block h2 em{color:var(--sage)}
h1 .clay,h2 .clay{color:var(--clay)}

section{padding:7rem 4vw}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:3.6rem;flex-wrap:wrap}
.sec-head p{max-width:38ch;color:rgba(38,37,31,.7)}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}.d4{transition-delay:.32s}

/* clip reveal — Go Plant Based style image unveil */
.clip{clip-path:inset(12% 12% 12% 12% round 20px);transform:scale(1.08);
  transition:clip-path 1.1s var(--ease),transform 1.1s var(--ease)}
.clip.in{clip-path:inset(0 0 0 0 round 20px);transform:scale(1)}

/* marquee */
.marquee{background:var(--olive);color:var(--cream);overflow:hidden;padding:1rem 0;border-top:1.5px solid var(--olive-deep)}
.marquee-track{display:flex;gap:3rem;white-space:nowrap;animation:scroll 26s linear infinite;
  font-family:var(--serif);font-style:italic;font-size:1.15rem;will-change:transform}
.marquee-track span{display:flex;align-items:center;gap:3rem}
.marquee-track span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--clay)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* footer */
footer.site{background:var(--olive-deep);color:var(--cream);padding:4.5rem 4vw 2.5rem;margin-top:7rem}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid var(--line-light)}
.foot-grid .logo{font-size:1.7rem;color:var(--cream)}
.foot-grid .logo em{color:var(--sage)}
.foot-grid p{color:rgba(244,239,230,.6);max-width:32ch;font-size:.9rem;margin-top:1rem}
.foot-col h4{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,239,230,.5);margin-bottom:1.1rem}
.foot-col a{display:block;padding:.3rem 0;font-size:.92rem;color:rgba(244,239,230,.85);transition:color .3s}
.foot-col a:hover{color:var(--peach)}
.foot-base{display:flex;justify-content:space-between;padding-top:1.6rem;font-size:.8rem;
  color:rgba(244,239,230,.45);flex-wrap:wrap;gap:.6rem}

/* mobile call bar */
.callbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;gap:.6rem;padding:.7rem .8rem;
  background:rgba(244,239,230,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.callbar .btn{flex:1;justify-content:center;padding:.9rem 0}

/* page hero (inner pages) */
.page-hero{min-height:56vh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:9rem 4vw 4rem;position:relative;overflow:hidden}
.page-hero.dark{background:var(--olive-deep);color:var(--cream)}
.page-hero p.lede{max-width:52ch;margin-top:1.4rem;font-size:1.08rem;opacity:.78}

@media(max-width:960px){
  .nav-links{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  section{padding:4.5rem 5vw}
  .nav-cta .btn-line{display:none}
  .callbar{display:flex}
  footer.site{padding-bottom:6.5rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}
