/* ==========================================================================
   ZaSite Core — design system + widgets
   Rule: CSS never hides content (no opacity:0 on animated elements).
   GSAP sets every initial state, so the site stays readable if JS fails.
   ========================================================================== */

:root {
	--zs-ink: #101828;
	--zs-ink-2: #172236;
	--zs-ink-3: #1f2c44;
	--zs-lime: #C5F45A;
	--zs-lime-2: #b2e33f;
	--zs-paper: #F7F8F2;
	--zs-paper-2: #ECEEE4;
	--zs-muted-dark: #98A2B3;
	--zs-muted-light: #5B6474;
	--zs-radius: 28px;
	--zs-radius-sm: 14px;
	--zs-gutter: clamp(16px, 4vw, 56px);
	--zs-max: 1440px;
	--zs-header-h: 84px;
	--zs-ease: cubic-bezier(.22, 1, .36, 1);
	--zs-font: "Plus Jakarta Sans", "Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif;
	--zs-font-ar: "Alexandria", "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ---------- Base ---------- */
body.zs-site {
	background: var(--zs-ink);
	color: var(--zs-paper);
	font-family: var(--zs-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
body.zs-site.rtl,
body.zs-lang-ar,
.zs-site :lang(ar) { font-family: var(--zs-font-ar); }

body.zs-site::after { /* film grain */
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9990;
	opacity: .045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.zs-site ::selection { background: var(--zs-lime); color: var(--zs-ink); }
.zs-site a { color: inherit; text-decoration: none; }
.zs-site img { max-width: 100%; height: auto; display: block; }

/* Elementor wrappers: let ZaSite sections run edge to edge */
.elementor-widget[class*="elementor-widget-zs-"] { width: 100%; }
.elementor-widget[class*="elementor-widget-zs-"] > .elementor-widget-container { margin: 0; padding: 0; }
.zs-site .site-main.page-content,
.zs-site .page-content { margin: 0; }

.zs-wrap {
	width: 100%;
	max-width: var(--zs-max);
	margin-inline: auto;
	padding-inline: var(--zs-gutter);
	box-sizing: border-box;
}

/* ---------- Themes ---------- */
.zs-sec {
	--zs-pad-y: clamp(88px, 12vw, 180px);
	position: relative;
	padding-block: var(--zs-pad-y);
	background: var(--bg);
	color: var(--fg);
	isolation: isolate;
	overflow-x: clip;
}
html:has(body.zs-site) { overflow-x: clip; }
.zs-theme-dark  { --bg: var(--zs-ink);   --fg: var(--zs-paper); --muted: var(--zs-muted-dark);  --line: rgba(247,248,242,.14); --surface: var(--zs-ink-2); --zs-accent: var(--zs-lime); }
.zs-theme-light { --bg: var(--zs-paper); --fg: var(--zs-ink);   --muted: var(--zs-muted-light); --line: rgba(16,24,40,.12);   --surface: #fff;           --zs-accent: var(--zs-ink); }
.zs-theme-lime  { --bg: var(--zs-lime);  --fg: var(--zs-ink);   --muted: rgba(16,24,40,.68);    --line: rgba(16,24,40,.18);   --surface: var(--zs-lime-2); --zs-accent: var(--zs-ink); }

/* ---------- Typography ---------- */
.zs-title {
	font-family: inherit;
	font-weight: 800;
	font-size: clamp(2.5rem, 6.2vw, 6.4rem);
	line-height: .98;
	letter-spacing: -.035em;
	margin: 0;
	color: inherit;
}
:lang(ar) .zs-title,
.rtl .zs-title { letter-spacing: 0; line-height: 1.28; font-weight: 800; }

.zs-line { display: block; overflow: hidden; padding-block: .06em .1em; margin-block: -.06em -.1em; }
:lang(ar) .zs-line, .rtl .zs-line { padding-block: .12em .18em; margin-block: -.12em -.18em; }
.zs-w { display: inline-block; }
.zs-wi { display: inline-block; will-change: transform; }

.zs-title em,
.zs-hl { font-style: normal; color: var(--zs-lime); }
.zs-theme-light .zs-title em,
.zs-theme-light .zs-statement__text em {
	color: var(--zs-ink);
	background: linear-gradient(transparent 58%, var(--zs-lime) 58%, var(--zs-lime) 92%, transparent 92%);
}
.zs-theme-lime .zs-title em,
.zs-theme-lime .zs-statement__text em { color: var(--zs-ink); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .12em; }

.zs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	margin: 0 0 clamp(18px, 2.4vw, 32px);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--muted, currentColor);
}
:lang(ar) .zs-eyebrow, .rtl .zs-eyebrow { letter-spacing: 0; font-size: .95rem; text-transform: none; }
.zs-eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zs-accent, var(--zs-lime)); flex: none; }
.zs-eyebrow__dot.is-live { background: var(--zs-lime); box-shadow: 0 0 0 0 rgba(197,244,90,.6); animation: zs-pulse 2s infinite; }
@keyframes zs-pulse { 70% { box-shadow: 0 0 0 10px rgba(197,244,90,0); } 100% { box-shadow: 0 0 0 0 rgba(197,244,90,0); } }

.zs-intro { max-width: 46ch; margin: clamp(18px, 2vw, 28px) 0 0; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.6; color: var(--muted); }
.zs-head { margin-bottom: clamp(48px, 7vw, 110px); }

.zs-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.zs-tags li { font-size: .8rem; font-weight: 600; padding: .5em 1em; border-radius: 999px; border: 1px solid currentColor; opacity: .8; line-height: 1; }

/* ---------- Logo ---------- */
.zs-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--zs-paper); flex: none; }
.zs-logo__mark { width: 38px; height: auto; color: currentColor; overflow: visible; }
.zs-logo__text { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: 1.55rem; letter-spacing: -.04em; line-height: 1; }
.zs-logo__i { position: relative; display: inline-block; }
.zs-logo__i i { position: absolute; left: 50%; top: -.06em; width: .27em; height: .27em; border-radius: 50%; background: var(--zs-lime); transform: translateX(-50%); }
.zs-logo--img img { max-height: 44px; width: auto; }
.zs-mark { overflow: visible; }
.zs-mark__mid { fill: var(--zs-mark-mid, var(--zs-lime)); }

