/* Mobile v2 (2026-10-18): the timeline menu, the contact dock (phones) and the floating contact button (desktop).
   Built by mobile-v2.js; the menu markup is in the page so it reads without scripts. */

/* Menu: a full-screen comp where each section is a layer with its own keyframe and timecode. */
#mobile-nav.mnav{position:fixed;inset:0;z-index:39;display:flex;flex-direction:column;gap:18px;padding:calc(88px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;border:0;
 background:linear-gradient(180deg,#050407 0%,#08060d 60%,#0d0918 100%);animation:mnav-in .45s var(--ease) both}
#mobile-nav.mnav[hidden]{display:none}
#mobile-nav.mnav::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),#ffffff08 calc(25% - 1px) 25%);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
@keyframes mnav-in{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
html.mnav-open{overflow:hidden}
#mobile-nav .mnav-bar{position:relative;display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #1d1a24;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:#77748a;direction:ltr}
#mobile-nav .mnav-now{color:var(--amber);font-variant-numeric:tabular-nums}
#mobile-nav .mnav-tl{position:relative;display:grid}
#mobile-nav .mnav-track{position:absolute;inset-inline-start:5px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,#2c2836,#3a2f5c 50%,#2c2836)}
#mobile-nav .mnav-row{position:relative;display:grid;grid-template-columns:24px 34px minmax(0,1fr) auto;align-items:center;min-height:68px;border-bottom:1px solid #16141c;color:#d9d6e2;text-decoration:none;
 animation:mnav-row .6s var(--ease) both;animation-delay:calc(var(--i) * 55ms + 140ms);-webkit-tap-highlight-color:transparent;transition:color .25s}
#mobile-nav .mnav-row:active{color:#fff;background:linear-gradient(90deg,#8052ff14,transparent)}
html[dir=rtl] #mobile-nav .mnav-row:active{background:linear-gradient(270deg,#8052ff14,transparent)}
@keyframes mnav-row{from{opacity:0;translate:0 14px}}
#mobile-nav .mnav-key{width:11px;height:11px;border:1.5px solid #8052ff;background:#050407;rotate:45deg;transition:background-color .3s,border-color .3s,scale .4s var(--ease)}
#mobile-nav .mnav-row b{font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#6f6b7d;letter-spacing:.04em}
#mobile-nav .mn-name{font-size:clamp(30px,9vw,40px);font-weight:300;letter-spacing:-.045em;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#mobile-nav .mnav-tc{font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#6f6b7d;font-variant-numeric:tabular-nums;direction:ltr}
#mobile-nav .mnav-row.is-live{color:#fff}
#mobile-nav .mnav-row.is-live .mnav-key{background:var(--amber);border-color:var(--amber);scale:1.25}
#mobile-nav .mnav-row.is-live .mnav-tc,#mobile-nav .mnav-row.is-live b{color:var(--amber)}
html[lang=ar] #mobile-nav .mn-name{font-family:Alexandria,Tahoma,sans-serif;font-weight:400;letter-spacing:0;font-size:clamp(28px,8.4vw,38px)}
#mobile-nav .mnav-foot{display:grid;gap:12px;margin-top:auto;padding-top:6px;animation:mnav-row .6s var(--ease) both;animation-delay:calc(var(--i) * 55ms + 140ms)}
#mobile-nav .mnav-start{display:flex;align-items:center;justify-content:space-between;min-height:58px;padding:0 24px;border-radius:999px;background:#8052ff;color:#fff;font-size:17px;font-weight:500;text-decoration:none;box-shadow:0 16px 36px -14px #8052ffaa}
#mobile-nav .mnav-start:active{transform:scale(.98)}
#mobile-nav .mnav-quick{display:flex;gap:8px}
#mobile-nav .mnav-q{flex:1;display:grid;justify-items:center;gap:7px;padding:13px 4px 11px;border:1px solid #24212b;border-radius:16px;background:#0c0a10;color:#e8e6ee;font:inherit;font-size:12px;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#mobile-nav .mnav-q[hidden]{display:none}
#mobile-nav .mnav-q:active{border-color:#8052ff;background:#140f20}
#mobile-nav .mnav-q svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
#mobile-nav .mnav-wa svg{color:#5be08a}
#mobile-nav .mnav-social{display:flex;justify-content:space-between;margin:2px 4px 0}
#mobile-nav .mnav-social a{display:inline-flex;align-items:center;min-height:40px;color:#8a8796;font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
@media(max-height:640px){#mobile-nav .mnav-row{min-height:54px}#mobile-nav .mn-name{font-size:28px}html[lang=ar] #mobile-nav .mn-name{font-size:26px}}
@media(min-width:821px){#mobile-nav.mnav{display:none}}

/* Dock (phones): Start a project, WhatsApp, Email. */
.dock{display:none}
@media(max-width:700px){
 /* a compact capsule centred above the bottom edge: the button and two matching icons, sized together */
 .dock{position:fixed;left:0;right:0;width:max-content;max-width:calc(100% - 32px);margin-inline:auto;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:4px;padding:4px;border:1px solid #ffffff1c;border-radius:999px;background:#0b0910eb;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 30px #0009;transform:translateY(calc(100% + 24px));opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .3s ease}
 .dock.is-on{transform:none;opacity:1}
 .dock a{-webkit-tap-highlight-color:transparent;text-decoration:none;color:#fff;transition:transform .2s ease,color .2s ease}
 .dock-start{display:flex;align-items:center;justify-content:center;gap:9px;height:40px;padding:0 20px;border-radius:999px;background:#8052ff;font:600 13px/1 Inter,Alexandria,sans-serif;white-space:nowrap}
 .dock-start i{width:6px;height:6px;background:#fff;rotate:45deg;animation:dock-key 2.4s var(--ease) infinite}
 @keyframes dock-key{0%,70%,100%{scale:1}80%{scale:1.6;background:var(--amber)}}
 .dock-i{display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:50%;background:#ffffff0f;color:#ffffffd9!important}
 .dock-i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
 .dock-wa:active{color:#5be08a!important}
 .dock a:active{transform:scale(.94)}
 html[lang=ar] .dock-start{font-family:Alexandria,sans-serif}
 html.moe-intro .dock{visibility:hidden}
}

/* Floating button (desktop): one keyframe in the corner that opens WhatsApp, Email and the comp. */
.fab{display:none}
@media(min-width:701px){
 .fab{position:fixed;inset-inline-end:28px;bottom:28px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:10px;opacity:0;translate:0 16px;pointer-events:none;transition:opacity .3s ease,translate .5s cubic-bezier(.16,1,.3,1)}
 html[dir=rtl] .fab{align-items:flex-start}
 .fab.is-on{opacity:1;translate:none;pointer-events:auto}
 .fab-btn{display:flex;align-items:center;gap:12px;height:50px;padding-inline:18px 20px;border-radius:999px;border:1px solid #ffffff22;background:#0b0910e6;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font:500 14px/1 Inter,Alexandria,sans-serif;cursor:pointer;box-shadow:0 14px 36px #000a;transition:border-color .25s}
 .fab-btn:is(:hover,:focus-visible),.fab.is-open .fab-btn{border-color:#8052ff}
 .fab-key{display:block;width:10px;height:10px;background:#8052ff;rotate:45deg;transition:rotate .5s cubic-bezier(.16,1,.3,1),background-color .3s}
 .fab.is-open .fab-btn .fab-key{rotate:225deg;background:var(--amber)}
 .fab-menu{width:310px;padding:8px;border:1px solid #ffffff1c;border-radius:20px;background:#0b0910f2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 24px 60px #000c;animation:fab-in .35s cubic-bezier(.16,1,.3,1)}
 .fab-menu[hidden]{display:none}
 @keyframes fab-in{from{opacity:0;translate:0 10px;scale:.97}}
 .fab-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:52px;padding:0 14px;border-radius:14px;color:#fff;font-size:14px;text-decoration:none;transition:background-color .2s}
 .fab-row:is(:hover,:focus-visible){background:#ffffff0f}
 .fab-row b{font-weight:400;font-size:12px;color:#8d8a99;font-variant-numeric:tabular-nums}
 .fab-row svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
 .fab-wa svg{color:#5be08a}
 .fab-comp{margin-top:4px;background:#8052ff1f}.fab-comp .fab-key{justify-self:center}.fab-comp b{color:var(--amber);font-size:14px}
 html[lang=ar] .fab-btn,html[lang=ar] .fab-row{font-family:Alexandria,sans-serif}
 html.moe-intro .fab{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){#mobile-nav.mnav,.mnav-row,.mnav-foot,.fab-menu{animation:none}.dock-start i{animation:none}.dock,.fab{transition:none}}
/* Arabic: arrows on buttons point the reading way. */
html[dir=rtl] :is(#mobile-nav .mnav-start span:last-child,.comp-send span,.cline-wa span,.fab-comp b){display:inline-block;transform:scaleX(-1)}

/* Arabic phones: «طريقتنا» starts with its title and 3D shape, then the four steps, like «ما نصنعه» before it. */
@media(max-width:640px){html[dir="rtl"] body .process .split>.sculpture-column{order:0}html[dir="rtl"] body .process .split>.services{order:1}}