/* Vista Vibes Lounge — vistavibes.net
   One stylesheet for every page. Arabic is the default (RTL); English flips
   <html lang dir> and the .ar / .en spans swap. */

/* Cairo (the app's Arabic face) and Playfair, subset to WOFF2 (2026-09-27):
   ~170 KB instead of the 900 KB of TTF the first paint used to wait for. */
@font-face { font-family: 'Cairo'; src: url('../fonts/Cairo-arabic.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Cairo'; src: url('../fonts/Cairo-latin.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Playfair'; src: url('../fonts/PlayfairDisplay-latin.woff2') format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: 'Messiri'; src: url('../fonts/ElMessiri-arabic.woff2') format('woff2'); font-weight: 400 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Messiri'; src: url('../fonts/ElMessiri-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #0e0b09;
  --bg-2: #15110e;
  --card: #1b1612;
  --card-2: #221b16;
  --line: #3a2e24;
  --line-soft: #2a221c;
  --text: #efe6d8;
  --muted: #ab9c8c;
  --faint: #716353;
  --gold: #c9a96e;
  --gold-hi: #e6c890;
  --rose: #d8ad95;
  --sage: #46523f;
  --ok: #7fae7a;
  --err: #e38d7a;
  --radius: 20px;
  --wrap: 1240px;
  --fs-xs: 13px;      /* captions, badges */
  --fs-sm: 14.5px;    /* secondary text, small buttons */
  --fs-base: 16px;    /* body */
  --fs-md: 17.5px;    /* leads, card titles */
  --fs-lg: 20px;
  --fs-h3: clamp(22px, 2.2vw, 30px);
  --fs-h2: clamp(34px, 4.6vw, 64px);
  --fs-h1: clamp(40px, 6.4vw, 88px);
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-io: cubic-bezier(.77,0,.18,1);
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
html:not(.fine) { scroll-behavior: smooth; }
body {
  font-family: 'Cairo', system-ui, sans-serif; background: var(--bg); color: var(--text);
  line-height: 1.7; min-height: 100vh; overflow-x: clip;
}
html[lang="en"] body { line-height: 1.6; }
/* Arabic glyphs read smaller at the same size: one step up. */
html[lang="ar"] { --fs-xs: 13.5px; --fs-sm: 15px; --fs-base: 16.5px; --fs-md: 18px; --fs-lg: 21px; }
html[lang="ar"] body { font-size: var(--fs-base); line-height: 1.8; }
/* Arabic letters join: any letter-spacing tears the word apart. */
html[lang="ar"] body, html[lang="ar"] body * { letter-spacing: 0 !important; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(201,169,110,.35); }
html[lang="ar"] .en, html[lang="en"] .ar { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.display { font-family: 'Playfair', 'Messiri', serif; font-weight: 600; letter-spacing: -.015em; }
html[lang="ar"] .display { font-family: 'Messiri', 'Cairo', serif; font-weight: 700; letter-spacing: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
html[lang="ar"] .eyebrow { font-size: var(--fs-sm); }
.lead { color: var(--muted); font-size: var(--fs-md); max-width: 58ch; }
.gold-text { background: linear-gradient(100deg, #b8925a, #f0d6a2 40%, #c9a96e 60%, #e9cc95); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- buttons ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(20,16,13,.4); color: var(--text);
  font-weight: 700; font-size: var(--fs-base); cursor: pointer; white-space: nowrap;
  transition: border-color .3s, color .3s, transform .35s var(--ease), box-shadow .3s;
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--text); transform: translateY(101%); border-radius: inherit; transition: transform .45s var(--ease); }
.btn:hover { color: var(--bg); border-color: var(--text); }
.btn:hover::before { transform: none; }
.btn.gold { background: linear-gradient(135deg, #d9b97c, #b8925a); border-color: transparent; color: #17110a; box-shadow: 0 10px 30px -10px rgba(201,169,110,.55); }
.btn.gold::before { background: #f3dcae; }
.btn.gold:hover { color: #17110a; box-shadow: 0 14px 40px -10px rgba(201,169,110,.8); }
.btn.gold::after { /* shine */
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg);
  animation: shine 4.5s var(--ease) infinite 1.5s;
}
@keyframes shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn.small { min-height: 42px; padding: 0 20px; font-size: var(--fs-sm); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
html[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(4px); }

/* ---------- progress, curtain, loader ---------- */
.progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 70; pointer-events: none; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, #b8925a, var(--gold-hi)); transform-origin: left; transform: scaleX(0); }
html[dir="rtl"] .progress i { transform-origin: right; }

.curtain { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.curtain::before { content: ''; position: absolute; inset: 0; background: var(--bg); transform: translateY(100%); transition: transform .5s var(--ease-io); }
.curtain-inner { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.curtain-mark { width: 74px; fill: var(--rose); }
.curtain.cover { pointer-events: auto; }
.curtain.cover::before { transform: none; }
.curtain.cover .curtain-inner { opacity: 1; transition-delay: .2s; }
.curtain.cover .curtain-mark { animation: pulse 1.2s ease-in-out infinite; }
.curtain.reveal-out::before { transform: translateY(-100%); transition-duration: .7s; }
.curtain.reveal-out .curtain-inner { opacity: 0; transition-delay: 0s; }
@keyframes pulse { 50% { transform: scale(.9); opacity: .7; } }

.loader { position: fixed; inset: 0; z-index: 210; background: var(--bg); display: grid; place-items: center; transition: clip-path 1s var(--ease-io); clip-path: inset(0 0 0 0); }
.loader.done { clip-path: inset(0 0 100% 0); }
.loader-inner { display: grid; justify-items: center; gap: 22px; }
.loader-mark { width: 110px; fill: transparent; stroke: var(--rose); stroke-width: 6; }
.loader-mark path { vector-effect: non-scaling-stroke; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.loader.draw .loader-mark path { transition: stroke-dashoffset 1.3s var(--ease-io), fill .6s .9s; stroke-dashoffset: 0; fill: var(--rose); }
.loader-word { width: 190px; opacity: 0; transform: translateY(10px); transition: .7s .8s var(--ease); }
.loader.draw .loader-word { opacity: 1; transform: none; }
.loader-bar { width: 160px; height: 1px; background: var(--line); overflow: hidden; }
.loader-bar i { display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.loader.draw .loader-bar i { transform: scaleX(1); transition: transform 1.6s var(--ease-io); }

/* ---------- custom cursor ---------- */
.cur-dot, .cur-ring { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; opacity: 0; transition: opacity .3s; }
html.cur-on .cur-dot, html.cur-on .cur-ring { opacity: 1; }
.cur-dot { display: none; }
.cur-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.cur-ring::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(201,169,110,.6); border-radius: 50%; transition: transform .35s var(--ease), background .3s, border-color .3s; }
.cur-ring.hover::before { transform: scale(1.7); background: rgba(201,169,110,.1); border-color: var(--gold); }
.cur-ring.down::before { transform: scale(.8); }
.cur-ring.text::before { transform: scale(.4); }
.cur-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #17110a; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.cur-ring.label::before { transform: scale(2.3); background: var(--gold); border-color: var(--gold); }
.cur-ring.label span { opacity: 1; }

/* ---------- floating marks (Atheer-hexagon style) ---------- */
.has-deco { position: relative; isolation: isolate; }
.deco-layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.deco { position: absolute; aspect-ratio: 1117 / 1379; animation: drift var(--dur) ease-in-out var(--delay) infinite alternate; }
.deco svg { width: 100%; height: 100%; display: block; }
.deco.fill svg { fill: var(--rose); opacity: .045; }
.deco.line svg { fill: none; stroke: var(--gold); opacity: .16; }
.deco.line svg path { vector-effect: non-scaling-stroke; stroke-width: 1; }
@keyframes drift { from { transform: rotate(var(--rot)) translateY(-14px); } to { transform: rotate(calc(var(--rot) * -1)) translateY(14px); } }

/* ---------- header ---------- */
.site-head { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: background .4s, border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; }
.site-head::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: rgba(14,11,9,.78); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
.site-head.solid, .site-head.always { border-bottom-color: var(--line-soft); }
.site-head.solid::before, .site-head.always::before { opacity: 1; }
html.menu-open .site-head::before { opacity: 0; }
.head-row { display: flex; align-items: center; gap: 22px; height: 88px; transition: height .4s var(--ease); }
.site-head.solid .head-row { height: 72px; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 56px; width: auto; transition: height .4s var(--ease), filter .3s; filter: drop-shadow(0 4px 18px rgba(216,173,149,.25)); }
.site-head.solid .brand img { height: 44px; }
.nav { display: flex; gap: 4px; margin-inline-start: auto; }
.nav a { position: relative; font-size: var(--fs-base); color: var(--muted); font-weight: 700; padding: 8px 12px; transition: color .25s; }
.nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .35s var(--ease); }
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav .nav-big { display: none; }
.head-actions { display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; font-size: var(--fs-xs); font-weight: 800; }
.lang button { border: 0; background: none; cursor: pointer; padding: 5px 11px; border-radius: 999px; color: var(--muted); min-width: 38px; transition: .25s; }
.lang button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.menu-toggle { display: none; background: none; border: 0; color: var(--text); width: 46px; height: 46px; cursor: pointer; position: relative; z-index: 2; }
.menu-toggle i { position: absolute; left: 11px; right: 11px; height: 1.6px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease), opacity .2s; }
.menu-toggle i:nth-child(1) { top: 17px; } .menu-toggle i:nth-child(2) { top: 23px; } .menu-toggle i:nth-child(3) { top: 29px; }
.menu-toggle[aria-expanded="true"] i:nth-child(1) { top: 23px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] i:nth-child(3) { top: 23px; transform: rotate(-45deg); }

@media (max-width: 1000px) {
  .head-row { height: 76px; }
  .brand img { height: 46px; }
  .nav {
    position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; gap: 2px; padding: 90px 28px 40px;
    background: radial-gradient(120% 80% at 50% 0%, #1e1814, var(--bg)); margin: 0;
    clip-path: circle(0% at calc(100% - 44px) 38px); transition: clip-path .7s var(--ease-io); visibility: hidden;
  }
  html[dir="rtl"] .nav { clip-path: circle(0% at 44px 38px); }
  .nav.open { clip-path: circle(150% at 50% 0%) !important; visibility: visible; }
  .nav a { font-family: 'Messiri', 'Playfair', serif; font-size: clamp(30px, 9vw, 44px); color: var(--text); padding: 6px 0; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .6s var(--ease); }
  html[lang="en"] .nav a { font-family: 'Playfair', serif; }
  .nav a::after { display: none; }
  .nav.open a { opacity: 1; transform: none; }
  .nav.open a:nth-child(2) { transition-delay: .08s; } .nav.open a:nth-child(3) { transition-delay: .14s; } .nav.open a:nth-child(4) { transition-delay: .2s; }
  .nav.open a:nth-child(5) { transition-delay: .26s; } .nav.open a:nth-child(6) { transition-delay: .32s; } .nav.open a:nth-child(7) { transition-delay: .38s; }
  .nav .nav-big { display: block; position: absolute; bottom: 36px; inset-inline-start: 28px; width: 120px; opacity: .9; }
  .menu-toggle { display: block; }
  .head-actions .btn { display: none; }
  .head-actions { margin-inline-start: auto; position: relative; z-index: 2; }
}

/* ---------- split words & reveals ---------- */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .12em 0 .22em; margin: -.12em 0 -.22em; }
[data-split] .w > span { display: inline-block; transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 55ms + .1s); }
[data-split].in .w > span, html:not(.js) [data-split] .w > span { transform: none; }
html.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .stagger > * { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
html.js .stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(2) { transition-delay: .1s; } .stagger.in > *:nth-child(3) { transition-delay: .2s; } .stagger.in > *:nth-child(4) { transition-delay: .3s; }
.stagger.in > *:nth-child(5) { transition-delay: .4s; } .stagger.in > *:nth-child(6) { transition-delay: .5s; }
.clip-reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-io); }
.clip-reveal.in { clip-path: inset(0 0 0 0); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px 0 90px; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: -8%; z-index: -3; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.15); transition: transform 2.8s var(--ease); filter: saturate(1.05) contrast(1.05); }
html.ready .hero-media img { transform: scale(1.02); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(60% 55% at 50% 45%, rgba(14,11,9,.2), rgba(14,11,9,.78) 70%, var(--bg)),
  linear-gradient(0deg, var(--bg) 0%, transparent 30%); }
.hero canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero-inner { display: grid; justify-items: center; gap: 18px; max-width: 900px; padding: 0 20px; }
.hero-logo { width: min(560px, 82vw); }
html.js .hero-logo { filter: drop-shadow(0 10px 60px rgba(216,173,149,.35)); opacity: 0; transform: translateY(30px) scale(.96); transition: opacity 1.4s var(--ease) .2s, transform 1.6s var(--ease) .2s; }
html.ready .hero-logo { opacity: 1; transform: none; }
.hero-glow { position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%; z-index: -1; left: 50%; top: 46%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(216,173,149,.22), transparent 65%); filter: blur(10px); animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; transform: translate(-50%,-50%) scale(1.12); } }
.hero .tagline { font-size: clamp(24px, 3.6vw, 42px); line-height: 1.35; color: #f3e7d4; }
.hero .sub { font-size: 12.5px; letter-spacing: .5em; color: var(--gold); font-weight: 700; text-transform: uppercase; }
html[lang="ar"] .hero .sub { font-size: var(--fs-md); word-spacing: .35em; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; }
.hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; }
.dot.open { background: var(--ok); box-shadow: 0 0 0 0 rgba(127,174,122,.6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(127,174,122,0); } 100% { box-shadow: 0 0 0 0 rgba(127,174,122,0); } }
html.js .hero-fade > * { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
html.ready .hero-fade > * { opacity: 1; transform: none; }
html.ready .hero-fade > *:nth-child(1) { transition-delay: .7s; } html.ready .hero-fade > *:nth-child(2) { transition-delay: .85s; }
html.ready .hero-fade > *:nth-child(3) { transition-delay: 1s; } html.ready .hero-fade > *:nth-child(4) { transition-delay: 1.15s; }
.scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; color: var(--faint); font-size: var(--fs-xs); letter-spacing: .3em; text-transform: uppercase; }
.scroll-cue i { width: 1px; height: 46px; background: linear-gradient(var(--gold), transparent); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- marquee ---------- */
.marquee { border-block: 1px solid var(--line-soft); padding: 22px 0; overflow: hidden; background: var(--bg-2); direction: ltr; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-track span { font-family: 'Playfair', serif; font-size: clamp(28px, 4.2vw, 56px); white-space: nowrap; padding: 0 28px; color: transparent; -webkit-text-stroke: 1px rgba(201,169,110,.55); display: inline-flex; align-items: center; gap: 56px; }
.marquee-track span b { color: var(--text); -webkit-text-stroke: 0; font-weight: 600; font-family: 'Messiri', serif; }
.marquee-track svg { width: 28px; fill: var(--rose); opacity: .8; }

/* ---------- sections ---------- */
section.block { padding: 120px 0; position: relative; }
section.block.tight { padding: 80px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 48px; flex-wrap: wrap; }
.sec-head h2 { font-size: var(--fs-h2); line-height: 1.1; margin-top: 14px; }
html[lang="ar"] .sec-head h2 { line-height: 1.35; }
.sec-head .lead { margin-top: 16px; }

/* statement with scroll-lit words */
.statement { font-size: clamp(28px, 3.8vw, 52px); line-height: 1.45; max-width: 22ch; }
html[lang="en"] .statement { max-width: 24ch; line-height: 1.2; }
.statement .hw { color: rgba(239,230,216,.14); transition: color .5s; }
.statement .hw.on { color: var(--text); }
.statement .hw.on.key { color: var(--gold-hi); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 80px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.stat { background: var(--bg); padding: 34px 26px; }
.stat b { display: block; font-family: 'Playfair', 'Messiri', serif; font-size: clamp(44px, 5.5vw, 74px); line-height: 1; font-weight: 600; }
.stat b sup { font-size: .45em; color: var(--gold); vertical-align: top; margin-inline-start: 4px; }
.stat > span { color: var(--muted); font-weight: 700; margin-top: 12px; display: block; }
@media (max-width: 800px) { .stats { grid-template-columns: 1fr 1fr; } }

/* horizontal experience (sticky scroller) */
.hscroll { position: relative; }
.hscroll-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.hscroll-head { padding-bottom: 34px; }
.hscroll-track { display: flex; gap: 26px; width: max-content; padding-inline: max(22px, calc((100vw - var(--wrap)) / 2 + 22px)); will-change: transform; }
.xp { position: relative; flex: none; width: min(460px, 78vw); height: min(62vh, 600px); border-radius: 26px; overflow: hidden; isolation: isolate; border: 1px solid var(--line-soft); background: var(--card); transform-style: preserve-3d; transition: transform .5s var(--ease); }
.xp img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.xp:hover img { transform: scale(1.06); }
.xp::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,8,6,.95) 5%, rgba(10,8,6,.15) 55%, transparent); }
.xp::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(230,200,144,.18), transparent 60%); }
.xp:hover::before { opacity: 1; }
.xp-body { position: absolute; inset: auto 0 0 0; padding: 30px; }
.xp-num { font-family: 'Playfair', serif; color: var(--gold); font-size: var(--fs-sm); letter-spacing: .2em; }
.xp h3 { font-size: var(--fs-h3); line-height: 1.3; margin: 6px 0 8px; }
.xp p { color: #cfc3b3; font-size: var(--fs-base); }
.xp .btn { margin-top: 18px; }
.hscroll-progress { margin-top: 30px; height: 1px; background: var(--line); position: relative; }
.hscroll-progress i { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(0); }
@media (max-width: 800px) {
  .hscroll { height: auto !important; }
  .hscroll-track { width: auto; }
  .hscroll-sticky { position: static; height: auto; padding: 100px 0 40px; }
  .hscroll-track { overflow-x: auto; scroll-snap-type: x mandatory; transform: none !important; padding-bottom: 14px; scrollbar-width: none; }
  .xp { scroll-snap-align: center; height: 70vh; max-height: 540px; }
  .hscroll-progress { display: none; }
}

/* reels */
.reels { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 270px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.reel { scroll-snap-align: start; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 9/16; background: var(--card); cursor: pointer; border: 1px solid var(--line-soft); transition: transform .5s var(--ease), border-color .3s; }
.reel:hover { transform: translateY(-8px); border-color: var(--line); }
.reel video, .reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel .cap { position: absolute; inset: auto 0 0 0; padding: 50px 18px 18px; background: linear-gradient(0deg, rgba(10,8,6,.92), transparent); }
.reel .cap b { display: block; font-size: var(--fs-md); }
.reel .cap span { font-size: var(--fs-xs); color: #cbbfb0; line-height: 1.5; display: block; }
.reel .play { position: absolute; top: 14px; inset-inline-end: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(14,11,9,.55); display: grid; place-items: center; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.15); transition: opacity .3s, transform .3s; }
.reel .play svg { width: 14px; height: 14px; }
.reel.playing .play { opacity: 0; transform: scale(.6); }

/* menu teaser */
.menu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.menu-tile { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 3/4; isolation: isolate; border: 1px solid var(--line-soft); }
.menu-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--ease), filter .6s; filter: saturate(.9) brightness(.9); }
.menu-tile:hover img { transform: scale(1.08); filter: none; }
.menu-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,8,6,.9), transparent 55%); }
.menu-tile span { position: absolute; bottom: 18px; inset-inline-start: 20px; font-weight: 800; font-size: 20px; font-family: 'Messiri', 'Playfair', serif; }
.menu-tile em { position: absolute; top: 16px; inset-inline-end: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(14,11,9,.5); border: 1px solid rgba(255,255,255,.15); font-style: normal; transform: scale(0) rotate(-45deg); transition: transform .5s var(--ease); }
.menu-tile:hover em { transform: none; }
@media (max-width: 900px) { .menu-grid { grid-template-columns: repeat(2, 1fr); } }

