/* ============ TOKENS ============ */
:root{
  --bg:#F3E7CF; --bg-2:#E9D9B8; --surface:#FCF5E6; --surface-2:#F6EAD2;
  --line:#DCC69F; --line-strong:#B99A63;
  --text:#2B1B10; --text-2:#6B5539; --text-3:#8C7350;
  --brass:#A9752A; --brass-hi:#C99236; --saffron:#BE5417;
  --leaf:#356B3E; --chilli:#AE2F1E; --maroon:#78202F;
  --ring:rgba(169,117,42,.5);
  --shadow:0 1px 2px rgba(43,27,16,.07), 0 10px 30px -14px rgba(43,27,16,.35);
  --shadow-lg:0 2px 6px rgba(43,27,16,.10), 0 30px 60px -24px rgba(43,27,16,.45);
  --sheet:#FCF5E6;
  --logo-plate:transparent;
  --r:14px; --r-sm:9px;
  --step--1:.8125rem; --step-0:1rem; --step-1:1.16rem; --step-2:1.45rem;
  --step-3:1.95rem; --step-4:2.6rem; --step-5:3.6rem; --step-6:5rem;
  --nav-h:64px; --tab-h:0px;
  --f-display:"Fraunces",Georgia,"Iowan Old Style","Times New Roman",serif;
  --f-ui:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-num:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#14100C; --bg-2:#0D0A07; --surface:#1E1811; --surface-2:#271F16;
    --line:#3A2E20; --line-strong:#5D482E;
    --text:#F2E7D1; --text-2:#BCA482; --text-3:#A68F6C;
    --logo-plate:#F7EEDF;
    --brass:#D6A03C; --brass-hi:#EFC46E; --saffron:#E4813A;
    --leaf:#7FB56F; --chilli:#E4735E; --maroon:#D9808F;
    --ring:rgba(214,160,60,.55);
    --shadow:0 1px 2px rgba(0,0,0,.55), 0 14px 34px -16px rgba(0,0,0,.8);
    --shadow-lg:0 2px 8px rgba(0,0,0,.6), 0 40px 70px -28px rgba(0,0,0,.9);
    --sheet:#1E1811;
  }
}
:root[data-theme="dark"]{
  --bg:#14100C; --bg-2:#0D0A07; --surface:#1E1811; --surface-2:#271F16;
  --line:#3A2E20; --line-strong:#5D482E;
  --text:#F2E7D1; --text-2:#BCA482; --text-3:#A68F6C;
  --logo-plate:#F7EEDF;
  --brass:#D6A03C; --brass-hi:#EFC46E; --saffron:#E4813A;
  --leaf:#7FB56F; --chilli:#E4735E; --maroon:#D9808F;
  --ring:rgba(214,160,60,.55);
  --shadow:0 1px 2px rgba(0,0,0,.55), 0 14px 34px -16px rgba(0,0,0,.8);
  --shadow-lg:0 2px 8px rgba(0,0,0,.6), 0 40px 70px -28px rgba(0,0,0,.9);
  --sheet:#1E1811;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
.hide{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-ui);
  font-size:var(--step-0); line-height:1.6; letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.locked{overflow:hidden}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-family:var(--f-display); font-weight:700; line-height:1.08;
  letter-spacing:-.02em; font-variation-settings:"SOFT" 28,"WONK" 1,"opsz" 96}
/* every figure on the page: lining, tabular, unambiguous */
.tnum,table,.cal-grid,.qty span,.citem .ci-price,.opt .price,.from b,.step .n,.totals,.done .ref,.order-card .oref{
  font-variant-numeric:tabular-nums lining-nums; font-feature-settings:"tnum" 1,"lnum" 1}
.num{font-family:var(--f-num); font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.01em}
p{margin:0}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:4px}
.tnum{font-variant-numeric:tabular-nums lining-nums}

.wrap{width:min(1180px,100% - 2.5rem); margin-inline:auto}
main{display:flex; flex-direction:column}
section{padding-block:clamp(3.5rem,7vw,6.5rem)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ornament rule from the menu poster */
.orn{display:flex; align-items:center; gap:.7rem; color:var(--brass); font-size:.6rem; justify-content:center}
.orn i{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line-strong)); max-width:120px}
.orn i+i{background:linear-gradient(270deg,transparent,var(--line-strong))}
.eyebrow{font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:var(--brass); margin:0}
.sec-head{display:flex; flex-direction:column; align-items:center; gap:.85rem; text-align:center; margin-bottom:clamp(2rem,4vw,3.25rem)}
.sec-head h2{font-size:clamp(var(--step-3),4.5vw,var(--step-4))}
.sec-head p{color:var(--text-2); max-width:56ch; font-size:var(--step-1)}

/* ============ BUTTONS ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.78rem 1.35rem; border-radius:999px; font-weight:600; font-size:.94rem;
  letter-spacing:-.01em; transition:transform .16s ease, background .18s ease, border-color .18s ease, color .18s ease;
  border:1px solid transparent; white-space:nowrap; text-decoration:none}
.btn:active{transform:scale(.97)}
.btn.btn-primary{background:var(--brass); color:#1A1206; box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--brass-hi)}
.btn.btn-ghost{border-color:var(--line-strong); color:var(--text)}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--brass)}
.btn.btn-wa{background:#25D366; color:#06301A}
.btn-wa:hover{background:#33e075}
.btn-block{width:100%}
.btn[disabled]{opacity:.4; cursor:not-allowed}
.btn-lg{padding:.95rem 1.7rem; font-size:1rem}

/* ============ HEADER ============ */
header.site{position:sticky; top:0; z-index:60; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--line)}
.nav{height:var(--nav-h); display:flex; align-items:center; gap:1.5rem}
.brand{display:flex; align-items:center; margin-right:auto; text-decoration:none}
.brand img{height:42px; width:auto; aspect-ratio:821/240}
/* The logo is never reversed. It is always the artwork as drawn, so on a dark
   surface it sits on its own light plate rather than being recoloured. */
