/* ============================================================
   دليل تعديل المسافات — عدّل هنا فقط واحفظ
   ============================================================
   1) مسافة بين قسم وقسم:
      main > section { padding-block: clamp(48px, 7vh, 110px); }
      clamp(الحد الأدنى, القيمة المفضلة, الحد الأقصى)
      زد الرقم = مسافة أكبر | قلله = أقرب

   2) محتوى قسم معين أعلى/أسفل:
      .about    { padding-top: clamp(24px, 4vh, 52px)!important }
      .process  { padding-top: clamp(4px, 0.8vh, 14px)!important }
      .services { padding-top: ... }
      غيّر clamp لقيمة ثانية مثل: padding-top: 30px

   3) توسيط المحتوى رأسياً داخل كل الأقسام:
      main > section { justify-content: center }   <- center=متوسط / flex-start=أعلى

   4) ملء الشاشة (عدم ظهور القسم التالي):
      داخل @media(min-width:901px): min-height: calc(100svh - 84px)

   5) بعد أي تعديل: ارفع رقم ?v= في index.html و en/index.html
      (overrides.css?v=رقم جديد) ثم Ctrl+Shift+R
   ============================================================ */
/* section vertical centering + spacing harmony */
main > section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(48px, 7vh, 110px);
}
main > section.hero {
  min-height: 100svh;
  justify-content: center;
}
.hero .hero-grid {
  margin: auto;
}
.scroll-cue {
  bottom: 14px;
}
.process > .stats-strip{margin-top:0!important;margin-bottom:clamp(36px,6vh,64px)!important}
@media (max-width: 900px) {
  main > section {
    padding-block: 56px 72px;
  }
}
.scroll-cue{bottom:88px;left:50%;transform:translateX(-50%);width:30px;height:46px;border-color:var(--purple);background:var(--card);box-shadow:0 8px 22px -10px rgba(94,103,230,.55);z-index:5}
.scroll-cue span{animation:cueDot 1.8s ease-in-out infinite}
@keyframes cueDot{0%,100%{transform:translate(-50%,0);opacity:.4}50%{transform:translate(-50%,14px);opacity:1}}
.testimonials{padding-block:clamp(36px,5vh,72px)!important}
.process{padding-top:clamp(4px,0.8vh,14px)!important;padding-bottom:clamp(56px,7vh,96px)!important}
.process .section-head{max-width:820px;margin-bottom:clamp(26px,4vh,42px)}
.process .section-sub{max-width:none!important}
@media (min-width: 901px) {
  .about,
  .process,
  .services,
  .work,
  .testimonials,
  .faq,
  .cta-section {
    min-height: calc(100svh - 84px);
  }
}
html[lang="en"] .hero .container.hero-grid{transform:translateY(-4vh)}
.cta-box{max-width:1400px;width:calc(100% - 40px)}
.btn > span{display:inline-block}
.btn:hover > span{animation:btnTextRoll .5s var(--ease)}
@keyframes btnTextRoll{0%{transform:translateY(0);opacity:1}45%{transform:translateY(-135%);opacity:0}52%{transform:translateY(135%);opacity:0}100%{transform:translateY(0);opacity:1}}
.process{background:var(--bg)!important}
.process > .stats-strip{margin-top:0!important;margin-bottom:clamp(36px,6vh,64px)!important;height:auto;flex:none}
.process > .stats-strip > .stats-track{height:44px!important}
.about{padding-top:clamp(24px,4vh,52px)!important}