/* matches */
.matches { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
.match { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--card-2), var(--card)); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: border-color .3s, transform .5s var(--ease); }
.match:hover { border-color: var(--line); transform: translateY(-4px); }
.match .comp { font-size: var(--fs-xs); color: var(--gold); font-weight: 800; display: flex; justify-content: space-between; gap: 10px; }
.match .comp time { color: var(--muted); font-weight: 700; }
.match .teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; font-weight: 800; font-size: var(--fs-md); line-height: 1.35; }
.match .vs { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--faint); font-size: var(--fs-xs); }
.match .kick { text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.match .btn { width: 100%; }
.match.skeleton { min-height: 220px; background: linear-gradient(90deg, var(--card), #262019, var(--card)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty-note { color: var(--muted); padding: 26px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; }
.countdown { margin-top: 4px; font-size: var(--fs-xs); color: var(--faint); }
.countdown b { color: var(--gold); }
.countdown .live { color: var(--err); }

/* gallery */
.gallery { columns: 4 250px; column-gap: 16px; }
.gallery figure { break-inside: avoid; margin-bottom: 16px; border-radius: 16px; overflow: hidden; cursor: zoom-in; border: 1px solid var(--line-soft); position: relative; }
.gallery img { width: 100%; height: auto; transition: transform 1s var(--ease), filter .5s; filter: brightness(.88); }
.gallery figure:hover img { transform: scale(1.06); filter: none; }
.lightbox { position: fixed; inset: 0; z-index: 150; background: rgba(8,6,5,.95); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-height: 88vh; max-width: min(92vw, 900px); border-radius: 14px; object-fit: contain; transform: scale(.94); transition: transform .5s var(--ease); }
.lightbox.open img { transform: none; }
.lightbox button { position: absolute; background: rgba(255,255,255,.08); border: 0; color: #fff; width: 52px; height: 52px; border-radius: 50%; cursor: pointer; font-size: 24px; }
.lightbox .x { top: 18px; inset-inline-end: 18px; }
.lightbox .prev { inset-inline-start: 18px; top: 50%; }
.lightbox .next { inset-inline-end: 18px; top: 50%; }

/* app band */
.app-band { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; background: radial-gradient(120% 140% at 0% 0%, #2c2219 0%, var(--bg-2) 55%); border: 1px solid var(--line); border-radius: 32px; padding: 60px; }
.app-band ul { list-style: none; margin: 24px 0 30px; display: grid; gap: 12px; }
.app-band li { display: flex; gap: 12px; align-items: flex-start; color: #d6cabb; font-size: var(--fs-md); }
.app-band li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-top: .75em; flex: none; box-shadow: 0 0 12px var(--gold); }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: #0c0a08; border-radius: 16px; padding: 10px 20px; min-height: 60px; transition: border-color .3s, transform .4s var(--ease); }
.store:hover { border-color: var(--gold); transform: translateY(-3px); }
.store svg { width: 26px; height: 26px; }
.store small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.store b { display: block; font-size: var(--fs-base); line-height: 1.25; }
.app-art { justify-self: center; position: relative; width: min(420px, 88vw); height: 470px; }
.app-art .ph { position: absolute; width: 56%; height: auto; top: 0; inset-inline-end: 4%; filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); transition: transform .6s var(--ease); }
.app-art .ph.back { inset-inline-end: auto; inset-inline-start: 4%; top: 50px; opacity: .88; transform: rotate(-6deg); }
html[dir="ltr"] .app-art .ph.back { transform: rotate(6deg); }
.app-band:hover .app-art .ph:not(.back) { transform: translateY(-12px) rotate(2deg); }
@media (max-width: 900px) { .app-band { grid-template-columns: 1fr; padding: 34px 22px; } .app-art { height: 400px; } }

/* visit */
.visit { display: grid; grid-template-columns: 1fr 1.25fr; gap: 22px; }
.info-card { background: var(--card); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 32px; display: grid; gap: 26px; align-content: start; }
.info-card h3 { font-size: var(--fs-xs); color: var(--gold); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 6px; }
html[lang="ar"] .info-card h3 { letter-spacing: 0; font-size: var(--fs-sm); }
.info-card p, .info-card a { color: #d8cdbf; }
.info-card a:hover { color: var(--gold-hi); }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 4px 18px; }
.hours dt { color: var(--muted); }
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.socials a { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: border-color .3s, color .3s, transform .4s var(--ease); }
.socials a:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-3px); }
.socials svg { width: 19px; height: 19px; }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); min-height: 460px; background: var(--card); position: relative; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.4) invert(.9) hue-rotate(180deg) brightness(.95) contrast(.9); }
@media (max-width: 900px) { .visit { grid-template-columns: 1fr; } .map { min-height: 320px; } }

