:root{--logo:url("assets/logo-shawarmama.webp")}
/* ============================================================
   Shawar'Mama — design system
   Brand: navy #172C62 · yellow #FEB900 · white
   Type : League Spartan (brand spec), single family, 3 roles
   ============================================================ */

:root{
  color-scheme: only light;
  --navy:#172C62;
  --deep:#0C1733;
  --yellow:#FEB900;
  --yellow-hi:#FFD05C;
  --white:#FFFFFF;
  --paper:#EFF2F8;
  --line:#D7DDEA;
  --ember:#C6401D;
  --ink:#0C1733;
  --muted:#5A688C;
  --bg:#FFFFFF;

  --rail:clamp(14px,4vw,40px);
  --wrap:1240px;
  --nav-h:74px;
  --catnav-h:0px;
  --r:4px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
/* brand palette is fixed: dark-mode viewers get the same brand colours,
   restated explicitly so nothing is inherited from the host surface */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#FFFFFF; --ink:#0C1733; --paper:#EFF2F8; --line:#D7DDEA; --muted:#5A688C;
  }
}
:root[data-theme="dark"]{
  --bg:#FFFFFF; --ink:#0C1733; --paper:#EFF2F8; --line:#D7DDEA; --muted:#5A688C;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav-h);
  width:100%;max-width:100%;overflow-x:hidden
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"League Spartan",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(15px,.55vw + 13.6px,17px);line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  width:100%;max-width:100%;position:relative
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
a,button{-webkit-tap-highlight-color:transparent}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

::selection{background:var(--yellow);color:var(--navy)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:2px}

.wrap{
  width:min(var(--wrap),100%);max-width:100%;
  padding-inline:var(--rail);margin-inline:auto
}
main,.page,.nav,.foot,.banner,.sec,.menupg,.plat,#cats{min-width:0;max-width:100%}
.narrow{max-width:66ch}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── type roles ───────────────────────────────────────────── */
.d1,.d2,.d3{font-weight:900;letter-spacing:-.035em;line-height:.92;text-transform:uppercase}
.d1{font-size:clamp(2.55rem,6vw,4.9rem)}
.d2{font-size:clamp(2.1rem,5vw,3.9rem)}
.d3{font-size:clamp(1.45rem,2.6vw,2.15rem);letter-spacing:-.025em;line-height:1}
.lede{font-size:clamp(1.05rem,1.35vw,1.28rem);line-height:1.55;color:var(--muted);font-weight:400}
.kick{font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.kick--navy{color:var(--navy)}
p + p{margin-top:1em}

/* slab: the logo-echo device — a skewed yellow block behind a line of display type */
.slab{display:inline-block;background:var(--yellow);color:var(--navy);white-space:nowrap;
  padding:.05em .26em .12em;transform:skewX(-6deg);box-shadow:5px 5px 0 rgba(8,18,43,.55)}
.slab > span{display:inline-block;transform:skewX(6deg)}

/* ── buttons ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.6em;border:0;cursor:pointer;
  padding:.92em 1.5em;border-radius:999px;font-weight:800;font-size:.95rem;
  letter-spacing:.01em;text-decoration:none;transition:transform .22s var(--ease),background .22s,color .22s,box-shadow .22s}
.btn--y{background:var(--yellow);color:var(--navy);box-shadow:0 0 0 0 rgba(254,185,0,.5)}
.btn--y:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(23,44,98,.7)}
.btn--n{background:var(--navy);color:#fff}
.btn--n:hover{transform:translateY(-2px);background:#0F1F49}
.btn--ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}
.btn--ghost:hover{background:var(--yellow);color:var(--navy);box-shadow:inset 0 0 0 2px var(--yellow)}
.btn--ghost:hover span{color:var(--navy)}
.btn--sm{padding:.66em 1.1em;font-size:.86rem}

/* ── header ───────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:70;background:var(--navy);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.12);width:100%}
.nav__in{display:flex;align-items:center;gap:clamp(10px,2vw,28px);height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:0 0 auto}
.mark{width:58px;aspect-ratio:300/361;background:var(--logo) center/contain no-repeat;flex:0 0 auto}
.brand b{font-weight:900;letter-spacing:-.02em;font-size:1.06rem;text-transform:uppercase;line-height:1}
.brand small{display:block;font-size:.55rem;letter-spacing:.18em;color:var(--yellow);font-weight:700}
.menu{display:flex;gap:clamp(4px,1.4vw,22px);margin-left:auto;align-items:center}
.menu a{position:relative;text-decoration:none;font-weight:700;font-size:.92rem;padding:.5rem .2rem;white-space:nowrap;opacity:.82}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:.12rem;height:2px;background:var(--yellow);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.menu a:hover{opacity:1}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1)}
.menu a[aria-current="page"]{opacity:1;color:var(--yellow)}
.navtools{display:flex;align-items:center;gap:10px;margin-left:clamp(6px,1.5vw,18px)}
.lang{display:flex;border:1.5px solid rgba(255,255,255,.3);border-radius:999px;overflow:hidden}
.lang button{background:none;border:0;padding:.34rem .6rem;font-size:.76rem;font-weight:800;color:#fff;opacity:.6;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--yellow);color:var(--navy);opacity:1}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.burger i{position:absolute;left:11px;right:11px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:28px}
body.mopen .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.mopen .burger i:nth-child(2){opacity:0}
body.mopen .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1040px){
  .burger{display:block;margin-left:auto;order:3}
  .navtools{order:2;margin-left:auto}
  .menu{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;width:100%;background:var(--navy);flex-direction:column;
    align-items:flex-start;gap:0;padding:8px var(--rail) calc(28px + env(safe-area-inset-bottom,0px));margin:0;z-index:2;
    transform:translateY(-120%);transition:transform .45s var(--ease-out);border-bottom:4px solid var(--yellow)}
  body.mopen .menu{transform:translateY(0)}
  body.mopen .obar,body.mopen #top{visibility:hidden;pointer-events:none}
  .menu a{width:100%;font-size:1.3rem;font-weight:800;padding:.72rem 0;border-bottom:1px solid rgba(255,255,255,.1);opacity:1}
  .menu a::after{display:none}
  .nav__cta{display:none}
}

/* ── page machinery ───────────────────────────────────────── */
.page{display:none}
.page.on{display:block}
html:not(.js) .page{display:block}
html:not(.js) .nojs{display:block}
html:not(.js) #curtain,html:not(.js) #wipe,html:not(.js) #drawer,html:not(.js) #scrim{display:none}
.nojs{display:none;background:var(--yellow);color:var(--navy);padding:.8rem var(--rail);font-weight:700;text-align:center}

#wipe{position:fixed;inset:0;z-index:95;pointer-events:none;display:flex}
#wipe span{flex:1;background:var(--navy);transform:scaleY(0);transform-origin:top}
#wipe.go span{animation:wipeIn .74s var(--ease-out) forwards}
#wipe.go span:nth-child(2){animation-delay:.05s}
#wipe.go span:nth-child(3){animation-delay:.1s}
#wipe.go span:nth-child(4){animation-delay:.15s}
@keyframes wipeIn{0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}}
#wipe .flame{position:absolute;inset:0;margin:auto;width:92px;height:110px;background:var(--logo) center/contain no-repeat;opacity:0}
#wipe.go .flame{animation:flamePop .74s var(--ease-out)}
@keyframes flamePop{0%,15%{opacity:0;transform:scale(.7)}45%{opacity:1;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.06)}}

