:root{
--saffron:#E9A23A; --saffron-2:#F4BB55; --saffron-deep:#C8801A;
--char:#17130C; --char-2:#20190F; --char-3:#2C2316;
--cream:#F7F0DE; --cream-2:#FCF7EC; --card:#FFFDF6;
--chili:#A83527; --chili-2:#7E2519;
--ink:#241D12; --muted:#71654F; --line:rgba(23,19,12,.12);
--gold:#E9A23A; --shadow:0 24px 60px -24px rgba(23,19,12,.45);
--r:18px; --maxw:1220px;
/* from the illustrated storefront */
--wall:#F6C445; --wall-2:#FBD463; --brick:#C9662A; --neon:#3ECFC6;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Mukta',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Rozha One',Georgia,serif;font-weight:400;line-height:1.02;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,48px)}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--saffron-deep);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"โ";color:var(--saffron-deep);font-size:13px}
.eyebrow.on-dark::before{color:var(--saffron)}
.eyebrow.on-dark{color:var(--saffron-2)}
.mono{font-family:'JetBrains Mono',monospace;letter-spacing:.06em}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:15px 28px;border-radius:100px;cursor:pointer;border:1.5px solid transparent;transition:.28s cubic-bezier(.2,.7,.3,1);white-space:nowrap}
.btn-primary{background:var(--saffron);color:#231a0c;box-shadow:0 10px 26px -10px rgba(233,162,58,.8)}
.btn-primary:hover{background:var(--saffron-2);transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(233,162,58,.9)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:var(--saffron);color:var(--saffron-2);transform:translateY(-2px)}
.btn-dark{background:var(--char);color:var(--cream)}
.btn-dark:hover{background:var(--char-3);transform:translateY(-2px)}
.btn-outline{border-color:var(--line);color:var(--ink)}
.btn-outline:hover{border-color:var(--saffron-deep);color:var(--saffron-deep)}
.btn-wa{background:#25D366;color:#0a2e17;box-shadow:0 10px 26px -10px rgba(37,211,102,.7)}
.btn-wa:hover{background:#2ee36f;transform:translateY(-2px)}
/* announcement bar */
.topbar{background:var(--char);color:#d8cdb6;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:38px}
.topbar b{color:var(--saffron-2);font-weight:600}
.topbar .tb-phone{color:var(--saffron-2);font-weight:600}
.topbar .tb-r{display:flex;gap:22px;align-items:center}
@media(max-width:760px){
.topbar .tb-l,.topbar #tbHours,.topbar .tb-addr{display:none}
.topbar .wrap{justify-content:center}
.topbar .tb-r{gap:0}
.topbar .tb-phone::before{content:"๐ "}
}
/* header */
header{position:sticky;top:0;z-index:60;background:rgba(247,240,222,.82);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:.3s}
header.scrolled{background:rgba(247,240,222,.96);border-bottom-color:var(--line);box-shadow:0 8px 30px -18px rgba(23,19,12,.35)}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px;gap:24px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:50px;height:50px}
.brand .bt{line-height:1.05}
.brand .bt b{font-family:'Rozha One',serif;font-size:22px;letter-spacing:.02em;display:block;color:var(--char)}
.brand .bt small{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--saffron-deep)}
.menu{display:flex;gap:34px;align-items:center}
.menu a{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);position:relative;padding:4px 0;white-space:nowrap}
.menu a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--saffron);transition:.28s}
.menu a:hover::after{width:100%}
.nav-r{display:flex;align-items:center;gap:16px}
.cart{position:relative;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;cursor:pointer;transition:.25s;background:transparent}
.cart:hover{border-color:var(--saffron-deep)}
.cart svg{width:19px;height:19px}
.cart .count{position:absolute;top:-4px;right:-4px;background:var(--chili);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;min-width:18px;height:18px;border-radius:50%;display:grid;place-items:center;transform:scale(0);transition:.25s}
.cart .count.show{transform:scale(1)}
.burger{display:none;flex-direction:column;gap:5px;width:44px;height:44px;border:1.5px solid var(--line);border-radius:12px;align-items:center;justify-content:center;cursor:pointer;background:transparent}
.burger span{width:20px;height:2px;background:var(--char);transition:.3s}
/* Between the burger breakpoint and about 1220 the row is over-full: six links
at 34px gaps leave the wordmark too little and it folds onto three lines.
Tightening the links gives it most of that back. Deliberately NOT
`white-space:nowrap` on the wordmark โ the row is genuinely wider than the
space at 1024, and forbidding the wrap turns a squeeze into a horizontal
scrollbar. Folding to the burger earlier would fix it outright, but that is
a change to how the whole site navigates and belongs in its own decision. */
@media(max-width:1220px){
.menu{gap:20px}
.menu a{font-size:11.5px;letter-spacing:.06em}
}
@media(max-width:940px){
.menu,.nav-r .btn,.signin{display:none}
.burger{display:flex}
.nav{height:64px;gap:14px}
.brand{gap:11px}
.brand img{width:42px;height:42px}
.brand .bt b{font-size:19px}
.brand .bt small{font-size:9px;letter-spacing:.16em;white-space:nowrap}
}
@media(max-width:420px){
.nav{height:58px}
.brand img{width:38px;height:38px}
.brand .bt b{font-size:18px}
.brand .bt small{display:none}
.cart{width:42px;height:42px}
.burger{width:42px;height:42px}
}
/* mobile nav */
.mnav{position:fixed;inset:0;z-index:100;background:var(--char);color:var(--cream);display:flex;flex-direction:column;padding:28px;transform:translateX(100%);transition:.4s cubic-bezier(.6,.05,.2,1)}
.mnav.open{transform:translateX(0)}
.mnav-top{display:flex;justify-content:space-between;align-items:center}
.mnav-top .brand .bt b{color:var(--cream)}
.mnav-x{width:46px;height:46px;border:1.5px solid rgba(255,255,255,.25);border-radius:50%;color:#fff;font-size:22px;background:transparent;cursor:pointer}
.mnav nav{display:flex;flex-direction:column;gap:6px;margin-top:40px}
.mnav nav a{font-family:'Rozha One',serif;font-size:34px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mnav nav a span{color:var(--saffron);font-family:'JetBrains Mono',monospace;font-size:12px;margin-right:14px;vertical-align:middle}
.mnav .mfoot{margin-top:auto;font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;color:#f2d9c2;line-height:2}
.mnav .mfoot b{color:var(--saffron-2)}
/* HERO */
.hero{position:relative;background:var(--char);color:var(--cream);overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;background-image:url(../img/pattern-terra.jpg);background-size:cover;background-position:center;opacity:.16;mix-blend-mode:screen;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 82% 30%,rgba(233,162,58,.12),transparent 55%),linear-gradient(180deg,rgba(23,19,12,.25),rgba(23,19,12,.6));z-index:-1}
.hero-medallion{position:absolute;right:-260px;top:50%;transform:translateY(-50%);width:760px;opacity:.10;mix-blend-mode:screen;z-index:-1;pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:38px;padding-bottom:64px}
.hero-badge{display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(233,162,58,.4);background:rgba(233,162,58,.08);border-radius:100px;padding:9px 18px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-2)}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--saffron);box-shadow:0 0 0 4px rgba(233,162,58,.25)}
.hero h1{font-size:clamp(52px,7.3vw,104px);margin:26px 0 8px;color:var(--cream)}
.hero h1 .hl{color:var(--saffron)}
.hero .sub{font-size:clamp(16px,1.5vw,19px);color:#f4e0cc;max-width:490px;margin-top:14px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-stats{display:flex;gap:34px;margin-top:44px;padding-top:28px;border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.hero-stats .s b{font-family:'Rozha One',serif;font-size:34px;color:var(--saffron-2);display:block;line-height:1}
.hero-stats .s span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#eccdb2}
.hero-media{position:relative}
.hero-frame{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(233,162,58,.35);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.hero-frame img{width:100%;height:560px;object-fit:cover;transform:scale(1.02)}
.hero-frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);border-radius:24px}
.price-badge{position:absolute;left:-22px;bottom:36px;background:var(--saffron);color:#231a0c;border-radius:50%;width:104px;height:104px;display:grid;place-content:center;text-align:center;box-shadow:var(--shadow);border:3px solid var(--cream);rotate:-8deg}
.price-badge b{font-family:'Rozha One',serif;font-size:30px;line-height:.8}
.price-badge span{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.veg-tag{position:absolute;right:-14px;top:26px;background:var(--card);color:var(--ink);border-radius:100px;padding:10px 16px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.08em;box-shadow:var(--shadow);display:flex;align-items:center;gap:8px}
.veg-tag .vd{width:14px;height:14px;border:2px solid #2f7d32;border-radius:3px;display:grid;place-items:center}
.veg-tag .vd::after{content:"";width:6px;height:6px;background:#2f7d32;border-radius:50%}
@media(max-width:940px){
.hero .wrap{grid-template-columns:1fr;gap:30px;text-align:center;padding-top:38px;padding-bottom:46px}
.hero-badge,.eyebrow{justify-content:center}
.hero h1{font-size:clamp(40px,8.6vw,64px);margin:14px 0 8px}
.hero .sub{margin-inline:auto;font-size:16px}
.hero-cta,.hero-stats{justify-content:center}
.hero-cta{margin-top:24px}
.hero-stats{margin-top:30px;padding-top:22px;gap:24px}
.hero-frame img{height:300px}
/* copy first, image below โ value + CTA above the fold, not just a big picture */
.hero-media{order:0;margin-top:2px}
}
@media(max-width:560px){
.hero .wrap{gap:24px;padding-top:16px;padding-bottom:34px}
.hero h1{font-size:clamp(34px,10vw,46px)}
.hero .sub{font-size:15px}
.hero-cta{gap:10px;margin-top:20px}
.hero-cta .btn{width:100%;justify-content:center}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:20px;justify-items:center;margin-top:26px}
.hero-stats .s{text-align:center}
.hero-stats .s b{font-size:30px}
.hero-frame img{height:248px}
.price-badge{width:76px;height:76px;left:-6px;bottom:18px}
.price-badge b{font-size:23px}
}
/* marquee */
.marquee{background:var(--saffron);color:#231a0c;padding:16px 0;overflow:hidden;white-space:nowrap;border-block:2px solid var(--char)}
/* JS-driven (rAF in site.js): CSS animations freeze on iOS after bfcache
restores / tab switches, so the scroll position is advanced per-frame instead */
.marquee-track{display:inline-flex;gap:0;will-change:transform}
.marquee-track span{font-family:'Rozha One',serif;font-size:24px;padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.marquee-track span::after{content:"โ";font-size:15px;opacity:.75}
/* sections generic */
section{position:relative}
.pad{padding:clamp(34px,4.5vw,56px) 0}
.sec-head{max-width:640px}
/* centered headings get room for one full line; their paragraphs stay at a readable measure */
.sec-head.center{margin:0 auto;text-align:center;max-width:900px}
.sec-head.center p{max-width:640px;margin-left:auto;margin-right:auto}
.sec-head h2{font-size:clamp(38px,5vw,66px);margin:16px 0 0;color:var(--char)}
.sec-head.center .eyebrow{justify-content:center}
/* tighten every section on phones so there's less scrolling between blocks */
@media(max-width:560px){
.pad{padding:30px 0}
.sec-head h2{font-size:clamp(30px,8.4vw,40px)}
.sec-head{max-width:100%}
.lead,.sec-head p{font-size:15.5px}
}
.dark{background:var(--char);color:var(--cream)}
.dark h2{color:var(--cream)}
.dark .sec-head p,.dark p.lead{color:#f2d9c2}
.textured-cream{background:var(--cream)}
.textured-cream::before{content:"";position:absolute;inset:0;background-image:url(../img/tex-cream.jpg);background-size:440px;opacity:.28;pointer-events:none;z-index:0}
.textured-cream>*{position:relative;z-index:1}
.dark.textured::before{content:"";position:absolute;inset:0;background-image:url(../img/pattern-terra.jpg);background-size:cover;background-position:center;opacity:.16;mix-blend-mode:screen;pointer-events:none;z-index:0}
.dark.textured>*{position:relative;z-index:1}
/* story */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.story-media{position:relative}
.story-media img{width:100%;height:540px;object-fit:cover;border-radius:20px;box-shadow:var(--shadow)}
.story-media .frame{position:absolute;inset:14px;border:1px solid var(--saffron);border-radius:14px;pointer-events:none;mix-blend-mode:overlay}
.story-media .est{position:absolute;right:-20px;bottom:-20px;background:var(--char);color:var(--cream);border-radius:16px;padding:18px 22px;box-shadow:var(--shadow);text-align:center;border:1px solid rgba(233,162,58,.4)}
.story-media .est b{font-family:'Rozha One',serif;font-size:30px;color:var(--saffron-2);display:block;line-height:1}
.story-media .est span{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#eccdb2}
.story-text p{color:var(--muted);font-size:17px;margin-top:20px;max-width:520px}
.story-text .btn{margin-top:32px}
.story-badges{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.chip{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:9px 15px;border:1px solid var(--line);border-radius:100px;color:var(--ink);background:var(--card);display:flex;align-items:center;gap:8px}
.chip b{color:var(--saffron-deep)}
.story-media.illustrated img{height:auto;aspect-ratio:4/3;object-fit:cover}
.story-cast{margin-top:60px;text-align:center}
.story-cast img{width:min(720px,94%);display:block;margin:0 auto}
.cast-note{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#9a8b68;margin-top:6px}
@media(max-width:900px){.story-grid{grid-template-columns:1fr;gap:34px}.story-media img{height:340px}}
@media(max-width:560px){
.story-media img{height:270px}
.story-media .est{right:12px;bottom:-14px;padding:14px 18px}
.story-media .est b{font-size:26px}
.story-text p{font-size:15.5px;margin-top:16px}
.story-text .btn{margin-top:26px}
.story-badges{gap:10px;margin-top:26px}
.story-cast{margin-top:26px}
.story-cast img{width:100%}
.cast-note{font-size:8.5px;letter-spacing:.1em;margin-top:2px}
}
/* weekly tiffin banner */
.tiffin{position:relative;background:var(--chili);color:#fff;overflow:hidden;isolation:isolate}
.tiffin::before{content:"";position:absolute;inset:0;background-image:url(../img/tex-dark.jpg);background-size:360px;opacity:.16;mix-blend-mode:screen;z-index:-1}
.tiffin .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.tiffin-media img{width:100%;height:360px;object-fit:cover;border-radius:20px;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.14)}
.tiffin h2{color:#fff;font-size:clamp(34px,4.4vw,56px);margin-top:12px}
.tiffin .t-desc{color:#f4d9cf;font-size:17px;margin-top:14px;max-width:460px}
.tiffin .t-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.tiffin .t-pill{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;border:1px solid rgba(255,255,255,.3);border-radius:100px}
.tiffin .t-pill b{color:#fff}
.tiffin .t-price{font-family:'Rozha One',serif;font-size:40px;color:#fff}
.tiffin .btn{margin-top:26px}
@media(max-width:900px){.tiffin .wrap{grid-template-columns:1fr;gap:32px}.tiffin-media{order:-1}.tiffin-media img{height:280px}}
/* signature cards */
.sig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:44px}
.sig-card{position:relative;border-radius:20px;overflow:hidden;background:var(--char-2);box-shadow:var(--shadow);cursor:pointer}
.sig-card img{width:100%;height:300px;object-fit:cover;transition:.6s cubic-bezier(.2,.7,.3,1)}
.sig-card:hover img{transform:scale(1.07)}
.sig-card .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(20,15,9,.92));display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.sig-card .ribbon{position:absolute;top:16px;left:16px;background:var(--chili);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:100px}
.sig-card .ribbon.combo{background:var(--saffron);color:#231a0c}
.sig-card h3{color:var(--cream);font-size:27px}
.sig-card p{color:#f2d9c2;font-size:13.5px;margin-top:2px}
.sig-card .row{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.sig-card .pr{font-family:'Rozha One',serif;font-size:26px;color:var(--saffron-2)}
.sig-card .add{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#231a0c;background:var(--saffron);padding:9px 16px;border-radius:100px;border:none;cursor:pointer;transition:.2s}
.sig-card .add:hover{background:var(--saffron-2)}
@media(max-width:900px){.sig-grid{grid-template-columns:1fr}.sig-card img{height:260px}}
/* weekly menu (Tiffin By Dakshin) */
.week-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:44px}
.week-card{background:var(--char-2);border:1px solid rgba(233,162,58,.18);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:.35s}
.week-card:hover{transform:translateY(-6px);border-color:rgba(233,162,58,.5);box-shadow:0 30px 50px -30px rgba(0,0,0,.7)}
.wc-img{position:relative;height:150px;overflow:hidden;background:var(--char-3)}
.wc-img img{width:100%;height:100%;object-fit:cover;transition:.6s cubic-bezier(.2,.7,.3,1)}
.week-card:hover .wc-img img{transform:scale(1.07)}
.wc-day{position:absolute;left:12px;bottom:12px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#231a0c;background:var(--saffron);padding:6px 12px;border-radius:100px}
.wc-body{padding:16px 16px 18px;display:flex;flex-direction:column;flex:1}
.wc-dishes{color:#f7e6d4;font-size:14px;line-height:1.5;flex:1}
.wc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}
.wc-price{font-family:'Rozha One',serif;font-size:22px;color:var(--saffron-2)}
.wc-tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#eccdb2}
.week-note{text-align:center;margin-top:34px;color:#eccdb2;font-size:12.5px;letter-spacing:.04em}
/* Menu week the cards belong to, e.g. "Aug 3โ7, 2026" โ sits under the title. */
.week-range{text-align:center;margin-top:12px;color:var(--saffron-2);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.week-range:empty{display:none}
/* Days already delivered this week recede; today is picked out. Keeps the eye
on what can still be ordered instead of on a menu that's half spent. */
.week-card.is-past{opacity:.42;filter:saturate(.55)}
.week-card.is-past .wc-price{color:#c9a688}
.week-card.is-today{box-shadow:0 0 0 2px var(--saffron),0 14px 28px rgba(0,0,0,.34)}
.week-card.is-today .wc-tag{background:var(--saffron);color:#3b2205;padding:2px 7px;border-radius:99px}
@media(prefers-reduced-motion:no-preference){.week-card{transition:opacity .3s ease,filter .3s ease}}
@media(max-width:1050px){.week-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.week-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.week-grid{grid-template-columns:1fr}}
/* MENU */
.menu-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:40px}
.filter{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:11px 20px;border-radius:100px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:.25s}
.filter.active,.filter:hover{background:var(--char);color:var(--cream);border-color:var(--char)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px}
.menu-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px}
.dish{background:var(--card);border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 44px -30px rgba(23,19,12,.5);transition:.35s;display:flex;flex-direction:column}
.dish:hover{transform:translateY(-6px);box-shadow:0 34px 60px -30px rgba(23,19,12,.6);border-color:rgba(233,162,58,.5)}
.dish-img{position:relative;height:230px;overflow:hidden;background:var(--char-2)}
.dish-img img{width:100%;height:100%;object-fit:cover;transition:.6s}
.dish:hover .dish-img img{transform:scale(1.06)}
.dish-img .tag{position:absolute;top:14px;left:14px;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:100px;background:rgba(20,15,9,.72);color:var(--saffron-2);backdrop-filter:blur(4px)}
.dish-img .new{position:absolute;top:14px;right:14px;background:var(--chili);color:#fff;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.1em;padding:6px 11px;border-radius:100px}
.veg-dot{position:absolute;bottom:14px;right:14px;width:20px;height:20px;border:2px solid #3a9a3d;background:#fff;border-radius:4px;display:grid;place-items:center}
.veg-dot::after{content:"";width:9px;height:9px;background:#3a9a3d;border-radius:50%}
.dish-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.dish-body h3{font-size:24px;color:var(--char);line-height:1.1}
.dish-body .pcs{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.04em}
.dish-body p{color:var(--muted);font-size:14px;margin-top:8px;flex:1}
.dish-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.dish-foot .pr{font-family:'Rozha One',serif;font-size:26px;color:var(--char)}
.dish-foot .pr small{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);letter-spacing:.05em}
.dish-foot .add{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#231a0c;background:var(--saffron);padding:11px 18px;border-radius:100px;border:none;cursor:pointer;transition:.22s;display:flex;align-items:center;gap:7px}
.dish-foot .add:hover{background:var(--saffron-2);transform:translateY(-1px)}
@media(max-width:940px){.menu-grid{grid-template-columns:repeat(2,1fr)}}
/* wide desktop: 4 dishes per row, slightly more compact cards */
@media(min-width:1200px){
.menu-grid{grid-template-columns:repeat(4,1fr);gap:22px}
.dish-img{height:190px}
.dish-body{padding:20px 20px 22px}
.dish-body h3{font-size:22px}
.dish-foot .pr{font-size:23px}
.dish-foot .add{padding:10px 15px;font-size:11px}
}
/* sticky, swipeable category chips so you jump between sections without scrolling up */
@media(max-width:760px){
.menu-head{align-items:flex-start}
/* painted with the section's own texture (not flat cream) so it blends in; still opaque enough for the sticky state */
.filters{position:sticky;top:60px;z-index:40;background:linear-gradient(rgba(247,240,222,.74),rgba(247,240,222,.74)),url(../img/tex-cream.jpg);background-size:auto,440px;margin:22px 0 0;padding:12px 0 13px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--line)}
.filters::-webkit-scrollbar{display:none}
.filter{flex:none}
}
/* compact horizontal menu rows โ 4โ6 dishes per screen instead of 1โ2 */
@media(max-width:620px){
.menu-grid{grid-template-columns:1fr;gap:12px;margin-top:16px}
.dish{flex-direction:row;align-items:stretch;border-radius:16px}
.dish-img{width:112px;height:auto;min-height:112px;flex:none}
.dish-img .tag,.dish-img .new{top:8px;left:8px;font-size:9px;padding:4px 8px}
.dish-img .new{left:auto;right:8px}
.veg-dot{bottom:8px;right:8px;width:16px;height:16px}
.veg-dot::after{width:7px;height:7px}
.dish-body{padding:12px 14px 13px}
.dish-body h3{font-size:18px}
.dish-body .pcs{font-size:11px}
.dish-body p{font-size:12.5px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dish-foot{margin-top:auto;padding-top:10px}
.dish-foot .pr{font-size:21px}
.dish-foot .add{padding:8px 13px;font-size:11px}
}
/* categories */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.cat{border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:30px 24px;position:relative;overflow:hidden;transition:.3s;cursor:pointer;background:rgba(255,255,255,.02)}
.cat:hover{border-color:var(--saffron);background:rgba(233,162,58,.06);transform:translateY(-5px)}
.cat .num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--saffron);letter-spacing:.1em}
.cat h3{color:var(--cream);font-size:26px;margin-top:36px}
.cat p{color:#eccdb2;font-size:13.5px;margin-top:6px}
.cat .arw{margin-top:20px;color:var(--saffron-2);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:900px){.cat-grid{grid-template-columns:1fr 1fr;gap:14px}.cat{padding:24px 20px}.cat h3{margin-top:24px;font-size:22px}}
@media(max-width:520px){
.cat-grid{grid-template-columns:1fr;gap:12px}
.cat{padding:22px 20px}
.cat h3{margin-top:14px;font-size:21px}
.cat p{margin-top:5px}
.cat .arw{margin-top:14px}
}
/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;margin-top:44px}
.gal a{overflow:hidden;border-radius:16px;position:relative}
.gal img{width:100%;height:100%;object-fit:cover;transition:.7s cubic-bezier(.2,.7,.3,1)}
.gal a:hover img{transform:scale(1.1)}
.gal a::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,15,9,.4),transparent 50%);opacity:0;transition:.3s}
.gal a:hover::after{opacity:1}
.gal .big{grid-column:span 2;grid-row:span 2}
.gal .tall{grid-row:span 2}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}.gal .big{grid-column:span 2}}
/* features */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.feat{text-align:center;padding:0 8px}
.feat .ic{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;background:rgba(233,162,58,.12);border:1px solid rgba(233,162,58,.4);display:grid;place-items:center;color:var(--saffron-deep)}
.feat .ic svg{width:28px;height:28px}
.feat h3{font-size:23px;color:var(--char)}
.feat p{color:var(--muted);font-size:14px;margin-top:6px}
@media(max-width:820px){.feat-grid{grid-template-columns:1fr 1fr;gap:36px 20px}}
/* CTA */
.cta{position:relative;background:var(--chili);color:#fff;text-align:center;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;background-image:url(../img/pattern-terra.jpg);background-size:cover;background-position:center;opacity:.22;mix-blend-mode:screen;z-index:-2}
.cta::after{content:"";position:absolute;inset:0;background:radial-gradient(95% 120% at 50% 0,rgba(0,0,0,.34),transparent 72%);z-index:-1}
.cta h2{font-size:clamp(40px,6vw,78px);color:#fff}
.cta p{max-width:520px;margin:16px auto 0;color:#f4d9cf;font-size:17px}
.cta .btn{margin-top:34px}
.cta .ph{margin-top:22px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;color:#f4d9cf}
.cta .ph b{color:#fff}
/* contact + footer */
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:stretch}
.contact-grid>.reveal{display:flex;flex-direction:column}
.contact-grid .contact-form{flex:1;display:flex;flex-direction:column}
.contact-grid .contact-form #cfFields{display:flex;flex-direction:column;flex:1}
.contact-grid .contact-form #cfFields .field:has(textarea){flex:1;display:flex;flex-direction:column}
.contact-grid .contact-form #cfFields .field:has(textarea) textarea{flex:1;min-height:120px}
.contact-grid .contact-form #cfFields .btn{margin-top:auto;align-self:start}
.contact-grid .hours-card{margin-top:auto}
.contact-grid .info-block:first-child{padding-top:0}
.info-block{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.info-block .ic{flex:none;width:46px;height:46px;border-radius:12px;background:rgba(233,162,58,.12);border:1px solid rgba(233,162,58,.3);display:grid;place-items:center;color:var(--saffron-2)}
.info-block .ic svg{width:20px;height:20px}
.info-block h4{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-2)}
.info-block p{color:#f7e6d4;font-size:16px;margin-top:5px}
.info-block a:hover{color:var(--saffron-2)}
.hours-card{background:var(--char-2);border:1px solid rgba(233,162,58,.22);border-radius:20px;padding:24px 28px}
.hours-card h3{color:var(--cream);font-size:24px;margin-bottom:6px}
#hours{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.hours-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.03em}
.hours-row span:first-child{color:#f2d9c2}
.hours-row span:last-child{color:var(--cream)}
.hours-row.today{color:var(--saffron-2)}
.hours-row.today span{color:var(--saffron-2)!important}
.hours-note{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;color:#eccdb2;display:flex;align-items:center;gap:8px}
.hours-note .live{width:8px;height:8px;border-radius:50%;background:#4caf50;box-shadow:0 0 0 4px rgba(76,175,80,.2)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:36px}}
@media(max-width:520px){#hours{grid-template-columns:1fr;column-gap:0}}
footer{background:var(--char);color:#f2d9c2;padding:70px 0 30px;position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;background-image:url(../img/pattern-terra.jpg);background-size:cover;background-position:center bottom;opacity:.12;mix-blend-mode:screen;pointer-events:none;z-index:0}
footer .wrap{position:relative;z-index:1}
.foot-grid{position:relative;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:48px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.1)}
.foot-brand .brand .bt b{color:var(--cream)}
.foot-brand p{margin-top:20px;max-width:340px;font-size:15px;line-height:1.7}
.socials{display:flex;gap:12px;margin-top:24px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;transition:.25s}
.socials a:hover{background:var(--saffron);color:#231a0c;border-color:var(--saffron)}
.socials svg{width:18px;height:18px}
.foot-col h4{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-2);margin-bottom:18px}
.foot-col a,.foot-col p{display:block;font-size:15px;padding:6px 0;transition:.2s}
.foot-col a:hover{color:var(--saffron-2);padding-left:4px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:26px;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:#dcb193;flex-wrap:wrap;gap:12px}
.foot-bottom b{color:var(--saffron-2)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr;gap:36px}}
/* cart drawer */
.overlay{position:fixed;inset:0;background:rgba(20,15,9,.55);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.35s;z-index:110}
.overlay.show{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--cream-2);z-index:120;display:flex;flex-direction:column;transform:translateX(101%);transition:.42s cubic-bezier(.6,.05,.2,1);box-shadow:-30px 0 80px -30px rgba(0,0,0,.55)}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;background:var(--char);color:var(--cream);flex:none}
.drawer-head h3{font-size:25px;color:var(--cream);line-height:1}
.drawer-head .sub{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron-2);margin-top:4px}
.drawer-x{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:17px;cursor:pointer;transition:.2s;flex:none}
.drawer-x:hover{background:rgba(255,255,255,.12)}
.drawer-body{flex:1;overflow-y:auto;padding:8px 26px;min-height:0}
.cart-line{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.cart-line img{width:64px;height:64px;border-radius:12px;object-fit:cover;flex:none;background:var(--char-2)}
.cart-line .cl-main{flex:1;min-width:0}
.cart-line h4{font-family:'Rozha One',serif;font-size:19px;color:var(--char);line-height:1.05}
.cart-line .cl-price{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);margin-top:3px}
.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:100px;margin-top:10px;overflow:hidden;background:var(--card)}
.stepper button{width:30px;height:30px;border:none;background:transparent;font-size:16px;cursor:pointer;color:var(--char);transition:.15s;line-height:1}
.stepper button:hover{background:var(--saffron);color:#231a0c}
.stepper span{min-width:30px;text-align:center;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:14px}
.cl-right{text-align:right;flex:none}
.cl-right .lt{font-family:'Rozha One',serif;font-size:20px;color:var(--char)}
.cl-remove{background:none;border:none;color:var(--chili);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;opacity:.65;margin-top:10px}
.cl-remove:hover{opacity:1;text-decoration:underline}
.cart-empty{text-align:center;padding:70px 20px;color:var(--muted)}
.cart-empty .em{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:rgba(233,162,58,.12);display:grid;place-items:center;color:var(--saffron-deep)}
.cart-empty h4{font-family:'Rozha One',serif;font-size:23px;color:var(--char);margin-bottom:6px}
.cart-empty .btn{margin-top:20px}
.drawer-foot{border-top:1px solid var(--line);padding:20px 26px;background:var(--card);flex:none}
.foot-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted)}
.foot-row.total{margin:12px 0 16px}
.foot-row.total .tt{font-family:'Rozha One',serif;font-size:30px;color:var(--char)}
.foot-row.total .tl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.drawer-foot .btn,.checkout-foot .btn{width:100%;justify-content:center}
.drawer-note{text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--muted);margin-top:12px}
.field{margin-bottom:14px}
.field label{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);font-family:'Mukta',sans-serif;font-size:15px;color:var(--ink);transition:.2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--saffron);box-shadow:0 0 0 3px rgba(233,162,58,.16)}
.field textarea{resize:vertical;min-height:84px}
.field.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.checkout{display:none;flex-direction:column;flex:1;min-height:0}
.drawer.checkout-mode .drawer-body,.drawer.checkout-mode .drawer-foot,.drawer.empty .drawer-foot{display:none}
.drawer.checkout-mode .checkout{display:flex}
.checkout-body{flex:1;overflow-y:auto;padding:22px 26px;min-height:0}
.checkout-body h4.ttl{font-family:'Rozha One',serif;font-size:24px;color:var(--char);margin-bottom:4px}
.back-link{background:none;border:none;color:var(--saffron-deep);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;margin-bottom:18px;display:inline-flex;gap:6px}
.checkout-foot{border-top:1px solid var(--line);padding:18px 26px;background:var(--card);flex:none}
.order-confirm{display:none;text-align:center;padding:60px 30px;flex:1;flex-direction:column;justify-content:center}
.drawer.done-mode .drawer-body,.drawer.done-mode .drawer-foot,.drawer.done-mode .checkout{display:none}
.drawer.done-mode .order-confirm{display:flex}
.order-confirm .ok{width:82px;height:82px;margin:0 auto 22px;border-radius:50%;background:#25D366;display:grid;place-items:center;color:#fff;animation:pop .45s cubic-bezier(.2,.8,.3,1.2)}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.order-confirm h3{font-family:'Rozha One',serif;font-size:30px;color:var(--char)}
.order-confirm .onum{font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;color:var(--saffron-deep);margin:12px 0}
.order-confirm p{color:var(--muted);font-size:15px;max-width:300px;margin:0 auto}
.contact-form{background:var(--char-2);border:1px solid rgba(233,162,58,.22);border-radius:20px;padding:clamp(24px,4vw,36px)}
.contact-form h3{color:var(--cream);font-size:28px;margin-bottom:5px}
.contact-form .cf-sub{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#eccdb2;margin-bottom:22px}
.contact-form label{color:#eccdb2}
.contact-form input,.contact-form textarea{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);color:var(--cream)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#7a6f5a}
.contact-form .btn{width:100%;justify-content:center;margin-top:4px}
.form-success{display:none;text-align:center;padding:26px 10px;color:var(--cream)}
.form-success.show{display:block}
.form-success .ok{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;background:#2f7d32;display:grid;place-items:center;color:#fff}
.form-success h4{font-family:'Rozha One',serif;font-size:26px;color:var(--cream)}
.form-success p{color:#f2d9c2;margin-top:6px}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(140%);background:var(--char);color:var(--cream);border:1px solid rgba(233,162,58,.5);border-radius:100px;padding:14px 26px;font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.06em;box-shadow:var(--shadow);z-index:200;transition:.4s cubic-bezier(.2,.7,.3,1);display:flex;align-items:center;gap:10px}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast b{color:var(--saffron-2)}
/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:.8s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
/* ===== premium polish ===== */
/* branded text selection */
::selection{background:var(--saffron);color:#231a0c}
/* tactile press feedback on every button */
.btn:active,.filter:active,.dish-foot .add:active,.sig-card .add:active{transform:translateY(1px) scale(.97)}
/* anchor jumps land below the sticky header instead of underneath it */
section[id],#menu,#contact,#gallery,#story,#weekly,#plans{scroll-margin-top:72px}
/* staged hero entrance โ copy rises first, image follows */
@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:riseIn .65s cubic-bezier(.2,.7,.3,1) both}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.14s}
.hero-copy>*:nth-child(3){animation-delay:.23s}
.hero-copy>*:nth-child(4){animation-delay:.32s}
.hero-copy>*:nth-child(5){animation-delay:.41s}
.hero-media{animation:riseIn .75s .3s cubic-bezier(.2,.7,.3,1) both}
/* accessibility: honour reduced-motion */
@media(prefers-reduced-motion:reduce){
/* no auto-scroll, but keep the strip browsable by swipe so it never looks stuck */
.marquee-track{animation:none}
.marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.marquee::-webkit-scrollbar{display:none}
.reveal{opacity:1;transform:none;transition:none}
.hero-copy>*,.hero-media{animation:none}
html{scroll-behavior:auto}
}
/* closed-state dot for the live hours note */
.hours-note .live.closed{background:#d0862f;box-shadow:0 0 0 4px rgba(208,134,47,.2)}
/* 16px inputs so iOS doesn't auto-zoom on focus */
@media(max-width:760px){.field input,.field textarea,.field select{font-size:16px}}
/* meal plans */
.signin{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);padding:4px 0}
.signin:hover{color:var(--saffron-deep)}
/* The monthly area offer, above the "Start Your Plan" buttons โ read the offer,
then act on it. Leaf green so it reads as good news rather than fine print. */
.home-promo{max-width:520px;margin:26px auto 0;font-size:17px;line-height:1.5;color:#14502a;
background:rgba(14,122,58,.10);border:1.5px solid rgba(14,122,58,.30);border-radius:999px;
padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.home-promo[hidden]{display:none}
.home-promo b{color:#0e7a3a}
.home-promo .ppill{background:#0e7a3a;color:#fff;border-radius:999px;padding:3px 11px;
font-family:var(--font-mono,monospace);font-size:13px;font-weight:800;letter-spacing:.06em;white-space:nowrap}
/* The Saver Plan card, between the offer and the buttons โ the offer says
there is money off, this says there is a cheaper shape of plan, and then
you act. Dashed like the Saver card in the wizard and on /meal-plans/, so
the same thing is recognisably the same thing on all three surfaces: the
four packs are solid, the one you build is drawn. */
.home-saver{max-width:660px;margin:20px auto 0;display:grid;
grid-template-columns:1fr auto;grid-template-areas:"tag tag" "body price" "go go";
gap:6px 22px;align-items:center;text-align:left;
background:var(--card,#fff);border:2px dashed rgba(28,22,18,.28);border-radius:20px;
padding:20px 24px;text-decoration:none;color:inherit;
transition:border-color .18s,box-shadow .18s,transform .18s}
.home-saver:hover{border-color:var(--saffron-deep);box-shadow:0 10px 28px rgba(28,22,18,.10);transform:translateY(-2px)}
.home-saver[hidden]{display:none}
.home-saver .hs-tag{grid-area:tag;justify-self:start;background:#0e7a3a;color:#fff;border-radius:999px;
padding:3px 11px;font-family:var(--font-mono,monospace);font-size:11px;font-weight:800;
letter-spacing:.06em;text-transform:uppercase}
.home-saver .hs-body{grid-area:body;min-width:0}
.home-saver .hs-body h3{margin:0;font-size:24px;line-height:1.2}
.home-saver .hs-body p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--muted,#6b6259)}
.home-saver .hs-price{grid-area:price;text-align:right;white-space:nowrap}
.home-saver .hs-from,.home-saver .hs-per{display:block;font-family:var(--font-mono,monospace);
font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#6b6259)}
.home-saver .hs-price b{display:block;font-family:var(--font-display,serif);font-size:34px;
line-height:1.05;color:var(--saffron-deep)}
.home-saver .hs-off{display:block;margin-top:3px;font-size:12px;font-weight:700;color:#0e7a3a}
.home-saver .hs-go{grid-area:go;margin-top:4px;font-family:var(--font-mono,monospace);font-size:11px;
font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--saffron-deep)}
.plans-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:28px}
/* ===== meal-plans page ===== */
.menu a.active{color:var(--saffron-deep)}
.menu a.active::after{width:100%}
.lead{font-size:17px;line-height:1.6}
/* how it works โ steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:48px}
.step{background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 20px 44px -30px rgba(23,19,12,.5);transition:.35s;display:flex;flex-direction:column}
.step:hover{transform:translateY(-6px);border-color:rgba(233,162,58,.5);box-shadow:0 34px 60px -30px rgba(23,19,12,.6)}
.step-img{position:relative;height:168px;overflow:hidden;background:var(--char-2)}
.step-img img{width:100%;height:100%;object-fit:cover;transition:.6s cubic-bezier(.2,.7,.3,1)}
.step:hover .step-img img{transform:scale(1.07)}
.step-img .n{position:absolute;top:14px;left:14px;width:42px;height:42px;border-radius:50%;background:var(--saffron);color:#231a0c;font-family:'Rozha One',serif;font-size:22px;display:grid;place-items:center;box-shadow:var(--shadow);border:2px solid var(--cream)}
.step-body{padding:20px 22px 26px}
.step-body h3{font-size:23px;color:var(--char);line-height:1.05}
.step-body p{color:var(--muted);font-size:14px;margin-top:8px}
@media(max-width:940px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.steps{grid-template-columns:1fr}}
/* plan cards */
.plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px}
.plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:30px 26px 28px;display:flex;flex-direction:column;box-shadow:0 20px 44px -30px rgba(23,19,12,.5);transition:.35s}
.plan:hover{transform:translateY(-6px);border-color:rgba(233,162,58,.5);box-shadow:0 34px 60px -30px rgba(23,19,12,.6)}
.plan.pop{border-color:var(--saffron);box-shadow:0 30px 60px -28px rgba(233,162,58,.55)}
.plan-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--saffron);color:#231a0c;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:100px;white-space:nowrap;box-shadow:var(--shadow)}
.plan h3{font-size:27px;color:var(--char);margin-bottom:8px}
.plan-desc{color:var(--muted);font-size:14px;line-height:1.55;flex:1}
.plan-price{display:flex;align-items:baseline;gap:8px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.plan-price b{font-family:'Rozha One',serif;font-size:38px;color:var(--char);line-height:1}
.plan-price span{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.plan-sub{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--saffron-deep);letter-spacing:.02em;margin-top:8px}
.plan .btn{margin-top:22px;width:100%;justify-content:center}
@media(max-width:980px){.plans-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.plans-grid{grid-template-columns:1fr}}
/* meals-delivered band + highlights */
.counterband{position:relative;background:var(--saffron);border-block:2px solid var(--char)}
.counterband .wrap{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(40px,5vw,64px)}
.counter-head{text-align:center;margin-bottom:clamp(36px,4vw,52px)}
.counter-num{font-family:'Rozha One',serif;font-size:clamp(66px,10vw,120px);color:#231a0c;line-height:.85}
.counter-label{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6a4408;margin-top:14px}
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.hl{text-align:center}
.hl .ic{width:62px;height:62px;margin:0 auto 16px;border-radius:50%;background:rgba(35,26,12,.07);border:1px solid rgba(35,26,12,.28);display:grid;place-items:center;color:#231a0c}
.hl .ic svg{width:26px;height:26px}
.hl h3{font-size:24px;color:#231a0c}
.hl p{color:#6a4408;font-size:14px;margin-top:6px;max-width:290px;margin-inline:auto;line-height:1.55}
@media(max-width:760px){.hl-grid{grid-template-columns:1fr;gap:34px}}
/* faq */
.faq{max-width:760px;margin:48px auto 0;display:grid;gap:12px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s}
.faq details[open]{border-color:rgba(233,162,58,.5);box-shadow:0 22px 46px -30px rgba(23,19,12,.5)}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:'Rozha One',serif;font-size:21px;color:var(--char);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Mukta',sans-serif;font-weight:300;font-size:30px;color:var(--saffron-deep);transition:.25s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .fa{padding:0 24px 22px;color:var(--muted);font-size:15px;line-height:1.65;max-width:640px}
/* what's included โ checklist */
.inc-list{display:grid;gap:16px;margin-top:26px}
.inc-list li{display:flex;gap:14px;align-items:flex-start;list-style:none}
.inc-list .tick{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(233,162,58,.15);border:1px solid rgba(233,162,58,.5);color:var(--saffron-deep);display:grid;place-items:center;margin-top:1px}
.inc-list .tick svg{width:15px;height:15px}
.inc-list h4{font-family:'Mukta',sans-serif;font-weight:600;font-size:17px;color:var(--char);line-height:1.25}
.inc-list p{color:var(--muted);font-size:14px;margin-top:3px}
/* ================= aggressive mobile density (phones) ================= */
@media(max-width:560px){
/* global section rhythm */
.pad{padding:22px 0}
.sec-head{margin-bottom:0 !important;max-width:100%}
.sec-head h2{font-size:clamp(26px,7.2vw,33px)}
.lead,.sec-head p,p.lead{font-size:14.5px;margin-top:8px !important}
.eyebrow{font-size:11px;letter-spacing:.2em}
.marquee{padding:11px 0}
.marquee-track span{font-size:19px}
/* hero โ headline + stats + image all compact */
.hero .wrap{gap:12px;padding-top:0;padding-bottom:22px}
.hero.light .sub{margin-top:8px}
.hero-cta{margin-top:14px}
.hero h1{margin-top:0}
/* sized so each
half stays on ONE line even on 360px phones */
.hero h1{font-size:clamp(25px,7.2vw,33px);letter-spacing:-.015em;margin:8px 0 6px;white-space:nowrap}
.hero .sub{font-size:14px;margin-top:8px;line-height:1.5}
/* CTA: two buttons share one row instead of stacking (saves a full line) */
.hero-cta{display:grid;grid-template-columns:1.35fr 1fr;gap:9px;margin-top:16px}
.hero-cta .btn{width:auto;padding:13px 10px;font-size:11px;letter-spacing:.05em}
.hero-stats{gap:10px 14px;margin-top:18px;padding-top:16px}
.hero-stats .s b{font-size:24px}
.hero-stats .s span{font-size:9px;line-height:1.3}
.hero-badge{font-size:9.5px;padding:6px 13px;letter-spacing:.12em;gap:8px}
.hero-frame img{height:200px}
.hero-media{margin-top:0}
.price-badge{width:66px;height:66px;bottom:14px;left:-4px;border-width:2px}
.price-badge b{font-size:20px}
.veg-tag{padding:7px 12px;font-size:10px;right:-6px;top:14px}
/* story */
.story-grid{gap:20px}
.story-media img{height:210px}
.story-media .est{padding:11px 15px}
.story-media .est b{font-size:22px}
.story-text h2{font-size:clamp(27px,7.6vw,33px) !important;margin-top:8px !important}
.story-text p{font-size:14px;margin-top:12px;line-height:1.55}
.story-text .btn{margin-top:12px;padding:10px 16px;font-size:10.5px;letter-spacing:.05em}
/* all three chips on ONE row */
.story-badges{display:flex;flex-wrap:nowrap;gap:6px;margin-top:14px}
.chip{padding:5px 8px;font-size:8.5px;letter-spacing:.03em;white-space:nowrap;gap:5px;flex:none}
/* weekly tiffin โ horizontal swipe strip, one short row.
Cards sized at 43% so a third card always PEEKS at the edge โ the cut-off
card is the visual cue that the row scrolls sideways. */
.week-grid{display:flex;overflow-x:auto;gap:10px;margin-top:14px;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.week-grid::-webkit-scrollbar{display:none}
.week-grid::after{content:"";flex:0 0 6px}
.week-card{flex:0 0 43%;scroll-snap-align:start}
/* explicit hint under the strip (only in the weekly section, not the plans note) */
#weekly .week-note::before{content:"Swipe โ to see the whole week ยท ";color:var(--saffron-2)}
.wc-img{height:88px}
.wc-body{padding:9px 11px 11px}
.wc-dishes{font-size:11.5px;line-height:1.4}
.wc-foot{margin-top:8px;padding-top:8px}
.wc-price{font-size:17px}
.wc-day{font-size:9px;padding:4px 9px;left:8px;bottom:8px}
.week-note{margin-top:12px;font-size:11px}
/* On a phone the price cannot sit beside the name โ 390px is not wide
enough for a 34px number and a sentence โ so it stacks under it and the
card reads top to bottom like everything else on the page. */
.home-saver{grid-template-columns:1fr;grid-template-areas:"tag" "body" "price" "go";
gap:10px;padding:18px;margin-top:14px;text-align:left}
.home-saver .hs-price{text-align:left}
.home-saver .hs-body h3{font-size:21px}
.home-saver .hs-body p{font-size:14px}
.home-saver .hs-price b{font-size:30px}
/* meal plans โ both buttons share one row */
.plans-cta{display:grid;grid-template-columns:1.25fr 1fr;gap:8px;margin-top:12px}
.plans-cta .btn{width:auto;padding:12px 8px;font-size:10px;letter-spacing:.03em}
/* full-menu head โ kill the dead space between eyebrow / h2 / veg line / filters */
.menu-head{gap:8px}
.menu-head .sec-head h2{margin-top:6px}
.menu-head>.mono{font-size:11px;margin-top:0}
.filters{margin-top:8px !important;padding-top:8px !important;padding-bottom:9px !important}
.menu-grid{margin-top:12px}
/* categories โ 2-up so all four fit in two rows, text kept to 2 lines */
.cat-grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.cat{padding:16px 14px}
.cat .num{font-size:11px}
.cat h3{margin-top:10px;font-size:17px;line-height:1.08}
.cat p{font-size:11.5px;margin-top:5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cat .arw{margin-top:10px;font-size:10.5px}
/* gallery โ shorter rows, more per screen */
.gal{gap:10px;grid-auto-rows:120px;margin-top:18px}
/* features */
.feat-grid{gap:24px 18px}
.feat .ic{width:52px;height:52px;margin-bottom:12px}
.feat h3{font-size:20px}
.feat p{font-size:13px}
/* CTA band */
.cta h2{font-size:clamp(28px,8vw,36px)}
.cta p{font-size:14.5px;margin-top:10px}
.cta .btn{margin-top:20px}
.cta .ph{margin-top:16px}
/* contact */
.contact-grid{gap:24px}
.contact-form{padding:20px}
.contact-form h3{font-size:22px}
.contact-form .cf-sub{margin-bottom:16px}
.field{margin-bottom:11px}
.info-block{padding:12px 0;gap:14px}
.info-block p{font-size:14.5px}
.hours-card{padding:18px}
.hours-card h3{font-size:20px}
.hours-row{padding:6px 0;font-size:12px}
/* footer โ remove the dead vertical space */
footer{padding:34px 0 24px}
.foot-grid{gap:24px;padding-bottom:26px}
.foot-brand p{margin-top:14px;font-size:14px}
.socials{margin-top:16px}
.foot-col h4{margin-bottom:12px}
.foot-col a,.foot-col p{padding:5px 0;font-size:14px}
.foot-bottom{padding-top:18px}
}
/* ============= meal-plans page: phone density (was all desktop-sized) ============= */
@media(max-width:560px){
/* how-it-works steps โ compact horizontal rows like the menu dishes */
.steps{gap:11px;margin-top:20px}
.step{flex-direction:row;align-items:stretch;border-radius:16px}
.step-img{width:100px;height:auto;min-height:100px;flex:none}
.step-img .n{width:30px;height:30px;font-size:16px;top:8px;left:8px;border-width:2px}
.step-body{padding:12px 14px;display:flex;flex-direction:column;justify-content:center}
.step-body h3{font-size:17px;line-height:1.1}
.step-body p{font-size:12.5px;margin-top:5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* plan cards โ 2-up grid: all four visible in ~one screen */
.plans-grid{grid-template-columns:1fr 1fr;gap:9px;margin-top:20px}
.plan{padding:15px 13px 14px}
.plan-tag{font-size:8.5px;padding:4px 10px;top:-10px}
.plan h3{font-size:18px;margin-bottom:4px}
.plan-desc{font-size:11px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plan-price{margin-top:10px;padding-top:10px;gap:5px;flex-wrap:wrap}
.plan-price b{font-size:24px}
.plan-price span{font-size:8.5px}
.plan-sub{font-size:9.5px;margin-top:4px}
.plan .btn{margin-top:10px;padding:9px 6px;font-size:9px;letter-spacing:.03em}
/* meals-served counter band โ compact, highlights become icon rows */
.counterband .wrap{padding-top:24px;padding-bottom:24px}
.counter-head{margin-bottom:16px}
.counter-num{font-size:clamp(40px,13vw,56px)}
.counter-label{font-size:10px;margin-top:6px;letter-spacing:.1em}
.hl-grid{gap:12px}
/* scoped under .hl-grid โ bare `.hl` collides with the hero's highlight */
.hl-grid .hl{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:start;text-align:left}
.hl-grid .hl .ic{width:40px;height:40px;margin:0;grid-row:1/3}
.hl-grid .hl .ic svg{width:19px;height:19px}
.hl-grid .hl h3{font-size:16px}
.hl-grid .hl p{font-size:12px;margin-top:2px;max-width:none;margin-inline:0;line-height:1.45}
/* faq accordions */
.faq{margin-top:20px;gap:8px}
.faq summary{padding:15px 16px;font-size:16px;gap:12px}
.faq summary::after{font-size:24px}
.faq .fa{padding:0 16px 16px;font-size:13.5px;line-height:1.55}
}
/* ================================================================
CORNER-STORE RE-SKIN โ the whole site dresses like the illustrated
shop: striped scalloped awnings, yellow walls, brick base, neon
OPEN sign, mandala flourishes, flat "inked sticker" cards.
================================================================ */
/* --- scalloped striped awning (the roof) --- */
.awning{height:26px;position:relative;z-index:5;
background:repeating-linear-gradient(90deg,var(--saffron) 0 46px,var(--char) 46px 52px,var(--brick) 52px 98px,var(--char) 98px 104px);
-webkit-mask:linear-gradient(#000,#000) 0 0/100% 16px no-repeat,radial-gradient(circle 11px at 26px 15px,#000 98%,#0000) 0 0/52px 26px repeat-x;
mask:linear-gradient(#000,#000) 0 0/100% 16px no-repeat,radial-gradient(circle 11px at 26px 15px,#000 98%,#0000) 0 0/52px 26px repeat-x;
filter:drop-shadow(0 3px 0 rgba(23,19,12,.18))}
/* --- brick course (the shop's base) --- */
.brickrow{height:16px;background-color:var(--brick);
background-image:repeating-linear-gradient(90deg,rgba(23,19,12,.22) 0 2px,#0000 2px 46px),repeating-linear-gradient(180deg,#0000 0 7px,rgba(23,19,12,.3) 7px 8.5px);
border-top:2px solid rgba(23,19,12,.35)}
/* --- yellow wall band (sections painted like the shop wall) --- */
.wall{background:var(--wall)}
.wall::before{content:"";position:absolute;inset:0;background:url(../img/tex-cream.jpg);background-size:440px;opacity:.16;mix-blend-mode:multiply;pointer-events:none;z-index:0}
.wall>*{position:relative;z-index:1}
.wall .sec-head h2{color:var(--char)}
.wall .lead,.wall .sec-head p{color:#59430e}
.wall .eyebrow{color:#7c5708}
.wall .eyebrow::before{color:var(--char)}
.wall .btn-outline{border-color:rgba(23,19,12,.55);color:var(--char)}
.wall .btn-outline:hover{border-color:var(--char);color:var(--char);background:var(--wall-2)}
/* --- inked sticker cards: flat offset shadows + bold outlines, like the illustration --- */
.dish,.plan,.step,.faq details{border:2px solid rgba(23,19,12,.82);box-shadow:6px 6px 0 rgba(23,19,12,.14)}
.dish:hover,.plan:hover,.step:hover{transform:translate(-2px,-2px);border-color:var(--char);box-shadow:9px 9px 0 rgba(23,19,12,.16)}
.plan.pop{border-color:var(--char);box-shadow:7px 7px 0 rgba(201,102,42,.55)}
.faq details[open]{border-color:var(--char);box-shadow:6px 6px 0 rgba(233,162,58,.45)}
.gal a{border:2px solid rgba(23,19,12,.8);box-shadow:4px 4px 0 rgba(23,19,12,.12);border-radius:14px}
.story-media.illustrated img{border:2px solid rgba(23,19,12,.82);box-shadow:8px 8px 0 rgba(23,19,12,.15)}
.hero-frame{border:2px solid rgba(23,19,12,.9);box-shadow:10px 10px 0 rgba(233,162,58,.35),0 40px 80px -30px rgba(0,0,0,.8)}
/* buttons go cartoon: outlined + hard offset shadow that presses flat */
.btn-primary{border:2px solid var(--char);box-shadow:4px 4px 0 rgba(23,19,12,.3)}
.btn-primary:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 rgba(23,19,12,.32);background:var(--saffron-2)}
.btn-primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(23,19,12,.3)}
.btn-outline{border-width:2px}
.dish-foot .add,.sig-card .add{border:2px solid var(--char);box-shadow:3px 3px 0 rgba(23,19,12,.28)}
.dish-foot .add:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(23,19,12,.3)}
.filter.active,.filter:hover{background:var(--saffron);color:#231a0c;border-color:var(--char)}
.filter.active{box-shadow:3px 3px 0 rgba(23,19,12,.25)}
/* mandala watermark on the chili CTA band (echoes the shop's box sign) */
.cta-medallion{position:absolute;right:-180px;top:50%;transform:translateY(-50%);width:520px;opacity:.14;mix-blend-mode:screen;z-index:-1;pointer-events:none;border-radius:50%}
@media(max-width:760px){.cta-medallion{width:340px;right:-140px}}
/* phones: slimmer awning/brick so they stay a motif, not a block */
@media(max-width:560px){
.awning{height:18px;background:repeating-linear-gradient(90deg,var(--saffron) 0 32px,var(--char) 32px 36px,var(--brick) 36px 68px,var(--char) 68px 72px);
-webkit-mask:linear-gradient(#000,#000) 0 0/100% 11px no-repeat,radial-gradient(circle 8px at 18px 10px,#000 98%,#0000) 0 0/36px 18px repeat-x;
mask:linear-gradient(#000,#000) 0 0/100% 11px no-repeat,radial-gradient(circle 8px at 18px 10px,#000 98%,#0000) 0 0/36px 18px repeat-x}
.brickrow{height:12px}
.dish,.plan,.step,.faq details,.gal a{box-shadow:4px 4px 0 rgba(23,19,12,.13)}
}
/* --- light hero: the storefront's own cream world --- */
.hero.light{background:var(--cream);color:var(--ink)}
.hero.light::before{background-image:url(../img/tex-cream.jpg);background-size:440px;opacity:.28}
.hero.light::after{content:none}
.hero.light h1{color:var(--char)}
.hero.light h1 .hl{color:var(--brick)}
.hero.light .sub{color:var(--muted)}
.hero.light .btn-ghost{border-color:rgba(23,19,12,.4);color:var(--ink)}
.hero.light .btn-ghost:hover{border-color:var(--brick);color:var(--brick)}
.hero.light .hero-stats{border-top:1px solid rgba(23,19,12,.15)}
.hero.light .hero-stats .s b{color:var(--brick)}
.hero.light .hero-stats .s span{color:var(--muted)}
.hero.light .hero-frame{border:2px solid rgba(23,19,12,.85);box-shadow:10px 10px 0 rgba(233,162,58,.45);background:#F7F1E3}
.hero.light .hero-frame img{height:auto;aspect-ratio:4/3;object-fit:cover}
.hero.light h1{font-size:clamp(38px,4.1vw,56px)}
.hero.light .wrap{padding-top:34px;padding-bottom:60px}
@media(max-width:940px){.hero.light h1{font-size:clamp(34px,7vw,48px)}.hero.light .wrap{padding-top:22px;padding-bottom:40px}}
@media(max-width:560px){.hero.light h1{font-size:clamp(24px,6.8vw,31px);margin-top:0}.hero.light .wrap{padding-top:18px;padding-bottom:24px}}
/* mascot parade โ marching along the brick base of the wall band */
.parade{max-width:620px;margin:8px auto calc(10px - clamp(34px,4.5vw,56px));position:relative;z-index:5}
.parade img{width:100%}
@media(max-width:560px){.parade{max-width:320px;margin-top:4px;margin-bottom:-24px}}
/* mascots as feature icons + hours no-wrap */
.feat-mascot{height:96px;width:auto;margin:0 auto 16px;display:block;filter:drop-shadow(3px 4px 0 rgba(23,19,12,.1))}
.hours-row span{white-space:nowrap}
@media(max-width:560px){.feat-mascot{height:64px;margin-bottom:10px}}
/* contact mascots โ chai & samosa peek over the form, taking your message */
.form-col{position:relative}
.peek-mascots{position:absolute;top:-68px;right:30px;height:138px;width:auto;z-index:0;pointer-events:none}
.form-col .contact-form{position:relative;z-index:1}
@media(max-width:560px){.peek-mascots{height:96px;top:-53px;right:16px}}
/* ===== contact = the shop counter: mascots take your call ===== */
/* contact form + hours become cream "order pad" cards on the dark fascia */
.contact-form{background:var(--card);border:2px solid rgba(23,19,12,.85);box-shadow:6px 6px 0 rgba(233,162,58,.35)}
.contact-form h3{color:var(--char)}
.contact-form .cf-sub{color:var(--muted)}
.contact-form label{color:var(--muted)}
.contact-form input,.contact-form textarea{background:#fff;border-color:var(--line);color:var(--ink)}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#a89a80}
.form-success{color:var(--ink)}
.form-success h4{color:var(--char)}
.form-success p{color:var(--muted)}
.hours-card{background:var(--card);border:2px solid rgba(23,19,12,.85);box-shadow:6px 6px 0 rgba(233,162,58,.35)}
.hours-card h3{color:var(--char)}
.hours-card p.mono{color:var(--muted)!important}
.hours-row{border-bottom-color:rgba(23,19,12,.1)}
.hours-row span:first-child{color:var(--muted)}
.hours-row span:last-child{color:var(--char)}
.hours-row.today span{color:var(--saffron-deep)!important}
.hours-note{color:var(--muted)}
/* ===== the shop room: contact section shares the scene's yellow wall ===== */
.shop-room{background:#F9C756}
.shop-room .sec-head h2{color:var(--char)}
.shop-room .eyebrow.on-dark{color:#7c4a08}
.shop-room .eyebrow.on-dark::before{color:var(--char)}
/* hours = chalkboard hanging on the wall */
.hours-card{background:#241d12;border:6px solid #9C5F2E;border-radius:14px;box-shadow:7px 7px 0 rgba(23,19,12,.25)}
.hours-card h3{color:var(--cream)}
.hours-card p.mono{color:#cdb691!important}
.hours-row{border-bottom-color:rgba(255,255,255,.12)}
.hours-row span:first-child{color:#cdb691}
.hours-row span:last-child{color:var(--cream)}
.hours-row.today span{color:var(--saffron-2)!important}
.hours-note{color:#cdb691}
/* bubbles sit a touch higher on the cropped scene */
/* โโ ORDER WINDOW โ one integrated contact scene โโโโโโโโโโโโโ */
.order-window{position:relative;margin-top:clamp(44px,5.5vw,72px);background:#FFFDF6;border:2px solid rgba(23,19,12,.85);border-radius:20px;box-shadow:9px 9px 0 rgba(23,19,12,.16)}
.shop-room .sec-head{position:relative;z-index:5}
.ow-peek{position:absolute;bottom:calc(100% - 6px);right:4%;width:clamp(280px,44%,540px);height:auto;z-index:2;pointer-events:none}
.ow-grid{display:grid;grid-template-columns:1.08fr .92fr}
.order-window .contact-form{background:none;border:0;box-shadow:none;padding:clamp(22px,3.2vw,32px);display:flex;flex-direction:column}
.order-window .contact-form #cfFields{display:flex;flex-direction:column;flex:1}
.order-window .contact-form #cfFields .field:has(textarea){flex:1;display:flex;flex-direction:column}
.order-window .contact-form #cfFields .field:has(textarea) textarea{flex:1;min-height:120px}
.ow-side{padding:clamp(22px,3.2vw,32px);border-left:2px dashed rgba(23,19,12,.25);display:flex;flex-direction:column}
.ow-act{display:flex;align-items:center;gap:16px;padding:13px 0;border-bottom:2px dashed rgba(23,19,12,.16)}
.ow-act:first-child{padding-top:0}
.ow-act img{flex:none;width:64px;height:64px;object-fit:contain;filter:drop-shadow(2px 3px 0 rgba(23,19,12,.1))}
.ow-act img.ow-photo{object-fit:cover;border-radius:12px;border:2px solid rgba(23,19,12,.75)}
.ow-act h4{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8a5410}
.ow-act p{color:var(--char);font-size:15px;margin-top:3px;line-height:1.35;word-break:break-word}
.ow-act p a{color:var(--char)}
.ow-act p a:hover{color:var(--brick)}
.ow-links{display:flex;gap:16px;margin-top:5px}
.ow-links a{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--brick)}
.ow-links a:hover{color:var(--chili)}
.ow-hours{margin-top:auto}
.hours-card.ow-hours{padding:18px 20px;margin-top:18px;box-shadow:5px 5px 0 rgba(23,19,12,.2)}
.ow-hours h3{font-size:20px;margin-bottom:6px}
.ow-time{font-family:'JetBrains Mono',monospace;font-size:clamp(19px,1.8vw,24px);font-weight:600;letter-spacing:.02em;color:var(--saffron-2);margin-bottom:12px}
.ow-time span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#cdb691;margin-top:3px}
@media(max-width:860px){
.ow-grid{grid-template-columns:1fr}
.ow-side{border-left:0;border-top:2px dashed rgba(23,19,12,.25)}
.ow-peek{width:auto;height:min(20vw,84px);right:4%}
.order-window{margin-top:clamp(74px,21vw,90px)}
}
@media(max-width:560px){
.ow-act img{width:52px;height:52px}
.ow-act p{font-size:14px}
.order-window{box-shadow:5px 5px 0 rgba(23,19,12,.16)}
}
/* โโ character overlays โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.week-wrap{position:relative}
#weekly .edge-sit{position:absolute;top:0;left:26px;height:clamp(62px,6.8vw,92px);transform:translateY(-80%);z-index:6;pointer-events:none;filter:drop-shadow(2px 3px 0 rgba(23,19,12,.2))}
#gallery .wrap{position:relative}
#gallery .gal-mascot{position:absolute;top:clamp(-10px,0.6vw,8px);right:clamp(10px,3vw,38px);height:clamp(76px,8.5vw,120px);rotate:4deg;z-index:0;pointer-events:none;filter:drop-shadow(2px 3px 0 rgba(23,19,12,.12))}
#gallery .sec-head{position:relative;z-index:1}
footer{position:relative}
.awning-hang{position:absolute;top:-4px;right:9%;height:clamp(64px,7.5vw,100px);z-index:4;pointer-events:none}
.h2-mascot{display:inline-block;height:clamp(52px,5.4vw,78px);vertical-align:-16%;margin-left:14px;filter:drop-shadow(2px 3px 0 rgba(23,19,12,.12))}
@media(max-width:560px){
.gal-mascot{top:30px;right:2%}
.edge-sit{left:6%}
.h2-mascot{vertical-align:-26%;margin-left:6px}
}
/* โโ weekly menu: snapshots on a clothesline โโโโโโโโโโโโโโโ */
.week-wrap{padding-top:40px}
.week-wrap::before{content:"";position:absolute;top:18px;left:-2%;right:-2%;height:3px;background:#9C5F2E;border-radius:3px;box-shadow:0 2px 0 rgba(0,0,0,.4)}
.week-wrap .week-grid{margin-top:0}
#weekly .week-card{background:#FFFDF6;border:2px solid rgba(23,19,12,.85);border-radius:8px;padding:8px 8px 0;box-shadow:6px 7px 0 rgba(0,0,0,.35);overflow:visible;transform:rotate(-2deg);transform-origin:top center;transition:.35s}
#weekly .week-card:nth-child(2){transform:rotate(1.7deg);margin-top:16px}
#weekly .week-card:nth-child(3){transform:rotate(-1.1deg);margin-top:5px}
#weekly .week-card:nth-child(4){transform:rotate(2deg);margin-top:18px}
#weekly .week-card:nth-child(5){transform:rotate(-1.7deg);margin-top:9px}
#weekly .week-card::before{content:"";position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:13px;height:30px;background:var(--saffron);border:2px solid rgba(23,19,12,.85);border-radius:4px}
#weekly .week-card:hover{transform:rotate(0) translateY(-4px);box-shadow:8px 10px 0 rgba(0,0,0,.4);border-color:rgba(23,19,12,.85)}
#weekly .wc-img{border-radius:4px}
#weekly .wc-dishes{color:var(--char)}
#weekly .wc-foot{border-top-color:rgba(23,19,12,.14)}
#weekly .wc-price{color:var(--brick)}
#weekly .wc-tag{color:var(--muted)}
#weekly .edge-sit{top:20px;left:15.5%;height:clamp(56px,6vw,82px);transform:translateY(-81%);z-index:3}
@media(max-width:760px){
.week-wrap{padding-top:34px}
.week-wrap::before{top:14px}
#weekly .edge-sit{left:8%;top:16px}
#weekly .week-card::before{top:-26px;height:26px}
}
/* footer: mascots walking home along the divider โ tucked in the empty
bottom-right corner of the grid so they don't add their own row */
.foot-parade{position:absolute;right:0;bottom:-2px;height:clamp(44px,5vw,60px);width:auto;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.3))}
footer .foot-col h4::before{content:"\2741 ";color:var(--saffron-2)}
@media(max-width:820px){.foot-parade{position:static;display:block;height:40px;margin:6px 4px -2px auto}}
/* tappable phone/email links keep their surrounding text style */
.week-note a{color:var(--saffron-2);text-decoration:none;border-bottom:1px dashed rgba(244,187,85,.45)}
.cta .ph a{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.45)}
.mfoot a{color:inherit;text-decoration:none}
/* โโ gallery lightbox โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ */
.gal a{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(20,15,9,.93);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(90vw,1080px)}
.lightbox img{max-width:100%;max-height:78vh;border-radius:16px;border:2px solid rgba(244,187,85,.4);box-shadow:0 40px 90px -20px rgba(0,0,0,.7);transform:scale(.96);transition:transform .25s}
.lightbox.open img{transform:scale(1)}
.lightbox figcaption{color:var(--cream);font-size:15px;text-align:center;opacity:.85}
.lb-count{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.18em;color:var(--saffron-2)}
.lightbox button{position:absolute;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(247,240,222,.3);background:rgba(247,240,222,.08);color:var(--cream);font-size:26px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.2s;z-index:2}
.lightbox button:hover{background:var(--saffron);border-color:var(--saffron);color:#231a0c}
.lb-close{top:18px;right:18px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
@media(max-width:560px){
.lightbox button{width:38px;height:38px;font-size:21px}
.lb-prev{left:8px}.lb-next{right:8px}
.lightbox img{max-height:70vh;border-radius:12px}
.lightbox figcaption{font-size:13.5px;padding:0 12px}
}
/* contact: compact vertical rhythm */
.shop-room{padding-top:clamp(26px,3.2vw,40px)}
.shop-room .sec-head h2{margin-top:8px}
@media(max-width:560px){.shop-room{padding-top:20px}}
/* ---- online payment checkout (Clover) ---- */
.takeout-banner{margin:14px 26px 0;padding:10px 14px;background:rgba(233,162,58,.14);border:1px solid rgba(233,162,58,.35);border-radius:12px;color:var(--saffron-deep);font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;letter-spacing:.03em;text-align:center;flex:none}
.takeout-banner.slim{margin:0 0 12px;padding:7px 10px;font-size:10.5px}
.drawer.empty .takeout-banner,.drawer.checkout-mode>.takeout-banner,.drawer.review-mode>.takeout-banner,.drawer.done-mode>.takeout-banner{display:none}
.fld-hint{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.drawer.checkout-mode .drawer-body,.drawer.checkout-mode .drawer-foot{display:none}
.drawer.checkout-mode .review-pane{display:none}
.drawer.review-mode .drawer-body,.drawer.review-mode .drawer-foot,.drawer.review-mode .checkout:not(.review-pane){display:none}
.drawer.review-mode .review-pane{display:flex}
.drawer.done-mode .review-pane{display:none}
.review-lines{border-top:1px solid var(--line);margin-top:6px}
.review-line{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--char)}
.review-line .rl-price{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted);flex:none}
.review-totals{margin:14px 0 18px}
.review-totals .foot-row.total{margin:10px 0 0}
.review-totals .foot-row.total .tt{font-size:26px}
.card-box{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card)}
.card-field{height:46px;border:1.5px solid var(--line);border-radius:10px;background:#fff;padding:0;overflow:hidden;display:flex;align-items:center;transition:border-color .2s}
.card-field:focus-within{border-color:var(--saffron-deep)}
.card-field.invalid{border-color:var(--chili);background:rgba(196,74,52,.03)}
/* Clover's SDK appends its own "Secure Payments Powered by Clover" bar straight to
, so it lands under our real footer as a stray full-width strip. Hidden:
the customer already sees the lock line inside the card box. */
.clover-footer{display:none!important}
#cardFieldError{margin-top:10px}
.card-field iframe{width:100%!important;height:42px!important;border:0!important;display:block}
.card-row{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:10px}
.card-secure{margin-top:10px;color:var(--muted);font-size:12px}
/* Said under the Pay button, where the money leaves โ not only on a policy page. */
.pay-final{margin:10px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45;text-align:center}
.pay-final b{color:var(--ink)}
.pay-final a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pay-error{display:none;margin-top:10px;padding:9px 12px;border-radius:10px;background:rgba(196,74,52,.1);border:1px solid rgba(196,74,52,.3);color:var(--chili);font-size:13px}
.pay-error.show{display:block}
.confirm-sub{color:var(--muted);font-size:13px!important;margin-top:10px!important}
#payBtn[disabled],#placeOrderBtn[disabled]{opacity:.6;cursor:wait}
/* ------------------------------------------------------------------ *
* CASHEWS โ the shelf product *
* *
* Deliberately the quietest section on the page. The food sections *
* shout in saffron and cream; a single-origin nut at $12 should feel *
* like the one calm shelf in a busy shop, so this band goes dark and *
* lets one picture do the talking. *
* *
* It is composed like a roadside billboard, not like a web hero: the *
* orchard runs the full width of the screen, there are four short *
* lines of type, and the product stands on its own in the open. *
* *
* THE ONE RULE THIS SECTION IS BUILT AROUND: nothing sits on top of *
* the painting. cashew-board.jpg is the orchard illustration with its *
* canvas extended ~1150px to the LEFT (a mirrored, stretched copy of *
* its own leftmost strip, so the join is invisible) purely to create *
* empty sky for the pack and the words. The image is then pinned to *
* the RIGHT โ background-position โ so that when the band narrows it *
* is always that invented emptiness that gets cropped away, never the *
* trees, the baskets or the path. *
* ------------------------------------------------------------------ */
.nut{background:#14100A;color:var(--cream)}
/* no dark ground below the board on desktop: the painting IS the section
there, and any of it showing read as a bare black strip. The closing brick
course sits flush under the painting. The mobile breakpoint puts the words
on that ground and pads the BOARD, so the bricks still close the section. */
/* the shelf product's Active toggle in the admin drives all of this: the band
ships hidden and the nav links with it, and site.js turns them on only once
the row actually comes back from the database */
#cashews[hidden]{display:none}
.nav-cashews{display:none}
.shelf-on .nav-cashews{display:revert}
/* --- the billboard --- */
/* width:100% is not decoration โ with aspect-ratio AND a min-height that beats
it, Chrome resolves the auto WIDTH back through the ratio and the band grew
to 1350px inside a 1010px page. Pin the width; let the ratio drive height. */
.nut-board{position:relative;isolation:isolate;display:flex;align-items:center;width:100%;
aspect-ratio:2600/809;min-height:clamp(420px,32vw,560px);max-height:620px;overflow:hidden}
/* the painting lives on a layer of its own so the mobile breakpoint can
shrink it to a band across the top without moving the copy with it */
.nut-board::before{content:"";position:absolute;inset:0;z-index:-1;
background:#F4E3C0 url(../img/cashew-board.jpg) right center/cover no-repeat}
/* Content stops at the left ~45% of the band โ measured against the artwork,
that is the narrowest the empty sky ever gets, so the type never reaches
the horizon. The gutter matches .wrap's so the billboard lines up with the
rest of the page, and is ADDED to the 45% (max-width is a border box, and
subtracting a 200px gutter from it left the headline in a 212px column). */
.nut-inner{--nut-gutter:max(clamp(20px,5vw,48px), calc((100% - 1124px)/2));
display:flex;align-items:center;gap:clamp(18px,2.6vw,50px);
width:100%;padding-left:var(--nut-gutter);
/* the gutter grows with the page, so on a very wide screen 46%+gutter would
push the last words into the trees; 60% of the band is the hard stop */
max-width:min(calc(46% + var(--nut-gutter)), 60%)}
/* the sun in the painting is low and to the RIGHT, so the pack's shadow falls
left โ a straight-down shadow is what makes a composite look pasted on */
.nut-pack{width:clamp(150px,18vw,268px);height:auto;flex:none;
filter:drop-shadow(-16px 26px 32px rgba(90,55,20,.34))}
/* --- the type: kicker, two headline lines, one sentence, a spec row, the
price. Dark on the cream sky, ranged left, one rhythm all the way down. --- */
.nut-say{min-width:0}
.nut-kicker{display:block;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-weight:600;
font-size:clamp(9.5px,.8vw,11px);letter-spacing:.3em;text-transform:uppercase;color:#8A4E10}
.nut-head{font-size:clamp(30px,3.85vw,56px);line-height:.95;margin-top:14px;color:#2B2011}
/* nowrap keeps the two written lines intact โ which means the type size has to
be small enough that the longer line still clears the horizon. 3.85vw is
that number; at 4.1vw the second line ran into the trees. */
.nut-head span{display:block;white-space:nowrap}
.nut-hl{color:var(--chili)}
.nut-sub{margin-top:15px;max-width:26ch;font-size:clamp(13.5px,1.1vw,16.5px);
line-height:1.5;color:#5C4526;text-wrap:balance}
.nut-spec{list-style:none;display:flex;flex-wrap:wrap;margin:15px 0 0;padding:0;
font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;
letter-spacing:.15em;text-transform:uppercase;color:#8A6A3C}
/* separator AFTER each item, not before the next: when the row wraps on a
phone the spare dot ends a line instead of starting one, which reads as
punctuation rather than a mistake */
.nut-spec li{white-space:nowrap}
.nut-spec li:not(:last-child)::after{content:"ยท";margin:0 8px;opacity:.6}
.nut-buy{margin-top:clamp(16px,1.9vw,24px);padding-top:clamp(16px,1.9vw,24px);
border-top:1px solid rgba(90,55,20,.22);
display:flex;align-items:center;gap:clamp(14px,1.7vw,24px);flex-wrap:wrap}
.nut-price{line-height:1}
.nut-price .amt{display:block;font-family:'Rozha One',serif;font-size:clamp(26px,2.8vw,40px);color:#2B2011}
.nut-price .per{display:block;margin-top:5px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#8A6A3C}
.nut-buy .btn{box-shadow:0 12px 26px -10px rgba(90,55,20,.55)}
.nut-buy .btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.nut-note{margin-top:13px;font-size:11.5px;letter-spacing:.01em;color:#7A5C33}
/* ---- in-cart offer: one shelf product shown inside the cart and again on
the pickup-details step, so a food order can add a pack without leaving
checkout. Styled as an offer, never as a line already in the order. ---- */
.cart-addon{display:flex;gap:13px;align-items:center;margin:16px 0 6px;padding:14px;border:1.5px dashed var(--saffron);border-radius:14px;background:linear-gradient(180deg,rgba(233,162,58,.10),rgba(233,162,58,.04))}
.cart-addon img{width:52px;height:52px;object-fit:contain;flex:none;filter:drop-shadow(0 6px 10px rgba(23,19,12,.28))}
.cart-addon .ca-main{flex:1;min-width:0}
.cart-addon .ca-eyebrow{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--saffron-deep);font-weight:600}
.cart-addon h5{font-family:'Mukta',sans-serif;font-weight:600;font-size:14px;color:var(--ink);margin-top:3px;line-height:1.25}
.cart-addon p{font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:2px}
.cart-addon .ca-right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:none}
.cart-addon .ca-price{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--ink)}
.cart-addon .ca-add{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;border-radius:100px;border:none;background:var(--saffron);color:#231a0c;cursor:pointer;transition:.22s}
.cart-addon .ca-add:hover{background:var(--saffron-2);transform:translateY(-1px)}
#addonCheckout .cart-addon{margin:20px 0 0}
/* Below 1280px the empty sky the words need is gone โ the height-driven crop
makes the orchard itself eat the width, and squeezing a 60px headline into
what is left is how this section looked wrong in the first place. So the
billboard deliberately breaks in two: the painting becomes a band across
the top with the pack standing on its edge, and the type moves down onto
the section's own dark ground where it has the full column. */
@media(max-width:1279px){
/* One number drives the whole thing: the poster's height. The pack is sized
FROM it (height, not width) so it always stands inside the painting with an
even margin top and bottom โ sizing by width let it hang off the bottom
into the dark, which is what made this look unfinished. */
.nut-board{--band:clamp(300px,42vw,400px);
aspect-ratio:auto;min-height:0;max-height:none;display:block;
padding-bottom:calc(clamp(6px,2vw,18px) + clamp(38px,5vw,74px))}
.nut-board::before{inset:0 0 auto 0;height:var(--band);background-position:62% center}
/* dusk at the bottom of the painting: a short scrim fading into the section's
own dark, so the poster and the ground below read as one evening scene
instead of two stacked rectangles */
.nut-board::after{content:"";position:absolute;left:0;right:0;top:calc(var(--band) - 84px);height:84px;
background:linear-gradient(180deg,rgba(20,16,10,0) 0%,rgba(20,16,10,.55) 62%,#14100A 100%)}
.nut-inner{display:block;max-width:none;padding:0 clamp(20px,5vw,48px);position:relative;z-index:1}
/* the pack stands ACROSS the horizon line โ head in the sunset, feet on the
dark ground the words sit on. The overlap is what makes the two halves one
poster; a slight lean keeps it from looking like a catalogue cut-out. */
.nut-pack{display:block;height:calc(var(--band) - 56px);width:auto;
margin-top:116px;transform:rotate(-2.5deg);
filter:drop-shadow(-12px 20px 26px rgba(0,0,0,.55))}
.nut-say{margin-top:clamp(18px,3vw,26px);max-width:600px}
.nut-kicker{color:var(--saffron-2)}
.nut-head{color:var(--cream);font-size:clamp(34px,7.4vw,58px)}
.nut-hl{color:var(--saffron-2)}
.nut-sub{color:#D8C9AD;max-width:34ch;font-size:clamp(14.5px,1.7vw,17px)}
.nut-spec{color:#B8A88C;font-size:10px}
.nut-buy{border-top-color:rgba(232,217,190,.2)}
.nut-price .amt{color:var(--cream);font-size:clamp(32px,5vw,40px)}
.nut-price .per{color:#A7997E}
.nut-note{color:#B6A78B;font-size:12px}
}
@media(max-width:620px){
.nut-buy{gap:14px}
.nut-buy .btn{width:100%}
}
@media(max-width:420px){
.cart-addon{gap:10px;padding:12px}
.cart-addon img{width:42px;height:42px}
.cart-addon p{display:none}
}
/* ===== the Trial ticket (home + meal plans) =====
A ticket, not a fifth plan card: a different shape so nobody reads it as a
pack to compare per meal. Left = what you get, right = the price and the
one button, split by a perforation. The notches take the colour of the
section behind (--trial-notch), set per page. Built from trial.js. */
.trial{--trial-notch:var(--cream-2);position:relative;display:grid;grid-template-columns:minmax(0,1fr) 260px;
max-width:880px;margin:30px auto 0;text-align:left;background:var(--card);border:1.5px solid rgba(200,128,26,.45);
border-radius:22px;box-shadow:0 22px 48px -30px rgba(23,19,12,.55);overflow:hidden}
.trial[hidden]{display:none}
.trial-l{padding:26px 30px 24px;min-width:0}
.trial-tag{display:inline-block;background:#0e7a3a;color:#fff;border-radius:999px;padding:4px 12px;
font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.trial-h{margin:12px 0 0;font-size:clamp(24px,2.6vw,30px);line-height:1.12;color:var(--char)}
.trial-box{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--muted)}
.trial-box b{color:var(--ink);font-weight:600}
.trial-pts{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.trial-pts li{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;color:var(--ink)}
.trial-pts li a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.trial-pts li::before{content:"โ";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
background:rgba(14,122,58,.14);color:#0e7a3a;font-size:11px;font-weight:800}
.trial-r{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:4px;
padding:24px 26px;text-align:center;background:linear-gradient(180deg,rgba(233,162,58,.20),rgba(233,162,58,.08));
border-left:2px dashed rgba(200,128,26,.45)}
/* the punched notches, top and bottom of the perforation */
.trial-r::before,.trial-r::after{content:"";position:absolute;left:-12px;width:22px;height:22px;border-radius:50%;
background:var(--trial-notch);border:1.5px solid rgba(200,128,26,.45)}
.trial-r::before{top:-12px}.trial-r::after{bottom:-12px}
.trial-price{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap;margin:0}
.trial-price b{font-family:'Rozha One',serif;font-weight:400;font-size:54px;line-height:1;color:var(--char)}
.trial-from,.trial-per{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.trial-go{margin-top:12px;width:100%;min-height:52px;font-size:12.5px;letter-spacing:.08em}
.trial-go:focus-visible{outline:3px solid #8a560c;outline-offset:3px}
.trial-fine{margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--muted)}
/* the one-line pointer in a dark hero */
.trial-link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;min-height:44px;color:#f4e0cc;font-size:16px}
.trial-link[hidden]{display:none}
.trial-link b{color:var(--saffron-2)}
.trial-link .pill{background:#0e7a3a;color:#fff;border-radius:999px;padding:3px 10px;font-family:'JetBrains Mono',monospace;
font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.trial-link:hover b{text-decoration:underline}
@media(max-width:760px){
.trial{grid-template-columns:1fr;margin-top:22px;border-radius:18px}
.trial-l{padding:20px 18px 18px}
.trial-h{font-size:23px}
.trial-box{font-size:14.5px}
.trial-pts{flex-direction:column;gap:7px;margin-top:12px}
.trial-pts li{font-size:14px}
/* the perforation turns: across the ticket, notches at its two ends */
.trial-r{border-left:0;border-top:2px dashed rgba(200,128,26,.45);padding:18px}
.trial-r::before,.trial-r::after{top:-12px;bottom:auto}
.trial-r::before{left:-12px}.trial-r::after{left:auto;right:-12px}
.trial-price b{font-size:46px}
.trial-go{min-height:54px;font-size:12px}
.trial-link{font-size:15px;flex-wrap:wrap;gap:8px}
}
.home-trial{--trial-notch:var(--wall)}
/* A `hidden` attribute loses to any author `display` (.ph-chip is inline-flex,
FAQ are styled) โ every Trial mention must really disappear when
the kitchen sells no trial. */
[data-trial][hidden]{display:none !important}