/* V1 «الحملة» · street scale. Brand lock: 4 colours + 5 neutrals, radius 0, no blurred shadow. */
/* host-shell equivalence (11-concepts/tools/build-server.js:15-19, minus its off-palette body background) */
:root{color-scheme:light;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
[hidden]{display:none!important;}
/* anchor targets clear the sticky header (>=768) and the fixed order bar (<768) */
@media (min-width:768px){html{scroll-padding-top:calc(75px + env(safe-area-inset-top,0px));}}
@media (max-width:767.98px){html{scroll-padding-bottom:calc(69px + env(safe-area-inset-bottom,0px));}}

html,body{margin:0;background:#FFFFFF;}
body{padding:0;}
html{overflow-x:clip;}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}

#bb{
  --k:#000000; --w:#FFFFFF; --g:#F99F25; --o:#F16B24;
  --a:#333333; --c:#C4C4C4; --s:#1C1C1C;
  --bolt-clip:polygon(58% 0%,18% 46%,44% 46%,10% 100%,86% 40%,56% 40%,92% 0%);
  --bolt-fill:linear-gradient(180deg,#F99F25,#F16B24);
  --img-logo:url('/assets/logo-ar.webp');
  --img-b4:url('/assets/branch-4.webp');
  --img-b2:url('/assets/branch-2.webp');
  --img-box:url('/assets/box-hero.webp');
  --img-crunch:url('/assets/bb-tex-crunch.svg');
  --f-d:'Alexandria',system-ui,sans-serif;
  --f-b:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --gut:clamp(16px,4vw,48px);
  --torn:polygon(0 0,100% 0,100% calc(100% - 9px),97% 100%,93% calc(100% - 7px),88% calc(100% - 1px),83% calc(100% - 10px),77% calc(100% - 2px),71% calc(100% - 8px),64% 100%,58% calc(100% - 9px),52% calc(100% - 3px),46% calc(100% - 11px),39% calc(100% - 1px),33% calc(100% - 7px),26% 100%,20% calc(100% - 10px),13% calc(100% - 2px),7% calc(100% - 8px),0 calc(100% - 1px));
  font-family:var(--f-b);font-size:17px;line-height:1.75;color:var(--k);background:var(--w);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
#bb *,#bb *::before,#bb *::after{box-sizing:border-box;border-radius:0;}
:where(#bb) img{display:block;max-width:100%;}
:where(#bb) :where(h1,h2,h3,p,ul,ol,dl,dd,figure){margin:0;}
:where(#bb) :where(ul,ol){padding:0;list-style:none;}
:where(#bb) a{color:inherit;}
:where(#bb) :where(button,input){font:inherit;color:inherit;}
:where(#bb) :focus-visible{outline:3px solid var(--k);outline-offset:3px;}
:where(#bb) .dk :focus-visible{outline-color:var(--w);}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.in{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--gut);}
.sh{font:900 clamp(40px,7.2vw,84px)/1.12 var(--f-d);letter-spacing:0;}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;
  font:800 16px/1.2 var(--f-d);text-decoration:none;border:3px solid var(--k);cursor:pointer;white-space:nowrap;
  transition:transform .12s ease-out,background-color .15s,color .15s;}
.btn:active{transform:translateY(2px);}
.btn svg{width:20px;height:20px;flex:none;}
.btn-o{background:var(--o);color:var(--k);}
.btn-k{background:var(--k);color:var(--w);}
.btn-w{background:var(--w);color:var(--k);}
.btn-cost{gap:0;padding:0;}
.btn-cost>span{padding:0 16px;}
.btn-cost .bp{border-inline-start:2px solid currentColor;}
@media (hover:hover){
  .btn-o:hover,.btn-w:hover{background:var(--k);color:var(--w);}
  .btn-k:hover{background:var(--w);color:var(--k);}
  .dk .btn-o:hover{background:var(--w);color:var(--k);border-color:var(--w);}
}
.ic{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:square;stroke-linejoin:miter;flex:none;}

/* ---------- concept marker + header ---------- */
.marker{background:var(--k);color:var(--w);font-size:13px;line-height:1.5;padding:6px var(--gut);}
.top{position:relative;z-index:30;background:var(--w);border-bottom:3px solid var(--k);}
@media (min-width:768px){.top{position:sticky;top:env(safe-area-inset-top,0px);}}
.top-in{display:flex;align-items:center;gap:12px;min-height:64px;padding-inline-start:0;}
.logo{display:block;flex:none;width:132px;height:64px;background:var(--k) var(--img-logo) center/104px auto no-repeat;}
.nav{margin-inline-start:8px;}
.nav ul{display:flex;gap:4px;}
.nav a{display:flex;align-items:center;min-height:48px;padding:0 12px;font:800 15px/1.2 var(--f-d);text-decoration:none;}
@media (hover:hover){.nav a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px;}}
.tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto;position:relative;}
.en{min-width:48px;min-height:48px;background:var(--w);border:3px solid var(--k);font:800 14px/1 var(--f-d);cursor:pointer;}
.en-note{position:absolute;top:calc(100% + 10px);inset-inline-end:0;width:max-content;max-width:260px;background:var(--k);color:var(--w);font-size:14px;line-height:1.5;padding:10px 14px;}
.en-note:empty{display:none;}
.top .btn-o,.top .btn-w{display:none;}
.menu-t{display:none;min-height:48px;padding:0 14px;background:var(--k);color:var(--w);border:0;font:800 15px/1 var(--f-d);cursor:pointer;}
@media (min-width:768px){.top .btn-o,.top .btn-w{display:inline-flex;}}
@media (max-width:1023.98px){
  .js .menu-t{display:inline-flex;align-items:center;}
  .js .nav{position:absolute;top:100%;inset-inline:0;margin:0;background:var(--w);border-bottom:3px solid var(--k);display:none;}
  .js .nav.open{display:block;}
  .js .nav ul{flex-direction:column;padding:8px var(--gut) 16px;}
  .js .nav a{font-size:20px;min-height:52px;}
  html:not(.js) .top-in{flex-wrap:wrap;}
  html:not(.js) .nav{order:3;width:100%;}
  html:not(.js) .nav ul{flex-wrap:wrap;}
}
@media (max-width:479.98px){.logo{width:112px;background-size:88px auto;}}
@media (max-width:399.98px){
  .top-in{gap:8px;}
  .tools{gap:6px;}
  .logo{width:96px;background-size:78px auto;}
  .en{min-width:44px;}
  .js .menu-t{padding:0 10px;font-size:14px;}
  .tab .tl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}

/* ---------- mobile order bar (the only fixed thing at the bottom) ---------- */
.orderbar{position:fixed;inset-inline:0;bottom:0;z-index:40;background:var(--o);color:var(--k);border-top:3px solid var(--k);}
.orderbar .order{display:block;}
.orderbar .ob-link{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:calc(58px + env(safe-area-inset-bottom));padding:0 var(--gut) env(safe-area-inset-bottom);font:900 19px/1 var(--f-d);color:inherit;text-decoration:none;}
@media (min-width:768px){.orderbar{display:none;}}
.orderbar.is-soon{background:var(--k);color:var(--w);border-top-color:var(--g);}
.ob-sub{font:800 14px/1 var(--f-d);}
.order{position:relative;}
.order>summary{list-style:none;cursor:pointer;}
.order>summary::-webkit-details-marker{display:none;}
.order>summary .ic{transition:transform .16s;}
.order[open]>summary .ic{transform:rotate(180deg);}
.order-list{position:absolute;z-index:45;top:calc(100% + 8px);inset-inline-end:0;width:max-content;min-width:220px;max-width:280px;background:var(--w);color:var(--k);border:3px solid var(--k);}
.order-list li+li{border-top:3px solid var(--k);}
.order-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 16px;font:800 17px/1.2 var(--f-d);text-decoration:none;}
.order-list a:focus-visible{outline-offset:-6px;}
@media (hover:hover){.order-list a:hover{background:var(--k);color:var(--w);}}
.orderbar .order-list{top:auto;bottom:100%;inset-inline:0;width:auto;max-width:none;border-inline:0;}
.order-list--flow{position:static;width:auto;min-width:0;max-width:none;display:grid;gap:10px;margin-top:22px;background:none;border:0;}
.order-list--flow li+li{border-top:0;}
.order-list--flow .btn{width:100%;}
.top .tools>.order{display:none;}
@media (min-width:768px){.top .tools>.order{display:inline-block;}}

/* ================= HERO: the billboard ================= */
.hero{position:relative;background:var(--g);padding:10px;overflow:hidden;overflow:clip;}
@media (min-width:768px){.hero{padding:20px 24px 24px;}}
.frame{position:relative;max-width:1400px;margin-inline:auto;}
.frame.shake{animation:shake .36s linear;}
@keyframes shake{0%,100%{transform:translate(0,0);}12%{transform:translate(-7px,4px);}26%{transform:translate(6px,-3px);}40%{transform:translate(-4px,2px);}56%{transform:translate(2px,-1px);}70%{transform:translate(-1px,0);}}
.board{position:relative;height:clamp(440px,calc(100svh - 236px),760px);background:var(--k);overflow:hidden;border:4px solid var(--k);}
.posters{position:absolute;inset:0;}
.poster{position:absolute;inset:0;overflow:hidden;visibility:hidden;}
.poster.on{visibility:visible;}
.js .board:not(.ready) .posters{visibility:hidden;animation:failsafe 0s 3s forwards;}
@keyframes failsafe{to{visibility:visible;}}
html:not(.js) .board{height:auto;}
html:not(.js) .posters{position:static;}
html:not(.js) .poster{position:relative;visibility:visible;height:clamp(460px,80svh,720px);border-bottom:4px solid var(--k);}
html:not(.js) .rail,html:not(.js) .pause{display:none;}

/* slat machinery: every slat carries a full copy of the poster clipped to its own slice */
.slats{position:absolute;inset:0;display:none;perspective:1400px;z-index:2;}
.slats.run{display:flex;}
.slat{position:relative;flex:1 1 0;min-width:0;transform-style:preserve-3d;}
.face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.face.b{transform:rotateY(180deg);}
.face::after{content:"";position:absolute;inset:0;background:var(--k);opacity:0;pointer-events:none;}
.face .poster{visibility:visible;inset:auto;top:0;bottom:0;right:calc(var(--i) * -100%);width:calc(var(--n) * 100%);}
.slats.run .slat{animation:flip var(--dur) cubic-bezier(.64,0,.3,1) both;animation-delay:calc(var(--i) * var(--step));}
.slats.run .face::after{animation:shade var(--dur) linear both;animation-delay:calc(var(--i) * var(--step));}
@keyframes flip{0%{transform:rotateY(0deg);}76%{transform:rotateY(-196deg);}88%{transform:rotateY(-176deg);}100%{transform:rotateY(-180deg);}}
@keyframes shade{0%{opacity:0;}40%{opacity:.6;}60%{opacity:.6;}100%{opacity:0;}}
.board.flipping .posters{visibility:hidden;}

/* the hit */
.boom{position:absolute;left:50%;top:44%;width:0;height:0;z-index:3;pointer-events:none;}
@media (min-width:900px){.boom{left:31%;top:50%;}}
.boom>span{position:absolute;left:0;top:0;opacity:0;}
.b-bolt,.b-sh{width:clamp(170px,34vw,340px);aspect-ratio:5/8;clip-path:var(--bolt-clip);}
.b-bolt{background:var(--bolt-fill);}
.b-sh{background:var(--k);}
.b-word{font:900 clamp(52px,11vw,124px)/1 var(--f-d);background:var(--k);color:var(--w);padding:.1em .28em .14em;white-space:nowrap;border:4px solid var(--w);}
.rays i{position:absolute;left:-4px;top:0;width:8px;height:clamp(50px,9vw,110px);background:var(--k);transform-origin:50% 0;opacity:0;}
.rays i:nth-child(1){--a:0deg;}
.rays i:nth-child(2){--a:30deg;}
.rays i:nth-child(3){--a:60deg;}
.rays i:nth-child(4){--a:90deg;}
.rays i:nth-child(5){--a:120deg;}
.rays i:nth-child(6){--a:150deg;}
.rays i:nth-child(7){--a:180deg;}
.rays i:nth-child(8){--a:210deg;}
.rays i:nth-child(9){--a:240deg;}
.rays i:nth-child(10){--a:270deg;}
.rays i:nth-child(11){--a:300deg;}
.rays i:nth-child(12){--a:330deg;}
.boom.hit .b-sh{animation:hitSh 1.25s cubic-bezier(.2,.9,.3,1.2) both;}
.boom.hit .b-bolt{animation:hitBolt 1.25s cubic-bezier(.2,.9,.3,1.2) both;}
.boom.hit .b-word{animation:hitWord 1.25s cubic-bezier(.2,.9,.3,1.1) .05s both;}
.boom.hit .rays{opacity:1;}
.boom.hit .rays i{animation:ray .42s ease-out both;}
@keyframes hitBolt{0%{opacity:0;transform:translate(-50%,-50%) rotate(-38deg) scale(.15);}10%{opacity:1;transform:translate(-50%,-50%) rotate(-6deg) scale(1.28);}20%{transform:translate(-50%,-50%) rotate(-15deg) scale(.94);}30%,80%{opacity:1;transform:translate(-50%,-50%) rotate(-12deg) scale(1);}100%{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(1.08);}}
@keyframes hitSh{0%{opacity:0;transform:translate(-44%,-46%) rotate(-38deg) scale(.15);}10%{opacity:1;transform:translate(-44%,-46%) rotate(-6deg) scale(1.28);}20%{transform:translate(-44%,-46%) rotate(-15deg) scale(.94);}30%,80%{opacity:1;transform:translate(-44%,-46%) rotate(-12deg) scale(1);}100%{opacity:0;transform:translate(-44%,-46%) rotate(-12deg) scale(1.08);}}
@keyframes hitWord{0%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(2.4);}12%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(.9);}22%,80%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1);}100%{opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(1.1);}}
@keyframes ray{0%{opacity:1;transform:rotate(var(--a)) translateY(clamp(60px,10vw,120px)) scaleY(.1);}40%{opacity:1;}100%{opacity:0;transform:rotate(var(--a)) translateY(clamp(150px,24vw,280px)) scaleY(1);}}

/* pause, inside the hero's top corner */
.pause{position:absolute;top:12px;inset-inline-end:12px;z-index:4;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 14px 0 12px;
  background:var(--k);color:var(--w);border:3px solid var(--w);font:800 14px/1 var(--f-d);cursor:pointer;}
.pause svg{width:18px;height:18px;fill:currentColor;stroke:none;}
.pause[hidden],.pause svg[hidden],.p0[hidden]{display:none;}
.pause:focus-visible{outline:3px solid var(--g)!important;outline-offset:-8px;}

/* rail under the board */
.rail{display:flex;align-items:stretch;background:var(--k);color:var(--w);border:4px solid var(--k);border-top:0;min-height:56px;}
.rail>button{flex:none;width:56px;background:var(--k);color:var(--w);border:0;cursor:pointer;display:grid;place-items:center;}
.rail>button:focus-visible,.tab:focus-visible{outline:3px solid var(--g);outline-offset:-5px;}
.tabs{flex:1;display:flex;min-width:0;}
.tab{position:relative;flex:1 1 0;min-width:0;min-height:52px;background:var(--k);color:var(--c);border:0;border-inline-start:1px solid var(--a);cursor:pointer;
  font:800 13px/1.25 var(--f-d);padding:8px 6px;}
.tab[aria-selected="true"]{color:var(--w);}
.tick{position:absolute;inset-inline:0;top:0;height:5px;background:var(--g);transform:scaleX(0);transform-origin:right center;}
.tab[aria-selected="true"] .tick{transform:scaleX(1);}
@media (min-width:768px){.tab{font-size:15px;}}

/* ---------- posters ---------- */
.poster .copy{position:absolute;z-index:1;}
.poster .hl{font:900 clamp(40px,11.5vw,104px)/1.12 var(--f-d);}
.poster .sub{font-size:clamp(16px,1.6vw,19px);line-height:1.65;max-width:34ch;margin-top:10px;}
.poster .btn{margin-top:18px;}
.ph{position:absolute;background-repeat:no-repeat;}

/* P0: the unlit board before the campaign switches on */
.p0{background:var(--k);display:grid;place-items:center;}
.p0 .p0-logo{width:min(56%,360px);aspect-ratio:360/175;background:var(--img-logo) center/contain no-repeat;opacity:.9;}

/* P1 opening */
.p1{background:var(--k);color:var(--w);}
.p1 .ph{top:0;right:0;left:0;height:52%;background-image:var(--img-b4);background-size:auto 238%;background-position:71% 21%;}
.p1 .copy{inset-inline:0;bottom:0;padding:0 18px 22px;}
.p1 .stamp{position:absolute;z-index:2;top:calc(52% - 26px);right:16px;background:var(--g);color:var(--k);border:3px solid var(--k);
  font:900 clamp(17px,2vw,24px)/1.3 var(--f-d);padding:6px 14px 8px;transform:rotate(-4deg);}
.p1 .giant-cut{position:absolute;left:-.06em;bottom:-.46em;font:900 clamp(150px,36vw,420px)/1 var(--f-d);color:var(--s);white-space:nowrap;pointer-events:none;}
/* P2 عادي أو حراق */
.p2{background:var(--w);}
.p2 .half{position:absolute;overflow:hidden;}
.p2 .h-plain{top:0;inset-inline:0;height:50%;background:var(--w);padding:14px 18px 0;}
.p2 .h-hot{bottom:0;inset-inline:0;height:50%;background:var(--k);}
.p2 .h-hot .ph{inset:0;background-image:var(--img-b2);background-size:auto 182%;background-position:38% 2%;}
.p2 .w-plain{display:block;font:900 clamp(92px,27vw,300px)/1.05 var(--f-d);color:var(--k);margin-top:-.08em;}
.p2 .w-hot{position:absolute;left:14px;bottom:-.12em;font:900 clamp(92px,27vw,300px)/1.05 var(--f-d);color:var(--o);}
.p2 .copy{position:static;}
.p2 .sub{margin-top:0;font-weight:500;}
.p2 .btn{margin-top:12px;}
.p2 .or{position:absolute;z-index:2;top:50%;right:22px;width:64px;height:64px;transform:translateY(-50%) rotate(45deg);background:var(--g);border:3px solid var(--k);display:grid;place-items:center;}
.p2 .or span{transform:rotate(-45deg);font:900 22px/1 var(--f-d);}
/* P3 the box */
.p3{background:var(--g);}
.p3 .big4{position:absolute;left:-.02em;bottom:-.16em;font:900 clamp(300px,90vw,720px)/1 var(--f-d);color:var(--w);pointer-events:none;}
.p3 .boxshot{position:absolute;left:2%;bottom:3%;width:78%;aspect-ratio:706/490;background:var(--img-box) center/contain no-repeat;transform:rotate(-7deg);}
.p3 .copy{top:0;inset-inline:0;padding:74px 18px 0;}
.p3 .hl{font-size:clamp(34px,9.6vw,84px);}
.p3 .parts{position:absolute;right:16px;bottom:18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;z-index:1;}
.p3 .parts li{background:var(--k);color:var(--w);font:800 14px/1 var(--f-d);padding:8px 10px;}
.p3 .parts li:nth-child(2){transform:translateX(-10px);}
.p3 .parts li:nth-child(4){transform:translateX(-6px);}
/* P4 BOOM GAME */
.p4{background:var(--o);}
.p4 .w-boom{position:absolute;left:-.04em;bottom:-.2em;font:900 clamp(140px,40vw,440px)/1 var(--f-d);color:var(--o);-webkit-text-stroke:3px var(--k);white-space:nowrap;pointer-events:none;}
.p4 .bolt-k{position:absolute;left:10%;bottom:19%;width:clamp(84px,20vw,230px);aspect-ratio:5/8;background:var(--k);clip-path:var(--bolt-clip);transform:rotate(10deg);}
.p4 .copy{top:0;inset-inline:0;padding:78px 18px 0;}
.p4 .hl{font-size:clamp(38px,10.4vw,96px);}

@media (max-width:899.98px){
  .p2 .h-plain{padding-top:80px;}
  .p2 .w-plain{font-size:clamp(72px,22vw,170px);}
}
@media (max-width:899.98px) and (max-height:700px){
  .p3 .copy .sub{display:none;}
  .p2 .sub{display:none;}
  .p1 .ph{height:38%;}
  .p1 .stamp{top:calc(38% - 24px);}
  .p1 .giant-cut{display:none;}
  .poster .hl{font-size:clamp(34px,10vw,56px);}
  .p1 .sub,.p4 .sub{font-size:15px;}
}
@media (min-width:600px) and (max-width:899.98px){
  .p1 .copy,.p3 .copy,.p4 .copy{padding-inline:32px;}
  .p3 .boxshot{width:62%;}
}
@media (min-width:900px){
  .p1 .ph{top:0;bottom:0;left:0;right:auto;width:58%;height:auto;background-size:auto 186%;background-position:62% 2%;}
  .p1 .copy{top:0;bottom:0;left:auto;width:42%;padding:0 44px;display:flex;flex-direction:column;justify-content:center;}
  .p1 .stamp{top:40px;right:calc(42% - 70px);}
  .p1 .giant-cut{left:auto;right:-.04em;bottom:-.5em;font-size:clamp(200px,24vw,380px);}
  .p2 .h-plain{top:0;bottom:0;left:auto;width:50%;height:auto;padding:28px 40px 0;display:flex;flex-direction:column;}
  .p2 .h-hot{top:0;bottom:0;right:auto;width:50%;height:auto;}
  .p2 .h-hot .ph{background-size:auto 175%;background-position:36% 4%;}
  .p2 .w-plain,.p2 .w-hot{font-size:clamp(150px,17vw,280px);}
  .p2 .copy{margin-top:auto;padding-bottom:36px;}
  .p2 .or{top:50%;right:calc(50% - 40px);width:80px;height:80px;}
  .p2 .or span{font-size:28px;}
  .p3 .copy{top:0;bottom:0;left:auto;width:48%;padding:0 44px;display:flex;flex-direction:column;justify-content:center;}
  .p3 .boxshot{left:4%;bottom:8%;width:46%;}
  .p3 .big4{left:14%;bottom:-.3em;font-size:clamp(420px,52vw,760px);}
  .p3 .parts{right:auto;left:48%;bottom:auto;top:12%;}
  .p4 .copy{top:0;bottom:0;left:auto;width:58%;padding:0 44px;display:flex;flex-direction:column;justify-content:center;}
  .p4 .bolt-k{left:14%;top:12%;bottom:auto;}
  .p4 .w-boom{font-size:clamp(220px,26vw,420px);}
}

/* ================= WALL: three pillars pasted at different sizes ================= */
.wall{position:relative;background:var(--c);padding:clamp(56px,8vw,112px) 0 clamp(72px,10vw,140px);overflow:hidden;overflow:clip;}
.wall::before,.join::before{content:"";position:absolute;inset:0;background:var(--img-crunch);background-size:160px;mix-blend-mode:multiply;opacity:.45;pointer-events:none;}
.g-wall{position:absolute;top:clamp(8px,2vw,24px);right:-.05em;font:900 clamp(96px,21vw,300px)/1 var(--f-d);color:var(--w);white-space:nowrap;pointer-events:none;}
.paste{position:relative;display:grid;grid-template-columns:minmax(0,1fr);}
.bill{position:relative;border:3px solid var(--k);padding:clamp(20px,3vw,40px);}
.bill .verb{font:900 1em/1.2 var(--f-d);margin:-.1em 0 .22em;}
.bill h3{font:800 clamp(20px,2.2vw,28px)/1.35 var(--f-d);max-width:22ch;}
.bill p:not(.verb){margin-top:10px;max-width:40ch;}
.bill .btn{margin-top:22px;}
.bill-a{background:var(--g);font-size:clamp(104px,26vw,230px);clip-path:var(--torn);padding-bottom:calc(clamp(20px,3vw,40px) + 12px);}
.bill-a>*:not(.verb){font-size:17px;}
.bill-a h3{font-size:clamp(20px,2.2vw,28px);}
.modes{margin-top:18px;display:grid;gap:0;border-top:3px solid var(--k);}
.modes li{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:12px;align-items:baseline;padding:12px 0;border-bottom:3px solid var(--k);}
.modes b{font:900 clamp(20px,2.4vw,30px)/1.2 var(--f-d);}
.bill-b{background:var(--k);color:var(--w);font-size:clamp(84px,18vw,150px);margin-block:-18px 0;margin-inline:0 18px;transform:rotate(1.4deg);z-index:2;}
.bill-b>*:not(.verb){font-size:17px;}
.bill-b h3{font-size:clamp(20px,2.2vw,28px);}
.bill-b .verb{color:var(--o);}
.bill-b .bolt-s{position:absolute;inset-inline-end:18px;top:18px;width:54px;aspect-ratio:5/8;background:var(--bolt-fill);clip-path:var(--bolt-clip);}
.bill-c{background:var(--w);font-size:clamp(64px,13vw,96px);width:86%;margin:-10px auto 0 0;transform:rotate(-1.8deg);z-index:3;}
.bill-c>*:not(.verb){font-size:16px;}
.bill-c h3{font-size:clamp(19px,2vw,24px);}
.bill-c details{margin-top:14px;border-top:3px solid var(--k);}
.bill-c summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;font:800 16px/1.2 var(--f-d);cursor:pointer;list-style:none;}
.bill-c summary::-webkit-details-marker{display:none;}
.bill-c summary .ic{transition:transform .16s;}
.bill-c details[open] summary .ic{transform:rotate(180deg);}
.bill-c ol{counter-reset:s;display:grid;gap:8px;padding-bottom:4px;}
.bill-c ol li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:8px;font-size:15px;line-height:1.6;}
.bill-c ol li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;background:var(--k);color:var(--w);font:900 14px/1 var(--f-d);}
@media (min-width:900px){
  .paste{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;}
  .bill-a{grid-column:1 / 8;grid-row:1 / 3;padding-inline-end:72px;}
  .bill-b{grid-column:8 / 13;grid-row:1;margin:64px -44px 0 0;}
  .bill-c{grid-column:8 / 12;grid-row:2;width:auto;margin:-20px -20px 0 0;}
}