/* curtain (first load only) */
#curtain{position:fixed;inset:0;z-index:100;background:var(--navy);display:grid;place-items:center;gap:18px}
#curtain .flame{width:120px;height:144px;background:var(--logo) center/contain no-repeat;animation:breathe 1.6s var(--ease) infinite}
#curtain .bar{width:130px;height:3px;background:rgba(255,255,255,.18);overflow:hidden;border-radius:2px}
#curtain .bar::after{content:"";display:block;height:100%;width:40%;background:var(--yellow);animation:load 1.15s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes load{0%{transform:translateX(-110%)}100%{transform:translateX(330%)}}
body.ready #curtain{opacity:0;visibility:hidden;transition:opacity .6s var(--ease) .1s,visibility 0s .7s}
body.mopen,body.dopen{overflow:hidden}

/* reveal */
.r{opacity:0;transform:translateY(20px)}
.r.in{opacity:1;transform:none;transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.r.in.d1x{transition-delay:.08s}.r.in.d2x{transition-delay:.16s}.r.in.d3x{transition-delay:.24s}

/* ── sections ─────────────────────────────────────────────── */
.sec{padding:clamp(66px,9vw,132px) 0}
.sec--tight{padding:clamp(46px,6vw,84px) 0}
.sec--paper{background:var(--paper)}
.sec--navy{background:var(--navy);color:#fff}
.sec--deep{background:var(--deep);color:#fff}
.sec--navy .lede,.sec--deep .lede{color:rgba(255,255,255,.72)}
.head{display:grid;gap:1rem;margin-bottom:clamp(30px,4vw,54px)}
.head .kick{margin-bottom:-.35rem}

/* ── hero (home) ──────────────────────────────────────────── */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;
  min-height:clamp(540px,78vh,790px);display:flex;align-items:center}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:120px;
  background:linear-gradient(transparent,rgba(12,23,51,.85))}
#ring{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(96deg,var(--navy) 0 30%,rgba(23,44,98,.92) 44%,rgba(23,44,98,.25) 66%,rgba(23,44,98,.6) 100%)}
.hero__in{position:relative;z-index:3;padding:clamp(74px,10vh,112px) 0 clamp(44px,6vh,76px)}
.hero__copy{max-width:min(620px,56%)}
.hero h1{margin:.4rem 0 1.1rem}
.hero h1 .l{display:block;overflow:hidden;padding:0 14px 14px;margin:0 -14px -14px}
.hero h1 .l > span{display:inline-block;transform:translateY(105%);animation:riseIn .9s var(--ease-out) forwards}
.hero h1 .l:nth-child(2) > span{animation-delay:.1s}
.hero h1 .l:nth-child(3) > span{animation-delay:.2s}
@keyframes riseIn{to{transform:none}}
.hero .lede{color:rgba(255,255,255,.8);max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8rem}
.stats{display:flex;gap:clamp(18px,4vw,52px);margin-top:clamp(20px,3.4vh,38px);flex-wrap:wrap}
.stats div{display:flex;flex-direction:column}
.stats b{font-size:clamp(1.6rem,3vw,2.5rem);font-weight:900;line-height:1;color:var(--yellow);letter-spacing:-.03em}
.stats small{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:.4rem;font-weight:700}
.hero__still{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.hero__still.is-on{display:block;opacity:.4}
@media (max-width:900px){
  .hero__copy{max-width:100%}
  #ring{display:none}
  .hero__still.is-on{opacity:.48;object-position:center 28%}
  .hero__veil{background:linear-gradient(180deg,rgba(23,44,98,.94) 0 48%,rgba(23,44,98,.7) 100%)}
}
@media (min-width:901px){
  .hero__still.is-on{
    inset:auto 5% auto auto;top:50%;transform:translateY(-50%);
    width:min(34vw,300px);height:auto;object-fit:contain;opacity:.85;border-radius:4px;z-index:1
  }
}

/* ── pillars (hairline columns, no cards) ────────────────── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.pillars > div{padding:clamp(26px,3vw,42px) clamp(18px,2.2vw,34px);border-bottom:1px solid var(--line)}
.pillars > div + div{border-left:1px solid var(--line)}
.pillars h3{font-weight:900;font-size:1.18rem;letter-spacing:-.02em;margin-bottom:.5rem;text-transform:uppercase}
.pillars p{color:var(--muted);font-size:.97rem}
.pillars .n{font-weight:900;color:var(--navy);border-bottom:3px solid var(--yellow);padding-bottom:.5rem;width:fit-content;font-size:.9rem;letter-spacing:.1em;display:block;margin-bottom:.9rem}
@media (max-width:760px){.pillars{grid-template-columns:1fr}.pillars > div + div{border-left:0}}

/* ── tiles (featured menu) ───────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px)}
.tile{position:relative;display:block;text-decoration:none;color:#fff;overflow:hidden;border-radius:var(--r);
  aspect-ratio:3/4;background:var(--deep)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out);opacity:.92}
.tile:hover img{transform:scale(1.06)}
.tile .cap{position:absolute;inset:auto 0 0 0;padding:clamp(14px,1.6vw,22px);
  background:linear-gradient(transparent,rgba(12,23,51,.92) 62%)}
.tile h3{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1rem,1.3vw,1.28rem)}
.tile p{font-size:.85rem;color:rgba(255,255,255,.76);margin-top:.25rem}
.tile .go{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:var(--yellow);
  color:var(--navy);display:grid;place-items:center;font-weight:900;transform:scale(.6);opacity:0;transition:.3s var(--ease)}
.tile:hover .go{transform:scale(1);opacity:1}
@media (hover:none){.tile .go{transform:scale(1);opacity:1}}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.tiles{grid-template-columns:1fr;max-width:320px;margin-inline:auto}}

/* ── feature (image + copy) ──────────────────────────────── */
.feat{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(24px,5vw,80px)}
.feat--flip .feat__txt{order:-1}
.feat__img{position:relative;border-radius:var(--r);overflow:hidden}
.feat__img img{width:100%;aspect-ratio:4/3.1;object-fit:cover}
.feat__img::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(12,23,51,.12)}
.feat__txt h2{margin-bottom:1rem}
.feat__txt .btn{margin-top:1.6rem}
.badge{position:absolute;left:-1px;top:22px;background:var(--yellow);color:var(--navy);
  font-weight:900;font-size:.78rem;letter-spacing:.1em;padding:.5em 1em;text-transform:uppercase}
@media (max-width:860px){.feat{grid-template-columns:1fr}.feat--flip .feat__txt{order:0}}

/* ── branch rows ─────────────────────────────────────────── */
.branches{border-top:1px solid rgba(255,255,255,.16)}
.branch{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(12px,3vw,34px);
  padding:clamp(20px,2.6vw,34px) 0;border-bottom:1px solid rgba(255,255,255,.16)}
.branch .city{font-weight:900;font-size:.8rem;letter-spacing:.14em;color:var(--yellow);text-transform:uppercase;min-width:104px}
.branch h3{font-weight:900;font-size:clamp(1.15rem,2vw,1.7rem);letter-spacing:-.02em;text-transform:uppercase}
.branch address{font-style:normal;color:rgba(255,255,255,.66);font-size:.92rem;margin-top:.2rem}
.branch a.tel{font-weight:800;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.branch a.tel:hover{color:var(--yellow)}
@media (max-width:820px){
  .branch{grid-template-columns:1fr;gap:.5rem;align-items:start}
  .branch .btn{justify-self:start;margin-top:.5rem}
  .branch a.tel{white-space:normal}
}

/* ── marquee strip ───────────────────────────────────────── */
.strip{overflow:hidden;background:var(--deep);padding:clamp(12px,1.6vw,22px) 0}
.strip__t{display:flex;gap:clamp(10px,1.2vw,18px);width:max-content;animation:slide 52s linear infinite}
.strip figure{width:clamp(170px,20vw,286px);aspect-ratio:1/1.24;border-radius:var(--r);overflow:hidden;flex:0 0 auto}
.strip img{width:100%;height:100%;object-fit:cover}
@keyframes slide{to{transform:translateX(-50%)}}
.strip:hover .strip__t{animation-play-state:paused}

/* ── page banner (interior pages) ────────────────────────── */
.banner{background:var(--navy);color:#fff;position:relative;overflow:hidden;width:100%;
  padding:clamp(54px,8vw,104px) 0 clamp(40px,6vw,74px)}
.banner::before{content:"";position:absolute;right:-6%;top:-40%;width:46vw;height:180%;
  background:var(--logo) center/contain no-repeat;opacity:.05;transform:rotate(-8deg)}
.banner .wrap{position:relative}
.crumb{display:flex;gap:.5rem;align-items:center;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.55);margin-bottom:1.1rem}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--yellow)}
.banner h1{margin-bottom:1rem}
.banner .lede{max-width:54ch}