/* ---------- Buttons ---------- */
.zs-btn {
	--b-bg: transparent; --b-fg: currentColor; --b-bd: currentColor;
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .7em;
	padding: 1.05em 1.7em;
	border-radius: 999px;
	border: 1.5px solid var(--b-bd);
	background: var(--b-bg);
	color: var(--b-fg);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	overflow: hidden;
	transition: color .4s var(--zs-ease), border-color .4s var(--zs-ease), background .4s var(--zs-ease);
	will-change: transform;
}
.zs-btn > * { position: relative; z-index: 1; }
.zs-btn::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: var(--zs-paper);
	transform: translateY(101%);
	transition: transform .5s var(--zs-ease);
}
.zs-btn:hover::before { transform: translateY(0); }
.zs-btn:hover { color: var(--zs-ink); border-color: var(--zs-paper); }
.zs-btn--lime { --b-bg: var(--zs-lime); --b-fg: var(--zs-ink); --b-bd: var(--zs-lime); }
.zs-btn--ghost { --b-bd: color-mix(in srgb, currentColor 40%, transparent); }
.zs-theme-light .zs-btn::before, .zs-theme-lime .zs-btn::before { background: var(--zs-ink); }
.zs-theme-light .zs-btn:hover, .zs-theme-lime .zs-btn:hover { color: var(--zs-paper); border-color: var(--zs-ink); }
.zs-btn--sm { padding: .8em 1.25em; font-size: .9rem; }
.zs-arrow { width: 1.1em; height: 1.1em; flex: none; transition: transform .4s var(--zs-ease); }
.zs-btn:hover .zs-arrow { transform: translateX(4px); }
[dir="rtl"] .zs-arrow, .rtl .zs-arrow { transform: scaleX(-1); }
[dir="rtl"] .zs-btn:hover .zs-arrow, .rtl .zs-btn:hover .zs-arrow { transform: scaleX(-1) translateX(4px); }

/* Rolling link text */
[data-zs-roll] { display: inline-flex; overflow: hidden; }
[data-zs-roll] > span { position: relative; display: inline-block; transition: transform .45s var(--zs-ease); }
[data-zs-roll] > span::after { content: attr(data-text); position: absolute; left: 0; right: 0; top: 100%; }
[data-zs-roll]:hover > span { transform: translateY(-100%); }