/* ================= ABOUT: type at street scale ================= */
.about{position:relative;background:var(--w);padding:clamp(64px,9vw,128px) 0 0;overflow:hidden;overflow:clip;}
.about-in{display:grid;gap:18px;}
.about-p{font-size:clamp(19px,2vw,24px);line-height:1.7;max-width:36ch;font-weight:500;}
.g-about{margin-top:clamp(28px,4vw,56px);font:900 clamp(92px,17vw,260px)/1.18 var(--f-d);white-space:nowrap;}
.g-about span{display:block;}
.g-about span+span{padding-inline-start:18%;color:var(--w);-webkit-text-stroke:3px var(--k);}
.tape{position:relative;margin:clamp(10px,2vw,28px) -40px 0;transform:rotate(-2.4deg);background:var(--k);color:var(--g);
  font:900 clamp(22px,3vw,40px)/1 var(--f-d);white-space:nowrap;padding:.5em 0 .56em;word-spacing:.2em;}

/* ================= MENU: a wall of price posters ================= */
.menu{position:relative;background:var(--w);padding:clamp(88px,11vw,160px) 0 clamp(64px,9vw,120px);}
.menu-head{display:grid;gap:10px;margin-bottom:clamp(24px,4vw,48px);}
.menu-head p{max-width:46ch;color:var(--a);}
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch;}
.price{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:16px;border:3px solid var(--k);background:var(--w);}
.price.c-g{background:var(--g);}
.price.c-o{background:var(--o);}
.price.dk{background:var(--k);color:var(--w);}
.pr-mark{width:64px;height:64px;background:var(--k);padding:4px;flex:none;}
.pr-mark img{width:100%;height:100%;}
.price h3{font:800 clamp(18px,1.8vw,22px)/1.35 var(--f-d);margin-top:6px;}
.pr-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font:900 clamp(56px,6vw,84px)/1 var(--f-d);letter-spacing:-.01em;}
.pr-price small{font:800 16px/1 var(--f-d);}
.price{scroll-margin-top:84px;}
.menu-order{margin-top:24px;font:800 17px/1.4 var(--f-d);}
.pr-desc{font-size:15px;line-height:1.6;}
.pr-cal{font-size:13px;line-height:1.5;color:var(--a);margin-top:auto;padding-top:6px;}
.dk .pr-cal{color:var(--c);}
.c-g .pr-cal,.c-o .pr-cal{color:var(--k);}
.heat{display:flex;margin:4px 0 0;}
.heat .hv{flex:1 1 0;display:grid;place-items:center;min-height:36px;border:3px solid currentColor;font:800 15px/1 var(--f-d);}
.heat .hv~.hv{border-inline-start:0;}
.pr-b4{grid-column:1 / -1;padding:22px;}
.pr-b4 .pr-mark{width:112px;height:112px;}
.pr-b4 .pr-price{font-size:clamp(96px,16vw,200px);}
.pr-b4 h3{font-size:clamp(24px,3vw,36px);}
.pr-b4 .pr-desc{font-size:17px;max-width:32ch;}
.pr-b12{grid-column:1 / -1;}
.pr-b12 .pr-price{font-size:clamp(72px,10vw,120px);}
.pr-b4,.pr-s16,.pr-br{clip-path:var(--torn);padding-bottom:28px;}
.pr-sauce h3+ul,.pr-sauce h3+p{margin-top:4px;}
.pr-sauce ul{display:grid;gap:4px;}
.pr-sauce li{font:800 16px/1.4 var(--f-d);}
.pr-sauce h3:not(:first-child){margin-top:14px;}
.tag{display:inline-block;background:var(--k);color:var(--w);font:800 11px/1 var(--f-d);padding:4px 6px 5px;vertical-align:middle;}
.dk .tag{background:var(--w);color:var(--k);}
.price:nth-child(3n+2){transform:rotate(.6deg);}
.price:nth-child(4n+3){transform:rotate(-.7deg);}
@media (min-width:768px){
  .prices{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;}
  .pr-b4{grid-column:span 6;}
  .pr-b12,.pr-s6,.pr-s16,.pr-fc{grid-column:span 3;}
  .pr-fs,.pr-br,.pr-sauce{grid-column:span 2;}
  .pr-b4{display:grid;grid-template-columns:auto 1fr;column-gap:28px;align-content:start;}
  .pr-b4>*{grid-column:2;}
  .pr-b4 .pr-mark{grid-column:1;grid-row:1 / span 6;width:160px;height:160px;}
}
@media (min-width:1100px){
  .prices{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:dense;}
  /* the hero takes 7/12 so a five-character price fits at the inherited clamp(96px,16vw,200px); rows: [b4|b12] [b4|s6] [s16|fc|fs] [br|sauce] (hamdy-1, 2026-10-16) */
  .pr-b4{grid-column:span 7;grid-row:span 2;display:flex;}
  .pr-b4 .pr-mark{width:150px;height:150px;}
  .pr-b12,.pr-s6,.pr-s16{grid-column:span 5;}
  .pr-fc{grid-column:span 3;}
  .pr-fs{grid-column:span 4;}
  .pr-br{grid-column:span 7;}
  .pr-sauce{grid-column:span 5;}
  .pr-sauce{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-content:start;}
  .pr-sauce h3:not(:first-child){margin-top:6px;}
  .pr-sauce h3:nth-of-type(2){grid-column:2;grid-row:1;}
  .pr-sauce .drinks{grid-column:2;grid-row:2;}
  .pr-sauce .pr-cal{grid-column:1 / -1;}
}

