/* ---------- ribbon ---------- */
  .draft-ribbon{
    position:sticky; top:0; z-index:100; background:var(--ink); color:var(--bone);
    font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:7px 12px;
  }
  .draft-ribbon strong{color:var(--brass-soft);}

  /* ---------- header ---------- */
  .site-header{
    position:sticky; top:0; z-index:90; display:flex; align-items:center; justify-content:space-between;
    padding:14px var(--pad); background:rgba(242,234,217,0.92); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line); transition:box-shadow .3s ease;
  }
  .site-header.scrolled{box-shadow:0 8px 24px rgba(26,24,21,0.08);}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
  .brand img{height:38px;width:38px;border-radius:50%;object-fit:cover;}
  .brand-word{font-family:var(--font-display); font-weight:500; font-size:14.5px; letter-spacing:.05em; text-transform:uppercase; line-height:1.15;}
  .brand-word span:not(.i18n-text){display:block; font-size:9.5px; letter-spacing:.14em; color:var(--soy); font-family:var(--font-sans); font-weight:600; margin-top:2px;}
  nav.primary-nav{display:flex; align-items:center; gap:26px;}
  nav.primary-nav a{
    font-size:12px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--ink);
    font-weight:600; padding-bottom:3px; border-bottom:1px solid transparent; transition:border-color .2s ease, color .2s ease; white-space:nowrap;
  }
  nav.primary-nav a:hover, nav.primary-nav a.active{border-color:var(--chilli); color:var(--chilli);}
  .header-actions{display:flex; align-items:center; gap:12px;}
  .lang-switch{display:flex; align-items:center; gap:2px; font-size:11px; letter-spacing:.06em; font-weight:700;}
  .lang-switch a{color:var(--soy); text-decoration:none; padding:6px 7px; border-radius:2px; line-height:1; min-width:30px; text-align:center;}
  .lang-switch a:hover{background:var(--line);}
  .lang-switch a.active{background:var(--ink); color:var(--bone);}
  .lang-switch a:focus-visible{outline:2px solid var(--chilli); outline-offset:2px;}
  .lang-sep{color:var(--soy); opacity:.35; font-weight:400;}
  .btn{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; padding:10px 17px; border-radius:2px; border:1px solid var(--ink); transition:all .2s ease; cursor:pointer;}
  .btn-solid{background:var(--ink); color:var(--bone);}
  .btn-solid:hover{background:var(--chilli); border-color:var(--chilli); transform:translateY(-1px);}
  .btn-ghost{background:transparent; color:var(--ink);}
  .btn-ghost:hover{background:var(--ink); color:var(--bone);}
  .btn-ghost-light{border-color:var(--line-on-dark); color:var(--bone); background:transparent;}
  .btn-ghost-light:hover{background:var(--bone); color:var(--ink);}
  .chapter--dark .btn-solid, .chapter--soy .btn-solid{background:var(--bone); color:var(--ink); border-color:var(--bone);}
  .chapter--dark .btn-solid:hover, .chapter--soy .btn-solid:hover{background:var(--chilli); border-color:var(--chilli); color:var(--bone);}
  .nav-toggle{display:none; background:none; border:1px solid var(--ink); border-radius:2px; padding:8px 10px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; cursor:pointer;}
  @media (max-width:920px){
    nav.primary-nav{display:none;} .nav-toggle{display:inline-block;}
    .header-actions .btn-ghost{display:none;} .brand-word{font-size:12.5px;} .brand-word span:not(.i18n-text){display:none;}
    .site-header{padding:11px 16px; gap:8px;} .brand img{height:30px;width:30px;}
  }
  @media (max-width:480px){ .btn-solid{padding:9px 12px; font-size:10.5px;} .nav-toggle{padding:9px 10px; font-size:9.5px;} }

  /* mobile drawer */
  .mobile-drawer{
    position:fixed; inset:0; z-index:150; background:var(--ink); color:var(--bone);
    display:flex; flex-direction:column; padding:24px; transform:translateX(100%); transition:transform .35s var(--ease);
  }
  .mobile-drawer{visibility:hidden; transition:transform .35s var(--ease), visibility 0s linear .35s;}
  .mobile-drawer.open{transform:translateX(0); visibility:visible; transition:transform .35s var(--ease), visibility 0s;}
  html.drawer-open, html.drawer-open body{overflow:hidden;}
  .mobile-drawer a{color:var(--bone); text-decoration:none; font-family:var(--font-display); font-size:26px; padding:12px 0; border-bottom:1px solid var(--line-on-dark);}
  .drawer-close{align-self:flex-end; background:none; border:1px solid var(--line-on-dark); color:var(--bone); padding:8px 12px; border-radius:2px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; margin-bottom:20px;}

  /* ---------- chapter label (floating, desktop) ---------- */
  .chapter-flag{
    position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:80;
    writing-mode:vertical-rl; text-orientation:mixed; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
    font-weight:700; color:var(--soy); opacity:.55; transition:opacity .4s ease;
  }
  @media (max-width:1100px){.chapter-flag{display:none;}}

  /* ---------- chapter shell ---------- */
  .chapter{position:relative; padding:104px var(--pad); border-bottom:1px solid var(--line); overflow:hidden;}
  .chapter--dark{background:var(--ink); color:var(--bone); border-color:var(--line-on-dark);}
  .chapter--dark .eyebrow{color:var(--brass-soft);}
  .chapter--soy{background:linear-gradient(180deg, var(--soy), var(--soy-2)); color:var(--bone); border-color:var(--line-on-dark);}
  .chapter--soy .eyebrow{color:var(--brass-soft);}

  /* Madam Dai Jun Snacks - a deliberately distinct sub-brand treatment: more
     immediate/energetic than the ink/soy restaurant chapters, but staying in-family
     (brass + chilli forward instead of a new colour). Signals "different expression
     of Madam Dai Jun" per the brand-architecture rule, without a full new brand. */
  .chapter--kiosk{
    background:
      radial-gradient(120% 90% at 85% -10%, rgba(2,111,56,0.30), transparent 55%),
      radial-gradient(90% 70% at 0% 110%, rgba(142,72,11,0.28), transparent 55%),
      linear-gradient(155deg, #12241b, #0b1510);
    color:var(--bone); border-color:var(--line-on-dark);
  }
  .chapter--kiosk .eyebrow{color:var(--brass-soft);}
  .chapter--kiosk .lede{color:var(--bone-deep);}
  .kiosk-sub-brand{
    display:inline-flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
    font-weight:700; color:var(--ink); background:var(--brass-soft); padding:5px 12px; border-radius:20px; margin-bottom:20px;
  }
  .kiosk-sub-brand::before{content:"●"; color:var(--chilli); font-size:8px;}
  h2.chapter-title.kiosk-title{
    font-family:var(--font-sans); font-weight:700; text-transform:uppercase; letter-spacing:.01em;
    font-size:clamp(28px,4vw,46px); max-width:20ch;
  }
  .kiosk-strip .frame{aspect-ratio:3/4; min-width:180px;}
  .kiosk-strip .frame.cup{background:
      radial-gradient(60% 60% at 50% 30%, rgba(2,111,56,0.18), transparent 65%),
      linear-gradient(160deg, #182c22, #0e1c15);}
  .kiosk-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;}
  .kiosk-audience{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px;}
  @media (max-width:760px){.kiosk-audience{grid-template-columns:1fr;}}
  .kiosk-audience-card{border:1px solid var(--line-on-dark); border-radius:3px; padding:22px;}
  .kiosk-audience-card h4{font-family:var(--font-display); font-size:17px; margin:0 0 8px; color:var(--bone);}
  .kiosk-audience-card p{font-size:12.5px; color:var(--bone-deep); margin:0 0 14px;}
  .chapter-inner{max-width:var(--max); margin:0 auto; position:relative; z-index:2;}
  .eyebrow{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--chilli); margin:0 0 14px; display:flex; align-items:center; gap:10px;}
  .eyebrow::before{content:""; width:22px; height:1px; background:currentColor; opacity:.6;}
  .chapter-number{font-family:var(--font-display); font-style:italic; font-size:13px; color:var(--soy); opacity:.55; letter-spacing:.04em; margin-bottom:8px;}
  .chapter--dark .chapter-number, .chapter--soy .chapter-number{color:var(--bone); opacity:.45;}
  h2.chapter-title{font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4.4vw,54px); line-height:1.06; margin:0 0 22px; max-width:17ch;}
  .lede{font-family:var(--font-display); font-style:italic; font-size:clamp(17px,1.8vw,21px); line-height:1.55; max-width:640px; margin:0 0 22px; color:var(--soy);}
  .chapter--dark .lede, .chapter--soy .lede{color:var(--bone-deep);}
  .body-text{max-width:560px; font-size:15.5px; line-height:1.75;}
  .body-text p{margin:0 0 16px;}

  /* pending markers */
  .pending{display:inline-block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); border:1px dashed var(--brass); padding:3px 9px; border-radius:2px;}
  .pending-block{border:1px dashed var(--brass); border-radius:3px; padding:16px 18px; font-size:13px; color:var(--soy); background:rgba(2,111,56,0.08); max-width:560px;}
  .chapter--dark .pending-block, .chapter--soy .pending-block, .chapter--kiosk .pending-block{color:var(--bone-deep); background:rgba(242,234,217,0.06); border-color:var(--brass-soft);}
  .chapter--dark .pending, .chapter--soy .pending, .chapter--kiosk .pending{color:var(--brass-soft); border-color:var(--brass-soft);}
  .chapter--dark .frame .frame-tick, .chapter--soy .frame .frame-tick{border-color:var(--brass-soft);}

  /* ---------- frame (elevated placeholder component) ---------- */
  .frame{
    position:relative; border-radius:2px; overflow:hidden; border:1px solid var(--line);
    background:
      radial-gradient(120% 100% at 20% 0%, rgba(2,111,56,0.10), transparent 60%),
      linear-gradient(150deg, var(--bone-deep) 0%, var(--bone) 65%);
    display:flex; align-items:center; justify-content:center; text-align:center; min-height:230px;
    transition:transform .5s var(--ease);
  }
  .chapter--dark .frame, .chapter--soy .frame{
    background: radial-gradient(120% 100% at 20% 0%, rgba(2,111,56,0.08), transparent 60%), linear-gradient(150deg, #192a22, #121e18);
    border-color:var(--line-on-dark);
  }
  @media (hover:hover){ .frame:hover{transform:scale(1.015);} }
  .frame .frame-tick{position:absolute; width:16px; height:16px; border-color:var(--brass); opacity:.55;}
  .frame .tl{top:10px; left:10px; border-top:1px solid; border-left:1px solid;}
  .frame .tr{top:10px; right:10px; border-top:1px solid; border-right:1px solid;}
  .frame .bl{bottom:10px; left:10px; border-bottom:1px solid; border-left:1px solid;}
  .frame .br{bottom:10px; right:10px; border-bottom:1px solid; border-right:1px solid;}
  .frame-label{font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; font-weight:700; color:var(--soy); opacity:.8; padding:0 26px; max-width:280px;}
  .chapter--dark .frame-label, .chapter--soy .frame-label{color:var(--bone-deep);}
  .frame.tall{min-height:440px;} .frame.short{min-height:170px;}
  .frame-caption{font-size:11px; color:var(--soy); margin-top:9px; font-style:italic;}
  .chapter--dark .frame-caption, .chapter--soy .frame-caption{color:var(--bone-deep);}

  /* ---------- hero ---------- */
  .hero{padding:0; border-bottom:1px solid var(--line); background:var(--ink); position:relative;}
  .hero-frame{max-width:var(--max); margin:34px auto; padding:0 var(--pad); position:relative;}
  .hero-media{
    position:relative; aspect-ratio:16/9.5; border:1px solid var(--line-on-dark); border-radius:2px; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--bone);
    background:
      radial-gradient(60% 60% at 30% 20%, rgba(142,72,11,0.14), transparent 60%),
      radial-gradient(70% 70% at 75% 80%, rgba(2,111,56,0.10), transparent 60%),
      radial-gradient(120% 90% at 50% 15%, #1c3529 0%, #0f1713 75%);
  }
  #heroParallax{position:absolute; inset:-8% -4%; will-change:transform;}
  @media (max-width:640px){ .hero-media{aspect-ratio:4/5.2;} }
  .hero-media .ph-label{position:absolute; top:18px; left:18px; z-index:3; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(242,234,217,0.42); font-weight:700; max-width:60%; text-align:left;}
  .hero-content{position:relative; z-index:3;}
  .hero-zh{font-family:var(--font-display); font-size:13px; letter-spacing:.1em; color:var(--brass-soft); margin-bottom:16px;}
  .hero-line{font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(23px,3.8vw,42px); line-height:1.22; max-width:15ch; padding:0 20px; margin:0;}
  .hero-note{font-size:10.5px; color:rgba(242,234,217,0.42); margin-top:18px; letter-spacing:.03em;}
  .hero-ctas{display:flex; gap:14px; justify-content:center; padding:30px var(--pad) 46px; flex-wrap:wrap;}

  /* ---------- split ---------- */
  .split{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;}
  .split.reverse{grid-template-columns:.95fr 1.05fr;}
  .split.reverse .split-media{order:2;}
  @media (max-width:860px){ .split, .split.reverse{grid-template-columns:1fr; gap:30px;} .split.reverse .split-media{order:0;} }

  /* pull quote */
  .pull-quote{max-width:720px; margin:30px 0 0; font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(19px,2.4vw,26px); line-height:1.6;}
  .pull-quote span:not(.i18n-text){display:block;}
  .pull-quote span:not(.i18n-text):nth-child(2){padding-left:3%;}
  .pull-quote span:not(.i18n-text):nth-child(3){padding-left:6%;}
  .pull-quote cite{display:block; margin-top:14px; font-family:var(--font-sans); font-style:normal; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-soft); font-weight:700;}

  .dot-divider{text-align:center; color:var(--brass); letter-spacing:6px; font-size:11px;}

  /* ---------- horizontal strip ---------- */
  .h-strip{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 18px; margin-top:36px; -webkit-overflow-scrolling:touch;}
  .h-strip::-webkit-scrollbar{height:5px;}
  .h-strip::-webkit-scrollbar-thumb{background:var(--brass); border-radius:4px;}
  .h-strip .frame{min-width:230px; flex:0 0 auto; scroll-snap-align:start; aspect-ratio:4/5;}
  @media (max-width:600px){ .h-strip .frame{min-width:74vw;} }

  /* ---------- dish cards ---------- */
  .dish-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px;}
  @media (max-width:900px){.dish-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.dish-grid{grid-template-columns:1fr;}}
  .dish-card{border:1px solid var(--line); border-radius:3px; background:rgba(255,255,255,0.4); overflow:hidden; transition:box-shadow .3s ease, transform .3s ease;}
  .dish-card:hover{box-shadow:0 14px 30px rgba(26,24,21,0.12); transform:translateY(-3px);}
  .dish-card .frame{border-radius:0; border:none; border-bottom:1px solid var(--line); aspect-ratio:5/4; min-height:0;}
  .dish-body{padding:16px 18px 20px;}
  .dish-tag{display:inline-block; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--chilli); border:1px solid var(--chilli); padding:2px 7px; border-radius:2px; margin-bottom:10px;}
  .dish-names{font-family:var(--font-display); font-size:19px; font-weight:500; margin:0 0 3px;}
  .dish-names .zh{font-family:var(--font-display); font-size:14px; color:var(--soy); margin-left:6px;}
  .dish-bm{font-size:11.5px; color:var(--soy); font-style:italic; margin:0 0 8px;}
  .dish-desc{font-size:12.5px; color:var(--soy); line-height:1.55; margin:0;}
  .dish-meta{display:flex; justify-content:space-between; align-items:center; margin-top:12px;}
  .dish-spice{font-size:11px; color:var(--chilli);}

  /* ---------- location cards ---------- */
  .loc-card{border:1px solid var(--line); border-radius:2px; background:rgba(255,255,255,0.35); padding:34px;}
  .chapter--soy .loc-card{border-color:var(--line-on-dark); background:rgba(242,234,217,0.05);}
  .loc-tag{display:inline-block; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:4px 10px; border-radius:2px; margin-bottom:14px;}
  .loc-tag.flagship{background:var(--green); color:var(--bone);}
  .loc-tag.secondary{background:var(--brass-soft); color:var(--ink);}
  .loc-meta{display:flex; flex-wrap:wrap; gap:20px; margin-top:20px; font-size:13px;}
  .loc-meta div{min-width:150px;}
  .loc-meta strong{display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--chilli); margin-bottom:4px; font-weight:700;}
  .loc-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:26px;}
  @media (max-width:820px){.loc-grid{grid-template-columns:1fr;}}
  .loc-ctas{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap;}

  /* Johor - intentionally lighter / smaller scale, ~15-20% visual weight of Cyberjaya */
  .johor-wrap{max-width:640px;}
  .johor-wrap .frame{min-height:180px;}

  /* ---------- catering ---------- */
  .catering-grid{display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:20px; align-items:start;}
  @media (max-width:860px){.catering-grid{grid-template-columns:1fr;}}
  .mini-form{display:grid; gap:12px;}
  .mini-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .mini-form label{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:var(--brass-soft); display:block; margin-bottom:5px;}
  .mini-form input, .mini-form select, .mini-form textarea{
    width:100%; background:rgba(242,234,217,0.06); border:1px solid var(--line-on-dark); color:var(--bone);
    padding:10px 12px; border-radius:2px; font-family:var(--font-sans); font-size:13px;
  }
  .mini-form textarea{resize:vertical; min-height:70px;}
  .mini-form button{margin-top:6px;}

  /* ---------- teaser ---------- */
  .teaser-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px;}
  @media (max-width:760px){.teaser-grid{grid-template-columns:1fr;}}
  .teaser-card{border:1px solid var(--line); padding:22px; border-radius:2px; transition:border-color .3s ease;}
  .teaser-card:hover{border-color:var(--brass);}
  .teaser-card h4{font-family:var(--font-display); font-weight:500; font-size:17px; margin:0 0 6px;}
  .teaser-card p{font-size:12.5px; color:var(--soy); margin:0;}

  /* ---------- footer ---------- */
  footer{background:var(--ink); color:var(--bone-deep); padding:64px var(--pad) 120px;}
  .footer-inner{max-width:var(--max); margin:0 auto;}
  .footer-brands{display:flex; flex-wrap:wrap; gap:40px; padding-bottom:36px; border-bottom:1px solid var(--line-on-dark); margin-bottom:32px;}
  .footer-brands div{max-width:280px;}
  .footer-brands h5{font-family:var(--font-display); color:var(--bone); font-size:16px; margin:0 0 8px; font-weight:500;}
  .footer-brands p{font-size:12.5px; line-height:1.6; margin:0;}
  .footer-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; font-size:12.5px;}
  @media (max-width:760px){.footer-cols{grid-template-columns:1fr 1fr;}}
  .footer-cols h6{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass-soft); margin:0 0 12px; font-weight:700;}
  .footer-cols a{display:block; text-decoration:none; color:var(--bone-deep); margin-bottom:8px;}
  .footer-cols a:hover{color:var(--bone);}
  .footer-bottom{margin-top:40px; padding-top:20px; border-top:1px solid var(--line-on-dark); font-size:11px; color:rgba(242,234,217,0.42); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

  /* ---------- mobile action dock ---------- */
  .mobile-dock{position:fixed; bottom:0; left:0; right:0; z-index:120; display:none; grid-template-columns:1fr 1fr 1fr; background:var(--ink); border-top:1px solid var(--line-on-dark);}
  .mobile-dock a{display:flex; flex-direction:column; align-items:center; gap:3px; padding:11px 4px 14px; text-decoration:none; color:var(--bone); font-size:10px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; border-right:1px solid var(--line-on-dark);}
  .mobile-dock a:last-child{border-right:none;}
  .mobile-dock a .ico{font-size:16px; line-height:1;}
  @media (max-width:760px){ .mobile-dock{display:grid;} body{padding-bottom:64px;} }

  .reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .reveal.is-visible{opacity:1; transform:translateY(0);}
  .reveal-stagger.is-visible span:not(.i18n-text){transition-delay: calc(var(--i, 0) * 80ms);}

  /* ---------- Phase 2 additions ---------- */
  .big-number{
    font-family:var(--font-display); font-weight:500; font-size:clamp(64px,14vw,168px);
    line-height:.95; margin:0 0 18px; color:var(--bone);
  }
  .chapter--dark .big-number, .chapter--soy .big-number, .chapter--kiosk .big-number{color:var(--bone);}
  .peace-phrase{
    font-family:var(--font-display); font-style:italic; font-weight:400;
    font-size:clamp(28px,5vw,56px); line-height:1.2; max-width:16ch; margin:20px 0;
  }
  .timeline{border-left:1px solid var(--line-on-dark); margin-top:40px; max-width:640px;}
  .chapter:not(.chapter--dark):not(.chapter--soy):not(.chapter--kiosk) .timeline{border-color:var(--line);}
  .timeline-item{position:relative; padding:0 0 34px 28px;}
  .timeline-item::before{content:""; position:absolute; left:-5px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--brass-soft);}
  .timeline-item .t-date{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--chilli); margin-bottom:6px; display:block;}
  .chapter--dark .timeline-item .t-date, .chapter--soy .timeline-item .t-date, .chapter--kiosk .timeline-item .t-date{color:var(--brass-soft);}
  .timeline-item h4{font-family:var(--font-display); font-weight:500; font-size:19px; margin:0 0 6px;}
  .timeline-item p{font-size:13.5px; line-height:1.6; margin:0; max-width:480px;}
  .quote-tag{display:inline-block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--brass-soft); margin-top:10px;}

  .filter-bar{display:flex; flex-wrap:wrap; gap:10px; margin:32px 0 8px;}
  .filter-chip{font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; padding:7px 14px; border:1px solid var(--line); border-radius:20px; background:transparent; cursor:pointer; color:var(--ink); transition:all .2s ease;}
  .filter-chip.active, .filter-chip:hover{background:var(--ink); color:var(--bone); border-color:var(--ink);}
  .lang-note{font-size:11.5px; color:var(--soy); font-style:italic; margin:6px 0 0;}
  .menu-section-title{font-family:var(--font-display); font-weight:500; font-size:24px; margin:56px 0 6px;}
  .menu-category-block:first-child .menu-section-title{margin-top:20px;}
  .dish-row-list{border-top:1px solid var(--line); margin-top:22px;}
  .dish-row{display:flex; justify-content:space-between; align-items:baseline; gap:18px; padding:14px 2px; border-bottom:1px solid var(--line);}
  .dish-row-main{min-width:0;}
  .dish-row-name{font-family:var(--font-display); font-size:15.5px; font-weight:500; margin:0;}
  .dish-row-name .zh{font-family:var(--font-display); font-size:12px; color:var(--soy); margin-left:6px; font-weight:400;}
  .dish-row-name .status-tag{margin-left:8px; vertical-align:middle;}
  .dish-row-desc{font-size:11.5px; color:var(--soy); line-height:1.5; margin:3px 0 0;}
  .dish-row-meta{display:flex; align-items:baseline; gap:10px; white-space:nowrap; font-size:13.5px; font-weight:600;}
  .dish-row-meta .dish-spice{font-size:11px; font-weight:400;}
  .dish-row-meta .pending{font-size:11px; font-weight:400; color:var(--soy); font-style:italic;}
  .menu-section-sub{font-size:12.5px; color:var(--soy); margin:0 0 4px;}
  .status-tag{display:inline-block; font-size:9px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:2px 7px; border-radius:2px; margin-left:8px; vertical-align:middle;}
  .status-tag.signature{background:var(--green); color:var(--bone);}
  .status-tag.unavailable{background:transparent; border:1px solid var(--line); color:var(--soy);}
  .status-tag.confirm{background:transparent; border:1px solid var(--chilli); color:var(--chilli);}
  .chapter--dark .status-tag.confirm, .chapter--soy .status-tag.confirm, .chapter--kiosk .status-tag.confirm{border-color:var(--brass-soft); color:var(--brass-soft);}
  .price-note{font-size:10.5px; color:var(--soy); font-weight:400;}
  .chapter--dark .price-note, .chapter--soy .price-note, .chapter--kiosk .price-note{color:var(--bone-deep);}

  .approach-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:36px;}
  @media (max-width:860px){.approach-grid{grid-template-columns:1fr 1fr;}}
  @media (max-width:560px){.approach-grid{grid-template-columns:1fr;}}
  .approach-card{padding:26px 22px; border:1px solid var(--line); border-radius:3px;}
  .chapter--dark .approach-card, .chapter--soy .approach-card, .chapter--kiosk .approach-card{border-color:var(--line-on-dark);}
  .approach-card .num{font-family:var(--font-display); font-style:italic; font-size:13px; color:var(--chilli); margin-bottom:10px; display:block;}
  .chapter--dark .approach-card .num, .chapter--soy .approach-card .num, .chapter--kiosk .approach-card .num{color:var(--brass-soft);}
  .approach-card h4{font-family:var(--font-display); font-weight:500; font-size:17px; margin:0 0 8px;}
  .approach-card p{font-size:12.5px; line-height:1.6; margin:0; color:var(--soy);}
  .chapter--dark .approach-card p, .chapter--soy .approach-card p, .chapter--kiosk .approach-card p{color:var(--bone-deep);}

  .faith-note{border-left:2px solid var(--brass-soft); padding-left:18px; font-size:13px; line-height:1.7; max-width:520px; margin-top:22px; color:var(--bone-deep);}

  .page-hero{padding:150px var(--pad) 64px; text-align:left;}
  .page-hero .eyebrow{justify-content:flex-start;}
  .page-hero h1.chapter-title{font-size:clamp(34px,5.4vw,64px); max-width:14ch;}

  /* ---------- real photography (Phase 2 correction pass) ---------- */
  .frame.has-photo{padding:0; background:none;}
  .frame.has-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block;}
  .frame.has-photo.tall{min-height:520px;}

  /* ---------- food image asset integration (2026-09-06) ---------- */
  .frame-confirm-note{position:absolute; top:10px; right:10px; z-index:2; font-size:9px; letter-spacing:.06em; text-transform:uppercase; font-weight:700; padding:3px 8px; border-radius:2px; background:rgba(26,24,21,0.72); color:var(--bone);}
  .hero-media.has-photo #heroParallax img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; display:block; opacity:.5;}
  .hero-media.has-photo{background:linear-gradient(180deg, rgba(15,23,19,0.35) 0%, rgba(15,23,19,0.75) 100%), #0f1713;}

  /* Flagship live map + navigation apps */
  .map-block{display:flex; flex-direction:column; gap:18px; min-width:0;}
  .frame.map-frame{background:var(--soy-2); overflow:hidden;}
  .frame.map-frame:hover{transform:none;}
  .frame.map-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
  .frame.map-frame .frame-tick{pointer-events:none; z-index:2;}
  .map-fallback{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:24px; text-align:center; color:var(--bone);
    background:linear-gradient(160deg, var(--soy) 0%, var(--soy-2) 100%);}
  .map-fallback strong{font-family:var(--font-display); font-weight:500; font-size:20px;}
  .map-fallback span:not(.i18n-text){font-size:13px; opacity:.85;}
  .map-fallback em{font-size:11.5px; opacity:.6; margin-top:10px;}
  .map-pin{width:18px; height:18px; border-radius:50% 50% 50% 0; background:var(--brass-soft); transform:rotate(-45deg); margin-bottom:8px; opacity:1 !important;}
  .map-nav{display:flex; flex-direction:column; gap:10px;}
  .map-nav-label{font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--bone-deep); opacity:.8;}
  .map-nav-btns{display:flex; flex-wrap:wrap; gap:10px;}

  /* Phones: the bottom dock already carries WhatsApp, so the header keeps brand, EN | BM and Menu */
  @media (max-width:760px){ .header-actions .btn-solid{display:none;} .header-actions{gap:8px;} }
  @media (max-width:360px){ .brand{gap:8px;} .brand-word{font-size:13px;} .lang-switch a{padding:6px 5px; min-width:26px;} }

  /* Johor map: same live map + direction buttons, styled for the light section */
  .johor-wrap .frame.map-frame{aspect-ratio:4/3; min-height:0; min-width:0;}
  .map-fallback--plain{background:linear-gradient(rgba(23,44,34,.92),rgba(23,44,34,.96));}
  .map-nav--light .map-nav-label{color:var(--soy);}
  .johor-wrap{max-width:var(--max);}  /* full width now that it carries a map, matching the Cyberjaya section */
  .johor-wrap .loc-grid{align-items:start;}

  /* =====================================================================
     MOTION SYSTEM v1 (reusable; see README "Motion standard")
     - Content is ALWAYS visible by default. Hidden start states apply only
       under html.motion, a class the script adds last, after everything it
       needs is set up. If JS fails, is blocked or motion is reduced, nothing
       is hidden.
     - Group reveal: put data-motion on a section; children with .m-reveal
       animate in when it enters the viewport, staggered by --m-d (delay).
     - Variants: .m-rise (line mask rise, use inside .m-line), .m-fade
       (opacity only), .m-quote (slow cinematic rise). GPU-only: opacity +
       transform.
     ===================================================================== */
  :root{--m-ease:cubic-bezier(.16,1,.3,1);}
  .m-line{display:block; overflow:hidden; padding-bottom:.09em; margin-bottom:-.09em;}
  .m-line > .m-reveal{display:block;}
  html.motion [data-motion] .m-reveal{opacity:0; transform:translate3d(0,18px,0); transition:opacity .9s var(--m-ease) var(--m-d,0s), transform 1.1s var(--m-ease) var(--m-d,0s); will-change:opacity, transform;}
  html.motion [data-motion] .m-rise{opacity:1; transform:translate3d(0,105%,0); transition:transform 1.15s var(--m-ease) var(--m-d,0s);}
  html.motion [data-motion] .m-fade{transform:none;}
  html.motion [data-motion] .m-quote{transform:translate3d(0,34px,0); transition:opacity 1.4s var(--m-ease) var(--m-d,0s), transform 1.6s var(--m-ease) var(--m-d,0s);}
  html.motion [data-motion].m-in .m-reveal{opacity:1; transform:none;}
  html.motion [data-motion].m-in .m-reveal{will-change:auto;}

  /* ---------- Visit Us v1.0: practical, compact location layout ---------- */
  .visit-hero.page-hero{padding:clamp(112px,10vw,132px) var(--pad) clamp(30px,3.6vw,46px); border-bottom:0;}
  .visit-hero h1.chapter-title{font-family:var(--font-display); font-weight:400; letter-spacing:-0.02em; line-height:1; margin-bottom:16px; font-variation-settings:"opsz" 144;}
  .visit-map .map-open{margin-top:12px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--brass-soft); text-decoration:none; border-bottom:1px solid rgba(107,199,153,.45); padding-bottom:2px;}
  .visit-map .map-open:hover{color:var(--bone); border-color:var(--bone);}
  .visit-hero .lede{max-width:620px; margin-bottom:0;}
  .visit-flagship{padding-top:clamp(52px,6vw,84px); padding-bottom:clamp(52px,6vw,84px);}
  .visit-johor{padding-top:clamp(48px,5.4vw,76px); padding-bottom:clamp(48px,5.4vw,76px);}
  .visit-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3.4vw,48px);}
  .visit-intro-block{max-width:760px; margin-bottom:clamp(28px,3.4vw,44px);}
  .visit-row--details{align-items:stretch;}
  .visit-row--johor{align-items:start;}
  h2.chapter-title.visit-name{margin:0 0 6px; max-width:none;}
  h2.chapter-title.visit-name--small{font-size:clamp(28px,3.2vw,40px);}
  .visit-place{font-family:var(--font-display); font-style:italic; font-size:clamp(18px,1.7vw,22px); line-height:1.3; margin:0 0 16px; color:var(--brass-soft);}
  .visit-johor .visit-place{color:var(--brass);}
  .visit-copy{font-size:15.5px; line-height:1.7; max-width:34em; margin:0; color:var(--bone-deep);}
  .visit-johor .visit-copy{color:var(--soy);}
  .visit-photo{margin:0; border-radius:3px; overflow:hidden; box-shadow:0 22px 44px -26px rgba(0,0,0,.6);}
  .visit-photo img{display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:center 40%; transition:transform 1.2s var(--m-ease);}
  .visit-photo:hover img{transform:scale(1.025);}
  .visit-card{border:1px solid var(--line-on-dark); border-radius:3px; background:rgba(242,234,217,.05); padding:clamp(22px,2.6vw,32px);}
  .visit-card-title{font-family:var(--font-display); font-weight:500; font-size:20px; margin:0 0 18px; color:var(--bone);}
  .visit-facts{display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin:0;}
  .visit-facts .fact--wide{grid-column:1 / -1;}
  .visit-facts dt{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--brass-soft); margin:0 0 5px;}
  .visit-facts dd{margin:0; font-size:15px; line-height:1.55; color:var(--bone);}
  .visit-facts dd a{color:inherit; text-decoration:underline; text-decoration-color:rgba(242,234,217,.45); text-underline-offset:3px;}
  .fact-note{display:block; font-size:13px; line-height:1.5; color:rgba(242,234,217,.72); margin-top:3px;}
  .visit-facts--light{margin-top:24px; grid-template-columns:1fr;}
  .visit-facts--light dt{color:var(--chilli);}
  .visit-facts--light dd{color:var(--ink);}
  .visit-ctas{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
  .visit-map{display:flex; flex-direction:column; gap:16px; min-width:0;}
  .visit-map .frame.map-frame{flex:1 1 auto; min-height:300px; border-radius:3px; aspect-ratio:auto;}
  .visit-johor .visit-map .frame.map-frame{flex:none; aspect-ratio:16/10; min-height:0;}
  .visit-map .map-fallback{background:radial-gradient(120% 90% at 80% 0%, rgba(107,199,153,.14), transparent 60%), linear-gradient(160deg, var(--soy) 0%, var(--soy-2) 100%);}
  @media (max-width:900px){
    .visit-row{grid-template-columns:1fr;}
    .visit-map .frame.map-frame{flex:none; aspect-ratio:16/10; min-height:0;}
  }
  @media (max-width:560px){ .visit-facts{grid-template-columns:1fr; gap:16px;} .visit-facts dd{font-size:14.5px;} .visit-copy{font-size:15px;} }
  @media (prefers-reduced-motion: reduce){ .visit-photo img{transition:none;} .visit-photo:hover img{transform:none;} }
  /* footer bottom line: shared across all pages (copyright + Launch48+ credit) */
  .footer-bottom{align-items:center; gap:12px 24px; font-size:11.5px; color:rgba(242,234,217,.62);}
  .footer-credit{display:inline-flex; align-items:center; gap:10px; opacity:.75;}
  .footer-credit img{height:15px; width:auto; display:block;}

  /* ---------- Simplified Chinese (简中) typography, 20 Oct 2026 ----------
     Chinese has no true italic, so no synthetic slant; Latin-style wide tracking is
     tightened; slightly taller line height for dense characters; lines break at
     natural points and headings are not held to Latin character widths. */
  html:lang(zh) body *{font-style:normal !important;}
  html:lang(zh) .eyebrow, html:lang(zh) .btn, html:lang(zh) .primary-nav a, html:lang(zh) .filter-chip,
  html:lang(zh) dt, html:lang(zh) .map-nav-label, html:lang(zh) .loc-meta strong, html:lang(zh) .dream-cite,
  html:lang(zh) .visit-map .map-open, html:lang(zh) h6{letter-spacing:.08em;}
  html:lang(zh) .mobile-drawer a{letter-spacing:.02em;}  /* large display links: wide tracking spread out the Latin name */
  html:lang(zh) p, html:lang(zh) dd, html:lang(zh) li{line-height:1.85; line-break:strict;}
  html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3{letter-spacing:.01em; line-break:strict; word-break:normal;}
  html:lang(zh) h1, html:lang(zh) h2, html:lang(zh) h3, html:lang(zh) blockquote p, html:lang(zh) .lede{text-wrap:balance;}
  html:lang(zh) .heart-quote p, html:lang(zh) .dream-quote blockquote p, html:lang(zh) .menu-title{line-height:1.38 !important;}
  html:lang(zh) .chapter-title, html:lang(zh) h1.chapter-title, html:lang(zh) h2.chapter-title{max-width:22em;}
  .zh.en-alt{white-space:normal !important; font-family:var(--font-sans) !important; font-size:12px !important; font-weight:400 !important; letter-spacing:.01em !important; color:var(--soy); opacity:.82;}
  .menu-section-title .zh.en-alt, .menu-subsection-title .zh.en-alt{font-size:.5em !important; letter-spacing:.06em !important;}
  .lang-switch a[lang="zh-Hans"]{font-family:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif; letter-spacing:.02em;}

  /* ---------- Touch targets (20 Oct 2026): larger hit areas for small links and
     controls, without changing how they look (WCAG 2.2 target size). ---------- */
  .lang-switch a, .serve-dot, .footer-nav a, .footer-cols a, .footer-contact a, a.map-open, a[href^="tel:"]{position:relative;}
  .lang-switch a::after{content:""; position:absolute; inset:-10px 0;}
  .serve-dot::after{content:""; position:absolute; inset:-14px -4px;}
  .footer-nav a::after, .footer-cols a::after, .footer-contact a::after, a.map-open::after, a[href^="tel:"]::after{content:""; position:absolute; inset:-4px 0;}