/* أبشر · مسرح الأشياء — final opening
   tokens → base → buttons → splash → nav → hero (stage · light · sign · swarm · actors · board · copy)
   → numbers (cream slab) → next-stage sections → footer → responsive → reduced motion */

/* ─── tokens ────────────────────────────────────────────────────────────── */
:root {
  --stage: #141516;        /* warm near-black: the studio, page + footer */
  --stage-2: #1b1c1e;      /* the floor */
  --char: #2b2d2f;         /* charcoal: icon parts, the board, dark cards */
  --char-2: #35383b;
  --cream: #e4ddd1;        /* clay bodies: sign, on-stage text */
  --cream-2: #d8d1c4;
  --paper: #efeae2;        /* light sections */
  --paper-2: #e6e0d6;      /* tiles on paper */
  --ink: #1f2123;          /* text on paper */
  --ink-2: #5f5e5a;        /* muted text on paper */
  --lime: #c6f03a;         /* the single accent */
  --lime-2: #b5e61d;
  --lime-hover: #d3f556;
  --palm: #0c3320;         /* micro-accent only */
  --on-stage: rgba(228, 221, 209, .78);
  --line-dark: rgba(228, 221, 209, .14);
  --line-light: rgba(31, 33, 35, .12);
  --surface: #f8f5ef;      /* a sheet on paper: the wizard card, the promoter form */
  --field: #fffdf9;        /* inputs */
  --line-field: #8a867c;   /* resting input border: ≥3:1 on the field and on the sheet (1.4.11) */
  --danger: #b42318;

  --display: "Rubik", "IBM Plex Sans Arabic", system-ui, sans-serif;      /* numerals, buttons, badges */
  --body: "IBM Plex Sans Arabic", "Rubik", system-ui, sans-serif;         /* body, labels, nav */
  --kufi: "Noto Kufi Arabic", "IBM Plex Sans Arabic", system-ui, sans-serif; /* the hero question + Arabic headings */

  --edge: clamp(20px, 5vw, 72px);    /* page side margin */
  --gutter: clamp(16px, 2vw, 32px);  /* column gap */
  --max: 1200px;                     /* content measure */
  --nav-h: 68px;
  --nav-gap: 16px;                   /* breathing room under the fixed nav for anything scrolled into view */
  --radius: 18px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ─── base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--stage); }
/* the fixed nav: focus-driven scrolling and anchors land clear of it (2.4.11); the full-bleed surfaces opt back out below and sit flush under it */
html { scroll-padding-top: calc(var(--nav-h) + var(--nav-gap)); scroll-padding-bottom: var(--nav-gap); }
html.splashing { overflow: hidden; }
body {
  margin: 0; background: var(--stage); color: var(--cream);
  font-family: var(--body); font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
/* the ring is lime on the stage and ink on every cream surface, the nav included while it is over one */
.on-paper :focus-visible, .on-paper-2 :focus-visible, .numbers :focus-visible, .nav.on-light :focus-visible, #splashRoot :focus-visible { outline-color: var(--ink); }
#main:focus, #splashRoot:focus { outline: 0; } /* focus parks here (after the splash, from the skip link); the ring belongs to controls */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 200; background: var(--lime); color: var(--ink); padding: 10px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }
.wrap { width: min(var(--max), 100% - var(--edge) * 2); margin-inline: auto; }

/* buttons: pills, like the clay's rounded edges */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; transition: transform .25s var(--ease-out), background-color .2s, box-shadow .25s, border-color .2s; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-lime { background: var(--lime); color: var(--ink); box-shadow: 0 8px 24px -10px rgba(198, 240, 58, .55); }
.btn-lime:hover { background: var(--lime-hover); box-shadow: 0 12px 30px -10px rgba(198, 240, 58, .7); }
.btn-ghost { color: var(--cream); border: 1.5px solid rgba(228, 221, 209, .32); background: rgba(228, 221, 209, .04); }
.btn-ghost:hover { border-color: rgba(228, 221, 209, .6); background: rgba(228, 221, 209, .08); }

/* ─── splash: a short chat whose reply bubble is a window onto the stage ── */
/* layers: .splash backdrop (100) < .hero while splashing (101) < .splash-chat (102) < .skip (103) */
html[data-splash="0"] #splashRoot { display: none; }
.splash { position: fixed; inset: 0; z-index: 100; background: var(--paper); }
.splash-chat { position: fixed; z-index: 102; left: 50%; top: 50%; transform: translate(-50%, -54%); width: min(440px, 100% - 48px); display: grid; grid-template-columns: 1fr; gap: 14px; }
.chat-head { grid-area: 1 / 1; display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line-light); color: var(--ink); }
html.splashing .chat-head { opacity: 0; } /* comes on with the first bubble (the timeline fades it in), never before its Rubik is in */
.splash-chat.fallback, .splash-chat.fallback * { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* the faces missed the gate: this chat stays on the system font, so nothing reflows as the line is typed */
/* the avatar: the wordmark's «أبشر», cream on a charcoal disc (the reply bubble's colours), inside the disc's inscribed square — the SVG keeps its
   aspect (xMidYMid meet), so the mark is never stretched and stays crisp at any density; a lime presence dot at the bottom inline-end */
.chat-head .avatar { position: relative; width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--char); color: var(--cream); display: grid; place-items: center; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 3px 10px -5px rgba(31, 33, 35, .5); }
.chat-head .avatar svg { width: 62%; height: 62%; display: block; }
.chat-head .presence { position: absolute; inset-inline-end: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2.5px var(--paper); }
.chat-head b { font-family: var(--display); font-weight: 700; font-size: 18px; }
.chat-head small { font-size: 13px; color: var(--ink-2); margin-inline-start: auto; }
/* a messaging app in RTL: what the viewer sent sits at the inline-end (left), what أبشر sends at the inline-start (right) */
.splash-chat .cust { grid-area: 2 / 1; justify-self: end; }
.splash-chat .typing, .splash-chat .reply { grid-area: 3 / 1; justify-self: start; }
.bub { position: relative; max-width: 78%; padding: 14px 18px; border-radius: 22px; --r: 22px; font-size: 18px; line-height: 1.6; font-weight: 500; will-change: transform, opacity; opacity: 0; }
.bub.cust { color: var(--ink); border-end-end-radius: 8px; --cut: 0; --h: 1; }
/* the customer bubble's skin and shadow are two layers under the text (the bubble itself has no background): while the line is typed the skin is
   clipped from the bottom to the lines reached so far — the lines not yet reached and the time row are hidden, the cut's corners are the bubble's
   own (RTL: the end-end 8px corner is bottom-left) — and the shadow is scaled to the same height. app.js tweens --cut (px) down as the typist
   reaches each wrap and to 0 as the line is sent, so the bubble grows under the typing while its layout box, measured once, never changes */
