/* =====================================================================
   UncleSam Kopi — The Local Table · production stylesheet
   Green-and-gold Malaysian heritage kopitiam system.
   Hero direction A (Heritage Green Hall) + editorial B body.
   ===================================================================== */

/* ---- Brand tokens ---- */
:root{
  --gn:#023B1E;        /* heritage green */
  --gd:#C8912A;        /* antique gold */
  --iv:#FBF5ED;        /* ivory canvas */
  --bl:#FBE2CD;        /* blush canvas */
  --gdeep:#001F08;     /* deepest green */
  --g500:#1A5235;      /* lifted green */
  --gold700:#9A6E1E;   /* gold on light text */
  --gold200:#E8CE96;   /* soft gold */
  --gold50:#F6ECD6;    /* faint gold tint */
  --goldbright:#E0A53A;
  --parch:#F2E9DA;     /* watermark fill */
  --ivlight:#FEFCF7;   /* card white */
  --ink:#20271F;       /* near-black green-tinted */
  --ch:#3A3A34;        /* body on light */
  --st:#8C8478;        /* meta */
  --sand:#E4D8C4;      /* hairline on ivory */

  --ser:"Cormorant Garamond", Georgia, serif;
  --sans:"Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --maxw:1200px;
  --shadow-rest:0 2px 10px rgba(2,31,8,.06);
  --shadow-raise:0 6px 22px rgba(2,31,8,.13);

  --r-btn:4px; --r-card:6px; --r-panel:10px; --r-stamp:2px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--iv);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--gd); color:var(--gn);}

.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px;}

/* ---- Type primitives ---- */
.eyebrow{font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.30em; text-transform:uppercase; color:var(--gold700);}
.on-dark .eyebrow, .eyebrow.on-dark{color:var(--gd);}
.tagline{font-family:var(--ser); font-weight:600; letter-spacing:.40em; text-transform:uppercase; color:var(--gn); font-size:clamp(15px,1.4vw,18px);}
.tagline.on-dark{color:var(--gd);}
.serif{font-family:var(--ser);}
.tri{font-family:var(--ser); font-style:italic; color:var(--gold700); font-size:clamp(16px,1.6vw,19px); line-height:1.5;}
.on-dark .tri{color:var(--gold200);}

h1,h2,h3{font-family:var(--ser); font-weight:600; color:var(--gn); line-height:1.05; letter-spacing:.004em;}
h2 em, h1 em, h3 em{font-style:italic; font-weight:500; color:var(--gold700);}
.on-dark h1, .on-dark h2, .on-dark h3{color:var(--iv);}
.on-dark h1 em, .on-dark h2 em, .on-dark h3 em{color:var(--gd);}

/* ---- Diamond divider ---- */
.divider{display:flex; align-items:center; gap:14px; color:var(--gd); width:100%;}
.divider::before,.divider::after{content:""; height:1.5px; background:currentColor; flex:1; max-width:130px;}
.divider i{width:10px; height:10px; background:currentColor; transform:rotate(45deg); flex:0 0 auto;}
.divider.center{justify-content:center;}

/* ---- Buttons ---- */
.btn{
  font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; padding:14px 30px; border-radius:var(--r-btn); border:0;
  cursor:pointer; display:inline-flex; align-items:center; gap:9px;
  transition:background .18s ease, color .18s ease, transform .05s ease, box-shadow .18s ease;
}
.btn:active{transform:scale(.985);}
.btn--gold{background:var(--gd); color:var(--gn);}
.btn--gold:hover{background:var(--gold700); color:var(--iv);}
.btn--green{background:var(--gn); color:var(--iv);}
.btn--green:hover{background:var(--gdeep);}
.btn--ghost-gold{background:transparent; color:var(--gd); border:1.5px solid var(--gd); padding:12.5px 30px;}
.btn--ghost-gold:hover{background:var(--gd); color:var(--gn);}
.btn--ghost-green{background:transparent; color:var(--gn); border:1.5px solid var(--gn); padding:12.5px 30px;}
.btn--ghost-green:hover{background:var(--gn); color:var(--iv);}
.btn--text{background:transparent; padding:6px 0; color:var(--gold700); letter-spacing:.16em;}
.btn--text:hover{color:var(--gn);}
.btn--text::after{content:"→"; transition:transform .18s ease;}
.btn--text:hover::after{transform:translateX(4px);}

/* placeholder pill — clearly marks owner-edit fields */
.ph{
  background:var(--gold50); color:var(--gold700); border:1px dashed var(--gd);
  padding:1px 8px; border-radius:3px; font-family:var(--sans); font-size:.82em; font-weight:700;
  letter-spacing:.02em; white-space:nowrap;
}

/* =====================================================================
   HEADER / NAV — green masthead, sticky
   ===================================================================== */