.logo-plate{display:inline-flex; align-items:center; padding:.3rem .5rem;
  border-radius:10px; background:var(--logo-plate); transition:background .2s}
.logo-plate img{display:block}
.nav-links{display:flex; gap:1.6rem; font-size:.9rem; font-weight:500}
.nav-links a{text-decoration:none; color:var(--text-2); transition:color .16s}
.nav-links a:hover{color:var(--text)}
.nav-tools{display:flex; align-items:center; gap:.5rem}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--text-2);transition:.16s}
.icon-btn:hover{border-color:var(--brass); color:var(--text)}
.cart-btn{position:relative; padding:.55rem 1.05rem; border-radius:999px; border:1px solid var(--line-strong);
  display:flex; align-items:center; gap:.55rem; font-weight:600; font-size:.9rem}
.cart-btn:hover{border-color:var(--brass)}
.badge{min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--saffron);color:#fff;
  font-size:.7rem;font-weight:700;display:grid;place-items:center;line-height:1}
.badge.hide{display:none}

/* ============ HERO (always night) ============ */
.hero{
  --text:#F5EAD4; --text-2:#C1A985; --line:#392D1F; --brass:#DFA945; --brass-hi:#F0C570;
  position:relative; background:#14100C; color:var(--text); overflow:hidden;
  padding-block:clamp(4rem,10vw,7.5rem) clamp(3rem,7vw,5rem); text-align:center;
}
.hero::before{content:""; position:absolute; inset:0;
  background:radial-gradient(80% 55% at 50% 0%, rgba(223,169,69,.20), transparent 70%),
             radial-gradient(60% 45% at 50% 100%, rgba(190,84,23,.14), transparent 70%);}
.hero::after{content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.055) 1px, transparent 0);
  background-size:22px 22px; mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent)}
.hero > *{position:relative; z-index:1}
.hero-line{font-family:var(--f-display); font-weight:600; font-variation-settings:"SOFT" 40,"WONK" 1,"opsz" 96;
  font-size:clamp(1.95rem,5.6vw,3.6rem); line-height:1.1; letter-spacing:-.015em;
  max-width:min(24ch,620px); margin:.9rem auto 0; color:var(--text); text-wrap:normal}
.hero-line > span:not(.sr){display:inline-block}
.hero .sub-line{font-size:clamp(.72rem,2.2vw,.85rem); letter-spacing:.34em;
  text-transform:uppercase; font-weight:600; color:var(--brass)}
.hero .tag{font-family:var(--f-display); font-style:italic; font-weight:500; font-variation-settings:"SOFT" 50,"WONK" 1,"opsz" 72; font-size:clamp(1.05rem,3vw,1.45rem);
  color:var(--brass-hi); margin-top:.7rem; letter-spacing:.005em}
