/* =========================================================================
   NAJA RESTAURANT — HOMEPAGE STYLES
   Arabic-first (RTL) with full LTR support. Logical properties are used
   throughout so the layout mirrors genuinely between languages.
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand palette — sampled from the Naja logo (red mark, charcoal wall, white letters, warm sign glow) */
  --bg: #121212;
  --bg-2: #1a1a1a;
  --bg-3: #0d0d0d;
  --brand-fill: #ee1d23;            /* logo red: buttons, fills */
  --brand: #ff4d45;                 /* logo red, lifted for AA text contrast on charcoal */
  --brand-deep: #7a0b10;            /* deep red for glows and shadows */
  --brand-soft: rgba(238, 29, 35, 0.6);
  --brand-line: rgba(238, 29, 35, 0.26);
  --brand-faint: rgba(238, 29, 35, 0.09);
  --glow: #ffd9b8;                  /* warm halo of the illuminated sign */
  --cream: #fff8f2;
  --white: #ffffff;
  --muted: #a8a8a8;

  --page-bg: var(--bg);

  --font-ar: "Fustat", "Segoe UI", Tahoma, sans-serif;
  --font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Kaushan Script", "Brush Script MT", cursive;

  --grad-brand: linear-gradient(120deg, #ff5a4f 0%, #ee1d23 40%, #b3121a 68%, #ff4d45 100%);
  --grad-text: linear-gradient(100deg, #ffffff 0%, #ffd9b8 22%, #ff4d45 45%, #ee1d23 60%, #ffd9b8 80%, #ffffff 100%);
  --grad-ember: linear-gradient(135deg, rgba(238, 29, 35, 0.22) 0%, rgba(255, 140, 90, 0.08) 55%, rgba(18, 18, 18, 0) 100%);

  --container: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 76px;
  --section-space: clamp(88px, 12vw, 168px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-deep: 0 1px 0 rgba(255, 255, 255, 0.03) inset,
                 0 30px 60px -20px rgba(0, 0, 0, 0.7),
                 0 18px 36px -18px rgba(0, 0, 0, 0.6);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  overflow-x: clip;
  background: var(--bg);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--cream);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
[hidden] { display: none !important; }

/* ---------- Language fonts ---------- */
:lang(ar) { font-family: var(--font-ar); }
:lang(en) { font-family: var(--font-en); }

.icon { width: 1.15em; height: 1.15em; flex: none; }
[dir="rtl"] .icon--dir { transform: scaleX(-1); }
[dir="ltr"] .icon--back { transform: scaleX(-1); }
.icon--up { transform: rotate(-90deg) !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.skip-link {
  position: fixed; inset-inline-start: 16px; top: 12px; z-index: 2000;
  padding: 10px 18px; background: var(--brand); color: var(--bg); font-weight: 600;
  transform: translateY(-160%); transition: transform 0.3s var(--ease);
}
.skip-link:focus { transform: none; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-space); position: relative; }

/* ---------- Image frames & graceful fallback ---------- */
.img-frame {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(238, 29, 35, 0.14), transparent 60%),
    radial-gradient(90% 80% at 80% 90%, rgba(122, 11, 16, 0.35), transparent 60%),
    repeating-linear-gradient(135deg, rgba(238, 29, 35, 0.045) 0 1px, transparent 1px 14px),
    var(--bg-2);
}
.img-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.6s var(--ease-soft);
}
.img-frame.is-loading img { opacity: 0; }
.img-frame.is-failed img { opacity: 0; visibility: hidden; }
.img-frame.hero__media.is-failed::after { display: none; }
.img-frame.is-failed::after {
  content: "NAJA · نجا";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-en);
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  letter-spacing: 0.4em;
  color: var(--brand-soft);
  pointer-events: none;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--brand);
  font-size: 0.8rem; font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  margin-block-end: 22px;
}
.eyebrow:lang(ar) { letter-spacing: 0; font-size: 0.98rem; font-weight: 500; }
.eyebrow__line { width: 44px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand)); }
[dir="rtl"] .eyebrow__line { background: linear-gradient(-90deg, transparent, var(--brand)); }
.eyebrow--center { justify-content: center; }
.eyebrow--center .eyebrow__line:last-child { transform: scaleX(-1); }

.section-num {
  font-family: var(--font-en);
  font-size: 0.78rem; letter-spacing: 0.2em;
  color: var(--brand); margin-block-end: 18px;
}
.section-num span { color: var(--muted); opacity: 0.6; }

.section-title {
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1.12;
  font-weight: 700;
  color: var(--cream);
  text-wrap: balance;
}
.section-title:lang(en) { font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; }
.section-title--xl { font-size: clamp(2.3rem, 5.2vw, 4.6rem); }
.section-title--center { text-align: center; }

.section-copy {
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  max-width: 54ch;
  margin-block-start: 22px;
}
.section-copy--muted { opacity: 0.8; margin-block-start: 14px; }
.section-copy--center { text-align: center; margin-inline: auto; }

.section-head { margin-block-end: clamp(40px, 6vw, 72px); }
.section-head--split { display: grid; gap: 24px; align-items: end; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.1fr 0.9fr; gap: 6vw; }
  .section-head--split .section-copy { margin-block-start: 0; }
}

.notice {
  margin-block-start: 18px;
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.86rem; color: var(--brand);
  border: 1px solid var(--brand-line);
  padding: 8px 14px;
  background: var(--brand-faint);
}
.notice::before { content: ""; width: 6px; height: 6px; background: var(--brand); transform: rotate(45deg); flex: none; }
.notice--quiet { color: var(--muted); }

.accent-rule {
  display: block; width: 88px; height: 1px; margin-block: 28px;
  background: linear-gradient(90deg, var(--brand), transparent);
}
[dir="rtl"] .accent-rule { background: linear-gradient(-90deg, var(--brand), transparent); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border: 1px solid var(--brand-soft);
  font-size: 0.95rem; font-weight: 500; line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: color 0.35s var(--ease), background-color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn:lang(ar) { letter-spacing: 0; font-weight: 700; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 0.88rem; }
.btn--lg { min-height: 56px; padding: 0 32px; font-size: 1rem; }
.btn--block { width: 100%; }

.btn--brand {
  background: var(--grad-brand); background-size: 220% 100%; background-position: 0% 50%;
  color: #ffffff; border-color: transparent;
  box-shadow: 0 10px 30px -12px rgba(238, 29, 35, 0.55);
  transition: background-position 0.8s var(--ease), box-shadow 0.5s var(--ease), color 0.35s, transform 0.35s var(--ease);
}
.btn--brand::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.9s var(--ease);
  pointer-events: none;
}
.btn--brand:hover { background-position: 100% 50%; box-shadow: 0 16px 40px -12px rgba(238, 29, 35, 0.75); }
.btn.is-magnetic { transition-duration: 0.15s; }
.btn--brand:hover::after { transform: translateX(120%); }

.btn--ghost { background: transparent; color: var(--cream); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-faint); }
.btn:active { transform: translateY(1px); }

/* Unconfigured actions (missing WhatsApp/phone/map) */
.btn[aria-disabled="true"], .action-bar__btn[aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(0.4);
  opacity: 0.55;
}
.btn--brand[aria-disabled="true"] { background: transparent; color: var(--brand); border-color: var(--brand-soft); box-shadow: none; }
.btn[aria-disabled="true"]:hover { background: transparent; }
.btn[aria-disabled="true"]::after { display: none; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 900;
  transition: background-color 0.45s var(--ease-soft), border-color 0.45s, backdrop-filter 0.45s;
  border-bottom: 1px solid transparent;
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 10, 10, 0.55), transparent);
  transition: opacity 0.45s;
}
.site-header.is-scrolled {
  background: rgba(14, 14, 14, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--brand-line);
}
.site-header.is-scrolled::before { opacity: 0; }
.site-header__bar {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  transition: height 0.45s var(--ease);
}
.site-header.is-scrolled .site-header__bar { height: 64px; }
.site-header__actions { display: flex; align-items: center; gap: 12px; }

.wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--cream); line-height: 1;
}
.wordmark__latin {
  font-family: var(--font-script) !important;
  font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--white);
  text-shadow: 0 0 18px rgba(255, 217, 184, 0.35);
  padding-inline-end: 2px; direction: ltr;
}
.wordmark__rule { width: 1px; height: 18px; background: var(--brand); opacity: 0.8; }
.wordmark__arabic { font-family: var(--font-ar) !important; font-weight: 800; font-size: 1.3rem; color: var(--brand); }

.primary-nav { display: none; }
.primary-nav__list { display: flex; gap: clamp(18px, 2.4vw, 36px); }
.primary-nav a {
  position: relative; font-size: 0.92rem; color: var(--cream); opacity: 0.85;
  padding-block: 8px; transition: opacity 0.3s, color 0.3s;
}
.primary-nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
  background: var(--brand); transform: scaleX(0); transform-origin: var(--origin-start, left);
  transition: transform 0.45s var(--ease);
}
[dir="rtl"] .primary-nav a::after { transform-origin: right; }
.primary-nav a:hover, .primary-nav a.is-active { opacity: 1; color: var(--brand); }
.primary-nav a:hover::after, .primary-nav a.is-active::after { transform: scaleX(1); }

.lang-switch {
  min-width: 48px; min-height: 42px; padding: 0 12px;
  border: 1px solid var(--brand-line);
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; color: var(--cream);
  transition: border-color 0.3s, color 0.3s;
}
.lang-switch:hover { border-color: var(--brand); color: var(--brand); }

.site-header__wa { display: none; }

.menu-toggle {
  width: 46px; height: 42px; display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--brand-line);
}
.menu-toggle__bar { width: 20px; height: 1px; background: var(--cream); transition: transform 0.4s var(--ease); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (min-width: 640px) { .site-header__wa { display: inline-flex; } }
@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .menu-toggle { display: none; }
}

/* ---------- Mobile nav ---------- */
.mobile-nav {
  position: fixed; inset: 0; z-index: 850;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(122, 11, 16, 0.35), transparent 60%),
    rgba(12, 12, 12, 0.98);
  padding-top: calc(var(--header-h) + 24px);
  overflow-y: auto;
  animation: navIn 0.45s var(--ease);
}
@keyframes navIn { from { opacity: 0; } to { opacity: 1; } }
.mobile-nav__inner { display: flex; flex-direction: column; min-height: 100%; padding-bottom: 40px; }
.mobile-nav__list li { border-bottom: 1px solid var(--brand-line); }
.mobile-nav__list a {
  display: flex; align-items: baseline; gap: 18px; padding-block: 18px;
  font-size: clamp(1.5rem, 7vw, 2.2rem); font-weight: 500;
}
.mobile-nav__list a:hover, .mobile-nav__list a:focus-visible { color: var(--brand); }
.mobile-nav__num { font-family: var(--font-en); font-size: 0.78rem; color: var(--brand); letter-spacing: 0.15em; }
.mobile-nav__foot { margin-top: 36px; display: grid; gap: 12px; }
body.nav-open { overflow: hidden; }

/* =========================================================================
   01 — HERO
   ========================================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--header-h) + 48px);
  padding-bottom: clamp(88px, 12vh, 140px);
  overflow: hidden;
  isolation: isolate;
  perspective: 1200px;
}
.hero__media {
  position: absolute; inset: -6% 0 -6% 0; z-index: -3;
  will-change: transform;
}
.hero__img { object-position: center 45%; }
.hero__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(17, 17, 17, 0.85) 22%, rgba(17, 17, 17, 0.25) 60%, rgba(17, 17, 17, 0.55) 100%),
    linear-gradient(to left, rgba(17, 17, 17, 0.88) 0%, rgba(17, 17, 17, 0.35) 55%, rgba(17, 17, 17, 0.1) 100%);
}
[dir="ltr"] .hero__shade {
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(17, 17, 17, 0.85) 22%, rgba(17, 17, 17, 0.25) 60%, rgba(17, 17, 17, 0.55) 100%),
    linear-gradient(to right, rgba(17, 17, 17, 0.88) 0%, rgba(17, 17, 17, 0.35) 55%, rgba(17, 17, 17, 0.1) 100%);
}
.hero__ghost {
  position: absolute; z-index: -1; inset-inline-end: -1vw; bottom: -2vw;
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(7rem, 24vw, 24rem); line-height: 0.9; letter-spacing: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(238, 29, 35, 0.16);
  pointer-events: none; user-select: none;
  direction: ltr;
}
.hero__inner { position: relative; display: grid; gap: 48px; align-items: end; transform-style: preserve-3d; }
.hero__content { max-width: 760px; }
.hero__title {
  font-size: clamp(2.5rem, 7.2vw, 6.4rem);
  font-weight: 800; line-height: 1.12;
  color: var(--white);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.hero__title:lang(en) { font-weight: 500; letter-spacing: -0.035em; line-height: 1.0; }
.hero__alt {
  margin-top: 18px;
  font-family: var(--font-en);
  font-size: clamp(0.72rem, 1.1vw, 0.85rem);
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--brand);
}
.hero__alt:lang(ar), .experience__alt:lang(ar), .visit__alt:lang(ar) {
  font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: clamp(1rem, 1.4vw, 1.2rem);
}
/* Secondary-language echo lines follow the page's reading edge */
[dir="rtl"] [data-i18n-alt] { text-align: right; }
[dir="ltr"] [data-i18n-alt] { text-align: left; }
[dir] .visit__alt { text-align: center; }
.hero .accent-rule { margin-block: 28px 22px; }
.hero__copy { color: rgba(255, 248, 242, 0.85); font-size: clamp(1rem, 1.4vw, 1.18rem); max-width: 50ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.hero__frame { display: none; }

.hero__scroll {
  position: absolute; bottom: 26px; inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted);
}
[dir="rtl"] .hero__scroll { transform: translateX(50%); }
.hero__scroll:lang(ar) { letter-spacing: 0; font-size: 0.82rem; }
.hero__scroll-line { position: relative; width: 1px; height: 46px; background: var(--brand-line); overflow: hidden; }
.hero__scroll-line::after {
  content: ""; position: absolute; inset-inline: 0; top: -40%; height: 40%;
  background: var(--brand); animation: scrollLine 2.2s var(--ease-soft) infinite;
}
@keyframes scrollLine { 0% { top: -40%; } 70%, 100% { top: 100%; } }

@media (max-width: 479px) {
  .hero__ctas .btn { width: 100%; }
  .hero__alt:lang(en) { letter-spacing: 0.18em; }
  .hero__scroll { display: none; }
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 360px); gap: 6vw; }
  .hero__frame {
    display: block; position: relative; margin-bottom: 12px;
    transform-style: preserve-3d;
  }
  .hero__frame::before {
    content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid var(--brand-soft);
    transform: translateZ(-40px);
  }
  [dir="rtl"] .hero__frame::before { inset: -14px -14px 14px 14px; }
  .hero__frame-img {
    aspect-ratio: 593 / 629; box-shadow: var(--shadow-deep), 0 0 80px -10px rgba(238, 29, 35, 0.45);
  }
  .hero__frame-cap {
    margin-top: 14px; font-family: var(--font-en); font-size: 0.72rem; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--muted);
  }
}

/* =========================================================================
   02 — SIGNATURE DISHES
   ========================================================================= */