.site-header{position:sticky; top:0; z-index:60; background:var(--gn); border-bottom:1px solid rgba(200,145,42,.30);}
.nav{display:flex; align-items:center; gap:28px; height:74px;}
.brand{display:flex; align-items:center; gap:13px;}
.brand img{width:42px; height:auto;}
.brand b{font-family:var(--ser); font-weight:600; font-size:21px; letter-spacing:.10em; color:var(--iv);}
.nav-links{display:flex; align-items:center; gap:26px; list-style:none; margin-left:10px;}
.nav-links a{font-size:13.5px; font-weight:600; letter-spacing:.02em; color:rgba(251,245,237,.82); padding:6px 0; border-bottom:2px solid transparent; transition:color .18s ease, border-color .18s ease;}
.nav-links a:hover{color:var(--gd);}
.nav-links a.active{color:var(--gd); border-bottom-color:var(--gd);}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:18px;}
.nav-pill{font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; color:var(--gd); border:1px solid rgba(200,145,42,.5); padding:9px 16px; border-radius:999px; transition:background .18s ease, color .18s ease;}
.nav-pill:hover{background:var(--gd); color:var(--gn);}
.nav-toggle{display:none; background:none; border:0; color:var(--iv); cursor:pointer; padding:6px; line-height:0;}
.nav-toggle svg{width:26px; height:26px;}

/* =====================================================================
   HERO — Direction A · Heritage Green Hall
   ===================================================================== */
.hero{position:relative; background:var(--gn); padding:clamp(60px,7vw,86px) 0 clamp(70px,8vw,96px); overflow:hidden;}
.hero .frame{position:absolute; inset:22px; border:1.5px solid rgba(200,145,42,.38); outline:1px solid rgba(200,145,42,.38); outline-offset:6px; pointer-events:none;}
.hero .quat{position:absolute; width:46px; height:46px; opacity:.9;}
.hero .quat.tl{top:40px; left:40px;} .hero .quat.tr{top:40px; right:40px;}
.hero .quat.bl{bottom:40px; left:40px;} .hero .quat.br{bottom:40px; right:40px;}
.hero .ghost{position:absolute; right:4%; bottom:-12%; font-family:var(--ser); font-weight:600; font-size:clamp(180px,30vw,320px); line-height:1; color:var(--gd); opacity:.07; user-select:none; pointer-events:none;}
.hero .inner{position:relative; max-width:900px; margin:0 auto; text-align:center; padding:0 24px;}
.hero .medal{width:clamp(82px,9vw,108px); margin:0 auto 16px;}
.hero h1{font-size:clamp(44px,7.2vw,86px); line-height:1.03; color:var(--iv); margin-top:14px;}
.hero h1 em{color:var(--gd);}
.hero .sub{font-size:clamp(15px,1.5vw,17.5px); line-height:1.7; color:rgba(251,245,237,.82); max-width:55ch; margin:22px auto 0;}
.hero .divider{max-width:380px; margin:26px auto 14px;}
.hero .tagline{margin-top:0;}
.hero .btnrow{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px;}

/* known-for peek strip under hero */
.peek{background:var(--iv); border-top:6px solid var(--gd);}
.peek .row{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(20px,4vw,44px); padding:26px 32px;}
.peek .item{display:flex; align-items:center; gap:11px; color:var(--gn);}
.peek .item img{width:24px; height:24px;}
.peek .item span{font-family:var(--sans); font-weight:600; font-size:12px; letter-spacing:.16em; text-transform:uppercase;}

/* =====================================================================
   SECTION scaffolding
   ===================================================================== */
section{padding:clamp(56px,8vw,96px) 0;}
.sec-alt{background:var(--bl);}
.sec-tint{background:var(--gold50);}
.sec-head{text-align:center; max-width:60ch; margin:0 auto clamp(36px,5vw,56px);}
.sec-head .eyebrow{margin-bottom:12px;}
.sec-head h2{font-size:clamp(34px,4.6vw,56px); margin-bottom:0;}
.sec-head p{color:var(--ch); margin-top:16px; font-size:16.5px;}
.sec-head .divider{margin:18px auto 0; max-width:320px;}

/* =====================================================================
   EDITORIAL SPLIT — Direction B
   ===================================================================== */
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,64px); align-items:center; position:relative;}
.split.rev{grid-template-columns:.95fr 1.05fr;}
.split .ghost-num{position:absolute; left:-10px; top:-64px; font-family:var(--ser); font-weight:600; font-size:clamp(140px,18vw,280px); line-height:1; color:var(--gd); opacity:.07; user-select:none; pointer-events:none;}
.split .txt{position:relative;}
.intro-ghost{position:absolute; left:-10px; top:-72px; font-family:var(--ser); font-weight:600; font-size:clamp(140px,18vw,280px); line-height:1; color:var(--gd); opacity:.07; user-select:none; pointer-events:none;}
/* where should we open next — dark panel */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.next-outlet{position:relative; overflow:hidden; margin-top:clamp(48px,6vw,72px); background:var(--gdeep); border:1px solid color-mix(in srgb, var(--gd) 40%, transparent); border-radius:var(--r-panel); padding:clamp(30px,4vw,46px); display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(28px,4vw,52px); align-items:center;}
.next-outlet .no-mark{position:absolute; right:-40px; bottom:-52px; width:230px; opacity:.09; pointer-events:none;}
.next-outlet .no-copy h3{font-family:var(--ser); font-weight:600; font-size:clamp(28px,3.2vw,42px); line-height:1.12; color:var(--iv); margin:10px 0 12px;}
.next-outlet .no-copy h3 em{font-style:italic; color:var(--gd);}
.next-outlet .no-copy p{color:rgba(251,245,237,.72); font-size:15.5px; line-height:1.75; max-width:42ch;}
.next-outlet .chips{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:16px;}
.next-outlet .chips button{font-family:var(--sans); font-size:13px; font-weight:600; color:rgba(251,245,237,.85); background:transparent; border:1px solid color-mix(in srgb, var(--gd) 45%, transparent); border-radius:999px; padding:8px 16px; cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease;}
.next-outlet .chips button:hover{border-color:var(--gd); color:var(--gd);}
.next-outlet .chips button[aria-pressed="true"]{background:var(--gd); border-color:var(--gd); color:var(--gn);}
.next-outlet .no-row{display:flex; gap:12px; flex-wrap:wrap;}
.next-outlet input{flex:1 1 260px; min-width:0; font-family:var(--sans); font-size:15px; color:var(--iv); background:rgba(251,245,237,.06); border:1px solid color-mix(in srgb, var(--gd) 35%, transparent); border-radius:var(--r-btn); padding:13px 16px;}
.next-outlet input::placeholder{color:rgba(251,245,237,.45);}
.next-outlet input:focus{outline:2px solid var(--gd); outline-offset:2px;}
.next-outlet .no-note{margin-top:12px; font-size:12.5px; color:rgba(251,245,237,.5);}
@media(max-width:860px){.next-outlet{grid-template-columns:1fr;}}
.split .txt h2{font-size:clamp(32px,4.4vw,62px); margin:16px 0 0;}
.split .txt p{margin-top:20px; color:var(--ch); max-width:48ch; font-size:16.5px;}
.split .txt .tri{margin-top:16px;}
.split .txt .btnrow{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px;}

