/* Mac and Cheese Si Mbok: shared design tokens and components */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#1D1410}

.sm{
  --cream:#FFF8EE;--white:#FFFFFF;--ink:#1D1410;--muted:#6E5E52;
  --orange:#F26A1B;--orange-deep:#D9540C;--orange-text:#A9410A;
  --cheese:#FFB627;--peach:#FDE7CC;--line:#F0DFC9;--leaf:#3E8E4F;--map:#EDE3D6;
  --r-sm:12px;--r-md:20px;--r-lg:28px;--r-xl:36px;--r-pill:999px;
  --shadow-card:0 1px 2px rgba(29,20,16,.04),0 8px 24px rgba(29,20,16,.06);
  --shadow-lift:0 2px 4px rgba(29,20,16,.06),0 18px 40px rgba(217,84,12,.16);
  --gutter:80px;
  container-type:inline-size;container-name:page;
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
.sm a{color:inherit;text-decoration:none}
.sm h1,.sm h2,.sm h3,.sm h4,.sm p,.sm ul,.sm figure,.sm blockquote{margin:0}
.sm ul{padding:0;list-style:none}
.sm svg{display:block}
.sm :focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sm .is-focus{outline:3px solid var(--ink);outline-offset:3px}

/* Layout */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding-inline:var(--gutter)}
.section{padding-block:96px}
.stack{display:flex;flex-direction:column}