.signature {
  position: relative;
  padding-block: var(--section-space);
  background: linear-gradient(to bottom, var(--bg), transparent 30%);
}
.signature__pin { position: relative; }
.signature__track {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid; gap: clamp(20px, 3vw, 32px);
}
.signature__intro { margin-block-end: 12px; }
.signature__hint { display: none; }
.signature__progress { display: none; }

@media (min-width: 640px) {
  .signature__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signature__intro { grid-column: 1 / -1; }
}
@media (min-width: 1280px) {
  .signature__track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Pinned horizontal mode (enabled by animations.js on large screens) */
.signature.is-horizontal { padding-block: 0; }
.signature.is-horizontal .signature__pin {
  height: 100vh; display: flex; align-items: center; overflow: hidden;
}
.signature.is-horizontal .signature__track {
  display: flex; align-items: center; gap: clamp(28px, 3vw, 48px);
  width: max-content; max-width: none; margin: 0;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  will-change: transform;
}
.signature.is-horizontal .signature__intro { width: clamp(340px, 30vw, 460px); flex: none; margin: 0; padding-inline-end: 2vw; }
.signature.is-horizontal .dish-card { width: clamp(320px, 26vw, 400px); flex: none; }
.signature.is-horizontal .signature__hint {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 40px;
  font-size: 0.85rem; color: var(--brand);
}
.signature.is-horizontal .signature__progress {
  display: block; position: absolute; bottom: 6vh; inset-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  height: 1px; background: var(--brand-line);
}
.signature__progress span {
  display: block; height: 100%; width: 100%; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
}
[dir="rtl"] .signature__progress span { transform-origin: right; }

/* Dish card */
.dish-card {
  perspective: 1100px;
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
}
.dish-card__inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1e1e1e 0%, var(--bg-2) 100%);
  border: 1px solid var(--brand-line);
  box-shadow: var(--shadow-deep);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.6s var(--ease), border-color 0.4s, box-shadow 0.6s var(--ease);
}
.dish-card.is-tilting .dish-card__inner { transition: transform 0.12s linear, border-color 0.4s, box-shadow 0.6s var(--ease); }
.dish-card:hover .dish-card__inner {
  border-color: var(--brand-soft);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 50px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(238, 29, 35, 0.08);
}
.dish-card__inner::after {
  /* specular light following the pointer */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(400px circle at var(--mx) var(--my), rgba(238, 29, 35, 0.12), transparent 45%);
  transition: opacity 0.4s;
}
.dish-card:hover .dish-card__inner::after { opacity: 1; }
.dish-card__media { aspect-ratio: 4 / 4.2; }
.dish-card__media img { transition: transform 1.1s var(--ease), opacity 0.6s; transform: scale(1.02); }
.dish-card:hover .dish-card__media img { transform: scale(1.09); }
.dish-card__index {
  position: absolute; top: 16px; inset-inline-start: 16px;
  font-family: var(--font-en); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--cream);
  padding: 6px 10px; background: rgba(17, 17, 17, 0.6); border: 1px solid var(--brand-line);
}
.dish-card__body {
  padding: 26px 24px 24px; display: flex; flex-direction: column; flex: 1; gap: 8px;
}
/* Layered depth only where the pointer tilt exists */
@media (hover: hover) and (pointer: fine) {
  .dish-card__media { transform: translateZ(24px); }
  .dish-card__body { transform: translateZ(40px); }
}
.dish-card__name { font-size: 1.4rem; font-weight: 700; line-height: 1.25; color: var(--cream); }
.dish-card__name:lang(en) { font-weight: 500; letter-spacing: -0.01em; }
.dish-card__alt { font-size: 0.82rem; color: var(--brand); opacity: 0.85; }
.dish-card__alt:lang(en) { letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.7rem; }
.dish-card__desc { color: var(--muted); font-size: 0.94rem; line-height: 1.65; margin-top: 4px; }
.dish-card__meta {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--brand-line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.price { display: flex; flex-direction: column; gap: 2px; }
.price__value { font-family: var(--font-en); font-size: 1.3rem; font-weight: 500; color: var(--brand); direction: ltr; unicode-bidi: isolate; }
.price__value:lang(ar) { font-family: var(--font-ar); font-weight: 700; direction: rtl; }
.price__note { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.08em; }
.price__note:lang(ar) { letter-spacing: 0; font-size: 0.78rem; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--brand-line); }
.qty__btn { width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.1rem; color: var(--cream); transition: color 0.3s, background-color 0.3s; }
.qty__btn:hover { color: var(--brand); background: var(--brand-faint); }
.qty__value { min-width: 30px; text-align: center; font-family: var(--font-en); font-size: 0.95rem; }
.dish-card .btn { margin-top: 16px; }

/* =========================================================================
   03 — MENU
   ========================================================================= */
.menu { background: linear-gradient(180deg, transparent, rgba(25, 25, 25, 0.6) 40%, transparent); }
.menu__controls { display: grid; gap: 22px; margin-block-end: 18px; }
.menu__search { position: relative; max-width: 520px; }
.menu__search input {
  width: 100%; min-height: 54px;
  padding-inline: 44px 44px;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--brand-soft);
  font-size: 1.05rem; color: var(--cream);
  border-radius: 0;
  transition: border-color 0.3s;
  -webkit-appearance: none; appearance: none;
}
.menu__search input::-webkit-search-cancel-button { display: none; }
.menu__search input::placeholder { color: var(--muted); opacity: 0.8; }
.menu__search input:focus { outline: none; border-bottom-color: var(--brand); }
.menu__search:focus-within { outline: 2px solid var(--brand); outline-offset: 4px; }
.menu__search-icon { position: absolute; inset-inline-start: 6px; top: 50%; transform: translateY(-50%); color: var(--brand); pointer-events: none; }
.menu__search-clear { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; color: var(--muted); }
.menu__search-clear:hover { color: var(--brand); }