/* framed photo placeholder */
.photo-frame{position:relative; border:1.5px solid var(--gd); outline:1px solid var(--gd); outline-offset:6px;}
.photo-frame.ratio-45{aspect-ratio:4/5;}
.photo-frame.ratio-43{aspect-ratio:4/3;}
.photo-frame.ratio-32{aspect-ratio:3/2;}
.photo-frame .frame-cap{position:absolute; left:0; right:0; bottom:0; background:linear-gradient(to top, rgba(2,31,8,.82), rgba(2,31,8,0)); color:rgba(251,245,237,.92); font-family:var(--sans); font-size:12.5px; letter-spacing:.02em; padding:34px 16px 12px; text-align:center;}
.photo-frame .img-ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px;
  background:repeating-linear-gradient(45deg, var(--gold50), var(--gold50) 13px, #efe2c4 13px, #efe2c4 26px);
}
.photo-frame .img-ph span{font-family:var(--ser); font-style:italic; color:var(--gold700); font-size:17px; background:rgba(251,245,237,.92); padding:7px 15px; border:1px solid var(--gd);}
.photo-frame .corner-medal{position:absolute; width:58px; height:58px; top:-29px; right:-29px; background:var(--iv); padding:6px; border-radius:50%; box-shadow:var(--shadow-raise);}
.vbadge{position:absolute; left:-18px; bottom:34px; background:var(--gn); color:var(--gd); font-family:var(--ser); font-weight:600; writing-mode:vertical-rl; letter-spacing:.30em; text-transform:uppercase; font-size:14px; padding:18px 10px;}

/* =====================================================================
   FEATURE CARDS — known-for / values
   ===================================================================== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.card{background:var(--ivlight); border:1px solid var(--sand); border-radius:var(--r-card); box-shadow:var(--shadow-rest); overflow:hidden; transition:box-shadow .18s ease, transform .18s ease; display:flex; flex-direction:column;}
.card:hover{box-shadow:var(--shadow-raise); transform:translateY(-3px);}
.card .img-ph{aspect-ratio:16/11; background:repeating-linear-gradient(45deg, var(--gold50), var(--gold50) 12px, #efe2c4 12px, #efe2c4 24px); display:flex; align-items:center; justify-content:center; color:var(--gold700); font-family:var(--ser); font-style:italic; font-size:15px; text-align:center; padding:14px;}
.card .card-pic{width:100%; aspect-ratio:16/11; object-fit:cover; display:block;}
.card .c-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:8px;}
.card .c-head h3{margin:0;}
.card .price{font-family:var(--ser); font-weight:600; font-size:18px; color:var(--gd); white-space:nowrap;}
/* founder / award showcase */
.award-figure{max-width:820px; margin:0 auto; border:1px solid var(--sand); background:var(--iv); padding:14px; box-shadow:var(--shadow-rest);}
.award-figure img{width:100%; height:auto; display:block;}
.award-figure figcaption{font-size:14px; line-height:1.7; color:var(--ch); padding:16px 6px 4px; text-align:center;}
.award-figure.on-dark{background:transparent; border:1.5px solid var(--gd); outline:1px solid var(--gd); outline-offset:6px; box-shadow:none; margin-bottom:44px;}
.award-figure.on-dark figcaption{color:rgba(251,245,237,.7);}
.card .body{padding:24px 24px 26px;}
.card h3{font-size:26px; margin-bottom:8px;}
.card .body p{color:var(--ch); font-size:15.5px; margin-top:6px;}
.card .num{font-family:var(--ser); font-weight:600; font-size:40px; color:var(--gd); line-height:1;}