.bub.cust::before, .bub.cust::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; }
.bub.cust::before { background: #fbf9f5; clip-path: inset(0 0 calc(var(--cut) * 1px) 0 round var(--r) var(--r) var(--r) 8px); }
.bub.cust::after { box-shadow: 0 6px 20px -12px rgba(31, 33, 35, .35); transform: scaleY(calc(1 - var(--cut) / var(--h))); transform-origin: 50% 0; }
/* the typed line: .ghost is the whole line, invisible, and sizes the bubble before the first character; .typed is laid over it in the same box, so the
   typed prefix wraps exactly where the ghost does and the bubble never reflows; in RTL the characters grow leftwards and the caret, a zero-width
   inline-block drawn by its ::before, rides the growing end without ever taking a line of its own */
.bub.cust .msg { position: relative; }
.bub.cust .ghost { visibility: hidden; }
.bub.cust .typed { position: absolute; inset: 0; }
.bub.cust .caret { display: inline-block; position: relative; width: 0; height: 1em; vertical-align: -.18em; }
.bub.cust .caret::before { content: ""; position: absolute; inset-inline-start: 1px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--ink); animation: caret 1s step-end infinite; }
@keyframes caret { 0%, 64% { opacity: 1; } 65%, 100% { opacity: 0; } } /* on 650 ms, off 350 ms */
.bub.cust .t { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; font-weight: 400; opacity: 0; } /* in flow from the start (no shift); it fades in once the line is typed */
.bub.typing { background: var(--char); padding: 16px 20px; border-end-start-radius: 8px; display: flex; gap: 6px; }
.bub.typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--cream-2); opacity: .5; animation: dot 1s infinite ease-in-out; }
.bub.typing i:nth-child(2) { animation-delay: .15s; } .bub.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-5px); opacity: 1; } }
/* the reply has no background of its own: the stage shows through the clip beneath it */
.bub.reply { background: transparent; color: var(--cream); border-end-start-radius: 8px; display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 800; font-size: 28px; padding: 12px 24px 14px; }
.ticks { stroke: var(--lime); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.skip { position: fixed; z-index: 103; top: max(18px, env(safe-area-inset-top)); inset-inline-start: 20px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line-light); background: rgba(255, 255, 255, .55); color: var(--ink); font-weight: 600; cursor: pointer; }
.skip:hover { background: #fff; }
@media (max-width: 767px) { /* phones: within the thumb's reach, under the chat */
  .skip { top: auto; bottom: max(28px, env(safe-area-inset-bottom)); inset-inline-start: 50%; translate: 50% 0; min-height: 46px; padding: 0 22px; }
}
/* wide screens: the chat scales with the viewport, so the reply — the window onto the stage — is a ~300×90px frame the lamp can be seen through,
   with «أبشر» at one end and the ticks at the other; phones keep their sizes, where the same chat already fills the screen */
@media (min-width: 1024px) {
  .splash-chat { width: min(640px, 44vw); gap: 18px; }
  .chat-head { padding-bottom: 18px; margin-bottom: 8px; }
  .chat-head .avatar { width: 56px; height: 56px; } .chat-head .presence { width: 14px; height: 14px; }
  .chat-head b { font-size: 21px; } .chat-head small { font-size: 14px; }
  .bub { font-size: 23px; padding: 16px 22px; border-radius: 26px; --r: 26px; }
  .bub.cust .t { font-size: 13px; }
  .bub.typing { padding: 20px 24px; gap: 7px; } .bub.typing i { width: 10px; height: 10px; }
  .bub.reply { font-size: 42px; min-inline-size: 300px; padding: 18px 32px 20px; gap: 16px; justify-content: space-between; border-radius: 30px; border-end-start-radius: 10px; }
  .ticks { width: 48px; height: 28px; }
  .skip { min-height: 48px; padding: 0 22px; font-size: 16px; }
}

/* ─── nav ───────────────────────────────────────────────────────────────── */
.nav { position: fixed; inset-inline: 0; top: 0; z-index: 50; color: var(--cream); transition: background-color .3s, color .3s, box-shadow .3s; }
html.anim .nav { opacity: 0; }
.nav-in { height: var(--nav-h); display: flex; align-items: center; gap: 28px; width: min(1360px, 100% - 40px); margin-inline: auto; }
.brand { display: flex; align-items: center; min-height: 44px; padding: 0 4px; margin: 0 -4px; color: inherit; }
.brand svg { height: 34px; width: auto; display: block; }
.links { display: flex; gap: 26px; margin-inline-start: 10px; }
.links a { text-decoration: none; font-weight: 500; font-size: 15px; opacity: .82; padding: 8px 0; transition: opacity .2s; }
.links a:hover { opacity: 1; }
.nav-cta { margin-inline-start: auto; min-height: 44px; padding-inline: 20px; font-size: 15px; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; align-items: center; }
.menu-scrim { position: fixed; inset: 0; z-index: 49; background: rgba(20, 21, 22, .45); } /* under the open phone menu: a tap here closes it */
.burger span { width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.nav.scrolled { background: rgba(20, 21, 22, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-dark); }
.nav.on-light { color: var(--ink); background: rgba(239, 234, 226, .86); box-shadow: 0 1px 0 var(--line-light); }
.nav.on-light .btn-lime { box-shadow: none; }
.menu { display: none; }

/* ─── hero: the stage ───────────────────────────────────────────────────── */
.hero { position: relative; z-index: 1; height: 100vh; height: 100svh; min-height: 640px; background: var(--stage); scroll-margin-top: calc(-1 * var(--nav-h) - var(--nav-gap)); } /* #top is the very top */
html.anim .hero { height: 160vh; height: 160svh; min-height: 1024px; } /* the stage stays while the countdown grows */
html.splashing .hero { z-index: 101; background: transparent; opacity: 0; } /* the clipped stage sits above the paper backdrop, under the chat */
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--stage);
  --persp: 1400; --po-y: 40%; perspective: calc(var(--persp) * 1px); perspective-origin: 50% var(--po-y);
}
.grain { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .07; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.scene { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; --cx: 40%; }
.scene > * { transform-style: preserve-3d; }

/* light: a can lamp over the stage, its beam, the pool on the floor */
.beam { position: absolute; z-index: 1; left: var(--cx); top: -14%; width: 40%; height: 92%; transform: translateX(-50%); filter: blur(16px); pointer-events: none; }
.beam::before { content: ""; position: absolute; inset: 0; clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); background: linear-gradient(to bottom, rgba(228, 221, 209, .22), rgba(228, 221, 209, .08) 55%, rgba(228, 221, 209, 0)); }
.lamp { position: absolute; z-index: 2; left: var(--cx); top: 0; width: 2px; height: 30px; background: rgba(228, 221, 209, .22); translate: -50% 0; }
.lamp::before { content: ""; position: absolute; left: 50%; top: 100%; width: 38px; height: 18px; border-radius: 5px 5px 12px 12px; background: linear-gradient(#3b3e41, #26282a); box-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .08) inset; translate: -50% 0; }
.lamp::after { content: ""; position: absolute; left: 50%; top: calc(100% + 15px); width: 20px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 16px 5px rgba(198, 240, 58, .32); translate: -50% 0; }
html.anim .lamp::after { opacity: 0; }
html.anim .lamp.on::after { animation: lampOn .7s ease-out both; } /* a real lamp: two flickers, then steady */
@keyframes lampOn { 0% { opacity: 0; } 9% { opacity: .75; } 15% { opacity: .08; } 24% { opacity: .95; } 31% { opacity: .3; } 42%, 100% { opacity: 1; } }
html.anim .beam, html.anim .pool { opacity: 0; }
.floor { /* the farthest plane (z −400): every actor stands in front of it. Placed and sized so its edge still projects at --floor-y */
  position: absolute; z-index: 0; --z: -400; --floor-y: 57%; --ik: calc((var(--persp) - var(--z)) / var(--persp));
  left: calc(50% - 50% * var(--ik)); width: calc(100% * var(--ik)); top: calc(var(--po-y) + (var(--floor-y) - var(--po-y)) * var(--ik)); height: 100%;
  transform: translateZ(calc(var(--z) * 1px)); background: linear-gradient(to bottom, #1c1d1f, #121314 55%);
}
.floor::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(to right, transparent, rgba(228, 221, 209, .1) 30%, rgba(228, 221, 209, .1) 70%, transparent); transition: opacity .5s; }
/* inside the reply-bubble window only the light reads: no seam, and the floor lifted so the pool shows in a 70px frame (eased back as the bubble opens) */
.floor { transition: filter .6s ease-out; }
.stage.windowed .floor::before { opacity: 0; }
.stage.windowed .floor { filter: brightness(1.9); }
.pool { position: absolute; left: var(--cx); top: 0; width: 64%; height: 120%; transform: translate(-50%, -34%); background: radial-gradient(ellipse at center, rgba(228, 221, 209, .17), rgba(228, 221, 209, .06) 38%, rgba(228, 221, 209, 0) 68%); }

/* the sign */
.logo-box { position: absolute; z-index: 3; left: var(--cx); top: 29%; width: 380px; translate: -50% -50%; }
.logo { width: 100%; height: auto; color: var(--cream); display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .5)); }
.logo .dot { fill: var(--lime); }
html.anim .logo { opacity: 0; }
.swarm { position: absolute; z-index: 4; left: var(--cx); top: 44%; width: 380px; aspect-ratio: 320 / 196; translate: -50% -50%; pointer-events: none; } /* the word forms in the pool of light, just above the board's top edge */
.swarm img { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }

/* actors: six clay icons in three real depth layers (translateZ −340 / −120 / +200).
   Positions are designed in flat stage coordinates; --ik undoes the perspective scaling about
   the perspective origin so each actor lands where it was placed, and only the tilt reveals depth. */