.menu__cats {
  display: flex; gap: 10px;
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
  padding-block: 4px;
  /* fade only the trailing edge to hint that the row scrolls */
  -webkit-mask-image: linear-gradient(to left, transparent, #000 36px);
  mask-image: linear-gradient(to left, transparent, #000 36px);
}
[dir="rtl"] .menu__cats {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px);
  mask-image: linear-gradient(to right, transparent, #000 36px);
}
.menu__cats::-webkit-scrollbar { display: none; }
.cat-btn {
  flex: none; scroll-snap-align: start;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--brand-line);
  font-size: 0.92rem; color: var(--cream); white-space: nowrap;
  transition: background-color 0.35s var(--ease), color 0.35s, border-color 0.35s;
}
.cat-btn:hover { border-color: var(--brand-soft); color: var(--brand); }
.cat-btn[aria-pressed="true"] { background: var(--grad-brand); border-color: transparent; color: #ffffff; font-weight: 600; }
@media (min-width: 900px) {
  .menu__controls { grid-template-columns: minmax(260px, 380px) 1fr; align-items: center; gap: 40px; }
  .menu__cats, [dir="rtl"] .menu__cats { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; justify-content: flex-end; }
}

.menu__count { font-size: 0.85rem; color: var(--muted); margin-block: 22px 8px; font-family: var(--font-en); letter-spacing: 0.08em; }
.menu__count:lang(ar) { font-family: var(--font-ar); letter-spacing: 0; }

.menu-grid { display: grid; column-gap: clamp(40px, 6vw, 96px); }
@media (min-width: 768px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.menu-item {
  position: relative;
  padding-block: 26px;
  border-top: 1px solid var(--brand-line);
  animation: itemIn 0.6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.menu-item::before {
  content: ""; position: absolute; top: -1px; inset-inline-start: 0; height: 1px; width: 100%;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease);
}
[dir="rtl"] .menu-item::before { transform-origin: right; }
.menu-item:hover::before, .menu-item:focus-within::before { transform: scaleX(1); }
@keyframes itemIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.menu-item__head { display: flex; align-items: baseline; gap: 14px; }
.menu-item__name { font-size: 1.18rem; font-weight: 700; color: var(--cream); line-height: 1.35; }
.menu-item__name:lang(en) { font-weight: 500; }
.menu-item__leader { flex: 1; min-width: 20px; border-bottom: 1px dotted rgba(238, 29, 35, 0.35); transform: translateY(-5px); }
.menu-item__price { font-size: 1.05rem; color: var(--brand); white-space: nowrap; font-weight: 500; }
.menu-item__alt { font-size: 0.8rem; color: var(--brand); opacity: 0.75; margin-top: 2px; }
.menu-item__alt:lang(en) { letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem; }
.menu-item__desc { color: var(--muted); font-size: 0.93rem; margin-top: 8px; max-width: 46ch; }
.menu-item__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.menu-item__cat { font-size: 0.74rem; color: var(--muted); opacity: 0.75; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-en); }
.menu-item__cat:lang(ar) { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 0.82rem; }
.menu-item .btn { min-height: 44px; padding: 0 16px; font-size: 0.85rem; }

.menu__empty {
  text-align: center; padding: 72px 20px; border: 1px solid var(--brand-line);
  display: grid; justify-items: center; gap: 12px; margin-top: 20px;
  animation: itemIn 0.5s var(--ease) both;
}
.menu__empty-mark { width: 12px; height: 12px; border: 1px solid var(--brand); transform: rotate(45deg); margin-bottom: 8px; }
.menu__empty h3 { font-size: 1.4rem; font-weight: 600; }
.menu__empty p { color: var(--muted); max-width: 40ch; }
.menu__empty .btn { margin-top: 12px; }

/* =========================================================================
   04 — EXPERIENCE
   ========================================================================= */
.experience { overflow: hidden; }
.experience__grid { display: grid; gap: clamp(48px, 7vw, 110px); align-items: center; }
.experience__media { position: relative; perspective: 1200px; }
.experience__reveal { aspect-ratio: 4 / 3; box-shadow: var(--shadow-deep); z-index: 1; }
.experience__reveal img { height: 118%; margin-top: -9%; }
.experience__outline {
  position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--brand-line); z-index: 0;
  pointer-events: none;
}
[dir="rtl"] .experience__outline { inset: 22px 22px -22px -22px; }
.experience__alt {
  margin-top: 18px; font-family: var(--font-en); color: var(--brand);
  font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.experience .accent-rule { margin-block: 30px 6px; }
.highlights { margin-top: 44px; display: grid; }
.highlight {
  display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: baseline;
  padding-block: 20px; border-top: 1px solid var(--brand-line);
}
.highlight:last-child { border-bottom: 1px solid var(--brand-line); }
.highlight__num { font-family: Georgia, "Times New Roman", serif; font-style: italic; color: var(--brand); font-size: 1.1rem; }
.highlight h3 { font-size: 1.1rem; font-weight: 700; color: var(--cream); }
.highlight h3:lang(en) { font-weight: 500; }
.highlight p { color: var(--muted); font-size: 0.93rem; margin-top: 4px; }

@media (min-width: 1024px) {
  .experience__grid { grid-template-columns: 1.1fr 0.9fr; }
  .experience__reveal { aspect-ratio: 4 / 5; }
}

/* =========================================================================
   05 — GALLERY
   ========================================================================= */
.gallery-grid {
  display: grid; gap: clamp(10px, 1.4vw, 18px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 44vw, 300px);
}
.gallery-item { position: relative; min-width: 0; }
.gallery-item--feature, .gallery-item--wide { grid-column: span 2; }
.gallery-item--tall { grid-row: span 2; }
.gallery-item:nth-child(7) { grid-column: span 2; grid-row: span 1; }

.gallery-item__btn {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  cursor: zoom-in; text-align: start;
}
.gallery-item__frame { position: absolute; inset: -8% 0; }
.gallery-item__frame img { position: absolute; inset: 0; transition: transform 1.2s var(--ease), opacity 0.6s; }
.gallery-item__btn:hover img, .gallery-item__btn:focus-visible img { transform: scale(1.07); }
.gallery-item__btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.75), transparent 45%);
  transition: opacity 0.5s;
}
.gallery-item__btn::before {
  content: ""; position: absolute; inset: 12px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(238, 29, 35, 0); transition: border-color 0.6s var(--ease), inset 0.6s var(--ease);
}
.gallery-item__btn:hover::before { border-color: var(--brand-soft); inset: 16px; }
.gallery-item__caption {
  position: absolute; z-index: 3; bottom: 18px; inset-inline-start: 20px; inset-inline-end: 20px;
  display: flex; align-items: center; gap: 10px;
  font-size: 0.92rem; color: var(--cream);
}
.gallery-item__caption::before { content: ""; width: 22px; height: 1px; background: var(--brand); flex: none; }

