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

:root{
  --cream:#F7F1E6; --card:#FFFFFF; --ink:#3A352E; --muted:#7A7062;
  --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:4px 0;border-bottom:1.5px solid transparent}
.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}

/* 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{font-family:"Inter",sans-serif;font-size:15px;font-weight:600}
.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:var(--sage);color:#fff;text-align:center;padding:64px 0}
.closing h2{color:#fff;font-size:clamp(26px,3.4vw,34px);margin-bottom:8px}
.closing p{color:#E7EFEA;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:1.15fr .85fr;gap:40px;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(255,255,255,.055);border:1px solid rgba(201,150,44,.42);
  border-radius:11px;padding:20px;width:100%;max-width:370px;margin-left:auto;box-sizing:border-box}
.hspecial .cap{font-size:10.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:196px;margin-bottom:14px;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:21px;color:#fff;display:flex;justify-content:space-between;
  gap:10px;align-items:baseline;height:28px;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:17px;flex:0 0 auto}
.hspecial .ds{font-size:12.5px;color:#D9CFBE;margin-top:4px;line-height:1.5;height:38px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2}
.hspecial .dots{display:flex;gap:6px;margin-top:15px}
.hspecial .dot{width:8px;height:8px;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 0 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}
}

/* ── mithai (sweets) ──────────────────────────────────────────────
   Names only, no prices — the counter changes daily. To add a sweet,
   add one <li> to the list in menu.html. Nothing else to change. */
.mithai{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.mithai ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:0 30px;border-top:1px solid var(--line)}
.mithai li{padding:11px 2px;border-bottom:1px solid var(--line);font-size:15px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.mithai li small{font-size:11.5px;color:var(--muted);font-style:italic;text-align:right}
.mithaipix{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mithaipix img{width:100%;height:220px;object-fit:cover;border-radius:6px}
.mithaipix img:first-child{grid-column:1/-1;height:230px}
@media(max-width:900px){
  .mithai{grid-template-columns:1fr;gap:30px}
  .mithai ul{grid-template-columns:1fr}
  .mithaipix img{height:170px}
}