/* EN hero fits one screen so scroll-cue is visible */
html[lang="en"] .hero{height:100svh;min-height:100svh;padding-top:clamp(84px,11vh,128px)!important;padding-bottom:clamp(52px,8vh,96px)!important}
html[lang="en"] .hero .container.hero-grid{transform:translateY(-2vh)}
/* About closer to brands strip */
.about{padding-top:clamp(10px,1.6vh,26px)!important}
/* Process higher */
.process{padding-top:clamp(4px,0.8vh,14px)!important}
/* Space between work and faq */
.faq{padding-top:clamp(72px,11vh,140px)!important}
/* Noah-style single following image */
.trail-follow{position:fixed;left:0;top:0;width:min(360px,27vw);aspect-ratio:4/3;border-radius:22px;overflow:hidden;pointer-events:none;z-index:70;opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(var(--rot,0deg));transition:opacity .35s ease,transform .55s cubic-bezier(.3,1.45,.45,1);box-shadow:0 40px 90px -25px rgba(0,0,0,.5)}
.trail-follow.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--rot,0deg))}
.trail-follow img{width:100%;height:100%;object-fit:cover;display:block}
.trail-follow.pop img{animation:trailPop .55s cubic-bezier(.3,1.4,.45,1)}
@keyframes trailPop{0%{transform:scale(.72)}100%{transform:scale(1)}}
@media(max-width:1100px){.trail-follow,.scroll-cue{display:none}}