/* ================= BOOM GAME: rewards stepping up the street ================= */
.game{position:relative;background:var(--g);padding:clamp(64px,9vw,128px) 0;overflow:hidden;overflow:clip;}
.game-in{display:grid;gap:clamp(28px,4vw,48px);}
.game-lead{font-size:clamp(18px,1.8vw,22px);line-height:1.7;max-width:40ch;font-weight:500;}
.steps{display:flex;flex-direction:column;gap:12px;}
.step{position:relative;border:3px solid var(--k);padding:16px 18px;display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:14px;}
.step b{font:900 clamp(56px,8vw,112px)/1 var(--f-d);grid-row:1 / span 2;}
.step span{font:800 15px/1.2 var(--f-d);}
.step em{font:800 clamp(19px,2vw,26px)/1.3 var(--f-d);font-style:normal;}
.st-1{background:var(--w);width:66%;}
.st-2{background:var(--k);color:var(--w);width:83%;}
.st-3{background:var(--o);width:100%;}
.st-2 b{color:var(--g);}
.st-3{padding-inline-end:calc(clamp(40px,5vw,72px) + 30px);}
.step{grid-template-columns:auto minmax(0,1fr);}
@media (max-width:479.98px){.step{grid-template-columns:minmax(0,1fr);row-gap:4px;}.step b{grid-row:auto;margin-bottom:6px;}}
.st-3 .bolt-s{position:absolute;top:18px;inset-inline-end:18px;width:clamp(40px,5vw,72px);aspect-ratio:5/8;background:var(--k);clip-path:var(--bolt-clip);}
.brandline{font:900 clamp(18px,2.2vw,28px)/1.3 var(--f-d);}
@media (min-width:768px){
  .game-in{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;}
  .game-in>h2{grid-column:1 / 8;}
  .game-lead{grid-column:1 / 7;}
  .steps{grid-column:1 / -1;flex-direction:row;align-items:flex-end;gap:14px;}
  .step{grid-template-columns:1fr;align-content:end;padding:22px;}
  .step b{grid-row:auto;}
  .st-1{width:auto;flex:28 1 0;height:240px;}
  .st-2{width:auto;flex:33 1 0;height:320px;}
  .st-3{width:auto;flex:39 1 0;height:400px;}
  .brandline{grid-column:1 / -1;}
}