.hero .lede{margin:1.5rem auto 0; max-width:52ch; color:var(--text-2); font-size:var(--step-1)}
.hero .cta{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:2rem}
.hero .btn-ghost{border-color:#4A3A26; color:#F5EAD4}
.hero .btn-ghost:hover{background:rgba(255,255,255,.06); border-color:var(--brass)}
.chips{display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem}
.chip{border:1px solid #3A2E20; border-radius:999px; padding:.42rem .9rem; font-size:.8rem;
  color:#C1A985; display:flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.025)}
.chip b{color:#F5EAD4; font-weight:600}
.hero-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:clamp(2.5rem,5vw,3.5rem)}
.hero-strip img{aspect-ratio:4/3; object-fit:cover; border-radius:10px; opacity:.88;
  filter:saturate(1.05) contrast(1.02); transition:opacity .3s, transform .4s}
.hero-strip img:hover{opacity:1; transform:translateY(-3px)}

/* ============ STEPS ============ */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.step{background:var(--surface); padding:1.75rem 1.5rem; display:flex; flex-direction:column; gap:.55rem}
.step .n{font-family:var(--f-num); font-size:1.9rem; color:var(--brass); line-height:1; font-weight:800; letter-spacing:-.04em}
.step h3{font-size:1.06rem; font-family:var(--f-ui); font-weight:700; letter-spacing:-.015em; font-variation-settings:normal}
.step p{color:var(--text-2); font-size:.91rem}
.step.party{background:color-mix(in srgb,var(--brass) 7%,var(--surface))}
.step.party .n{color:var(--leaf)}
a.wa-inline{color:var(--brass); font-weight:600; text-decoration:underline; text-underline-offset:.15em}
a.wa-inline:hover{color:var(--text)}

/* ============ MENU ============ */
.dishes{display:flex; flex-direction:column; gap:1.25rem}
.dish{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
.dish:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.dish:nth-child(even) .dish-media{order:2}
.dish-media{position:relative; min-height:340px; background:var(--bg-2)}
.dish-media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0}
.kind{position:absolute; top:.85rem; left:.85rem; z-index:2; display:flex; align-items:center; gap:.4rem;
  background:rgba(20,16,12,.78); backdrop-filter:blur(6px); color:#F5EAD4; border-radius:999px;
  padding:.32rem .72rem; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.dot{width:9px;height:9px;border-radius:2px;border:1.5px solid currentColor;position:relative}
.dot::after{content:"";position:absolute;inset:1.5px;border-radius:50%;background:currentColor}
.kind.veg{color:#7FD08C} .kind.chicken{color:#F0876E} .kind.mutton{color:#F09BAA}
.dish-body{padding:clamp(1.4rem,2.6vw,2.1rem); display:flex; flex-direction:column; gap:1rem}
.dish-body h3{font-size:clamp(1.6rem,3vw,2.05rem)}
.dish-body .blurb{color:var(--text-2); font-size:.95rem}
.inc-label{font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); font-weight:600}
.inc{display:flex; flex-wrap:wrap; gap:.4rem .5rem; list-style:none; padding:0; margin:0}
.inc li{font-size:.845rem; color:var(--text); background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:.3rem .72rem}
.dish-foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-top:1rem; border-top:1px solid var(--line)}
.from{font-size:.78rem; color:var(--text-3); letter-spacing:.02em}
.from b{display:block; font-family:var(--f-num); font-size:1.7rem; font-weight:800; color:var(--text); letter-spacing:-.035em; line-height:1.1}

/* ============ PRICING TABLE ============ */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table{border-collapse:collapse; width:100%; min-width:640px}
caption{caption-side:top; padding:.9rem 1rem; background:var(--maroon); color:#FDF3E3; font-size:.76rem;
  letter-spacing:.16em; text-transform:uppercase; font-weight:600}
th,td{padding:.9rem 1rem; text-align:center; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
thead th{font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); font-weight:600;
  background:var(--surface-2)}
tbody th{text-align:left; font-weight:700; font-size:.96rem; letter-spacing:-.01em}
tbody th small{display:block; font-weight:400; font-size:.74rem; color:var(--text-3); letter-spacing:.04em; text-transform:uppercase; margin-top:.15rem}
tbody td{font-family:var(--f-num); font-size:1.08rem; font-weight:700; letter-spacing:-.02em}
tbody tr:last-child th, tbody tr:last-child td{border-bottom:0}
tbody tr:hover td, tbody tr:hover th{background:var(--surface-2)}
td.na{color:var(--text-3); font-weight:400}
.c-veg{color:var(--leaf)} .c-chicken{color:var(--chilli)} .c-mandi{color:var(--brass)} .c-mutton{color:var(--maroon)}

/* ============ OPTIONS ============ */
.optgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem}
.optcard{border:1px solid var(--line); border-radius:var(--r); padding:1.5rem; background:var(--surface)}
.optcard h3{font-family:var(--f-ui); font-variation-settings:normal; font-size:1rem; font-weight:700; letter-spacing:-.01em; margin-bottom:.25rem}
.optcard .sub{font-size:.8rem; color:var(--text-3); margin-bottom:1rem}
.optcard ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem}
.optcard li{display:flex; align-items:center; gap:.6rem; font-size:.92rem; padding-bottom:.5rem; border-bottom:1px dashed var(--line)}
.optcard li:last-child{border-bottom:0; padding-bottom:0}
.optcard li::before{content:"◆"; color:var(--brass); font-size:.55rem}

/* ============ STORY ============ */
.story{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center}
.story-copy{display:flex; flex-direction:column; gap:1.1rem}
.story-copy h2{font-size:clamp(var(--step-3),4vw,var(--step-4))}
.story-copy p{color:var(--text-2); font-size:1.03rem}
.story-copy .pull{font-family:var(--f-display); font-style:italic; font-weight:500; font-size:1.4rem; font-variation-settings:"SOFT" 50,"WONK" 1; color:var(--text);
  border-left:2px solid var(--brass); padding-left:1.1rem}
.poster{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--surface)}
.poster img{width:100%; aspect-ratio:1; object-fit:cover}
.poster figcaption{padding:.8rem 1rem; font-size:.78rem; color:var(--text-3); border-top:1px solid var(--line); text-align:center}

/* ============ FAQ ============ */
.faq{max-width:820px; margin-inline:auto; border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none; cursor:pointer; padding:1.15rem .25rem; display:flex; align-items:center; gap:1rem;
  font-weight:600; font-size:1.02rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; margin-left:auto; color:var(--brass); font-size:1.4rem; font-weight:400; transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 .25rem 1.25rem; color:var(--text-2); max-width:68ch; font-size:.96rem}

/* ============ FOOTER ============ */
footer{background:var(--bg-2); border-top:1px solid var(--line); padding-block:3rem 2.5rem}
.foot{display:flex; flex-wrap:wrap; gap:2rem; justify-content:space-between; align-items:flex-start}
.foot-brand{display:flex; flex-direction:column; gap:.7rem; max-width:34ch}
.foot-lockup img{height:54px; width:auto; aspect-ratio:821/240}
.foot-brand p{font-size:.87rem; color:var(--text-2)}
.foot h4{font-family:var(--f-ui); font-variation-settings:normal; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:.7rem; font-weight:600}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem;font-size:.9rem}
.foot a{text-decoration:none;color:var(--text-2)}
.foot a:hover{color:var(--brass)}
.legal{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); font-size:.78rem; color:var(--text-3);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.credit{margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--text-3); display:flex; gap:.2rem .7rem; flex-wrap:wrap; align-items:baseline}
.credit b{color:var(--text-2); font-weight:600}
.credit a{color:var(--text-3); text-decoration:none; border-bottom:1px solid var(--line-strong)}
.credit a:hover{color:var(--brass); border-bottom-color:var(--brass)}


