@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Caveat+Brush&family=El+Messiri:wght@500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,900&display=swap");
@font-face { font-family: "Rabar Bold"; src: url("fonts/Rabar_013.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Rabar Text"; src: url("fonts/Rabar_014.woff") format("woff"); font-display: swap; }

:root {
  --burgundy: #660002; --scarlet: #bf0004; --charcoal: #2f2e2d; --night: #1b1a19; --bone: #f5f2eb; --bone-2: #e9e3d6; --ink-soft: #6b6662; --blaze: #ff6b00;
  --display: "Fraunces", "Times New Roman", serif; --body: "Archivo", "Helvetica Neue", Arial, sans-serif; --hand: "Caveat Brush", "Archivo", cursive;
  --pad: clamp(18px, 5vw, 72px); --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lang-ku { --display: "Rabar Bold", serif; --body: "Rabar Text", sans-serif; --hand: "Rabar Bold", serif; }
.lang-ar { --display: "El Messiri", "Rabar Bold", serif; --body: "Rabar Text", sans-serif; --hand: "El Messiri", serif; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bone); color: var(--charcoal); font: 16px/1.55 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
.lang-ku body, .lang-ar body { font-size: 17px; line-height: 1.8; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; margin: 0; overflow-wrap: break-word; }
.lang-ku :is(h1, h2, h3), .lang-ar :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.3; }
h2 { font-size: clamp(2.2rem, 6vw, 5.2rem); }
p { overflow-wrap: break-word; }
.logo-accent { fill: var(--scarlet); }
.eyebrow { font-family: var(--hand); color: var(--scarlet); font-size: 1.5rem; margin: 0 0 0.6rem; transform: rotate(-2deg); display: inline-block; }
.lede { max-width: 34rem; font-size: 1.12rem; color: var(--ink-soft); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* reveal: transform only */
.is-js [data-reveal] { transform: translate3d(0, 56px, 0) rotate(0.6deg); transition: transform 1.1s var(--ease); }
.is-js [data-reveal].is-in { transform: none; }

/* NAV */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 24px; padding: max(16px, env(safe-area-inset-top)) var(--pad) 16px; color: var(--bone); transition: background 0.4s var(--ease), padding 0.4s var(--ease); animation: nav-in 1s var(--ease) both; }
@keyframes nav-in { from { transform: translateY(-100%); } }
.nav.is-scrolled { background: rgba(27, 26, 25, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding-block: 12px; }
.nav__logo { flex: none; }
.nav__logo svg { height: 26px; width: auto; display: block; }
.nav__links { display: flex; gap: 26px; margin-inline-start: auto; }
.nav__links a { text-decoration: none; font-weight: 600; font-size: 0.95rem; position: relative; }
.nav__links a::after { content: ""; position: absolute; inset: auto 0 -6px; height: 2px; background: var(--scarlet); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__end { display: flex; align-items: center; gap: 14px; }
.lang-switch { display: flex; border: 1px solid rgba(245, 242, 235, 0.35); border-radius: 999px; padding: 3px; }
.lang-switch a { text-decoration: none; font: 600 0.8rem/1 var(--body); padding: 7px 11px; border-radius: 999px; }
.lang-switch a:nth-child(n + 2) { font-family: "Rabar Bold", sans-serif; font-size: 0.85rem; }
.lang-switch a[aria-current] { background: var(--bone); color: var(--burgundy); }
.cta-nav { background: var(--scarlet); color: var(--bone); text-decoration: none; font-weight: 700; padding: 11px 18px; border-radius: 4px; white-space: nowrap; transition: transform 0.3s var(--ease), background 0.3s; }
.cta-nav:hover { background: var(--burgundy); transform: translateY(-2px) rotate(-1.5deg); }
.nav__burger { display: none; width: 42px; height: 42px; border: 0; background: none; position: relative; cursor: pointer; }
.nav__burger span { position: absolute; inset-inline: 9px; height: 2px; background: var(--bone); transition: transform 0.3s var(--ease); }
.nav__burger span:first-child { top: 16px; }
.nav__burger span:last-child { top: 25px; }
.is-open .nav__burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
.is-open .nav__burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* HERO FILM */
.scrub__title { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
.scrub__kicker { font-family: var(--hand); }
.cta-hero { --mx: 0px; --my: 0px; display: inline-flex; align-items: center; background: var(--scarlet); color: var(--bone); text-decoration: none; font: 800 1.05rem/1 var(--body); padding: 18px 28px; border-radius: 999px; transform: translate(var(--mx), var(--my)); transition: transform 0.25s var(--ease); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(191, 0, 4, 0.6); } 70% { box-shadow: 0 0 0 18px rgba(191, 0, 4, 0); } 100% { box-shadow: 0 0 0 0 rgba(191, 0, 4, 0); } }
.cta-ghost { display: inline-flex; align-items: center; padding: 17px 24px; border: 1.5px solid rgba(245, 242, 235, 0.6); border-radius: 999px; color: var(--bone); text-decoration: none; font-weight: 700; transition: background 0.3s, color 0.3s; }
.cta-ghost:hover { background: var(--bone); color: var(--burgundy); }

/* MARQUEE */
.marquee { background: var(--burgundy); color: var(--bone); overflow: hidden; padding: 18px 0; transform: rotate(-1.5deg) scale(1.03); margin-block: -12px; position: relative; z-index: 5; }
.marquee__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
[dir="rtl"] .marquee__track { animation-direction: reverse; }
.marquee__set { display: flex; }
.marquee__set span { display: inline-flex; align-items: center; gap: 28px; padding-inline-end: 28px; font: 800 clamp(1.3rem, 3vw, 2.4rem)/1.2 var(--display); text-transform: uppercase; white-space: nowrap; }
.marquee__mark { width: 34px; height: 34px; color: var(--bone); }
@keyframes marquee { to { transform: translateX(-50%); } }

.sec { padding: clamp(72px, 12vw, 160px) var(--pad); position: relative; }

/* MENU */
.menu-head { max-width: 900px; margin-bottom: 56px; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; }
.dish { --rx: 0deg; --ry: 0deg; background: var(--night); color: var(--bone); border-radius: 22px; overflow: hidden; perspective: 900px; }
.dish:nth-child(3n + 2) { margin-top: 48px; }
.dish__media { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.35s var(--ease); }
.dish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.dish:hover .dish__media img { transform: scale(1.08) rotate(-1deg); }
.dish__badge { position: absolute; top: 14px; inset-inline-start: 14px; background: var(--bone); color: var(--burgundy); font: 700 0.8rem/1.2 var(--body); padding: 8px 12px; border-radius: 999px; transform: rotate(-4deg); }
.dish__body { padding: 22px 22px 26px; }
.dish__no { font: 1.2rem var(--hand); color: #ff4d3d; }
.dish h3 { font-size: 1.8rem; margin: 2px 0 8px; }
.dish p { margin: 0; color: rgba(245, 242, 235, 0.72); }

/* STORY */
.sec-story { background: var(--bone-2); overflow: hidden; }
.stamp { position: absolute; top: 60px; inset-inline-end: var(--pad); width: 150px; height: 150px; animation: spin 22s linear infinite; }
.stamp text { font: 800 15px var(--body); letter-spacing: 2.2px; fill: var(--burgundy); }
@keyframes spin { to { transform: rotate(360deg); } }
.statement { --p: 0; font: 700 clamp(1.8rem, 5.4vw, 4.8rem)/1.08 var(--display); max-width: 1150px; margin: 0 0 40px; letter-spacing: -0.02em; }
.lang-ku .statement, .lang-ar .statement { line-height: 1.45; letter-spacing: 0; }
.statement span { color: rgba(47, 46, 45, 0.22); transition: color 0.4s; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .statement span { color: color-mix(in srgb, var(--burgundy) calc(clamp(0, (var(--p) - var(--i)) * 12, 1) * 100%), rgba(47, 46, 45, 0.22)); }
}
.is-reduced .statement span { color: var(--burgundy); }
.story-body { max-width: 40rem; font-size: 1.2rem; }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-top: 60px; }
.value { border-top: 2px solid var(--charcoal); padding-top: 20px; }
.value__no { font: 1.3rem var(--hand); color: var(--scarlet); }
.value h3 { font-size: 1.6rem; margin: 6px 0 8px; }

/* GALLERY */
.sec-gallery { background: var(--night); color: var(--bone); overflow: hidden; }
.gallery-title { text-align: center; margin-bottom: 70px; }
.gallery-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.gallery-col__inner { display: grid; gap: 22px; will-change: transform; }
.gallery-col:nth-child(2) { margin-top: 90px; }
.shot { margin: 0; border-radius: 18px; overflow: hidden; position: relative; }
.shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s var(--ease); }
.shot:hover img { transform: scale(1.06); }
.shot figcaption { position: absolute; inset: auto 14px 14px; font: 1.25rem var(--hand); color: var(--bone); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }

/* REVIEWS */
.sec-reviews { text-align: center; }
.rating { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; background: var(--night); color: var(--bone); padding: 10px 20px; border-radius: 999px; margin-bottom: 26px; }
.rating strong { font: 800 1.6rem/1 var(--display); }
.stars { color: var(--blaze); letter-spacing: 2px; }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 56px; text-align: start; }
.quote { margin: 0; background: var(--bone-2); border-radius: 20px; padding: 30px; position: relative; }
.quote::before { content: "\201C"; position: absolute; top: -10px; inset-inline-end: 22px; font: 900 6rem/1 var(--display); color: var(--scarlet); }
.quote p { font: 600 1.25rem/1.4 var(--display); margin: 0 0 18px; }
.quote cite { font-style: normal; color: var(--ink-soft); font-size: 0.9rem; }

/* ORDER */
.sec-order { background: var(--scarlet); color: var(--bone); display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; scroll-margin-top: 60px; }
.order__copy h2 { font-size: clamp(2.4rem, 7vw, 6rem); }
.order__copy p { font-size: 1.2rem; max-width: 28rem; }
.order__actions { display: grid; gap: 14px; }
.order__actions a { --mx: 0px; --my: 0px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none; font: 800 1.35rem/1.1 var(--body); padding: 24px 28px; border-radius: 14px; transform: translate(var(--mx), var(--my)); transition: transform 0.25s var(--ease), background 0.3s, color 0.3s; }
.cta-talabat { background: var(--bone); color: var(--scarlet); }
.cta-lezzoo { background: var(--night); color: var(--bone); }
.cta-whatsapp { border: 2px solid var(--bone); }
.cta-whatsapp:hover { background: var(--bone); color: var(--burgundy); }
.cta-call { background: var(--burgundy); font-size: 1.1rem !important; }
.order__actions i { font-style: normal; transition: transform 0.3s var(--ease); }
.order__actions a:hover i { transform: translate(4px, -4px); }

/* VISIT */
.sec-visit { background: var(--night); color: var(--bone); overflow: hidden; }
.neon { display: flex; justify-content: center; margin-bottom: 70px; }
.neon__logo { width: min(900px, 92%); height: auto; color: var(--bone); filter: drop-shadow(0 0 6px rgba(255, 244, 230, 0.75)) drop-shadow(0 0 22px rgba(255, 210, 170, 0.35)); animation: flicker 6s infinite; }
@keyframes flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.55; } }
.visit__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; }
.address { font: 600 1.4rem/1.4 var(--display); margin: 20px 0 8px; }
.visit-note { color: rgba(245, 242, 235, 0.7); }
.cta-map { display: inline-block; margin-top: 18px; font: 700 1.05rem var(--body); color: var(--bone); text-decoration: underline; text-decoration-color: var(--scarlet); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.cta-map i { font-style: normal; }
.hours { background: rgba(245, 242, 235, 0.07); border: 1px solid rgba(245, 242, 235, 0.15); border-radius: 20px; padding: 30px; }
.hours h3 { font-size: 1.5rem; margin-bottom: 14px; }
.hours dl { margin: 0; }
.hours dl div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px dashed rgba(245, 242, 235, 0.25); }
.hours dd { margin: 0; font-weight: 700; }