/* ── menu page ───────────────────────────────────────────── */
.menupg{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.catnav{position:sticky;top:96px}
.catnav ul{border-left:2px solid var(--line)}
.catnav a{display:block;text-decoration:none;padding:.62rem 0 .62rem 1rem;font-weight:800;font-size:.95rem;
  color:var(--muted);margin-left:-2px;border-left:2px solid transparent;transition:.25s var(--ease)}
.catnav a:hover{color:var(--ink)}
.catnav a.on{color:var(--navy);border-left-color:var(--yellow)}
.catnav .note{margin-top:1.4rem;padding:1rem;background:var(--paper);border-radius:var(--r);font-size:.85rem;color:var(--muted)}
.cat{scroll-margin-top:calc(var(--nav-h) + var(--catnav-h) + 8px);padding-bottom:clamp(40px,6vw,76px)}
.cat__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  border-bottom:3px solid var(--navy);padding-bottom:.7rem;margin-bottom:1.6rem}
.cat__hd h2{font-size:clamp(1.5rem,3vw,2.3rem)}
.cat__hd span{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.cat__img{border-radius:var(--r);overflow:hidden;margin-bottom:1.7rem;position:relative}
.cat__img img{width:100%;aspect-ratio:16/7;object-fit:cover;object-position:center 46%}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,56px)}
.item{padding:1.05rem 0;border-bottom:1px solid var(--line);display:flex;gap:1rem;align-items:baseline}
.item__b{flex:1}
.item h3{font-size:1.02rem;font-weight:800;letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.item p{font-size:.92rem;color:var(--muted);margin-top:.18rem}
.tag{font-size:.63rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;padding:.22em .55em;border-radius:2px}
.tag--best{background:var(--yellow);color:var(--navy)}
.tag--hot{background:var(--ember);color:#fff}
.tag--new{background:var(--navy);color:#fff}
.tag--veg{background:#1F7A4D;color:#fff}
@media (max-width:1000px){
  :root{--catnav-h:158px}
  .menupg{grid-template-columns:minmax(0,1fr);gap:1.4rem}
  .catnav{
    position:sticky;top:var(--nav-h);z-index:40;
    background:var(--bg);
    margin-inline:calc(var(--rail) * -1);
    padding:10px var(--rail) 14px;
    border-bottom:1px solid var(--line);
    box-shadow:0 10px 24px -18px rgba(12,23,51,.85)
  }
  .catnav ul{
    display:flex;flex-wrap:wrap;gap:8px;
    overflow:hidden;border:0;max-width:100%
  }
  .catnav a{
    white-space:nowrap;margin:0;border:0;
    min-height:40px;padding:.45rem .85rem;border-radius:999px;
    background:var(--paper);color:var(--navy);font-size:.82rem;font-weight:800;
    display:inline-flex;align-items:center;flex:0 1 auto
  }
  .catnav a:hover{color:var(--navy)}
  .catnav a.on{background:var(--yellow);color:var(--navy);border:0}
  .catnav .note{display:none}
  #p-carte > .sec{padding-top:clamp(28px,5vw,56px)}
}
@media (max-width:680px){
  .items{grid-template-columns:1fr}
  .item{padding:.85rem 0;gap:.75rem}
  .item h3{align-items:flex-start;line-height:1.25}
}

/* ── story page ──────────────────────────────────────────── */
.story__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,72px);align-items:start}
.story__grid img{border-radius:var(--r);width:100%;object-fit:cover;aspect-ratio:4/5}
@media (max-width:820px){.story__grid{grid-template-columns:1fr}}
.steps{counter-reset:s;display:grid;gap:0}
.steps li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,38px);
  padding:clamp(20px,2.6vw,32px) 0;border-bottom:1px solid rgba(255,255,255,.16)}
