/* Lunchbox Co · concept by Brand Evolution */
:root{
  --cream:#FFF6E5; --paper:#FFFBF2; --turmeric:#F2B632; --turmeric-soft:#FFE3A3; --chilli:#C8432B; --chilli-deep:#9E2F1C;
  --leaf:#2F6B3A; --leaf-deep:#22512B; --ink:#1D2A2E; --ink-soft:#4B5A5F; --steel:#C9D3D9; --sea:#9FD3DE; --route-bg:#183A4A;
  --r:22px; --display:"Bricolage Grotesque", system-ui, sans-serif; --body:"Hind", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font:400 1.08rem/1.6 var(--body); color:var(--ink); background:var(--cream); overflow-x:hidden}
svg{display:block}
h1,h2,h3{font-family:var(--display); line-height:1.02; margin:0 0 .45em; font-weight:800; letter-spacing:-.02em}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--chilli); outline-offset:3px; border-radius:8px}
.skip{position:absolute; left:-999px; top:8px; background:#fff; padding:8px 14px; border-radius:10px; z-index:100}
.skip:focus{left:12px}
.wrap{width:min(1180px, 100% - 32px); margin:0 auto; position:relative; z-index:2}
.two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,72px); align-items:center}
.display{font-size:clamp(2.2rem, 5.2vw, 4.3rem)}
.kicker{font:700 .8rem/1.3 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--chilli-deep); margin-bottom:1rem}
.lead{font-size:clamp(1.08rem,1.5vw,1.24rem); max-width:32em}
.tiny{font-size:.92rem; color:var(--ink-soft); margin-top:1.4rem}
.fine{font-size:.94rem; opacity:.9; margin-top:1.2rem}
.sub{font-size:1.1rem; max-width:34em; color:var(--ink-soft)}