/* ---------- Header ---------- */
.zs-site-header { position: relative; z-index: 1000; }
.zs-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 1000;
	padding: 14px var(--zs-gutter);
	transition: transform .55s var(--zs-ease);
}
.admin-bar .zs-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .zs-header { top: 46px; } }
.zs-header__bar {
	max-width: calc(var(--zs-max) - 2 * var(--zs-gutter));
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 10px 10px 10px 22px;
	border-radius: 999px;
	border: 1px solid transparent;
	transition: background .4s, border-color .4s, backdrop-filter .4s;
	color: var(--zs-paper);
}
[dir="rtl"] .zs-header__bar, .rtl .zs-header__bar { padding: 10px 22px 10px 10px; }
.zs-header.is-scrolled .zs-header__bar {
	background: rgba(16, 24, 40, .72);
	border-color: rgba(247, 248, 242, .1);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	backdrop-filter: blur(18px) saturate(1.4);
}
.zs-header.is-hidden { transform: translateY(-130%); }
.zs-nav ul { display: flex; gap: clamp(18px, 2.4vw, 40px); list-style: none; margin: 0; padding: 0; }
.zs-nav a { font-weight: 600; font-size: .95rem; color: var(--zs-paper); opacity: .85; transition: opacity .3s; }
.zs-nav a:hover { opacity: 1; }
.zs-header__actions { display: flex; align-items: center; gap: 12px; }
.zs-lang { display: flex; gap: 4px; }
.zs-lang a { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; font-size: .85rem; border: 1px solid rgba(247,248,242,.18); transition: background .3s, color .3s; }
.zs-lang a.is-active { display: none; }
.zs-lang a:hover { background: var(--zs-paper); color: var(--zs-ink); }

.zs-burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--zs-paper); cursor: pointer; position: relative; padding: 0; }
.zs-burger span { position: absolute; left: 14px; right: 14px; height: 2px; background: var(--zs-ink); transition: transform .45s var(--zs-ease), top .45s var(--zs-ease); }
.zs-burger span:first-child { top: 19px; }
.zs-burger span:last-child { top: 26px; }
.zs-header.menu-open .zs-burger span:first-child { top: 22px; transform: rotate(45deg); }
.zs-header.menu-open .zs-burger span:last-child { top: 22px; transform: rotate(-45deg); }

.zs-menu {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--zs-ink);
	color: var(--zs-paper);
	padding: calc(var(--zs-header-h) + 40px) var(--zs-gutter) 40px;
	display: flex;
	flex-direction: column;
	clip-path: circle(0% at 90% 40px);
	transition: clip-path .8s var(--zs-ease);
	overflow-y: auto;
}
.zs-menu[hidden] { display: none; }
[dir="rtl"] .zs-menu, .rtl .zs-menu { clip-path: circle(0% at 10% 40px); }
.zs-header.menu-open .zs-menu { clip-path: circle(150% at 90% 40px); }
.zs-menu__inner { display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 40px; }
.zs-menu__list { list-style: none; margin: 0; padding: 0; }
.zs-menu__list a { display: flex; align-items: baseline; gap: 14px; font-size: clamp(2.6rem, 11vw, 5rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.zs-menu__list small { font-size: .9rem; color: var(--zs-lime); font-weight: 600; letter-spacing: 0; }
.zs-menu__foot { display: flex; flex-direction: column; gap: 14px; color: var(--zs-muted-dark); }
.zs-menu__foot a { color: var(--zs-paper); font-weight: 600; }

@media (max-width: 1024px) {
	.zs-nav, .zs-header__actions > .zs-lang, .zs-header__actions > .zs-btn { display: none; }
	.zs-burger { display: block; }
}

/* ---------- Hero ---------- */
.zs-hero {
	--zs-pad-y: 0px;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-top: calc(var(--zs-header-h) + 40px);
	padding-bottom: 90px;
}
.zs-hero__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); pointer-events: none; z-index: -1; }
.zs-hero__grid i { border-inline-start: 1px solid rgba(247,248,242,.05); }
.zs-hero__glow {
	--mx: 70%; --my: 40%;
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(600px circle at var(--mx) var(--my), rgba(197,244,90,.14), transparent 60%);
}
.zs-hero__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: clamp(24px, 4vw, 80px); }
.zs-hero__title { font-size: clamp(2.9rem, 7.4vw, 7.6rem); }
:lang(ar) .zs-hero__title, .rtl .zs-hero__title { font-size: clamp(2.6rem, 6vw, 6.2rem); line-height: 1.2; }
.zs-hero__sub { max-width: 44ch; margin: clamp(22px, 2.6vw, 36px) 0 0; font-size: clamp(1.05rem, 1.35vw, 1.3rem); line-height: 1.6; color: var(--zs-muted-dark); }
.zs-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 44px); }
.zs-hero__visual { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.zs-hero__markwrap { width: 82%; perspective: 1200px; }
.zs-hero__mark { overflow: visible; width: 100%; height: auto; color: var(--zs-paper); transform-style: preserve-3d; filter: drop-shadow(0 40px 80px rgba(0,0,0,.35)); }
.zs-chip {
	position: absolute;
	padding: .6em 1.1em;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--zs-paper);
	background: rgba(23, 34, 54, .7);
	border: 1px solid rgba(247,248,242,.16);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	white-space: nowrap;
	will-change: transform;
}
.zs-chip--0 { top: 4%;  inset-inline-start: 6%; }
.zs-chip--1 { top: 14%; inset-inline-end: 0; background: var(--zs-lime); color: var(--zs-ink); border-color: var(--zs-lime); }
.zs-chip--2 { top: 46%; inset-inline-start: -6%; }
.zs-chip--3 { bottom: 18%; inset-inline-end: -4%; }
.zs-chip--4 { bottom: 2%; inset-inline-start: 18%; background: var(--zs-lime); color: var(--zs-ink); border-color: var(--zs-lime); }
.zs-chip--5 { top: 64%; inset-inline-end: 22%; }
.zs-hero__scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--zs-muted-dark); }
.zs-hero__scroll i { width: 1px; height: 54px; background: rgba(247,248,242,.2); position: relative; overflow: hidden; }
.zs-hero__scroll i::after { content: ""; position: absolute; left: 0; width: 1px; height: 40%; background: var(--zs-lime); animation: zs-scrollhint 1.8s var(--zs-ease) infinite; }
@keyframes zs-scrollhint { from { top: -40%; } to { top: 100%; } }
.zs-hero__wipe { position: absolute; inset: 0; background: var(--zs-lime); transform: scaleY(0); transform-origin: bottom; pointer-events: none; z-index: 2; }