.steps li:first-child{border-top:1px solid rgba(255,255,255,.16)}
.steps li::before{content:counter(s,decimal-leading-zero);font-weight:900;font-size:clamp(1.3rem,2.4vw,2rem);
  color:var(--yellow);line-height:1;letter-spacing:-.04em}
.steps h3{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:1.15rem;margin-bottom:.35rem}
.steps p{color:rgba(255,255,255,.74);max-width:62ch}
.quote{border-left:4px solid var(--yellow);padding-left:clamp(16px,2.4vw,28px);margin:clamp(30px,5vw,56px) 0}
.quote p{font-size:clamp(1.25rem,2.4vw,1.85rem);font-weight:800;letter-spacing:-.02em;line-height:1.22}
.quote cite{display:block;margin-top:.9rem;font-style:normal;font-size:.86rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--muted)}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px)}
.vm > div{padding:clamp(24px,3vw,38px);background:var(--paper);border-radius:var(--r);border-top:4px solid var(--yellow)}
.vm h3{margin-bottom:.7rem}
@media (max-width:760px){.vm{grid-template-columns:1fr}}

/* ── catering page ───────────────────────────────────────── */
.plat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,5vw,70px);align-items:center}
.plat__img{
  position:relative;width:100%;max-width:22rem;aspect-ratio:1;margin-inline:auto;
  border-radius:50%;overflow:hidden;background:var(--navy);
  clip-path:circle(50%);-webkit-clip-path:circle(50%);
  box-shadow:0 30px 70px -40px rgba(12,23,51,.9)
}
.plat__spin{
  display:block;width:100%;height:100%;
  animation:spin 48s linear infinite;
  transform-origin:50% 50%
}
.page:not(.on) .plat__spin{animation-play-state:paused}
.page.on .plat__spin{animation-play-state:running}
.plat__img img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes spin{
  from{transform:scale(1.45) rotate(0deg)}
  to{transform:scale(1.45) rotate(360deg)}
}
.sizes{display:flex;gap:10px;flex-wrap:wrap;margin:1.4rem 0}
.size{border:2px solid var(--line);background:transparent;border-radius:var(--r);padding:.75rem 1.05rem;
  cursor:pointer;text-align:left;transition:.25s var(--ease);min-width:110px;flex:1 1 140px}