@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 15vw, 250px); }
  .gallery-item, .gallery-item--feature, .gallery-item--wide, .gallery-item--tall, .gallery-item:nth-child(7) { grid-column: span 4; grid-row: span 1; }
  /* Tuned composition for the default 7 images */
  .gallery-item:nth-child(1) { grid-column: 1 / 7; grid-row: 1 / 3; }
  .gallery-item:nth-child(2) { grid-column: 7 / 13; grid-row: 1 / 2; }
  .gallery-item:nth-child(3) { grid-column: 7 / 10; grid-row: 2 / 4; }
  .gallery-item:nth-child(4) { grid-column: 10 / 13; grid-row: 2 / 3; }
  .gallery-item:nth-child(5) { grid-column: 10 / 13; grid-row: 3 / 4; }
  .gallery-item:nth-child(6) { grid-column: 1 / 5; grid-row: 3 / 4; }
  .gallery-item:nth-child(7) { grid-column: 5 / 7; grid-row: 3 / 4; }
  .gallery-item__caption { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .gallery-item__btn::after { opacity: 0.4; }
  .gallery-item__btn:hover .gallery-item__caption, .gallery-item__btn:focus-visible .gallery-item__caption { opacity: 1; transform: none; }
  .gallery-item__btn:hover::after { opacity: 1; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 1500;
  display: grid; place-items: center;
  padding: 72px 16px 110px;
  animation: navIn 0.35s var(--ease);
}
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(8, 8, 8, 0.95); }
.lightbox__figure { position: relative; max-width: min(1200px, 100%); width: 100%; display: grid; justify-items: center; gap: 16px; }
.lightbox__img-wrap { background: transparent; max-width: 100%; }
.lightbox__img-wrap.is-failed { min-width: min(560px, 90vw); aspect-ratio: 4 / 3; background-color: var(--bg-2); }
.lightbox__img {
  max-width: 100%; max-height: calc(100svh - 220px); width: auto; height: auto;
  object-fit: contain; box-shadow: 0 40px 80px -30px #000;
  animation: lbImg 0.5s var(--ease);
}
@keyframes lbImg { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.lightbox__caption { display: flex; gap: 18px; align-items: center; color: var(--cream); font-size: 0.95rem; }
.lightbox__count { font-family: var(--font-en); font-size: 0.8rem; letter-spacing: 0.18em; color: var(--brand); direction: ltr; }
.lightbox__btn {
  position: absolute; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid var(--brand-soft); background: rgba(17, 17, 17, 0.7); color: var(--cream);
  transition: background-color 0.3s, color 0.3s;
}
.lightbox__btn:hover { background: var(--brand); color: #ffffff; }
.lightbox__close { top: 14px; inset-inline-end: 14px; }
.lightbox__prev, .lightbox__next { bottom: 28px; }
.lightbox__prev { inset-inline-start: calc(50% - 64px); }
.lightbox__next { inset-inline-end: calc(50% - 64px); }
@media (min-width: 900px) {
  .lightbox { padding: 72px 110px; }
  .lightbox__img { max-height: calc(100svh - 160px); }
  .lightbox__prev, .lightbox__next { bottom: auto; top: 50%; transform: translateY(-50%); }
  .lightbox__prev { inset-inline-start: 28px; }
  .lightbox__next { inset-inline-end: 28px; }
  .lightbox__close { top: 24px; inset-inline-end: 28px; }
}
body.lb-open { overflow: hidden; }

/* =========================================================================
   06 — VISIT & ORDER
   ========================================================================= */
.visit { overflow: hidden; border-top: 1px solid var(--brand-line); }
.visit__glow {
  position: absolute; inset: -20% -10% auto; height: 80%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 0%, rgba(122, 11, 16, 0.45), transparent 70%);
}
.visit__head { position: relative; text-align: center; display: grid; justify-items: center; }
.visit__mark {
  display: inline-flex; align-items: center; gap: clamp(14px, 3vw, 34px);
  margin-block: 6px 34px; line-height: 1;
}
.visit__mark .wordmark__latin {
  font-size: clamp(2.6rem, 10vw, 7.5rem); letter-spacing: 0.3em; font-weight: 300;
  background: linear-gradient(180deg, #ffd9b8 0%, var(--brand) 55%, #a80f16 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-inline-start: 0; margin-inline-end: -0.3em;
}
[dir="rtl"] .visit__mark .wordmark__latin { margin-inline-end: 0; margin-inline-start: -0.3em; }
.visit__mark .wordmark__rule { height: clamp(36px, 8vw, 96px); }
.visit__mark .wordmark__arabic { font-size: clamp(2.4rem, 9vw, 6.6rem); font-weight: 300; }
.visit__alt { margin-top: 14px; font-family: var(--font-en); color: var(--brand); font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; }
.visit__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }
@media (max-width: 479px) { .visit__ctas .btn { width: 100%; } }

.visit__info {
  position: relative;
  margin-top: clamp(56px, 8vw, 96px);
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--brand-line);
}
.visit__cell { padding: 28px 4px; border-bottom: 1px solid var(--brand-line); }
.visit__cell dt { color: var(--brand); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; font-family: var(--font-en); margin-bottom: 10px; }
.visit__cell dt:lang(ar) { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 0.95rem; }
.visit__cell dd { color: var(--cream); font-size: 1.02rem; line-height: 1.7; }
.visit__cell dd a:hover { color: var(--brand); }
.visit__cell .tbc { color: var(--muted); font-style: normal; }
.visit__cell .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.hours-row { display: flex; justify-content: space-between; gap: 12px; }
.hours-row + .hours-row { margin-top: 4px; }
@media (min-width: 640px) {
  .visit__info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit__cell { padding: 30px 28px; }
  .visit__cell:nth-child(odd) { border-inline-end: 1px solid var(--brand-line); }
}
@media (min-width: 1100px) {
  .visit__info { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .visit__cell { border-inline-end: 1px solid var(--brand-line); }
  .visit__cell:last-child { border-inline-end: 0; }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: #0a0a0a; border-top: 1px solid var(--brand-line); padding-top: 72px; }
.site-footer__grid { display: grid; gap: 40px; padding-bottom: 56px; }
.site-footer__city { margin-top: 14px; color: var(--muted); font-size: 0.92rem; }
.site-footer__title { font-size: 0.8rem; color: var(--brand); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 16px; font-family: var(--font-en); }
.site-footer__title:lang(ar) { font-family: var(--font-ar); letter-spacing: 0; font-size: 0.95rem; text-transform: none; }
.site-footer__col li + li { margin-top: 8px; }
.site-footer__col a, .site-footer__col span { color: var(--muted); font-size: 0.94rem; transition: color 0.3s; display: inline-flex; min-height: 28px; align-items: center; }
.site-footer__col a:hover { color: var(--brand); }
.site-footer__base {
  display: grid; gap: 12px; padding-block: 26px 32px;
  border-top: 1px solid rgba(238, 29, 35, 0.12);
  font-size: 0.82rem; color: var(--muted);
}
.site-footer__disclaimer { opacity: 0.7; }
.site-footer__top { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); justify-self: start; min-height: 32px; }
.site-footer__top:hover { color: var(--brand); }
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .site-footer__base { grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; }
}

/* =========================================================================
   MOBILE ACTION BAR & TOAST
   ========================================================================= */
.action-bar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 800;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(12, 12, 12, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--brand-line);
  transform: translateY(110%); transition: transform 0.5s var(--ease);
}
.action-bar.is-visible { transform: none; }
.action-bar__inner { display: flex; gap: 10px; }
.action-bar__btn {
  flex: 1; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--brand-soft); font-weight: 600; font-size: 0.95rem;
}
.action-bar__btn--brand { background: var(--grad-brand); color: #ffffff; border-color: transparent; }
body.has-action-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
  .action-bar { display: none !important; }
  body.has-action-bar { padding-bottom: 0; }
}

.toast {
  position: fixed; z-index: 1600; bottom: calc(24px + env(safe-area-inset-bottom)); inset-inline: 16px;
  margin-inline: auto; max-width: 460px;
  padding: 16px 20px; background: #1c1c1c; border: 1px solid var(--brand-soft);
  color: var(--cream); font-size: 0.93rem; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8);
  opacity: 0; transform: translateY(20px); pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.toast.is-visible { opacity: 1; transform: none; }
body.has-action-bar .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }

/* =========================================================================
   MOTION PREFERENCES
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .dish-card__inner { transform: none !important; }
  .hero__scroll-line::after { display: none; }
}


/* =========================================================================
   v2 — GRADIENTS, AMBIENT LIGHT & EXTENDED SECTIONS
   ========================================================================= */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
@keyframes spinAngle { to { --angle: 360deg; } }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vw, -4vh, 0) scale(1.15); }
  100% { transform: translate3d(-4vw, 5vh, 0) scale(0.95); }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Animated gradient text */
.text-gradient, .text-gradient-hero {
  background: var(--grad-text);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: gradientShift 9s ease-in-out infinite alternate;
}
.text-gradient-hero {
  background-image: linear-gradient(100deg, #ffffff 0%, #ffffff 30%, #ffd9b8 48%, #ee1d23 60%, #ffffff 80%, #ffffff 100%);
  text-shadow: none;
  filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.35));
}

/* Scroll progress */
.scroll-progress { position: fixed; inset-inline: 0; top: 0; height: 2px; z-index: 1000; pointer-events: none; }
.scroll-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand), #ffd9b8, var(--brand));
  transform: scaleX(0); transform-origin: left;
  box-shadow: 0 0 12px rgba(238, 29, 35, 0.6);
}
[dir="rtl"] .scroll-progress span { transform-origin: right; }

/* Ambient aurora glows */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora span {
  position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%;
  filter: blur(70px); opacity: 0.35; mix-blend-mode: screen;
  animation: drift 22s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { background: radial-gradient(circle, rgba(238, 29, 35, 0.55), transparent 65%); top: -20%; inset-inline-start: -15%; }
.aurora span:nth-child(2) { background: radial-gradient(circle, rgba(122, 11, 16, 0.9), transparent 65%); bottom: -30%; inset-inline-end: -20%; animation-duration: 28s; animation-delay: -6s; }
.aurora span:nth-child(3) { background: radial-gradient(circle, rgba(255, 140, 90, 0.35), transparent 65%); top: 30%; inset-inline-start: 35%; width: 35vmax; height: 35vmax; animation-duration: 18s; animation-delay: -10s; }
.aurora--hero { z-index: -1; }
.aurora--hero span { opacity: 0.28; }
.aurora--soft span { opacity: 0.22; }
.aurora--alt span:nth-child(1) { inset-inline-start: auto; inset-inline-end: -10%; }
.cats, .steps, .visit { isolation: isolate; }
.cats > .container, .steps > .container, .visit > .container { position: relative; z-index: 1; }

/* Hero cursor spotlight */
.hero__spot {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--sx, 72%) var(--sy, 38%), rgba(238, 29, 35, 0.16), transparent 60%);
  transition: background 0.2s linear;
}