@media (max-width: 900px) {
	.zs-hero__inner { grid-template-columns: 1fr; }
	.zs-hero__visual { order: -1; width: min(70vw, 360px); margin-inline: auto; }
	.zs-hero { padding-top: calc(var(--zs-header-h) + 16px); }
	.zs-chip { font-size: .72rem; }
	.zs-hero__scroll { display: none; }
}

/* ---------- Marquee ---------- */
.zs-marquee { --zs-pad-y: clamp(22px, 3.4vw, 54px); overflow: hidden; --zs-mark-mid: var(--zs-paper); }
.zs-theme-dark.zs-marquee { --zs-mark-mid: var(--zs-lime); }
.zs-marquee.is-tilted { transform: rotate(-2.5deg) scale(1.05); margin-block: 4vw; }
.zs-marquee__row { direction: ltr; overflow: hidden; display: flex; }
.zs-marquee__row + .zs-marquee__row { margin-top: clamp(4px, 1vw, 14px); }
.zs-marquee__track { display: flex; width: max-content; will-change: transform; }
.zs-marquee__group { display: flex; align-items: center; flex: none; gap: clamp(20px, 3vw, 48px); padding-inline-end: clamp(20px, 3vw, 48px); }
.zs-marquee__item { font-size: clamp(2.6rem, 7.4vw, 7.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; white-space: nowrap; }
.zs-marquee__row[data-dir="1"] .zs-marquee__item { color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
:lang(ar) .zs-marquee__item { letter-spacing: 0; }
.zs-marquee__sep { height: .55em; width: auto; font-size: clamp(2.6rem, 7.4vw, 7.6rem); color: var(--fg); flex: none; }
/* No-JS fallback: CSS loop. JS replaces it with a velocity-aware loop. */
.zs-marquee__track { animation: zs-marq 40s linear infinite; }
.zs-marquee__row[data-dir="1"] .zs-marquee__track { animation-direction: reverse; }
.zs-js .zs-marquee__track { animation: none; }
@keyframes zs-marq { to { transform: translateX(-50%); } }

/* ---------- Statement ---------- */
.zs-statement__text { font-size: clamp(1.9rem, 4.3vw, 4.5rem); font-weight: 700; line-height: 1.16; letter-spacing: -.025em; margin: 0; max-width: 22ch; max-width: 26ch; }
:lang(ar) .zs-statement__text { letter-spacing: 0; line-height: 1.5; }
.zs-statement__text em { font-style: normal; color: var(--zs-lime); }
.zs-sw { display: inline; }
.zs-statement__foot { display: grid; grid-template-columns: auto minmax(0, 32ch) 1fr; gap: clamp(20px, 3vw, 48px); align-items: start; margin-top: clamp(48px, 6vw, 96px); padding-top: 28px; border-top: 1px solid var(--line); }
.zs-statement__foot p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--muted); }
.zs-statement__mark { width: 64px; color: var(--fg); }
.zs-statement__sign { justify-self: end; font-weight: 700; color: var(--fg) !important; }
@media (max-width: 700px) { .zs-statement__foot { grid-template-columns: 1fr; } .zs-statement__sign { justify-self: start; } }