.size b{display:block;font-weight:900;font-size:1.05rem;letter-spacing:-.02em}
.size small{font-size:.76rem;color:var(--muted)}
.size[aria-pressed="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.size[aria-pressed="true"] small{color:rgba(255,255,255,.7)}
.incl{display:grid;gap:.55rem;margin:1.2rem 0 1.6rem}
.incl li{display:flex;gap:.7rem;align-items:flex-start;font-size:.97rem}
.incl li::before{content:"";width:8px;height:8px;background:var(--yellow);margin-top:.55em;flex:0 0 auto;border-radius:1px}
.uses{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.uses article{padding:clamp(20px,2.4vw,30px);background:rgba(255,255,255,.05);border-radius:var(--r);
  border:1px solid rgba(255,255,255,.14)}
.uses h3{font-weight:900;text-transform:uppercase;font-size:1.02rem;margin-bottom:.5rem;letter-spacing:-.01em}
.uses p{font-size:.92rem;color:rgba(255,255,255,.72)}
@media (max-width:900px){
  .plat{grid-template-columns:minmax(0,1fr);gap:1.8rem}
  .plat__img{max-width:18rem;justify-self:center}
  .uses{grid-template-columns:1fr}
}

/* ── locations page ──────────────────────────────────────── */
.loc{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(22px,4vw,56px);align-items:center;
  padding:clamp(34px,5vw,64px) 0;border-bottom:1px solid var(--line)}
.loc:last-of-type{border-bottom:0}
.loc--flip .loc__t{order:-1}
.loc img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r)}
.loc h2{margin-bottom:.3rem}
.loc .city{font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-size:.78rem}
.dl{display:grid;grid-template-columns:120px 1fr;gap:.55rem 1rem;margin:1.3rem 0 1.6rem;font-size:.95rem}
.dl dt{font-weight:800;color:var(--muted);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding-top:.15rem}
.dl dd{margin:0}
.dl a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--yellow)}
.locbtns{display:flex;gap:10px;flex-wrap:wrap}
.locbtns .btn{justify-content:center}
@media (max-width:820px){.loc{grid-template-columns:1fr}.loc--flip .loc__t{order:0}}