/* ================= BRANCH: photo + street sign ================= */
.branch{position:relative;background:var(--w);padding:clamp(64px,9vw,128px) 0;}
.br-grid{display:grid;}
.br-photo{margin-inline:calc(var(--gut) * -1);height:clamp(280px,62vw,420px);border-block:4px solid var(--k);}
.br-photo img{width:100%;height:100%;object-fit:cover;object-position:82% 62%;}
.sign{position:relative;background:var(--k);color:var(--w);padding:clamp(22px,3vw,40px);margin-top:-44px;margin-inline-start:12px;z-index:1;}
.sign .status{display:inline-block;background:var(--g);color:var(--k);font:900 16px/1 var(--f-d);padding:8px 12px 10px;transform:rotate(-3deg);}
.sign h2{margin-top:16px;}
.addr{font:800 clamp(18px,2vw,24px)/1.4 var(--f-d);margin-top:6px;}
.facts{margin-top:20px;display:grid;gap:0;border-top:1px solid var(--a);}
.facts div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--a);}
.facts dt{color:var(--c);font-size:15px;}
.facts dd{font-size:16px;}
.sign .btn{margin-top:22px;}
@media (min-width:900px){
  .br-grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;}
  .br-photo{grid-column:5 / 13;grid-row:1;margin:0;height:560px;border:4px solid var(--k);}
  .br-photo img{object-position:36% 60%;}
  .sign{grid-column:1 / 6;grid-row:1;margin:0;z-index:1;}
}