/* Rotating gradient border (dish cards on hover, step cards always) */
.dish-card__inner::before, .step::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; pointer-events: none; z-index: 3;
  background: conic-gradient(from var(--angle), transparent 0 55%, var(--brand-deep) 68%, var(--brand) 80%, #ffd9b8 85%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: spinAngle 5s linear infinite;
  opacity: 0; transition: opacity 0.6s var(--ease);
}
.dish-card:hover .dish-card__inner::before { opacity: 1; }
.dish-card__inner { background: linear-gradient(170deg, #232323 0%, #1a1a1a 45%, #1d1112 100%); }

/* Section heads */
.section-head--center { text-align: center; display: grid; justify-items: center; }
.section-num { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Marquee ---------- */
.marquee {
  position: relative; overflow: hidden; direction: ltr;
  padding-block: clamp(18px, 3vw, 34px);
  border-block: 1px solid var(--brand-line);
  background: linear-gradient(90deg, rgba(122, 11, 16, 0.28), rgba(238, 29, 35, 0.07) 50%, rgba(122, 11, 16, 0.28));
}
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee--reverse .marquee__track { animation-direction: reverse; animation-duration: 36s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); padding-inline-end: clamp(20px, 3vw, 44px); flex: none; }
.marquee__item {
  font-size: clamp(1.6rem, 4.6vw, 4rem); font-weight: 700; line-height: 1.25; white-space: nowrap;
  background: var(--grad-text); background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientShift 7s ease-in-out infinite alternate;
}
.marquee__item:lang(en) { font-weight: 300; letter-spacing: -0.02em; }
.marquee__item--alt { background: none; color: transparent; -webkit-text-stroke: 1px rgba(238, 29, 35, 0.55); animation: none; }
.marquee__star { color: var(--brand); font-size: clamp(0.9rem, 1.6vw, 1.3rem); opacity: 0.8; }
.marquee--outline { background: linear-gradient(90deg, rgba(17, 17, 17, 1), rgba(122, 11, 16, 0.35) 50%, rgba(17, 17, 17, 1)); }

/* ---------- 03 Categories ---------- */
.cats { overflow: hidden; }
.cat-list { border-top: 1px solid var(--brand-line); counter-reset: none; }
.cat-row { position: relative; border-bottom: 1px solid var(--brand-line); }
.cat-row::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand), #ffd9b8);
  transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease);
}
[dir="rtl"] .cat-row::after { transform-origin: right; background: linear-gradient(-90deg, var(--brand-deep), var(--brand), #ffd9b8); }
.cat-row:hover::after, .cat-row:focus-within::after { transform: scaleX(1); }
.cat-row__link {
  display: grid; align-items: center; column-gap: clamp(14px, 3vw, 40px);
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "num name arrow" "num alt arrow";
  padding-block: clamp(18px, 2.6vw, 30px);
  position: relative;
}
.cat-row__link::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: var(--grad-ember); transition: opacity 0.6s var(--ease);
}
.cat-row__link:hover::before, .cat-row__link:focus-visible::before { opacity: 1; }
.cat-row__num { grid-area: num; font-family: var(--font-en); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--brand); align-self: start; padding-top: 0.9em; }
.cat-row__name {
  grid-area: name; font-size: clamp(1.7rem, 4.6vw, 3.6rem); font-weight: 700; line-height: 1.15; color: var(--cream);
  transition: transform 0.6s var(--ease), color 0.4s;
}
.cat-row__name:lang(en) { font-weight: 400; letter-spacing: -0.025em; }
.cat-row__alt { grid-area: alt; font-size: 0.85rem; color: var(--muted); transition: transform 0.6s var(--ease); }
.cat-row__alt:lang(en) { text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; }
.cat-row__count { display: none; font-family: var(--font-en); color: var(--muted); font-size: 0.85rem; }
.cat-row__count:lang(ar), [lang="ar"] .cat-row__count { font-family: var(--font-ar); }
.cat-row__arrow {
  grid-area: arrow; width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid var(--brand-line); color: var(--brand);
  transition: background 0.5s var(--ease), color 0.4s, transform 0.6s var(--ease), border-color 0.4s;
}
.cat-row__link:hover .cat-row__name, .cat-row__link:focus-visible .cat-row__name {
  background: var(--grad-text); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientShift 3s ease-in-out infinite alternate;
  transform: translateX(14px);
}
[dir="rtl"] .cat-row__link:hover .cat-row__name, [dir="rtl"] .cat-row__link:focus-visible .cat-row__name { transform: translateX(-14px); }
.cat-row__link:hover .cat-row__arrow, .cat-row__link:focus-visible .cat-row__arrow { background: var(--grad-brand); color: #ffffff; border-color: transparent; transform: rotate(-45deg); }
[dir="rtl"] .cat-row__link:hover .cat-row__arrow, [dir="rtl"] .cat-row__link:focus-visible .cat-row__arrow { transform: rotate(45deg); }
@media (min-width: 768px) {
  .cat-row__link { grid-template-columns: auto 1fr auto auto; grid-template-areas: "num name count arrow" "num alt count arrow"; }
  .cat-row__count { display: block; grid-area: count; }
}
.cat-preview {
  position: fixed; left: 0; top: 0; z-index: 60; width: clamp(200px, 18vw, 280px); aspect-ratio: 4 / 5;
  pointer-events: none; opacity: 0; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.9);
  border: 1px solid var(--brand-soft);
  clip-path: inset(50% 0 50% 0);
  transition: opacity 0.4s var(--ease), clip-path 0.6s var(--ease);
}
.cat-preview.is-visible { opacity: 1; clip-path: inset(0 0 0 0); }
@media (hover: none) { .cat-preview { display: none; } }