.slot {
  position: absolute; z-index: 2; --z: 0; --x: calc(var(--cx) + var(--dx)); --ik: calc((var(--persp) - var(--z)) / var(--persp));
  left: calc(50% + (var(--x) - 50%) * var(--ik)); top: calc(var(--po-y) + (var(--y) - var(--po-y)) * var(--ik)); width: calc(var(--w) * var(--ik));
  transform: translate(-50%, -100%) translateZ(calc(var(--z) * 1px));
}
.slot .actor { position: relative; width: 100%; aspect-ratio: 1; }
.slot .actor > img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 18px rgba(0, 0, 0, .35)); }
.slot .actor::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -5%; height: 12%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); filter: blur(5px); }
.refl { position: absolute; top: 100%; left: 0; width: 100%; height: 55%; overflow: hidden; opacity: .13; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%); mask-image: linear-gradient(to bottom, #000, transparent 75%); pointer-events: none; }
.refl img { width: 100%; height: auto; transform: scaleY(-1); transform-origin: 50% 0; filter: blur(2px); }
html.anim .slot .actor { opacity: 0; }
.s1 { --dx: -29.5%; --y: 32%; --w: 160px; --z: -340; } .s1 .actor > img { opacity: .82; filter: brightness(.9) drop-shadow(0 22px 18px rgba(0, 0, 0, .35)); }
.s2 { --dx: 20.5%; --y: 24%; --w: 130px; --z: -340; } .s2 .actor > img { opacity: .82; filter: brightness(.9) drop-shadow(0 22px 18px rgba(0, 0, 0, .35)); }
.s3 { --dx: -33%; --y: 76%; --w: 200px; --z: -120; }
.s4 { --dx: 22%; --y: 46%; --w: 176px; --z: -120; }
.s5 { --dx: -40%; --y: 108%; --w: 320px; --z: 200; z-index: 7; }
.s6 { --dx: 44%; --y: 110%; --w: 270px; --z: 200; z-index: 7; }
@media (min-width: 1024px) { /* out-of-focus front row only where the stage is wide */
  .s5 .actor > img { filter: blur(2.5px) drop-shadow(0 30px 24px rgba(0, 0, 0, .4)); }
  .s6 .actor > img { filter: blur(1.5px) drop-shadow(0 30px 24px rgba(0, 0, 0, .4)); }
}

/* the countdown board: matte charcoal, backlit lime digits */
.slab-wrap { position: absolute; z-index: 6; left: var(--cx); top: 88%; width: min(720px, 92%); translate: -50% -100%; transform-origin: 50% 60%; }
.slab { position: relative; padding: 22px 34px 28px; border-radius: var(--radius); background: linear-gradient(180deg, #2e3033, #232527 65%, #1f2123); box-shadow: 0 1px 0 rgba(255, 255, 255, .09) inset, 0 -1px 0 rgba(0, 0, 0, .5) inset, 0 40px 60px -28px rgba(0, 0, 0, .9), 0 10px 20px -10px rgba(0, 0, 0, .6); }
.slab::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -14px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 70%); filter: blur(6px); z-index: -1; }
html.anim .slab { opacity: 0; }
.plate { font-size: 14px; color: var(--on-stage); letter-spacing: .01em; }
.plate b { color: var(--cream); font-weight: 600; }
.cd { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; margin-top: 4px; font-family: var(--display); font-weight: 900; color: var(--lime); font-variant-numeric: tabular-nums; }
.days { display: inline-flex; align-items: baseline; gap: .1em; font-size: clamp(116px, 15.5vw, 224px); line-height: 1; letter-spacing: -.04em; }
.days .u { font-family: var(--display); font-weight: 900; font-size: .2em; letter-spacing: -.01em; color: var(--lime); }
.hms { display: flex; align-items: baseline; gap: 6px; font-size: 48px; line-height: 1; letter-spacing: -.01em; }
.unit { display: flex; flex-direction: column; align-items: center; }
.num { display: inline-flex; align-items: flex-start; direction: ltr; text-shadow: 0 0 26px rgba(198, 240, 58, .35), 0 0 2px rgba(198, 240, 58, .6); }
.days .num { text-shadow: 0 0 .13em rgba(198, 240, 58, .34), 0 0 2px rgba(198, 240, 58, .6); }
.num .b { display: inline-block; width: 0; overflow: visible; visibility: hidden; line-height: 1; } /* a real baseline for the row of clipped cells */
.cell { position: relative; display: inline-block; width: .62em; height: 1em; overflow: hidden; }
.col { position: absolute; inset-inline: 0; top: 0; display: flex; flex-direction: column; will-change: transform; }
.col span { display: block; height: 1em; line-height: 1; text-align: center; }
.hms .u { font-family: var(--body); font-weight: 500; font-size: 13px; color: var(--on-stage); margin-top: 8px; letter-spacing: 0; }
.colon { color: rgba(198, 240, 58, .5); align-self: baseline; }
.cd.launched { display: block; font-size: 40px; line-height: 1.2; color: var(--cream); margin-top: 6px; font-weight: 800; }
.cd.launched b { color: var(--lime); }

/* the copy block: a question top-right, outside the tilt; the sign is the answer */
.copy { position: absolute; z-index: 8; inset-inline-start: var(--edge); top: 23%; width: min(430px, 40%); }
.copy h1 { font-family: var(--kufi); font-weight: 900; font-size: clamp(2.6rem, 5.3vw, 4.8rem); line-height: 1.12; letter-spacing: -.01em; color: var(--cream); text-wrap: balance; }
.copy .lede { margin-top: 18px; font-size: 16.5px; line-height: 1.75; color: var(--on-stage); max-width: 38ch; text-wrap: pretty; }
.copy .lede b { color: var(--cream); font-weight: 600; font-variant-numeric: tabular-nums; }
.nb { white-space: nowrap; } /* a count and its noun stay on one line */
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* the promoter link keeps its quiet look on a 44px hit area (the text sits where it did) */
.promo-link { display: inline-flex; align-items: center; min-height: 44px; margin: 8px -6px 0; padding: 0 6px; font-size: 14.5px; color: var(--on-stage); text-decoration: underline; text-decoration-color: rgba(198, 240, 58, .6); text-underline-offset: 5px; }
.promo-link:hover { color: var(--cream); text-decoration-color: var(--lime); }
html.anim .copy > * { opacity: 0; }

/* ─── numbers: a cream slab that slides over the stage ──────────────────── */
.numbers { position: relative; z-index: 3; margin-top: -20vh; margin-top: -20svh; background: var(--paper); color: var(--ink); border-radius: 28px 28px 0 0; padding: clamp(56px, 8vw, 104px) 0 0; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .6); }
/* one actor walked off the stage onto the sheet: it stands on the slab's top edge with a floor shadow */
.slab-actor { position: absolute; z-index: 2; top: 0; inset-inline-end: min(9%, 120px); width: 150px; aspect-ratio: 1; translate: 0 -66%; pointer-events: none; }
@media (min-width: 1024px) { .slab-actor { inset-inline-end: auto; inset-inline-start: var(--edge); } } /* the wide stage keeps the board on its left; the actor stands on the right, where the copy has faded */
.slab-actor img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .28)); }
.slab-actor::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -3%; height: 10%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(31, 33, 35, .38), rgba(31, 33, 35, 0) 70%); filter: blur(4px); }
.numbers .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.big::before { content: ""; display: block; width: 56px; height: 8px; border-radius: 4px; background: var(--lime); margin-bottom: 20px; } /* spike tape: the mark on a stage floor */
.big .n.plus::after { content: "+"; color: var(--lime); margin-inline-start: .04em; }
.big .n { font-family: var(--display); font-weight: 900; font-size: clamp(96px, 15vw, 220px); line-height: .95; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.big .lbl { font-family: var(--kufi); font-weight: 700; font-size: clamp(22px, 2.4vw, 32px); margin-top: 12px; line-height: 1.35; }
.big .fine { color: var(--ink-2); font-size: 14.5px; margin-top: 10px; }
.subs { display: flex; gap: 40px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line-light); }
.sub b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3.6vw, 46px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sub span { display: block; font-weight: 500; color: var(--ink-2); margin-top: 6px; font-size: 15px; }
.recent h3, .trusted h3 { font-family: var(--display); font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 12px; color: var(--ink); }
.live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--body); font-weight: 500; font-size: 12px; color: var(--palm); background: rgba(12, 51, 32, .08); border-radius: 999px; padding: 3px 10px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime-2); box-shadow: 0 0 0 0 rgba(181, 230, 29, .6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(181, 230, 29, .6); } 70% { box-shadow: 0 0 0 8px rgba(181, 230, 29, 0); } 100% { box-shadow: 0 0 0 0 rgba(181, 230, 29, 0); } }
.sheet { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line-light); }
.sheet li { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line-light); min-height: 84px; }
.sheet li.skeleton { height: 84px; background: linear-gradient(90deg, transparent, rgba(31, 33, 35, .05), transparent); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.tile { width: 56px; height: 56px; border-radius: 14px; background: var(--paper-2); box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, .06); display: grid; place-items: center; overflow: hidden; }
.tile img { width: 44px; height: 44px; object-fit: contain; }
.tile.none { background: var(--char); position: relative; }
.tile.none::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--lime); box-shadow: 0 1px 0 rgba(0, 0, 0, .3) inset; }
.sheet .what { min-width: 0; }
.sheet .badge { display: inline-block; font-size: 12px; font-weight: 600; color: var(--ink); border: 1px solid rgba(31, 33, 35, .25); border-radius: 999px; padding: 1px 9px; margin-block-end: 4px; }
.sheet .badge.company { color: var(--palm); border-color: rgba(12, 51, 32, .35); }
.sheet .cat { display: block; font-weight: 600; font-size: 16.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet time { font-size: 14px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sheet li.new { animation: rowIn .7s var(--ease-out); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-10px); } }
.sheet .empty { display: block; padding: 20px 0; color: var(--ink-2); }
.note { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); min-height: 1.5em; }
.note.bump { color: var(--palm); font-weight: 600; }

.trusted { margin-top: clamp(48px, 6vw, 88px); padding: 30px 0 56px; border-top: 1px solid var(--line-light); }
.trusted-head { width: min(var(--max), 100% - var(--edge) * 2); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.trusted h3 { font-size: 15px; color: var(--ink-2); font-weight: 600; }
/* the strip moves on its own, so it carries its own stop (2.2.2): a quiet pill beside the heading */
.marquee-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px 0 12px; border: 1px solid var(--line-field); border-radius: 999px; background: transparent; color: var(--ink-2); font: 600 13px/1 var(--body); cursor: pointer; transition: color .2s, border-color .2s; }
.marquee-toggle::before { content: ""; position: absolute; inset: -4px 0; } /* the pill keeps its 36px look on a 44px hit area */
.marquee-toggle:hover { color: var(--ink); border-color: var(--ink); }
html.still .live i { animation: none; box-shadow: none; } /* the stop also stills the live pulse; the odometer snaps in app.js */
.marquee-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.marquee-toggle .ico-play { fill: currentColor; stroke-width: 1.5; }
.trusted:not(.paused) .ico-play, .trusted.paused .ico-pause { display: none; }
.marquee { margin-top: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; gap: 14px; width: max-content; animation: slide 36s linear infinite; }
.marquee:hover .track, .trusted.paused .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(50%); } }
.mark { flex: none; height: 62px; min-width: 168px; padding: 0 24px; border-radius: 12px; display: grid; place-items: center; background: var(--paper-2); color: rgba(31, 33, 35, .72); font-family: var(--display); font-weight: 700; font-size: 16px; box-shadow: 0 1px 0 #fff inset; white-space: nowrap; }
.mark img { height: 32px; width: auto; filter: grayscale(1); opacity: .8; }
/* «شركاء يثقون بخدماتنا»: the exclusive companies — their own logo in colour, the name, the field */
.mark.partner { height: 76px; min-width: 0; padding: 0 22px 0 14px; display: flex; align-items: center; gap: 14px; text-align: start; }
.mark.partner img, .mark.partner .ph { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; filter: none; opacity: 1; flex: none; box-shadow: 0 0 0 1px rgba(31, 33, 35, .08); }
.mark.partner .ph { display: grid; place-items: center; background: var(--stage); color: var(--lime); font: 800 20px/1 var(--kufi); }
.mark.partner .pt { display: grid; gap: 3px; }
.mark.partner b { font: 700 15.5px/1.25 var(--display); color: var(--ink); }
.mark.partner small { font: 500 12.5px/1.2 var(--body); color: var(--ink-2); }
.trusted.static .marquee { -webkit-mask-image: none; mask-image: none; }
.trusted.static .track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; margin-inline: auto; padding-inline: var(--edge); }
.trusted .pv { display: none; font: 600 11px/1 var(--body); color: var(--ink-2); border: 1px dashed var(--line-field); border-radius: 999px; padding: 4px 8px; }
.trusted.preview .pv { display: inline-block; }
.trusted h3 { white-space: nowrap; flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 480px) { .mark.partner { max-width: calc(100vw - var(--edge) * 2); } .mark.partner b { white-space: normal; } }