/* ================= JOIN: the «مطلوب» poster ================= */
.join{position:relative;background:var(--c);padding:clamp(64px,9vw,128px) 0;overflow:hidden;overflow:clip;}
.g-join{position:absolute;inset-inline-end:-.04em;bottom:-.28em;font:900 clamp(140px,30vw,440px)/1 var(--f-d);color:var(--w);white-space:nowrap;pointer-events:none;}
.w-stack{position:relative;max-width:760px;margin-inline:auto;}
@media (min-width:1100px){.w-stack{margin-inline:4% auto;}}
.old{position:absolute;border:3px solid var(--k);}
.old-1{inset:-18px 24px 40px -22px;background:var(--o);transform:rotate(-3deg);}
.old-2{inset:30px -20px -16px 40px;background:var(--g);transform:rotate(2.2deg);}
.wanted{position:relative;background:var(--w);border:4px solid var(--k);}
.w-top{background:var(--k);color:var(--w);padding:clamp(18px,3vw,32px) clamp(18px,4vw,44px) clamp(14px,2vw,24px);}
.w-big{display:block;font:900 clamp(52px,17vw,156px)/1.05 var(--f-d);color:var(--w);}
.w-sub{display:block;font:800 clamp(19px,2.4vw,28px)/1.35 var(--f-d);color:var(--g);margin-top:4px;}
.w-body{padding:clamp(18px,3vw,36px) clamp(18px,4vw,44px) 0;}
.w-lead{font-size:18px;line-height:1.7;max-width:44ch;}
.jf{display:grid;gap:18px;margin-top:22px;}
.field{display:grid;gap:6px;}
.field label,.roles legend{font:800 16px/1.3 var(--f-d);}
.field input{-webkit-appearance:none;appearance:none;width:100%;min-height:52px;padding:10px 14px;border:3px solid var(--k);background:var(--w);font-size:18px;}
.field input::placeholder{color:var(--a);opacity:1;}
.field input[dir="ltr"]{text-align:right;}
.field input[aria-invalid="true"]{border-width:4px;background:var(--w);outline:3px solid var(--o);outline-offset:0;}
.field input[aria-invalid="true"]:focus-visible{outline:3px solid var(--k);outline-offset:3px;}
.hint{font-size:14px;color:var(--a);}
.err{display:flex;gap:8px;align-items:flex-start;font-size:15px;line-height:1.55;font-weight:500;color:var(--k);border-inline-start:6px solid var(--o);padding-inline-start:10px;}
.err[hidden]{display:none;}
.err .ic{width:18px;height:18px;margin-top:3px;}
.roles{border:0;padding:0;margin:22px 0 0;min-width:0;}
.roles legend{padding:0 clamp(18px,4vw,44px);margin-bottom:8px;}
.roles .err{margin:0 clamp(18px,4vw,44px) 10px;}
.tearline{display:flex;border-top:3px dashed var(--k);}
.tear{flex:1 1 0;position:relative;min-width:0;cursor:pointer;}
.tear+.tear{border-inline-start:3px dashed var(--k);}
.tear input{position:absolute;inset:0;opacity:0;margin:0;-webkit-appearance:none;appearance:none;cursor:pointer;}
.tear span{display:grid;place-items:center;min-height:84px;padding:10px 4px;font:900 clamp(15px,2vw,20px)/1.2 var(--f-d);text-align:center;background:var(--w);
  transition:transform .16s ease-out,background-color .16s,color .16s;}