/* ---------- Cinematic banner ---------- */
.banner {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 92vh; min-height: 92svh;
  display: grid; place-items: center; text-align: center;
  padding-block: var(--section-space);
}
.banner__media { position: absolute; inset: -10% 0; z-index: -2; }
.banner__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 60% at 50% 50%, rgba(17, 17, 17, 0.35), rgba(17, 17, 17, 0.88) 75%),
    linear-gradient(180deg, var(--bg) 0%, transparent 25%, transparent 70%, var(--bg) 100%),
    linear-gradient(135deg, rgba(122, 11, 16, 0.45), transparent 60%);
}
.banner__inner { display: grid; justify-items: center; gap: 22px; }
.banner__mark { font-family: Georgia, serif; font-size: clamp(5rem, 12vw, 9rem); line-height: 0.6; height: 0.5em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.banner__quote { font-size: clamp(2rem, 5.6vw, 5rem); font-weight: 800; line-height: 1.2; max-width: 18ch; text-wrap: balance; }
.banner__quote:lang(en) { font-weight: 500; letter-spacing: -0.03em; }
.banner__alt { font-family: var(--font-en); color: var(--brand); font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; }
[dir] .banner__alt { text-align: center; }
.banner__alt:lang(ar) { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 1.1rem; }
.banner .btn { margin-top: 18px; }

/* ---------- 07 How to order ---------- */
.steps { overflow: hidden; }
.steps__list { position: relative; display: grid; gap: 22px; padding-inline-start: 28px; }
.steps__line { position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 1px; background: var(--brand-line); }
.steps__line span { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--brand), var(--brand-deep)); transform-origin: top; }
.step {
  position: relative; padding: clamp(26px, 3vw, 40px);
  background: linear-gradient(160deg, rgba(238, 29, 35, 0.09), rgba(122, 11, 16, 0.14) 55%, rgba(17, 17, 17, 0.4));
  border: 1px solid var(--brand-line);
}
.step::before { opacity: 0.85; animation-duration: 7s; }
.step:nth-child(3)::before { animation-delay: -2.3s; }
.step:nth-child(4)::before { animation-delay: -4.6s; }
.step::after { /* node on the timeline */
  content: ""; position: absolute; top: 44px; inset-inline-start: -33px; width: 11px; height: 11px;
  background: var(--grad-brand); transform: rotate(45deg); box-shadow: 0 0 16px rgba(238, 29, 35, 0.7);
}
.step__num {
  display: block; font-family: var(--font-en); font-weight: 200; font-size: clamp(3rem, 6vw, 4.6rem); line-height: 1;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px;
}
.step h3 { font-size: 1.35rem; font-weight: 700; color: var(--cream); margin-bottom: 8px; }
.step h3:lang(en) { font-weight: 500; }
.step p { color: var(--muted); font-size: 0.97rem; }
.steps__cta { display: flex; justify-content: center; margin-top: clamp(40px, 6vw, 64px); }
@media (min-width: 900px) {
  .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 36px); padding-inline-start: 0; padding-top: 34px; }
  .steps__line { top: 0; bottom: auto; inset-inline: 0; width: auto; height: 1px; }
  .steps__line span { background: linear-gradient(90deg, var(--brand-deep), var(--brand), #ffd9b8, var(--brand)); transform-origin: left; }
  [dir="rtl"] .steps__line span { transform-origin: right; }
  .step::after { top: -39px; inset-inline-start: 40px; }
}

/* Visit ambient */
.aurora--visit span { opacity: 0.25; }
.visit__cell { transition: background 0.6s var(--ease); }
.visit__cell:hover { background: var(--grad-ember); }

/* Word-split headings (added by animations.js) */
.split-word { display: inline-block; will-change: transform, opacity, filter; }

@media (prefers-reduced-motion: reduce) {
  .aurora span, .marquee__track, .text-gradient, .text-gradient-hero, .marquee__item,
  .dish-card__inner::before, .step::before { animation: none !important; }
  .marquee__track { flex-wrap: wrap; width: auto; }
  .marquee__group + .marquee__group { display: none; }
}


/* =========================================================================
   v3 — NAJA BRAND IDENTITY (logo red · charcoal · white · warm sign glow)
   ========================================================================= */
/* "Feel Fresh" tagline with the logo's red brush swoosh */
.tagline {
  position: relative; display: inline-block; padding-bottom: 16px; margin-block: 22px 26px;
  direction: ltr; transform: rotate(-3deg); transform-origin: left center;
}
.tagline__text {
  font-family: var(--font-script); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.1; color: var(--white);
  text-shadow: 0 0 22px rgba(255, 217, 184, 0.45);
}
.tagline__text { display: block; }
.tagline__swoosh { position: absolute; left: -6%; bottom: 0; width: 112%; height: 14px; margin-top: 2px; color: var(--brand-fill); filter: drop-shadow(0 0 10px rgba(238, 29, 35, 0.6)); }
.tagline--center { transform-origin: center; margin-inline: auto; }
.tagline--sm { margin-block: 14px 4px; padding-bottom: 12px; }
.tagline--sm .tagline__text { font-size: 1.35rem; }
.tagline--sm .tagline__swoosh { height: 10px; }
.hero__content > .tagline { display: table; }
/* the tagline is LTR text, so align it with physical margins inside the RTL column */
[dir="rtl"] .hero__content > .tagline { margin-left: auto; margin-right: 0; transform-origin: right center; }

/* Swoosh draws in on load */
@keyframes swooshIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tagline__swoosh { animation: swooshIn 1.2s 0.6s var(--ease) both; }

/* Logo sign in the closing section — glowing like the real illuminated sign */
.visit__mark { position: relative; display: grid; justify-items: center; margin-block: 8px 34px; }
.visit__mark-glow {
  position: absolute; inset: 8% 10% 22%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(238, 29, 35, 0.55), rgba(255, 217, 184, 0.12) 60%, transparent);
  filter: blur(40px);
  animation: signPulse 4.5s ease-in-out infinite;
}
@keyframes signPulse { 0%, 100% { opacity: 0.7; transform: scale(0.96); } 50% { opacity: 1; transform: scale(1.04); } }
.visit__mark-frame {
  position: relative; z-index: 1; display: block;
  width: clamp(200px, 30vw, 320px); aspect-ratio: 593 / 629;
  border: 1px solid var(--brand-soft);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(238, 29, 35, 0.08);
}
.visit__mark .tagline { position: relative; z-index: 1; margin-top: 26px; }

/* Marquee script item */
.marquee__item--script {
  font-family: var(--font-script); font-weight: 400; letter-spacing: 0;
  background: none; color: var(--white); -webkit-text-fill-color: currentColor;
  text-shadow: 0 0 24px rgba(238, 29, 35, 0.6); animation: none;
}

/* Red glow on primary buttons — like neon sign lettering */
.btn--brand { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18); }

@media (prefers-reduced-motion: reduce) {
  .visit__mark-glow, .tagline__swoosh { animation: none !important; }
}


/* =========================================================================
   v4 — PROFESSIONAL FOOTER & ANIMATED MAP (shared by every page)
   ========================================================================= */
.site-footer {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: clamp(56px, 7vw, 88px);
  background:
    radial-gradient(60% 50% at 85% 0%, rgba(122, 11, 16, 0.28), transparent 70%),
    linear-gradient(180deg, #0d0d0d, #080808);
}
.site-footer::before { /* fine red hairline across the top */
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand), #ffd9b8, var(--brand), transparent);
  opacity: 0.6;
}

/* Order strip */
.footer-cta {
  position: relative; display: grid; gap: 22px; align-items: center;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--brand-line);
  background: linear-gradient(120deg, rgba(238, 29, 35, 0.14), rgba(122, 11, 16, 0.12) 50%, rgba(17, 17, 17, 0.6));
  margin-bottom: clamp(48px, 6vw, 72px);
}
.footer-cta__title { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.2; color: var(--white); }
.footer-cta__title:lang(en) { font-weight: 500; letter-spacing: -0.02em; }
.footer-cta__text { color: var(--muted); margin-top: 8px; max-width: 52ch; }
@media (max-width: 479px) { .footer-cta .btn { width: 100%; } }
@media (min-width: 768px) { .footer-cta { grid-template-columns: 1fr auto; gap: 40px; } }

/* Columns */
.site-footer__grid { gap: 44px 32px; padding-bottom: clamp(44px, 6vw, 64px); }
.site-footer__about { color: var(--muted); font-size: 0.94rem; line-height: 1.75; margin-top: 18px; max-width: 34ch; }
.site-footer__social { margin-top: 26px; }
.site-footer__social ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-footer__social a { color: var(--muted); font-size: 0.92rem; transition: color 0.3s; }
.site-footer__social a:hover { color: var(--brand); }
.site-footer__col ul a[aria-current="page"] { color: var(--brand); }
.site-footer__col nav a, .site-footer__col li > a { position: relative; }