/* ─── section rhythm (services · how · register · promoter · contact) ───── */
.sec { --sec-pad: clamp(56px, 8vw, 104px); --sheet-r: 28px; position: relative; padding: var(--sec-pad) 0; scroll-margin-top: calc(-1px - var(--nav-gap)); } /* with the root's scroll-padding: the section's top edge lands 1px under the nav */
.sec.on-paper { background: var(--paper); color: var(--ink); }
.sec.on-paper-2 { background: var(--paper-2); color: var(--ink); }
.sec.on-stage { background: var(--stage); color: var(--cream); }
/* same-tone neighbours meet on a hairline; every change of surface is a sheet laid over the one before — the numbers slab's own vocabulary */
.numbers + .sec.on-paper, .sec.on-paper + .sec.on-paper-2 { border-top: 1px solid var(--line-light); }
.sec.on-paper + .sec.on-stage, .sec.on-paper-2 + .sec.on-stage, .sec.on-stage + .sec.on-paper { border-radius: var(--sheet-r) var(--sheet-r) 0 0; margin-top: calc(-1 * var(--sheet-r)); padding-top: calc(var(--sec-pad) + var(--sheet-r)); box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .55); }
.sec-head { max-width: 62ch; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.eyebrow::before { content: ""; width: 28px; height: 6px; border-radius: 3px; background: var(--lime); flex: none; } /* the same spike tape as the numbers */
.on-stage .eyebrow { color: var(--on-stage); }
.sec h2 { font-family: var(--kufi); font-weight: 700; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.25; margin-top: 14px; letter-spacing: -.005em; text-wrap: balance; }
.sec .sec-lede { margin-top: 12px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); max-width: 52ch; }
.on-stage .sec-lede { color: var(--on-stage); }
mark { background: rgba(198, 240, 58, .6); color: inherit; border-radius: 4px; padding: 0 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.link-btn { border: 0; background: none; padding: 8px 2px; min-height: 44px; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lime-2); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.link-btn:hover { text-decoration-color: var(--ink); }

/* the small can lamp used off the hero: on the spotlight, over the beats, over the contact board */
.lamp-s { position: absolute; left: 50%; top: 0; width: 2px; height: 30px; translate: -50% 0; background: rgba(228, 221, 209, .22); }
.lamp-s::before { content: ""; position: absolute; left: 50%; top: 100%; width: 34px; height: 16px; border-radius: 5px 5px 11px 11px; background: linear-gradient(#3b3e41, #26282a); box-shadow: 0 2px 0 rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .08) inset; translate: -50% 0; }
.lamp-s::after { content: ""; position: absolute; left: 50%; top: calc(100% + 13px); width: 18px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 14px 4px rgba(198, 240, 58, .3); translate: -50% 0; }
.lamp-s i { position: absolute; left: 50%; top: calc(100% + 2px); translate: -50% 0; z-index: 1; font: 700 10px/1 var(--display); font-style: normal; color: rgba(228, 221, 209, .7); letter-spacing: 0; }

/* ─── services: the catalogue ───────────────────────────────────────────── */
.catalog-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; margin-top: clamp(24px, 3.5vw, 40px); }
.catalog-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.tabs-toggle { display: none; min-height: 44px; font-size: 14.5px; white-space: nowrap; } /* phones only (below) */
.search { position: relative; display: flex; align-items: center; max-width: 620px; }
.search svg { position: absolute; inset-inline-start: 20px; width: 20px; height: 20px; fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.search input { width: 100%; min-height: 58px; padding: 0 52px 0 88px; border-radius: 999px; border: 1.5px solid var(--line-field); background: var(--field); color: var(--ink); font: 500 17px/1.4 var(--body); appearance: none; -webkit-appearance: none; transition: border-color .2s, box-shadow .2s; }
.search input::placeholder { color: var(--ink-2); opacity: 1; }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.search input:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(198, 240, 58, .45); border-radius: 999px; }
.search .clear { position: absolute; inset-inline-end: 7px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; }
.search .clear:hover { background: var(--cream-2); }
.catalog-meta { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.catalog-meta:empty { display: none; }
/* the index: every category is a clay object on a shelf; the open one is the charcoal card */
.tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 8px; margin-top: 22px; transition: max-height .3s var(--ease-out), opacity .2s, margin-top .3s var(--ease-out), visibility 0s; }
/* while a query is active the grid (or the phone rail) folds away (app.js measures its height), so the results begin under the field.
   Once folded it is also visibility: hidden — never focusable, whatever happens to its inert flag; unfolding shows it at once */
.tabs.folding { overflow: hidden; }
.tabs.searching { overflow: hidden; opacity: 0; margin-top: 0; pointer-events: none; visibility: hidden; transition-delay: 0s, 0s, 0s, .3s; }
.cat-tab { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px 6px 14px; border: 0; border-radius: 14px; background: var(--paper-2); color: var(--ink); font-family: var(--body); text-align: start; cursor: pointer; box-shadow: 0 1px 0 #fff inset; transition: background-color .2s, color .2s, transform .25s var(--ease-out); min-width: 0; }
.cat-tab:hover { background: var(--cream-2); }
.cat-tab .tile { width: 40px; height: 40px; border-radius: 11px; background: rgba(255, 255, 255, .55); flex: none; }
.cat-tab .tile img { width: 34px; height: 34px; }
.cat-tab .tile.none::after { width: 10px; height: 10px; }
.cat-name { flex: 1; min-width: 0; font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.cat-n { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cat-tab.on { background: var(--ink); color: var(--cream); }
.cat-tab.on .tile { background: var(--char-2); box-shadow: none; }
.cat-tab.on .cat-n { color: var(--lime); }
.on-paper .cat-tab:focus-visible { outline-offset: 2px; }
.panel { margin-top: 18px; outline-offset: 6px; }
.panel-skeleton { height: 180px; border-radius: var(--radius); background: linear-gradient(90deg, var(--paper-2), rgba(230, 224, 214, .4), var(--paper-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
/* the spotlight: the category's clay actor on a charcoal board under its own lamp, its name and count, an index of its groups, and the registration pill at the far end */
.board { position: relative; border-radius: var(--radius); background: linear-gradient(180deg, #2e3033, #232527 65%, #1f2123); color: var(--cream); box-shadow: 0 1px 0 rgba(255, 255, 255, .09) inset, 0 -1px 0 rgba(0, 0, 0, .5) inset, 0 30px 50px -28px rgba(0, 0, 0, .7), 0 10px 20px -12px rgba(0, 0, 0, .45); }
.spot { display: grid; grid-template-columns: auto minmax(240px, 32%) minmax(0, 1fr) auto; align-items: center; gap: 8px 26px; padding: 22px 30px 26px; overflow: hidden; }
.spot-groups { list-style: none; margin: 0; padding: 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.spot-chip { min-height: 36px; padding: 0 13px; border: 1px solid rgba(228, 221, 209, .45); border-radius: 999px; background: rgba(228, 221, 209, .05); color: var(--cream-2); font: 500 13.5px/1.2 var(--body); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; } /* the outline is what says «button» on the board: ≥3:1 (1.4.11) */
.spot-chip:hover { background: rgba(228, 221, 209, .12); border-color: rgba(228, 221, 209, .7); color: var(--cream); }
.spot-more { padding: 0 4px; font: 700 13px/1 var(--display); color: var(--on-stage); font-variant-numeric: tabular-nums; }
.spot-cta { grid-column: -2 / -1; display: grid; gap: 8px; justify-items: start; } /* always the last column, with or without a group index */
.spot-q { font-size: 14px; color: var(--on-stage); }
.spot .spot-link { min-height: 46px; padding-inline: 22px; font-size: 15px; }
.spot :is(.spot-link, .spot-chip):focus-visible { outline-color: var(--lime); }
.spot-actor { position: relative; width: 152px; aspect-ratio: 1; display: grid; place-items: center; align-self: stretch; }
.spot-actor::before { content: ""; position: absolute; left: 50%; top: 58%; width: 180%; height: 120%; translate: -50% -50%; background: radial-gradient(ellipse at center, rgba(228, 221, 209, .2), rgba(228, 221, 209, .06) 40%, rgba(228, 221, 209, 0) 68%); pointer-events: none; }
.spot-actor .lamp-s { top: -22px; }
.spot-actor .tile { position: relative; width: 128px; height: 128px; background: none; box-shadow: none; overflow: visible; }
.spot-actor .tile img { width: 116px; height: 116px; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .5)); }
.spot-actor .tile::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -6px; height: 12%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); filter: blur(4px); }
.spot-actor .tile.none { width: 96px; height: 96px; border-radius: 26px; background: var(--char-2); box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset; }
.spot-actor .tile.none::after { position: static; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); filter: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .3) inset; }
.spot-t { min-width: 0; }
.spot-name { font-family: var(--kufi); font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; color: var(--cream); overflow-wrap: anywhere; text-wrap: balance; }
.spot-meta { margin-top: 6px; font-size: 15.5px; color: var(--on-stage); font-variant-numeric: tabular-nums; }
.panel-foot { display: none; margin-top: 10px; text-align: center; } /* phones: back up to the shelf from the end of a long list */
/* groups: hairline rows, the services as tickets with a quiet unit */
.groups { margin-top: 10px; display: grid; gap: 0 clamp(24px, 4vw, 56px); align-items: start; }
.group { padding: 18px 0 16px; border-bottom: 1px solid var(--line-light); min-width: 0; }
.g-head { display: flex; align-items: center; gap: 12px; }
.g-head .tile { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.g-head .tile img { width: 34px; height: 34px; }
.g-head .tile.none::after { width: 10px; height: 10px; }
.g-head h4 { flex: 1; min-width: 0; margin: 0; font-family: var(--kufi); font-weight: 700; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.g-head h4:focus-visible { outline-offset: 4px; } /* a spotlight chip glides here and hands focus over (2.4.3) */
.g-head small { font-size: 13px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.svcs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svc { display: inline-flex; align-items: baseline; gap: 9px; max-width: 100%; padding: 8px 14px; border-radius: 999px; background: var(--paper-2); box-shadow: 0 1px 0 #fff inset; font-size: 15px; font-weight: 500; line-height: 1.4; }
.svc-name { min-width: 0; overflow-wrap: anywhere; }
.svc .unit { font-size: 12.5px; font-weight: 400; color: var(--ink-2); padding-inline-start: 9px; border-inline-start: 1px solid rgba(31, 33, 35, .18); white-space: nowrap; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 6px 0 10px; }
.results-head h3 { font-family: var(--kufi); font-weight: 700; font-size: 20px; }
.results-syn { display: block; margin-top: 2px; font-size: 13.5px; color: var(--ink-2); } /* «مكيف = تكييف / سبلت»: the spoken word that was read as the catalogue's */
.hit { padding-top: 14px; }
.hit + .hit { margin-top: 16px; }
.hit-head { display: flex; align-items: center; gap: 12px; }
.hit-head .tile { width: 40px; height: 40px; border-radius: 11px; }
.hit-head .tile img { width: 34px; height: 34px; }
.hit-head h3 { flex: 1; min-width: 0; font-family: var(--kufi); font-weight: 700; font-size: 20px; overflow-wrap: anywhere; }
.hit-head small { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.hit .groups { margin-top: 2px; }
.hit .group:first-child { border-top: 0; }
.empty { text-align: center; padding: 28px 16px 36px; max-width: 46ch; margin-inline: auto; }
.empty-actor { width: 120px; margin: 0 auto 8px; }
.empty-actor img { width: 100%; height: auto; filter: drop-shadow(0 14px 12px rgba(31, 33, 35, .22)); }
.empty b { display: block; font-family: var(--kufi); font-weight: 700; font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
.empty p { margin: 8px auto 0; max-width: 40ch; color: var(--ink-2); font-size: 15.5px; text-wrap: pretty; }
.empty a { position: relative; z-index: 1; display: inline-block; padding-block: 11px; margin-block: -11px; color: var(--ink); font-weight: 600; text-decoration-color: var(--lime-2); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* the one WhatsApp action of the empty state: a 45px hit area on a 23px line, painted above the neighbouring lines so the whole of it takes the tap */
/* no hit: the nearest categories, as a way back into the shelf */
.empty-near { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin-top: 18px; }
.empty-near span { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.empty-near ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip-btn { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line-field); border-radius: 999px; background: var(--field); color: var(--ink); font: 600 14.5px/1.2 var(--body); cursor: pointer; transition: border-color .2s, background-color .2s; }
.chip-btn:hover { border-color: var(--ink); background: #fff; }


/* ─── register: the wizard in the page's clothes ────────────────────────── */
.facts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; max-width: 60ch; }
.facts li { position: relative; padding-inline-start: 22px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.facts li::before { content: ""; position: absolute; inset-inline-start: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px rgba(31, 33, 35, .18) inset; }
.facts b { color: var(--ink); font-weight: 600; }
#registerWizard { margin-top: clamp(28px, 4vw, 48px); } /* lands under the nav through the root's scroll-padding */
#registerWizard.iw { /* the module's tokens, bound to the page's */
  --iw-bg: var(--paper-2); --iw-surface: var(--surface); --iw-field: var(--field); --iw-ink: var(--ink); --iw-muted: var(--ink-2); --iw-line: #d5cec1; --iw-line-field: var(--line-field);
  --iw-accent: var(--lime); --iw-accent-ink: var(--ink); --iw-danger: var(--danger); --iw-radius: var(--radius); --iw-r-sm: 12px;
  --iw-font: var(--body); --iw-font-display: var(--kufi); --iw-ease: var(--ease-out);
  --iw-shadow: 0 1px 2px rgba(43, 45, 47, .05), 0 12px 32px -18px rgba(43, 45, 47, .28);
  font-size: 16px; line-height: 1.6;
}
#registerWizard .iw-title { font-weight: 700; letter-spacing: -.005em; }
#registerWizard .iw-btn, #registerWizard .iw-panel-h, #registerWizard .iw-rv-h h4, #registerWizard .iw-done-n b { font-family: var(--display); }
#registerWizard .iw-panel-h, #registerWizard .iw-rv-h h4 { font-family: var(--kufi); }
#registerWizard .iw-btn { min-height: 50px; }
#registerWizard .iw-btn.sm { min-height: 44px; }
#registerWizard .iw-rail { top: calc(var(--nav-h) + 20px); }
#registerWizard :focus-visible, #registerWizard :is(.iw-chip, .iw-cat, .iw-seg, .iw-check, .iw-svc-main):has(> input:focus-visible) { outline-width: 3px; outline-offset: 3px; border-radius: 6px; }
#registerWizard :is(.iw-chip, .iw-btn, .iw-insp):focus-visible, #registerWizard .iw-chip:has(> input:focus-visible) { border-radius: 999px; }
#registerWizard :is(.iw-cat, .iw-svc-main):has(> input:focus-visible), #registerWizard .iw-cat.add:focus-visible { border-radius: 14px; }
#registerWizard .iw-input:focus-visible { outline-width: 2px; outline-offset: 0; border-radius: var(--iw-r-sm); }
#registerWizard .iw-title:focus-visible { outline-offset: 6px; }
.lead-fail { margin-top: clamp(28px, 4vw, 48px); padding: 18px 20px; border: 1.5px dashed rgba(31, 33, 35, .25); border-radius: var(--radius); color: var(--ink-2); font-size: 15px; }
.lead-fail a { color: var(--ink); font-weight: 600; text-decoration-color: var(--lime-2); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ─── forms on paper (the promoter): the same clothes as the wizard ─────── */
.promo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.promoter .sec-head { position: relative; }
.promo-actor { width: clamp(120px, 12vw, 168px); margin-top: 28px; }
.promo-actor img { width: 100%; height: auto; filter: drop-shadow(0 18px 14px rgba(31, 33, 35, .25)); }
.lead { background: var(--surface); border: 1px solid #d5cec1; border-radius: var(--radius); padding: 28px 26px 24px; box-shadow: 0 1px 2px rgba(43, 45, 47, .05), 0 12px 32px -18px rgba(43, 45, 47, .28); display: grid; gap: 18px; min-width: 0; }
.f { display: grid; gap: 6px; min-width: 0; }
.f label { font-weight: 600; font-size: 15px; line-height: 1.4; }
.input { display: block; width: 100%; min-height: 48px; padding: 10px 14px; font: 500 16px/1.4 var(--body); background: var(--field); color: var(--ink); border: 1.5px solid var(--line-field); border-radius: 12px; appearance: none; -webkit-appearance: none; transition: border-color .2s, box-shadow .2s; }
.input::placeholder { color: var(--ink-2); opacity: 1; }
.input[dir="ltr"] { text-align: left; letter-spacing: .04em; }
.input:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(198, 240, 58, .45); border-radius: 12px; }
select.input { padding-inline-end: 44px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235f5e5a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: left 16px center; background-size: 16px; cursor: pointer; }
select.input:invalid, select.input:has(option[value=""]:checked) { color: var(--ink-2); }
.f.invalid .input { border-color: var(--danger); }
.hint { font-size: 13.5px; color: var(--ink-2); }
.err { font-size: 13.5px; font-weight: 500; color: var(--danger); }
.err::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-inline-end: 6px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: -2px; }
.hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; }
.form-msg { font-size: 14.5px; font-weight: 500; padding: 12px 14px; border-radius: 12px; }
.form-msg.bad { color: var(--danger); background: rgba(180, 35, 24, .07); border: 1.5px solid rgba(180, 35, 24, .35); }
.form-msg a { color: inherit; font-weight: 700; text-underline-offset: 3px; }
.btn-dark { background: var(--ink); color: var(--paper); box-shadow: 0 8px 20px -10px var(--ink); }
.btn-dark:hover { background: #2c3336; }
.btn-dark.busy { cursor: progress; opacity: .85; }
.btn-dark.busy::after { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-inline-end-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lead .btn { width: 100%; }
.consent { font-size: 13.5px; color: var(--ink-2); text-align: center; }
/* the promoter's DONE card (scoped: the wizard has its own `.done` states on its rail) */
.lead-done { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 16px 0 8px; }
.done-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--lime); color: var(--ink); margin-bottom: 6px; animation: pop .45s var(--ease-out) both; }
.done-ico svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pop { from { transform: scale(0); } 70% { transform: scale(1.12); } to { transform: scale(1); } }
.lead-done b { font-family: var(--kufi); font-weight: 700; font-size: 24px; line-height: 1.3; }
.lead-done b:focus-visible { outline-offset: 6px; } /* focus lands here when the form is replaced, so the keyboard keeps its place */
.lead-done p { color: var(--ink-2); font-size: 15.5px; max-width: 36ch; }

/* ─── contact: the WhatsApp board, lit like the countdown ───────────────── */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.contact-board { overflow: visible; padding: 30px 34px 34px; margin-top: 40px; }
.contact-board::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -14px; height: 22px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 70%); filter: blur(6px); z-index: -1; }
.contact-board .lamp-s { top: -74px; height: 44px; }
.contact-board .truss { position: absolute; left: 50%; top: -75px; width: min(220px, 44%); height: 2px; border-radius: 1px; translate: -50% 0; background: linear-gradient(to right, transparent, rgba(228, 221, 209, .18) 20%, rgba(228, 221, 209, .18) 80%, transparent); } /* the short rail the lamp hangs from */
.contact-board::before { content: ""; position: absolute; left: 50%; top: 0; width: 60%; height: 70%; translate: -50% -30%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(228, 221, 209, .12), rgba(228, 221, 209, 0) 68%); pointer-events: none; }
.contact-board .lamp-s::after { transition: opacity .3s; }
html.anim .contact-board:not(.on) .lamp-s::after, html.anim .contact-board:not(.on) .num-big { opacity: .28; }
html.anim .contact-board.on .lamp-s::after, html.anim .contact-board.on .num-big { animation: lampOn .7s ease-out both; }
.contact-board .plate { font-size: 14px; color: var(--on-stage); }
.num-big { display: inline-flex; align-items: center; min-height: 44px; margin: 2px 0 -8px; padding: 8px 0; direction: ltr; unicode-bidi: isolate; font-family: var(--display); font-weight: 900; font-size: clamp(22px, 8vw, 48px); line-height: 1.1; letter-spacing: -.02em; color: var(--lime); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 0 22px rgba(198, 240, 58, .35), 0 0 2px rgba(198, 240, 58, .6); } /* 8px of padding either side of the glyphs and a 44px floor: the hit area at every size, the layout as before */
.num-big:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.contact-board .btn { margin-top: 22px; }

/* ─── footer ────────────────────────────────────────────────────────────── */
.foot { background: var(--stage); color: var(--on-stage); padding: 44px 0 48px; font-size: 15px; border-top: 1px solid var(--line-dark); }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; padding-bottom: 22px; border-bottom: 1px solid var(--line-dark); }
.foot-brand { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: 0 -4px; color: var(--cream); }
.foot-logo { height: 32px; width: auto; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-inline-start: auto; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 500; text-decoration: none; color: var(--cream); opacity: .85; }
.foot-links a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 5px; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 32px; padding-top: 20px; }
.foot-bottom a { display: inline-block; padding: 10px 2px; margin: -10px -2px; color: var(--cream); text-decoration-color: rgba(198, 240, 58, .6); text-underline-offset: 4px; font-variant-numeric: tabular-nums; }
.copy-line { margin-inline-start: auto; }

/* ─── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1299px) and (min-width: 1024px) {
  .scene { --cx: 35%; }
  .copy { width: min(400px, 38%); }
  .days { font-size: clamp(116px, 14vw, 190px); }
  .slab-wrap { width: min(640px, 66%); }
}
@media (max-width: 1199px) and (min-width: 1024px) {
  .scene { --cx: 33%; }
  .logo-box, .swarm { width: 320px; }
  .copy { width: min(340px, 34%); top: 21%; }
  .copy h1 { font-size: clamp(2.4rem, 4.6vw, 3.4rem); }
  .copy .lede { font-size: 16px; }
  .slab-wrap { width: min(600px, 62%); }
  .days { font-size: 150px; } .hms { font-size: 44px; }
  .ctas .btn { padding-inline: 20px; font-size: 15px; }
  .s1 { --w: 130px; --dx: -30%; } .s2 { --dx: 21%; --w: 110px; }
  .s3 { --w: 190px; --dx: -31%; } .s4 { --w: 140px; --dx: 23%; --y: 43%; }
  .s5 { --w: 270px; --dx: -41%; } .s6 { --w: 230px; --dx: 43%; }
}
/* stacked stage: the question on top, the sign centre, the board at the bottom */
@media (max-width: 1023px) {
  .hero { min-height: 760px; }
  .stage { --persp: 1100; --po-y: 45%; }
  .scene { --cx: 50%; }
  .beam { width: 70%; top: -10%; height: 84%; filter: blur(12px); }
  .floor { --floor-y: 58%; }
  .pool { width: 110%; }
  .copy { inset-inline: 40px; top: calc(var(--nav-h) + 22px); width: auto; z-index: 8; }
  .copy h1 { font-size: clamp(2.6rem, 6.4vw, 3.6rem); max-width: 14ch; }
  .copy .lede { font-size: 16.5px; margin-top: 14px; max-width: 50ch; }
  .ctas { margin-top: 20px; }
  .logo-box { top: 45%; width: 320px; translate: -50% 0; }
  .swarm { top: 48%; width: 320px; translate: -50% 0; }
  .s1 { --x: 15%; --y: 60%; --w: 130px; }
  .s2 { --x: 86%; --y: 58%; --w: 118px; }
  .s3 { --x: 13%; --y: 80%; --w: 170px; }
  .s4 { --x: 88%; --y: 76%; --w: 160px; }
  .s5, .s6 { display: none; }
  .slab-wrap { top: 95%; width: min(600px, 100% - 64px); }
  .days { font-size: 150px; } .hms { font-size: 42px; }
  .numbers { margin-top: -14vh; margin-top: -14svh; }
}
@media (max-width: 900px) {
  .nav-in { gap: 14px; }
  .links { display: none; }
  .burger { display: flex; }
  .nav-cta { min-height: 44px; padding-inline: 16px; font-size: 14.5px; } /* the conversion stays one tap away at every scroll position */
  .menu { display: flex; flex-direction: column; gap: 4px; padding: 12px 20px 22px; background: rgba(20, 21, 22, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-dark); }
  .menu[hidden] { display: none; }
  .menu a { text-decoration: none; padding: 12px 4px; font-weight: 500; font-size: 17px; }
  .menu .btn { margin-top: 10px; }
  /* the WhatsApp row takes the panel's own colour (cream over the stage, ink over a cream section) */
  .menu .btn-ghost { color: inherit; border-color: color-mix(in srgb, currentColor 34%, transparent); background: color-mix(in srgb, currentColor 5%, transparent); }
  .menu .btn-ghost:hover { border-color: color-mix(in srgb, currentColor 65%, transparent); background: color-mix(in srgb, currentColor 9%, transparent); }
  .nav.on-light .menu { background: rgba(239, 234, 226, .97); color: var(--ink); }
  .numbers .wrap { grid-template-columns: 1fr; }
}
/* phones: the poster — question, one sentence, both CTAs, the promoter link; the sign near full width
   with the two mid actors tucked into the wordmark's empty top-left pocket; the board at the bottom */
@media (max-width: 767px) {
  :root { --nav-h: 60px; }
  html.anim .hero { height: 130vh; height: 130svh; min-height: 900px; }
  .hero { min-height: 700px; }
  .stage { --persp: 1000; }
  .beam { width: 76%; }
  .copy { inset-inline: 20px; top: calc(var(--nav-h) + 14px); }
  .copy h1 { font-size: 2.6rem; line-height: 1.1; max-width: none; }
  .copy .lede { font-size: 15px; line-height: 1.6; margin-top: 12px; max-width: none; }
  .ctas { margin-top: 16px; gap: 10px; }
  .ctas .btn { min-height: 48px; padding-inline: 20px; font-size: 15px; flex: 1 1 auto; }
  .promo-link { margin-top: 2px; font-size: 14px; }
  .logo-box { top: 47%; width: min(320px, 100% - 40px); }
  .swarm { top: 49%; width: min(320px, 100% - 40px); }
  .floor { --floor-y: 73%; } /* the sign hangs above the floor; the board stands on it */
  .beam { height: 90%; }
  .pool { width: 130%; transform: translate(-50%, -40%); }
  .s1, .s2 { display: none; }
  /* the two actors frame the sign from opposite corners: the bulb in the wordmark's top-left pocket (clear of the ش dots, its socket off the teeth),
     the AC standing low-right under the hamza beside «IBSHER»; opposite depths, so the tilt and the scroll parallax pull them further apart */
  .s3 { --x: 15%; --y: 55%; --w: 80px; --z: -200; }
  .s4 { --x: 81%; --y: 72%; --w: 84px; --z: -60; }
  .slab-wrap { width: calc(100% - 32px); }
  .slab { padding: 14px 18px 18px; border-radius: 16px; }
  .plate { font-size: 12.5px; }
  .cd { gap: 14px; margin-top: 2px; }
  .days { font-size: 76px; letter-spacing: -.035em; } .hms { font-size: 30px; gap: 4px; }
  .hms .u { font-size: 11.5px; margin-top: 5px; }
  .cd.launched { font-size: 26px; }
  .numbers { border-radius: 22px 22px 0 0; }
  .sec { --sheet-r: 22px; }
  .slab-actor { width: 96px; inset-inline-end: 14px; translate: 0 -56%; } /* stands on the edge, its head under the board's foot, clear of «ثانية» */
  .big .n { font-size: clamp(88px, 27vw, 120px); }
  .subs { gap: 28px; }
  .sheet li { grid-template-columns: 48px 1fr auto; gap: 12px; min-height: 76px; }
  .tile { width: 48px; height: 48px; border-radius: 12px; } .tile img { width: 38px; height: 38px; }
  .sheet .cat { font-size: 15.5px; white-space: normal; }
  .mark { height: 54px; min-width: 140px; font-size: 15px; }
  .copy-line { margin-inline-start: 0; width: 100%; }
  .sec h2 { font-size: 28px; }
}
@media (max-width: 359px) { .nav-cta-x { display: none; } } /* the narrowest phones: «سجّل» alone beside the burger and the logo */
/* the narrowest phones: the CTAs stack, so the sign and the board move down out of the way */
@media (max-width: 360px) {
  .copy h1 { font-size: 2.25rem; }
  .copy .lede { font-size: 14.5px; }
  .ctas .btn { flex: 1 1 100%; min-height: 46px; }
  .logo-box { top: 52%; width: min(290px, 100% - 36px); }
  .swarm { top: 54%; width: min(290px, 100% - 36px); }
  .s3 { --y: 60%; --w: 72px; } .s4 { --y: 75%; --w: 76px; }
  .slab-wrap { top: 97%; }
  .days { font-size: 64px; } .hms { font-size: 26px; }
  .cd { gap: 12px; }
}
/* short phones: keep the whole stage inside one screen */
@media (max-width: 767px) and (max-height: 740px) {
  .hero { min-height: 0; }
  .stage { min-height: 100svh; }
  .copy h1 { font-size: 2.2rem; }
  .copy .lede { font-size: 14px; line-height: 1.5; margin-top: 10px; }
  .ctas { margin-top: 12px; } .ctas .btn { min-height: 44px; }
  .promo-link { margin-top: 10px; }
  .logo-box { top: 50%; width: min(250px, 100% - 60px); }
  .swarm { top: 52%; width: min(250px, 100% - 60px); }
  .s3 { --x: 16%; --y: 57%; --w: 60px; } .s4 { --x: 82%; --y: 69%; --w: 64px; }
  .slab-wrap { top: 97%; }
  .slab { padding: 10px 16px 14px; }
  .days { font-size: 54px; } .hms { font-size: 24px; }
}
@media (min-height: 1000px) and (min-width: 1300px) {
  .logo-box, .swarm { width: 440px; }
  .days { font-size: 240px; }
}

/* ─── reduced motion: everything visible, nothing moves ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  #splashRoot { display: none; }
  .hero { height: auto; min-height: calc(100svh + 48px); } /* the stage plus a strip of floor for the actor standing on the cream slab's edge */
  .stage { position: relative; }
  .numbers { margin-top: 0; }
  .nav, .beam, .pool, .logo, .slot .actor, .slab, .copy > *, .lamp::after { opacity: 1 !important; animation: none !important; }
  .swarm { display: none; }
  .track, .live i, .bub.typing i, .bub.cust .caret::before, .sheet li.skeleton, .sheet li.new { animation: none; }
  .marquee-toggle { display: none; } /* the strip is static: nothing to stop */
  .btn, .nav, .links a, .burger span, .marquee-toggle, .tabs, .floor::before, .spot-chip, .chip-btn { transition: none; }
}

/* ─── below the fold: responsive ────────────────────────────────────────── */
@media (min-width: 1100px) {
  .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) { /* the board narrows: actor · name · pill (the groups are listed right below anyway) */
  .spot { grid-template-columns: auto minmax(0, 1fr) auto; }
  .spot-groups { display: none; }
}
@media (max-width: 1023px) {
  .contact-grid, .promo-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; } /* minmax(0): the nowrap number can never widen the board past the page margin */
  .contact-board { margin-top: 48px; }
  .promo-actor { display: none; }
}
@media (max-width: 900px) {
  /* the index becomes a two-row shelf that scrolls sideways, bleeding to the screen edges */
  /* contain: layout keeps the rail's inline-end overflow inside the rail — Chrome otherwise lets an RTL scroller's leftward overflow widen the document */
  .tabs { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--edge)); padding-inline: var(--edge); padding-bottom: 4px; contain: layout; }
  .tabs::-webkit-scrollbar { display: none; }
  .cat-tab { scroll-snap-align: center; max-width: 260px; min-height: 52px; }
  /* «كل الأقسام»: the shelf opens into a two-column grid of every category — one vertical scroll instead of seven sideways swipes */
  .tabs-toggle:not([hidden]) { display: inline-flex; align-items: center; }
  .tabs.expanded { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; contain: none; }
  /* a grid tile is narrow (163px at 375): the count moves under the name, which then has the whole column and balances its lines */
  .tabs.expanded .cat-tab { max-width: none; scroll-snap-align: none; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; row-gap: 1px; align-items: center; padding: 6px 10px 6px 12px; }
  .tabs.expanded .cat-tab .tile { grid-row: 1 / 3; }
  .tabs.expanded .cat-name { grid-column: 2; align-self: end; font-size: 14.5px; text-wrap: balance; }
  .tabs.expanded .cat-n { grid-column: 2; align-self: start; font-size: 12px; line-height: 1.2; }
  .catalog-top.searching .catalog-meta-row { display: none; } /* the rail folds while a query is active on phones too, and the count line with it: the results begin right under the field, above the keyboard */
  .panel-foot { display: block; }
  .catalog-top { grid-template-columns: 1fr; gap: 4px; }
  .search { max-width: none; }
  .catalog-meta { font-size: 14px; }
}
@media (max-width: 767px) {
  .search input { min-height: 54px; font-size: 16px; padding: 0 48px 0 78px; }
  .search svg { inset-inline-start: 18px; }
  .spot { grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; padding: 18px 18px 20px; }
  .spot-actor { width: 104px; }
  .spot-actor .lamp-s { top: -18px; height: 22px; }
  .spot-actor .tile { width: 92px; height: 92px; }
  .spot-actor .tile img { width: 84px; height: 84px; }
  .spot-actor .tile.none { width: 72px; height: 72px; border-radius: 20px; }
  .spot-name { font-size: 22px; }
  .spot-name.long { font-size: 18px; line-height: 1.3; } /* a very long admin name stays a few lines, not a column */
  .spot-meta { font-size: 14px; }
  /* the question and the pill share a row under a hairline; the pill grows to the full width when the row is too tight */
  .spot-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line-dark); }
  .spot .spot-link { flex: 1 1 auto; min-height: 46px; padding-inline: 18px; font-size: 14.5px; }
  .g-head h4 { font-size: 16px; }
  .svc { font-size: 14.5px; padding: 7px 12px; }
  .results-head h3, .hit-head h3 { font-size: 18px; }
  .lead { padding: 22px 18px 20px; }
  .contact-board { padding: 22px 20px 24px; margin-top: 44px; }
  /* «+964 776 420 1285» is ≈9.9em wide: 7.3vw keeps it on one line inside the board's 240px at 320 and 295px at 375; a reader's letter-spacing
     override (1.4.12) wraps it instead of pushing it off the board's edge */
  .num-big { font-size: clamp(20px, 7.3vw, 34px); white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
  .foot-links { margin-inline-start: 0; width: 100%; }
}
@media (max-width: 360px) {
  .spot-actor { width: 84px; }
  .spot-actor .tile { width: 76px; height: 76px; }
  .spot-actor .tile img { width: 70px; height: 70px; }
  .cat-tab { max-width: 224px; }
}
@media (max-width: 359px) { .tabs.expanded { grid-template-columns: 1fr; } } /* the narrowest phones: one column, every name on one or two whole-word lines */

/* ─── short stacked viewports (a phone on its side, 200–400 % zoom): the stage flows instead of sticking, so nothing is ever clipped ── */
@media (max-width: 1023px) and (max-height: 600px) {
  .hero, html.anim .hero { height: auto; min-height: 0; }
  .stage { position: relative; height: auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; } /* content-sized, so nothing inside is cut — only the tilted scene's edges, which would otherwise widen the page */
  .copy { position: static; order: -1; width: auto; padding: calc(var(--nav-h) + 16px) var(--edge) 8px; } /* the question, the lede and every CTA first, in flow */
  .scene { position: relative; inset: auto; height: 420px; flex: none; overflow: hidden; } /* then a compact set: the sign, the two actors, the board */
  .slot, .floor { --ik: 1; } /* overflow: hidden flattens the scene, so nothing is projected: the design positions are the real ones */
  .logo-box { top: 36px; translate: -50% 0; width: min(300px, 100% - 40px); }
  .swarm { top: 48px; translate: -50% 0; width: min(300px, 100% - 40px); }
  .floor { --floor-y: 72%; }
  .s3 { --x: 15%; --y: 25%; --w: 72px; } .s4 { --x: 82%; --y: 50%; --w: 78px; }
  .slab-wrap { top: 97%; width: min(560px, 100% - 40px); }
  .numbers { margin-top: 0; }
}

/* ─── below the fold: reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .panel-skeleton, .done-ico, .btn-dark.busy::after { animation: none; }
  .cat-tab, .search input, .input, .link-btn { transition: none; }
}


/* ─── how: the order travels ─────────────────────────────────────────────
   A route draws itself while you scroll (desktop: pinned, right → left; phones: down the side),
   a lime rider carries the order, and each stop wakes its clay actor with a small landing bounce. */
.how { position: relative; overflow: hidden; isolation: isolate; }
.how-map { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background:
    linear-gradient(115deg, transparent 49.6%, rgba(228, 221, 209, .05) 50%, transparent 50.4%) 0 0 / 260px 260px,
    linear-gradient(25deg, transparent 49.7%, rgba(228, 221, 209, .045) 50%, transparent 50.3%) 0 0 / 190px 190px,
    repeating-linear-gradient(0deg, transparent 0 63px, rgba(228, 221, 209, .035) 63px 64px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(228, 221, 209, .035) 63px 64px);
  -webkit-mask: radial-gradient(70% 60% at 50% 55%, #000 0, transparent 100%); mask: radial-gradient(70% 60% at 50% 55%, #000 0, transparent 100%); }
.how-head h2 .nb { white-space: nowrap; color: var(--lime); }
.journey { --p: 0; --actor: clamp(112px, min(13vw, 22vh), 184px); position: relative; margin-top: clamp(36px, 5vw, 72px); }
.stops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 36px); position: relative; z-index: 1; }
.stop { display: grid; justify-items: center; text-align: center; min-width: 0; }
.stop-actor { position: relative; width: var(--actor); aspect-ratio: 1; display: grid; place-items: center; }
.stop-actor::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(198, 240, 58, .22), rgba(198, 240, 58, 0)); opacity: 0; transform: scale(.6); transition: opacity .6s, transform .9s cubic-bezier(.34, 1.56, .64, 1); }
.stop-actor::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 2%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), transparent 70%); filter: blur(4px); transition: transform .7s; }
.stop-actor img { position: relative; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 88%;
  transform: translateY(14px) scale(.74); filter: grayscale(1) brightness(.72) drop-shadow(0 14px 12px rgba(0, 0, 0, .5)); opacity: .55;
  transition: transform .8s cubic-bezier(.34, 1.56, .64, 1), filter .6s ease, opacity .5s ease; }