/* ============ OVERLAY / PANELS ============ */
.scrim{position:fixed; inset:0; background:rgba(10,7,4,.55); backdrop-filter:blur(3px); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .25s ease}
.scrim.on{opacity:1; pointer-events:auto}

.panel{position:fixed; z-index:100; background:var(--sheet); display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg); transition:transform .34s cubic-bezier(.32,.72,0,1); }
.panel[hidden]{display:none}
/* desktop: right drawer */
.panel{top:0; right:0; height:100dvh; width:min(430px,100vw); border-left:1px solid var(--line);
  transform:translateX(102%)}
.panel.on{transform:translateX(0)}

.panel-head{display:flex; align-items:center; gap:.75rem; padding:1.05rem 1.15rem; border-bottom:1px solid var(--line); flex-shrink:0}
.panel-head h2{font-size:1.3rem}
.panel-head .close{margin-left:auto; width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line); color:var(--text-2); font-size:1.05rem}
.panel-head .close:hover{border-color:var(--brass); color:var(--text)}
.panel-head .back{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--text-2)}
.panel-body{flex:1; overflow-y:auto; overscroll-behavior:contain; padding:1.15rem; display:flex; flex-direction:column; gap:1.15rem}
/* The body is a flex column, so its cards would otherwise squash to fit the
   panel instead of scrolling. Keep every card at its natural height. */
.panel-body > *{flex-shrink:0}

/* What the thali rotates between, one line per dish. The diamond bullet the
   other cards use would take a grid cell of its own, so this list goes
   without it. */
.thalinow{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.thalinow li{display:grid;grid-template-columns:auto 1fr;gap:.1rem .8rem;align-items:baseline;
  border-bottom:1px dashed var(--line);padding-bottom:.45rem}
.thalinow li::before{content:none}
.thalinow li:last-child{border-bottom:0;padding-bottom:0}
.thalinow > li > span{font-size:.78rem;color:var(--text-3);letter-spacing:.02em}
.thalinow em{font-style:normal;font-size:.88rem;text-align:right;line-height:1.4}
/* The thali half of the price table carries its own column headings. They
   sit in the same columns as the biryani ones, so they centre the same way. */
#priceTable tr.sub th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);font-weight:700;background:var(--surface-2)}
#priceTable tr.sub th[scope=col]{text-align:center}
.panel-foot{flex-shrink:0; border-top:1px solid var(--line); padding:.95rem 1.15rem calc(.95rem + env(safe-area-inset-bottom));
  background:var(--surface-2); display:flex; flex-direction:column; gap:.7rem}
.grab{display:none}

/* ============ CONFIGURATOR SHEET ============ */
#sheet{width:min(520px,100vw)}

/* ============ FORM CONTROLS ============ */
.field{display:flex; flex-direction:column; gap:.45rem}
.field > label, .lbl{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--text-3)}
input[type=text],input[type=tel],textarea,select{
  width:100%; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.72rem .85rem; font-size:.95rem; transition:border-color .16s, box-shadow .16s}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--ring)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
textarea{resize:vertical; min-height:70px}
.err{font-size:.8rem; color:var(--chilli); font-weight:500}
input.bad,textarea.bad{border-color:var(--chilli)}

.seg{display:grid; grid-auto-flow:column; gap:.4rem; background:var(--surface-2); border:1px solid var(--line);
  border-radius:999px; padding:.28rem}
.seg button{border-radius:999px; padding:.55rem .5rem; font-size:.88rem; font-weight:600; color:var(--text-2); transition:.16s}
.seg button[aria-pressed=true]{background:var(--brass); color:#1A1206}

/* option rows */
.opts{display:flex; flex-direction:column; gap:.5rem}
.opt{display:flex; align-items:center; gap:.8rem; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.8rem .9rem; background:var(--surface-2); text-align:left; width:100%; transition:.16s; position:relative}
.opt:hover:not([disabled]){border-color:var(--line-strong)}
.opt[aria-pressed=true]{border-color:var(--brass); background:color-mix(in srgb,var(--brass) 10%,var(--surface-2)); box-shadow:0 0 0 1px var(--brass) inset}
.opt[disabled]{opacity:.45; cursor:not-allowed}
.opt .tick{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-strong); flex-shrink:0; display:grid;place-items:center}
.opt[aria-pressed=true] .tick{background:var(--brass); border-color:var(--brass); color:#1A1206}
.opt .tick svg{opacity:0; width:11px;height:11px}
.opt[aria-pressed=true] .tick svg{opacity:1}
.opt .txt{flex:1; min-width:0}
.opt .txt b{display:block; font-size:.94rem; font-weight:600}
.opt .txt small{color:var(--text-3); font-size:.79rem}
.opt .price{font-family:var(--f-num); font-size:1.28rem; font-weight:800; letter-spacing:-.035em}
.opt .flag{font-size:.7rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.1em}

/* qty stepper */
.qty{display:flex; align-items:center; gap:.15rem; border:1px solid var(--line); border-radius:999px; padding:.2rem; background:var(--surface-2)}
.qty button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:1.15rem;color:var(--text-2)}
.qty button:hover{background:var(--bg); color:var(--text)}
.qty span{min-width:2ch; text-align:center; font-weight:700; font-variant-numeric:tabular-nums}