/* ── contact page ────────────────────────────────────────── */
.cgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,76px);align-items:start}
.field{display:grid;gap:.4rem;margin-bottom:1.05rem}
.field label{font-weight:800;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;padding:.8rem .9rem;border:1.5px solid var(--line);border-radius:var(--r);
  background:#fff;color:var(--ink);width:100%;transition:border-color .2s}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(254,185,0,.35)}
.field .err{color:var(--ember);font-size:.82rem;font-weight:700;display:none}
.field.bad input,.field.bad textarea{border-color:var(--ember)}
.field.bad .err{display:block}
.formnote{font-size:.85rem;color:var(--muted);margin-top:.9rem}
.cbox{background:var(--paper);border-radius:var(--r);padding:clamp(22px,3vw,34px);margin-bottom:1rem}
.cbox h3{margin-bottom:.6rem}
.cbox a{font-weight:700}
.social{display:flex;gap:10px;flex-wrap:wrap;margin-top:1rem}
.social a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:800;font-size:.9rem;
  background:var(--navy);color:#fff;padding:.6rem 1rem;border-radius:999px}
.social a:hover{background:var(--yellow);color:var(--navy)}
@media (max-width:860px){.cgrid{grid-template-columns:1fr}}

/* ── order drawer ────────────────────────────────────────── */
#scrim{position:fixed;inset:0;background:rgba(12,23,51,.55);backdrop-filter:blur(3px);z-index:80;opacity:0;
  visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
body.dopen #scrim{opacity:1;visibility:visible;transition-delay:0s}
#drawer[hidden]{display:none}
#drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;z-index:81;
  transform:translateX(102%);transition:transform .5s var(--ease-out);display:flex;flex-direction:column;
  box-shadow:-30px 0 60px -30px rgba(12,23,51,.5)}
