/* Mahek Café & Snacks — Direction 2
   cream body · black header/footer · gold · terracotta accent */

:root{
  --cream:#F7F1E6; --card:#FFFFFF; --ink:#3A352E; --muted:#6B6154;   /* was #7A7062 — failed AA (4.32) on cream; now 5.39 */
  --dark:#101010; --dark2:#1A1A1A; --gold:#C9962C; --gold-lt:#E3B858;
  --terr:#B5603A; --sage:#6E8B7B; --line:#E7DECB; --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;font-weight:400;line-height:1.14}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--terr);font-weight:700}
.center{text-align:center}
.sechead{margin-bottom:36px;max-width:640px}
.sechead.center{margin-left:auto;margin-right:auto}
.sechead h2{font-size:clamp(27px,3.5vw,37px);margin:9px 0 10px}
.sechead p{color:var(--muted)}
section{padding:74px 0}

/* buttons */
.btn{display:inline-block;background:var(--gold);color:#141414;padding:11px 21px;border-radius:3px;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:.15s;border:1.5px solid var(--gold);cursor:pointer}
.btn:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:var(--gold);color:#141414}
.btn.dark{background:var(--terr);border-color:var(--terr);color:#fff}
.btn.dark:hover{background:#9E5030;border-color:#9E5030}
.btn.outline{background:transparent;border-color:var(--terr);color:var(--terr)}
.btn.outline:hover{background:var(--terr);color:#fff}

/* header */
/* location bar + header travel down the page together as one sticky unit */
.topbar{position:sticky;top:0;z-index:60;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.hdr{background:var(--dark)}
.formnote{display:inline-block;margin-left:12px;font-size:12.5px;color:var(--muted)}
@media(max-width:560px){.formnote{display:block;margin:8px 0 0}}
/* keep in-page anchors (#reserve, #find…) clear of the sticky bar */
[id]{scroll-margin-top:124px}
@media(max-width:680px){[id]{scroll-margin-top:150px}}
.hdr .wrap{display:flex;align-items:center;gap:22px;padding-top:11px;padding-bottom:11px;position:relative}
.hdr .brand img{height:56px;width:auto}
.nav{margin-left:auto;display:flex;gap:24px}
.nav a{font-size:13.5px;color:#E8E0D0;letter-spacing:.02em;padding:12px 0;border-bottom:1.5px solid transparent;
  display:inline-flex;align-items:center;min-height:44px}
.nav a:hover,.nav a.on{color:var(--gold-lt);border-bottom-color:var(--gold)}
.hact{display:flex;gap:9px}
.burger{display:none;margin-left:auto;background:none;border:0;color:#E8E0D0;font-size:25px;cursor:pointer;line-height:1}

/* hero */
.hero{position:relative;background:#0b0b0b;overflow:hidden}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.86}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.78) 46%,rgba(8,8,8,.18) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:104px;padding-bottom:104px}
.hero .in{max-width:570px}
.hero .eyebrow{color:var(--gold)}
.hero h1{font-size:clamp(37px,5.6vw,60px);color:#fff;margin:14px 0 18px}
.hero p{color:#E4DACA;font-size:16.5px;max-width:475px;margin-bottom:28px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
/* page hero (inner pages) */
.phero{background:var(--dark);color:#fff;padding:66px 0 60px;text-align:center}
.phero h1{font-size:clamp(31px,4.6vw,46px);margin:10px 0 12px}
.phero .eyebrow{color:var(--gold)}
.phero p{color:#CFC5B2;max-width:620px;margin:0 auto}

/* info strip */
.strip{background:#fff;border-bottom:1px solid var(--line)}
.strip .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.strip .wrap>div{padding:19px 0}
.strip .wrap>div+div{padding-left:28px;border-left:1px solid var(--line)}
.strip b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--terr);margin-bottom:3px}
.strip span{font-size:15px}
.strip span a{display:inline-block;padding:6px 0;min-height:32px}

/* dish cards */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dish{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.dish img{height:152px;width:100%;object-fit:cover}
.dish .b{padding:14px 15px 16px}
.dish h4{font-size:15.5px;font-family:"Inter",sans-serif;font-weight:600;display:flex;justify-content:space-between;gap:10px;margin-bottom:5px}
.dish h4 em{font-style:normal;color:var(--terr);font-weight:700}
.dish p{font-size:12.5px;color:var(--muted);line-height:1.5}
.halal{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:12.5px;color:var(--muted)}
.halal b{display:inline-flex;align-items:center;justify-content:center;background:var(--sage);color:#fff;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:99px;font-weight:700}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal img{height:190px;width:100%;object-fit:cover;border-radius:5px}
.gal .tall{grid-row:span 2;height:392px}
.ph{background:repeating-linear-gradient(45deg,#EFE7D7,#EFE7D7 10px,#E9E0CD 10px,#E9E0CD 20px);
  border:1px dashed #CFC2A6;border-radius:5px;display:flex;align-items:center;justify-content:center;
  color:#9A8F79;font-size:12px;text-align:center;padding:14px;min-height:190px}

/* testimonials */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rev{background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px 22px 20px}
.rev .st{color:var(--gold);letter-spacing:2px;font-size:14px;margin-bottom:9px}
.rev p{font-size:14px;color:var(--ink);line-height:1.62}
.rev .who{margin-top:13px;font-size:12.5px;color:var(--muted);font-weight:600}

/* menu tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:30px}
.tab{background:#fff;border:1px solid var(--line);border-radius:99px;padding:9px 17px;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s}
.tab:hover{border-color:var(--terr);color:var(--terr)}
.tab.on{background:var(--terr);border-color:var(--terr);color:#fff}
.panel{display:none}
.panel.on{display:block}
.mlist{display:grid;grid-template-columns:1fr 1fr;gap:2px 44px;max-width:960px;margin:0 auto}
.mi{display:grid;grid-template-columns:1fr auto;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.mi h4,.mi .mn{font-family:"Inter",sans-serif;font-size:15px;font-weight:600;display:block}
/* .mn replaced <h4> for menu items — 67 headings in a row flattened the
   document outline and told screen readers the page had no structure. */
.mi small{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:2px;line-height:1.5}
.mi .pr{font-weight:700;color:var(--terr);font-variant-numeric:tabular-nums;font-size:15px}

/* catering */
.dark-sec{background:var(--dark);color:#EDE4D2}
.dark-sec h2{color:#fff}
.dark-sec .eyebrow{color:var(--gold)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.dark-sec ul{list-style:none;margin:18px 0 26px}
.dark-sec li{padding:7px 0 7px 24px;position:relative;color:#DDD3C0;font-size:15px}
.dark-sec li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:9px;background:var(--gold);border-radius:50%}
.dark-sec img{border-radius:6px}

/* find your way */
.find{display:grid;grid-template-columns:1fr 1.15fr;gap:44px}
.vbox{background:#fff;border:1px solid var(--line);border-radius:6px;padding:26px}
.vrow{padding:14px 0;border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:0}
.vrow b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--terr);margin-bottom:4px}
.vrow span,.vrow a{font-size:15px}
.map{border:1px solid var(--line);border-radius:6px;overflow:hidden;min-height:360px}
.map iframe{width:100%;height:100%;min-height:360px;border:0;display:block}

/* closing cta */
.closing{background:#9E5030;color:#fff;text-align:center;padding:64px 0}  /* deep terracotta, on-palette */
.closing h2{color:#fff;font-size:clamp(26px,3.4vw,34px);margin-bottom:8px}
.closing p{color:#F3E3DA;margin-bottom:24px}

/* forms */
.form{display:grid;gap:14px;max-width:560px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:6px}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:4px;
  font-family:inherit;font-size:14.5px;background:#fff;color:var(--ink)}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--terr)}

/* footer */
.foot{background:var(--dark);color:#EDE4D2;padding:56px 0 28px}
.foot .grid{display:grid;grid-template-columns:1.15fr 1fr 1fr 1fr;gap:34px}
.foot .brand img{height:92px;width:auto;margin-bottom:13px}
.foot h5{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:11px}
.foot p{font-size:14px;color:#CFC5B2;line-height:1.78}
.foot a:hover{color:var(--gold-lt)}
.foot .lnk{display:inline-block;margin-top:9px;color:var(--gold);font-size:13.5px;
  border-bottom:1px solid rgba(201,150,44,.45);padding-bottom:2px}
.legal{margin-top:36px;padding-top:19px;border-top:1px solid #262626;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:12.5px;color:#8B8272}

@media(max-width:980px){
  .split,.find{grid-template-columns:1fr;gap:30px}
  .cards4{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal .tall{grid-row:auto;height:190px}
  .revs{grid-template-columns:1fr}
  .foot .grid{grid-template-columns:1fr 1fr}
  .mlist{grid-template-columns:1fr}
}
@media(max-width:680px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--dark);
    flex-direction:column;gap:0;padding:6px 24px 16px}
  .nav.open{display:flex}
  .nav a{padding:11px 0;border-bottom:1px solid #242424}
  .burger{display:block}
  .hdr .hact{display:none}
  .strip .wrap{grid-template-columns:1fr}
  .strip .wrap>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .cards4{grid-template-columns:1fr 1fr;gap:12px}
  .foot .grid{grid-template-columns:1fr}
  .form .two{grid-template-columns:1fr}
  section{padding:54px 0}
  .hero .wrap{padding-top:70px;padding-bottom:70px}
}

/* ── added: catering feature pills ── */
.pills{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 22px}
.pills span{font-size:12.5px;color:#DDD3C0;border:1px solid rgba(201,150,44,.4);
  border-radius:99px;padding:6px 14px;letter-spacing:.02em}

/* ── added: today's offers ── */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.offer{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.offer img{height:170px;width:100%;object-fit:cover}
.offer .b{padding:18px 19px 20px;flex:1}
.offer .tagline{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terr);font-weight:700;margin-bottom:7px}
.offer h4{font-family:Georgia,serif;font-size:20px;margin-bottom:7px}
.offer p{font-size:13.5px;color:var(--muted);line-height:1.55}

/* ── added: experiences ── */
.exps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.exp{position:relative;border-radius:6px;overflow:hidden;min-height:270px;display:flex;align-items:flex-end}
.exp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.exp::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,.05) 30%,rgba(10,10,10,.88) 100%)}
.exp .b{position:relative;z-index:2;padding:22px;color:#fff}
.exp .tagline{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt);font-weight:700;margin-bottom:6px}
.exp h4{font-family:Georgia,serif;font-size:21px;color:#fff;margin-bottom:6px}
.exp p{font-size:13px;color:#DDD3C0;line-height:1.5}

/* ── added: booking widget ── */
.book{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px}
.steps{display:flex;gap:0;margin-bottom:24px}
.steps div{flex:1;text-align:center;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding-bottom:11px;border-bottom:2px solid var(--line);position:relative}
.steps div.on{color:var(--terr);border-bottom-color:var(--terr)}
.steps div i{display:block;font-style:normal;width:26px;height:26px;line-height:26px;border-radius:50%;
  background:var(--line);color:var(--muted);margin:0 auto 8px;font-size:12px}
.steps div.on i{background:var(--terr);color:#fff}
.bookrow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.booknote{font-size:12.5px;color:var(--muted);margin-top:12px}

/* ── added: newsletter ── */
.news{display:flex;gap:8px;margin-top:12px;max-width:330px}
.news input{background:#1A1A1A;border-color:#2E2E2E;color:#EDE4D2;font-size:13.5px;padding:10px 12px}
.news input::placeholder{color:#7E7565}
.news button{white-space:nowrap;padding:10px 15px;font-size:11.5px}

/* ── improved placeholder panels ── */
.ph{background:#FBF7EF;border:1px solid var(--line);border-radius:6px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:7px;
  color:#A99C84;font-size:12.5px;text-align:center;padding:20px;min-height:190px;
  font-family:"Inter",sans-serif;letter-spacing:.04em}
.ph::before{content:"";width:34px;height:34px;border-radius:50%;border:1.5px solid #DCD0B8;
  background:radial-gradient(circle at 50% 42%, #DCD0B8 0 4px, transparent 4px);opacity:.9}
.ph small{display:block;color:#BCB09A;font-size:11.5px;letter-spacing:.02em}

@media(max-width:900px){
  .offers,.exps{grid-template-columns:1fr}
  .bookrow{grid-template-columns:1fr}
}

/* about: five foundations tiles */
.spices{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.spice{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:8px;
  padding:18px 16px 20px;text-align:center}
.spice .num{position:absolute;top:12px;left:16px;font-family:Georgia,serif;font-size:30px;
  line-height:1;color:var(--gold);opacity:.85}
.spice img{width:96px;height:96px;object-fit:contain;margin:4px auto 12px}
.spice h4{font-family:Georgia,serif;font-size:17px;color:var(--ink);margin-bottom:2px}
.spice small{display:block;font-size:11.5px;color:var(--terr);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.spice p{font-size:12.5px;color:var(--muted);line-height:1.5}
@media(max-width:900px){.spices{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.spices{grid-template-columns:1fr}}

/* ── About: undivided-map band ── */
/* The map is shown at its natural aspect (width:100%, height:auto) rather than
   as a cropped background. object-fit:cover used to slice the middle out of the
   subcontinent, so only central/southern India was visible. */
.mapband{position:relative;overflow:hidden;padding:0;background:#2b2118}
.mapband .mapbg{display:block;width:100%;height:auto}
/* keep the map readable — darken just enough for the text to hold */
.mapband::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(20,14,8,.30) 0%,rgba(20,14,8,.58) 100%)}
/* Text floats over the map instead of adding height to the band, so the map is
   never cropped. Below 760px the map is too short to hold the copy, so the
   text drops underneath it on a solid panel. */
.mapband .wrap{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:24px}
.mapband h2{color:#fff;font-size:clamp(22px,3.4vw,38px);text-shadow:0 2px 14px rgba(0,0,0,.75)}
.mapband p{color:#F0E6D4;max-width:760px;margin:14px auto 0;font-size:clamp(13px,1.15vw,16px);
  text-shadow:0 1px 9px rgba(0,0,0,.8)}
@media(max-width:760px){
  .mapband::after{background:linear-gradient(rgba(20,14,8,.34),rgba(20,14,8,.34))}
  .mapband .wrap{position:static;background:#2b2118;padding:34px 24px 40px}
  .mapband p{margin-top:10px}
}

/* ── hero slideshow ── */
.hero .slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease;z-index:0}
.hero .slide.on{opacity:.86}

/* ── location top bar ── */
.locbar{background:var(--gold);color:#141414}
.locbar .wrap{display:flex;align-items:center;justify-content:center;gap:9px;padding:7px 24px;
  text-align:center;font-size:12.5px;font-weight:600;letter-spacing:.02em}
.locbar b{font-weight:800}
.locbar .pin{font-size:14px;line-height:1}
.locbar .locswitch{margin-left:14px;padding-left:14px;border-left:1px solid rgba(20,20,20,.28);
  font-weight:700;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.locbar .locswitch:hover{color:#3a2a06}
@media(max-width:680px){
  /* keep the sticky stack compact on phones */
  .locbar .wrap{font-size:11px;gap:5px;flex-wrap:wrap;line-height:1.45;padding:5px 20px}
  .locbar .locswitch{margin-left:0;padding-left:0;border-left:0}
  .hdr .brand img{height:46px}
  .hdr .wrap{padding-top:8px;padding-bottom:8px}
}

/* ── new logo sizing ── */
.hdr .brand img{height:60px}
.foot .brand img{height:98px}

/* ── home hero: two columns with Today's Special ── */
.hero .wrap{display:grid;grid-template-columns:1fr 460px;gap:44px;align-items:center}
.hero .in{max-width:560px}
/* width:100% (not just max-width) matters — as a grid item this box would
   otherwise shrink-to-fit the dish name, so the card changed width on every
   rotation. Fixed width + the fixed child heights below = a card that never
   moves while the photo changes. */
.hspecial{position:relative;z-index:2;background:rgba(14,12,10,.62);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);border:1px solid rgba(201,150,44,.5);
  border-radius:13px;padding:24px;width:100%;max-width:460px;margin-left:auto;box-sizing:border-box}
.hspecial .cap{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);font-weight:700;margin-bottom:13px}
.hspecial .slidewrap{position:relative;border-radius:8px;overflow:hidden;height:260px;margin-bottom:16px;background:#1a1a1a}
.hspecial .sp{position:absolute;inset:0;opacity:0;transition:opacity .8s ease}
.hspecial .sp.on{opacity:1}
.hspecial .sp img{width:100%;height:100%;object-fit:cover}
/* Fixed heights below keep the whole card exactly the same size as the dish
   changes. Do not swap these for min-height — a longer name or description
   would then grow the card and it would jump on every rotation. */
.hspecial .nm{font-family:Georgia,serif;font-size:25px;color:#fff;display:flex;justify-content:space-between;
  gap:10px;align-items:baseline;height:33px;white-space:nowrap;overflow:hidden}
/* The name shrinks and ellipsises; the price never does, so a long dish
   name can never push the price out of the card. */
.hspecial .nm .dishname{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hspecial .nm em{font-style:normal;color:var(--gold-lt);font-weight:700;font-family:"Inter",sans-serif;font-size:19px;flex:0 0 auto}
.hspecial .ds{font-size:13.5px;color:#D9CFBE;margin-top:6px;line-height:1.55;height:42px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2}
.hspecial .dots{display:flex;gap:7px;margin-top:17px}
.hspecial .dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:.2s}
.hspecial .dot.on{background:var(--gold)}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:26px}.hspecial{margin:0;max-width:none}}

/* (catering carousel removed — replaced by the .cgal mosaic gallery above) */

/* ── modals (order + location) ── */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(8,8,8,.72);padding:20px;animation:mfade .2s ease}
.modal.open{display:flex}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.modal-card{background:var(--cream);border-radius:10px;max-width:440px;width:100%;padding:30px 28px;position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.45);border-top:4px solid var(--gold)}
.modal-x{position:absolute;top:10px;right:14px;background:none;border:0;font-size:27px;line-height:1;color:var(--muted);cursor:pointer}
.modal-x:hover{color:var(--ink)}
.modal-h{font-family:Georgia,serif;font-size:26px;color:var(--ink);margin-bottom:4px}
.modal-sub{font-size:14px;color:var(--muted);margin-bottom:20px}
.order-opts{display:flex;flex-direction:column;gap:11px}
.oo{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:7px;padding:13px 16px;background:#fff;transition:.15s}
.oo b{font-size:15px;color:var(--ink)}
.oo span{font-size:12px;color:var(--muted)}
.oo:hover{border-color:var(--gold);transform:translateY(-1px)}
.oo-pickup{border-left:4px solid var(--gold)}
.oo.soon{opacity:.55;cursor:default}
.oo.soon:hover{transform:none;border-color:var(--line)}
.oo-ue b{color:#0a7a4f}.oo-dd b{color:#e2452a}.oo-gh b{color:#e5601f}
/* location popup */
.loc-card.modal-card{max-width:640px}
.loc-top{text-align:center;margin-bottom:18px}
.loc-top img{height:70px;width:auto;margin:0 auto 10px}
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.loc-item{display:flex;flex-direction:column;text-align:left;background:#fff;border:1.5px solid var(--line);
  border-radius:8px;padding:18px 18px 16px;cursor:pointer;transition:.15s;font:inherit;color:inherit}
.loc-item:hover{border-color:var(--gold);box-shadow:0 8px 22px rgba(0,0,0,.1);transform:translateY(-2px)}
.loc-item .tag{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--terr);font-weight:700;margin-bottom:8px}
.loc-item .tag.alt{color:var(--sage)}
.loc-item b{font-family:Georgia,serif;font-size:22px;color:var(--ink);margin-bottom:6px}
.loc-item .ad{font-size:13px;color:var(--muted);line-height:1.5;flex:1}
.loc-item .pick{margin-top:12px;font-size:12.5px;font-weight:700;letter-spacing:.03em;color:var(--gold);text-transform:uppercase}
@media(max-width:560px){.loc-grid{grid-template-columns:1fr}.modal-card{padding:26px 20px}}

/* ── catering gallery: mosaic tiles ── */
.cgal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:186px;gap:12px;
  grid-auto-flow:dense}  /* dense = tiles backfill gaps, so the mosaic stays tight */
.cgal figure{margin:0;position:relative;overflow:hidden;border-radius:6px;background:#EFE7D7;cursor:zoom-in}
.cgal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.cgal figure:hover img{transform:scale(1.06)}
.cgal .wide{grid-column:span 2}
.cgal .tall{grid-row:span 2}
.cgal .big{grid-column:span 2;grid-row:span 2}
.cgal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 13px 11px;font-size:12.5px;
  color:#fff;letter-spacing:.02em;opacity:0;transition:opacity .25s;
  background:linear-gradient(transparent,rgba(0,0,0,.78))}
.cgal figure:hover figcaption,.cgal figure:focus-within figcaption{opacity:1}
.galnote{margin-top:18px;font-size:13px;color:var(--muted);text-align:center}
@media(max-width:900px){
  .cgal{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
  .cgal .big{grid-column:span 2;grid-row:span 2}
  .cgal figcaption{opacity:1;background:linear-gradient(transparent,rgba(0,0,0,.7))}
}

/* lightbox */
.lbox{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;
  background:rgba(8,8,8,.93);padding:26px}
.lbox.open{display:flex}
.lbox img{max-width:92vw;max-height:86vh;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lbox button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;line-height:1}
.lbox .x{top:16px;right:22px;font-size:34px}
.lbox .prev,.lbox .next{top:50%;transform:translateY(-50%);font-size:42px;padding:12px 18px}
.lbox .prev{left:6px}.lbox .next{right:6px}
.lbox .cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#E6DCC9;font-size:13.5px}
@media(max-width:560px){.lbox .prev,.lbox .next{font-size:30px;padding:8px 10px}}

/* ── guest reviews ────────────────────────────────────────────────
   Real Google reviews only. Every card must name a real reviewer and
   the location they reviewed. Never add an unattributed quote here. */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:8px;padding:22px 20px 20px;
  display:flex;flex-direction:column}
.tcard .stars{color:var(--gold);font-size:15px;letter-spacing:2px;margin-bottom:11px}
.tcard blockquote{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink);flex:1 1 auto}
.tcard .who{margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.tcard .who b{display:block;font-size:13.5px;font-weight:600}
.tcard .who span{font-size:11.5px;color:var(--muted)}
.revnote{margin-top:24px;text-align:center;font-size:12.5px;color:var(--muted)}
@media(max-width:980px){.tgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tgrid{grid-template-columns:1fr}}

/* ── halal stamp ──────────────────────────────────────────────────
   assets/halal-stamp.png, lifted from the Indigo Figma board.
   It stands on its own with NO text beside it — the same way the old
   Indigo site used it. The artwork carries the message; don't add a
   caption. See README before shipping it at all. */
.halalmark{width:92px;height:92px;display:block;flex:0 0 auto}
/* Stamp sits just after the button, not pinned to the far edge —
   space-between left it stranded on the right with a dead gap. */
.markrow{display:flex;align-items:center;justify-content:flex-start;gap:34px;
  flex-wrap:wrap;margin-top:26px}
.markrow>p{margin:0}
.markrow.center{justify-content:center;gap:34px}
@media(max-width:560px){
  .markrow{justify-content:center;gap:22px}
  .halalmark{width:78px;height:78px}
}

/* ── book by phone panel (replaced the 3-step availability widget) ── */
.callbox{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:30px 34px}
.callbox b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--terr);margin-bottom:6px}
.callbox .phone{display:block;font-family:Georgia,serif;font-size:38px;line-height:1.1;color:var(--ink)}
.callbox .phone:hover{color:var(--terr)}
.callbox span{display:block;margin-top:7px;font-size:13px;color:var(--muted)}
@media(max-width:560px){.callbox{padding:22px}.callbox .phone{font-size:26px}}

/* ── mithai: grid of sweets ───────────────────────────────────────
   Every sweet shows as a photo tile with its name underneath. Tapping
   one opens it larger with its description; clicking anywhere outside
   closes it again.
   TO ADD A SWEET: copy one <button class="swt"> block in menu.html.
   TO ADD A PHOTO: drop a file into assets/mithai/ named to match the
   data-img attribute — a tile with no photo shows a lettered card
   instead, never a broken image. */
.sweetgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.swt{background:none;border:0;padding:0;cursor:pointer;text-align:center;font:inherit;
  display:flex;flex-direction:column;gap:9px}
.swpic{display:block;position:relative;overflow:hidden;border-radius:8px;background:#EFE7D7;
  aspect-ratio:1/1;border:1px solid var(--line)}
.swpic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.swt:hover .swpic img{transform:scale(1.07)}
.swt:hover .swpic{border-color:var(--gold)}
.swt:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.swname{font-size:15.5px;font-weight:600;line-height:1.35;color:var(--ink)}
/* On the menu page the description sits under the name and is always
   readable — no tap needed. The home teaser omits it (names only). */
.swdesc{display:block;font-size:13.5px;line-height:1.45;color:var(--muted);font-style:italic;margin-top:-2px}
.sweetgrid.showdesc .swt{gap:7px}
.sweetgrid.showdesc{row-gap:26px}
/* lettered stand-in until that sweet has been photographed */
.swpic.noimg{display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,#F0E8D8,#F0E8D8 10px,#EBE2CF 10px,#EBE2CF 20px)}
.swpic.noimg span{width:46px;height:46px;border-radius:50%;background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:21px}
.sweetnote{margin-top:26px;text-align:center;font-size:15.5px;line-height:1.6;color:var(--muted);
  max-width:660px;margin-left:auto;margin-right:auto}
@media(max-width:640px){.sweetnote{font-size:14px}}
@media(max-width:1000px){.sweetgrid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:640px){.sweetgrid{grid-template-columns:repeat(3,1fr);gap:12px}
  .swname{font-size:12.5px}.swdesc{font-size:11.5px;line-height:1.4}}

/* ── sweet popup (mithai) ─────────────────────────────────────────
   Name and description on the left, photo on the right.
   Falls back to a named card when that sweet has no photo yet. */
.sbox{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;
  background:rgba(8,8,8,.9);padding:24px}
.sbox.open{display:flex}
.sinner{position:relative;background:var(--cream);border-radius:12px;overflow:hidden;
  width:min(860px,100%);display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}

/* left column */
.sbox .stext{padding:38px 34px;display:flex;flex-direction:column;justify-content:center}
.sbox .skick{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--terr);
  font-weight:700;margin-bottom:14px}
.sbox .stext b{font-family:Georgia,serif;font-size:34px;font-weight:400;line-height:1.15}
.sbox .sdesc{margin-top:8px;font-size:15px;color:var(--muted);font-style:italic}
.sbox .snav{display:flex;align-items:center;gap:14px;margin-top:28px}
.sbox .snav button{background:#fff;border:1px solid var(--line);color:var(--ink);cursor:pointer;
  width:42px;height:42px;border-radius:50%;font-size:22px;line-height:1;transition:.15s}
.sbox .snav button:hover{background:var(--gold);border-color:var(--gold);color:#141414}
.sbox .scount{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* right column */
.sbox .spic{background:#EFE7D7;min-height:340px}
.sbox .spic img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block}
.sbox .sph{height:100%;min-height:340px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;text-align:center;padding:26px;
  background:repeating-linear-gradient(45deg,#F0E8D8,#F0E8D8 12px,#EBE2CF 12px,#EBE2CF 24px)}
.sbox .sph i{width:70px;height:70px;border-radius:50%;background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-family:Georgia,serif;font-size:32px;line-height:1}
.sbox .sph span{font-size:12.5px;color:var(--muted)}

.sbox .x{position:absolute;top:10px;right:14px;background:rgba(0,0,0,.45);color:#fff;border:0;
  width:34px;height:34px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;z-index:3}

@media(max-width:720px){
  .sinner{grid-template-columns:1fr}
  .sbox .stext{padding:26px 24px 22px;order:2}
  .sbox .spic{order:1;min-height:0}
  .sbox .spic img,.sbox .sph{min-height:0;height:230px}
  .sbox .stext b{font-size:27px}
  .sbox .snav{margin-top:20px}
  .sbox .x{background:rgba(0,0,0,.55)}
}

/* ── catering "get a quote" popup ─────────────────────────────── */
.qbox{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;
  background:rgba(8,8,8,.88);padding:24px}
.qbox.open{display:flex}
.qinner{position:relative;background:var(--cream);border-radius:12px;padding:34px 32px 28px;
  width:min(460px,100%);text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.qinner h3{font-family:Georgia,serif;font-size:26px;font-weight:400;margin-bottom:10px}
.qinner p{font-size:14px;color:var(--muted);line-height:1.6}
.qrow{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.qnote{margin-top:18px;font-size:12.5px}
.qnote a{color:var(--terr);text-decoration:underline;text-underline-offset:2px}
.qbox .x{position:absolute;top:8px;right:12px;background:none;border:0;color:var(--muted);
  font-size:28px;line-height:1;cursor:pointer}
.qbox .x:hover{color:var(--ink)}

/* ── mobile action bar ────────────────────────────────────────────
   THE FIX FOR: on phones the header's Order/Reserve buttons are hidden
   (.hact is display:none under 900px), so once a guest scrolled past
   the hero there was no way to order or call. This bar is pinned to the
   bottom of the screen on small viewports only. Desktop never sees it. */
.mobar{display:none}
@media(max-width:900px){
  .mobar{display:grid;grid-template-columns:1fr 1fr;gap:0;
    position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:var(--dark);border-top:1px solid rgba(201,150,44,.45);
    box-shadow:0 -4px 18px rgba(0,0,0,.35)}
  .mobar a{display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:56px;padding:10px 12px;font-size:13px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase}
  .mobar a.call{color:var(--gold-lt)}
  .mobar a.order{background:var(--gold);color:#141414}
  .mobar a+a{border-left:1px solid rgba(201,150,44,.35)}
  /* stop the bar covering the last of the footer */
  body{padding-bottom:56px}
  /* the burger menu also gets the two actions, for people who open it */
  .nav.open .navcta{display:flex}
}
.navcta{display:none}
@media(max-width:900px){
  .navcta{flex-direction:column;gap:8px;padding:14px 0 4px;border-top:1px solid rgba(255,255,255,.14);margin-top:8px}
  .navcta .btn{text-align:center}
}

/* ── halal stamp: standalone, not glued to a button ─────────────── */
.stamprow{display:flex;justify-content:flex-start;margin-top:26px}

/* Heading on the left, halal stamp parked top-right of the section.
   Keeps the stamp visible without adding dead space at the bottom. */
.headrow{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:36px}
.headrow .sechead{flex:1 1 auto}
.halalmark.big{width:118px;height:118px}
@media(max-width:760px){
  .headrow{gap:20px}
  .halalmark.big{width:84px;height:84px}
}
@media(max-width:460px){
  .headrow{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ── mobile: give the screen back ─────────────────────────────────
   Desktop keeps the location bar + header stuck together, as asked for
   earlier. On phones that pair ate a big slice of a small screen, so:
   the location bar scrolls away (it is read once), and only the header
   stays — at a reduced height. Call/Order are always reachable from the
   bottom action bar, so nothing is lost. */
@media(max-width:900px){
  /* The location bar is given a known 30px height and the whole sticky
     block is offset by exactly that, so the bar slides out of view on
     scroll while the header alone pins to the top. Sticky children can
     only stick inside their parent, which is why this is done on .topbar
     rather than on .hdr. */
  .locbar{height:30px;overflow:hidden}
  .locbar .wrap{padding:5px 24px;font-size:11px;gap:8px;white-space:nowrap}
  .locaddr{display:none}                 /* street address off on phones */
  .locbar .locswitch{margin-left:10px;padding-left:10px}
  .topbar{position:sticky;top:-30px;box-shadow:0 2px 12px rgba(0,0,0,.25)}
  .hdr .wrap{padding-top:7px;padding-bottom:7px}
  .hdr .brand img{height:42px}
  [id]{scroll-margin-top:66px}
}

/* ── "Book by phone" tile (phones only; desktop keeps the plain tel: link) ── */
.resv-num{display:block;text-align:center;font-family:Georgia,serif;font-size:31px;
  color:var(--terr);letter-spacing:.01em;padding:6px 0 4px;min-height:44px}
.resv-num:hover{color:#9E5030}
.resv-hrs{text-align:center;font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:20px}
.resv-hrs b{color:var(--ink)}
.btn.resv-go{display:block;text-align:center}

/* Desktop: phone CTAs become plain information, not dead buttons */
.qinfo{text-align:center;margin-bottom:4px}
.qinfo .resv-num{font-size:29px}
.qinfo .resv-hrs{margin-bottom:6px}
.btn.callplain{background:none;border-color:transparent;color:inherit;opacity:.9;
  text-transform:none;letter-spacing:0;font-size:14px;font-weight:400;cursor:default;padding:11px 4px}
.btn.callplain:hover{background:none;border-color:transparent}
.btn.callplain b{color:inherit;font-weight:700}
/* on cream sections give it the muted tone; on dark/terracotta it inherits white */
.cta .btn.callplain{color:var(--muted)}
.dark-sec .btn.callplain,.closing .btn.callplain,.phero .btn.callplain{color:#fff;opacity:.95}

/* ── Combos ─────────────────────────────────────────────── */
.combos{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.combo{background:#fff;border:1px solid var(--line);border-radius:8px;padding:26px 26px 22px;
  display:flex;flex-direction:column}
.ctop{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.ctop h3{font-family:Georgia,serif;font-size:23px;color:var(--ink);line-height:1.2}
.cprice{font-weight:700;color:var(--terr);font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cwhen{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--terr);
  font-weight:700;margin-bottom:14px}
.cwhat{list-style:none;margin:0}
.cwhat li{position:relative;padding:6px 0 6px 20px;font-size:15px;color:var(--ink)}
.cwhat li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;
  background:var(--gold);border-radius:50%}
.cwhat li[data-todo]{color:var(--muted)}
.cwhat li[data-todo]::before{background:var(--line)}
.todo{margin-top:14px;font-size:12.5px;color:var(--muted);font-style:italic;
  border-top:1px dashed var(--line);padding-top:12px}
.combonote{text-align:center;margin-top:26px;font-size:14.5px;color:var(--muted)}
.combonote a{color:var(--terr);font-weight:600;border-bottom:1px solid var(--terr)}
@media(max-width:760px){.combos{grid-template-columns:1fr}}

/* ── Location switcher pill (works on both sites; flip .on for Sugar Land) ── */
.locnow{font-weight:600}

/* ── Link back up to the Mahek brand page ────────────────────────
   Only exists in the parent-brand build (Option C). On the standalone
   site there is nothing above this page to go back to, so the markup
   for this simply isn't there and these rules go unused. */
.locnow .uplink{font-weight:800;color:#141414;border-bottom:1px solid rgba(20,20,20,.4)}
.locnow .uplink:hover{border-bottom-color:#141414}
.locnow .upsep{margin:0 9px;opacity:.5}
@media(max-width:620px){.locnow .upsep{margin:0 6px}}
.locpill{display:inline-flex;align-items:center;background:rgba(20,20,20,.10);
  border:1px solid rgba(20,20,20,.22);border-radius:99px;padding:2px;margin-left:14px;gap:2px}
.locpill span,.locpill a{display:inline-flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 13px;border-radius:99px;line-height:1;white-space:nowrap;min-height:26px}
.locpill .on{background:#141414;color:var(--gold-lt);cursor:default}
.locpill a{color:#2b2205;transition:.15s}
.locpill a:hover{background:rgba(255,255,255,.55);color:#141414}
@media(max-width:900px){
  .locpill{margin-left:8px;padding:1px}
  .locpill span,.locpill a{font-size:10px;padding:4px 9px;min-height:22px;letter-spacing:.04em}
}
@media(max-width:420px){ .locnow{display:none} }

/* ═══════════════════════════════════════════════════════════════════
   ROSENBERG — WARMER, MORE COLOUR
   Gold stays the identity, but the old palette leaned on gold + near-black
   for almost everything, which read flat. This adds a deep spice green as a
   third note and lets terracotta do more work, so sections separate by
   colour instead of by hairline rules.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --spice:#2E4B36; --spice-lt:#456B50;   /* new third accent */
  --cream:#FAF3E6;                        /* a touch warmer */
  --terr:#B5603A;
}
.dark-sec{background:linear-gradient(150deg,#161412 0%,#20291F 100%)}
.dark-sec .eyebrow{color:var(--gold-lt)}
.closing{background:linear-gradient(135deg,#B5603A 0%,#8E4527 100%)}
.phero{background:linear-gradient(150deg,#161412 0%,#20291F 100%)}
.hdr{background:#161412}

/* REMOVED: section:nth-of-type(even){background:#fff}
   It out-specified .lunchstrip (0,1,1 vs 0,1,0), so the combo strip rendered
   white-on-white and was invisible. Position-based colouring is fragile
   anyway — inserting any section reshuffles the whole page. Sections that
   need a different ground get an explicit class instead. */
.sechead .eyebrow{color:var(--terr)}
.foot h5{color:var(--gold)}
.spice-band{background:var(--spice);color:#EAF1EB}
.spice-band h2{color:#fff}
.spice-band .eyebrow{color:#A8C9B3}


/* ═══════════════════════════════════════════════════════════════════
   COMBOS — rebuilt
   The old version was two plain bordered boxes with a bullet list, which
   read as an afterthought. This is a proper offer block: a tinted band so
   it separates from the menu above it, a banner image, and cards where the
   price is the loudest thing on screen.
   No per-dish photography on purpose — a combo is curry + dal + rice +
   naan, and there is no honest single photo of that. A picture of butter
   chicken standing in for "goat curry combo" is the kind of small lie that
   ends in a complaint at the counter. The included-items chips do the job
   a photo would, and they are accurate.
   ═══════════════════════════════════════════════════════════════════ */
#combos{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cbanner{position:relative;height:210px;border-radius:12px;overflow:hidden;margin-bottom:38px}
.cbanner img{width:100%;height:100%;object-fit:cover;display:block}
.cbanner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,16,14,.80) 0%,rgba(20,16,14,.30) 60%,transparent 100%)}
.cbanner .cb-t{position:absolute;left:0;top:0;bottom:0;z-index:2;display:flex;
  flex-direction:column;justify-content:center;padding:0 42px;max-width:560px}
.cbanner .cb-t h2{color:#fff;font-size:clamp(26px,3.6vw,38px);line-height:1.1}
.cbanner .cb-t p{color:#EDE2D6;margin-top:8px;font-size:15.5px}
.cbanner .cb-t .eyebrow{color:var(--gold-lt)}
@media(max-width:700px){.cbanner{height:auto;min-height:180px}.cbanner .cb-t{padding:26px 22px;position:relative}
  .cbanner img{position:absolute;inset:0}}

.cgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cgrid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:900px;margin:0 auto}
.cmb{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:0;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
.cmb:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(30,20,10,.10)}
.cmb .cmb-top{padding:24px 26px 0;border-top:4px solid var(--gold)}
.cmb .cmb-tag{display:inline-block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:800;color:var(--gold);background:rgba(0,0,0,.04);
  padding:5px 11px;border-radius:99px;margin-bottom:12px}
.cmb h3{font-family:Georgia,serif;font-size:26px;color:var(--ink);line-height:1.15}
.cmb .cmb-sub{font-size:14.5px;color:var(--muted);margin-top:7px;line-height:1.55}
.cmb .cmb-inc{display:flex;flex-wrap:wrap;gap:6px;padding:18px 26px 0;list-style:none;margin:0}
.cmb .cmb-inc li{font-size:12px;color:var(--muted);border:1px solid var(--line);
  border-radius:99px;padding:5px 11px;background:var(--cream)}
.cmb .cmb-free{margin:14px 26px 0;font-size:13px;font-style:italic;color:var(--terr);
  display:flex;align-items:center;gap:7px}
.cmb .cmb-free::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--terr);flex:0 0 auto}
.cmb .cmb-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:20px 26px 24px}
.cmb .cmb-when{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--muted);line-height:1.4}
.cmb .cmb-price{font-family:Georgia,serif;font-size:34px;color:var(--ink);
  line-height:1;white-space:nowrap}
.cmb .cmb-price small{display:block;font-family:inherit;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px;
  font-weight:700}
.combonote{margin-top:30px;text-align:center;font-size:14.5px;color:var(--muted)}
.combonote a{color:var(--terr);font-weight:600;border-bottom:1px solid currentColor}
@media(max-width:900px){.cgrid3{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .cgrid2{grid-template-columns:1fr;max-width:440px}}

/* home-page teaser strip — the signpost that was missing */
.lunchstrip{padding:52px 0 56px}
.lsrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto}
.lsc{display:flex;flex-direction:column;align-items:center;text-align:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.26);
  border-radius:10px;padding:22px 18px;transition:.18s}
.lsc:hover{background:rgba(255,255,255,.19);transform:translateY(-2px)}
.lsc b{font-family:Georgia,serif;font-size:23px;color:#fff;font-weight:400}
.lsc span{font-size:12.5px;color:rgba(255,255,255,.82);margin-top:5px}
.lsc i{font-style:normal;font-family:Georgia,serif;font-size:26px;color:#fff;margin-top:12px}
@media(max-width:760px){.lsrow{grid-template-columns:1fr;max-width:340px}}
.lunchstrip{background:linear-gradient(135deg,#B5603A 0%,#8E4527 100%)}
.lunchstrip .eyebrow{color:#F6D9C9}

/* Contrast fix: white on the old terracotta was 4.47:1 — a hair under AA, and
   the body tint on it was only 3.58:1. Darkening the band to #9E4E2D takes
   white to 5.86:1 and the body copy to 4.69:1. Same colour, just deeper. */
.closing{background:linear-gradient(135deg,#9E4E2D 0%,#7E3D22 100%)}
.closing p{color:#F7EAE2}
.lunchstrip{background:linear-gradient(135deg,#9E4E2D 0%,#7E3D22 100%)}

/* ── Sticky chrome, trimmed ──────────────────────────────────────
   The location bar and the header were BOTH sticky: 128px of permanent
   furniture on a 787px-tall laptop viewport, i.e. one sixth of the screen
   gone before any content. The location bar is an orientation cue, not a
   control you need constantly — it now scrolls away and only the header
   (82px) stays. Anchor targets get scroll-margin to match. */
.topbar{position:static;box-shadow:none}
.hdr{position:sticky;top:0;z-index:60;box-shadow:0 2px 14px rgba(0,0,0,.18)}
section[id],[id^="c-"]{scroll-margin-top:96px}


/* Banner legibility over photography — see the Sugar Land note. */
.cbanner .cb-t h2,.cbanner .cb-t p{text-shadow:0 2px 10px rgba(0,0,0,.55)}
.cbanner .cb-t .eyebrow{text-shadow:0 1px 6px rgba(0,0,0,.6);letter-spacing:.16em}
.cbanner::after{background:linear-gradient(90deg,rgba(20,16,14,.86) 0%,rgba(20,16,14,.5) 55%,rgba(20,16,14,.12) 100%)}


/* ── SUGAR LAND — OPTION B PALETTE (owner-approved reference) ─────
   Sampled from /review/b/. Dark SURFACES go deep purple; the ACCENT
   STAYS GOLD. An earlier build made the accent itself rose, turning every
   button pink — that is what the owner rejected. Rose appears only in the
   closing gradient, exactly as in the reference. */
:root{
  --cream:#FAF5F3; --card:#FFFFFF; --ink:#2E2733; --muted:#655A69;
  --dark:#1A1533;  --dark2:#271E3D;
  --gold:#C9962C;  --gold-lt:#E0B25C;
  --terr:#A2456F;  --line:#E9DEE4;
}
.hdr{background:#1A1533}
.topbar .hdr{border-bottom:1px solid rgba(255,255,255,.08)}
.dark-sec{background:linear-gradient(150deg,#1A1533 0%,#271E3D 100%);color:#EFE9F2}
.phero{background:linear-gradient(150deg,#1A1533 0%,#271E3D 100%)}
.foot{background:#151027}
.closing{background:linear-gradient(135deg,#271E3D 0%,#4A2A48 55%,#A2456F 140%)}
.closing p{color:#EEDDE6}
.lunchstrip{background:linear-gradient(135deg,#271E3D 0%,#4A2A48 100%)}
.lunchstrip .eyebrow{color:var(--gold-lt)}
.locbar{background:var(--gold);color:#141414}
.foot h5,.foot .lnk{color:var(--gold-lt)}
.cmb .cmb-top{border-top-color:var(--gold)}
.cmb .cmb-tag{color:#8A6413;background:rgba(201,150,44,.16)}
.hdr .brand img{filter:brightness(1.75) saturate(.75) contrast(1.1)}


/* ── Phone tap targets ───────────────────────────────────────────
   Footer links, nav items and inline links were rendering 18–24px tall.
   That is fine with a cursor and fiddly with a thumb — the usual guidance
   is ~44px. Padding rather than font-size, so nothing reflows on desktop. */
@media(max-width:760px){
  .foot a,.foot .lnk{display:inline-block;padding:9px 0;line-height:1.35}
  .foot .grid > div{margin-bottom:6px}
  .nav a{padding-top:14px;padding-bottom:14px}
  .bnav nav a{padding:13px 12px}
  .locpill a,.locpill span{padding:8px 13px}
  .locnow .uplink{display:inline-block;padding:6px 0}
  .combonote a,.galnote a{display:inline-block;padding:8px 0}
  .place .quick a{padding:9px 14px}
  .mrail a,.crail a{padding:11px 15px}
  .legal{gap:10px;flex-direction:column;align-items:flex-start}
}


/* Hero eyebrow: .24em tracking is right on a wide screen and turns a short
   line into three on a phone. Tighten it below 520px. */
@media(max-width:520px){
  .hero .eyebrow,.phero .eyebrow{letter-spacing:.12em;font-size:10.5px;line-height:1.5}
  .hero h1{font-size:clamp(30px,9vw,42px)}
}

/* ══ READABILITY PASS — 28 Sep 2026 ═══════════════════════════════════
   Paresh: "the font is too small at multiple places". Measured every text
   element on 10 pages at 1280/1024/768/390px: a quarter of all text sat
   below 13px, including menu descriptions (12.5px), dish cards (12.5px),
   reviews (13.5px), nav (13.5px) and every button (12.5px).
   This block only raises sizes. Nothing is reduced; no colours or spacing
   change. Delete the block to revert. Identical in all three style.css
   copies (root, sugar-land, rosenberg).                                  */

/* reading text */
.mi small{font-size:14.5px}
.dish p{font-size:14.5px}
.spice p{font-size:14.5px}
.tcard blockquote{font-size:15.5px}
.tcard .who b{font-size:14.5px}
.tcard .who span{font-size:13px}
.hspecial .ds{font-size:14.5px}
.swdesc{font-size:14px}
.exp p,.offer p{font-size:14.5px}
.loc-item .ad{font-size:14px}
.callbox span{font-size:14.5px}
.foot p{font-size:15px}
.foot .lnk{font-size:14.5px}
.rev p,.rev .st{font-size:15px}
.rev .who{font-size:13.5px}
.modal-sub,.qinner p{font-size:15px}
.combonote,.cmb .cmb-sub{font-size:15px}
.cmb .cmb-inc li{font-size:13.5px}
.cmb .cmb-free,.resv-hrs{font-size:14px}
.lbox .cap{font-size:14.5px}
.cbox p{font-size:15px}
.place .known{font-size:15.5px}
.place .where,.kpick .k .where{font-size:14.5px}
.place .hrs{font-size:14.5px}
.pickernote{font-size:15px}
.bfact span{font-size:14px}

/* notes and meta */
.legal{font-size:13.5px}
.formnote,.booknote,.qnote,.revnote,.todo{font-size:14px}
.galnote{font-size:14px}
.cgal figcaption,.gtile figcaption{font-size:13.5px}
.halal{font-size:13.5px}
.lsc span,.sbox .scount,.sbox .sph span{font-size:13.5px}
.menunote{font-size:14px}

/* uppercase letter-spaced labels */
.eyebrow{font-size:12.5px}
.strip b,.vrow b,.callbox b{font-size:12.5px}
.foot h5{font-size:13px}
.hspecial .cap,.spice small{font-size:12.5px}
.loc-item .tag,.cmb .cmb-tag,.halal b,.exp .tagline,.offer .tagline,.sbox .skick,.place .kind{font-size:12px}
.cmb .cmb-when,.cmb .cmb-price small{font-size:12.5px}
.steps div,.steps div i{font-size:13px}
.ph,.ph small{font-size:13px}
.cwhen,.oo span{font-size:13px}
label{font-size:13px}
.news button{font-size:12.5px}

/* controls */
.nav a,.bnav nav a{font-size:15px}
.btn{font-size:13.5px}
.btn.callplain{font-size:15px}
.tab{font-size:13.5px}
.loc-item .pick,.place .enter,.kpick .k .go{font-size:13.5px}
.place .quick a,.bnav .pickbtn{font-size:13px}
.pills span{font-size:13.5px}
.locbar .wrap{font-size:13.5px}
.locbar .pin{font-size:14.5px}
.locpill span,.locpill a{font-size:12.5px}
input,select,textarea{font-size:16px}   /* 16px also stops iOS zooming into fields */
.news input{font-size:15px}

/* the new gold logo has fine lettering — give it a little more room */
@media(min-width:901px){ .hdr .brand img{height:68px} .bnav .bmark img{height:64px} }
.foot .brand img{height:120px}
.loc-top img{height:84px}

/* keep the tight mobile bars from wrapping */
@media(max-width:900px){
  .locbar .wrap{font-size:12.5px}
  .locpill span,.locpill a{font-size:11.5px}
  .mobar a{font-size:14px}
  .nav a{font-size:16px}
}
@media(max-width:780px){ .bnav nav a{font-size:14px} }
@media(max-width:640px){ .swdesc{font-size:13px} .swname{font-size:13.5px} }
@media(max-width:430px){ .bnav nav a{font-size:13.5px} .bnav .pickbtn{font-size:12px} }

/* ── LUNCH THALI photo row — 28 Sep 2026 ── */
.thali-row{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;max-width:940px;margin:0 auto;align-items:stretch}
.thali-pic{border-radius:8px;overflow:hidden;background:#101010;min-height:260px}
.thali-pic img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.thali-row{grid-template-columns:1fr;gap:18px}.thali-pic{min-height:0;aspect-ratio:16/9}}

/* ── 28 Sep review: Lunch Thali card no longer stretches to the photo height
   (left a large empty white gap) and no longer repeats the section title ── */
.thali-row{align-items:center}
.thali-row .cmb .cmb-top{padding:26px 28px 0}
.thali-row .cmb .cmb-sub{font-size:18px;color:var(--ink);margin-top:0;line-height:1.5}
.thali-row .cmb .cmb-foot{margin-top:14px}

/* ── 28 Sep review: pages without the phone call/order bar kept its 56px
   bottom padding, leaving a strip under the footer on phones ── */
@media(max-width:900px){ body:not(:has(.mobar)){padding-bottom:0} }
/* ── 28 Sep review: captions on the three "kitchen" photo cards sat on busy
   food with a light scrim; darker lower half so the text reads ── */
.exp::after{background:linear-gradient(180deg,rgba(10,10,10,0) 20%,rgba(10,10,10,.62) 55%,rgba(10,10,10,.94) 100%)}

/* ── 28 Sep (Paresh): Lunch Thali — dish line and price on the photo ── */
.thali-hero{position:relative;max-width:1000px;margin:0 auto;border-radius:10px;overflow:hidden;background:#0E0C14}
.thali-hero img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.thali-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(12,10,18,.82) 0%,rgba(12,10,18,.55) 30%,rgba(12,10,18,0) 55%)}
.thali-cap{position:absolute;left:48px;top:50%;transform:translateY(-50%);z-index:2;max-width:34%}
.thali-dishes{font-family:Georgia,serif;font-size:25px;line-height:1.35;color:#fff}
.thali-price{font-family:Georgia,serif;font-size:44px;line-height:1;color:var(--gold-lt);margin-top:16px}
@media(max-width:760px){
  .thali-hero img{aspect-ratio:4/3;object-position:72% center}
  .thali-hero::after{background:linear-gradient(0deg,rgba(12,10,18,.9) 0%,rgba(12,10,18,.55) 38%,rgba(12,10,18,0) 62%)}
  .thali-cap{left:20px;right:20px;top:auto;bottom:18px;transform:none;max-width:none}
  .thali-dishes{font-size:18px}
  .thali-price{font-size:30px;margin-top:8px}
}

/* ── 28 Sep (Paresh): closing band above the footer — the rose/pink end of the
   gradient didn't fit the gold-and-dark theme. Now the same deep purple as the
   hero and dark sections, with a gold hairline so it doesn't merge into the footer. ── */
.closing{background:linear-gradient(150deg,#1A1533 0%,#271E3D 100%);border-bottom:1px solid rgba(201,150,44,.35)}
.closing p{color:#E6E0EE}

.thali-cap{max-width:32%}
@media(min-width:761px) and (max-width:1100px){.thali-cap{left:32px}.thali-dishes{font-size:21px}.thali-price{font-size:36px}}
@media(max-width:760px){.thali-cap{max-width:none}}