/* ============ CART ITEMS ============ */
.citem{display:flex; gap:.85rem; padding:.9rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2)}
.citem img{width:64px;height:64px;object-fit:cover;border-radius:8px;flex-shrink:0}
.citem .ci-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:.3rem}
.citem b{font-size:.95rem; line-height:1.25}
.citem .meta{font-size:.79rem; color:var(--text-2); line-height:1.45}
.citem .ci-row{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.35rem}
.citem .ci-price{font-weight:700; font-variant-numeric:tabular-nums}
.link-danger{font-size:.78rem; color:var(--chilli); font-weight:500; text-decoration:underline; text-underline-offset:2px}
.empty{text-align:center; padding:3rem 1rem; color:var(--text-3); display:flex; flex-direction:column; gap:.8rem; align-items:center}
.empty .brandmark{width:180px;height:auto}
.empty .logo-plate{opacity:.7;margin-bottom:.2rem}

.totals{display:flex; flex-direction:column; gap:.4rem; font-size:.9rem}
.totals div{display:flex; justify-content:space-between; color:var(--text-2)}
.totals div.grand{border-top:1px solid var(--line); padding-top:.55rem; margin-top:.2rem; color:var(--text);
  font-size:1.15rem; font-weight:700; font-variant-numeric:tabular-nums}
.totals div.grand span:last-child{font-family:var(--f-num); font-size:1.55rem; font-weight:800; letter-spacing:-.035em}

/* ============ CALENDAR ============ */
.cal{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); padding:.75rem}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.6rem}
.cal-head b{font-size:.95rem; font-weight:700}
.cal-head button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--text-2);border:1px solid var(--line)}
.cal-head button:hover:not([disabled]){border-color:var(--brass); color:var(--text)}
.cal-head button[disabled]{opacity:.3;cursor:not-allowed}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal-grid .dow{font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3);
  text-align:center; padding:.3rem 0; font-weight:600}
.cal-grid button{aspect-ratio:1; max-height:44px; border-radius:8px; font-size:.85rem; font-variant-numeric:tabular-nums;
  display:grid; place-items:center; color:var(--text); transition:.14s}
.cal-grid button:hover:not([disabled]){background:var(--bg)}
.cal-grid button[disabled]{color:var(--text-3); opacity:.35; cursor:not-allowed}
.cal-grid button[aria-selected=true]{background:var(--brass); color:#1A1206; font-weight:700}
.cal-grid .blank{visibility:hidden}
.cal-note{font-size:.78rem; color:var(--text-3); margin-top:.55rem; display:flex; gap:.4rem; align-items:flex-start}

.slots{display:grid; grid-template-columns:repeat(auto-fit,minmax(104px,1fr)); gap:.4rem}
.slots button{border:1px solid var(--line); border-radius:var(--r-sm); padding:.6rem .3rem; font-size:.85rem;
  font-weight:600; background:var(--surface-2); font-variant-numeric:tabular-nums; transition:.14s}
.slots button:hover{border-color:var(--line-strong)}
.slots button[aria-pressed=true]{border-color:var(--brass); background:color-mix(in srgb,var(--brass) 12%,var(--surface-2)); box-shadow:0 0 0 1px var(--brass) inset}
.slotgroup{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin:.3rem 0 .1rem}

/* Thali: a set plate, so it lists rather than offers */
.platelist{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.3rem .9rem}
.platelist li{font-size:.88rem;color:var(--text-2);display:flex;gap:.45rem;align-items:baseline}
.platelist li::before{content:"\25C6";color:var(--brass);font-size:.5rem;flex-shrink:0}

/* One price table, split into a biryani half and a thali half */
#priceTable tr.grp th{background:var(--surface-2); color:var(--text-3); text-align:left;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding-top:1.1rem; padding-bottom:.55rem; border-bottom:1px solid var(--line)}
#priceTable tbody tr:first-child th{padding-top:.6rem}

/* Narrow screens scroll the table sideways, so sit the plate price in the
   first price column where the biryani prices are, not out in the middle. */

.thali-price{margin-top:1.4rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);padding:1.1rem 1.25rem;max-width:520px}
.tp-head{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);
  font-weight:600;margin:0 0 .7rem}
.thali-price ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.thali-price li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:1px dashed var(--line);padding-bottom:.5rem}
.thali-price li:last-child{border-bottom:0;padding-bottom:0}
.thali-price li span{font-weight:600}
.thali-price li b{font-family:var(--f-num);font-size:1.28rem;font-weight:800;letter-spacing:-.035em}
.tp-note{font-size:.82rem;color:var(--text-3);margin:.8rem 0 0}
.dish-when{font-size:.9rem;color:var(--text-3);margin:0;font-weight:700}
.dish-when:empty{display:none}
.cd-menu{display:flex; flex-wrap:wrap; gap:.35rem .8rem; margin-left:auto}
.cd-sit{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem}
.cd-sit i{font-style:normal; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-3); font-weight:700}
.cd-sit em{font-style:normal; font-size:.75rem; color:var(--text-2); background:var(--bg);
  border:1px solid var(--line); border-radius:999px; padding:.12rem .5rem}
.dish-when.on{color:var(--leaf);font-weight:800}
.dish-when.off{color:var(--chilli);font-weight:800}

/* Two sittings a day, lunch and dinner, rather than clock slots. */
.sittings{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.5rem}
.sittings button{display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; text-align:left;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.8rem .9rem;
  background:var(--surface-2); transition:.14s}
.sittings button:hover{border-color:var(--line-strong)}
.sittings button b{font-size:1rem; font-weight:700; letter-spacing:-.01em}
.sittings button small{font-size:.78rem; color:var(--text-3); font-variant-numeric:tabular-nums}
.sittings button[aria-pressed=true]{border-color:var(--brass);
  background:color-mix(in srgb,var(--brass) 12%,var(--surface-2)); box-shadow:0 0 0 1px var(--brass) inset}