body.dopen #drawer{transform:none}
#drawer header{background:var(--navy);color:#fff;padding:1.2rem var(--rail);display:flex;justify-content:space-between;align-items:center}
#drawer h2{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:1.25rem}
#drawer .x{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:#fff;padding:.2rem .4rem}
#drawer .body{padding:1.3rem var(--rail);overflow:auto;flex:1}
.pick{display:grid;gap:.6rem;margin-bottom:1.4rem}
.pick button{text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:var(--r);padding:.85rem 1rem;cursor:pointer}
.pick button b{display:block;font-weight:900;letter-spacing:-.01em}
.pick button small{color:var(--muted);font-size:.83rem}
.pick button[aria-pressed="true"]{border-color:var(--navy);box-shadow:0 0 0 3px rgba(254,185,0,.4)}
.acts{display:grid;gap:.6rem}
.acts .btn{justify-content:center;width:100%}
.acts .btn[aria-disabled="true"]{opacity:.42;pointer-events:none}

/* sticky mobile order bar */
.obar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navy);color:#fff;display:none;
  padding:.7rem var(--rail) calc(.7rem + env(safe-area-inset-bottom));gap:10px;align-items:center;
  border-top:2px solid var(--yellow)}
.obar p{font-size:.84rem;font-weight:700;line-height:1.25}
.obar .btn{margin-left:auto;flex:0 0 auto}
@media (max-width:1040px){.obar{display:flex}body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  #top{display:none}}

/* ── footer ──────────────────────────────────────────────── */
.foot{background:var(--deep);color:#fff;padding:clamp(52px,7vw,92px) 0 0;width:100%}
.foot__g{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.2fr;gap:clamp(24px,3vw,48px)}
.foot h4{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);font-weight:800;margin-bottom:1rem}
.foot a{text-decoration:none;color:rgba(255,255,255,.76);font-size:.94rem;display:inline-block;padding:.2rem 0}
.foot a:hover{color:var(--yellow)}
.foot .mark{width:64px;margin-bottom:1rem}
.foot p{color:rgba(255,255,255,.6);font-size:.92rem;max-width:34ch}
.foot__b{margin-top:clamp(40px,5vw,66px);border-top:1px solid rgba(255,255,255,.14);padding:1.3rem 0;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.5)}
@media (max-width:900px){.foot__g{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__g{grid-template-columns:1fr}}

/* ── to-top ──────────────────────────────────────────────── */
#top{position:fixed;right:18px;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:59;width:46px;height:46px;border-radius:50%;
  background:var(--yellow);color:var(--navy);border:0;cursor:pointer;font-weight:900;font-size:1.1rem;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.3s var(--ease);
  box-shadow:0 10px 26px -12px rgba(12,23,51,.8)}