/* Type */
.label{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-text)}
.h1{font-size:64px;line-height:68px;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.h2{font-size:40px;line-height:46px;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
.h3{font-size:24px;line-height:32px;font-weight:700}
.body-lg{font-size:18px;line-height:28px;color:var(--muted);text-wrap:pretty}
.body{font-size:16px;line-height:26px;color:var(--muted);text-wrap:pretty}
.body-sm{font-size:15px;line-height:22px;color:var(--muted)}
.accent{color:var(--orange-deep)}

/* Brand */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-mark{width:40px;height:40px;flex:none}
.brand-text{display:flex;flex-direction:column;gap:3px}
.brand-kicker{font-size:10px;line-height:10px;font-weight:700;letter-spacing:.2em;color:var(--ink)}
.brand-name{font-family:'Bricolage Grotesque','Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;font-weight:800;font-size:22px;line-height:22px;color:var(--orange-deep);letter-spacing:-.01em}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--r-pill);border:2px solid transparent;font:700 16px/1 'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:var(--orange);color:var(--ink);box-shadow:0 6px 16px rgba(242,106,27,.28)}
.btn-primary:hover,.btn-primary.is-hover{background:#FF7A2E;transform:translateY(-2px);box-shadow:0 12px 24px rgba(242,106,27,.36)}
.btn-outline{background:transparent;color:var(--orange-text);border-color:var(--orange-deep)}
.btn-outline:hover,.btn-outline.is-hover{background:var(--peach);transform:translateY(-2px)}
.btn-light{background:var(--white);color:var(--ink);box-shadow:0 8px 20px rgba(29,20,16,.14)}
.btn-light:hover,.btn-light.is-hover{background:var(--cream);transform:translateY(-2px);box-shadow:0 14px 28px rgba(29,20,16,.18)}
.btn:active{transform:translateY(0)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px;gap:8px}
.btn-sm svg{width:18px;height:18px}
.btn[disabled],.btn.is-disabled{background:#EFE6DA;color:var(--muted);border-color:transparent;box-shadow:none;cursor:not-allowed;transform:none}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--peach);color:var(--orange-text);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.badge svg{width:14px;height:14px}
.badge-white{background:var(--white);color:var(--orange-text);box-shadow:0 2px 8px rgba(29,20,16,.10)}
.badge-ink{background:var(--ink);color:var(--cheese)}
.badge-soldout{background:var(--ink);color:var(--white)}
.badge-note{height:22px;padding:0 8px;font-size:11px;letter-spacing:.06em;text-transform:none;background:transparent;border:1px dashed #BFA990;color:var(--muted)}

/* Cards */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.lift{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.lift:hover,.lift.is-hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:#F5C9A3}
.lift:focus-within{border-color:var(--orange-deep)}

/* Photo placeholders: swap the inner svg for <img> (object-fit:cover) without touching layout */
.ph{position:relative;overflow:hidden;border-radius:var(--r-md);display:grid;place-items:center;background:linear-gradient(135deg,#FFB627,#F26A1B);isolation:isolate}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 26% 20%,rgba(255,255,255,.42),transparent 58%);z-index:0;pointer-events:none}
.ph>svg{position:relative;z-index:1;width:28%;max-width:88px;min-width:32px;height:auto;color:rgba(29,20,16,.7)}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph-1{background:linear-gradient(135deg,#FFB627 0%,#F26A1B 100%)}
.ph-2{background:linear-gradient(160deg,#FFC94D 0%,#F5832A 100%)}
.ph-3{background:linear-gradient(120deg,#FDE7CC 0%,#FFB627 45%,#F26A1B 100%)}
.ph-4{background:linear-gradient(200deg,#FFB627 0%,#F7913A 100%)}
.ph-5{background:linear-gradient(45deg,#F26A1B 0%,#FFB627 100%)}
.ph-6{background:linear-gradient(180deg,#FFD27A 0%,#F26A1B 100%)}
.ph-7{background:linear-gradient(135deg,#FFE0AD 0%,#FF9E33 60%,#F26A1B 100%)}
.ph-soft{background:linear-gradient(140deg,#FFF1D6 0%,#FFB627 100%)}
.ph-tag{position:absolute;left:12px;top:12px;z-index:2;background:rgba(255,255,255,.92);color:var(--ink);font-size:11px;line-height:14px;font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:var(--r-pill)}
.r-1x1{aspect-ratio:1/1}.r-4x3{aspect-ratio:4/3}.r-4x5{aspect-ratio:4/5}.r-3x2{aspect-ratio:3/2}

/* Navigation */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,248,238,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-pill);font-size:15px;font-weight:600;transition:background-color .15s ease,color .15s ease}
.nav-links a:hover{background:var(--peach);color:var(--orange-text)}
.nav-end{display:flex;align-items:center;gap:12px}
.nav-toggle{display:none;width:48px;height:48px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--white);color:var(--ink);align-items:center;justify-content:center;cursor:pointer;padding:0}
.nav-toggle svg{width:22px;height:22px}
.nav-panel{display:none}

/* Hero */
.hero{background:linear-gradient(100deg,#FFF8EE 0%,#FFF8EE 32%,#FFE0AD 60%,#FF9E33 100%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:48px;padding-block:72px 96px}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.hero-copy .body-lg{max-width:520px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.proof{display:flex;align-items:center;gap:14px;padding-top:8px}
.avatars{display:flex}
.avatar{width:40px;height:40px;border-radius:50%;border:3px solid var(--cream);margin-left:-12px;flex:none}
.avatar:first-child{margin-left:0}
.av-1{background:linear-gradient(135deg,#FFD27A,#F26A1B)}
.av-2{background:linear-gradient(135deg,#FDE7CC,#FF9E33)}
.av-3{background:linear-gradient(135deg,#FFB627,#D9540C)}
.av-4{background:linear-gradient(135deg,#F7C59F,#E8590F)}
.proof-text{font-size:15px;line-height:21px;color:var(--muted)}
.proof-text strong{color:var(--ink)}
.hero-art{position:relative;width:100%;max-width:580px;justify-self:end}
.hero-art>svg{width:100%;height:auto}
.float-card{position:absolute;left:-8px;bottom:28px;width:260px;display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--r-md);background:var(--white);border:1px solid var(--line);box-shadow:0 18px 40px rgba(29,20,16,.12)}
.icon-tile{width:44px;height:44px;border-radius:14px;background:var(--peach);color:var(--orange-text);display:grid;place-items:center;flex:none}
.icon-tile svg{width:24px;height:24px}
.float-card h3{font-size:16px;line-height:22px;font-weight:700}
.float-card p{font-size:14px;line-height:20px;color:var(--muted);margin-top:2px}

/* Categories */
.cat-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:56px;align-items:center}
.cat-intro{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.cat-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.cat-card{display:flex;flex-direction:column;gap:14px;padding:10px 10px 16px}
.cat-name{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-inline:6px;font-size:16px;line-height:22px;font-weight:700}
.chip-arrow{width:30px;height:30px;border-radius:50%;background:var(--peach);color:var(--orange-text);display:grid;place-items:center;flex:none;transition:background-color .2s ease,color .2s ease}
.chip-arrow svg{width:16px;height:16px}
.cat-card:hover .chip-arrow,.cat-card.is-hover .chip-arrow{background:var(--orange);color:var(--ink)}

/* Section heading */
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:640px;margin:0 auto 48px}

/* Menu cards */
.menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.menu-card{display:flex;flex-direction:column;padding:12px}
.menu-media{position:relative}
.menu-badges{position:absolute;top:10px;left:10px;z-index:3;display:flex;flex-wrap:wrap;gap:6px}
.menu-body{display:flex;flex-direction:column;gap:6px;padding:16px 8px 6px;flex:1}
.menu-name{font-size:18px;line-height:24px;font-weight:700}
.menu-desc{font-size:15px;line-height:22px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px}
.price{font-size:18px;line-height:24px;font-weight:800;color:var(--orange-text)}
.chili{color:#C8361A}
.menu-card.is-soldout .ph{filter:grayscale(.9);opacity:.6}
.menu-card.is-soldout .price{color:var(--muted)}
.center-row{display:flex;justify-content:center;margin-top:40px}

/* Promo banner */
.promo{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:48px;padding:56px 64px;border-radius:var(--r-xl);background:linear-gradient(105deg,#F26A1B 0%,#FF8A2A 55%,#FFB627 100%);color:var(--ink);overflow:hidden;isolation:isolate}
.promo::before{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-200px;border-radius:50%;background:rgba(255,255,255,.14);z-index:-1}
.promo::after{content:"";position:absolute;width:260px;height:260px;left:-80px;bottom:-140px;border-radius:50%;background:rgba(255,255,255,.10);z-index:-1}
.promo-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.promo-title{font-size:52px;line-height:56px;font-weight:800;letter-spacing:-.02em}
.promo-copy p{font-size:18px;line-height:28px;max-width:440px}
.promo-art{position:relative}
.promo-art .ph{border-radius:var(--r-lg);box-shadow:0 24px 48px rgba(29,20,16,.18)}
.seal{position:absolute;top:-22px;right:-14px;z-index:4;width:112px;height:112px;border-radius:50%;background:var(--ink);color:var(--cheese);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;transform:rotate(-12deg);box-shadow:0 0 0 6px rgba(29,20,16,.12)}
.seal strong{font-size:15px;line-height:16px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.seal span{font-size:11px;line-height:13px;font-weight:600;color:#F3E6D6}

/* Story + testimonial */
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr);gap:32px;align-items:center}
.story-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;color:var(--orange-text);border-bottom:2px solid transparent;transition:border-color .15s ease}
.text-link:hover{border-color:var(--orange-text)}
.text-link svg{width:18px;height:18px}
.story-photo .ph{border-radius:var(--r-lg)}
.testi{display:flex;flex-direction:column;gap:18px;padding:14px 14px 26px}
.testi-body{display:flex;flex-direction:column;gap:16px;padding-inline:10px}
.stars{display:flex;gap:4px;color:var(--orange-deep)}
.stars svg{width:20px;height:20px}
.quote{font-size:18px;line-height:28px;font-weight:500;color:var(--ink);text-wrap:pretty}
.person{display:flex;align-items:center;gap:12px}
.person .avatar{width:44px;height:44px;margin:0;border:0}
.person-name{font-size:15px;line-height:20px;font-weight:700}
.person-city{font-size:14px;line-height:20px;color:var(--muted)}

/* Gallery */
.gal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:36px}
.gal-title{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.gal-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:16px}
.gal-item{display:block;border-radius:var(--r-md);transition:transform .2s ease}
.gal-item:hover{transform:translateY(-4px) rotate(-1deg)}

/* Location */
.loc-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:stretch}
.branch-list{display:flex;flex-direction:column;gap:16px}
.branch{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px 24px}
.branch .icon-tile{width:48px;height:48px}
.branch-body{display:flex;flex-direction:column;gap:6px}
.branch-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.branch h3{font-size:18px;line-height:24px;font-weight:700}
.hours{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.hours svg{width:16px;height:16px;color:var(--leaf)}
.branch .text-link{font-size:14px;min-height:36px;align-self:flex-start}
.map{position:relative;min-height:520px;border-radius:var(--r-lg);background:var(--map);border:1px solid var(--line);overflow:hidden}
.map>svg{position:absolute;inset:0;width:100%;height:100%}
.pin{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translate(-50%,-100%)}
.pin svg{width:36px;height:44px;filter:drop-shadow(0 6px 8px rgba(29,20,16,.25))}
.pin span{order:-1;background:var(--white);color:var(--ink);font-size:12px;line-height:16px;font-weight:700;padding:5px 10px;border-radius:var(--r-pill);box-shadow:0 4px 12px rgba(29,20,16,.12);white-space:nowrap}

/* WhatsApp CTA */
.cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:56px 64px;border-radius:var(--r-xl);background:linear-gradient(105deg,#F26A1B 0%,#FF9E33 100%);overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;width:360px;height:360px;right:18%;top:-220px;border-radius:50%;background:rgba(255,255,255,.14);z-index:-1}
.cta-copy{display:flex;flex-direction:column;gap:12px}
.cta-copy p{font-size:18px;line-height:28px;color:var(--ink);max-width:480px}
.cta-actions{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.cta-number{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700}
.cta .badge-note{color:var(--ink);border-color:rgba(29,20,16,.45)}

/* Footer */
.footer{background:var(--ink);color:#F3E6D6;padding-block:72px 32px}
.footer .brand-kicker{color:#F3E6D6}
.footer .brand-name{color:var(--cheese)}
.footer :focus-visible{outline-color:var(--cheese)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:40px}
.foot-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.foot-brand p{font-size:16px;line-height:24px;color:#D9C8B8}
.socials{display:flex;gap:10px}
.social{width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,230,214,.22);display:grid;place-items:center;color:#F3E6D6;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.social svg{width:20px;height:20px}
.social:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.foot-col h3{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cheese);margin-bottom:16px}
.foot-col ul{display:flex;flex-direction:column;gap:4px}
.foot-col a{display:inline-flex;align-items:center;min-height:36px;font-size:15px;color:#E8D9C8}
.foot-col a:hover{color:var(--cheese)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid rgba(243,230,214,.14);font-size:13px;line-height:20px;color:#BFAE9E}

/* Mobile order bar */
.order-bar{display:none}

/* ---------- Tablet: 640 to 1023 ---------- */
@container page (max-width:1023px){
  .sm,.wrap{--gutter:32px}
  .section{padding-block:72px}
  .h1{font-size:52px;line-height:56px}
  .h2{font-size:36px;line-height:42px}
  .nav-inner{height:72px}
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav-panel{display:flex;flex-direction:column;padding-bottom:16px}
  .nav-panel a{display:flex;align-items:center;min-height:52px;padding:0 4px;font-size:17px;font-weight:700;border-top:1px solid var(--line)}
  .hero{background:linear-gradient(180deg,#FFF8EE 0%,#FFF8EE 40%,#FFE0AD 68%,#FF9E33 100%)}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:56px 72px}
  .hero-art{justify-self:center;max-width:480px}
  .cat-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .cat-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 12px;scrollbar-width:none}
  .cat-list::-webkit-scrollbar{display:none}
  .cat-card{flex:0 0 200px;scroll-snap-align:start}
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo{grid-template-columns:minmax(0,1fr);padding:48px 40px;gap:40px}
  .promo-title{font-size:44px;line-height:48px}
  .promo-art{max-width:520px}
  .story-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .story-copy{grid-column:1 / -1;max-width:600px}
  .gal-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 12px;scrollbar-width:none}
  .gal-grid::-webkit-scrollbar{display:none}
  .gal-item{flex:0 0 180px;scroll-snap-align:start}
  .loc-grid{grid-template-columns:minmax(0,1fr)}
  .map{min-height:0;aspect-ratio:16/10;order:-1}
  .cta{flex-direction:column;align-items:flex-start;padding:48px 40px}
  .cta-actions{align-items:flex-start}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1 / -1}
}

/* ---------- Phone: up to 639 ---------- */
@container page (max-width:639px){
  .sm,.wrap{--gutter:16px}
  .section{padding-block:56px}
  .h1{font-size:40px;line-height:44px}
  .h2{font-size:30px;line-height:36px}
  .h3{font-size:20px;line-height:28px}
  .body-lg{font-size:16px;line-height:26px}
  .nav-inner{height:64px}
  .nav-cta{display:none}
  .hero-grid{padding-block:40px 56px}
  .actions{width:100%}
  .actions .btn{flex:1 1 150px}
  .float-card{position:relative;left:auto;bottom:auto;width:auto;margin:-36px 12px 0}
  .cat-card{flex-basis:156px}
  .menu-grid{gap:12px}
  .menu-card{padding:8px;border-radius:var(--r-md)}
  .menu-card .ph{border-radius:14px}
  .menu-body{padding:12px 4px 4px;gap:4px}
  .menu-name{font-size:16px;line-height:22px}
  .menu-desc{font-size:14px;line-height:20px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .menu-foot{flex-direction:column;align-items:stretch;gap:10px}
  .menu-foot .btn{width:100%}
  .menu-badges{top:6px;left:6px}
  .menu-badges .badge{height:24px;padding:0 8px;font-size:10px}
  .sec-head{margin-bottom:32px}
  .promo{padding:36px 20px 28px;border-radius:var(--r-lg);gap:36px}
  .promo-title{font-size:36px;line-height:40px}
  .promo-copy p{font-size:16px;line-height:26px}
  .seal{width:88px;height:88px;top:-18px;right:-6px}
  .seal strong{font-size:12px}
  .seal span{font-size:10px}
  .story-grid{grid-template-columns:minmax(0,1fr)}
  .gal-item{flex-basis:140px}
  .branch{padding:18px;grid-template-columns:40px minmax(0,1fr);gap:14px}
  .branch .icon-tile{width:40px;height:40px}
  .cta{padding:36px 20px;border-radius:var(--r-lg)}
  .cta .btn{width:100%}
  .cta-actions{width:100%}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .order-bar{display:flex;position:sticky;bottom:0;z-index:60;align-items:center;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,248,238,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(29,20,16,.08)}
  .order-bar .btn{flex:1}
  .order-bar-text{font-size:13px;line-height:18px;color:var(--muted)}
  .order-bar-text strong{display:block;font-size:15px;color:var(--ink)}
}

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