/* Theme-only additions on top of the approved mockup design system (os.css). */
html[lang^="ar"] .l-en,html:not([lang^="ar"]) .l-ar{display:none!important}
html[dir="rtl"] body{line-height:1.75}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .menu,html[dir="rtl"] .k{letter-spacing:0!important;text-transform:none}
html[dir="rtl"] h1,html[dir="rtl"] h2{line-height:1.3}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px}
.skip-link:focus{top:12px}
.soc a{display:grid;place-items:center;color:inherit}
.soc .lang{all:unset;cursor:pointer;font-size:15px;color:var(--muted);margin-inline-end:6px}.soc .lang:hover{color:var(--fg)}
.burger{cursor:pointer}
/* mobile drawer */
.drawer[hidden]{display:none!important}
.drawer{position:fixed;inset:0;z-index:80;background:var(--bg);padding:110px max(24px,env(safe-area-inset-left,0px)) 40px;display:flex;flex-direction:column;justify-content:space-between;overflow:auto}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{font-size:clamp(30px,8vw,44px);letter-spacing:-.02em;padding:12px 0;border-bottom:1px solid var(--line)}
.drawer nav a.on{color:var(--t)}
.dr-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:32px}.dr-foot .lang{font-size:18px}
body.dr-open{overflow:hidden}body.dr-open .hd{position:fixed;inset:0 0 auto 0;z-index:90;background:var(--bg)}
/* footer links */
.ft .in{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.ft .s{display:flex;gap:18px;flex-wrap:wrap}.ft a:hover{color:var(--t)}
.ft .fl2{display:flex;gap:18px;flex-wrap:wrap}
/* Elementor pages render edge to edge; containers keep the design gutters */
.elementor-page main > .elementor{width:100%}
/* plain (non-Elementor) content */
.artb > *:first-child{margin-top:0}.artb img{max-width:100%;height:auto;border-radius:18px}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ===== home (Elementor block layouts) ===== */
.h1k{font-size:clamp(15px,1.25vw,18px);font-weight:600;line-height:1.45;letter-spacing:0;max-width:44ch;margin:0;color:var(--fg);display:inline-block;background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid var(--line);border-radius:18px;padding:10px 18px;align-self:flex-start;backdrop-filter:blur(8px)}
.home-hero .big{margin:clamp(28px,4vw,52px) 0 clamp(24px,3vw,36px)}
.hb{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:34px}.hb .ghost2{margin-top:0}
.badges{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.badges li{font-size:13px;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--card) 60%,transparent)}
.intro2{padding-block:clamp(70px,9vw,120px) clamp(40px,5vw,64px)}
.intro2 .cols2{margin:clamp(28px,4vw,48px) auto 0;max-width:1000px;color:var(--muted)}
.why .wg p{margin:10px 0 0;color:var(--muted);font-size:15px;line-height:1.55}
.why .hp p{margin:0;color:var(--muted)}
.sv4 .sl{list-style:none;margin:6px 0 0;padding:0}
.sv4 .sl li{border-top:1px solid var(--line)}
.sv4 .sl a{display:block;padding:10px 0;transition:padding .3s}.sv4 .sl a:hover{padding-inline-start:8px}
.sv4 .sl b{display:block;font-weight:600;font-size:16px}.sv4 .sl span{display:block;color:var(--muted);font-size:14px;line-height:1.45}
.sc4{padding-bottom:30px}
.roles span{display:flex;flex-direction:column;gap:2px}.roles b{font-weight:600;text-transform:capitalize}.roles i{font-style:normal;color:var(--muted);font-size:14px}
.st p{margin:8px 0 0}
.cs .bgc img.bgi{width:100%;height:100%;object-fit:cover;display:block}
.muted{color:var(--muted)}
.rate p{margin:8px 0 14px}