.tear input:checked+span{background:var(--k);color:var(--w);transform:translateY(10px) rotate(-5deg);}
.tear:nth-child(even) input:checked+span{transform:translateY(10px) rotate(4deg);}
.tear input:focus-visible+span{outline:3px solid var(--o);outline-offset:-6px;}
.jf-submit{padding:0 clamp(18px,4vw,44px) clamp(22px,3vw,36px);margin-top:10px;}
.jf-submit .btn{width:100%;}
.note{font-size:13px;color:var(--a);margin-top:10px;}
.jf-done{padding:clamp(18px,3vw,36px) clamp(18px,4vw,44px) clamp(22px,3vw,40px);}
.jf-done[hidden]{display:none;}
.jf-done h3{font:900 clamp(30px,4vw,48px)/1.2 var(--f-d);}
.jf-done p{margin-top:10px;max-width:46ch;}
#jf-done-t{overflow-wrap:anywhere;}
.jf-done .btn{margin-top:18px;}
.jf-done:focus{outline:none;}

/* ================= FOOTER: loud, in the brand's colour ================= */
.foot{position:relative;background:var(--o);color:var(--k);overflow:hidden;overflow:clip;padding:clamp(40px,6vw,80px) 0 calc(88px + env(safe-area-inset-bottom));border-top:4px solid var(--k);}
@media (min-width:768px){.foot{padding-bottom:32px;}}
.g-foot{font:900 clamp(120px,30vw,420px)/1.3 var(--f-d);margin-top:-.2em;white-space:nowrap;margin-inline-end:-.1em;padding-inline-start:var(--gut);}
.foot-in{display:grid;gap:24px;margin-top:clamp(28px,4vw,48px);}
.foot .logo{width:156px;height:76px;background-size:124px auto;}
.foot nav ul{display:flex;flex-wrap:wrap;gap:4px 8px;}
.foot nav a{display:flex;align-items:center;min-height:48px;padding:0 6px;font:800 17px/1.2 var(--f-d);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;}
.f-line{font:900 clamp(22px,3vw,34px)/1.2 var(--f-d);}
.legal{font-size:14px;line-height:1.8;font-weight:500;border-top:3px solid var(--k);padding-top:16px;}
.marker-f{font-size:13px;background:var(--k);color:var(--w);padding:6px 10px;justify-self:start;}
@media (min-width:900px){
  .foot-in{grid-template-columns:auto 1fr auto;align-items:center;}
  .legal,.marker-f{grid-column:1 / -1;}
}