/* values card (no photo) */
.vcard{background:var(--ivlight); border:1px solid var(--sand); border-radius:var(--r-card); padding:30px 28px 32px; box-shadow:var(--shadow-rest);}
.vcard .num{font-family:var(--ser); font-weight:600; font-size:30px; color:var(--gd);}
.vcard h3{font-size:26px; margin:8px 0 6px;}
.vcard p{color:var(--ch); font-size:15.5px;}

/* =====================================================================
   OUTLET TEASER GRID (dark) — home
   ===================================================================== */
.outlet-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.outlet-tile{position:relative; background:var(--gn); color:var(--iv); min-height:230px; display:flex; flex-direction:column; transition:background .2s ease, box-shadow .2s ease; box-shadow:inset 0 0 0 1px rgba(200,145,42,.16);}
.outlet-tile:nth-child(even){background:var(--gdeep);}
.outlet-tile:hover{background:#04250f; box-shadow:inset 0 0 0 1px rgba(200,145,42,.5);}
.outlet-tile .area .q{position:absolute; width:108px; opacity:.12; transition:opacity .25s ease, transform .3s ease;}
.outlet-tile .area svg.q{width:88px; height:88px; color:var(--gd); opacity:.34; top:50%; left:50%; transform:translate(-50%,-76%);}
.outlet-tile:hover .area svg.q{opacity:.6; transform:translate(-50%,-76%) scale(1.06);}
.outlet-tile .area .lbl{margin-top:76px;}
.outlet-tile:hover .area .q{opacity:.22; transform:scale(1.08) rotate(45deg);}
.outlet-tile .area .lbl{position:relative; z-index:1;}
.outlet-tile .area .new-badge{position:absolute; top:14px; right:14px; z-index:2; background:var(--gd); color:var(--gn); font-size:9.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:4px 9px; border-radius:2px;}
.outlet-tile .ft .go{margin-left:auto; font-size:20px; color:var(--gd); opacity:0; transform:translateX(-6px); transition:opacity .2s ease, transform .2s ease;}
.outlet-tile:hover .ft .go{opacity:1; transform:translateX(0);}
.outlet-tile .ft .meta{min-width:0;}
.outlet-tile .area{position:relative; flex:1; display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--gd); font-size:11px; letter-spacing:.22em; text-transform:uppercase; opacity:.85;}
.outlet-tile .ft{padding:18px 22px 20px; display:flex; align-items:center; gap:14px; border-top:1px solid rgba(200,145,42,.18);}
.outlet-tile .ft .n{font-family:var(--ser); font-weight:600; font-size:44px; color:var(--gd); line-height:1;}
.outlet-tile .ft .name{font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--iv); line-height:1.4;}
.outlet-tile .ft .hours{font-size:11px; color:rgba(251,245,237,.7); margin-top:3px; letter-spacing:.02em; text-transform:none; font-weight:400;}

/* =====================================================================
   PAGE HEADER (interior pages)
   ===================================================================== */
.page-header{position:relative; background:var(--gn); padding:clamp(48px,6vw,72px) 0 clamp(44px,6vw,64px); overflow:hidden; text-align:center;}
.page-header .quat{position:absolute; width:38px; height:38px; opacity:.85;}
.page-header .quat.tl{top:30px; left:34px;} .page-header .quat.tr{top:30px; right:34px;}
.page-header .ghost{position:absolute; right:5%; bottom:-30%; font-family:var(--ser); font-weight:600; font-size:clamp(150px,22vw,260px); color:var(--gd); opacity:.07; user-select:none; pointer-events:none;}
.page-header .inner{position:relative; max-width:760px; margin:0 auto; padding:0 24px;}
.page-header h1{font-size:clamp(40px,6vw,68px); color:var(--iv); margin-top:12px;}
.page-header h1 em{color:var(--gd);}
.page-header .sub{color:rgba(251,245,237,.82); font-size:16px; line-height:1.7; max-width:54ch; margin:18px auto 0;}
.page-header .divider{max-width:300px; margin:20px auto 0;}
.page-header .tri{margin-top:14px; display:block;}

/* =====================================================================
   MENU
   ===================================================================== */
.menu-cat{margin-bottom:clamp(40px,5vw,60px);}
.menu-cat .cat-head{display:flex; align-items:baseline; gap:16px; margin-bottom:8px;}
.menu-cat h2{font-size:clamp(28px,3.4vw,40px);}
.menu-cat .cat-zh{font-family:var(--ser); font-style:italic; font-size:20px; color:var(--gold700);}
.menu-cat .cat-rule{height:1px; background:var(--sand); margin:14px 0 6px;}
.menu-item{display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline; padding:15px 0; border-bottom:1px dotted var(--sand);}
.menu-item:last-child{border-bottom:0;}
.mi-name{font-family:var(--ser); font-weight:600; font-size:21px; color:var(--gn);}
.mi-desc{font-size:14px; color:var(--st); margin-top:2px; line-height:1.5;}
.mi-price{font-family:var(--ser); font-weight:600; font-size:21px; color:var(--gold700); white-space:nowrap;}
.mi-zh{font-family:var(--ser); font-style:italic; font-size:15px; color:var(--st); margin-top:2px;}
/* two-column item flow within a category */
.menu-items{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(32px,5vw,72px);}
.menu-items .menu-item{border-bottom:1px dotted var(--sand);}
/* dual hot/cold price tags */
.mi-prices{display:flex; gap:8px; align-items:baseline; white-space:nowrap;}
.mi-prices .pt{display:inline-flex; align-items:baseline; gap:5px;}
.mi-prices .pt .lbl{font-family:var(--sans); font-weight:700; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--st); border:1px solid var(--sand); border-radius:2px; padding:1px 5px; position:relative; top:-2px;}
.mi-prices .pt.hot .lbl{color:var(--gn); border-color:color-mix(in srgb, var(--gn) 30%, transparent);}
.mi-prices .pt.cold .lbl{color:var(--gold700); border-color:var(--gold200);}
.mi-prices .val{font-family:var(--ser); font-weight:600; font-size:19px; color:var(--gold700);}