.sittings button[aria-pressed=true] small{color:var(--text-2)}

/* Gravy: one pick per full feast. */
/* Which day and sitting this particular dish is for */
/* The basket, grouped into the sittings Kumar will cook */
.cgroup{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2)}
.cgroup + .cgroup{margin-top:.9rem}
.cg-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem;
  padding:.65rem .85rem; background:color-mix(in srgb,var(--brass) 12%,var(--surface-2));
  border-bottom:1px solid var(--line)}
.cg-when{font-weight:800; font-size:.92rem}
.cg-sub{font-size:.76rem; color:var(--text-3); font-variant-numeric:tabular-nums}
.cg-total{margin-left:auto; font-weight:700; font-variant-numeric:tabular-nums}
.cgroup .citem{border:0; border-radius:0; background:none; border-top:1px solid var(--line)}
.cgroup .citem:first-of-type{border-top:0}
.whenlist{display:flex; flex-direction:column; gap:.4rem}
.whenrow{display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2);
  padding:.55rem .8rem; font-size:.9rem}
.whenrow span{font-weight:600}

.whenpick{display:flex; flex-direction:column; gap:.55rem}
.whenday{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2);
  padding:.6rem .75rem}
.wd-date{font-weight:700; font-size:.92rem; flex:1 1 8rem; min-width:0}
.wd-slots{display:flex; flex-wrap:wrap; gap:.4rem; margin-left:auto}
.wd-slots button{display:flex; flex-direction:column; align-items:flex-start; gap:.05rem;
  border:1px solid var(--line); border-radius:999px; padding:.4rem .85rem;
  background:var(--bg); transition:.14s; text-align:left}
.wd-slots button b{font-size:.85rem; font-weight:700}
.wd-slots button small{font-size:.7rem; color:var(--text-3); font-variant-numeric:tabular-nums}
.wd-slots button:hover{border-color:var(--line-strong)}
.wd-slots button[aria-pressed=true]{border-color:var(--brass); background:var(--brass); color:#1A1206}
.wd-slots button[aria-pressed=true] small{color:#4A3410}

.gravypick{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.5rem}
.gravypick button{border:1px solid var(--line); border-radius:var(--r-sm); padding:.75rem .8rem;
  font-size:.92rem; font-weight:600; background:var(--surface-2); transition:.14s; text-align:center}
.gravypick button:hover{border-color:var(--line-strong)}
.gravypick button[aria-pressed=true]{border-color:var(--brass);
  background:color-mix(in srgb,var(--brass) 12%,var(--surface-2)); box-shadow:0 0 0 1px var(--brass) inset}

/* ============ REVIEW / CONFIRMATION ============ */
.review{border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.review dl{margin:0; display:grid; grid-template-columns:auto 1fr}
.review dt{padding:.6rem .85rem; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
  background:var(--surface-2); border-bottom:1px solid var(--line); font-weight:600; white-space:nowrap}
.review dd{margin:0; padding:.6rem .85rem; font-size:.9rem; border-bottom:1px solid var(--line); text-align:right}
.review dl > :nth-last-child(-n+2){border-bottom:0}
.done{text-align:center; display:flex; flex-direction:column; gap:1rem; align-items:center; padding:1.5rem 0}
.done .ring{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--leaf) 18%,transparent);color:var(--leaf)}
.done h3{font-size:1.6rem}
.done .ref{font-family:var(--f-num); font-size:1.35rem; font-weight:700; letter-spacing:.1em; color:var(--brass)}
.done p{color:var(--text-2); font-size:.92rem; max-width:40ch}

/* ============ ORDERS ============ */
.order-card{border:1px solid var(--line); border-radius:var(--r-sm); padding:.95rem; background:var(--surface-2);
  display:flex; flex-direction:column; gap:.5rem}
.order-card .oh{display:flex; align-items:baseline; justify-content:space-between; gap:.5rem}
.order-card .oref{font-family:var(--f-num); font-size:1rem; font-weight:700; letter-spacing:.08em; color:var(--brass)}
.order-card .odate{font-size:.78rem; color:var(--text-3)}
.order-card ul{list-style:none;margin:0;padding:0;font-size:.85rem;color:var(--text-2);display:flex;flex-direction:column;gap:.2rem}
.pill{display:inline-flex; align-items:center; gap:.35rem; font-size:.7rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; border-radius:999px; padding:.22rem .6rem; border:1px solid currentColor}
.pill.sent{color:var(--brass)}

/* ============ SIDE ALLOCATOR ============ */
.sidepick{display:flex; flex-direction:column; gap:.5rem}
.sidepick-row{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); padding:.6rem .7rem .6rem .9rem}
.sidepick-row.on{border-color:var(--brass); background:color-mix(in srgb,var(--brass) 10%,var(--surface-2))}
.sidepick-row b{font-weight:600; font-size:.94rem}
.sidepick-count{font-size:.83rem; color:var(--text-3); margin-top:.15rem}
.sidepick-count.done{color:var(--leaf); font-weight:600}

/* ============ CHEF'S CHOICE / FYI ============ */
.fyi{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.fyi li{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem .85rem;
  background:var(--surface-2); border-bottom:1px solid var(--line); font-size:.9rem}
.fyi li:last-child{border-bottom:0}
.fyi li span{color:var(--text-3); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.fyi li b{font-weight:600}
.fyi-note{font-size:.8rem; color:var(--text-3); margin-top:.15rem}
.notice{font-size:.85rem; color:var(--text-2); background:var(--surface-2); border:1px dashed var(--line);
  border-radius:9px; padding:.75rem .85rem}
.who{float:right; font-size:.63rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border-radius:999px; padding:.2rem .55rem; border:1px solid currentColor}
.who.you{color:var(--leaf)} .who.chef{color:var(--brass)}


/* ============ WHERE TO FIND US ============ */
.where-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem}
.where-card{border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.4rem,3vw,2rem);
  background:var(--surface); display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; box-shadow:var(--shadow)}