/* reduced motion: cuts, not flips; nothing auto-advances */
@media (prefers-reduced-motion:reduce){
  #bb *,#bb *::before,#bb *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;}
  .slats,.boom{display:none!important;}
  .js .board:not(.ready) .posters{visibility:visible;}
}

/* ================= live-site additions (12-closeout/PLAN-B-frontend.md T1 step 3.12) ================= */
.skip{position:absolute;inset-inline-start:12px;top:12px;z-index:60;display:inline-flex;align-items:center;min-height:48px;padding:0 16px;background:var(--k);color:var(--w);font:800 15px/1 var(--f-d);text-decoration:none;transform:translateY(-200%);}
.skip:focus{transform:none;outline:3px solid var(--g);outline-offset:2px;}

/* reserved: «not announced yet», inherits the surrounding ink */
.rsv{display:inline-block;border:2px dashed currentColor;padding:.1em .55em .2em;font:800 .875em/1.5 var(--f-d);}
.pr-price--rsv{font:800 16px/1.4 var(--f-d);letter-spacing:0;}

/* careers form: consent box + honeypot */
.consent{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;min-height:44px;margin:0 0 16px;font-size:15px;line-height:1.6;cursor:pointer;}
.consent input{position:absolute;top:0;inset-inline-start:0;width:28px;height:28px;margin:0;opacity:0;-webkit-appearance:none;appearance:none;cursor:pointer;}
.consent .box{position:relative;width:28px;height:28px;border:3px solid var(--k);background:var(--w);}
.consent input:checked+.box{background:var(--k);}
.consent input:checked+.box::after{content:"";position:absolute;inset:4px;background:var(--w);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,38% 72%);}
.consent input:focus-visible+.box{outline:3px solid var(--o);outline-offset:2px;}
.consent a{color:inherit;text-decoration:underline;text-underline-offset:4px;}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* uploaded poster/branch images get a neutral crop; default posters get AVIF first */
.board .poster .ph.ph--custom{background-image:var(--img-ph);background-size:cover;background-position:50% 50%;}
.board .poster .boxshot.boxshot--custom{background-image:var(--img-ph);}
.p1 .ph{background-image:image-set(url('/assets/branch-4.avif') type('image/avif'),url('/assets/branch-4.webp') type('image/webp'));}
.p2 .h-hot .ph{background-image:image-set(url('/assets/branch-2.avif') type('image/avif'),url('/assets/branch-2.webp') type('image/webp'));}
.p3 .boxshot{background-image:image-set(url('/assets/box-hero.avif') type('image/avif'),url('/assets/box-hero.webp') type('image/webp'));}
/* posters 2-4 load their images only once the board is running */
.js .board:not(.ready) .poster[data-slide]:not([data-slide="1"]) :is(.ph,.boxshot){background-image:none;}