/* Food / Drinks toggle + sticky category nav */
.menu-controls{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--iv) 94%, transparent); backdrop-filter:saturate(1.1) blur(8px); border-bottom:1px solid var(--sand); padding:14px 0 0;}
.menu-toggle{display:flex; justify-content:center; gap:0; margin-bottom:14px;}
.menu-toggle button{font-family:var(--sans); font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--gn); background:transparent; border:1.5px solid var(--gd); padding:11px 30px; cursor:pointer; transition:background .18s ease, color .18s ease;}
.menu-toggle button:first-child{border-radius:var(--r-btn) 0 0 var(--r-btn); border-right-width:.75px;}
.menu-toggle button:last-child{border-radius:0 var(--r-btn) var(--r-btn) 0; border-left-width:.75px;}
.menu-toggle button[aria-selected="true"]{background:var(--gn); color:var(--gd);}
.cat-nav{display:flex; gap:8px; overflow-x:auto; padding:0 4px 12px; scrollbar-width:thin; -webkit-overflow-scrolling:touch;}
.cat-nav::-webkit-scrollbar{height:5px;}
.cat-nav::-webkit-scrollbar-thumb{background:var(--gold200); border-radius:999px;}
.cat-nav button{flex:0 0 auto; font-family:var(--sans); font-weight:600; font-size:12.5px; color:var(--ch); background:var(--ivlight); border:1px solid var(--sand); border-radius:999px; padding:7px 15px; cursor:pointer; white-space:nowrap; transition:all .16s ease;}
.cat-nav button:hover{border-color:var(--gd); color:var(--gn);}
.cat-nav button.active{background:var(--gn); color:var(--gd); border-color:var(--gn);}
.menu-cat h2{scroll-margin-top:130px;}

/* signature showcase */
.sig-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.sig-card{background:var(--gn); border:1px solid color-mix(in srgb, var(--gd) 40%, transparent); border-radius:var(--r-card); display:flex; flex-direction:column; position:relative; overflow:hidden; box-shadow:var(--shadow-rest); transition:box-shadow .2s ease, transform .2s ease;}
.sig-card:hover{box-shadow:var(--shadow-raise); transform:translateY(-3px);}
.sig-card .s-photo{aspect-ratio:1/1; position:relative; overflow:hidden;}
.sig-card .s-photo.no-pic{background:var(--gdeep); display:flex; align-items:center; justify-content:center;}
.sig-card .s-photo.no-pic .s-mark{width:46%; opacity:.5;}
.sig-card .s-photo img.s-pic{width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .35s ease;}
.sig-card:hover .s-photo img.s-pic{transform:scale(1.05);}
.sig-card .medal{position:absolute; top:10px; left:10px; width:38px; opacity:.92; z-index:2; filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));}
.sig-card .s-body{padding:20px 22px 22px; display:flex; flex-direction:column; gap:5px;}
.sig-card .s-en{font-family:var(--ser); font-weight:600; font-size:22px; color:var(--iv); line-height:1.25;}
.sig-card .s-zh{font-family:var(--ser); font-style:italic; font-size:15px; color:var(--gold200);}
.sig-card .s-price{font-family:var(--ser); font-weight:600; font-size:20px; color:var(--gd); margin-top:8px;}
@media(max-width:900px){.sig-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:720px){.menu-items{grid-template-columns:1fr;} .sig-grid{grid-template-columns:1fr;}}

/* food gallery — masonry look & feel */
.menu-gallery{columns:4 220px; column-gap:14px;}
.menu-gallery figure{break-inside:avoid; margin:0 0 14px; border-radius:var(--r-card); overflow:hidden; border:1px solid color-mix(in srgb, var(--gd) 28%, transparent); position:relative; box-shadow:var(--shadow-rest);}
.menu-gallery figure img{width:100%; display:block; transition:transform .4s ease;}
.menu-gallery figure:hover img{transform:scale(1.05);}
@media(max-width:900px){.menu-gallery{columns:3 160px;}}
@media(max-width:560px){.menu-gallery{columns:2 140px; column-gap:10px;} .menu-gallery figure{margin-bottom:10px;}}