.where-card h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.where-card .addr{font-size:1.05rem; line-height:1.5; color:var(--text-2)}
.where-note{font-size:.92rem; color:var(--text-2)}
.where-card .btn{margin-top:.3rem}

/* ============ ADDRESS / POSTCODE ============ */
.addr-card{border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); padding:1rem}
.addr-card .addr{font-size:1rem; line-height:1.55}
.pc-row{display:flex; gap:.5rem}
.pc-row input{flex:1; text-transform:uppercase}
.pc-row .btn{flex-shrink:0}
.pc-wait{font-size:.85rem; color:var(--text-3); padding-top:.4rem}
.pc-bad{font-size:.85rem; color:var(--chilli); padding-top:.4rem}
.pc-card{margin-top:.55rem; border:1px solid var(--line); border-left-width:3px; border-radius:var(--r-sm);
  padding:.8rem .9rem; background:var(--surface-2); display:flex; flex-direction:column; gap:.25rem}
.pc-card.ok{border-left-color:var(--leaf)}
.pc-card.out{border-left-color:var(--chilli)}
.pc-head{font-weight:700; font-size:.92rem}
.pc-card.ok .pc-head{color:var(--leaf)} .pc-card.out .pc-head{color:var(--chilli)}
.pc-place{font-size:.9rem}
.pc-dist{font-size:.82rem; color:var(--text-3)}
.pc-links{margin-top:.35rem; font-size:.85rem}
.pc-links a{color:var(--brass); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.pc-note{font-size:.83rem; color:var(--text-2); margin-top:.4rem; border-top:1px dashed var(--line); padding-top:.5rem}
.cal-empty{border:1px dashed var(--line-strong); border-radius:var(--r-sm); background:var(--surface-2);
  padding:1.3rem 1rem; text-align:center; display:flex; flex-direction:column; gap:.6rem; align-items:center}
.cal-empty .ce-head{font-weight:700; font-size:1rem}
.cal-empty p{font-size:.88rem; color:var(--text-2); max-width:34ch}
.cal-empty .btn{margin-top:.3rem}
.cal-warn{margin-top:.55rem; font-size:.8rem; line-height:1.45; color:var(--text-2);
  border:1px solid var(--saffron); border-left-width:3px; border-radius:var(--r-sm); padding:.6rem .7rem}
.cal-warn b{color:var(--saffron)}
.slot-hint{font-size:.86rem; color:var(--text-3); border:1px dashed var(--line); border-radius:var(--r-sm);
  padding:.8rem .85rem; text-align:center}

/* ============ COOKING DAYS (top of the menu) ============ */
.cook{border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:clamp(1.2rem,2.6vw,1.75rem); margin-bottom:1.5rem; box-shadow:var(--shadow)}
.cook-head{display:flex; flex-wrap:wrap; gap:.6rem 1.5rem; align-items:baseline;
  justify-content:space-between; margin-bottom:1.2rem}
.cook-head h3{font-size:clamp(1.35rem,2.6vw,1.75rem); margin-top:.2rem}
.cook-sub{font-size:1.05rem; color:var(--text-2); font-weight:700; text-align:center;
  flex-basis:100%; max-width:52ch; margin:.2rem auto 0}
.cook-grid{display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(1.2rem,3vw,2.25rem)}
.cook-cal .cal-head{margin-bottom:.5rem}
.cook-cal .cal-grid button, .cook-cal .cal-grid .cd-shut, .cook-cal .cal-grid .cd-open{
  aspect-ratio:1; max-height:40px; border-radius:8px; display:grid; place-items:center;
  font-size:.85rem; font-variant-numeric:tabular-nums lining-nums}
.cd-shut{color:var(--text-3); opacity:.4}
.cd-open{background:color-mix(in srgb,var(--brass) 16%,transparent);
  color:var(--text); font-weight:700; border:1px solid color-mix(in srgb,var(--brass) 45%,transparent)}
.cd-open.sel{background:var(--brass); color:#1A1206; border-color:var(--brass)}
.cd-shut.today, .cd-open.today{box-shadow:0 0 0 1px var(--line-strong) inset}
.cook-key{display:flex; align-items:center; gap:.45rem; font-size:.78rem; color:var(--text-3); margin-top:.7rem}
.cook-key .sw{width:14px;height:14px;border-radius:4px;flex-shrink:0;
  background:color-mix(in srgb,var(--brass) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--brass) 45%,transparent)}
.cook-list{display:flex; flex-direction:column}
.cook-list ul{list-style:none; margin:.55rem 0 0; padding:0; display:flex; flex-direction:column; gap:.4rem}
.cook-list li .cd-row{width:100%; text-align:left; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:.4rem .9rem; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2);
  padding:.65rem .85rem}
.cook-list li.on .cd-row{border-color:var(--brass);
  background:color-mix(in srgb,var(--brass) 10%,var(--surface-2)); box-shadow:0 0 0 1px var(--brass) inset}
.cd-when{font-weight:700; font-size:.94rem}
.cd-times{display:flex; flex-wrap:wrap; gap:.3rem; margin-left:auto}
.cd-times i{font-style:normal; font-size:.75rem; color:var(--text-2); background:var(--bg);
  border:1px solid var(--line); border-radius:999px; padding:.12rem .5rem}