/* ===== round: work, articles, team orbit, footer, loader ===== */
#ld{display:none}.ldr #ld{display:block}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.head .ghost{flex:none}
/* latest work */
.mk2{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,4vw,56px);align-items:stretch}
.mk2 .acc{position:static;border-top:1px solid var(--fg)}
.mk2 .acc .wi{display:block;width:100%;cursor:pointer;padding:18px 0;border-bottom:1px solid var(--line)}.mk2 .acc .wi:focus-visible{outline:2px solid var(--t);outline-offset:4px}.mk2 .wi .d{display:block;max-height:0;overflow:hidden;color:var(--muted);transition:max-height .4s,margin .4s}
.mk2 .r{display:flex;align-items:center;gap:16px}
.mk2 .rn{color:var(--t);font-size:13px;font-weight:600;width:24px;flex:none}
.mk2 .rt{flex:1;display:flex;flex-direction:column;gap:2px;font-size:clamp(19px,1.7vw,23px)}
.mk2 .rt small{font-size:13px;color:var(--muted);letter-spacing:.02em}
.mk2 .r i{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid color-mix(in srgb,var(--fg) 40%,transparent);display:grid;place-items:center;transition:transform .35s,background .3s,color .3s}
.mk2 .wi[aria-expanded="true"] .r i{background:var(--fg);color:var(--bg);border-color:var(--fg);transform:rotate(180deg)}
.mk2 .d{padding-inline-start:40px;font-size:15px}.mk2 .d a{color:var(--t);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.mk2 .wi[aria-expanded="true"] .d{max-height:160px;margin-top:10px}
.stage{position:relative;border-radius:26px;overflow:hidden;background:var(--bg2);min-height:420px}
.cs2{position:absolute;inset:0;opacity:0;transition:opacity .6s,transform .9s cubic-bezier(.2,.8,.2,1);transform:scale(1.04)}
.cs2.hot{opacity:1;transform:none;z-index:1}
.cs2 img{width:100%;height:100%;object-fit:cover;display:block}
.cs2 .fc{position:absolute;inset-inline-start:18px;bottom:18px;top:auto;left:auto;background:#fff;color:#111;font-size:13px;padding:7px 14px;border-radius:999px;font-weight:600}
/* articles: portrait covers */
.bg3 .bim{aspect-ratio:4/5}
.bg3 .bim img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
/* team orbit */
.orbit-s{overflow:hidden}
.orb-head{text-align:center;max-width:720px;margin:0 auto}
.orb{position:relative;width:min(640px,100%);aspect-ratio:1;margin:clamp(24px,4vw,48px) auto 0}
.orb-ring{position:absolute;inset:0;width:100%;height:100%;animation:spin2 60s linear infinite}
.orb-ring circle{fill:none;stroke:var(--line);stroke-width:1.2;stroke-dasharray:3 7}
@keyframes spin2{to{transform:rotate(360deg)}}
.orb-core{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(160deg,#1a0438,#3b0a7a 60%,#0d5f58);color:#f3ecff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8%;gap:8px;box-shadow:0 30px 70px -30px #1a043888}
.orb-core .dia{width:22px;height:22px;background:#00C2AA;transform:rotate(45deg);margin-bottom:6px;box-shadow:0 0 0 6px #00C2AA22}
.oc-t{font-size:clamp(17px,1.8vw,22px);text-transform:capitalize;line-height:1.25}.oc-d{font-size:clamp(13px,1.1vw,15px);color:#d8ccf0;line-height:1.45}
.orb-nodes{list-style:none;margin:0;padding:0}
.orb-nodes li{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(calc(360deg / var(--n) * var(--i) - 90deg)) translate(min(40vw,256px)) rotate(calc(-360deg / var(--n) * var(--i) + 90deg))}
.node{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;width:120px;text-align:center}
.node svg{width:56px;height:56px;padding:15px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--t);box-sizing:border-box;transition:transform .35s,background .3s,color .3s}
.node .nt{font-size:13.5px;font-weight:600;text-transform:capitalize;line-height:1.25}
.node.on svg,.node:hover svg{background:#00C2AA;color:#0e0220;border-color:#00C2AA;transform:scale(1.12)}
.node:focus-visible svg{outline:2px solid var(--t);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:700px){.orb{aspect-ratio:auto;width:100%}.orb-ring{display:none}.orb-core{position:relative;left:auto;top:auto;transform:none;width:100%;aspect-ratio:auto;border-radius:24px;padding:28px;margin-bottom:16px;min-height:170px}
 .orb-nodes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.orb-nodes li{position:static;transform:none}.node{width:auto}}
@media (prefers-reduced-motion:reduce){.orb-ring{animation:none}}
/* footer */
.fx{background:#0e0220;color:#d8ccf0;padding-top:clamp(56px,7vw,96px);overflow:hidden}
.fx a:hover{color:#5eead4}
.fx-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,56px)}
.fx-brand .logo .lgl{display:none!important}.fx-brand .logo .lgd{display:block!important;height:58px;width:auto}
.fx-brand p{margin:18px 0;max-width:38ch;color:#b3a6cf}
.fx-live{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;padding:8px 14px;border-radius:999px;border:1px solid #ffffff1f;color:#d8ccf0}
.fx-live .dot{width:8px;height:8px;border-radius:50%;background:#b3a6cf}.fx-live.open .dot{background:#00C2AA;box-shadow:0 0 0 4px #00C2AA33}
.fx-col{display:flex;flex-direction:column;gap:10px}
.fx-col h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#5eead4;margin:0 0 6px;font-weight:700}
.fx-col a{font-size:15.5px;color:#f3ecff;width:fit-content}
.fx-big{margin-top:clamp(40px,6vw,80px);border-top:1px solid #ffffff14;padding-top:clamp(12px,2vw,24px)}
.fw{display:flex;align-items:center;justify-content:center;font-size:clamp(64px,17vw,250px);line-height:.9;font-weight:300;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px #ffffff33;white-space:nowrap;direction:ltr;transition:color .6s}
.fx:hover .fw{color:#ffffff0f}
.fw i{width:.42em;height:.42em;background:#00C2AA;transform:rotate(45deg);margin:0 .08em;border-radius:.03em;flex:none;animation:spin 18s linear infinite}
@keyframes spin{from{transform:rotate(45deg)}to{transform:rotate(405deg)}}
.fx-bot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px 26px;font-size:13.5px;color:#9d8fbd;border-top:1px solid #ffffff14}
.fx-legal,.fx-soc{display:flex;gap:16px;flex-wrap:wrap}
.fx-top-btn{width:46px;height:46px;border-radius:50%;border:1px solid #ffffff33;display:grid;place-items:center;transition:background .3s}
.fx-top-btn i{width:10px;height:10px;border-inline-start:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg) translate(2px,2px)}
.fx-top-btn:hover{background:#00C2AA;color:#0e0220;border-color:#00C2AA}
@media (max-width:900px){.fx-top{grid-template-columns:1fr 1fr}.fx-brand{grid-column:1/-1}.mk2{grid-template-columns:1fr}.stage{min-height:300px;order:-1}}
@media (max-width:520px){.fx-top{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.fw i{animation:none}}

/* ===== round 3 home ===== */
/* loader: complete logo, zoom origin on its dot */
#ld .lg{width:min(340px,70vw);transform-origin:52.2% 32.6%}
/* latest work: taller panel again, pinned below the floating header */
.mk2{align-items:start}
.stage{aspect-ratio:5/6;min-height:0;position:sticky;top:104px}
.mk2 .mimg{display:none}
@media (max-width:900px){
  .stage{display:none}
  .mk2 .mimg{display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/3;margin:0 0 12px;background:var(--bg2)}
  .mk2 .mimg img{width:100%;height:100%;object-fit:cover;display:block}
  .mk2 .d{padding-inline-start:0}
  .mk2 .wi[aria-expanded="true"] .d{max-height:700px}
}
/* team: centred on mobile */
@media (max-width:700px){.orb-nodes{justify-items:center}.orb-nodes li{display:flex;justify-content:center;width:100%}.node{align-items:center;margin-inline:auto}.orb-head{text-align:center}}
/* FAQ: + becomes −, no tilt */
details summary::after{transform:none!important;transition:none}
details[open] summary::after{content:"−"!important;transform:none!important}
/* footer brand logo with pumping dot */
.fw{position:relative;display:block;width:min(100%,1100px);margin:0 auto;color:inherit;-webkit-text-stroke:0;font-size:0}
.fw img{width:100%;height:auto;display:block;opacity:.9}
.fw .pump{position:absolute;left:52.2%;top:32.6%;width:6.9%;aspect-ratio:1;background:#00C2AA;transform:translate(-50%,-50%) rotate(45deg);border-radius:4%;animation:pump 2.2s ease-in-out infinite;box-shadow:0 0 0 0 #00C2AA66}
@keyframes pump{0%,100%{transform:translate(-50%,-50%) rotate(45deg) scale(1);box-shadow:0 0 0 0 #00C2AA55}50%{transform:translate(-50%,-50%) rotate(45deg) scale(1.14);box-shadow:0 0 0 18px #00C2AA00}}
.fx:hover .fw{color:inherit}
.fx-soc{gap:8px}
.fx-soc a{width:40px;height:40px;border-radius:50%;border:1px solid #ffffff26;display:grid;place-items:center;color:#d8ccf0;transition:background .25s,color .25s,border-color .25s}
.fx-soc a:hover{background:#00C2AA;color:#0e0220;border-color:#00C2AA}
.fx-soc svg{width:17px;height:17px}
@media (prefers-reduced-motion:reduce){.fw .pump{animation:none}}
/* statement: scroll-lit words */
.fx-words .wd{opacity:.18;transition:opacity .45s ease}
.fx-words .wd.lit{opacity:1}
/* map section on home */
.mapsec .kmap{margin-top:8px}

/* ===== round 4 home ===== */
/* work: panel = list height, label top-right, image fills */
.mk2{align-items:stretch}
.stage{aspect-ratio:auto;position:relative;top:auto;min-height:360px;height:auto}
.stage .cs2 img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover}
.cs2 .fc{inset-inline-start:auto;inset-inline-end:18px;top:18px;bottom:auto;z-index:2}
/* CTA band: room between the two buttons */
.end .cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
/* FAQ: answers fade with the slide */
details>*:not(summary){transition:opacity .35s}
details.closing>*:not(summary){opacity:0}
/* footer logo: write-in + falling dot with ripple */
.fw .pump{display:none}
.fw img{clip-path:inset(0 0 0 0)}
.fw.play img{animation:fwwipe 1.4s cubic-bezier(.6,0,.2,1) both}
@keyframes fwwipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
.fw .drop{position:absolute;left:52.2%;top:32.6%;width:6.9%;aspect-ratio:1;background:#00C2AA;border-radius:4%;transform:translate(-50%,-50%) rotate(45deg);z-index:2}
.fw.play .drop{animation:fwdrop 1.1s cubic-bezier(.3,1.5,.5,1) 1.1s both}
@keyframes fwdrop{0%{transform:translate(-50%,-420%) rotate(225deg) scale(.6);opacity:0}55%{opacity:1}100%{transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:1}}
.fw .rip{position:absolute;left:52.2%;top:32.6%;width:6.9%;aspect-ratio:1;border:2px solid #00C2AA;border-radius:4%;transform:translate(-50%,-50%) rotate(45deg) scale(1);opacity:0;pointer-events:none}
.fw.play .rip{animation:fwrip 1.3s ease-out 1.75s both}
@keyframes fwrip{0%{opacity:.9;transform:translate(-50%,-50%) rotate(45deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(3.2)}}
.fw .drop::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent 30%,#ffffffaa 50%,transparent 70%);background-size:250% 100%;animation:fwshine 3.6s ease-in-out 3s infinite}
@keyframes fwshine{0%,60%{background-position:150% 0}100%{background-position:-60% 0}}
@media (prefers-reduced-motion:reduce){.fw img,.fw .drop,.fw .rip,.fw .drop::after{animation:none!important}}
/* footer bottom: centred under the logo */
.fx-bot{flex-direction:column;justify-content:center;text-align:center;gap:14px}
.fx-bot>*{justify-content:center}
.fx-soc,.fx-legal{justify-content:center}
/* hide the floating WhatsApp/contact button for now */
.e-floating-buttons,.e-contact-buttons,[class*="e-floating-bars"]{display:none!important}

/* ===== footer logo: halftone reveal ===== */
.fw .drop,.fw .rip{display:none!important}
.fw{position:relative;aspect-ratio:931/471;width:min(100%,1100px);margin:0 auto;cursor:crosshair}
.fw img{animation:none!important;clip-path:none!important;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.fw .halftone-reveal-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fw.ht-on img{opacity:0}

/* ===== clients + reviews ===== */
.clients{padding-block:clamp(56px,7vw,96px) clamp(40px,5vw,64px);overflow:hidden}
.cl-head{text-align:center;max-width:760px;margin:0 auto clamp(28px,4vw,44px)}
.cl-rows{display:grid;gap:18px;-webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.cl-row{overflow:hidden;direction:ltr}
.cl-track{display:flex;width:max-content;animation:clmove 70s linear infinite}
.cl-row.rev .cl-track{animation-direction:reverse;animation-duration:80s}
.cl-rows:hover .cl-track{animation-play-state:paused}
@keyframes clmove{to{transform:translateX(-50%)}}
.cl-track span{display:grid;place-items:center;height:76px;padding:0 26px;margin-inline-end:10px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.cl-track img{max-height:46px;max-width:130px;width:auto;height:auto;filter:grayscale(1);opacity:.62;transition:filter .35s,opacity .35s,transform .35s}
.cl-track span:hover img{filter:none;opacity:1;transform:scale(1.08)}
:root[data-theme="dark"] .cl-track span{background:#f6f2ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cl-track span{background:#f6f2ff}}
.reviews2{padding-block:clamp(64px,8vw,110px);overflow:hidden}
.rv2-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,48px)}
.rv2-score{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rv2-score>b{font-size:clamp(56px,6vw,84px);font-weight:300;line-height:1;letter-spacing:-.04em}
.rv2-score>span{display:flex;flex-direction:column;gap:2px}.rv2-score small{color:var(--muted);font-size:13px}
.rv-stars{color:#f5b301;letter-spacing:2px;font-size:16px}
.rv2-deck{-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rv2-track{display:flex;gap:20px;width:max-content;padding:18px 0 28px;animation:clmove 60s linear infinite;direction:ltr}
.rv2-deck:hover .rv2-track{animation-play-state:paused}
.rv-card{margin:0;width:340px;flex:none;display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:0 18px 40px -30px #1a043866;transform:rotate(var(--r));transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s}
.rv-card:hover{transform:rotate(0) translateY(-6px);border-color:var(--t)}
.rv-card blockquote{margin:0;font-size:16px;line-height:1.6;flex:1;unicode-bidi:plaintext;text-align:start}
.rv-card blockquote p{margin:0;white-space:pre-line}
.rv-card figcaption{display:flex;align-items:center;gap:12px;direction:ltr}
html[dir="rtl"] .rv-card figcaption{direction:rtl}
.av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#5200AE,#00C2AA);color:#fff;font-weight:700;flex:none}
.rv-card figcaption b{display:block;text-transform:capitalize}.rv-card figcaption small{color:var(--muted);font-size:12.5px}
@media (prefers-reduced-motion:reduce){.cl-track,.rv2-track{animation:none}.cl-row,.rv2-deck{overflow-x:auto}}

/* clients: no cards; dark mode shows white silhouettes so dark logos stay visible */
.cl-track span{background:none!important;border:0!important;border-radius:0;height:64px;padding:0 30px;margin:0}
:root[data-theme="dark"] .cl-track img{filter:grayscale(1) brightness(0) invert(1);opacity:.55}
:root[data-theme="dark"] .cl-track span:hover img{filter:grayscale(1) brightness(0) invert(1);opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cl-track img{filter:grayscale(1) brightness(0) invert(1);opacity:.55}:root:not([data-theme="light"]) .cl-track span:hover img{filter:grayscale(1) brightness(0) invert(1);opacity:1}}

/* ===== clients: LogoLoop (React Bits) style ===== */
.cl-rows{display:none}
.logoloop{--logoloop-gap:64px;--logoloop-logoHeight:48px;position:relative;overflow:hidden;overflow:clip;padding:18px 0;direction:ltr;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logoloop__track{display:flex;width:max-content;will-change:transform;user-select:none}
.logoloop__list{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.logoloop__item{flex:0 0 auto;margin-right:var(--logoloop-gap);line-height:1}
.logoloop__item img{display:block;width:auto;height:var(--logoloop-logoHeight);max-width:180px;object-fit:contain;pointer-events:none;-webkit-user-drag:none;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.logoloop--scale-hover .logoloop__item:hover img{transform:scale(1.2)}
.logoloop__item img{filter:none!important;opacity:1!important}
:root[data-theme="dark"] .logoloop__item img{filter:brightness(0) invert(1)!important;opacity:.85!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logoloop__item img{filter:brightness(0) invert(1)!important;opacity:.85!important}}
@media (max-width:700px){.logoloop{--logoloop-gap:40px;--logoloop-logoHeight:36px}}

:root[data-theme="dark"] .logoloop__item.keep img{filter:none!important;opacity:1!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logoloop__item.keep img{filter:none!important;opacity:1!important}}

/* ===== loops: draggable + word marquee with logo diamond ===== */
.logoloop{cursor:grab;touch-action:pan-y}
.logoloop[data-dragging]{cursor:grabbing}
.logoloop[data-dragging] *{cursor:grabbing}
.mq{display:none}
.mqloop{--logoloop-gap:34px;padding:22px 0;border-block:1px solid var(--line);-webkit-mask:none;mask:none}
.mqloop .mq-word{font-size:clamp(22px,2.6vw,36px);letter-spacing:-.02em;white-space:nowrap;font-weight:500}
.mqloop .mq-dot{display:grid;place-items:center}
.mqloop .mq-dot i{display:block;width:14px;height:14px;background:#00C2AA;transform:rotate(45deg);border-radius:2px;box-shadow:0 0 0 5px #00C2AA1f}
.mqloop .logoloop__item img{display:none}

/* contact form wrapper (live Elementor form kept as-is) */
.os-formwrap{max-width:1240px;margin:0 auto clamp(40px,5vw,72px)!important;padding-inline:max(20px,env(safe-area-inset-left,0px))!important}
.os-formwrap>.e-con-inner{border-radius:28px;background:var(--card);border:1px solid var(--line);padding:clamp(24px,3.4vw,48px)}
.glr .gal{margin-top:20px}.glr .gal figure img{width:100%;height:100%;object-fit:cover}
.pf{padding-top:clamp(40px,5vw,64px)}.flt sup{font-size:11px;opacity:.6}
.blg{padding-top:clamp(40px,5vw,64px)}.bc small{display:block;margin:12px 8px 0}

/* ===== review fixes 11 Nov ===== */
/* work grid: filter hide must win; images always fill; no-image fallback */
.pg .pj.hide{display:none!important}
.pg .pj .im{position:relative;background:linear-gradient(150deg,#1a0438,#3b0a7a 60%,#0d5f58)}
.pg .pj .im img{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none;object-fit:cover;display:block}
.pg .pj .im:empty::after{content:attr(data-t);position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:28px;font-weight:300;letter-spacing:-.02em;padding:20px;text-align:center}
/* hero h1 with a line break: first line reads as the label */
.pt br+*{display:block}
/* about-type text sections */
.ps .prose3 p:first-child{font-size:18px}
/* blog featured card */
.blg .feat{grid-template-columns:1fr 1.1fr;align-items:stretch}
.blg .fim{aspect-ratio:auto;min-height:360px}
.blg .ftx h2{font-size:clamp(26px,2.6vw,38px)}
/* article page */
.artw{padding-top:clamp(40px,5vw,64px)}
.artb h2{scroll-margin-top:110px}
.artb ul.ul2{margin:0 0 18px}
.artb details{border-bottom:1px solid var(--line);padding:4px 0}
/* project gallery: tidy grid */
.glr .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.glr .gal figure{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/5;background:var(--bg2)}
.glr .gal figure.g1{grid-column:auto}
.glr .cover{aspect-ratio:16/8;max-height:560px}
.glr .cover img{object-fit:cover}
@media (max-width:700px){.glr .gal{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.toc .k{cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border:1px solid var(--line);border-radius:14px}.toc .k::after{content:"+";font-size:18px}.toc.open .k::after{content:"−"}.toc nav{display:none;margin-top:10px}.toc.open nav{display:flex}}

/* ===== fixes 11 Nov (round 2) ===== */
/* burger: three lines -> X */
.burger{display:none;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--fg);color:var(--bg);border:0;padding:0}
.burger .bl{position:relative;width:18px;height:12px;display:block}
.burger .bl i{position:absolute;left:0;width:100%;height:1.8px;border-radius:2px;background:currentColor;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s,top .35s}
.burger .bl i:nth-child(1){top:0}.burger .bl i:nth-child(2){top:5px;width:70%}.burger .bl i:nth-child(3){top:10px}
[dir="rtl"] .burger .bl i:nth-child(2){left:auto;right:0}
.burger.x .bl i:nth-child(1){top:5px;transform:rotate(45deg)}.burger.x .bl i:nth-child(2){opacity:0}.burger.x .bl i:nth-child(3){top:5px;transform:rotate(-45deg)}
@media (max-width:1100px){.hd .burger{display:grid}}
.mini .burger2{display:none;width:52px;height:52px;flex:none}
@media (max-width:1100px){.mini .burger2{display:grid}.mini .btn2{display:none}}
/* drawer: slide down + staggered links */
.drawer{transform:translateY(-100%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s;z-index:85}
.drawer.in{transform:none;opacity:1}
.drawer nav a{opacity:0;transform:translateY(-12px);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.drawer.in nav a{opacity:1;transform:none}
.drawer.in nav a:nth-child(2){transition-delay:.05s}.drawer.in nav a:nth-child(3){transition-delay:.1s}.drawer.in nav a:nth-child(4){transition-delay:.15s}.drawer.in nav a:nth-child(5){transition-delay:.2s}.drawer.in nav a:nth-child(6){transition-delay:.25s}
body.dr-open .mini{opacity:0!important;visibility:hidden;pointer-events:none;transition:none}
@media (prefers-reduced-motion:reduce){.drawer,.drawer nav a{transition:none}}
/* floating WhatsApp (left) */
.wa-float{position:fixed;left:max(18px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:70;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 14px 30px -12px #0008;transition:transform .3s}
.wa-float:hover{transform:scale(1.08)}.wa-float svg{width:28px;height:28px}
body.dr-open .wa-float{display:none}
/* back to top: real arrow, same in both languages */
.fx-top-btn svg{display:block}.fx-top-btn i{display:none}
/* footer: 5 columns */
.fx-top{grid-template-columns:1.5fr repeat(4,1fr)}
@media (max-width:1100px){.fx-top{grid-template-columns:1fr 1fr 1fr}.fx-brand{grid-column:1/-1}}
@media (max-width:600px){.fx-top{grid-template-columns:1fr 1fr}}
/* reviews: draggable loop */
.rv2-deck{display:none}
.rvloop{--logoloop-gap:20px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);padding:18px 0 28px}
.rvloop .logoloop__list{align-items:stretch}
.rvloop .rv-card{margin-right:20px}
/* Arabic hero: more air between the three big lines */
html[dir="rtl"] .home-hero .big{line-height:1.45}
html[dir="rtl"] .home-hero .big .ln{margin-bottom:.12em}
/* blog: featured card stacks on phones */
@media (max-width:900px){.blg .feat{grid-template-columns:1fr}.blg .fim{min-height:0;aspect-ratio:4/5}}
/* contact form (Elementor form styled to the design) */
.os-form2{display:grid!important;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,4vw,64px)!important;align-items:start;max-width:1240px;margin:0 auto clamp(48px,6vw,80px)!important;padding:clamp(26px,3.6vw,52px)!important;border-radius:28px;background:var(--card);border:1px solid var(--line);width:calc(100% - 40px)!important}
.os-form2>.e-con-inner{display:contents}
.os-form2 .elementor-widget-os-block .fs-k{margin-bottom:12px}
.os-form2 .fs h2{font-size:clamp(26px,2.6vw,38px);margin:0 0 14px}.os-form2 .fs p{color:var(--muted);margin:0 0 10px}
.os-form2 .fs ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}.os-form2 .fs li{display:flex;gap:10px;align-items:center;color:var(--fg)}.os-form2 .fs li::before{content:"";width:8px;height:8px;background:#00C2AA;transform:rotate(45deg);flex:none}
.os-form2 .elementor-form .elementor-field-group{margin-bottom:22px;padding:0!important}
.os-form2 .elementor-field-label{color:var(--muted)!important;font:500 13px var(--f)!important;margin-bottom:6px!important}
.os-form2 .elementor-field-textual{background:transparent!important;border:0!important;border-bottom:1px solid color-mix(in srgb,var(--fg) 28%,transparent)!important;border-radius:0!important;color:var(--fg)!important;font:400 17px var(--f)!important;padding:10px 0!important;min-height:0!important}
.os-form2 .elementor-field-textual:focus{border-bottom-color:var(--t)!important;box-shadow:none!important;outline:0}
.os-form2 textarea.elementor-field-textual{min-height:110px!important;resize:vertical}
.os-form2 .elementor-button{background:var(--btn)!important;color:var(--btn-fg)!important;border-radius:999px!important;padding:16px 30px!important;font:700 16px var(--f)!important;width:auto!important}
.os-form2 .elementor-message{color:var(--t)!important}
.os-form2 .elementor-form *{color:inherit}
@media (max-width:900px){.os-form2{grid-template-columns:1fr;padding:24px 20px!important;width:calc(100% - 32px)!important}}
.os-form2{border-radius:28px!important;overflow:hidden}
.os-form2 .elementor-field-label{font-size:14px!important}
.os-form2 .elementor-field-group{margin-bottom:26px!important}
html[dir="rtl"] .big .ar{transform:scaleX(-1)}
/* form card: same column as the cards above it, at every screen width */
.os-form2.e-con{--width:auto;--content-width:1200px;max-width:1200px!important;width:calc(100% - 40px)!important;margin-inline:auto!important;box-sizing:border-box}
@media (max-width:900px){.os-form2.e-con{width:calc(100% - 32px)!important}}
/* services hub: per-service line icons (purple strokes follow theme colour) */
.gl .sr .si2{flex:none;width:58px;height:46px;display:grid;place-items:center;color:var(--v)}
.gl .sr .si2 svg{display:block;width:100%;height:100%;max-height:46px;overflow:visible}
.gl .sr>div{flex:1;min-width:0}
@media (max-width:600px){.gl .sr{gap:14px}.gl .sr .si2{width:40px;height:34px;align-self:flex-start;margin-top:4px}}
/* home service cards: same per-service icons, fixed 40px box so no icon spills into the next row */
.sv4 .sl a{display:flex;align-items:flex-start;gap:18px;padding:16px 0}
.sv4 .sl .tx{display:block;flex:1;min-width:0}
.sv4 .sl a>.si2{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;margin-top:2px;color:var(--v)}
.sv4 .sl a>.si2 svg{display:block;width:40px;height:40px;max-width:40px;max-height:40px;overflow:visible;transform:none!important;color:inherit}
.sv4 .sl .tx>span{margin-top:4px}
.gl .sr .si2{align-self:flex-start;margin-top:4px}
/* sticky header: light/dark toggle, same pill look as the nav */
.mini .tg2{width:60px;height:60px;font-size:18px;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 34px -16px #1a043855}
@media (max-width:1100px){.mini .tg2{width:52px;height:52px}}
.rvloop{--logoloop-gap:0px}.rvloop .logoloop__list{gap:0!important}.rvloop .rv-card{margin:0 40px 0 0!important}[dir="rtl"] .rvloop .rv-card{margin:0 0 0 40px!important}@media (max-width:600px){.rvloop .rv-card{margin-right:24px!important}[dir="rtl"] .rvloop .rv-card{margin-left:24px!important;margin-right:0!important}}
/* loader: place the dot/hole with transform only (no left/top/margin), so setting its position from JS is not a layout shift (CLS) */
#ld .hole,#ld .dot{left:0!important;top:0!important;margin:0!important;translate:calc(var(--dx) - var(--ds)/2) calc(var(--dy) - var(--ds)/2)}
/* loader: until JS has measured the logo, the overlay is a flat background and the hole/dot are hidden (they appear, never move = no CLS) */
#ld:not(.rdy){background:var(--ldbg)}
#ld:not(.rdy) .hole,#ld:not(.rdy) .dot{visibility:hidden}
#ld .hole,#ld .dot{width:var(--ds,0px);height:var(--ds,0px)}
/* mobile speed: hero headline shows at once (no staggered rise), it is the LCP element */
@media (max-width:767px){.js .big .ln{animation:none}}