/* real photo inside the decorative frame */
.photo-frame .frame-pic{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.split .img-col .photo-frame.ratio-45{max-width:350px; margin-left:auto;}

/* =====================================================================
   OUTLETS (detail)
   ===================================================================== */
.outlet-list{display:flex; flex-direction:column; gap:clamp(24px,3vw,36px);}
.outlet-card{display:grid; grid-template-columns:1fr 1fr; background:var(--ivlight); border:1px solid var(--sand); border-radius:var(--r-panel); overflow:hidden; box-shadow:var(--shadow-rest); scroll-margin-top:96px;}
.outlet-card .info{padding:clamp(26px,3vw,38px);}
.outlet-card .info .o-eyebrow{font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold700);}
.outlet-card .info h2{font-size:clamp(30px,3.4vw,42px); margin:6px 0 4px;}
.outlet-card .info .divider{max-width:120px; margin:14px 0 18px;}
.outlet-card .meta{display:flex; gap:12px; margin:12px 0; font-size:15px; color:var(--ch);}
.outlet-card .meta .k{flex:0 0 88px; font-weight:700; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gn); padding-top:3px;}
.outlet-card .actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; align-items:center;}
.outlet-card .map{min-height:280px; background:var(--gn);}
.outlet-card .map iframe{width:100%; height:100%; min-height:280px; border:0; display:block; filter:saturate(.92);}

/* =====================================================================
   MEMBERSHIP BAND — subtle (in-store QR)
   ===================================================================== */
.member-band{background:var(--bl); position:relative; overflow:hidden;}
.member-band .inner{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(24px,4vw,48px); align-items:center;}
.member-band .qr{width:118px; height:118px; border:1.5px solid var(--gd); background:var(--ivlight); display:flex; align-items:center; justify-content:center; text-align:center; padding:10px; flex:0 0 auto;}
.member-band .qr span{font-family:var(--ser); font-style:italic; color:var(--gold700); font-size:13px; line-height:1.3;}
.member-band .copy .eyebrow{margin-bottom:8px;}
.member-band .copy h2{font-size:clamp(28px,3.6vw,42px);}
.member-band .copy p{color:var(--ch); margin-top:10px; max-width:48ch; font-size:15.5px;}
.member-band .act{flex:0 0 auto; text-align:center;}
.member-band .act .tri{margin-top:12px; font-size:14px; display:block;}

/* =====================================================================
   HALAL CENTRAL KITCHEN
   ===================================================================== */
.halal-cert-section{background:var(--iv);}
.halal-cert-frame{
  border:1.5px solid var(--gd);
  outline:1px solid var(--gd);
  outline-offset:7px;
  border-radius:var(--r-card);
  background:var(--gold50);
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:36px 28px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.halal-cert-frame::before{
  content:"PORK-FREE";
  position:absolute;
  font-family:var(--ser);
  font-weight:600;
  font-size:56px;
  letter-spacing:.1em;
  color:var(--gd);
  opacity:.05;
  user-select:none;
  pointer-events:none;
}
.halal-cert-frame .cert-img-ph{
  font-family:var(--ser);
  font-style:italic;
  font-size:15px;
  color:var(--gold700);
  background:rgba(251,245,237,.95);
  padding:8px 20px;
  border:1px solid var(--gd);
  border-radius:var(--r-stamp);
}
.halal-cert-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  position:absolute;
  inset:0;
  padding:24px;
}
.halal-shield{
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  height:80px;
  background:var(--gn);
  border-radius:50%;
  flex-shrink:0;
}
.halal-shield svg{width:38px;height:38px;stroke:var(--gd);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.halal-pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:clamp(40px,5vw,60px); border-top:1px solid var(--gd); border-bottom:1px solid var(--gd);}
/* central kitchen video */
.kitchen-video{margin:0 0 0 auto; max-width:320px; position:relative; border:1.5px solid var(--gd); outline:1px solid var(--gd); outline-offset:6px; border-radius:var(--r-card); overflow:hidden; background:var(--gn);}
.kitchen-video video{display:block; width:100%; height:auto; background:var(--gn);}
.kitchen-video figcaption{font-size:13.5px; color:rgba(251,245,237,.72); padding:12px 18px 14px; text-align:center; background:var(--gn);}
.halal-pillar{padding:clamp(26px,3vw,36px) clamp(22px,2.6vw,34px); position:relative;}
.halal-pillar + .halal-pillar{box-shadow:inset 1px 0 0 color-mix(in srgb, var(--gd) 38%, transparent);}
.halal-pillar .hp-num{display:block; font-family:var(--ser); font-weight:600; font-size:15px; letter-spacing:.18em; color:var(--gd);}
.halal-pillar h3{font-family:var(--ser); font-weight:600; font-size:clamp(22px,2.2vw,28px); color:var(--gn); line-height:1.2; margin:12px 0 10px;}
.halal-pillar p{font-size:15px; color:var(--ch); line-height:1.75; text-wrap:pretty;}
@media(max-width:760px){.halal-pillars{grid-template-columns:1fr;} .halal-pillar + .halal-pillar{box-shadow:inset 0 1px 0 color-mix(in srgb, var(--gd) 38%, transparent);}}

/* =====================================================================
   RECORDS & RECOGNITION
   ===================================================================== */
