/* ===================== Language: picker, switch, Arabic / RTL ===================== */
html.i18n-pending body{opacity:0}
body{transition:opacity .38s ease}
html.lang-leaving body{opacity:0}

/* ---- switch pill in the nav ---- */
.nav-inner{gap:1.1rem}
.brand{margin-inline-end:auto}
.nav-links{order:1}
.lang-toggle{order:2; flex:none; height:38px; min-width:54px; padding:0 .95rem; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(233,215,184,.35); color:var(--champagne,#e9d7b8);
  font:600 .78rem/1 var(--body); letter-spacing:.14em; display:grid; place-items:center;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease}
.lang-toggle span[lang="ar"]{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; font-size:.92rem; letter-spacing:0; font-weight:600}
.lang-toggle:hover{background:var(--champagne,#e9d7b8); color:#0b0b0f; border-color:var(--champagne,#e9d7b8); transform:translateY(-1px)}
.lang-toggle:focus-visible{outline:2px solid var(--champagne,#e9d7b8); outline-offset:3px}
.menu-btn{order:3}
@media (max-width:1100px){ .lang-toggle{height:44px; min-width:58px} }

/* ---- first-visit picker ---- */
.lang-picker{position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:20px;
  background:rgba(8,8,12,.6); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  opacity:0; transition:opacity .6s ease}
.lang-picker.show{opacity:1}
.lp-glow{position:absolute; width:min(720px,120vw); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(124,92,255,.28), rgba(233,215,184,.10) 45%, transparent 70%); filter:blur(30px);
  animation:lpPulse 7s ease-in-out infinite}
@keyframes lpPulse{50%{transform:scale(1.08); opacity:.75}}
.lp-card{position:relative; width:min(560px,100%); text-align:center; padding:clamp(28px,6vw,48px) clamp(20px,5vw,44px) clamp(24px,5vw,36px);
  border-radius:28px; background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border:1px solid rgba(233,215,184,.18); box-shadow:0 40px 120px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(18px) scale(.98); transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.lang-picker.show .lp-card{transform:none}
.lp-card > *{opacity:0; transform:translateY(10px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1)}
.lang-picker.show .lp-card > *{opacity:1; transform:none}
.lang-picker.show .lp-card > :nth-child(2){transition-delay:.08s}
.lang-picker.show .lp-card > :nth-child(3){transition-delay:.16s}
.lang-picker.show .lp-card > :nth-child(4){transition-delay:.26s}
.lang-picker.show .lp-card > :nth-child(5){transition-delay:.36s}
.lp-logo{width:58px; height:58px; border-radius:50%; object-fit:cover; margin:0 auto 1.1rem; display:block;
  box-shadow:0 0 0 1px rgba(233,215,184,.35), 0 0 34px rgba(124,92,255,.35)}
.lp-eyebrow{display:flex; align-items:center; justify-content:center; gap:.7rem; color:var(--champagne,#e9d7b8);
  font:600 .7rem/1 var(--body); letter-spacing:.32em; text-transform:uppercase}
.lp-eyebrow span{font-family:'IBM Plex Sans Arabic',system-ui,sans-serif; letter-spacing:0; font-size:.85rem; text-transform:none}
.lp-eyebrow i, .lp-note i{width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.6; display:inline-block}
.lp-title{margin:1rem 0 1.8rem; display:grid; gap:.35rem; font-weight:500; line-height:1.1}
.lp-title > span:first-child{font-family:var(--serif); font-size:clamp(2rem,6vw,2.7rem)}
.lp-title em{font-style:italic; color:var(--champagne,#e9d7b8)}
.lp-title > span[lang="ar"]{font-family:'Amiri',serif; font-size:clamp(1.6rem,5vw,2.1rem); color:var(--muted)}
.lp-options{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.lp-opt{position:relative; overflow:hidden; display:grid; justify-items:center; gap:.35rem; padding:1.4rem 1rem 1.25rem; cursor:pointer;
  border-radius:20px; color:var(--text); background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.1);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .35s ease, background .35s ease, box-shadow .45s ease}
.lp-opt::before{content:""; position:absolute; inset:0; opacity:0; transition:opacity .45s ease;
  background:radial-gradient(120% 90% at 50% 0%, rgba(233,215,184,.18), transparent 60%)}
.lp-opt:hover, .lp-opt:focus-visible{transform:translateY(-4px); border-color:rgba(233,215,184,.55); background:rgba(255,255,255,.06);
  box-shadow:0 18px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(233,215,184,.15); outline:none}
.lp-opt:hover::before, .lp-opt:focus-visible::before{opacity:1}
.lp-opt:active{transform:translateY(-1px) scale(.98)}
.lp-glyph{width:54px; height:54px; border-radius:50%; display:grid; place-items:center; margin-bottom:.35rem;
  font-family:var(--serif); font-size:1.5rem; color:var(--champagne,#e9d7b8);
  border:1px solid rgba(233,215,184,.35); background:radial-gradient(circle at 30% 25%, rgba(233,215,184,.16), transparent 70%)}
.lp-opt[data-lang="ar"] .lp-glyph{font-family:'Amiri',serif; font-size:1.55rem; padding-bottom:.2rem}
.lp-name{font:600 1.08rem/1.2 var(--display)}
.lp-opt[data-lang="ar"] .lp-name{font-family:'Noto Kufi Arabic',sans-serif; font-size:1.05rem}
.lp-sub{font-size:.78rem; color:var(--muted)}
.lp-opt[data-lang="ar"] .lp-sub{font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.82rem}
.lp-note{margin:1.4rem 0 0; font-size:.74rem; color:var(--muted); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.3rem .6rem}
.lp-note span{font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.78rem}
@media (max-width:420px){ .lp-options{gap:10px} .lp-opt{padding:1.15rem .6rem 1rem} .lp-sub{font-size:.7rem} }
@media (prefers-reduced-motion:reduce){ .lang-picker, .lp-card, .lp-card > *, .lp-opt{transition:none} .lp-glow{animation:none} }

/* ---- Arabic typography ---- */
html[lang="ar"]{
  --display:'Noto Kufi Arabic','Bricolage Grotesque',system-ui,sans-serif;
  --body:'IBM Plex Sans Arabic','Manrope',system-ui,sans-serif;
  --serif:'Amiri','Cormorant Garamond',serif;
}
html[lang="ar"] body *{letter-spacing:0 !important}          /* spacing breaks Arabic letters apart */
html[lang="ar"] em{font-style:normal}
html[lang="ar"] h1, html[lang="ar"] h2{line-height:1.35}
html[lang="ar"] .hero h1 .line{padding-bottom:.08em}
html[lang="ar"] .hero-sub, html[lang="ar"] .lux-center p, html[lang="ar"] .lux-head p, html[lang="ar"] .about-story p{line-height:1.95}
html[lang="ar"] .footer-mark{line-height:1.15}
html[lang="ar"] .about-lead{font-style:normal; line-height:1.75}
html[lang="ar"] .about-story p:first-child::first-letter{float:none; font:inherit; padding:0; color:inherit}

/* ---- RTL: keep moving rows/carousels running left-to-right, flip direction arrows ---- */
html[dir="rtl"] .reel-wall, html[dir="rtl"] .client-row, html[dir="rtl"] .faces,
html[dir="rtl"] .row-wrap, html[dir="rtl"] .grid, html[dir="rtl"] .modal-nav{direction:ltr}
html[dir="rtl"] .card-body, html[dir="rtl"] .client-chip > span:last-child, html[dir="rtl"] .modal-info{direction:rtl}
html[dir="rtl"] .reel-handle{direction:ltr; width:fit-content; margin-left:auto}
html[dir="rtl"] .card-title{line-height:1.45; font-size:.95em}
/* mirror the left/right details of the layout */
html[dir="rtl"] .nav-links a.nav-cta{margin-left:0; margin-right:.4rem}
html[dir="rtl"] .cat-nav a b{margin-left:0; margin-right:.3rem}
html[dir="rtl"] .lux-head p, html[dir="rtl"] .about-lead{padding-left:0; border-left:0; padding-right:1.6rem; border-right:1px solid rgba(233,215,184,.45)}
html[dir="rtl"] .service{border-left:0; border-right:1px solid var(--line)}
html[dir="rtl"] .service:first-child{border-right:0}
@media (max-width:1024px){ html[dir="rtl"] .service:nth-child(3){border-right:0} }
@media (max-width:640px){ html[dir="rtl"] .service{border-right:0} }
html[dir="rtl"] .expertise li:hover{padding-left:0; padding-right:.5rem}
html[dir="rtl"] .toolkit-label{margin-right:0; margin-left:auto}
html[dir="rtl"] .quote::before{right:auto; left:1.2rem}
html[dir="rtl"] .client-header{padding-right:0; padding-left:2.4rem}
html[dir="rtl"] .stars{left:auto; right:1.5rem}
html[dir="rtl"] .filter-bar button b{margin-left:0; margin-right:.35rem}
html[dir="rtl"] .cat-head h2 span{margin-left:0; margin-right:.6rem}
html[dir="rtl"] .cat-head p{text-align:left}
@media (max-width:720px){ html[dir="rtl"] .cat-head p{text-align:right} }
html[dir="rtl"] .modal-info b{margin-right:0; margin-left:.5rem}
html[dir="rtl"] .svc-num, html[dir="rtl"] .contact-num{direction:ltr; unicode-bidi:isolate}
html[dir="rtl"] .client-stack{direction:ltr}
html[dir="rtl"] .client-stack p{direction:rtl}
html[dir="rtl"] .btn-ghost-lux svg{transform:scaleX(-1)}
html[dir="rtl"] .scroll-cue{direction:ltr}