.stop-n { position: absolute; z-index: 2; top: 4%; inset-inline-start: 4%; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font: 800 15px/1 var(--display); color: var(--on-stage); background: var(--char); box-shadow: 0 0 0 1px var(--line-dark) inset; transition: background .4s, color .4s, box-shadow .4s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.stop-t { margin-top: 14px; display: grid; justify-items: center; gap: 8px; opacity: .45; transform: translateY(6px); transition: opacity .5s, transform .6s cubic-bezier(.22, .8, .24, 1); }
.stop h3 { margin: 0; font-family: var(--kufi); font-weight: 900; font-size: clamp(22px, 2.3vw, 31px); line-height: 1.2; color: var(--cream); }
.stop p { margin: 0; max-width: 24ch; font-size: 15px; line-height: 1.7; color: var(--on-stage); }
.chip-ui { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 99px; background: rgba(228, 221, 209, .07); box-shadow: 0 0 0 1px var(--line-dark) inset;
  font: 600 13px/1 var(--body); color: var(--cream); white-space: nowrap; opacity: 0; transform: translateY(8px) scale(.96); transition: opacity .45s .12s, transform .55s .12s cubic-bezier(.34, 1.56, .64, 1); }
.chip-ui svg { width: 15px; height: 15px; fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chip-ui b { color: var(--lime); font-family: var(--display); font-variant-numeric: tabular-nums; }
.chip-ui .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 0 rgba(198, 240, 58, .6); }
html.anim .stop.on .chip-ui .pulse { animation: howPing 1.8s infinite; }
@keyframes howPing { 0% { box-shadow: 0 0 0 0 rgba(198, 240, 58, .55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(198, 240, 58, 0); } }
.chip-ui.stars { gap: 3px; }
.chip-ui.stars i { width: 15px; height: 15px; background: rgba(228, 221, 209, .2); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transform: scale(.6); transition: background .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.stop.on .chip-ui.stars i { background: var(--lime); transform: scale(1); }
.stop.on .chip-ui.stars i:nth-child(2) { transition-delay: .32s; } .stop.on .chip-ui.stars i:nth-child(3) { transition-delay: .44s; }
.stop.on .chip-ui.stars i:nth-child(4) { transition-delay: .56s; } .stop.on .chip-ui.stars i:nth-child(5) { transition-delay: .68s; }
.stop.on .chip-ui.stars i:nth-child(1) { transition-delay: .2s; }
.eta.done .pulse { animation: none !important; }

/* a stop wakes up */
.stop.on .stop-actor img { transform: none; filter: drop-shadow(0 20px 16px rgba(0, 0, 0, .5)); opacity: 1; }
.stop.on .stop-actor::before { opacity: 1; transform: scale(1); }
.stop.on .stop-n { background: var(--lime); color: var(--stage); box-shadow: 0 0 0 5px rgba(198, 240, 58, .16); transform: scale(1.08); }
.stop.on .stop-t { opacity: 1; transform: none; }
.stop.on .chip-ui { opacity: 1; transform: none; }
html.anim .stop.land .stop-actor img { animation: howLand .62s cubic-bezier(.3, .7, .3, 1); }
@keyframes howLand { 0% { transform: translateY(-10px) scale(1.04); } 38% { transform: translateY(0) scaleX(1.08) scaleY(.9); } 66% { transform: scaleX(.97) scaleY(1.04); } 100% { transform: none; } }
html.anim .stop.cur .stop-actor img { animation: howBob 3.4s ease-in-out .7s infinite; }
@keyframes howBob { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-5%) rotate(1.2deg); } }
html.still .stop .stop-actor img { animation: none !important; }

/* the route (placed by app.js between the first and the last actor) */
.route { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.route::before { content: ""; position: absolute; inset: 0; border-radius: 4px;
  background: repeating-linear-gradient(var(--route-dir, 270deg), rgba(228, 221, 209, .2) 0 10px, transparent 10px 20px); }
.route-fill { position: absolute; inset: 0; border-radius: 4px; background: var(--lime); box-shadow: 0 0 18px rgba(198, 240, 58, .45); transform-origin: right center; transform: scaleX(var(--p)); }
.journey.v .route-fill { transform-origin: center top; transform: scaleY(var(--p)); }
.rider { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(198, 240, 58, .2), 0 0 22px 4px rgba(198, 240, 58, .5); will-change: transform; }
.rider span { position: absolute; inset: 6px; border-radius: 50%; background: var(--stage); }
html.anim .rider::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(198, 240, 58, .6); animation: howRing 1.6s ease-out infinite; }
@keyframes howRing { from { transform: scale(.7); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.journey.done .rider { opacity: 0; transition: opacity .4s; }
@media (hover: hover) and (pointer: fine) { .stop.on .stop-actor:hover img { transform: translateY(-6px) rotate(-3deg) scale(1.03); transition-duration: .35s; } }

/* phones & small tablets: the route runs down the side, each stop is a row */
@media (max-width: 900px) {
  .journey { --actor: 104px; margin-top: 32px; }
  .stops { grid-template-columns: 1fr; gap: 26px; }
  .stop { grid-template-columns: var(--actor) 1fr; justify-items: start; text-align: start; align-items: center; column-gap: 18px; }
  .stop-t { margin-top: 0; justify-items: start; gap: 6px; transform: translateX(-8px); }
  .stop.on .stop-t { transform: none; }
  .stop h3 { font-size: 23px; }
  .stop p { font-size: 14.5px; max-width: none; }
  .stop-n { width: 28px; height: 28px; font-size: 13px; top: 0; inset-inline-start: 0; }
  .chip-ui { height: 30px; font-size: 12.5px; }
  .rider { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
  .rider span { inset: 5px; }
}
@media (max-width: 360px) { .journey { --actor: 88px; } .stop { column-gap: 12px; } .chip-ui { white-space: normal; height: auto; padding: 7px 11px; line-height: 1.4; } }
html.rm .stop-actor img, html.rm .stop-t, html.rm .chip-ui, html.rm .stop-n, html.rm .stop-actor::before { transition: none !important; animation: none !important; }
.journey.v { --route-dir: 180deg; }

/* desktop: the section is pinned, so the whole journey must fit one screen */
@media (min-width: 901px) {
  .how { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--nav-h) + clamp(12px, 3vh, 32px)) clamp(16px, 4vh, 40px); }
  .how-head h2 { font-size: clamp(30px, min(3.4vw, 5.6vh), 52px); }
  .how-head { margin-bottom: 0; }
  .journey { margin-top: clamp(20px, 5vh, 56px); }
  .stop-t { margin-top: clamp(6px, 1.6vh, 14px); gap: clamp(4px, 1vh, 8px); }
  .stop p { font-size: clamp(13.5px, 1.9vh, 15px); }
}

/* register: the providers' clay crew beside the heading */
.reg-head { position: relative; }
.reg-actor { float: left; width: clamp(130px, 17vw, 230px); height: auto; margin: -10px 0 8px 12px; filter: drop-shadow(0 18px 18px rgba(31, 33, 35, .22)); }
html.anim .reg-actor { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
@media (hover: hover) and (pointer: fine) { html.anim .reg-head:hover .reg-actor { transform: translateY(-6px) rotate(-2deg); } }
@media (max-width: 600px) { .reg-actor { width: 108px; margin: -4px 0 4px 6px; } }

/* ─── hero actors: a random set every visit (picked in the page head) ─── */
/* phones: the same six-actor stage as the desktop, scaled down — back row soft, front row out of focus */
@media (max-width: 767px) {
  .s1, .s2, .s5, .s6 { display: block; }
  .s1 { --x: 8%; --y: 52%; --w: 54px; --z: -340; } .s1 .actor > img { filter: blur(1px) brightness(.85) drop-shadow(0 12px 10px rgba(0, 0, 0, .35)); }
  .s2 { --x: 93%; --y: 50%; --w: 50px; --z: -340; } .s2 .actor > img { filter: blur(1px) brightness(.85) drop-shadow(0 12px 10px rgba(0, 0, 0, .35)); }
  .s3 { --x: 19%; --y: 62%; --w: 82px; --z: -120; }
  .s4 { --x: 82%; --y: 67%; --w: 88px; --z: -120; }
  .s5 { --x: 3%; --y: 80%; --w: 112px; --z: 200; z-index: 5; } .s5 .actor > img { filter: blur(2px) drop-shadow(0 20px 16px rgba(0, 0, 0, .4)); }
  .s6 { --x: 97%; --y: 76%; --w: 100px; --z: 200; z-index: 5; } .s6 .actor > img { filter: blur(1.5px) drop-shadow(0 20px 16px rgba(0, 0, 0, .4)); }

  /* the countdown: one even row of four cells — days · hours · minutes · seconds */
  .slab { padding: 14px 14px 16px; }
  .plate { text-align: center; font-size: 12.5px; }
  .cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; align-items: stretch; }
  .days, .hms .unit { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 0 9px; border-radius: 12px; background: rgba(228, 221, 209, .05); box-shadow: 0 0 0 1px rgba(228, 221, 209, .08) inset; }
  .days { order: 0; font-size: 34px; letter-spacing: -.02em; background: rgba(198, 240, 58, .08); box-shadow: 0 0 0 1px rgba(198, 240, 58, .22) inset; }
  .hms { display: contents; font-size: 30px; }
  .hms .colon { display: none; }
  .days .u, .hms .u { font-family: var(--body); font-weight: 500; font-size: 11.5px; letter-spacing: 0; color: var(--on-stage); margin-top: 0; }
  .days .u { color: var(--lime); }
  .slab-actor { width: 76px; inset-inline-end: 10px; translate: 0 -34%; }
}
@media (max-width: 360px) { .days { font-size: 28px; } .hms { font-size: 25px; } .cd { gap: 6px; } }
@media (max-width: 767px) and (max-height: 740px) { .days { font-size: 30px; } .hms { font-size: 26px; } .days, .hms .unit { padding: 8px 0 7px; } }

/* no lamp fixtures anywhere: the light falls from above with no visible lamp (hero, the spotlight board, the contact board) */
.lamp, .lamp-s, .contact-board .truss { display: none !important; }
/* the crew of providers stands on the numbers sheet: it belongs to «مقدم خدمة مسجل» */
.slab-actor { width: 170px; }
@media (max-width: 767px) { .slab-actor { width: 104px; translate: 0 -30%; } }