/* 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}
.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} }

/* ═══════════════════════════════════════════════════════════════
   BRAND-LEVEL PAGE  (concept 3 — endorsed brand architecture)
   Mahek is the parent. Each location is an endorsed sub-brand with
   its own colour, its own menu and its own page. This page carries
   only what is TRUE OF BOTH: the family, the story, catering.
   Nothing here should ever need saying twice.
   ═══════════════════════════════════════════════════════════════ */
.bhero{background:linear-gradient(160deg,#141024 0%,#1F1836 45%,#3A2340 100%);
  color:#fff;text-align:center;padding:96px 0 88px}
.bhero .logo{height:104px;margin:0 auto 26px}
.bhero h1{font-size:clamp(34px,4.6vw,54px);margin-bottom:16px}
.bhero p{color:#D9CFDD;max-width:600px;margin:0 auto;font-size:17px}
.bhero .eyebrow{color:var(--gold-lt)}

/* the two-restaurant chooser */
.picker{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:1000px;margin:0 auto}
.place{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:16px;
  overflow:hidden;border:1px solid var(--line);transition:.2s;text-align:left}
.place:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(30,20,35,.16)}
.place .shot{height:212px;width:100%;object-fit:cover}
.place .body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.place .kind{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;
  padding:5px 11px;border-radius:99px;align-self:flex-start;margin-bottom:12px}
.place h3{font-family:Georgia,serif;font-size:26px;line-height:1.15;color:var(--ink)}
.place .where{font-size:14px;color:var(--muted);margin:8px 0 2px}
.place .hrs{font-size:13px;color:var(--muted)}
.place .known{margin:16px 0 20px;font-size:14.5px;color:var(--ink);line-height:1.6;flex:1}
.place .quick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.place .quick a{font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);
  border-radius:99px;padding:6px 12px;transition:.15s}
.place .quick a:hover{border-color:currentColor}
.place .enter{display:block;text-align:center;padding:13px;border-radius:99px;
  font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff}

/* Rosenberg = gold/café · Sugar Land = plum/restaurant */
.place.rb{border-top:5px solid var(--gold)}
.place.rb .kind{background:rgba(201,150,44,.16);color:#8A6413}
.place.rb .enter{background:var(--gold);color:#141414}
.place.rb .enter:hover{background:var(--gold-lt)}
.place.rb .quick a:hover{color:#8A6413}
.place.sl{border-top:5px solid #A2456F}
.place.sl .kind{background:rgba(162,69,111,.14);color:#8A3A5E}
.place.sl .enter{background:#A2456F}
.place.sl .enter:hover{background:#8A3A5E}
.place.sl .quick a:hover{color:#8A3A5E}

.pickernote{text-align:center;margin-top:28px;font-size:14px;color:var(--muted)}
@media(max-width:800px){.picker{grid-template-columns:1fr}.bhero{padding:64px 0 56px}}

/* shared-story band */
.bstory{background:var(--cream)}
.bstory .split{gap:56px}
.bstory .lead{font-size:18px;line-height:1.7;color:var(--ink)}
.bfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:820px;margin:34px auto 0}
.bfact{text-align:center;padding:22px 16px;background:#fff;border:1px solid var(--line);border-radius:12px}
.bfact b{display:block;font-family:Georgia,serif;font-size:30px;color:var(--terr);line-height:1}
.bfact span{display:block;margin-top:7px;font-size:13px;color:var(--muted)}
@media(max-width:700px){.bfacts{grid-template-columns:1fr}}
/* The card is a div, not a link — nested <a> is invalid HTML and the parser
   silently splits the card apart. A stretched overlay link makes the whole
   card clickable while the inner links stay real links. */
.place{isolation:isolate}
.cardlink{position:absolute;inset:0;z-index:1;border-radius:16px}
.place .body,.place .shot{position:relative}
.place .quick,.place .enter{position:relative;z-index:2}

/* ── Brand-level navigation ──────────────────────────────────────
   The brand pages (home, story, catering) are NOT a location site,
   so they deliberately don't get the location header with its Order
   and Reserve buttons — there is no single kitchen to order from up
   here. This is a quieter bar: identity on the left, the two shared
   pages in the middle, and the chooser on the right. */
.bnav{background:#141024;border-bottom:1px solid rgba(255,255,255,.09)}
.bnav .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:13px;padding-bottom:13px}
.bnav .bmark{display:flex;align-items:center;gap:11px}
.bnav .bmark img{height:42px;width:auto}
.bnav .bmark span{font-family:Georgia,serif;font-size:19px;color:#fff;letter-spacing:.02em}
.bnav nav{display:flex;align-items:center;gap:26px}
.bnav nav a{font-size:13.5px;color:#D9CFDD;letter-spacing:.02em;padding:5px 0;
  border-bottom:1px solid transparent;transition:.15s}
.bnav nav a:hover{color:#fff;border-bottom-color:var(--gold)}
.bnav nav a.on{color:var(--gold-lt);border-bottom-color:var(--gold-lt)}
.bnav .pickbtn{background:var(--gold);color:#141414;font-size:12px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:10px 17px;border-radius:99px;
  white-space:nowrap;transition:.15s}
.bnav .pickbtn:hover{background:var(--gold-lt)}
@media(max-width:780px){
  .bnav .wrap{flex-wrap:wrap;justify-content:center;text-align:center}
  .bnav nav{order:3;width:100%;justify-content:center;gap:19px;
    border-top:1px solid rgba(255,255,255,.09);padding-top:11px}
  .bnav .bmark img{height:36px}
}

/* On the brand pages the hero sits directly under the dark nav, so it
   loses its top padding — the two dark blocks read as one. */
.bnav + .bhero{padding-top:66px}

/* ── Brand sub-pages ─────────────────────────────────────────────
   Narrower hero for story/catering; they are reading pages, not the
   front door, so they don't need the full 96px block. */
.bsub{background:linear-gradient(160deg,#141024 0%,#241B3C 60%,#3A2340 100%);
  color:#fff;text-align:center;padding:62px 0 58px}
.bsub h1{font-size:clamp(30px,4vw,44px);margin-bottom:13px}
.bsub p{color:#D9CFDD;max-width:610px;margin:0 auto;font-size:16.5px}
.bsub .eyebrow{color:var(--gold-lt)}

/* "which kitchen do you want?" panel, reused on both sub-pages so the
   visitor is never more than one click from a real location site. */
.kpick{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:860px;margin:0 auto}
.kpick .k{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 28px}
.kpick .k.rb{border-top:4px solid var(--gold)}
.kpick .k.sl{border-top:4px solid #A2456F}
.kpick .k h3{font-family:Georgia,serif;font-size:22px;color:var(--ink);margin-bottom:5px}
.kpick .k .where{font-size:13.5px;color:var(--muted);line-height:1.6}
.kpick .k .tel{display:block;margin:13px 0 17px;font-family:Georgia,serif;
  font-size:24px;color:var(--terr)}
.kpick .k.sl .tel{color:#A2456F}
.kpick .k .go{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;padding:11px 19px;border-radius:99px;color:#141414;background:var(--gold)}
.kpick .k.sl .go{background:#A2456F;color:#fff}
.kpick .k .go:hover{opacity:.88}
@media(max-width:760px){.kpick{grid-template-columns:1fr}}

/* Catering: what both kitchens do */
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.cbox{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.cbox img{width:100%;height:186px;object-fit:cover;display:block}
.cbox .t{padding:20px 22px 24px}
.cbox h4{font-family:Georgia,serif;font-size:20px;color:var(--ink);margin-bottom:7px}
.cbox p{font-size:14.5px;color:var(--muted);line-height:1.62}
@media(max-width:820px){.cgrid{grid-template-columns:1fr}}

/* Story page: the timeline spine */
.tline{max-width:760px;margin:0 auto;position:relative;padding-left:34px}
.tline:before{content:"";position:absolute;left:7px;top:9px;bottom:9px;width:2px;
  background:linear-gradient(180deg,var(--gold) 0%,var(--terr) 60%,transparent 100%)}
.tstep{position:relative;padding-bottom:38px}
.tstep:last-child{padding-bottom:0}
.tstep:before{content:"";position:absolute;left:-33px;top:7px;width:16px;height:16px;
  border-radius:50%;background:var(--cream);border:3px solid var(--gold)}
.tstep h3{font-family:Georgia,serif;font-size:23px;color:var(--ink);margin-bottom:9px}
.tstep p{color:var(--muted);line-height:1.72}


/* ── Gallery (brand level) ───────────────────────────────────────
   These rules existed only in the Sugar Land stylesheet, because that is
   where the gallery was first built. When the page moved up to brand level
   the markup came with it and the CSS did not — so the page rendered as a
   column of captions with no grid and no image sizing. Adding them here. */
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gtile{margin:0;position:relative;overflow:hidden;border-radius:8px;background:var(--cream)}
.gtile img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;
  transition:transform .35s ease}
.gtile:hover img{transform:scale(1.045)}
.gtile figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;
  font-size:12.5px;color:#fff;opacity:0;transition:opacity .25s;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}
.gtile:hover figcaption{opacity:1}
.galnote{text-align:center;margin-top:20px;font-size:13.5px;color:var(--muted)}
@media(max-width:820px){.ggrid{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(max-width:520px){.ggrid{grid-template-columns:1fr}.gtile figcaption{opacity:1}}

.glight{position:fixed;inset:0;z-index:200;display:none;align-items:center;
  justify-content:center;background:rgba(12,8,14,.93);padding:34px}
.glight.on{display:flex}
.glight img{max-width:92vw;max-height:88vh;border-radius:6px;
  box-shadow:0 24px 70px rgba(0,0,0,.55)}
.glight-x{position:absolute;top:18px;right:24px;background:none;border:0;color:#fff;
  font-size:38px;line-height:1;cursor:pointer;opacity:.75}
.glight-x:hover{opacity:1}


/* ── SL CARD REVERTED TO GOLD ────────────────────────────────────
   The Sugar Land card was plum so the card colour predicted the site colour.
   The owner rejected plum on the site, so the card follows — a card that
   promises a colour you never see is worse than two matching cards.
   The two kitchens are now told apart by label, photograph and address. */
.place.sl{border-top-color:var(--gold)}
.place.sl .kind{background:rgba(201,150,44,.16);color:#8A6413}
.place.sl .enter{background:var(--gold);color:#141414}
.place.sl .enter:hover{background:var(--gold-lt)}
.place.sl .quick a:hover{color:#8A6413}
.kpick .k.sl{border-top-color:var(--gold)}
.kpick .k.sl .tel{color:var(--terr)}
.kpick .k.sl .go{background:var(--gold);color:#141414}


/* ── BRAND FOOTER + WORDMARK ──────────────────────────────────────
   1. FOOTER. It was near-black while the header and hero are deep
      indigo, so the page ended on a colour it never used. Matching it to
      the nav (#141024) closes the page with the same note it opens on.
   2. WORDMARK. "Mahek" beside the logo was set at body weight and default
      tracking — it read as a word someone typed, not as part of a mark.
      Wide letterspacing, optical size bump and a hairline gold rule under
      it give it the deliberateness a logotype needs. The logo image and
      the word now read as one lockup rather than two things side by side. */
.foot{background:#141024;border-top:1px solid rgba(255,255,255,.07)}
.foot .legal{border-top-color:rgba(255,255,255,.09)}

.bnav .bmark{gap:14px}
.bnav .bmark span{
  font-family:Georgia,"Times New Roman",serif;
  font-size:16.5px;
  font-weight:400;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:#F3ECDF;
  line-height:1;
  padding-bottom:5px;
  border-bottom:1px solid rgba(201,150,44,.55);
  /* the last letter's tracking pushes the optical centre right; pull it back
     so the underline sits flush with the word rather than overhanging */
  padding-right:0;
  margin-right:-.30em;
}
.bnav .bmark:hover span{border-bottom-color:var(--gold)}
@media(max-width:780px){
  .bnav .bmark span{font-size:14.5px;letter-spacing:.24em;margin-right:-.24em}
}


/* ── WORDMARK REMOVED ─────────────────────────────────────────────
   The logo lockup already contains the word "Mahek", so setting it again
   in HTML beside the image was saying the name twice — and the second one
   was plain text, which is why it read as typed rather than designed.
   The mark now carries the identity alone and gets a little more height
   to hold the bar on its own. */
.bnav .bmark span{display:none}
.bnav .bmark img{height:54px}
@media(max-width:780px){.bnav .bmark img{height:44px}}


/* ── 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}
}


/* ── PHONE NAV FIT ───────────────────────────────────────────────
   At 390px the five brand nav items were squeezed hard enough that
   "Our story" broke across two lines mid-item, which reads as a glitch
   rather than a wrap. Keeping each label on one line and tightening the
   gaps fits all five without shrinking them into illegibility. */
@media(max-width:780px){
  .bnav nav{gap:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    justify-content:flex-start;padding-left:2px;padding-right:2px}
  .bnav nav::-webkit-scrollbar{display:none}
  .bnav nav a{white-space:nowrap;padding:13px 11px;font-size:13px}
}
@media(max-width:430px){
  .bnav nav a{padding:13px 9px;font-size:12.5px;letter-spacing:0}
  .bnav .pickbtn{font-size:11px;padding:9px 13px}
  .bnav .bmark img{height:40px}
}

/* ══ 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} }

/* ── 28 Sep review: Rosenberg card button sat on the address line ── */
.kpick .k.rb .go{margin-top:17px}

/* ── 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} }