/* Availability capsule fits its content (no trailing gap) */
.site-header.scrolled .availability{flex:0 0 auto!important;width:auto!important;padding-inline:8px 16px!important}
/* Modal close: black X on white circle, white on purple hover */
.modal-close{color:#14131b!important}
.modal-close:hover,.modal-close:hover *{color:#fff!important}
/* Modal images capped */
.pm-hero img{max-height:66vh!important}
.pm-body img{max-height:58vh!important}

/* Availability: symmetric tight padding (kills trailing gap after dot) */
.site-header .availability{padding-inline:8px!important}
.site-header.scrolled .availability{gap:10px!important}
/* Modal: everything aligned to text width */
.project-modal-panel{padding:clamp(14px,2vw,34px) clamp(16px,3vw,58px) clamp(26px,4vh,54px)!important}
.pm-hero{width:auto!important;margin-inline:clamp(14px,3vw,58px)!important;border-radius:16px!important;margin-bottom:-72px!important;position:relative;z-index:1}
@media(max-width:768px){.pm-hero{margin-inline:20px!important}}
.pm-body > .pm-hero{margin:0 0 26px!important;border-radius:16px!important;position:relative;z-index:1}
.pm-body{margin-top:clamp(14px,2vw,34px)!important}
.pm-hero img{max-height:58vh!important;border-radius:12px!important}

/* Availability capsule: kill ALL trailing space */
.site-header .availability,
.site-header.scrolled .availability{padding:0 12px!important;gap:8px!important}
.site-header .availability-dot,.site-header.scrolled .availability-dot{margin:0 0 0 0!important}
.site-header .availability-text,.site-header.scrolled .availability-text{margin:0!important;padding:0!important}

/* ===== Project modal videos (Cloudinary) — إضافة جديدة فقط، لا تُعدَّل القواعد أعلاه ===== */
.pm-videos{display:flex;flex-direction:column;gap:28px;margin-bottom:34px}
.pm-video{border-radius:16px;overflow:hidden;background:#000;box-shadow:0 10px 40px #0000000d}
.pm-video video{width:100%!important;height:auto!important;display:block;border-radius:16px;background:#000}

/* ===== Behance-style project blocks — إضافة جديدة فقط ===== */
.pm-blocks{display:flex!important;flex-direction:column!important;margin-bottom:10px}
.pm-bimg img{width:100%!important;height:auto!important;border-radius:16px!important;box-shadow:0 10px 40px #0000000d!important}
.pm-grid{display:grid!important;grid-template-columns:repeat(2,1fr)!important}
.pm-grid.cols-1{grid-template-columns:1fr!important}
.pm-grid.cols-3{grid-template-columns:repeat(3,1fr)!important}
.pm-grid img{width:100%!important;height:auto!important;border-radius:16px!important;box-shadow:0 10px 40px #0000000d!important;display:block}
@media(max-width:640px){.pm-grid,.pm-grid.cols-3{grid-template-columns:1fr!important}}

/* EN hero on phones: let it grow naturally (fixed 100svh was clipping the image) */
@media(max-width:990px){
  html[lang="en"] .hero{height:auto!important;min-height:100svh}
}

/* Stats purple strip: keep it moving on phones even with reduced-motion / data-saver */
html.reduce-motion .marquee-track,
html.reduce-motion .stats-track{animation-duration:30s!important;animation-iteration-count:infinite!important}
@media(max-width:900px){
  .process > .stats-strip > .stats-track{animation-duration:26s!important}
}

/* RTL marquees: move rightward so content keeps entering — no empty gap, infinite seamless loop */
@keyframes marqueeRTL25{0%{transform:translate(0)}to{transform:translate(25%)}}
@keyframes marqueeRTL50{0%{transform:translate(0)}to{transform:translate(50%)}}
html[dir="rtl"] .process > .stats-strip > .stats-track{animation-name:marqueeRTL25!important}
html[dir="rtl"] .marquee-clients .marquee-track{animation-name:marqueeRTL50!important}

/* LTR (English): explicit leftward seamless loop — direction follows the language */
@keyframes marqueeLTR25{0%{transform:translate(0)}to{transform:translate(-25%)}}
@keyframes marqueeLTR50{0%{transform:translate(0)}to{transform:translate(-50%)}}
html[dir="ltr"] .process > .stats-strip > .stats-track{animation-name:marqueeLTR25!important}
html[dir="ltr"] .marquee-clients .marquee-track{animation-name:marqueeLTR50!important}

/* ===== Mobile only: well-studied spacing between sections (AR + EN) — desktop untouched ===== */
@media(max-width:900px){
  main > section{padding-block:52px 64px}
  .about{padding-top:44px!important;padding-bottom:64px!important}
  .process{padding-top:44px!important;padding-bottom:64px!important}
  .process > .stats-strip{margin-bottom:40px!important}
  .services{padding-block:52px 64px!important}
  .work{padding-block:52px 64px!important}
  .testimonials{padding-block:44px 56px!important}
  .faq{padding-top:56px!important;padding-bottom:64px!important}
  .cta-section{padding-block:52px 68px!important}
  .clients{padding-block:26px!important}
  html[lang="en"] .hero{padding-bottom:64px!important}
}

/* ===== Refined scrollbar & keyboard focus (polish) ===== */
html{scrollbar-width:thin;scrollbar-color:#c9cad6 transparent}
html[data-theme=dark]{scrollbar-color:#333338 transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#c9cad6;border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--purple);border:3px solid transparent;background-clip:content-box}
html[data-theme=dark] ::-webkit-scrollbar-thumb{background:#333338;border:3px solid transparent;background-clip:content-box}
html[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:var(--purple);border:3px solid transparent;background-clip:content-box}
:focus-visible{outline:2px solid var(--purple);outline-offset:2px;border-radius:6px}
.btn:focus-visible,.lang-toggle:focus-visible,.theme-toggle:focus-visible{outline-offset:3px}

/* ===== Solén-style splash: letters light up one by one + progress bar + rolling status ===== */
.premium-splash{position:fixed;inset:0;z-index:99999;background:#050505;display:flex;align-items:center;justify-content:center;transition:none}
.premium-splash .splash-content{padding:.08em .25em}
.splash-logo{font-family:var(--font-ar);font-size:clamp(4rem,13vw,8rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0;display:flex;align-items:baseline;text-transform:none;animation:none}
.splash-logo .sl{color:#3a3a3a;animation:splashLit .3s ease forwards}
.splash-logo .sl:nth-child(1){animation-delay:.45s}
.splash-logo .sl:nth-child(2){animation-delay:.6s}
.splash-logo .sl:nth-child(3){animation-delay:.75s}
.splash-logo .sl:nth-child(4){animation-delay:.9s}
.splash-logo .sl:nth-child(5){animation-delay:1.05s}
.splash-logo .sl-dot{color:#3a3a3a}
@keyframes splashLit{to{color:#fff}}
.splash-logo .sl-dot{animation-name:splashLitDot}
@keyframes splashLitDot{to{color:var(--purple)}}
.splash-status{position:absolute;bottom:34px;left:0;right:0;text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.14em;color:#8a8a8a}
.splash-roll{display:inline-flex;flex-direction:column;height:1.25em;overflow:hidden;vertical-align:bottom}
.splash-roll span{display:block;height:1.25em;line-height:1.25em;animation:splashRoll 2.4s cubic-bezier(.76,0,.24,1) infinite}
@keyframes splashRoll{0%,28%{transform:translateY(0)}33%,61%{transform:translateY(-100%)}66%,100%{transform:translateY(-200%)}}
.splash-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:rgba(255,255,255,.07)}
.splash-bar span{display:block;height:100%;width:0;background:#fff;animation:splashLoad 1.4s cubic-bezier(.4,0,.2,1) forwards}
@keyframes splashLoad{to{width:100%}}
.premium-splash.splash-exit{animation:splashCurtain .65s cubic-bezier(.76,0,.24,1) forwards}
@keyframes splashCurtain{to{transform:translateY(-101%)}}
.splash-line{display:none}
html.reduce-motion .splash-logo .sl{animation-duration:.01s!important;animation-delay:0s!important}
html.reduce-motion .splash-roll span,html.reduce-motion .splash-bar span{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}
html.reduce-motion .premium-splash.splash-exit{animation-duration:.35s}

/* ===== Hero chips: premium frosted glass (keeps the glass effect, refined) ===== */
.floating-chip{
  background:rgba(255,255,255,.72)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.5)!important;
  backdrop-filter:blur(18px) saturate(1.5)!important;
  border:1px solid rgba(255,255,255,.55)!important;
  box-shadow:0 10px 30px -12px rgba(20,19,27,.35),inset 0 1px 0 rgba(255,255,255,.5)!important;
  padding:8px 15px!important;
  font-size:.78rem!important;
  color:var(--purple)!important;
}
html[data-theme=dark] .floating-chip{
  background:rgba(24,23,36,.62)!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:0 12px 34px -14px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12)!important;
  color:#b0b5ff!important;
}
.floating-chip .chip-dot{
  width:6px!important;height:6px!important;
  min-width:6px!important;min-height:6px!important;
  flex:0 0 6px!important;
}
.floating-chip strong{font-weight:800}

/* ===== Project modal: content path + theme-aware text, no overflow ===== */
.pm-body{max-width:1100px!important}
.pm-body,.pm-body h2,.pm-body strong{color:var(--ink)!important;overflow-wrap:break-word!important;word-break:break-word!important}
.pm-desc,.pm-btext{color:var(--ink)!important;max-width:100%!important;overflow-wrap:break-word!important;word-break:break-word!important}
.pm-meta div span{color:var(--muted)!important}
.pm-meta div strong{overflow-wrap:break-word!important;word-break:break-word!important}
.pm-title{overflow-wrap:break-word!important;word-break:break-word!important;max-width:100%!important}
.pm-tag{overflow-wrap:break-word!important}
.pm-blocks,.pm-videos,.pm-gallery,.pm-grid,.pm-pdf{max-width:100%!important;overflow-wrap:break-word!important;min-width:0!important}
.pm-blocks>*,.pm-gallery>div,.pm-grid>div{max-width:100%!important;min-width:0!important}
html[data-theme=dark] .pm-body{background:var(--card)!important}
html:not([data-theme=dark]) .pm-body{background:#fff!important}

/* ===== Modal close button: circular ===== */
.modal-close{width:46px!important;height:46px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:#fff!important;color:#14131b!important;border:1px solid rgba(20,19,27,.12)!important;box-shadow:0 10px 26px -12px rgba(20,19,27,.4)!important;transition:background .25s,transform .25s!important}
.modal-close svg{width:18px!important;height:18px!important}
.modal-close:hover{background:var(--purple)!important;transform:rotate(90deg)!important}
html[data-theme=dark] .modal-close{background:#1c1c1e!important;color:#fff!important;border-color:rgba(255,255,255,.16)!important}

/* ===== Content protection: no select / no image drag / no long-press save ===== */
img{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-user-drag:none!important;pointer-events:auto!important}
main,footer,.site-header,.project-modal{-webkit-user-select:none!important;user-select:none!important}
input,textarea{-webkit-user-select:text!important;user-select:text!important}