#top.on{opacity:1;visibility:visible;transform:none}
@media (min-width:1041px){#top{bottom:22px}}

/* ── reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .r{opacity:1;transform:none}
  .hero h1 .l > span{transform:none}
  .strip__t{animation:none}
  .plat__spin{animation:none !important}
}

/* ============================================================
   Responsive hardening — audited at 320 / 375 / 414 / 768 /
   1024 / 1280 / 1920, portrait and landscape
   ============================================================ */

/* mobile nav has to scroll on short screens, and the language
   toggle needs a real touch target */
@media (max-width:1040px){
  .menu{max-height:calc(100vh - var(--nav-h));max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .lang button{padding:.5rem .8rem}
  .burger{width:48px;height:48px}
}

/* a 16:7 band turns portrait food shots into a letterbox on phones */
@media (max-width:700px){
  .cat{display:flex;flex-direction:column}
  .cat__hd{order:-1;width:100%;margin-bottom:1.1rem;flex-direction:column;align-items:flex-start;gap:.25rem}
  .cat__img img{aspect-ratio:4/3;object-position:center}
  .cat__hd span{white-space:normal}
}

/* the 120px label column eats half the screen below this */
@media (max-width:520px){
  .dl{grid-template-columns:1fr;gap:.15rem}
  .dl dt{margin-top:.75rem}
  .dl dt:first-of-type{margin-top:0}
  .locbtns .btn{flex:1 1 100%;justify-content:center}
  .foot__b{flex-direction:column;gap:.4rem}
}

/* small phones: the display type and the button rows both need to give */
@media (max-width:440px){
  :root{--rail:16px;--nav-h:64px}
  .mark{width:46px}
  .d1{font-size:clamp(1.85rem,9vw,2.45rem)}
  .d2{font-size:clamp(1.65rem,7.2vw,2.15rem)}
  .slab{box-shadow:3px 3px 0 rgba(8,18,43,.55);white-space:normal;max-width:100%}
  .hero h1{overflow-wrap:break-word}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:center}
  .stats{gap:14px 26px}
  .stats div{min-width:66px}
  .sizes .size{flex:1 1 100%}
  .social a{flex:1 1 100%;justify-content:center}
  .quote{padding-left:14px}
  .obar p{font-size:.78rem}
  .catnav a{font-size:.78rem;padding:.42rem .72rem}
  .plat__img{max-width:16rem}
  .btn{padding:.88em 1.25em}
}

/* landscape phones: don't let a 78vh hero swallow the whole screen */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero__in{padding:64px 0 40px}
  .menu{max-height:calc(100dvh - var(--nav-h));overflow-y:auto}
}

/* iOS Safari zooms into any field whose text is under 16px */
.field input,.field select,.field textarea{font-size:16px}

/* wide screens: stop the measure from stretching past readability */
@media (min-width:1600px){
  .hero__copy{max-width:640px}
  .feat__txt p,.story__grid p{max-width:60ch}
}