/* ---------- Services: sticky stacked cards ---------- */
.zs-stack { display: flex; flex-direction: column; gap: 4vh; }
.zs-card {
	position: sticky;
	top: calc(var(--zs-header-h) + 24px + var(--i) * 14px);
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
	grid-template-areas: "top body" "top media";
	gap: clamp(24px, 4vw, 64px);
	min-height: min(68vh, 620px);
	padding: clamp(28px, 4.4vw, 64px);
	border-radius: var(--zs-radius);
	box-sizing: border-box;
	transform-origin: center top;
	will-change: transform;
	box-shadow: 0 -20px 60px rgba(0,0,0,.18);
	overflow: hidden;
}
.zs-card--0 { background: var(--zs-ink-2); color: var(--zs-paper); --c-muted: var(--zs-muted-dark); --zs-mark-mid: var(--zs-lime); border: 1px solid rgba(247,248,242,.08); }
.zs-card--1 { background: var(--zs-lime); color: var(--zs-ink); --c-muted: rgba(16,24,40,.72); --zs-mark-mid: var(--zs-paper); }
.zs-card--2 { background: var(--zs-paper); color: var(--zs-ink); --c-muted: var(--zs-muted-light); --zs-mark-mid: var(--zs-lime); }
.zs-card__top { grid-area: top; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.zs-card__num { font-size: clamp(4rem, 10vw, 9rem); font-weight: 800; line-height: .85; letter-spacing: -.05em; }
.zs-card__num small { font-size: .2em; letter-spacing: 0; opacity: .5; margin-inline-start: 6px; vertical-align: top; }
.zs-card__icon { width: clamp(56px, 7vw, 96px); height: auto; font-size: clamp(40px, 5vw, 64px); color: currentColor; }
.zs-card__icon svg { width: 1em; height: 1em; fill: currentColor; }
.zs-card__body { grid-area: body; align-self: end; }
.zs-card__title { font-size: clamp(2rem, 4.4vw, 4.4rem); font-weight: 800; line-height: 1; letter-spacing: -.03em; margin: 0 0 18px; color: inherit; }
:lang(ar) .zs-card__title { letter-spacing: 0; line-height: 1.3; }
.zs-card__desc { font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.6; color: var(--c-muted); max-width: 48ch; margin: 0; }
.zs-card__link { display: inline-flex; align-items: center; gap: .6em; margin-top: 26px; font-weight: 700; border-bottom: 2px solid currentColor; padding-bottom: 4px; }
.zs-card__media { grid-area: media; margin: 0; border-radius: var(--zs-radius-sm); overflow: hidden; aspect-ratio: 16/9; }
.zs-card__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
	.zs-card { grid-template-columns: 1fr; grid-template-areas: "top" "body" "media"; min-height: 0; top: calc(var(--zs-header-h) + 8px + var(--i) * 10px); }
	.zs-card__top { flex-direction: row; align-items: center; }
	.zs-card__num { font-size: 3.4rem; }
}