/* CAREERS + FRANCHISE */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.jobs { list-style: none; padding: 0; margin: 30px 0 0; }
.jobs li { border-top: 1.5px solid var(--charcoal); }
.jobs button { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: none; border: 0; padding: 20px 0; cursor: pointer; font: 700 1.5rem var(--display); color: inherit; text-align: start; }
.jobs small { font: 600 0.9rem var(--body); color: var(--scarlet); }
.job__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.job__body p { overflow: hidden; margin: 0; color: var(--ink-soft); }
.jobs .is-open .job__body { grid-template-rows: 1fr; padding-bottom: 18px; }
.smd-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: var(--night); color: var(--bone); padding: clamp(22px, 4vw, 40px); border-radius: 24px; position: relative; }
.smd-form label { display: grid; gap: 6px; font-size: 0.9rem; font-weight: 600; }
.smd-form .wide { grid-column: 1 / -1; }
.smd-form input, .smd-form select, .smd-form textarea { width: 100%; background: rgba(245, 242, 235, 0.08); border: 1px solid rgba(245, 242, 235, 0.22); border-radius: 10px; color: var(--bone); padding: 13px 14px; font: inherit; font-size: 16px; }
.smd-form select option { color: var(--charcoal); }
.smd-form input:focus, .smd-form select:focus, .smd-form textarea:focus { outline: 2px solid var(--scarlet); border-color: transparent; }
.submit { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: 12px; padding: 18px 22px; font: 800 1.1rem var(--body); cursor: pointer; transition: transform 0.3s var(--ease); }
.submit:disabled { opacity: 0.6; }
.submit i { font-style: normal; }
[dir="rtl"] .submit i { transform: scaleX(-1); }
.submit--careers { background: var(--scarlet); color: var(--bone); }
.submit--franchise { background: var(--bone); color: var(--burgundy); }
.submit:hover { transform: translateY(-3px); }
.form-msg { grid-column: 1 / -1; margin: 0; font-weight: 700; min-height: 1em; }
.smd-form.is-sent .form-msg { font: 700 1.3rem var(--display); }
.sec-franchise { background: var(--burgundy); color: var(--bone); }
.sec-franchise .lede { color: rgba(245, 242, 235, 0.75); }
.sec-franchise .eyebrow { color: var(--bone); }
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin: 50px 0; }
.point { border: 1px solid rgba(245, 242, 235, 0.25); border-radius: 20px; padding: 26px; }
.point__mark { width: 40px; height: 40px; color: var(--bone); margin-bottom: 14px; }
.point h3 { font-size: 1.5rem; margin-bottom: 8px; }

