/* ===== 1) الأساس + الشريط العلوي + الواجهة (v2 بأسلوب CRAV) ===== */
/* خط زين: ملف متغيّر محوره "long" يطوّل ذيول الحروف الأخيرة؛ نستخدم 0 (بدون تطويل). وزن واحد للخط */
@font-face { font-family: "Zain"; font-weight: 100 900; font-display: swap; src: url(../fonts/zain-vf.ttf) format("truetype"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "SaudiRiyal"; font-display: swap; src: url(../fonts/saudi_riyal.ttf) format("truetype"); unicode-range: U+20C1; }
/* Layout: butcher-counter hero — stacked Arabic headline on the right, the hungry-cow sticker slapped on the left, red wave floor. Single brand look (cream ground), deliberately not themed. */
:root {
  --cream: #F5E3CD;
  --red: #ED1C24;
  --red-deep: #B00E16;
  --yellow: #FFD750;
  --mustard: #F4A804;
  --ink: #1B1B1B;
  --paper: #FFFFFF;
  --ar: "Zain", "Fira Sans Condensed", "Segoe UI", Tahoma, sans-serif; /* زين للعربي، والأرقام واللاتيني من Fira */
  --en: "Fira Sans Condensed", "Arial Narrow", Impact, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { background: var(--cream); color: var(--ink); }
body { font-family: var(--ar); font-variation-settings: "long" 0; overflow-x: hidden; margin: 0; }
.riyal { font-family: "SaudiRiyal", var(--en); font-weight: 400; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 18px; }

/* ---------- header */
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--cream); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand img { width: 84px; height: auto; display: block; }
.brand .road { display: none; }
.brand small { font-size: .82rem; font-weight: 600; color: var(--red-deep); line-height: 1.3; }
nav.links { display: none; gap: 22px; }
nav.links a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; }
nav.links a:hover { color: var(--red); }
.pill { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--ar); font-weight: 800;
  background: var(--red); color: var(--paper); border: 4px solid var(--paper); border-radius: 999px; padding: 8px 18px; font-size: 1rem;
  box-shadow: 0 6px 0 var(--red-deep), 0 10px 18px rgba(120, 20, 10, .18); white-space: nowrap; }
.pill:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--red-deep); }

/* ---------- header (بأسلوب CRAV): الشعار + زر الطلب + زر القائمة */
.brand img { width: 72px; }
.bar-btns { display: flex; align-items: center; gap: 8px; }
.pill { min-height: 44px; padding: 6px 14px; font-size: 1.17rem; line-height: 1.3; cursor: pointer; }
.pill.o { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 5px 0 rgba(27, 27, 27, .85); gap: 10px; }
.pill.o:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(27, 27, 27, .85); }
.pill.o .bars { width: 18px; height: 12px; border-block: 2.5px solid currentColor; position: relative; }
.pill.o .bars::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 2.5px; margin-top: -1.25px; background: currentColor; }
header.top { z-index: 40; }
.nav { position: fixed; inset: 0; z-index: 30; background: var(--red); color: var(--paper); display: flex; flex-direction: column; justify-content: center; gap: 4px;
  padding: calc(var(--header-h, 78px) + 16px) 24px 28px; overflow-y: auto; }
.nav[hidden] { display: none; }
.nav a { display: block; color: var(--paper); text-decoration: none; font-weight: 800; font-size: clamp(2.4rem, 11vw, 4rem); line-height: 1.25; }
.nav a small { font-family: var(--en); font-weight: 700; font-size: .32em; letter-spacing: .12em; margin-inline-start: .5em; color: var(--yellow); }
.nav a.nav-call { margin-top: 18px; font-family: var(--en); font-weight: 900; font-size: clamp(2rem, 9vw, 3rem); direction: ltr; text-align: right; color: var(--yellow); }
.nav.open a { animation: pop .55s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * .06s); transform-origin: 100% 90%; }
html.nav-open { overflow: hidden; }