/* ---------- Work: horizontal scroll ---------- */
.zs-work { --zs-pad-y: 0px; overflow: hidden; }
.zs-work__pin { padding-block: clamp(88px, 11vw, 160px); }
.zs-work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.zs-work__head .zs-head { margin-bottom: clamp(36px, 5vw, 72px); }
.zs-work__progress { flex: 0 0 min(30vw, 320px); height: 3px; background: var(--line); border-radius: 3px; margin-bottom: clamp(48px, 6vw, 90px); overflow: hidden; }
.zs-work__progress span { display: block; height: 100%; width: 100%; background: var(--zs-lime); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .zs-work__progress span, .rtl .zs-work__progress span { transform-origin: right; }
.zs-theme-light .zs-work__progress span { background: var(--zs-ink); }
.zs-work__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.zs-work__viewport::-webkit-scrollbar { display: none; }
.zs-work.is-pinned .zs-work__viewport { overflow: visible; scroll-snap-type: none; }
.zs-work__track {
	list-style: none;
	margin: 0;
	padding: 0 var(--zs-gutter);
	padding-inline-start: max(var(--zs-gutter), calc((100vw - var(--zs-max)) / 2 + var(--zs-gutter)));
	display: flex;
	gap: clamp(18px, 2.4vw, 40px);
	width: max-content;
	align-items: flex-start;
	will-change: transform;
}
.zs-proj { width: clamp(290px, 32vw, 500px); flex: none; scroll-snap-align: start; }
.zs-proj:nth-child(even) { margin-top: clamp(0px, 7vh, 80px); }
.zs-proj__inner { display: block; color: inherit; }
.zs-proj__media { position: relative; isolation: isolate; margin: 0 0 22px; border-radius: var(--zs-radius); overflow: hidden; aspect-ratio: 4/4.6; background: var(--cover, var(--zs-ink)); }
.zs-proj__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); will-change: transform; transition: filter .6s; }
.zs-proj__cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(22px, 2.6vw, 36px); color: var(--zs-paper); --zs-mark-mid: var(--zs-lime); }
.zs-proj__cover > span { font-size: clamp(2.2rem, 3.8vw, 3.6rem); font-weight: 800; line-height: .95; letter-spacing: -.04em; will-change: transform; }
:lang(ar) .zs-proj__cover > span { letter-spacing: 0; line-height: 1.25; }
.zs-proj__mark { width: 42%; align-self: flex-end; opacity: .9; will-change: transform; transition: transform .8s var(--zs-ease); }
.zs-proj__inner:hover .zs-proj__mark { transform: rotate(-12deg) scale(1.08); }
.zs-proj__idx { position: absolute; top: 18px; inset-inline-end: 18px; font-size: .8rem; font-weight: 700; padding: .45em .8em; border-radius: 999px; background: rgba(247,248,242,.92); color: var(--zs-ink); }
.zs-proj__title { font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 800; margin: 0; letter-spacing: -.02em; color: inherit; }
.zs-proj__cat { margin: 6px 0 0; font-weight: 600; color: var(--muted); }
.zs-proj__sum { margin: 12px 0 0; line-height: 1.6; color: var(--muted); max-width: 42ch; }
.zs-proj--more { align-self: center; width: clamp(260px, 24vw, 380px); }
.zs-proj--more .zs-proj__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.zs-proj__morecircle { width: clamp(150px, 14vw, 220px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--zs-lime); color: var(--zs-ink); transition: transform .6s var(--zs-ease); }
.zs-proj__morecircle .zs-arrow { width: 32%; height: auto; }
.zs-proj--more:hover .zs-proj__morecircle { transform: scale(1.06) rotate(-45deg); }
.zs-proj__moretext { font-size: clamp(1.4rem, 2vw, 2rem); font-weight: 800; }
@media (max-width: 900px) {
	.zs-work__head { flex-direction: column; align-items: stretch; }
	.zs-work__progress { display: none; }
	.zs-proj:nth-child(even) { margin-top: 0; }
	.zs-proj { width: 78vw; }
}

/* ---------- Process ---------- */
.zs-process__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 120px); align-items: start; }
.zs-process__aside { position: sticky; top: calc(var(--zs-header-h) + 40px); }
.zs-process__big { font-size: clamp(6rem, 16vw, 15rem); font-weight: 800; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--zs-lime); display: flex; align-items: flex-start; direction: ltr; }
.zs-theme-light .zs-process__big, .zs-theme-lime .zs-process__big { -webkit-text-stroke-color: var(--zs-ink); }
.zs-process__big small { font-size: .18em; -webkit-text-stroke: 0; color: var(--muted); letter-spacing: 0; margin-top: .4em; }
.zs-process__cur { display: inline-block; }
.zs-steps-wrap { position: relative; padding-inline-start: clamp(36px, 4vw, 56px); }
.zs-steps__line { position: absolute; top: 0; bottom: 0; inset-inline-start: 7px; width: 2px; background: var(--line); }
.zs-steps__line span { position: absolute; inset: 0; background: var(--zs-lime); transform-origin: top; }
.zs-theme-light .zs-steps__line span { background: var(--zs-ink); }
.zs-steps { list-style: none; margin: 0; padding: 0; }
.zs-step { position: relative; padding-block: clamp(32px, 5vh, 56px); border-bottom: 1px solid var(--line); }
.zs-step:first-child { padding-top: 0; }
.zs-step__dot { position: absolute; top: clamp(40px, 5.4vh, 62px); inset-inline-start: calc(-1 * clamp(36px, 4vw, 56px)); width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); box-sizing: border-box; transition: background .4s, border-color .4s, transform .4s var(--zs-ease); }
.zs-step:first-child .zs-step__dot { top: 8px; }
.zs-step.is-active .zs-step__dot { background: var(--zs-lime); border-color: var(--zs-lime); transform: scale(1.3); }
.zs-step__meta { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--zs-lime); margin-bottom: 12px; }
:lang(ar) .zs-step__meta { letter-spacing: 0; font-size: .95rem; }
.zs-theme-light .zs-step__meta { color: var(--zs-muted-light); }
.zs-step__title { font-size: clamp(1.8rem, 3.2vw, 3rem); font-weight: 800; letter-spacing: -.025em; margin: 0 0 12px; color: inherit; transition: color .4s; }
.zs-step__desc { margin: 0; font-size: 1.1rem; line-height: 1.65; color: var(--muted); max-width: 46ch; }
@media (max-width: 900px) {
	.zs-process__grid { grid-template-columns: 1fr; }
	.zs-process__aside { position: static; }
	.zs-process__big { display: none; }
}