.stamp--inline{display:inline-block;margin-bottom:12px;background:var(--g);color:var(--k);border:3px solid var(--k);font:900 clamp(15px,1.8vw,20px)/1.3 var(--f-d);padding:4px 12px 6px;transform:rotate(-3deg);}
@media (min-width:900px){.paste--two .bill-c{grid-column:8 / 13;grid-row:1;margin:64px -44px 0 0;}}
.game-in>.status{justify-self:start;background:var(--k);color:var(--w);font:900 16px/1 var(--f-d);padding:8px 12px 10px;transform:rotate(-3deg);}
@media (min-width:768px){.game-in>.status{grid-column:1 / -1;}}
.facts dd a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:5px;}
.facts .hrs{display:block;}
.br-photo--custom img{object-position:50% 50%;}

/* menu card with an unknown slug */
.pr-x{grid-column:span 1;}
@media (min-width:768px){.pr-x{grid-column:span 2;}}
@media (min-width:1100px){.pr-x{grid-column:span 3;}}

/* /privacy */
.legal-page{padding:clamp(56px,8vw,112px) 0;}
.legal-page h1{font:900 clamp(40px,7.2vw,84px)/1.12 var(--f-d);}
.legal-page h2{font:800 clamp(20px,2.2vw,28px)/1.35 var(--f-d);margin-top:clamp(28px,4vw,48px);}
.legal-page p{margin-top:10px;max-width:60ch;}

/* /survey: the join form's .field and .tearline on a plain page */
.sv-form{display:grid;gap:28px;max-width:640px;margin-top:clamp(24px,4vw,40px);}
.sv-form fieldset{border:0;padding:0;margin:0;min-width:0;}
.sv-form legend{font:800 17px/1.4 var(--f-d);margin-bottom:8px;}
.sv-form .tearline{border:3px solid var(--k);}
.sv-form .tear span{min-height:56px;}
.sv-form textarea{width:100%;min-height:120px;padding:10px 14px;border:3px solid var(--k);background:var(--w);font:inherit;}

/* first paint: until hamla.js marks the opening over (.settled), skip the layout of what is not on screen: the sections
   under the first screen (none paints outside its own box; each renders as it nears the viewport) and the hidden posters
   (the flip's slats are clones, not these). Released after, or a smooth in-page scroll would aim at the 900px placeholders
   and the first flip to each poster would shape its text inside the tap's frame */
.js:not(.settled) :is(.about,.menu,.game,.branch,.join,.foot){content-visibility:auto;contain-intrinsic-size:auto 900px;}
.js:not(.settled) .posters>.poster:not(.on){content-visibility:hidden;}