/* big CTA + footer */
.cta-band { text-align: center; padding: 140px 0 120px; }
.cta-band h2 { font-size: clamp(40px, 7vw, 104px); line-height: 1.08; }
html[lang="ar"] .cta-band h2 { line-height: 1.3; }
.cta-band .btn { margin-top: 36px; min-height: 64px; padding: 0 42px; font-size: var(--fs-md); }
.site-foot { position: relative; overflow: hidden; border-top: 1px solid var(--line-soft); padding: 60px 0 40px; color: var(--muted); font-size: var(--fs-sm); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; }
.foot-grid img.flogo { height: 64px; margin-bottom: 16px; }
.foot-grid h4 { color: var(--text); font-size: var(--fs-sm); margin-bottom: 12px; }
.foot-grid a { display: block; padding: 3px 0; transition: color .25s; }
.foot-grid a:hover { color: var(--gold-hi); }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--line-soft); margin-top: 40px; padding-top: 22px; font-size: var(--fs-xs); }
.foot-water { position: absolute; inset-inline-end: -60px; bottom: -120px; width: 380px; fill: var(--rose); opacity: .05; pointer-events: none; }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* sticky mobile CTA */
.mobile-cta { display: none; }
@media (max-width: 700px) {
  .mobile-cta { display: flex; gap: 10px; position: fixed; inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px; z-index: 40; transform: translateY(150%); transition: transform .5s var(--ease); }
  .mobile-cta.show { transform: none; }
  .mobile-cta .btn { flex: 1; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
  .mobile-cta .btn:not(.gold) { background: rgba(26,21,18,.95); backdrop-filter: blur(10px); }
  section.block { padding: 84px 0; }
  .cta-band { padding: 100px 0 90px; }
}

/* page hero for inner pages */
.page-hero { position: relative; padding: 150px 0 60px; overflow: hidden; isolation: isolate; }
.page-hero h1 { font-size: var(--fs-h1); line-height: 1.1; margin-top: 12px; }
html[lang="ar"] .page-hero h1 { line-height: 1.3; }
.page-hero .lead { margin-top: 16px; }

/* =================== MENU PAGE =================== */
.menu-bar { position: sticky; top: 72px; z-index: 30; background: rgba(14,11,9,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block: 1px solid var(--line-soft); }
.menu-bar .wrap { display: flex; gap: 12px; align-items: center; padding-block: 12px; }
.cat-rail { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; scroll-behavior: smooth; }
.cat-rail::-webkit-scrollbar { display: none; }
.cat-rail a { flex: none; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: var(--fs-sm); transition: .25s; }
.cat-rail a:hover { color: var(--text); border-color: var(--faint); }
.cat-rail a.on { background: var(--gold); border-color: var(--gold); color: #17110a; }
.msearch { position: relative; flex: none; width: 240px; }
.msearch input { width: 100%; min-height: 42px; border-radius: 999px; background: #15110e; border: 1px solid var(--line); padding: 0 40px 0 16px; font-size: var(--fs-sm); }
html[dir="rtl"] .msearch input { padding: 0 16px 0 40px; }
.msearch svg { position: absolute; top: 50%; transform: translateY(-50%); inset-inline-end: 14px; width: 17px; color: var(--faint); }
@media (max-width: 700px) { .menu-bar .wrap { flex-direction: column; align-items: stretch; } .msearch { width: 100%; } .menu-bar { top: 76px; } }
.mcat { padding: 70px 0 10px; scroll-margin-top: 150px; }
.mcat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid var(--line-soft); padding-bottom: 16px; margin-bottom: 26px; }
.mcat-head h2 { font-size: clamp(30px, 4vw, 48px); }
.mcat-head .en-name { font-family: 'Playfair', serif; color: var(--gold); font-size: var(--fs-md); font-style: italic; }
.mcat-intro { color: var(--muted); max-width: 70ch; margin: -10px 0 26px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.mcard { position: relative; background: var(--card); border: 1px solid var(--line-soft); border-radius: 20px; overflow: hidden; cursor: pointer; transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; text-align: start; padding: 0; }
.mcard:hover { transform: translateY(-6px); border-color: var(--line); box-shadow: 0 30px 50px -30px rgba(0,0,0,.8); }
.mcard .mimg { aspect-ratio: 4/3; overflow: hidden; background: #15110e; }
.mcard img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mcard:hover img { transform: scale(1.07); }
.mcard .mb { padding: 16px 18px 18px; }
.mcard h3 { font-size: var(--fs-md); line-height: 1.45; }
.mcard .men { font-family: 'Playfair', serif; color: var(--gold); font-size: var(--fs-xs); font-style: italic; margin-top: 2px; }
.mcard p { color: var(--muted); font-size: var(--fs-sm); margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard.hide { display: none; }
.mempty { text-align: center; color: var(--muted); padding: 60px 0; }
.mmodal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(8,6,5,.8); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .35s; }
.mmodal.open { opacity: 1; pointer-events: auto; }
.mmodal-card { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 26px; transform: translateY(30px) scale(.97); transition: transform .5s var(--ease); }
.mmodal.open .mmodal-card { transform: none; }
.mmodal-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.mmodal-body { padding: 24px 26px 28px; }
.mmodal-body h3 { font-size: 26px; }
.mmodal-body .men { font-family: 'Playfair', serif; color: var(--gold); font-style: italic; }
.mmodal-body p { color: #d6cabb; margin: 14px 0 22px; }
.mmodal .x { position: absolute; top: 18px; inset-inline-end: 18px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 22px; cursor: pointer; }

/* =================== BOOKING PAGE =================== */
.book-page { padding: 104px 0 80px; }
.book-shell { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.book-shell > * { min-width: 0; }
@media (max-width: 960px) { .book-shell { grid-template-columns: minmax(0, 1fr); } .summary { position: static; } .summary img { display: none; } }
.book-title { margin-bottom: 26px; }
.book-title h1 { font-size: clamp(32px, 4.6vw, 48px); line-height: 1.15; margin-top: 8px; }
.steps { display: flex; gap: 6px; margin-bottom: 22px; }
.steps span { flex: 1; height: 4px; border-radius: 4px; background: var(--line-soft); transition: background .3s; }
.steps span.on { background: var(--gold); }
.panel { background: var(--card); border: 1px solid var(--line-soft); border-radius: 22px; padding: 28px; }
@media (max-width: 600px) { .panel { padding: 20px 16px; border-radius: 18px; } }
.panel h2 { font-size: 22px; margin-bottom: 4px; }
.panel .hint { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 20px; }
.field { margin-bottom: 22px; }
.field > label, .field-label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 10px; }
.field-label small, .field > label small { color: var(--faint); font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line); background: #17130f; border-radius: 12px; padding: 9px 14px;
  cursor: pointer; font-weight: 700; font-size: var(--fs-sm); min-height: 44px; transition: .18s; text-align: center;
}
.chip small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.3; }
.chip:hover:not([disabled]) { border-color: var(--gold); }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #17110a; }
.chip[aria-pressed="true"] small { color: #3d2f18; }
.chip[disabled] { opacity: .32; cursor: not-allowed; text-decoration: line-through; }
.days { display: grid; grid-auto-flow: column; grid-auto-columns: 74px; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.days .chip { padding: 10px 4px; }
.days .chip b { display: block; font-size: 20px; line-height: 1.2; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.stepper button { width: 48px; height: 48px; background: #17130f; border: 0; cursor: pointer; font-size: 22px; }
.stepper button:hover { color: var(--gold); }
.stepper output { min-width: 64px; text-align: center; font-weight: 800; font-size: 20px; }

.zone-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.zone-tabs .chip { padding: 14px; }
.area { margin-bottom: 18px; }
.area h4 { font-size: var(--fs-xs); color: var(--muted); margin-bottom: 8px; font-weight: 700; }
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.table-chip { text-align: start; padding: 12px 14px; }
.table-chip .tid { display: flex; justify-content: space-between; gap: 6px; font-size: var(--fs-sm); }
.table-chip .tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.table-chip .tag { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; color: var(--muted); font-weight: 700; }
.table-chip[aria-pressed="true"] .tag { border-color: #6b5530; color: #3d2f18; }
.table-chip.small-fit { opacity: .6; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .grid-2 { grid-template-columns: 1fr; } }
.input {
  width: 100%; min-height: 50px; background: #15110e; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; font-size: var(--fs-base); transition: border-color .2s;
}
.input:focus { border-color: var(--gold); outline: none; }
.input[aria-invalid="true"] { border-color: var(--err); }
textarea.input { min-height: 90px; resize: vertical; }
.input.ltr { direction: ltr; text-align: start; }
html[lang="ar"] .input.ltr { text-align: right; }
.err-text { color: var(--err); font-size: var(--fs-xs); margin-top: 6px; min-height: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); color: #d6cabb; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--gold); margin-top: 3px; flex: none; }
.check a { color: var(--gold); text-decoration: underline; }

.actions { display: flex; gap: 10px; justify-content: space-between; margin-top: 26px; flex-wrap: wrap; }
.actions .btn.gold { min-width: 180px; }
.alert { border-radius: 14px; padding: 14px 16px; font-size: var(--fs-sm); margin-bottom: 18px; border: 1px solid; }
.alert.err { border-color: rgba(227,141,122,.4); background: rgba(227,141,122,.08); color: #f1c2b6; }
.alert.info { border-color: rgba(201,169,110,.35); background: rgba(201,169,110,.07); color: #e9d9b8; }
.alert a { text-decoration: underline; font-weight: 700; }

.otp { display: flex; gap: 8px; direction: ltr; justify-content: center; margin: 12px 0 8px; }
.otp input { width: 52px; height: 62px; text-align: center; font-size: 26px; font-weight: 800; border-radius: 12px; background: #15110e; border: 1px solid var(--line); }
.otp input:focus { border-color: var(--gold); outline: none; }
@media (max-width: 400px) { .otp input { width: 44px; height: 56px; } }
.resend { text-align: center; color: var(--muted); font-size: var(--fs-sm); }
.resend button { background: none; border: 0; color: var(--gold); font-weight: 700; cursor: pointer; text-decoration: underline; }
.resend button[disabled] { color: var(--faint); text-decoration: none; cursor: default; }

.summary { position: sticky; top: 96px; }
.summary .panel { padding: 0; overflow: hidden; }
.summary img { width: 100%; height: 160px; object-fit: cover; }
.summary .sum-body { padding: 22px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--fs-sm); }
.sum-row:last-child { border-bottom: 0; }
.sum-row span:first-child { color: var(--muted); }
.sum-row span:last-child { font-weight: 700; text-align: end; }
.sum-note { font-size: var(--fs-xs); color: var(--faint); margin-top: 12px; }

.done { text-align: center; padding: 20px 0; }
.done .tick { width: 76px; height: 76px; border-radius: 50%; background: rgba(201,169,110,.14); display: grid; place-items: center; margin: 0 auto 18px; color: var(--gold); }
.done .tick svg { width: 36px; height: 36px; }
.code { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 26px; letter-spacing: .12em; padding: 10px 20px; border: 1px dashed var(--gold); border-radius: 12px; color: var(--gold-hi); margin: 14px 0; direction: ltr; }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(0,0,0,.25); border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.who { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 18px; flex-wrap: wrap; }
.who button { background: none; border: 0; color: var(--gold); cursor: pointer; font-weight: 700; text-decoration: underline; }
.app-switch { width: 100%; display: flex; align-items: center; gap: 14px; text-align: start; background: linear-gradient(135deg, rgba(201,169,110,.14), rgba(201,169,110,.04)); border: 1px solid rgba(201,169,110,.45); border-radius: 16px; padding: 14px 16px; margin-bottom: 20px; color: var(--text); cursor: pointer; transition: border-color .2s, transform .2s; }
.app-switch:hover { border-color: var(--gold); transform: translateY(-1px); }
.app-switch b { display: block; font-size: var(--fs-md, 17px); }
.app-switch small { display: block; color: var(--muted); font-size: var(--fs-sm, 14px); line-height: 1.6; }
.app-switch-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: url(/assets/brand/mark.svg) center/60% no-repeat, #0e0b09; border: 1px solid var(--line); }

/* =================== FLOOR MAP =================== */
.fmap { display: grid; gap: 12px; }
.fmap-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.fmap-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  border: 1px solid var(--line); background: #17130f; border-radius: 999px; padding: 6px 14px; min-height: 38px;
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer; color: var(--muted); transition: .18s;
}
.fchip:hover { border-color: var(--gold); color: var(--text); }
.fchip[aria-pressed="true"] { background: rgba(201,169,110,.16); border-color: var(--gold); color: var(--gold-hi); }
.fmap-zoom { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.fmap-zoom button { width: 40px; height: 36px; background: #17130f; border: 0; cursor: pointer; font-size: 19px; font-weight: 700; display: grid; place-items: center; }
.fmap-zoom button + button { border-inline-start: 1px solid var(--line); }
.fmap-zoom button:hover { color: var(--gold); }
.fmap-zoom svg { width: 16px; height: 16px; }
.fmap-stage {
  position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-soft);
  background: radial-gradient(120% 80% at 50% 0%, #1d1814, #110e0c); display: flex; justify-content: center;
}
.fmap-svg { display: block; width: 100%; height: min(78vh, 860px); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: default; }
.fmap.zoomed .fmap-svg { touch-action: none; cursor: grab; }
.fmap.zoomed .fmap-svg:active { cursor: grabbing; }
.fmap-hint { font-size: var(--fs-xs); color: var(--faint); margin-top: -4px; }
.fm-area { transition: fill .25s, stroke .25s; }
.fm-area.hover { stroke: #6f6153; }
.fm-area.focus { stroke: var(--gold); stroke-width: .8; }
.fm-area-label { fill: #d9cebf; font-family: 'Cairo', sans-serif; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: #151210; stroke-width: .9px; stroke-linejoin: round; }
.fm-landmark { pointer-events: auto; }
.fm-table { cursor: pointer; outline: none; transition: opacity .25s; }
.fm-table .fm-body { fill: #3b3027; stroke: #9a8468; stroke-width: .45; transition: fill .2s, stroke .2s; }
.fm-table .fm-seat { fill: #6f6153; transition: fill .2s; }
.fm-table .fm-id { fill: #ede4d6; font-family: 'Cairo', sans-serif; font-weight: 800; pointer-events: none; }
.fm-table:hover .fm-body, .fm-table:focus-visible .fm-body { stroke: var(--gold-hi); stroke-width: .8; fill: #4a3c2f; }
.fm-table:focus-visible .fm-body { stroke-width: 1.1; }
.fm-table.small .fm-seat { fill: #8a5a4e; }
.fm-table.dim { opacity: .2; }
.fm-table.sel .fm-body { fill: var(--gold); stroke: #fff3d6; stroke-width: .7; filter: url(#fm-glow); }
.fm-table.sel .fm-seat { fill: var(--gold-hi); }
.fm-table.sel .fm-id { fill: #17110a; }
.fm-table.sel { animation: fm-pop .35s var(--ease); transform-box: fill-box; }
@keyframes fm-pop { 0% { opacity: .6; } 100% { opacity: 1; } }
.fmap-tip {
  position: absolute; z-index: 5; width: 230px; pointer-events: none;
  background: rgba(26,21,18,.97); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5); font-size: var(--fs-xs); line-height: 1.55;
}
.tip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tip-head b { font-size: var(--fs-md); color: var(--gold-hi); }
.tip-head span { color: var(--muted); font-weight: 700; }
.tip-area { color: var(--gold); font-weight: 700; font-size: var(--fs-xs); }
.tip-desc { color: #d6cabb; margin-top: 2px; }
.tip-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tip-tags span { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; color: var(--muted); font-weight: 700; }
.tip-warn { margin-top: 6px; color: #e3a58f; font-size: 12.5px; font-weight: 700; }
.fmap-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: var(--fs-xs); color: var(--muted); }
.fmap-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fmap-legend i { display: inline-block; width: 16px; height: 6px; border-radius: 2px; }
.lg-screen { border: 1.5px dashed #b7a6ea; height: 8px !important; }
.lg-window { background: #74aedb; }
.lg-entrance { background: #7fae7a; }
.lg-counter { background: #6d4637; }
.lg-seat { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #6f6153; }
.lg-sel { background: var(--gold); width: 12px !important; height: 12px !important; border-radius: 3px !important; }

/* view switch (map / list) in booking */
.view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 14px; }
.view-switch button { border: 0; background: none; padding: 6px 16px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: var(--fs-sm); color: var(--muted); }
.view-switch button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.pick-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--gold); background: rgba(201,169,110,.08); border-radius: 14px; padding: 12px 16px; margin-top: 12px; flex-wrap: wrap; }
.pick-card b { color: var(--gold-hi); font-size: var(--fs-md); }
.pick-card small { color: var(--muted); display: block; }

/* explore section on home */
.explore { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.explore-side { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.4fr); align-items: start; }
.explore-side .zone-switch { grid-template-columns: 1fr; }
.explore-side .area-list { grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .explore-side { grid-template-columns: minmax(0, 1fr); } .explore-side .zone-switch { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .explore-side .area-list { grid-template-columns: 1fr; } }
.zone-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.zone-switch button { border: 1px solid var(--line); background: #17130f; border-radius: 14px; padding: 12px; cursor: pointer; text-align: start; transition: .2s; }
.zone-switch button b { display: block; font-size: var(--fs-base); }
.zone-switch button small { color: var(--muted); font-size: var(--fs-xs); }
.zone-switch button[aria-pressed="true"] { border-color: var(--gold); background: rgba(201,169,110,.1); }
.zone-switch button[aria-pressed="true"] b { color: var(--gold-hi); }
.area-list { display: grid; gap: 6px; }
.area-list button { display: flex; justify-content: space-between; gap: 10px; align-items: center; width: 100%; border: 1px solid var(--line-soft); background: var(--card); border-radius: 12px; padding: 10px 14px; cursor: pointer; text-align: start; transition: .2s; }
.area-list button:hover, .area-list button.on { border-color: var(--gold); }
.area-list button span:last-child { color: var(--muted); font-size: var(--fs-xs); white-space: nowrap; }
.table-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.table-card h3 { font-size: 26px; color: var(--gold-hi); display: flex; justify-content: space-between; align-items: baseline; }
.table-card h3 small { font-size: var(--fs-sm); color: var(--muted); }
.table-card p { color: #d6cabb; margin: 6px 0 14px; }
.table-card .empty { color: var(--muted); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
html.menu-open { overflow: hidden; }
@media (min-width: 1001px) { .nav .nav-book { display: none; } }
html[dir="rtl"] .hscroll-progress i { transform-origin: right; }
html[lang="en"] .en-name, html[lang="en"] .mcard .men, html[lang="en"] .mmodal-body .men { display: none; }
.book-page { padding-top: 130px; }
@media (max-width: 1000px) { .nav .nav-book { color: var(--gold-hi); } }

html[lang="ar"] .stat b, html[lang="ar"] .xp-num, html[lang="ar"] .match .teams { font-family: 'Messiri', 'Cairo', serif; }
html[lang="ar"] .stat b sup { font-size: .32em; vertical-align: super; }

/* =================== CAROUSELS (reels, gallery) =================== */
.carousel { position: relative; }
.car-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 6px; overscroll-behavior-x: contain; }
.car-track::-webkit-scrollbar { display: none; }
.car-track > * { flex: none; scroll-snap-align: start; }
.car-btn {
  position: absolute; top: 50%; z-index: 3; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18); background: rgba(14,11,9,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--text); cursor: pointer; display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.45);
  transition: opacity .3s, transform .35s var(--ease), background .25s, border-color .25s;
}
.car-btn svg { width: 22px; height: 22px; }
.car-btn:hover { background: var(--gold); border-color: var(--gold); color: #17110a; transform: scale(1.08); }
.car-btn.left { left: -18px; } .car-btn.right { right: -18px; }
.car-btn[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .car-btn { width: 46px; height: 46px; margin-top: -23px; } .car-btn.left { left: 6px; } .car-btn.right { right: 6px; } }
.car-foot { display: flex; align-items: center; gap: 16px; margin-top: 18px; direction: ltr; }
.car-bar { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.car-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #b8925a, var(--gold-hi)); transform-origin: left; transform: scaleX(0); transition: transform .3s; }
html[dir="rtl"] .car-bar i { transform-origin: right; }
.car-count { font-family: 'Playfair', serif; color: var(--muted); font-size: var(--fs-sm); min-width: 64px; text-align: center; }
.car-count b { color: var(--gold-hi); font-weight: 600; }
.reels.car-track { display: flex; }
.reels.car-track > .reel { width: clamp(220px, 24vw, 280px); }
.gal-track > figure { height: clamp(320px, 52vh, 520px); margin: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; border: 1px solid var(--line-soft); position: relative; }
.gal-track > figure img { height: 100%; width: auto; max-width: none; transition: transform 1s var(--ease), filter .5s; filter: brightness(.9); }
.gal-track > figure:hover img { transform: scale(1.05); filter: none; }
.gal-track > figure::after { content: '⤢'; position: absolute; top: 12px; inset-inline-end: 12px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(14,11,9,.6); color: #fff; opacity: 0; transition: opacity .3s; }
.gal-track > figure:hover::after { opacity: 1; }
/* lightbox arrows: physical sides */
.lightbox .lb-left { left: 18px; top: 50%; margin-top: -28px; }
.lightbox .lb-right { right: 18px; top: 50%; margin-top: -28px; }
.lightbox .lb-left, .lightbox .lb-right { width: 58px; height: 58px; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); transition: background .25s; }
.lightbox .lb-left:hover, .lightbox .lb-right:hover { background: var(--gold); color: #17110a; }
.lightbox .lb-left svg, .lightbox .lb-right svg { width: 24px; height: 24px; }
.lightbox .lb-count { direction: ltr; unicode-bidi: isolate; position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #cbbfb0; font-family: 'Playfair', serif; font-size: var(--fs-sm); }
/* experience arrows */
.hscroll-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.xp-nav { display: flex; gap: 10px; direction: ltr; }
.xp-nav .car-btn { position: static; margin: 0; }
.car-track.dragging { cursor: grabbing; user-select: none; }
.car-track.dragging * { pointer-events: none; }
.lightbox img { transition: transform .5s var(--ease), opacity .25s; }

.mmodal .m-arrow { position: absolute; top: 50%; margin-top: -29px; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(14,11,9,.7); color: #fff; cursor: pointer; display: grid; place-items: center; z-index: 2; transition: background .25s; }
.mmodal .m-arrow:hover { background: var(--gold); color: #17110a; }
.mmodal .m-arrow svg { width: 24px; height: 24px; }
.mmodal .lb-left { left: max(12px, calc(50% - 360px)); } .mmodal .lb-right { right: max(12px, calc(50% - 360px)); }
@media (max-width: 700px) { .mmodal .m-arrow { top: auto; bottom: 18px; margin: 0; width: 50px; height: 50px; } .mmodal .lb-left { left: 18px; } .mmodal .lb-right { right: 18px; } }

html[dir="rtl"] .progress i { transform-origin: right; }
/* 34) the fixed mobile CTA must not cover the footer */
@media (max-width: 700px) { .site-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }
/* 17) item sheet scrolls itself, never the page */
.mmodal-card { overscroll-behavior: contain; }
/* 12) reduced motion: no loops, no travel, content shown at once */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  html.js .reveal, html.js .stagger > *, html.js .hero-fade > *, html.js .hero-logo, [data-split] .w > span { opacity: 1 !important; transform: none !important; }
  .clip-reveal { clip-path: none !important; }
  .deco { animation: none !important; }
}
.statement em { font-style: normal; }

/* =================== TYPE & RHYTHM, PHONE ↔ DESKTOP (2026-09-27) ===================
   One fluid scale instead of fixed steps: text grows with the screen between a
   375 px phone and a 1440 px desktop, so the phone reads like a scaled copy of
   the desktop instead of a squeezed one. */
:root {
  --fs-xs: clamp(12.5px, .2vw + 12px, 13.5px);
  --fs-sm: clamp(14px, .25vw + 13px, 15px);
  --fs-base: clamp(16px, .3vw + 15px, 17px);
  --fs-md: clamp(17px, .45vw + 15.5px, 19px);
  --fs-lg: clamp(19px, .7vw + 16.5px, 23px);
  --fs-h3: clamp(21px, 1.6vw + 15px, 30px);
  --fs-h2: clamp(30px, 3.6vw + 17px, 64px);
  --fs-h1: clamp(38px, 5.4vw + 18px, 92px);
  --gutter: clamp(18px, 3.2vw, 32px);
  --sec-y: clamp(72px, 9vw, 136px);
}
/* Arabic sits one notch larger at the same size. */
html[lang="ar"] {
  --fs-xs: clamp(13.5px, .2vw + 13px, 14.5px);
  --fs-sm: clamp(15px, .25vw + 14px, 16px);
  --fs-base: clamp(16.5px, .3vw + 15.5px, 17.5px);
  --fs-md: clamp(18px, .45vw + 16.5px, 20px);
  --fs-lg: clamp(20px, .7vw + 17.5px, 24px);
}
.wrap { padding: 0 var(--gutter); }
section.block { padding: var(--sec-y) 0; }
section.block.tight { padding: calc(var(--sec-y) * .72) 0; }
.sec-head { margin-bottom: clamp(28px, 4vw, 52px); gap: 18px 28px; }
.sec-head h2 { line-height: 1.15; }
html[lang="ar"] .sec-head h2 { line-height: 1.3; }
.lead { font-size: var(--fs-md); line-height: 1.85; }
html[lang="ar"] .hero .sub { font-size: var(--fs-sm); }
.hero .tagline { font-size: clamp(24px, 2.4vw + 14px, 44px); }
.statement { font-size: clamp(25px, 2.8vw + 14px, 54px); }
.stats { margin-top: clamp(44px, 7vw, 84px); }
.stat { padding: clamp(22px, 3vw, 36px) clamp(16px, 2.4vw, 28px); }
.stat b { font-size: clamp(40px, 4.2vw + 18px, 76px); }
.stat > span { font-size: var(--fs-sm); line-height: 1.6; }
p, li { text-wrap: pretty; }
h1, h2, h3, .statement, .tagline { text-wrap: balance; }

/* Phones: long vertical stacks become swipe rows that peek at the next card. */
@media (max-width: 700px) {
  .explore-side .area-list {
    display: grid; grid-auto-flow: column; grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter);
  }
  .explore-side .area-list::-webkit-scrollbar { display: none; }
  .explore-side .area-list { grid-auto-columns: max-content; gap: 8px; }
  .explore-side .area-list > * { scroll-snap-align: start; }
  .explore-side .area-list button { min-width: 180px; }
  .match { padding: 18px; }
  .hero { padding: 104px 0 72px; }
  .btn { min-height: 50px; padding: 0 24px; }
}

/* =================== MEDIA: hero film, reels, story, mosaic (2026-09-27) =================== */
html.no-scroll, html.no-scroll body { overflow: hidden; }

/* hero film: two stacked loops cross-fade over the poster image */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; transform: scale(1.04); }
.hero-video.on { opacity: 1; }
.hero-media.has-video img { transition: opacity 1.2s ease; opacity: 0; }

/* reels */
.reel { padding: 0; font: inherit; color: inherit; text-align: start; }
.reel .cap { padding: 60px 16px 16px; }
.reel .cap b { font-size: var(--fs-md); line-height: 1.4; }
.reels.car-track > .reel { width: clamp(200px, 22vw, 280px); }
@media (max-width: 700px) { .reels.car-track > .reel { width: 62vw; } }
.reel.playing img { opacity: 0; transition: opacity .4s; }

/* story viewer */
.story { position: fixed; inset: 0; z-index: 160; background: rgba(6,5,4,.97); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .35s; }
.story.open { opacity: 1; pointer-events: auto; }
.story-stage { position: relative; height: min(92svh, 860px); aspect-ratio: 9 / 16; max-width: 100vw; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.6); transform: scale(.96); transition: transform .45s var(--ease); }
.story.open .story-stage { transform: none; }
.story-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-bars { position: absolute; z-index: 3; inset: 12px 12px auto; display: flex; gap: 4px; direction: ltr; }
html[dir="rtl"] .story-bars { direction: rtl; }
.story-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; }
.story-bars b { display: block; height: 100%; background: #fff; transform-origin: left; }
html[dir="rtl"] .story-bars b { transform-origin: right; }
.story-head { position: absolute; z-index: 3; inset: 24px 14px auto; display: flex; align-items: center; gap: 10px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.story-head img { width: 34px; height: 34px; border-radius: 50%; background: #0e0b09; padding: 6px; border: 1px solid rgba(255,255,255,.25); }
.story-title { flex: 1; font-size: var(--fs-base); }
.story-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); color: #fff; display: grid; place-items: center; cursor: pointer; }
.story-x svg { width: 20px; height: 20px; }
.story-tap { position: absolute; z-index: 2; top: 80px; bottom: 90px; width: 35%; background: none; border: 0; cursor: pointer; }
.story-tap.left { left: 0; } .story-tap.right { right: 0; }
.story-cta { position: absolute; z-index: 3; inset: auto 16px 18px; width: auto; }
.story-arrow { position: absolute; top: 50%; margin-top: -28px; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
.story-arrow:hover { background: rgba(255,255,255,.16); }
.story-arrow svg { width: 24px; height: 24px; }
.story-arrow.left { left: max(16px, calc(50% - min(92svh, 860px) * 9 / 32 - 90px)); }
.story-arrow.right { right: max(16px, calc(50% - min(92svh, 860px) * 9 / 32 - 90px)); }
@media (max-width: 700px) {
  .story-stage { height: 100svh; border-radius: 0; width: 100vw; aspect-ratio: auto; }
  .story-arrow { display: none; }
}

/* photo mosaic */
.fchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.fchip { border: 1px solid var(--line); background: rgba(27,22,18,.6); color: var(--muted); border-radius: 999px; padding: 8px 18px; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; transition: .25s; }
.fchip:hover { color: var(--text); border-color: var(--faint); }
.fchip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #17110a; }
@media (max-width: 700px) {
  .fchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; }
  .fchips::-webkit-scrollbar { display: none; }
  .fchip { flex: none; }
}
.mosaic { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 16vw, 230px); grid-auto-flow: dense; gap: clamp(8px, 1vw, 14px); }
.tile { position: relative; margin: 0; overflow: hidden; border-radius: 16px; cursor: zoom-in; background: var(--card); border: 1px solid var(--line-soft); }
.tile.tall { grid-row: span 2; }
.tile.wide { grid-column: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .5s; filter: brightness(.9) saturate(1.02); }
.tile:hover img, .tile:focus-visible img { transform: scale(1.06); filter: none; }
.tile figcaption { position: absolute; inset: auto 0 0 0; padding: 36px 14px 12px; font-size: var(--fs-xs); font-weight: 700; color: #f1e7d8; background: linear-gradient(0deg, rgba(10,8,6,.85), transparent); opacity: 0; transform: translateY(6px); transition: .35s var(--ease); }
.tile:hover figcaption, .tile:focus-visible figcaption { opacity: 1; transform: none; }
.tile.in { animation: tileIn .6s var(--ease) both; }
@keyframes tileIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 900px) { .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; }
  .tile.wide { grid-column: span 2; }
  .tile figcaption { opacity: 1; transform: none; font-size: 12.5px; padding: 28px 10px 8px; }
}

/* lightbox caption + loading */
.lightbox img { transition: transform .5s var(--ease), opacity .25s; }
.lightbox img.loading { opacity: .25; }
.lb-cap { position: absolute; inset: auto 0 22px 0; text-align: center; color: #e9dfd0; font-weight: 700; font-size: var(--fs-sm); pointer-events: none; padding: 0 80px; }
@media (max-width: 700px) { .lb-cap { bottom: 86px; padding: 0 20px; } }

/* A playing film needs less veil than the still photo did. */
.hero.with-film::before { background:
  radial-gradient(75% 65% at 50% 46%, rgba(14,11,9,.18), rgba(14,11,9,.55) 72%, rgba(14,11,9,.9)),
  linear-gradient(0deg, var(--bg) 0%, rgba(14,11,9,0) 28%); }
.hero.with-film .hero-logo, .hero.with-film .tagline { filter: drop-shadow(0 4px 22px rgba(0,0,0,.55)); }

/* =================== PRE-ORDER PICKER (booking, 2026-09-27) =================== */
.po-field .po-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.po-chip { border: 1px solid rgba(201,169,110,.5); background: rgba(201,169,110,.1); color: var(--gold-hi); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.po-chip span { opacity: .7; margin-inline-start: 4px; }
.po-sheet { position: fixed; inset: 0; z-index: 170; background: rgba(6,5,4,.8); display: grid; place-items: center; padding: 16px; animation: poIn .25s ease; }
@keyframes poIn { from { opacity: 0; } }
.po-card { width: min(640px, 100%); max-height: min(86svh, 780px); display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.po-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px 8px; font-size: var(--fs-lg); }
.po-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--text); font-size: 22px; cursor: pointer; }
.po-search { margin: 4px 18px 10px; width: auto; }
.po-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 0 18px 10px; flex: none; }
.po-cats::-webkit-scrollbar { display: none; }
.po-cats button { flex: none; border: 1px solid var(--line); background: none; color: var(--muted); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.po-cats button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #17110a; }
.po-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 12px; display: grid; gap: 6px; }
.po-item { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: start; border: 1px solid var(--line-soft); background: var(--card); color: var(--text); border-radius: 14px; padding: 6px 12px 6px 6px; cursor: pointer; transition: border-color .2s, background .2s; }
html[dir="rtl"] .po-item { padding: 6px 6px 6px 12px; }
.po-item img, .po-ph { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--card-2); }
.po-name { font-weight: 700; font-size: var(--fs-base); line-height: 1.4; }
.po-tick { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); color: var(--muted); font-weight: 800; }
.po-item.on { border-color: var(--gold); background: rgba(201,169,110,.08); }
.po-item.on .po-tick { background: var(--gold); border-color: var(--gold); color: #17110a; }
.po-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); color: var(--muted); font-weight: 700; }
@media (max-width: 600px) { .po-sheet { padding: 0; align-items: end; } .po-card { max-height: 92svh; border-radius: 22px 22px 0 0; } }

/* =================== «حسابي» ACCOUNT (2026-09-27) =================== */
.acct-link { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--text); transition: border-color .2s, color .2s; }
.acct-link:hover, .acct-link[aria-current="page"] { border-color: var(--gold); color: var(--gold-hi); }
.acct-link svg { width: 20px; height: 20px; }
@media (min-width: 1001px) { .nav .nav-acct { display: none; } }
@media (max-width: 1000px) { .head-actions .acct-link { display: none; } }
.acct-hero { padding-bottom: 0; }
.acct-block { padding-top: 24px; }
.acct-login { max-width: 560px; }
.acct-code { font-size: 28px; letter-spacing: .5em !important; text-align: center; max-width: 260px; font-weight: 800; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 800px) { .acct-grid { grid-template-columns: minmax(0, 1fr); } }
.acct-card h2 { font-size: var(--fs-h3); margin: 10px 0 12px; }
.acct-avatar { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #17110a; background: linear-gradient(135deg, #d9b97c, #b8925a); }
.acct-dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin-bottom: 8px; }
.acct-dl dt { color: var(--muted); font-weight: 700; font-size: var(--fs-sm); }
.acct-dl dd { font-weight: 700; overflow-wrap: anywhere; }
.acct-loy .acct-pts { display: flex; align-items: baseline; gap: 8px; margin: 10px 0; }
.acct-loy .acct-pts b { font-family: 'Playfair', 'Messiri', serif; font-size: clamp(44px, 5vw, 64px); line-height: 1; color: var(--gold-hi); }
.acct-bar { height: 8px; border-radius: 8px; background: var(--line-soft); overflow: hidden; margin-bottom: 10px; }
.acct-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b8925a, var(--gold-hi)); border-radius: inherit; }
.acct-h { font-size: var(--fs-h3); margin: clamp(28px, 4vw, 44px) 0 14px; }
.acct-list { display: grid; gap: 10px; }
.acct-bk { background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px; padding: 16px 18px; }
.acct-bk.pending { border-color: rgba(224,169,90,.45); }
.acct-bk.confirmed { border-color: rgba(127,174,122,.45); }
.acct-list.past .acct-bk { opacity: .72; }
.acct-bk-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.acct-bk-top b { display: block; font-size: var(--fs-md); }
.acct-bk-top .muted { color: var(--muted); font-size: var(--fs-sm); }
.acct-st { flex: none; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 4px 12px; }
.acct-st.pending { background: rgba(224,169,90,.16); color: #e0a95a; }
.acct-st.confirmed { background: rgba(127,174,122,.16); color: var(--ok); }
.acct-st.cancelled { background: rgba(227,141,122,.14); color: var(--err); }
.acct-bk-extra { color: #d6cabb; font-size: var(--fs-sm); margin-top: 8px; }
.acct-bk-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.acct-code-tag { color: var(--faint); font-weight: 700; font-size: var(--fs-sm); }
.acct-bk-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.danger { border-color: rgba(227,141,122,.5); color: #f1b3a4; }

/* past bookings: expired, visibly apart from the live ones */
.acct-list.past .acct-bk { opacity: 1; background: #141110; border-color: #2a2420; border-style: dashed; }
.acct-list.past .acct-bk b, .acct-list.past .acct-bk-extra { color: #8f8377; }
.acct-bk.expired .acct-bk-top b { text-decoration: none; }
.acct-st.expired { background: rgba(143,131,119,.16); color: #a39585; }
.acct-bk.cancelled .acct-bk-top b { text-decoration: line-through; text-decoration-color: rgba(227,141,122,.5); }

/* matches: day tabs + league chips (2026-10-11) */
.fchips.mday { margin-bottom: 10px; }
.fchips.mcomp { margin-bottom: 20px; }
.fchips.mcomp:empty { display: none; }
.fchips.mcomp .fchip { padding: 6px 14px; font-size: var(--fs-xs); }
.fchip small { opacity: .7; font-weight: 700; margin-inline-start: 4px; }
@media (max-width: 700px) {
  .matches { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .match { padding: 16px; gap: 10px; }
  .match .teams { font-size: var(--fs-base); }
}
.match-more { grid-column: 1 / -1; justify-self: center; margin-top: 6px; }

/* =================== GAME (Estimation) promo (2026-10-11) =================== */
.game-band { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 70px); align-items: center;
  background: radial-gradient(120% 120% at 15% 50%, rgba(70,82,63,.35), transparent 60%), linear-gradient(160deg, var(--card-2), var(--bg-2));
  border: 1px solid var(--line-soft); border-radius: calc(var(--radius) + 8px); padding: clamp(28px, 5vw, 64px); overflow: hidden; }
.game-copy h2 { font-size: var(--fs-h2); line-height: 1.2; margin: 12px 0 14px; }
.game-feats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 22px 0 26px; font-weight: 700; color: #e6dccd; }
.game-cards { position: relative; height: clamp(240px, 30vw, 360px); }
.pcard { position: absolute; left: 50%; top: 50%; width: clamp(118px, 13vw, 170px); aspect-ratio: 5 / 7; margin: calc(clamp(118px, 13vw, 170px) * -.7) 0 0 calc(clamp(118px, 13vw, 170px) * -.5);
  background: linear-gradient(160deg, #fbf6ec, #efe4cf); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(184,146,90,.5);
  color: #1d1712; display: grid; place-items: center; transform-origin: 50% 120%; transition: transform .6s var(--ease); }
.pcard b { position: absolute; top: 10px; left: 12px; font-family: 'Playfair', serif; font-size: clamp(22px, 2.4vw, 30px); line-height: 1; }
.pcard i { font-style: normal; font-size: clamp(54px, 6vw, 80px); line-height: 1; }
.pcard.red { color: #b3362a; }
.pcard.c1 { transform: rotate(-24deg) translateX(-8%); }
.pcard.c2 { transform: rotate(-8deg); }
.pcard.c3 { transform: rotate(8deg); }
.pcard.c4 { transform: rotate(24deg) translateX(8%); }
.game-band:hover .pcard.c1 { transform: rotate(-32deg) translateX(-14%); }
.game-band:hover .pcard.c4 { transform: rotate(32deg) translateX(14%); }
@media (max-width: 860px) {
  .game-band { grid-template-columns: minmax(0, 1fr); }
  .game-cards { height: 230px; }
  .game-feats { grid-template-columns: 1fr; }
}