/* ---------- Stats ---------- */
.zs-stats { --zs-pad-y: clamp(64px, 9vw, 140px); }
.zs-stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin: 0; }
.zs-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 14px; border-top: 2px solid currentColor; padding-top: 22px; }
.zs-stat__num { margin: 0; font-size: clamp(3.6rem, 8.4vw, 8.4rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; text-align: start; }
[dir="rtl"] .zs-stat__num { text-align: right; }
.zs-stat__label { font-size: 1.05rem; font-weight: 600; color: var(--muted); }
@media (max-width: 900px) { .zs-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } }

/* ---------- FAQ ---------- */
.zs-faq__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.zs-faq__head { position: sticky; top: calc(var(--zs-header-h) + 40px); margin-bottom: 0; }
.zs-faq__head .zs-title { font-size: clamp(2.4rem, 5vw, 5rem); }
.zs-qa { border-bottom: 1px solid var(--line); }
.zs-qa:first-child { border-top: 1px solid var(--line); }
.zs-qa__q { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(22px, 2.6vw, 34px) 0; cursor: pointer; }
.zs-qa__q::-webkit-details-marker { display: none; }
.zs-qa__q h3 { margin: 0; font-size: clamp(1.2rem, 1.8vw, 1.6rem); font-weight: 700; line-height: 1.35; color: inherit; letter-spacing: -.01em; }
.zs-qa__icon { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line); transition: background .4s, border-color .4s, transform .5s var(--zs-ease); }
.zs-qa__icon::before, .zs-qa__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform .5s var(--zs-ease); }
.zs-qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.zs-qa[open] .zs-qa__icon { background: var(--zs-lime); border-color: var(--zs-lime); color: var(--zs-ink); transform: rotate(180deg); }
.zs-qa[open] .zs-qa__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.zs-qa__a { overflow: hidden; }
.zs-qa__a > div { padding-bottom: clamp(22px, 2.6vw, 34px); max-width: 62ch; }
.zs-qa__a p { margin: 0 0 .8em; font-size: 1.08rem; line-height: 1.7; color: var(--muted); }
.zs-qa__q:hover h3 { opacity: .75; }
@media (max-width: 900px) { .zs-faq__grid { grid-template-columns: 1fr; } .zs-faq__head { position: static; } }