/* FOOTER */
.footer { background: var(--night); color: var(--bone); padding: 80px var(--pad) 40px; text-align: center; }
.footer__logo { width: min(560px, 90%); height: auto; margin: 0 auto; display: block; }
.footer__line { font: 1.8rem var(--hand); margin: 18px 0 30px; }
.footer__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 26px; }
.footer__links a { text-decoration: none; font-weight: 700; }
.footer__links a:hover { color: var(--scarlet); }
.footer__small { margin-top: 40px; font-size: 0.85rem; color: rgba(245, 242, 235, 0.55); }

/* RESPONSIVE */
@media (max-width: 980px) {
  .nav.is-scrolled, .nav.is-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--night); }
  .nav__links { position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: center; gap: 22px; padding: 90px 24px 40px; background: var(--night); transform: translateY(-100%); transition: transform 0.5s var(--ease); z-index: -1; margin: 0; }
  .nav__links a { font: 700 1.9rem var(--display); }
  .is-open .nav__links { transform: none; }
  .nav__burger { display: block; }
  .nav__end { margin-inline-start: auto; }
  .cta-nav { display: none; }
  .sec-order, .visit__grid, .split { grid-template-columns: 1fr; }
  .gallery-cols { grid-template-columns: 1fr 1fr; gap: 14px; }
  .gallery-col, .gallery-col__inner { display: contents; }
  .gallery-col:nth-child(2) { margin-top: 0; }
  .gallery-title { margin-bottom: 40px; }
  .dish:nth-child(3n + 2) { margin-top: 0; }
  .neon { margin-bottom: 44px; }
}
@media (max-width: 560px) {
  :root { --pad: 18px; }
  .sec { padding-block: 72px; }
  h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .nav { gap: 10px; padding-inline: 14px; }
  .nav__logo svg { height: 20px; }
  .nav__end { gap: 6px; }
  .lang-switch a { padding: 6px 7px; font-size: 0.72rem; }
  .lang-switch a:nth-child(n + 2) { font-size: 0.78rem; }
  .cta-hero, .cta-ghost { padding: 15px 20px; font-size: 0.98rem; }
  .marquee { padding: 12px 0; }
  .marquee__mark { width: 24px; height: 24px; }
  .menu-grid { grid-template-columns: 1fr; }
  .dish__media { aspect-ratio: 4 / 3.6; }
  .sec-story { padding-top: 130px; }
  .stamp { width: 96px; height: 96px; top: 24px; inset-inline-end: 18px; }
  .statement { font-size: clamp(1.6rem, 8vw, 2.3rem); }
  .gallery-cols { gap: 10px; }
  .shot { border-radius: 12px; }
  .shot figcaption { font-size: 1rem; inset: auto 10px 8px; }
  .quote { padding: 24px; }
  .quote p { font-size: 1.1rem; }
  .order__actions a { padding: 20px; font-size: 1.15rem; }
  .hours { padding: 22px; }
  .hours dl div { flex-direction: column; gap: 2px; }
  .jobs button { flex-direction: column; align-items: flex-start; font-size: 1.25rem; }
  .smd-form { grid-template-columns: 1fr; border-radius: 18px; }
  .footer__line { font-size: 1.4rem; }
}
@media (max-width: 370px) {
  .nav__logo svg { height: 16px; }
  .lang-switch a { padding: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}