/* ---------- loader: ستيكرات تنزل وتتركّب، ثم ستارة ترتفع (مرة وحدة للزائر) */
.loader { display: none; }
html.loading .loader { display: block; position: fixed; inset: 0; z-index: 100; overflow: hidden; animation: ldFail .01s 6s forwards; }
@keyframes ldFail { to { visibility: hidden; } }
.cur { position: absolute; left: -15%; width: 130%; top: 0; height: 122%; border-radius: 0 0 50% 50% / 0 0 16% 16%; transition: transform .75s cubic-bezier(.7, 0, .25, 1); }
.cur.c3 { background: var(--red-deep); transition-delay: .2s; }
.cur.c2 { background: var(--yellow); transition-delay: .1s; }
.cur.c1 { background: var(--red); }
.loader.out .cur { transform: translateY(-104%); }
.ld-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; color: var(--paper); transition: transform .75s cubic-bezier(.7, 0, .25, 1), opacity .3s; }
.loader.out .ld-in { transform: translateY(-104vh); }
/* الطبقات تطيح بتسارع (مثل CRAV) وتتمايل لين تستقر، والبرجر كله ينضغط مع كل طبقة */
.ld-stage { position: relative; width: 240px; height: 264px; transform-origin: 50% 100%; }
.ld-l { position: absolute; left: 0; bottom: var(--b); width: 240px; height: auto; opacity: 0; transform-origin: 50% 100%; overflow: visible; filter: drop-shadow(0 4px 2px rgba(60, 5, 5, .3)); }
.ld-l.drop { animation: ldFall .32s cubic-bezier(.55, .06, .68, .53) both, ldSettle .45s cubic-bezier(.34, 2, .6, 1) .32s both; }
@keyframes ldFall { from { transform: translateY(-85vh) scale(.8); opacity: 0; } 15% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes ldSettle { from { rotate: var(--r0); } to { rotate: 0deg; } }
.ld-stage.bump { animation: ldBump .26s linear; }
@keyframes ldBump { 0% { transform: none; } 23% { transform: scale(1.06, .88); animation-timing-function: ease-in-out; } 54% { transform: scale(.98, 1.03); animation-timing-function: ease-out; } 100% { transform: none; } }
/* الصوص */
.ld-stream { position: absolute; left: 50%; width: 9px; margin-left: -4.5px; top: -75vh; bottom: 44px; border-radius: 5px; background: linear-gradient(90deg, #E9967E, #F7B49C 45%, #FFD3C2 60%, #F7B49C);
  box-shadow: 0 0 0 2px rgba(142, 11, 18, .55); clip-path: inset(0 0 100% 0); }
.ld-stream.on { animation: ldStream .46s linear forwards; }
@keyframes ldStream { 0% { clip-path: inset(0 0 100% 0); } 28% { clip-path: inset(0 0 0 0); } 72% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(100% 0 0 0); } }
.ld-sauce { position: absolute; left: 0; bottom: 30px; width: 240px; height: auto; overflow: visible; }
.ld-sauce .sz { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ld-sauce .sz.o { stroke: #8E0B12; stroke-width: 11; }
.ld-sauce .sz.f { stroke: #F7B49C; stroke-width: 7; }
.ld-sauce .drip { fill: #F7B49C; stroke: #8E0B12; stroke-width: 2.5; opacity: 0; transform-origin: 118px 14px; }
.ld-sauce.on .sz { animation: ldDraw .36s cubic-bezier(.4, 0, .4, 1) .1s forwards; }
.ld-sauce.on .drip { animation: ldDrip .4s ease-in .42s forwards; }
@keyframes ldDraw { to { stroke-dashoffset: 0; } }
@keyframes ldDrip { 0% { opacity: 1; transform: scaleY(0); } 100% { opacity: 1; transform: scaleY(1); } }
/* نقاط تتطاير مع «جوعان؟» */
.ld-pop { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; }
.ld-pop i { position: absolute; width: 10px; height: 10px; border-radius: 50%; opacity: 0; background: var(--yellow); }
.ld-pop i:nth-child(3n+2) { background: #fff; width: 8px; height: 8px; }
.ld-pop i:nth-child(3n) { background: #7AC143; width: 12px; height: 12px; }
.ld-pop.on i { animation: ldBurst .7s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes ldBurst { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1); } }
.ld-pop i:nth-child(1) { --dx: -120px; --dy: -90px; } .ld-pop i:nth-child(2) { --dx: 110px; --dy: -110px; } .ld-pop i:nth-child(3) { --dx: -150px; --dy: 10px; }
.ld-pop i:nth-child(4) { --dx: 150px; --dy: -20px; } .ld-pop i:nth-child(5) { --dx: -60px; --dy: -150px; } .ld-pop i:nth-child(6) { --dx: 60px; --dy: -160px; }
.ld-pop i:nth-child(7) { --dx: -130px; --dy: 90px; } .ld-pop i:nth-child(8) { --dx: 130px; --dy: 80px; } .ld-pop i:nth-child(9) { --dx: 0; --dy: -175px; }
.ld-pop i:nth-child(10) { --dx: -90px; --dy: 140px; } .ld-pop i:nth-child(11) { --dx: 95px; --dy: 145px; } .ld-pop i:nth-child(12) { --dx: 170px; --dy: 40px; }
@media (min-width: 860px) { .ld-stage { scale: 1.3; margin-bottom: 40px; } }
.ld-txt { margin: 0; min-height: 1.6em; font-weight: 800; font-size: 1.5rem; line-height: 1.4; text-align: center; }
.ld-txt.big { font-size: 2.6rem; animation: pop .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.ld-bar { position: absolute; inset-inline: 0; bottom: 0; height: 10px; background: rgba(255, 255, 255, .18); }
.ld-bar i { display: block; height: 100%; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: 100% 50%; }
.loader.run .ld-bar i { animation: ldBar 1.6s cubic-bezier(.45, 0, .55, 1) forwards; }
@keyframes ldBar { to { transform: scaleX(1); } }

/* ---------- hero v3: نفس ترتيب وحركة واجهة CRAV */
.hero { position: relative; overflow: hidden; padding-block: 8vw 34px; display: flex; flex-direction: column; }
.spot { position: absolute; background: rgba(237, 28, 36, .07); border-radius: 46% 54% 60% 40% / 52% 38% 62% 48%; pointer-events: none; }

.stage { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; --mega: min(13.4vw, 21.6svh); --cow: min(80vw, 46svh); }
.mega-wrap { position: relative; width: fit-content; max-width: 100%; }
h1.mega { margin: 0; font-weight: 800; font-size: var(--mega); line-height: 1.05; color: var(--red); text-align: center; white-space: nowrap; user-select: none;
  --sw: clamp(6px, 1.7vw, 18px); --sc: var(--paper); filter: drop-shadow(0 4px 3px rgba(90, 20, 10, .16)); }
h1.mega .w { display: inline-block; transform-origin: 50% 90%; }
/* الحد الأبيض للكلمات الكبيرة: نسخة من الكلمة خلفها (data-t) بدل paint-order، عشان الحروف تبقى كاملة وواضحة أثناء الحركة في سفاري */
h1.mega .w, .big-h .w, .why-tape, .cat-ar { isolation: isolate; }
h1.mega .w, .big-h .w, .cat-ar { position: relative; }
h1.mega .w::before, .big-h .w::before, .why-tape::before, .cat-ar::before { content: attr(data-t); position: absolute; inset: 0; z-index: -1; color: var(--sc); -webkit-text-stroke: var(--sw) var(--sc); pointer-events: none; }
/* «يتقطّع قدامك» و «FRESH BEEF»: شريط لاصق ممزّق ملزوق على الكلمة */
.tag { position: absolute; z-index: 3; margin: 0; transform-origin: 50% 90%; filter: drop-shadow(0 3px 2px rgba(90, 20, 10, .28)); }
.tag > span { display: block; font-weight: 800; line-height: 1.3; font-size: clamp(.85rem, 3.6vw, 1.55rem); white-space: nowrap; padding: .12em .9em .16em;
  clip-path: polygon(0 8%, 2.5% 0, 6% 6%, 94% 2%, 97.5% 8%, 100% 0, 98.5% 26%, 100% 50%, 98% 74%, 100% 100%, 96% 94%, 92% 100%, 5% 96%, 2% 100%, 0 92%, 1.6% 70%, 0 48%, 2% 24%); }
.tag.t1 { right: -3%; top: -15%; rotate: 5deg; }
.tag.t1 > span { background: var(--yellow); color: var(--red-deep); }
.tag.t2 { left: -3%; bottom: -16%; rotate: -5deg; }
.tag.t2 > span { background: rgba(255, 255, 255, .94); color: var(--red-deep); font-family: var(--en); font-weight: 900; letter-spacing: .06em; direction: ltr; }
.art2 { position: relative; z-index: 2; width: var(--cow); margin-top: 5vw; }
.hcow { display: block; width: 100%; height: auto; cursor: pointer; transform-origin: 50% 70%; filter: drop-shadow(0 8px 6px rgba(90, 20, 10, .22)); }
.hero-logo { position: relative; z-index: 3; display: block; width: calc(var(--cow) * .6); height: auto; margin-top: calc(var(--cow) * -.16); transform-origin: 50% 90%;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 6px 4px rgba(90, 20, 10, .25)); }

.hero-foot { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; text-align: center; }
.cta { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: center; }
.call { display: flex; align-items: center; gap: 14px; text-decoration: none; background: var(--red); color: var(--paper);
  border: 5px solid var(--paper); border-radius: 22px; padding: 10px 20px 12px; box-shadow: 0 7px 0 var(--red-deep), 0 14px 24px rgba(120, 20, 10, .2); }
.call:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--red-deep); }
.call { padding: 12px 30px 14px; }
.call b { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.call .num { display: block; font-family: var(--en); font-weight: 900; font-size: 1.55rem; letter-spacing: .03em; direction: ltr; text-align: right; user-select: all; }
.ghost { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; font-size: 1.05rem; color: var(--ink); text-decoration: none; box-shadow: inset 0 -3px 0 var(--red); }
/* علامة التوصيل المجاني: ستيكر سيارة طالعة من حبة صفراء */
.dv { margin: 4px 0 0; display: inline-flex; align-items: center; rotate: -3deg; font-weight: 800; color: var(--red-deep); filter: drop-shadow(0 5px 3px rgba(90, 20, 10, .2)); }
.dv-car { width: 92px; height: auto; position: relative; z-index: 1; flex: none; }
.dv-txt { background: var(--yellow); border: 3px solid var(--paper); border-radius: 999px; padding: 2px 18px 4px; padding-inline-start: 26px; margin-inline-start: -14px; font-size: 1.35rem; line-height: 1.5; white-space: nowrap; }
.chip { background: var(--paper); border: 2px dashed var(--red); color: var(--red-deep); border-radius: 999px; padding: 2px 12px; font-weight: 800; }
.dv-w { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dv-note { margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink); }

/* الحركة: الكلمات «تنط»، البقرة تطلع من تحت ثم تطفو، الشعار ينط آخر شي، والنص يطلع سطر سطر */
@keyframes pop { from { transform: translateY(var(--py, 30px)) rotate(var(--pr, -12deg)) scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cowIn { from { transform: translateY(100px) rotate(-5deg) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes floaty { from { translate: 0 0; } to { translate: 0 -15px; } }
@keyframes rise { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slap {
  0%   { transform: translateY(-40px) scale(1.55) rotate(-16deg); opacity: 0; filter: drop-shadow(0 46px 30px rgba(90, 20, 10, .28)); }
  12%  { opacity: 1; }
  58%  { transform: translateY(0) scale(.93) rotate(3deg); filter: drop-shadow(0 2px 1px rgba(90, 20, 10, .35)); }
  74%  { transform: scale(1.04) rotate(-1.5deg); }
  88%  { transform: scale(.99) rotate(.5deg); }
  100% { transform: none; opacity: 1; filter: drop-shadow(0 6px 4px rgba(90, 20, 10, .22)); }
}
@keyframes stampIn { 0% { transform: scale(2.2); opacity: 0; } 55% { transform: scale(.92); opacity: .95; } 100% { transform: scale(1); opacity: .9; } }

.go .tag, .go .hero-logo { animation: pop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.go h1.mega .w { animation: popH .75s cubic-bezier(.2, .8, .3, 1) both; }
.go h1.mega .w1 { --pr: -14deg; --py: 34px; animation-delay: .05s; }
.go h1.mega .w2 { --pr: 11deg; --py: 22px; animation-delay: .17s; }
.go .tag.t1 { --pr: 16deg; animation-delay: .34s; }
.go .tag.t2 { --pr: -13deg; animation-delay: .44s; }
.go .hcow { animation: cowIn 1.5s cubic-bezier(.3, 1.45, .5, 1) .5s both; }
.go .art2 { animation: floaty 2.5s ease-in-out 2s infinite alternate; }
.go .hero-logo { --pr: 8deg; animation-delay: 1.15s; }
.go .hero-foot > *, .go .hero-foot .cta > * { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: 1.35s; }
.go .hero-foot .cta > .ghost { animation-delay: 1.45s; }
.go .hero-foot > .dv-w { animation-delay: 1.55s; }
.go .hero-foot > .cta { animation: none; }

a:focus-visible, .hcow:focus-visible { outline: 4px solid var(--mustard); outline-offset: 4px; border-radius: 12px; }

@media (min-width: 860px) {
  .brand img { width: 96px; }
  .pill { padding: 8px 20px; }
  .hero { padding-block: 0 40px; min-height: calc(100svh - var(--header-h, 104px)); }
  .stage { --mega: min(15.6vw, 30svh); --cow: min(28vw, 37svh); }
  h1.mega { line-height: .98; }
  .art2 { margin-top: calc(var(--mega) * -.1); }
  .tag > span { font-size: clamp(1.5rem, 2.4vw, 2.3rem); }
  .tag.t1 { right: 3%; top: -2%; }
  .tag.t2 { left: 3%; bottom: 6%; }
  .hero-foot { position: absolute; inset-inline: 0; bottom: 44px; flex-direction: row; justify-content: space-between; align-items: flex-end; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .go h1.mega .w, .go .tag, .go .hero-logo, .go .hcow, .go .art2, .go .hero-foot > *, .go .hero-foot .cta > *, .nav.open a { animation: none !important; }
}

/* ===== 2) باقي الصفحة: نفس اللغة البصرية ===== */
:root {
  --header-h: 88px;
  --tabs-h: 60px;
  --wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0 46 C 160 6, 320 6, 480 40 S 820 86, 980 42 S 1140 14, 1200 30 L1200 120 L0 120 Z' fill='black'/></svg>");
  --wave-f: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path transform='matrix(1 0 0 -1 0 120)' d='M0 46 C 160 6, 320 6, 480 40 S 820 86, 980 42 S 1140 14, 1200 30 L1200 120 L0 120 Z' fill='black'/></svg>");
  --torn: polygon(0 6%, 3% 0, 97% 4%, 100% 0, 98.5% 22%, 100% 45%, 98% 70%, 100% 100%, 4% 96%, 0 100%, 1.6% 74%, 0 50%, 2% 28%);
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.en { font-family: var(--en); direction: ltr; unicode-bidi: isolate; }
.num-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; white-space: nowrap; }
button:focus-visible, [tabindex]:focus-visible { outline: 4px solid var(--mustard); outline-offset: 4px; border-radius: 12px; }

/* ---------- section shell */
.sec { position: relative; line-height: 1.6; padding-block: 56px; overflow: hidden; --ground: var(--cream); background: var(--cream); }
.sec > .wrap { position: relative; z-index: 2; }
.sec.red { background: var(--red); color: var(--paper); --ground: var(--red); }
.sec.wave-b { padding-bottom: 150px; }
.sec.wave-b::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 100px; background: var(--red); z-index: 1;
  -webkit-mask: var(--wave) center / 100% 100% no-repeat; mask: var(--wave) center / 100% 100% no-repeat; }
.sec.red.wave-b::after { background: var(--cream); }
.sec .spot { z-index: 0; }

/* ---------- torn tape + outlined english word */
.tp { display: inline-block; rotate: -2.5deg; }
.tp > span { display: inline-block; padding: .02em .4em .12em; font-weight: 800; line-height: 1.2; clip-path: var(--torn); }
.tp.r > span { background: var(--red); color: var(--paper); }
.tp.y > span { background: var(--yellow); color: var(--red-deep); }
.tp.w > span { background: var(--paper); color: var(--red-deep); }
.tp.y, .tp.alt { rotate: 2deg; }
.sec-head { display: grid; justify-items: start; align-items: center; margin: 0 0 26px; }
.sec-head > * { grid-area: 1 / 1; }
.outline-en { font-family: var(--en); font-weight: 900; font-size: clamp(3.4rem, 18vw, 8rem); line-height: .95; letter-spacing: .02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(27, 27, 27, .3); direction: ltr; user-select: none; }
.sec.red .outline-en { -webkit-text-stroke-color: rgba(255, 255, 255, .55); }
.sec-head h2, .sec-head h3 { margin: 0; margin-inline-start: 5%; font-size: clamp(2rem, 9vw, 3.4rem); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.lead { font-size: 1.15rem; font-weight: 600; margin: 0 0 22px; max-width: 34em; }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 8px 26px; text-decoration: none;
  font-family: var(--ar); font-weight: 800; font-size: 1.25rem; line-height: 1.2; background: var(--red); color: var(--paper);
  border: 4px solid var(--paper); border-radius: 999px; box-shadow: 0 6px 0 var(--red-deep), 0 10px 18px rgba(120, 20, 10, .18); }
.btn:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--red-deep); }
.btn.alt { background: var(--yellow); color: var(--red-deep); }
.btn.big { font-size: 1.5rem; min-height: 64px; padding-inline: 34px; }
.chip { display: inline-block; background: var(--paper); border: 2px dashed var(--red); color: var(--red-deep); border-radius: 999px; padding: 2px 12px; font-weight: 800; }

/* ---------- stickers + reveal (المحتوى ظاهر دايماً لو JS ما اشتغل) */
.stk { display: block; height: auto; filter: drop-shadow(0 6px 4px rgba(90, 20, 10, .22)); transform-origin: 50% 60%; }
.anim .rise:not(.in), .anim .slap-in:not(.in), .anim .stamp-in:not(.in) { opacity: 0; }
.rise.in { animation: rise .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * .1s); }
.slap-in.in { animation: slap .62s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i, 0) * .14s); }
.stamp-in.in { animation: stampIn .45s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i, 0) * .14s); }

/* ---------- image frame + placeholder */
.frame { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--paper); border: 3px solid var(--red); border-radius: 20px; overflow: hidden; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.frame.photo img { object-fit: cover; padding: 0; }
.frame .ph-inner { display: none; }
.frame.is-empty img { display: none; }
.frame.is-empty { background-color: var(--cream);
  background-image: radial-gradient(ellipse 34% 26% at 12% 18%, rgba(237, 28, 36, .07) 98%, transparent), radial-gradient(ellipse 28% 34% at 88% 30%, rgba(237, 28, 36, .07) 98%, transparent), radial-gradient(ellipse 40% 22% at 70% 92%, rgba(237, 28, 36, .07) 98%, transparent), radial-gradient(ellipse 18% 20% at 22% 84%, rgba(237, 28, 36, .07) 98%, transparent); }
.frame.is-empty .ph-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--red-deep); font-weight: 800; font-size: .95rem; text-align: center; }
.frame.is-empty .ph-inner::before { content: ""; width: 44px; height: 38px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 38' fill='none' stroke='%23B00E16' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'><path d='M4 11h8l3-6h14l3 6h8v23H4z'/><circle cx='22' cy='21' r='7'/></svg>") center / contain no-repeat; }

/* ---------- bite (العضّة) */
.bite { position: relative; }
.bite::after { content: ""; position: absolute; top: -16px; inset-inline-end: -16px; width: 70px; height: 70px; pointer-events: none; z-index: 4;
  background: radial-gradient(circle at 48px 22px, var(--ground) 21px, transparent 22px), radial-gradient(circle at 20px 14px, var(--ground) 13px, transparent 14px), radial-gradient(circle at 56px 52px, var(--ground) 13px, transparent 14px); }

/* ---------- prices */
.price { font-family: var(--en); font-weight: 900; color: var(--red); font-size: 2rem; line-height: 1; direction: ltr; unicode-bidi: isolate; display: inline-block; white-space: nowrap; }
.price .riyal { font-size: .82em; }
.was { font-family: var(--en); font-weight: 900; font-size: 1.3rem; color: var(--ink); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.cal { display: inline-block; font-family: var(--en); font-weight: 700; font-size: .85rem; line-height: 1.5; color: #333; background: rgba(27, 27, 27, .09); border-radius: 6px; padding: 1px 8px; direction: ltr; white-space: nowrap; }

/* ---------- 2. marquee */
.marquee { position: relative; background: var(--red); padding-block: 6px 96px; overflow: hidden; margin-top: -1px; }
.marquee::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 70px; background: var(--cream);
  -webkit-mask: var(--wave) center / 100% 100% no-repeat; mask: var(--wave) center / 100% 100% no-repeat; }
.strip { direction: ltr; overflow: hidden; margin-inline: -4%; }
.strip.sr { background: var(--red); color: var(--paper); border-block: 4px solid var(--paper); rotate: -2deg; position: relative; z-index: 2; box-shadow: 0 6px 0 var(--red-deep); }
.strip.sy { background: var(--yellow); color: var(--red-deep); rotate: 1.5deg; margin-top: 2px; }
.track { display: flex; width: max-content; animation: mq 38s linear infinite; }
.strip.sy .track { animation-direction: reverse; animation-duration: 46s; }
.track > div { display: flex; flex: none; align-items: center; }
.track span { flex: none; padding: 6px 14px; font-weight: 800; font-size: 1.3rem; line-height: 1.5; white-space: nowrap; }
.track span.en { font-weight: 900; letter-spacing: .04em; font-size: 1.35rem; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- عناوين الأقسام (بأسلوب CRAV): ستيكر صغير + عنوان عملاق بحافة بيضاء */
.sec-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
.edge { filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 6px 4px rgba(90, 20, 10, .25)); }
/* «عروضنا» على قطعة من جلد البقرة: كريمي وبقع حمراء (نفس بقع ستيكر البقرة) */
.kick { display: inline-block; margin: 0 0 4px; rotate: -4deg; transform-origin: 50% 90%;
  filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 6px 4px rgba(90, 20, 10, .25)); }
.kick > span { display: block; color: var(--ink); font-weight: 800; font-size: 1.6rem; line-height: 1.5; padding: .22em 1.2em .3em;
  border-radius: 46% 54% 42% 58% / 62% 52% 48% 38%; -webkit-text-stroke: 6px #FFF6EA; paint-order: stroke fill;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22%23ED1C24%22%3E%3Cpath%20d%3D%22M-4%208C10%202%2026%2010%2024%2024C22%2038%2030%2046%2020%2058C10%2070-6%2062-6%2048Z%22/%3E%3Cpath%20d%3D%22M150%20-4C166-6%20176%206%20170%2016C164%2026%20150%2022%20146%2012C143%205%20144-2%20150-4Z%22/%3E%3Cpath%20d%3D%22M176%2040C190%2034%20206%2042%20204%2058C202%2074%20188%2084%20176%2076C166%2070%20166%2046%20176%2040Z%22/%3E%3Cpath%20d%3D%22M58%2064C68%2060%2080%2066%2078%2076C77%2084%2062%2086%2056%2080C51%2075%2052%2067%2058%2064Z%22/%3E%3Cpath%20d%3D%22M104%202C112%200%20118%206%20115%2012C112%2017%20104%2016%20101%2011C99%207%20100%203%20104%202Z%22/%3E%3Cpath%20d%3D%22M126%2070C132%2066%20140%2070%20139%2077C138%2083%20128%2084%20125%2080C123%2077%20123%2072%20126%2070Z%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, #FFF6EA; box-shadow: inset 0 0 0 3px #8E0B12; }
/* «اطلبه الحين» على بقعة صوص */
.sauce { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 66px; margin-top: 14px; padding: 10px 44px 14px;
  color: var(--paper); text-decoration: none; font-weight: 800; font-size: 1.6rem; line-height: 1.2; background: var(--red);
  border-radius: 56% 44% 52% 48% / 64% 58% 42% 36%; transform-origin: 50% 90%;
  filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 7px 0 var(--red-deep)); }
.sauce::before, .sauce::after { content: ""; position: absolute; background: var(--red); border-radius: 50% 50% 50% 50% / 28% 28% 72% 72%; }
.sauce::before { width: 17px; height: 32px; bottom: -19px; inset-inline-start: 20%; }
.sauce::after { width: 12px; height: 22px; bottom: -11px; inset-inline-end: 24%; }
.sauce:active { translate: 0 4px; }
.big-h { margin: 0; font-weight: 800; color: var(--red); font-size: clamp(3.2rem, 16.5vw, 8.5rem); line-height: 1.1; white-space: nowrap;
  --sw: clamp(6px, 1.6vw, 16px); --sc: var(--paper); filter: drop-shadow(0 4px 3px rgba(90, 20, 10, .16)); }
.big-h .w { display: inline-block; transform-origin: 50% 90%; }
.sec.red .big-h { color: var(--yellow); --sc: var(--red-deep); }
.anim .pop-in:not(.in), .anim .slide-in:not(.in) { opacity: 0; }
.pop-in.in { animation: pop .7s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * .12s); }
/* العناوين الكبيرة: تكبير خفيف بس (٤٪) عشان الكلمات ما تركب على بعض ولا تطلع برا الشاشة أثناء الحركة */
@keyframes popH { from { transform: translateY(var(--py, 26px)) rotate(var(--pr, -10deg)) scale(.55); opacity: 0; } 55% { opacity: 1; } 70% { transform: translateY(-2px) rotate(calc(var(--pr, -10deg) * -.08)) scale(1.04); } to { transform: none; opacity: 1; } }
.big-h .w.pop-in.in { animation: popH .75s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * .12s); }
.big-h .w + .w, h1.mega .w + .w { margin-inline-start: .14em; }
.slide-in.in { animation: slideIn .85s cubic-bezier(.2, .9, .3, 1.12) both; }
@keyframes slideIn { from { transform: translateX(var(--from, 70px)) rotate(8deg) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 2. عروضنا */
.offer { padding-top: 64px; }
.deals-w { margin-top: 130px; }
.deals { display: grid; gap: 50px; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.deal { width: min(100%, 440px); --tilt: -3deg; --from: 70px; }
.deal:nth-child(even) { --tilt: 3deg; --from: -70px; }
.deal-top { position: relative; rotate: var(--tilt); }
/* بطاقة الصورة: بيضاء وفيها شريط مربعات حمراء ورا المنتج (مثل منيو CRAV) */
.frame.deal-pic { aspect-ratio: 16 / 10; border: 0; border-radius: 26px; background: var(--paper); box-shadow: 0 10px 0 rgba(176, 14, 22, .16), 0 18px 26px rgba(120, 20, 10, .14); }
.frame.deal-pic::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 78px; translate: 0 -50%;
  background: repeating-conic-gradient(var(--red) 0 25%, var(--paper) 0 50%) 50% 0 / 52px 52px; }
.frame.deal-pic img { padding: 10px; }
.frame.deal-pic img.cut { inset: auto; left: 50%; top: 50%; translate: -50% -50%; width: 84%; height: auto; padding: 0; object-fit: fill; }
.frame.deal-pic.is-empty::before { display: none; }
/* تذكرة السعر: مكوّن معضوض (جبن / لحم / طماطم) */
.ptag-w { position: absolute; z-index: 3; margin: 0; bottom: -34px; inset-inline-end: -6px; rotate: calc(var(--tilt) * -2.4);
  filter: drop-shadow(2.5px 0 0 #fff) drop-shadow(-2.5px 0 0 #fff) drop-shadow(0 2.5px 0 #fff) drop-shadow(0 -2.5px 0 #fff) drop-shadow(0 7px 5px rgba(90, 20, 10, .3)); }
.ptag { display: flex; align-items: baseline; gap: 12px; direction: ltr; padding: 14px 26px 14px 20px;
  -webkit-mask: radial-gradient(circle 16px at calc(100% - 3px) 5px, #0000 97%, #000), radial-gradient(circle 11px at calc(100% - 29px) 1px, #0000 97%, #000), radial-gradient(circle 11px at calc(100% - 1px) 31px, #0000 97%, #000);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.ptag .price { font-size: 2.7rem; }
.ptag .was { font-size: 1.5rem; }
/* ستيكر سعر مرسوم (دجاج / لحم) والسعر مكتوب فوقه */
.ptag.art { display: block; position: relative; width: 156px; padding: 0; background: none; -webkit-mask: none; mask: none; }
.ptag.art .ptag-art { display: block; width: 100%; height: auto; }
.ptag.art .p { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.ptag.art .price { color: var(--paper); -webkit-text-stroke: 4px #4E1F0E; paint-order: stroke fill; font-size: 1.75rem; }
.ptag.art .was { color: var(--yellow); text-decoration-color: var(--paper); -webkit-text-stroke: 3px #4E1F0E; paint-order: stroke fill; font-size: 1rem; }
.ptag-w:has(.art) { bottom: -44px; inset-inline-end: 4px; }
.ptag.tomato .price { color: var(--paper); }
.ptag.tomato .was { color: var(--yellow); text-decoration-color: var(--paper); }
.ptag.tomato { padding: 24px 32px; border-radius: 50%; background: radial-gradient(ellipse at center, #FF6A5E 0 52%, var(--red) 54% 100%); }
.deal-body { margin-top: 40px; padding-inline: 4px; }
.deal-body h3 { margin: 0 0 6px; font-size: 1.8rem; font-weight: 800; line-height: 1.2; }
.deal-body h3 small { font-weight: 700; font-size: 1rem; color: var(--red-deep); letter-spacing: .05em; text-transform: uppercase; margin-inline-start: 6px; }
.deal-body .inc { margin: 8px 0 0; font-size: .98rem; line-height: 1.75; }
.deals-w { position: relative; }
.offer-stk { position: absolute; z-index: 4; width: 170px; top: -112px; inset-inline-start: 0; rotate: -8deg; filter: drop-shadow(0 8px 5px rgba(90, 20, 10, .25)); }

/* ---------- 3. ليش آيم هنجري (EXPERIENCE) */
.why { padding-top: 22px; padding-bottom: 0; }
.sec.red .big-h.why-h { color: var(--cream); --sc: var(--red-deep); white-space: nowrap; font-size: clamp(2.3rem, 11.6vw, 7.5rem); line-height: 1.12; }
.why-art { position: relative; height: min(112vw, 560px); margin-top: 0; }
.why-burger-w { position: absolute; width: min(94vw, 510px); left: 50%; top: 13%; margin-left: calc(min(94vw, 510px) / -2); z-index: 2; transform-origin: 50% 70%; }
.why-burger { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 12px rgba(60, 5, 5, .35)); }
.why-eyes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.why-eyes .pupil { transition: transform .22s cubic-bezier(.2, .8, .3, 1); }
.why-fries { position: absolute; width: min(21vw, 100px); top: 3%; inset-inline-end: 1%; z-index: 3; filter: drop-shadow(0 8px 6px rgba(60, 5, 5, .35)); }
.why-cow { position: absolute; width: min(24vw, 115px); top: 1%; inset-inline-start: 0; z-index: 3; filter: drop-shadow(0 8px 6px rgba(60, 5, 5, .35)); }
/* «قضمة وحدة وتفهم» على طرف البرجر، أصفر بحافة بيضاء بدون شريط (مثل BOLD FLAVOUR) */
.why-tape { position: absolute; z-index: 4; margin: 0; bottom: 12%; inset-inline-start: 1%; rotate: 12deg; transform-origin: 50% 90%; white-space: nowrap;
  color: var(--yellow); font-weight: 800; font-size: clamp(1.05rem, 5vw, 1.9rem); line-height: 1.1; --sw: 5px; --sc: var(--paper);
  filter: drop-shadow(0 3px 2px rgba(60, 5, 5, .35)); }
.why-facts { list-style: none; margin: 10px auto 0; padding-block: 0 40px; display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; gap: 4px 12px; }
.why-facts li { color: var(--cream); font-weight: 800; font-size: clamp(.85rem, 3.8vw, 1.3rem); line-height: 1.4; white-space: nowrap; }
.why-facts li:nth-child(even) { text-align: left; }
.why-photo-w { position: relative; background: linear-gradient(var(--red) 50%, var(--cream) 50%); }
.frame.why-photo { aspect-ratio: 4 / 5; border: 0; border-radius: 0; background-color: var(--cream);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 5 C 18 0, 32 0, 50 4 S 82 9, 100 3 L100 96 C 82 100, 66 100, 50 96 S 18 92, 0 97 Z' fill='black'/></svg>") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0 5 C 18 0, 32 0, 50 4 S 82 9, 100 3 L100 96 C 82 100, 66 100, 50 96 S 18 92, 0 97 Z' fill='black'/></svg>") 0 0 / 100% 100% no-repeat; }
.frame.why-photo .ph-inner { font-size: 1.1rem; }
/* الكلمات الأربع مثل جدار المطعم: متدرّجة يمين/يسار */
.why-photo-t { position: absolute; inset: 0; z-index: 2; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: .1em; padding: 8% 10%;
  color: var(--paper); font-weight: 800; font-size: clamp(3rem, 15vw, 7rem); line-height: 1.05; text-shadow: 0 4px 22px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .45); pointer-events: none; }
.why-photo-t span { display: block; transform-origin: 50% 90%; }
.why-photo-t span:nth-child(odd) { align-self: flex-start; }
.why-photo-t span:nth-child(even) { align-self: flex-end; }
.frame.why-photo.is-empty .why-photo-t { display: none; }

/* ---------- 4. gallery */
.polos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; margin: 0; padding: 0; }
.polo { position: relative; margin: 0; background: var(--paper); padding: 8px 8px 34px; border-radius: 18px; rotate: var(--r, -2deg);
  box-shadow: 0 6px 0 rgba(176, 14, 22, .14), 0 14px 22px rgba(120, 20, 10, .14); }
.polo .frame { border: 0; border-radius: 12px; }
.polo:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: min(100%, 420px); }
.polo figcaption { position: absolute; bottom: -12px; inset-inline-start: 8px; background: var(--yellow); color: var(--red-deep); font-weight: 800; font-size: 1rem; line-height: 1.4;
  padding: 2px 12px; border: 3px solid var(--paper); border-radius: 12px; rotate: calc(var(--r, -2deg) * -1.6); box-shadow: 0 4px 0 rgba(176, 14, 22, .25); }
.polo:nth-child(even) figcaption { background: var(--red-deep); color: var(--paper); }

/* ---------- interlude quote */
.quote { text-align: center; padding-block: 34px 120px; }
.quote p { margin: 0; font-weight: 800; font-size: clamp(2.2rem, 10vw, 4.6rem); line-height: 1.15; }
.quote .tp { margin-top: 8px; }

/* ---------- 5. why */
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 8px solid var(--ink); }
.fact { position: relative; padding: 18px 0 20px; padding-inline-end: 96px; border-bottom: 3px solid var(--ink); }
.fact:last-child { border-bottom-width: 8px; }
.fact .f-ar { margin: 0; font-weight: 800; font-size: clamp(2.5rem, 11.5vw, 4.2rem); line-height: 1.05; color: var(--ink); }
.fact .f-ar b { color: var(--red); font-weight: 800; }
.fact .f-en { margin: 6px 0 0; font-family: var(--en); font-weight: 900; font-size: clamp(1.1rem, 4.6vw, 1.5rem); letter-spacing: .05em; color: var(--red-deep); direction: ltr; text-align: right; }
.fact .stk, .fact .stmp { position: absolute; inset-inline-end: 0; top: 50%; translate: 0 -50%; width: 84px; rotate: var(--r, 8deg); }
.fact .stmp { width: 96px; mix-blend-mode: multiply; }

/* ---------- 4. المنيو (بطاقات بأسلوب CRAV) */
#menu { overflow: visible; padding-top: 60px; padding-bottom: 70px; }
.menu .big-h { margin-bottom: 18px; }
/* صورة المنيو الورقي بين يدين (مكان عنوان «المنيو» الصغير) — خلفيتها بنفس كريمي القسم */
.menu-mock { display: block; width: min(42%, 180px); height: auto; margin: -8px auto 0;
  -webkit-mask: linear-gradient(#000 84%, transparent); mask: linear-gradient(#000 84%, transparent); }
.tabs { position: sticky; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 15; background: var(--cream); margin-bottom: 4px; box-shadow: 0 8px 10px -10px rgba(120, 20, 10, .45); }
.tabs-row { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 1180px; margin: 0 auto; }
.tabs-row::-webkit-scrollbar { display: none; }
.tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 16px; border-radius: 999px; text-decoration: none;
  background: var(--paper); color: var(--ink); border: 2px solid rgba(27, 27, 27, .14); font-weight: 800; font-size: 1.05rem; white-space: nowrap; transition: background .2s, color .2s; }
.tab i { font-family: var(--en); font-style: normal; font-weight: 700; font-size: .85rem; letter-spacing: .05em; color: var(--red-deep); }
.tab .sl { color: rgba(27, 27, 27, .3); font-weight: 400; }
.tab.on { background: var(--red); border-color: var(--red); color: var(--paper); }
.tab.on i, .tab.on .sl { color: var(--paper); }
.cat { padding-top: 34px; scroll-margin-top: calc(var(--header-h) + var(--tabs-h) + 8px); }
.cat-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 16px; }
.cat-ar { margin: 0; color: var(--red); font-weight: 800; font-size: clamp(2.3rem, 11vw, 4.2rem); line-height: 1.1; --sw: clamp(5px, 1.3vw, 10px); --sc: var(--paper); filter: drop-shadow(0 3px 2px rgba(90, 20, 10, .15)); }
.cat-en { font-family: var(--en); font-weight: 900; font-size: 1.05rem; letter-spacing: .12em; color: var(--red-deep); }
.cat-sub { flex-basis: 100%; }
.cat-sub { display: inline-block; flex-basis: auto; background: var(--yellow); color: var(--red-deep); font-weight: 800; font-size: 1rem; padding: 0 .8em .05em; rotate: -2deg;
  clip-path: polygon(0 8%, 3% 0, 97% 4%, 100% 0, 98.5% 30%, 100% 60%, 98% 100%, 4% 96%, 0 100%, 1.6% 60%); }
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
.item { position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--paper); border-radius: 22px; overflow: hidden;
  box-shadow: 0 6px 0 rgba(176, 14, 22, .12), 0 12px 20px rgba(120, 20, 10, .1); }
.frame.item-pic { aspect-ratio: 1 / .86; border: 0; border-radius: 0; background: var(--paper); }
.frame.item-pic::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 44px; translate: 0 -50%;
  background: repeating-conic-gradient(var(--red) 0 25%, var(--paper) 0 50%) 50% 0 / 30px 30px; }
.frame.item-pic img { padding: 8px; }
.frame.item-pic img.cut { inset: auto; left: 50%; top: 50%; translate: -50% -50%; width: auto; height: auto; max-width: 90%; max-height: 88%; padding: 0; object-fit: fill; }
.frame.item-pic.is-empty::before { display: none; }
.item .new { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 3; background: var(--yellow); color: var(--red-deep); font-weight: 800; font-size: .95rem; line-height: 1.5;
  padding: 0 12px; border: 2.5px solid var(--paper); border-radius: 999px; rotate: -6deg; box-shadow: 0 3px 0 rgba(176, 14, 22, .3); }
.i-body { padding: 10px 12px 14px; display: flex; flex-direction: column; flex: 1; }
.i-ar { margin: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.25; }
.i-en { margin: 2px 0 0; font-family: var(--en); font-weight: 700; font-size: .8rem; line-height: 1.25; color: #6b5a50; letter-spacing: .03em; text-transform: uppercase; direction: ltr; text-align: right; }
.opt { margin: 4px 0 0; font-size: .9rem; color: var(--red-deep); }
.ing { margin: 5px 0 0; font-size: .86rem; line-height: 1.45; color: #5a4a40; }
.cat-note { flex-basis: 100%; display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: .98rem; font-weight: 600; color: var(--ink, #1b1b1b); }
.cat-note b svg { width: 15px; height: 15px; }
.cat-note b { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: var(--paper); font-family: var(--en); font-weight: 900; font-size: 1.05rem; line-height: 1; }
.i-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-top: auto; padding-top: 8px; }
.i-price { display: inline-flex; align-items: baseline; gap: 6px; direction: ltr; }
.i-price .price { font-size: 1.7rem; }
.i-price .was { font-size: 1rem; }
.sizes { display: flex; flex-wrap: wrap; gap: 0 10px; font-weight: 800; font-size: .95rem; }
.sizes .price { font-size: 1.3rem; }
.item .cal { font-size: .78rem; }
.combo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 8px 0 0; padding-top: 7px; border-top: 2px dashed rgba(176, 14, 22, .3); font-size: .9rem; }
.combo b { color: var(--red-deep); }
.combo .price { font-size: 1.05rem; }
.cat-list { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); background: var(--paper); border-radius: 22px; overflow: hidden; box-shadow: 0 6px 0 rgba(176, 14, 22, .12), 0 12px 20px rgba(120, 20, 10, .1); }
.cat-list .frame.item-pic { aspect-ratio: 16 / 10; }
.rows { list-style: none; margin: 0; padding: 4px 14px 10px; }
.rows li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 2px dashed rgba(176, 14, 22, .25); }
.rows li:last-child { border-bottom: 0; }
.rows .n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rows .n b { font-size: 1.1rem; }
.rows .n i { font-family: var(--en); font-style: normal; font-weight: 700; font-size: .78rem; color: #6b5a50; text-transform: uppercase; direction: ltr; text-align: right; }
.rows .price { font-size: 1.55rem; }
.vat { margin: 34px auto 0; text-align: center; font-weight: 800; color: var(--red-deep); font-size: 1rem; }
.vat .en { display: block; font-family: var(--en); font-weight: 700; font-size: .85rem; }
/* زر الاتصال العائم: يظهر داخل المنيو بس */
.fab-call { position: fixed; z-index: 25; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); left: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 6px 20px 8px 16px;
  background: var(--red); color: var(--paper); text-decoration: none; font-weight: 800; font-size: 1.2rem; border-radius: 999px; border: 3px solid var(--paper);
  box-shadow: 0 6px 0 var(--red-deep), 0 12px 20px rgba(90, 10, 5, .3); opacity: 0; translate: 0 30px; pointer-events: none; transition: opacity .25s, translate .3s cubic-bezier(.3, 1.4, .5, 1); }
.fab-call svg { width: 22px; height: 22px; fill: currentColor; }
.fab-call.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.fab-call:active { transform: translateY(3px); }
@media (min-width: 620px) {
  .items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .cat-list { grid-template-columns: 300px minmax(0, 1fr); align-items: center; }
}
@media (min-width: 860px) {
  .items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .cat { padding-top: 50px; }
  .fab-call { left: 28px; bottom: 28px; }
}

/* ---------- 8. order */
.order-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.order-card { position: relative; background: var(--cream); color: var(--ink); border: 5px solid var(--paper); border-radius: 28px; padding: 26px 20px 28px; max-width: 640px;
  box-shadow: 0 8px 0 var(--red-deep), 0 18px 28px rgba(90, 10, 5, .25); }
.order-card h3 { margin: 10px 0 0; font-size: 2rem; font-weight: 800; line-height: 1.2; }
.big-num { display: inline-block; font-family: var(--en); font-weight: 900; font-size: clamp(2.6rem, 13vw, 4.4rem); line-height: 1.1; color: var(--red); text-decoration: none; direction: ltr; letter-spacing: .02em; user-select: all; }
.perk { margin: 8px 0 20px; font-size: 1.15rem; font-weight: 800; line-height: 1.7; }
.order-card .stk { position: absolute; width: 96px; bottom: -34px; inset-inline-end: 10px; rotate: -8deg; }

/* ---------- 9. visit */
.visit-grid { display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.info { margin: 0 0 22px; display: grid; gap: 14px; }
.info div { border-inline-start: 6px solid var(--red); padding-inline-start: 12px; }
.info dt { font-weight: 800; color: var(--red-deep); font-size: .95rem; }
.info dd { margin: 0; font-weight: 600; font-size: 1.15rem; line-height: 1.6; }
.visit-photo { position: relative; rotate: 1.5deg; }
.visit-photo .polo { --r: 0deg; }
.visit-photo .stk { position: absolute; width: 86px; top: -36px; inset-inline-end: -6px; rotate: 10deg; z-index: 3; }

.social[hidden] { display: none; }

@media (min-width: 620px) {
}
@media (min-width: 860px) {
  :root { --header-h: 104px; }
  .sec { padding-block: 84px; }
  .sec.wave-b { padding-bottom: 200px; }
  .sec.wave-b::after { height: 140px; }
  .marquee { padding-bottom: 130px; }
  .marquee::after { height: 100px; }
  .quote { padding-block: 50px 170px; }
  .deals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; max-width: 1000px; margin-inline: auto; align-items: start; }
  .offer-stk { width: 230px; top: -150px; }
  .deals-w { margin-top: 150px; }
  .polos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 44px 26px; }
  .polo { grid-column: span 2; }
  .polo:nth-child(4) { grid-column: 2 / span 2; }
  .polo:last-child:nth-child(odd) { grid-column: span 2; width: auto; justify-self: stretch; }
  .polo figcaption { font-size: 1.15rem; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 8px solid var(--ink); }
  .fact { border-bottom: 0; padding: 26px 22px 30px; padding-inline-end: 22px; border-inline-start: 3px solid var(--ink); }
  .fact:first-child { border-inline-start: 0; padding-inline-start: 0; }
  .fact:last-child { border-bottom-width: 0; }
  .fact .f-ar { font-size: clamp(2.6rem, 4.6vw, 3.9rem); }
  .fact .stk, .fact .stmp { position: static; translate: none; width: 104px; margin-bottom: 10px; }
  .fact .stmp { width: 120px; }
  .visit-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; }
  .order-card { padding: 36px 34px 38px; }
  .order-card .stk { width: 130px; }
}
@media (min-width: 860px) {
  .why-art { height: 620px; max-width: 1000px; }
  .why-burger-w { width: 580px; margin-left: -290px; top: 4%; }
  .why-fries { width: 130px; inset-inline-end: 6%; top: 6%; }
  .why-cow { width: 150px; inset-inline-start: 6%; top: 4%; }
  .why-tape { inset-inline-start: 22%; bottom: 14%; }
  .why-facts { max-width: 1000px; }
  .frame.why-photo { aspect-ratio: 16 / 7; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track { animation: none !important; }
  .rise.in, .slap-in.in, .stamp-in.in, .pop-in.in, .slide-in.in { animation: none !important; }
}

/* ---------- 5. زورنا */
.visit { padding-bottom: 80px; }
.visit-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 46px; margin-top: 18px; }
/* ٣ صور بولارويد صغيرة على شكل قوس (مروحة): الوسطى أعلى، والجانبية مايلة ونازلة شوي */
.pols { display: flex; justify-content: center; align-items: flex-start; padding: 26px 0 50px; }
.polaroid { position: relative; flex: none; margin: 0 -7px; width: min(29vw, 210px); background: var(--paper); padding: 6px 6px 22px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 12px 20px rgba(110, 30, 10, .22); transform-origin: 50% 120%; }
.polaroid:nth-child(1) { rotate: 11deg; translate: 0 22px; z-index: 1; }
.polaroid:nth-child(2) { rotate: -1deg; translate: 0 -4px; z-index: 2; }
.polaroid:nth-child(3) { rotate: -11deg; translate: 0 22px; z-index: 1; }
.polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* الضغط على الصورة (أو المرور عليها بالماوس): تعتدل وترتفع وتكبر شوي، الإطار كله يكبر بالصورة اللي فيه — مثل CRAV */
.polaroid { cursor: pointer; -webkit-tap-highlight-color: transparent; will-change: rotate, translate, scale; backface-visibility: hidden; transition: rotate .5s cubic-bezier(.34, 1.56, .64, 1), translate .5s cubic-bezier(.34, 1.56, .64, 1), scale .45s cubic-bezier(.25, .8, .35, 1), box-shadow .35s ease; }
/* طبقة مستقلة للصورة عشان ما تهتز وهي تكبر (خصوصًا في آيفون) */
.pz { display: block; overflow: hidden; transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.polaroid.zoom { rotate: 0deg; translate: 0 -16px; scale: 1.14; z-index: 5; box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 26px 34px rgba(110, 30, 10, .32); }
.polaroid:focus-visible { outline: 4px solid var(--mustard); outline-offset: 4px; }
@media (hover: hover) {
  .polaroid:hover { rotate: 0deg; translate: 0 -16px; scale: 1.14; z-index: 5; box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 26px 34px rgba(110, 30, 10, .32); }
}
.ptape { position: absolute; top: -13px; left: 50%; translate: -50% 0; rotate: 4deg; }
.ptape > span { display: block; background: var(--yellow); color: var(--red-deep); font-weight: 800; font-size: clamp(.78rem, 3.3vw, 1.05rem); line-height: 1.3; padding: .12em .9em .16em; white-space: nowrap;
  clip-path: polygon(0 8%, 3% 0, 97% 4%, 100% 0, 98.5% 30%, 100% 60%, 98% 100%, 4% 96%, 0 100%, 1.6% 60%); box-shadow: 0 4px 6px rgba(90, 20, 10, .2); }
/* الدبوس راكب على زاوية كرت الموقع */
.visit-pin { position: absolute; z-index: 3; width: min(30vw, 140px); height: auto; top: -78px; inset-inline-end: -14px; }
/* كرت الموقع */
.pin-card { position: relative; width: min(88vw, 420px); background: var(--paper); border-radius: 28px; padding: 26px 22px 24px; text-align: center; rotate: 1.5deg;
  border: 3px dashed rgba(176, 14, 22, .35); outline: 6px solid var(--paper); box-shadow: 0 8px 0 rgba(176, 14, 22, .14), 0 18px 28px rgba(110, 30, 10, .16); }
.pin-ico { width: 46px; height: 46px; fill: var(--red); margin: -50px auto 6px; display: block; background: var(--paper); border-radius: 50%; padding: 6px; box-shadow: 0 4px 0 rgba(176, 14, 22, .2); }
.addr { margin: 0 0 18px; line-height: 1.25; }
.addr b { display: block; font-size: 2rem; font-weight: 800; color: var(--red); }
.addr span { display: block; font-size: 1.35rem; font-weight: 600; color: var(--ink); }
.map-btn { justify-content: center; width: fit-content; margin: 0 auto; }
.map-btn b { font-size: 1.35rem; font-weight: 800; }
@media (min-width: 860px) {
  .polaroid { margin: 0 -6px; padding: 8px 8px 28px; }
}

/* ---------- 6. الختام */
.finale { padding-top: 58px; padding-bottom: 62px; }
/* حواف متموجة فوق وتحت (قناع: موجة فوق + مستطيل + موجة مقلوبة تحت) */
.sec.wavy { --wv: 34px; -webkit-mask: var(--wave) top / 100% var(--wv) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--wv) - 1px) / 100% calc(100% - var(--wv) * 2 + 2px) no-repeat, var(--wave-f) bottom / 100% var(--wv) no-repeat;
  mask: var(--wave) top / 100% var(--wv) no-repeat, linear-gradient(#000 0 0) 0 calc(var(--wv) - 1px) / 100% calc(100% - var(--wv) * 2 + 2px) no-repeat, var(--wave-f) bottom / 100% var(--wv) no-repeat; }
.sec.red .big-h.fin-h { color: var(--yellow); font-size: clamp(2.6rem, 13vw, 8rem); line-height: 1.1; }
.fin-cow { display: block; width: min(58vw, 290px); height: auto; margin: 4px auto 0; filter: drop-shadow(0 10px 14px rgba(60, 5, 5, .35)); }
.fin-call { margin-top: 10px; background: var(--yellow); color: var(--red-deep); box-shadow: 0 7px 0 var(--red-deep), 0 14px 24px rgba(60, 5, 5, .3); }
.fin-call b { font-size: 1.7rem; }
.fin-call:active { box-shadow: 0 3px 0 var(--red-deep); }

/* ---------- 7. الفوتر */
.foot { background: var(--cream); color: var(--ink); padding: 44px 0 18px; overflow: hidden; text-align: center; }
.foot-in { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.foot-stk { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 4vw, 34px); }
.foot-stk li { rotate: var(--r, 0deg); }
.foot-stk img { display: block; height: clamp(58px, 17vw, 110px); width: auto; filter: drop-shadow(0 5px 4px rgba(90, 20, 10, .2)); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px clamp(14px, 4.5vw, 26px); }
.foot-links a { color: var(--ink); text-decoration: none; font-weight: 800; font-size: clamp(1rem, 4.4vw, 1.2rem); white-space: nowrap; }
.foot-links a:hover { color: var(--red); }
.foot-tel { font-family: var(--en); font-weight: 900; font-size: 1.9rem; color: var(--red); text-decoration: none; direction: ltr; letter-spacing: .03em; }
.foot-vat { margin: 0; font-size: .95rem; font-weight: 600; color: var(--red-deep); }
.foot-logo { display: block; width: min(52vw, 340px); height: auto; margin: 26px auto 0; }
.foot-copy { margin: 12px 0 0; font-size: .9rem; color: #6b5a50; }
.foot-copy, .foot-tel { unicode-bidi: isolate; }