.footer-contact { display: grid; gap: 16px; }
.footer-contact__row { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.site-footer__col li + li.footer-contact__row { margin-top: 0; }
.footer-contact__row > .icon {
  width: 34px; height: 34px; padding: 8px; color: var(--brand);
  border: 1px solid var(--brand-line); background: var(--brand-faint);
}
.footer-contact__row > span { display: grid; gap: 2px; min-width: 0; }
.footer-contact__label { font-size: 0.74rem; color: var(--brand); letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-en); }
.footer-contact__label:lang(ar), [lang="ar"] .footer-contact__label { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 0.82rem; }
.site-footer__col .footer-contact__row span, .site-footer__col .footer-contact__row a { min-height: 0; display: block; color: var(--cream); font-size: 0.95rem; }
.site-footer__col .footer-contact__row .footer-contact__label { color: var(--brand); font-size: 0.78rem; }
.site-footer__col .footer-contact__row a.ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }
[dir="rtl"] .site-footer__col .footer-contact__row a.ltr { text-align: right; }
.site-footer__col .footer-contact__row a:hover { color: var(--brand); }

@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .site-footer__grid { grid-template-columns: 1.25fr 0.75fr 1fr 1.25fr; } }

/* Animated map card */
.map-card { display: block; color: var(--cream); }
.map-card__frame {
  position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10;
  border: 1px solid var(--brand-line);
  background: radial-gradient(120% 90% at 20% 10%, rgba(238, 29, 35, 0.08), transparent 60%), #111111;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  transition: border-color 0.4s, box-shadow 0.6s var(--ease);
}
.map-card__svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--cream); transition: transform 1.2s var(--ease); }
.map-card:hover .map-card__frame, .map-card:focus-visible .map-card__frame { border-color: var(--brand-soft); box-shadow: 0 30px 60px -30px #000, 0 0 40px -10px rgba(238, 29, 35, 0.45); }
.map-card:hover .map-card__svg { transform: scale(1.06); }
.map-card__label {
  position: absolute; bottom: 12px; inset-inline-start: 12px; display: grid; gap: 0;
  padding: 8px 12px; background: rgba(12, 12, 12, 0.78); border: 1px solid var(--brand-line);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.map-card__city { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.map-card__city:lang(en), [lang="en"] .map-card__city { font-weight: 600; }
.map-card__country { font-size: 0.74rem; color: var(--muted); }
.map-card__open { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.88rem; color: var(--brand); }
.map-card__open .icon { transition: transform 0.4s var(--ease); }
.map-card:hover .map-card__open .icon { transform: translateX(4px); }
[dir="rtl"] .map-card:hover .map-card__open .icon { transform: scaleX(-1) translateX(4px); }
.map-card[aria-disabled="true"] { cursor: not-allowed; }

.map-road { stroke-width: 2; opacity: 0.32; stroke-dasharray: 100; stroke-dashoffset: 0; }
.map-road--minor { stroke-width: 1; opacity: 0.2; }
.map-route { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 4px rgba(238, 29, 35, 0.8)); }
.map-route-flow { fill: none; stroke: #ffd9b8; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 6; opacity: 0; }
.map-pin { fill: var(--brand-fill); stroke: #ffffff; stroke-width: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.6)); }
.map-pulse { fill: none; stroke: var(--brand); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* Draw-in, then a living route and pulsing pin (starts when the card scrolls into view) */
@keyframes mapDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes mapFlow { to { stroke-dashoffset: -16; } }
@keyframes mapPulse { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes mapDrop { 0% { opacity: 0; transform: translateY(-14px); } 60% { opacity: 1; transform: translateY(2px); } 100% { opacity: 1; transform: none; } }
.js .map-card:not(.is-inview) .map-road, .js .map-card:not(.is-inview) .map-route { stroke-dashoffset: 100; }
.js .map-card:not(.is-inview) .map-pin { opacity: 0; }
.map-card.is-inview .map-road { animation: mapDraw 1.8s var(--ease) both; }
.map-card.is-inview .map-road:nth-child(2) { animation-delay: 0.15s; }
.map-card.is-inview .map-road:nth-child(3) { animation-delay: 0.3s; }
.map-card.is-inview .map-road:nth-child(4) { animation-delay: 0.45s; }
.map-card.is-inview .map-road:nth-child(5) { animation-delay: 0.6s; }
.map-card.is-inview .map-route { animation: mapDraw 1.6s 0.7s var(--ease) both; }
.map-card.is-inview .map-route-flow { opacity: 0.9; transition: opacity 0.6s 2.2s; animation: mapFlow 1.2s linear infinite; }
.map-card.is-inview .map-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: mapDrop 0.7s 1.9s var(--ease) both; }
.map-card.is-inview .map-pulse { animation: mapPulse 2.6s 2.3s ease-out infinite; }
.map-card.is-inview .map-pulse--late { animation-delay: 3.6s; }

@media (prefers-reduced-motion: reduce) {
  .map-card .map-road, .map-card .map-route { animation: none !important; stroke-dashoffset: 0 !important; }
  .map-card .map-pin { animation: none !important; opacity: 1 !important; }
  .map-card .map-pulse, .map-card .map-route-flow { animation: none !important; }
  .map-card:hover .map-card__svg { transform: none; }
}
/* the map card sits in a footer column, whose generic link/span rules must not apply to it */
.site-footer__map .map-card { display: block; min-height: 0; color: var(--cream); }
.site-footer__map .map-card__frame { display: block; min-height: 0; }
.site-footer__map .map-card__label { display: grid; min-height: 0; }
.site-footer__map .map-card__city { display: block; min-height: 0; color: var(--cream); font-size: 1rem; }
.site-footer__map .map-card__country { display: block; min-height: 0; color: var(--muted); font-size: 0.74rem; }
.site-footer__map .map-card__open { display: inline-flex; min-height: 0; color: var(--brand); font-size: 0.88rem; }
.site-footer__brand .wordmark { display: flex; width: max-content; }
.site-footer__brand .tagline { display: table; }
[dir="rtl"] .site-footer__brand .tagline { margin-left: auto; margin-right: 0; transform-origin: right center; }

/* =========================================================================
   ABOUT NAJA (SEO content) + FAQ
   ========================================================================= */
.about-naja { border-top: 1px solid var(--brand-line); }
.about-naja__grid { display: grid; gap: clamp(44px, 6vw, 88px); align-items: start; }
.about-naja .section-copy { max-width: 62ch; }
.about-naja .section-copy + .section-copy { margin-block-start: 16px; }
.about-naja__cta { margin-top: 34px; }
@media (max-width: 479px) { .about-naja__cta { width: 100%; } }
@media (min-width: 1024px) { .about-naja__grid { grid-template-columns: 1.05fr 0.95fr; } }

.faq__title { font-size: 1.25rem; font-weight: 700; color: var(--cream); margin-bottom: 18px; }
.faq__title:lang(en), [lang="en"] .faq__title { font-weight: 500; }
.faq { border-top: 1px solid var(--brand-line); }
.faq__item { border-bottom: 1px solid var(--brand-line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding-block: 16px; cursor: pointer; list-style: none;
  font-size: 1.05rem; font-weight: 600; color: var(--cream); transition: color 0.3s;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover, .faq__item[open] .faq__q { color: var(--brand); }
.faq__icon { position: relative; width: 32px; height: 32px; flex: none; border: 1px solid var(--brand-line); transition: background 0.4s var(--ease), border-color 0.4s; }
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background: currentColor;
  transform: translate(-50%, -50%); transition: transform 0.4s var(--ease);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--grad-brand); border-color: transparent; color: #ffffff; }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a { padding-bottom: 20px; color: var(--muted); font-size: 0.97rem; line-height: 1.8; max-width: 60ch; }
.faq__item[open] .faq__a { animation: itemIn 0.5s var(--ease) both; }