.records-section{background:var(--gn); color:var(--iv);}
.records-section .sec-head{color:var(--iv);}
.records-section .sec-head h2{color:var(--iv);}
.records-section .sec-head h2 em{color:var(--gd);}
.records-section .divider i{background:var(--gd);}
.records-section .divider i::before{background:var(--gd);}
.awards-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:8px;}
.award-card{
  background:var(--iv);
  border:1.5px solid var(--gd);
  outline:1px solid var(--gd);
  outline-offset:6px;
  border-radius:var(--r-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.award-img-ph{
  aspect-ratio:3/2;
  background:repeating-linear-gradient(45deg,var(--gold50),var(--gold50) 13px,#efe2c4 13px,#efe2c4 26px);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.award-img-ph img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.award-img-ph .ph-label{
  font-family:var(--ser);
  font-style:italic;
  color:var(--gold700);
  font-size:16px;
  background:rgba(251,245,237,.92);
  padding:7px 18px;
  border:1px solid var(--gd);
  text-align:center;
  max-width:80%;
}
.award-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:var(--gn);
  color:var(--gd);
  font-family:var(--sans);
  font-weight:700;
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  padding:5px 14px;
  border-radius:2px;
  margin-bottom:10px;
}
.award-badge svg{width:12px;height:12px;flex-shrink:0;}
.award-body{padding:24px 26px 28px; display:flex; flex-direction:column; flex:1;}
.award-body h3{font-size:clamp(20px,2.2vw,26px); color:var(--gn); margin:0 0 8px; line-height:1.25;}
.award-body p{color:var(--ch); font-size:15px; line-height:1.7; margin:0; flex:1;}
.award-year{
  margin-top:14px;
  font-family:var(--ser);
  font-style:italic;
  font-size:13px;
  color:var(--gold700);
}
@media(max-width:700px){.awards-grid{grid-template-columns:1fr;}}

/* =====================================================================
   CAREERS
   ===================================================================== */
.careers .inner{position:relative;}
.role-list{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:8px;}
.role{display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--ivlight); border:1px solid var(--sand); border-left:3px solid var(--gd); border-radius:var(--r-card); padding:20px 24px;}
.role .r-name{font-family:var(--ser); font-weight:600; font-size:22px; color:var(--gn);}
.role .r-meta{font-size:13px; color:var(--st); margin-top:2px;}

/* =====================================================================
   GOOGLE REVIEWS
   ===================================================================== */
.reviews-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.review-card{background:var(--ivlight); border:1px solid var(--sand); border-radius:var(--r-card); padding:26px 24px 22px; box-shadow:var(--shadow-rest); display:flex; flex-direction:column; gap:12px;}
.star-row{display:flex; gap:2px; font-size:17px; color:var(--goldbright);}
.review-text{font-family:var(--ser); font-style:italic; font-size:16px; color:var(--ch); line-height:1.75; flex:1;}
.reviewer{display:flex; align-items:center; gap:11px; padding-top:14px; border-top:1px solid var(--sand); margin-top:auto;}
.reviewer-av{width:38px; height:38px; border-radius:50%; background:var(--gn); display:flex; align-items:center; justify-content:center; font-family:var(--ser); font-weight:600; color:var(--gd); font-size:16px; flex-shrink:0;}
.reviewer-name{font-weight:600; font-size:13.5px; color:var(--ink); line-height:1.3;}
.reviewer-outlet{font-size:12px; color:var(--st); margin-top:1px;}
.reviews-agg{text-align:center; margin-bottom:44px;}
.reviews-agg .big-g{font-family:var(--ser); font-weight:600; font-size:clamp(48px,6vw,72px); color:var(--gn); line-height:1; letter-spacing:-.01em;}
.reviews-agg .big-g span{color:var(--goldbright);}
.reviews-agg p{color:var(--st); font-size:14px; margin-top:6px;}
@media(max-width:860px){.reviews-grid{grid-template-columns:1fr;}}

/* =====================================================================
   MEMBERSHIP PAGE
   ===================================================================== */
.promo-badge{display:inline-flex; align-items:center; gap:7px; background:var(--gd); color:var(--gn); font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.28em; text-transform:uppercase; padding:6px 16px; border-radius:var(--r-btn); margin-bottom:18px;}
.promo-card-hero{background:var(--gn); border:2px solid var(--gd); border-radius:var(--r-panel); padding:clamp(32px,5vw,56px); display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,56px); align-items:center; position:relative; overflow:hidden;}
.promo-card-hero::after{content:"50"; position:absolute; right:-20px; bottom:-40px; font-family:var(--ser); font-weight:600; font-size:280px; color:rgba(200,145,42,.07); line-height:1; pointer-events:none; user-select:none;}
.promo-pct{font-family:var(--ser); font-weight:600; font-size:clamp(72px,10vw,120px); color:var(--gd); line-height:1; flex-shrink:0;}
.promo-pct small{display:block; font-size:.38em; letter-spacing:.08em; margin-top:4px;}
.promo-detail h3{font-size:clamp(22px,3vw,36px); color:var(--iv); margin-bottom:10px; line-height:1.15;}
.promo-detail p{color:rgba(251,245,237,.82); font-size:16px; line-height:1.7; max-width:46ch;}
.promo-detail .fine{font-size:12.5px; color:rgba(251,245,237,.5); margin-top:14px;}
.promo-detail .btnrow{margin-top:24px;}
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
.step{text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px;}
.step-num{width:52px; height:52px; border-radius:50%; border:2px solid var(--gd); display:flex; align-items:center; justify-content:center; font-family:var(--ser); font-weight:600; font-size:24px; color:var(--gd);}
.step h4{font-family:var(--ser); font-size:21px; color:var(--gn);}
.step p{font-size:15px; color:var(--ch); max-width:26ch; line-height:1.65;}
.benefit-list{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px;}
.benefit-item{display:flex; align-items:center; gap:16px; background:var(--ivlight); border:1px solid var(--sand); border-left:3px solid var(--gd); border-radius:var(--r-card); padding:20px 22px;}
.benefit-icon{width:40px; height:40px; border-radius:50%; background:var(--gn); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.benefit-icon svg{width:18px;height:18px;stroke:var(--gd);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.benefit-text .b-title{font-family:var(--ser); font-weight:600; font-size:18px; color:var(--gn);}
.benefit-text .b-sub{font-size:13.5px; color:var(--st); margin-top:2px;}
@media(max-width:760px){
  .promo-card-hero{grid-template-columns:1fr; text-align:center;}
  .steps-grid{grid-template-columns:1fr;}
  .benefit-list{grid-template-columns:1fr;}
}

/* =====================================================================
   PROMOS PAGE
   ===================================================================== */
.promos-list{display:flex; flex-direction:column; gap:28px;}
.promo-item{background:var(--ivlight); border:1px solid var(--sand); border-radius:var(--r-panel); overflow:hidden; display:grid; grid-template-columns:220px 1fr; box-shadow:var(--shadow-rest); transition:box-shadow .18s ease, transform .18s ease;}
.promo-item:hover{box-shadow:var(--shadow-raise); transform:translateY(-2px);}
.promo-item .p-thumb{background:repeating-linear-gradient(45deg,var(--gold50),var(--gold50) 13px,#efe2c4 13px,#efe2c4 26px); display:flex; align-items:center; justify-content:center; min-height:180px; position:relative;}
.promo-item .p-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.promo-item .p-thumb span{font-family:var(--ser); font-style:italic; color:var(--gold700); font-size:14px; background:rgba(251,245,237,.92); padding:6px 14px; border:1px solid var(--gd); text-align:center; max-width:85%; position:relative;}
.promo-item .p-body{padding:28px 30px;}
.p-status{display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; padding:4px 11px; border-radius:2px; margin-bottom:12px;}
.p-status.live{background:rgba(2,59,30,.1); color:var(--gn);}
.p-status.live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gn); display:inline-block;}
.p-status.soon{background:var(--gold50); color:var(--gold700);}
.promo-item h3{font-size:clamp(20px,2.2vw,28px); color:var(--gn); margin-bottom:8px; line-height:1.2;}
.promo-item p{font-size:15px; color:var(--ch); line-height:1.7;}
.promo-item .p-fine{font-size:12.5px; color:var(--st); margin-top:10px;}
.promo-item .p-cta{margin-top:18px;}
@media(max-width:680px){.promo-item{grid-template-columns:1fr;} .promo-item .p-thumb{min-height:90px;}}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:var(--gdeep); color:var(--iv); padding:clamp(48px,6vw,68px) 0 28px;}
.footer-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:36px; border-bottom:1px solid rgba(200,145,42,.25);}
.footer-brand .brand{margin-bottom:14px;}
.footer-brand p{color:rgba(251,245,237,.7); max-width:34ch; font-size:14.5px; margin-top:4px;}
.footer-brand .tri{margin-top:14px; font-size:15px;}
.footer-col h4{font-family:var(--sans); font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gd); margin-bottom:14px;}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:9px;}
.footer-col a{color:rgba(251,245,237,.78); font-size:14px; transition:color .18s ease;}
.footer-col a:hover{color:var(--gd);}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:22px; font-size:12.5px; color:rgba(251,245,237,.55);}
.footer-bottom .zh{font-family:var(--ser); font-size:16px; color:var(--gold200);}
.footer-bottom a{color:rgba(251,245,237,.55);}
.footer-bottom a:hover{color:var(--gd);}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:980px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .footer-brand{grid-column:1 / -1;}
  .outlet-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .nav-links{
    position:absolute; top:74px; left:0; right:0; background:var(--gdeep);
    flex-direction:column; align-items:stretch; gap:0; margin:0; padding:6px 0;
    border-bottom:1px solid rgba(200,145,42,.3); display:none;
  }
  .nav-links.open{display:flex;}
  .nav-links li{width:100%;}
  .nav-links a{display:block; padding:14px 32px; border-bottom:0;}
  .nav-links a.active{border-bottom:0; background:rgba(200,145,42,.12);}
  .nav-toggle{display:inline-flex; order:3;}
  .nav-right{margin-left:auto;}
  .nav-right .nav-pill{display:none;}
  .split, .split.rev{grid-template-columns:1fr; gap:40px;}
  .split .txt{order:1;} .split .img-col{order:2;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .outlet-card{grid-template-columns:1fr;}
  .outlet-card .map{min-height:240px;}
  .member-band .inner{grid-template-columns:1fr; text-align:center; justify-items:center;}
  .role-list{grid-template-columns:1fr;}
  .vbadge{display:none;}
}
@media (max-width:560px){
  .container{padding:0 20px;}
  .outlet-grid{grid-template-columns:1fr;}
  .peek .row{gap:14px 20px;}
  .menu-item{grid-template-columns:1fr; gap:4px;}
  .mi-price{justify-self:start;}
  .footer-top{grid-template-columns:1fr;}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important; transition:none !important;}
}