.cook-note{font-size:.83rem; color:var(--text-3); margin-top:.8rem}
.cook-note b{color:var(--text)}
.cook-note.flash{color:var(--leaf)}
.cook-empty{text-align:center; display:flex; flex-direction:column; align-items:center; gap:.7rem; padding:.5rem 0}
.cook-empty h3{font-size:1.3rem}
.cook-empty p{font-size:.92rem; color:var(--text-2); max-width:52ch}
@media (max-width:760px){
  .cook-grid{grid-template-columns:1fr}
  .cd-times{margin-left:0; width:100%}
}

/* ============ MOBILE APP SHELL ============ */
.tabbar{display:none}
.appbar{display:none}
.mob-sticky{display:none}

@media (max-width:899px){
  :root{--tab-h:calc(64px + env(safe-area-inset-bottom))}
  .nav-links{display:none}
  header.site .cart-btn span.lbl-cart{display:none}
  #ordersBtn{display:none}
  .brand img{height:34px}
  .nav{gap:.6rem}
  .foot-lockup img{height:46px}
  section{padding-block:2.5rem}
  .wrap{width:min(1180px,100% - 1.75rem)}
  main{padding-bottom:calc(var(--tab-h) + 12px)}
  .dish{grid-template-columns:1fr}
  .dish:nth-child(even){grid-template-columns:1fr}
  .dish:nth-child(even) .dish-media{order:0}
  .dish-media{min-height:0; aspect-ratio:4/3}
  .story{grid-template-columns:1fr}
  .hero-strip{grid-template-columns:repeat(3,1fr)}
  .hero{padding-block:3rem 2.5rem}

  /* screens */
  main > section[data-screen]{display:none}
  body[data-view="home"] main > section[data-screen~="home"]{display:block}
  body[data-view="menu"] main > section[data-screen~="menu"]{display:block}
  footer{display:none}
  body[data-view="home"] footer{display:block}

  /* bottom tab bar */
  .tabbar{display:grid; grid-template-columns:repeat(4,1fr); position:fixed; bottom:0; left:0; right:0; z-index:80;
    background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(16px) saturate(1.4);
    border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); height:var(--tab-h)}
  .tabbar button{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
    font-size:.66rem; font-weight:600; letter-spacing:.02em; color:var(--text-3); position:relative; height:64px}
  .tabbar button[aria-current=true]{color:var(--brass)}
  .tabbar button svg{width:21px;height:21px}
  .tabbar .tb-badge{position:absolute; top:8px; left:calc(50% + 6px); min-width:17px;height:17px;padding:0 4px;
    border-radius:999px;background:var(--saffron);color:#fff;font-size:.62rem;font-weight:700;display:grid;place-items:center}

  /* panels become bottom sheets */
  .panel{top:auto; bottom:0; right:0; left:0; width:100%; height:auto; max-height:92dvh;
    border-left:0; border-top:1px solid var(--line); border-radius:20px 20px 0 0; transform:translateY(102%)}
  .panel.on{transform:translateY(0)}
  .grab{display:block; width:38px; height:4px; border-radius:999px; background:var(--line-strong);
    margin:.55rem auto .1rem; opacity:.7; flex-shrink:0}
  .panel-body{padding-bottom:1.25rem}

  /* sticky cart bar */
  .mob-sticky{display:flex; position:fixed; left:.75rem; right:.75rem; bottom:calc(var(--tab-h) + .6rem); z-index:75;
    align-items:center; gap:.75rem; background:var(--brass); color:#1A1206; border-radius:999px;
    padding:.7rem 1.1rem; box-shadow:var(--shadow-lg); font-weight:700; font-size:.92rem;
    transform:translateY(150%); transition:transform .3s cubic-bezier(.32,.72,0,1)}
  .mob-sticky.on{transform:translateY(0)}
  .mob-sticky .n{background:rgba(26,18,6,.18); border-radius:999px; padding:.1rem .55rem; font-size:.8rem}
  .mob-sticky .amt{margin-left:auto; font-variant-numeric:tabular-nums}
  .review dt{font-size:.68rem}
}
@media (min-width:900px){
  .tabbar{display:none !important}
  .mob-sticky{display:none !important}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .review dl{grid-template-columns:1fr}
  .review dd{text-align:left; padding-top:0; padding-bottom:.6rem}
  .review dt{background:transparent; border-bottom:0; padding-bottom:.15rem}
}

/* ============ MOTION ============ */
/* Scroll-reveal. Content is VISIBLE by default; the hidden state is opt-in and
   is only armed by JS once it knows the observer can actually fire. Never make
   content depend on JavaScript running correctly just to be seen. */
.rise{opacity:1; transform:none}
html.js-anim .rise{opacity:0; transform:translateY(18px)}
html.js-anim .rise.in{opacity:1; transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
@keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-logo,.hero .sub-line,.hero .tag,.hero .lede,.hero .cta,.hero .chips,.hero-strip{animation:heroIn .85s cubic-bezier(.22,1,.36,1) backwards}
.hero .sub-line{animation-delay:.08s} .hero .tag{animation-delay:.15s} .hero .lede{animation-delay:.22s}
.hero .cta{animation-delay:.3s} .hero .chips{animation-delay:.38s} .hero-strip{animation-delay:.46s}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.32)}100%{transform:scale(1)}}
.badge.pop,.tb-badge.pop{animation:pop .38s ease}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.01ms !important}
  .rise, html.js-anim .rise{opacity:1; transform:none}
}