/* svg art */
.defs{overflow:hidden}
.wisp{fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; opacity:0; animation:wisp 2.8s ease-in-out infinite}
.wisp.w1{animation-delay:.9s} .wisp.w2{animation-delay:1.8s}
@keyframes wisp{0%{opacity:0; transform:translateY(10px)} 35%{opacity:.75} 100%{opacity:0; transform:translateY(-24px)}}
html[data-variant="veg"] .v-jain, html[data-variant="jain"] .v-veg{display:none}
html[data-variant="veg"] .vj, html[data-variant="jain"] .vv{display:none}
.tg-k{font:700 11px var(--body); letter-spacing:.14em; fill:var(--turmeric)}
.tg-n{font:800 15px var(--display); fill:#FFF6E5}
.tg-v{font:600 12px var(--body); fill:#C9D3D9}
.tg-p{font:800 28px var(--display); fill:#FFF6E5}
.tg-m{font:700 12px var(--body); fill:#C9D3D9}
.tr-t{font:800 16px var(--display); fill:#F2E6C9}

/* buttons */
.btn{display:inline-flex; align-items:center; font:700 1.05rem var(--display); text-decoration:none; color:#fff; background:var(--chilli);
  padding:.72em 1.5em .66em; border-radius:999px; box-shadow:0 6px 0 var(--chilli-deep); transition:background .2s, box-shadow .2s; will-change:transform}
.btn:hover{background:#B33A23}
.btn:active{box-shadow:0 2px 0 var(--chilli-deep)}
.btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2.5px var(--ink)}
.btn-ghost:hover{background:rgba(29,42,46,.08)}
.btn-small{padding:.5em 1.1em .46em; font-size:.96rem; box-shadow:0 4px 0 var(--chilli-deep)}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:1.6rem}

/* nav: clear over the hero, frosted once scrolled */
.nav{position:fixed; top:12px; left:50%; transform:translateX(-50%); width:min(1180px, 100% - 24px); z-index:60; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:8px 8px 8px 16px; border-radius:999px; background:transparent;
  transition:background .35s, box-shadow .35s, backdrop-filter .35s}
.nav.scrolled{background:rgba(255,246,229,.82); backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3); box-shadow:0 6px 24px rgba(29,42,46,.14)}
.logo{display:flex; align-items:center; gap:8px; text-decoration:none; font:800 1.3rem var(--display); letter-spacing:-.02em}
.logo svg{width:32px; height:32px}
.nav nav{display:flex; gap:22px}
.nav nav a{text-decoration:none; font-weight:600; font-size:1rem}
.nav nav a:hover{color:var(--chilli)}

/* sections + torn paper */
.sec{scroll-margin-top:80px; position:relative; padding:clamp(96px,12vw,160px) 0 clamp(80px,10vw,140px)}
.tear{position:absolute; left:0; right:0; top:-38px; height:40px; z-index:3; pointer-events:none; color:var(--bg)}
.tear svg{width:100%; height:100%}
.tear-main{fill:currentColor}
.tear-fringe{fill:#fff; opacity:.9}
.sec::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.28; mix-blend-mode:multiply; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.hero{--bg:var(--turmeric-soft); background:radial-gradient(120% 90% at 80% 20%, #FFF1CC 0%, #FFE3A3 45%, #FBCB6A 100%); min-height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding-top:120px; padding-bottom:110px}
.kitchen{--bg:var(--leaf); background:var(--leaf); color:#FFF6E5}
.kitchen .kicker{color:#FFD98A}
.menu{--bg:var(--cream); background:var(--cream)}
.route{--bg:var(--route-bg); background:var(--route-bg); color:#FFF6E5}
.route .kicker{color:#FFD98A}
.plans{--bg:var(--paper); background:var(--paper)}
.foot{--bg:var(--ink); background:var(--ink); color:#FFF6E5; padding-bottom:90px}

/* hero */
.sun{position:absolute; width:min(60vw,680px); aspect-ratio:1; right:-12vw; top:-14vw; border-radius:50%; z-index:0;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.28) 0 6deg, transparent 6deg 18deg); animation:spin 90s linear infinite;
  -webkit-mask:radial-gradient(circle, #000 30%, transparent 70%); mask:radial-gradient(circle, #000 30%, transparent 70%)}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center}
.hero h1{font-size:clamp(2.7rem, 6.4vw, 5.5rem)}
.hero-copy > *{animation:rise .7s cubic-bezier(.2,.9,.3,1.2) both}
.hero-copy > :nth-child(2){animation-delay:.08s} .hero-copy > :nth-child(3){animation-delay:.18s}
.hero-copy > :nth-child(4){animation-delay:.26s} .hero-copy > :nth-child(5){animation-delay:.34s}
@keyframes rise{from{opacity:0; transform:translateY(26px)}}
.hero-art{position:relative; justify-self:center; width:min(38vw, 440px); z-index:2}
.dock{position:relative; aspect-ratio:1; width:100%}
.dock .static{width:100%; height:100%; overflow:visible}
html.fly .dock .static{visibility:hidden}
.dock-side{width:min(34vw, 400px); justify-self:center}
.dock-tier{width:min(32vw, 380px); justify-self:center}
.dock-card{width:min(36vw, 420px); justify-self:center}

#obj{position:absolute; inset:0; pointer-events:none}
#obj .intro{position:absolute; inset:0}
#obj svg{width:100%; height:100%; overflow:visible}
#obj.flying{position:fixed; inset:auto; left:0; top:0; width:400px; height:400px; z-index:30; transform-origin:0 0; will-change:transform}

/* Ganpat the lunchbox carrier: pops up and talks with CSS only, so the hero is alive before any library loads */
#obj .intro{animation:drop 1s cubic-bezier(.3,1.45,.5,1) .1s backwards}
@keyframes drop{from{opacity:0; transform:translateY(-34%) rotate(8deg)}}
.dw{animation:popup .8s cubic-bezier(.3,1.6,.5,1) .7s backwards}
@keyframes popup{from{opacity:0; transform:translateY(50%) scale(.6)}}
.dw .bubble{animation:bub .55s cubic-bezier(.3,1.8,.5,1) 1.3s backwards}
.dw.again .bubble{animation:bub2 .55s cubic-bezier(.3,1.8,.5,1) backwards}
.dw.again svg{animation:wob .5s ease-in-out}
@keyframes bub{from{opacity:0; transform:scale(0) rotate(-14deg)}}
@keyframes bub2{from{opacity:0; transform:scale(0) rotate(-14deg)}}
@keyframes wob{25%{transform:rotate(-5deg)} 75%{transform:rotate(4deg)}}
.dw .eye{animation:blink 4.2s 2.5s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)} 97%{transform:scaleY(.1)}}

.dw{position:absolute; left:-2%; bottom:-8%; width:36%; border:0; padding:0; background:none; cursor:pointer; z-index:3; transform-origin:50% 100%}
.dw svg{width:100%; height:auto; overflow:visible; filter:drop-shadow(0 10px 14px rgba(29,42,46,.2))}
.dw .eye{transform-box:fill-box; transform-origin:50% 50%}
.dw .cap{transform-box:fill-box; transform-origin:20% 100%}
.dw .bubble{position:absolute; left:62%; top:-34%; font:800 clamp(18px,2vw,26px)/1 var(--display); color:var(--ink); background:#fff; padding:12px 16px 9px;
  border-radius:20px; white-space:nowrap; box-shadow:0 7px 0 rgba(29,42,46,.1), 0 14px 28px rgba(29,42,46,.16); transform-origin:0% 100%}
.dw .bubble::after{content:""; position:absolute; left:14px; bottom:-14px; border:10px solid transparent; border-top:16px solid #fff; border-bottom:0; transform:skewX(-18deg)}

.marquee{position:absolute; left:0; right:0; bottom:0; z-index:2; overflow:hidden; background:var(--ink); color:var(--turmeric-soft); padding:12px 0 10px; transform:rotate(-1.2deg) translateY(10px)}
.mq-track{display:flex; gap:40px; width:max-content; animation:mq 38s linear infinite; font:700 1.05rem var(--display); white-space:nowrap}
.mq-track span::before{content:"✦"; margin-right:40px; color:var(--chilli)}
@keyframes mq{to{transform:translateX(-50%)}}

/* kitchen */
.stats{list-style:none; padding:0; margin:1.6rem 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.stats li{background:rgba(255,246,229,.1); border-radius:18px; padding:14px; box-shadow:inset 0 0 0 1.5px rgba(255,246,229,.25)}
.stats b{display:block; font:800 clamp(1.7rem,3vw,2.4rem)/1 var(--display); color:var(--turmeric)}
.stats span{font-size:.92rem}

/* menu tiers */
.tiers{list-style:none; margin:2rem 0 0; padding:0}
.tier-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,72px); align-items:center; min-height:76vh; padding:4vh 0}
.tier-copy{max-width:30em}
.tier-ph{display:block;width:132px;height:132px;border-radius:50%;object-fit:cover;margin:0 0 18px;box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
.tier-copy h3{font-size:clamp(2.2rem,4.4vw,3.6rem); margin-bottom:.2em}
.tnum{display:inline-block; font:700 .85rem var(--body); letter-spacing:.12em; text-transform:uppercase; background:var(--ink); color:var(--turmeric-soft); padding:5px 12px 3px; border-radius:999px; margin-bottom:12px}
.facts{display:inline-block; font-weight:600; font-size:.95rem; background:#fff; border-radius:12px; padding:6px 12px; box-shadow:0 4px 0 rgba(242,182,50,.45)}

/* route */
.route-grid{align-items:start}
.legs{list-style:none; padding:0; margin:0 0 1.6rem; display:grid; gap:10px}
.legs li{display:flex; gap:14px; align-items:baseline; padding:10px 14px; border-radius:14px; background:rgba(255,246,229,.07); box-shadow:inset 0 0 0 1.5px rgba(255,246,229,.16)}
.legs time{flex:none; min-width:52px; font:800 1.05rem var(--display); color:var(--turmeric)}
.areas-h{font-size:1.3rem; margin-top:.4em}
.chips{list-style:none; padding:0; margin:0 0 1rem; display:flex; flex-wrap:wrap; gap:8px}
.chips li{background:rgba(255,246,229,.12); color:#FFF6E5; border-radius:999px; padding:6px 14px 4px; font-weight:600; font-size:.98rem; transition:transform .2s, background .2s}
.chips li:hover{transform:translateY(-3px) rotate(-2deg); background:var(--chilli)}
.map{position:relative; aspect-ratio:3/4; width:min(100%, 470px); justify-self:center; background:#F4EBD6; border-radius:26px; color:var(--ink);
  box-shadow:inset 0 0 0 3px rgba(29,42,46,.08), 0 18px 40px rgba(0,0,0,.3)}
.map > svg{position:absolute; inset:0; width:100%; height:100%; border-radius:26px; overflow:hidden}
.sea{fill:var(--sea)}
.sea-line{fill:none; stroke:#fff; stroke-width:.6; opacity:.8}
.road{fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round}
.rail{fill:none; stroke:#5B676C; stroke-width:1.1; stroke-linejoin:round}
.rail-ties{fill:none; stroke:#5B676C; stroke-width:2.4; stroke-dasharray:.4 1.4; stroke-linejoin:round}
.lead-l{fill:none; stroke:#8A969B; stroke-width:.35; stroke-dasharray:.8 .8}
.route{fill:none; stroke:var(--chilli); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.stn{fill:#fff; stroke:#5B676C; stroke-width:.5}
.office{fill:var(--turmeric); stroke:var(--ink); stroke-width:.4}
.pin{position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--chilli); box-shadow:0 0 0 4px rgba(200,67,43,.25); animation:pulse 2.4s ease-out infinite}
.pin-office{background:var(--turmeric); box-shadow:0 0 0 4px rgba(242,182,50,.35)}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(200,67,43,0)}}
.lbl{position:absolute; left:66%; right:3%; transform:translateY(-50%); font:500 .85rem/1.15 var(--body)}
.lbl b{display:block; font:800 .95rem/1.1 var(--display)}
.lbl.small{font-size:.8rem; color:var(--ink-soft)}
.sea-lbl{position:absolute; left:3%; top:50%; transform:translateY(-50%) rotate(-90deg); transform-origin:50% 50%; font:700 .72rem var(--body); letter-spacing:.2em; text-transform:uppercase; color:#2C6F7E; white-space:nowrap; width:22%; text-align:center}
.clock{position:absolute; left:4%; top:3%; font:800 1.05rem var(--display); background:var(--ink); color:var(--turmeric); padding:5px 12px 3px; border-radius:10px; font-variant-numeric:tabular-nums}

/* plans */
.plans-top{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,5vw,72px); align-items:center}
.switch{position:relative; display:inline-grid; grid-template-columns:1fr 1fr; background:#EADFC8; border-radius:999px; padding:6px; margin-top:4px; box-shadow:inset 0 3px 8px rgba(29,42,46,.15)}
.switch button{position:relative; z-index:1; border:0; background:none; color:var(--ink); font:700 1.05rem var(--display); padding:.55em 1.6em .45em; border-radius:999px; cursor:pointer; transition:color .3s}
.switch button[aria-pressed="true"]{color:#fff}
.switch .knob{position:absolute; top:6px; bottom:6px; left:6px; width:calc(50% - 6px); border-radius:999px; background:var(--leaf);
  box-shadow:0 4px 0 rgba(0,0,0,.18); transition:transform .45s cubic-bezier(.5,1.6,.4,1), background .5s}
html[data-variant="jain"] .switch .knob{transform:translateX(100%); background:var(--chilli)}
.note{max-width:30em; margin:12px 0 0; font-size:1rem; color:var(--ink-soft)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:clamp(24px,4vw,48px)}
.card{position:relative; display:block; width:100%; text-align:left; font:inherit; color:var(--ink); background:#fff; border:0; border-radius:var(--r); padding:22px 24px;
  cursor:pointer; box-shadow:0 8px 0 rgba(29,42,46,.1), 0 18px 34px rgba(29,42,46,.1); transition:transform .25s ease-out, background .25s}
.card > span{display:block}
.card .plan-name{font:800 1.45rem/1.1 var(--display); margin-bottom:.3em}
.card[aria-checked="true"]{background:#FFF1CC; box-shadow:0 0 0 4px var(--turmeric), 0 8px 0 rgba(29,42,46,.1), 0 18px 34px rgba(29,42,46,.12)}
.tag{position:absolute; right:18px; top:-12px; background:var(--leaf); color:#fff; font:700 .8rem var(--display); padding:4px 12px 2px; border-radius:999px}
.price{font:800 1.8rem var(--display); margin-top:.4em}
.price small{font:600 .95rem var(--body); opacity:.75}

/* footer */
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(20px,4vw,56px); align-items:center}
.foot .display{font-size:clamp(1.9rem,3.8vw,3rem)}
.foot .btn{background:var(--turmeric); color:var(--ink); box-shadow:0 6px 0 #B9861A}
.foot .btn:hover{background:#FFCB55}
.foot-meta{font-size:.98rem; opacity:.92}
.copy{text-align:center; font-size:.88rem; opacity:.75; margin:48px 0 0; position:relative; z-index:2}

.badge{position:fixed; left:12px; bottom:12px; z-index:70; font:700 .8rem var(--body); text-decoration:none; color:#fff; background:rgba(29,42,46,.92); padding:7px 12px 5px; border-radius:999px}
.badge:hover{background:var(--chilli)}

@media (max-width:860px){
  .nav nav{display:none}
  .two,.hero-grid,.foot-grid,.plans-top,.tier-row{grid-template-columns:1fr}
  .hero{min-height:auto; padding-top:110px; padding-bottom:120px}
  .hero-art{width:min(66vw, 290px); margin:28px 0 0 auto}
  .dw{left:-40%; width:46%}
  .dock-side,.dock-tier,.dock-card{width:min(66vw, 300px)}
  .kitchen .two > .dock{order:-1}
  .tier-row{min-height:0; padding:28px 0; gap:12px}
  .tier-row .dock{order:-1}
  .tier-ph{width:96px;height:96px;margin-bottom:12px}
  .cards{grid-template-columns:1fr}
  .stats{gap:8px}
  .stats li{padding:10px}
}
@media (max-width:420px){
  .btn-small{font-size:.86rem; padding:.48em .9em .42em}
  .logo{font-size:1.15rem}
  .lbl{left:64%; font-size:.76rem}
  .lbl b{font-size:.82rem}
  .lbl.small{font-size:.72rem}
}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important} .wisp{opacity:.5} }