/* ---------- CTA ---------- */
.zs-cta { overflow: hidden; --zs-pad-y: clamp(110px, 16vw, 240px); }
.zs-cta__bgmark { position: absolute; inset-inline-end: -12vw; top: 50%; width: 60vw; transform: translateY(-50%); z-index: -1; pointer-events: none; color: var(--fg); opacity: .05; }
.zs-cta__mark { width: 100%; height: auto; }
.zs-cta__title { font-size: clamp(3rem, 9.6vw, 10.4rem); line-height: .92; }
.zs-cta__row { display: flex; align-items: center; gap: clamp(28px, 5vw, 90px); margin-top: clamp(48px, 6vw, 96px); flex-wrap: wrap; }
.zs-cta__circle {
	position: relative;
	width: clamp(170px, 17vw, 250px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--zs-lime);
	color: var(--zs-ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-weight: 800;
	font-size: 1.1rem;
	text-align: center;
	padding: 20px;
	box-sizing: border-box;
	transition: background .4s;
	will-change: transform;
}
.zs-cta__circle:hover { background: var(--zs-paper); }
.zs-theme-lime .zs-cta__circle { background: var(--zs-ink); color: var(--zs-lime); }
.zs-cta__circle .zs-arrow { width: 28px; height: 28px; transform: rotate(-45deg); }
[dir="rtl"] .zs-cta__circle .zs-arrow { transform: scaleX(-1) rotate(-45deg); }
.zs-cta__links { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.zs-cta__email { font-size: clamp(1.4rem, 2.8vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; border-bottom: 2px solid currentColor; padding-bottom: 4px; direction: ltr; }
.zs-cta__note { margin: 0; color: var(--muted); }

/* ---------- Footer ---------- */
.zs-footer { --bg: var(--zs-ink); --fg: var(--zs-paper); --muted: var(--zs-muted-dark); --line: rgba(247,248,242,.12); background: var(--bg); color: var(--fg); padding-top: clamp(80px, 10vw, 140px); overflow: hidden; position: relative; }
.zs-footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); padding-bottom: clamp(48px, 6vw, 90px); }
.zs-footer__brand p { margin: 20px 0 0; color: var(--muted); line-height: 1.6; max-width: 32ch; }
.zs-footer__h { margin: 0 0 18px; font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
:lang(ar) .zs-footer__h { letter-spacing: 0; font-size: .95rem; }
.zs-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.zs-footer__col a { font-weight: 600; }
.zs-footer__giant { display: flex; align-items: center; gap: 2vw; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 800; font-size: clamp(5rem, 21vw, 22rem); line-height: .78; letter-spacing: -.06em; padding-block: 2vw 3vw; white-space: nowrap; --zs-mark-mid: var(--zs-lime); }
.zs-footer__gmark { width: .95em; flex: none; color: var(--zs-paper); }
.zs-footer__giant > span { display: inline-block; }
.zs-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-block: 26px 34px; font-size: .9rem; color: var(--muted); }
.zs-footer__bottom p { margin: 0; }
.zs-footer__top-link { font-weight: 700; color: var(--fg); }
@media (max-width: 1024px) { .zs-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zs-footer__brand { grid-column: 1 / -1; } }

/* ---------- Global UI ---------- */
.zs-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 9995; pointer-events: none; }
.zs-progress span { display: block; height: 100%; background: var(--zs-lime); transform: scaleX(0); transform-origin: left; }
.rtl .zs-progress span { transform-origin: right; }
.admin-bar .zs-progress { top: 32px; }

.zs-preloader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: var(--zs-ink);
	display: grid;
	place-items: center;
	color: var(--zs-paper);
	animation: zs-pre-failsafe .6s 4s forwards; /* never blocks the page if JS fails */
}
@keyframes zs-pre-failsafe { to { visibility: hidden; transform: translateY(-100%); } }
.zs-preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.zs-preloader__mark { width: 110px; height: auto; }
.zs-preloader__count { font-weight: 800; font-size: 1rem; letter-spacing: .1em; font-variant-numeric: tabular-nums; color: var(--zs-muted-dark); }

.zs-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; display: none; }
.zs-cursor-on .zs-cursor { display: block; }
.zs-cursor__dot, .zs-cursor__ring { position: fixed; top: 0; left: 0; border-radius: 50%; will-change: transform; }
.zs-cursor__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--zs-lime); }
.zs-cursor__ring { width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1.5px solid rgba(197,244,90,.6); display: grid; place-items: center; transition: width .35s var(--zs-ease), height .35s var(--zs-ease), margin .35s var(--zs-ease), background .35s, border-color .35s; mix-blend-mode: normal; }
.zs-cursor__ring em { font-style: normal; font-size: .82rem; font-weight: 800; color: var(--zs-ink); transform: scale(0); transition: transform .35s var(--zs-ease); white-space: nowrap; }
.zs-cursor.is-link .zs-cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(197,244,90,.12); }
.zs-cursor.is-label .zs-cursor__ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--zs-lime); border-color: var(--zs-lime); }
.zs-cursor.is-label .zs-cursor__ring em { transform: scale(1); }
.zs-cursor.is-label .zs-cursor__dot { transform: scale(0) !important; }
.zs-cursor-on, .zs-cursor-on a, .zs-cursor-on button, .zs-cursor-on summary { cursor: none; }
@media (hover: none), (pointer: coarse) { .zs-cursor { display: none !important; } .zs-cursor-on, .zs-cursor-on a, .zs-cursor-on button, .zs-cursor-on summary { cursor: auto; } }

/* Accessibility */
.zs-site a:focus-visible, .zs-site button:focus-visible, .zs-site summary:focus-visible { outline: 2px solid var(--zs-lime); outline-offset: 4px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
	.zs-preloader, .zs-cursor { display: none !important; }
	.zs-marquee__track { animation: none; }
	.zs-eyebrow__dot.is-live, .zs-hero__scroll i::after { animation: none; }
	html { scroll-behavior: auto; }
}

/* Elementor editor: keep everything static and visible */
.elementor-editor-active .zs-header { position: relative; }
.elementor-editor-active .zs-card { position: relative; top: auto; }