/* =========================================================================
   GGI Group — Design System
   Warm paper light theme (default) matching the printed brand identity,
   with a premium dark theme. RTL-first, LTR-aware via logical properties.
   Signature: the G-arc — sweeping offset orange/ink arcs from the logo.
   ========================================================================= */

:root{
	/* Brand */
	--orange:#F4953A;
	--orange-deep:#D97C1F;
	--orange-soft:#FBDBB9;
	--ink:#211D1E;
	--ink-2:#3A3536;
	--bronze:#A08B62;
	--slate:#58595B;

	/* Surfaces (light) */
	--bg:#FAF8F5;
	--bg-2:#FFFFFF;
	--cream:#F6EEE2;
	--line:rgba(33,29,30,.10);
	--text:#211D1E;
	--text-2:#5C5654;
	--glass:rgba(255,255,255,.62);
	--glass-line:rgba(255,255,255,.85);
	--shadow:0 18px 50px -18px rgba(33,29,30,.18);
	--shadow-sm:0 8px 24px -12px rgba(33,29,30,.16);

	--radius:20px;
	--radius-sm:12px;
	--wrap:1200px;
	--nav-h:82px;

	--f-ar:'Almarai',system-ui,sans-serif;
	--f-en:'Outfit','Almarai',system-ui,sans-serif;
	--ease:cubic-bezier(.22,.8,.24,1);
}

html[data-theme=dark]{
	--bg:#171310;
	--bg-2:#201A15;
	--cream:#241D16;
	--line:rgba(246,238,226,.10);
	--text:#F3EDE4;
	--text-2:#B7AC9E;
	--glass:rgba(32,26,21,.62);
	--glass-line:rgba(246,238,226,.10);
	--shadow:0 18px 50px -18px rgba(0,0,0,.55);
	--shadow-sm:0 8px 24px -12px rgba(0,0,0,.5);
	--ink:#F3EDE4;           /* "ink" flips to light for text-on-surface uses */
	--ink-2:#DDD3C6;
	--orange-soft:#42301D;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:var(--f-ar);
	font-size:16.5px;
	line-height:1.85;
	overflow-x:hidden;
	transition:background .45s var(--ease), color .45s var(--ease);
}
html[lang=en] body{ font-family:var(--f-en); line-height:1.7; }

img{ max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ line-height:1.3; margin:0 0 .5em; font-weight:800; }
p{ margin:0 0 1em; }
ul,ol{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--orange); color:#fff; }

/* Language switching — the core of the no-reload bilingual system */
html[lang=ar] .i-en{ display:none; }
html[lang=en] .i-ar{ display:none; }

.wrap{ width:min(var(--wrap),92%); margin-inline:auto; }
.wrap-narrow{ width:min(820px,92%); }

.section{ padding-block:96px; position:relative; }
.section-tall{ padding-block:150px; }
.section-flush{ padding-block:0; }
.section-cream{ background:var(--cream); }
.section-ink{
	background:#1B1718;
	color:#F3EDE4;
}
.section-ink .sec-title, .section-ink h3{ color:#F3EDE4; }
.section-ink .sec-lead, .section-ink p{ color:#C9BFB4; }
html[data-theme=dark] .section-ink{ background:#100D0B; }
.center{ text-align:center; }

/* Accessibility */
.skip-link{
	position:fixed; inset-block-start:-60px; inset-inline-start:16px; z-index:300;
	background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:10px;
	transition:inset-block-start .2s;
}
.skip-link:focus{ inset-block-start:16px; }
:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:6px; }

/* ---------- Preloader ---------- */
.preloader{
	position:fixed; inset:0; z-index:400; display:grid; place-items:center;
	background:var(--bg); transition:opacity .6s var(--ease), visibility .6s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader img{ width:72px; }
.preloader-arc{
	position:absolute; width:130px; height:130px;
}
.preloader-arc span{
	display:block; width:100%; height:100%; border-radius:50%;
	border:5px solid transparent;
	border-top-color:var(--orange);
	border-inline-end-color:var(--orange);
	animation:spin 1s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Cursor glow ---------- */
.cursor-glow{
	position:fixed; z-index:1; width:520px; height:520px; border-radius:50%;
	pointer-events:none; inset-block-start:0; inset-inline-start:0;
	background:radial-gradient(circle, rgba(244,149,58,.10), transparent 65%);
	transform:translate(-50%,-50%); opacity:0; transition:opacity .5s;
}
body:hover .cursor-glow{ opacity:1; }
@media (pointer:coarse){ .cursor-glow{ display:none; } }

/* ---------- Header ---------- */
.site-header{
	position:fixed; inset-inline:0; inset-block-start:0; z-index:200;
	transition:background .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s, transform .45s var(--ease);
}
.site-header.is-hidden{ transform:translateY(-110%); }
.site-header.is-scrolled{
	background:var(--glass);
	-webkit-backdrop-filter:blur(18px) saturate(1.4);
	backdrop-filter:blur(18px) saturate(1.4);
	box-shadow:0 1px 0 var(--line), var(--shadow-sm);
}
.nav-wrap{
	display:flex; align-items:center; gap:26px; height:var(--nav-h);
}
.brand{ display:flex; align-items:center; }
.brand-logo{ width:72px; height:auto; transition:transform .3s var(--ease); }
.brand:hover .brand-logo{ transform:scale(1.04); }
.brand-light{ display:none; }
html[data-theme=dark] .brand-dark{ display:none; }
html[data-theme=dark] .brand-light{ display:block; }

.primary-nav{ margin-inline-start:auto; }
.nav-list{ display:flex; gap:6px; align-items:center; }
.nav-list a{
	display:block; padding:9px 14px; border-radius:12px; font-weight:700; font-size:.95rem;
	color:var(--text-2); transition:color .2s, background .2s;
	position:relative;
}
.nav-list a:hover{ color:var(--text); background:color-mix(in srgb, var(--orange) 12%, transparent); }
.nav-list .current-menu-item > a,
.nav-list .current_page_item > a{ color:var(--orange-deep); }
html[data-theme=dark] .nav-list .current-menu-item > a{ color:var(--orange); }

.nav-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
	display:grid; place-items:center; width:42px; height:42px; border-radius:12px;
	border:1px solid var(--line); background:var(--bg-2); font-weight:800; font-size:.85rem;
	transition:border-color .2s, transform .2s, background .2s;
}
.icon-btn:hover{ border-color:var(--orange); transform:translateY(-1px); }
.ic-moon{ display:none; }
html[data-theme=dark] .ic-sun{ display:none; }
html[data-theme=dark] .ic-moon{ display:block; }

.burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); position:relative; }
.burger span{ position:absolute; inset-inline:12px; height:2px; background:var(--text); border-radius:2px; transition:.3s var(--ease); }
.burger span:nth-child(1){ inset-block-start:15px; }
.burger span:nth-child(2){ inset-block-start:21px; }
.burger span:nth-child(3){ inset-block-start:27px; }
.burger.is-open span:nth-child(1){ inset-block-start:21px; transform:rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ inset-block-start:21px; transform:rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex; align-items:center; justify-content:center; gap:10px;
	padding:12px 26px; border-radius:999px; font-weight:800; font-size:.98rem;
	border:2px solid transparent; transition:transform .25s var(--ease), box-shadow .25s, background .25s, color .25s, border-color .25s;
	position:relative; overflow:hidden;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-lg{ padding:15px 34px; font-size:1.05rem; }
.btn-primary{
	background:linear-gradient(135deg, var(--orange), var(--orange-deep));
	color:#fff;
	box-shadow:0 12px 28px -12px rgba(244,149,58,.65);
}
.btn-primary:hover{ box-shadow:0 18px 36px -12px rgba(244,149,58,.75); }
.btn-ghost{
	border-color:var(--line); background:var(--bg-2); color:var(--text);
}
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange-deep); }
html[data-theme=dark] .btn-ghost:hover{ color:var(--orange); }
.btn-ink{ background:#211D1E; color:#fff; }
.btn-ink:hover{ background:#000; }
.nav-cta{ padding:10px 20px; font-size:.92rem; }

/* ---------- Type helpers ---------- */
.eyebrow{
	display:inline-flex; align-items:center; gap:10px;
	font-weight:800; font-size:.85rem; letter-spacing:.02em;
	color:var(--orange-deep); margin-bottom:14px;
}
html[data-theme=dark] .eyebrow{ color:var(--orange); }
.section-ink .eyebrow{ color:var(--orange); }
.arc-tick{
	/* three ascending bars — the "growth" mark */
	position:relative; width:6px; height:12px; border-radius:4px; flex:none;
	background:linear-gradient(180deg, var(--orange), var(--orange-deep));
	margin-inline:10px;
	align-self:flex-end; margin-block-end:.28em;
}
.arc-tick::before, .arc-tick::after{
	content:""; position:absolute; inset-block-end:0; width:6px; border-radius:4px;
	background:linear-gradient(180deg, var(--orange), var(--orange-deep));
}
.arc-tick::before{ inset-inline-end:calc(100% + 4px); height:7px; opacity:.45; }
.arc-tick::after{ inset-inline-start:calc(100% + 4px); height:18px; box-shadow:0 0 10px rgba(244,149,58,.5); }
.edge-list .arc-tick, .video-badge .arc-tick{ align-self:center; margin-block-end:0; }
.sec-head{ max-width:720px; margin-bottom:48px; }
.sec-title{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing:-.01em; }
.sec-lead{ color:var(--text-2); font-size:1.08rem; margin-top:10px; }
.body-lg{ font-size:1.12rem; }
.link-arrow{
	display:inline-flex; gap:8px; align-items:center; font-weight:800; color:var(--orange-deep);
	border-bottom:2px solid transparent; transition:border-color .2s, gap .25s var(--ease);
}
html[data-theme=dark] .link-arrow{ color:var(--orange); }
.link-arrow:hover{ border-color:currentColor; gap:14px; }
html[lang=en] .link-arrow span[aria-hidden], html[lang=en] .card-arrow{ transform:scaleX(-1); display:inline-block; }

/* ---------- Glass ---------- */
.glass{
	background:var(--glass);
	-webkit-backdrop-filter:blur(16px) saturate(1.3);
	backdrop-filter:blur(16px) saturate(1.3);
	border:1px solid var(--glass-line);
	box-shadow:var(--shadow);
	border-radius:var(--radius);
}

/* =========================================================================
   HERO — the G-arc
   ========================================================================= */
.hero{
	position:relative; overflow:hidden;
	padding-block:calc(var(--nav-h) + 70px) 90px;
	min-height:92vh; display:flex; flex-direction:column; justify-content:center; gap:56px;
}
.hero-mesh{
	position:absolute; inset:0; z-index:-3;
	background:
		radial-gradient(52% 44% at 12% 8%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 70%),
		radial-gradient(40% 36% at 88% 86%, color-mix(in srgb, var(--bronze) 16%, transparent), transparent 70%),
		var(--bg);
}
/* The two offset arcs, echoing the logo's G */
.hero-arc{
	position:absolute; border-radius:50%; z-index:-2; pointer-events:none;
	border-style:solid; border-color:transparent;
}
.hero-arc-orange{
	width:min(78vw,860px); height:min(78vw,860px);
	inset-inline-end:-14%; inset-block-start:-6%;
	border-width:clamp(22px,3.4vw,44px);
	border-block-start-color:var(--orange);
	border-inline-end-color:var(--orange);
	opacity:.92;
	animation:arc-rotate 46s linear infinite;
}
.hero-arc-ink{
	width:min(66vw,720px); height:min(66vw,720px);
	inset-inline-end:-9%; inset-block-start:2%;
	border-width:clamp(18px,2.8vw,36px);
	border-block-end-color:var(--ink);
	border-inline-start-color:var(--ink);
	opacity:.16;
	animation:arc-rotate 60s linear infinite reverse;
}
html[data-theme=dark] .hero-arc-ink{ opacity:.28; }
@keyframes arc-rotate{ to{ transform:rotate(360deg); } }

.hero-grid{
	display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
}
.hero-title{
	font-size:clamp(2.3rem, 5.2vw, 4rem);
	line-height:1.22; letter-spacing:-.015em; margin-bottom:22px;
}
.hero-title em{
	font-style:normal; color:var(--orange-deep); position:relative; white-space:nowrap;
}
html[data-theme=dark] .hero-title em{ color:var(--orange); }
.hero-title em::after{
	content:""; position:absolute; inset-inline:0; inset-block-end:.06em; height:.28em; z-index:-1;
	background:color-mix(in srgb, var(--orange) 28%, transparent);
	border-radius:6px;
}
.hero-lead{ color:var(--text-2); font-size:1.14rem; max-width:56ch; margin-bottom:30px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-globe{ position:relative; display:grid; place-items:center; }
.hero-globe canvas{
	width:min(100%,560px); height:auto; aspect-ratio:1;
	filter:drop-shadow(0 30px 60px rgba(244,149,58,.22));
}

/* Stats band */
.stats-band{
	display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
	padding:30px 26px; text-align:center;
}
.stat{ display:grid; gap:4px; padding-inline:8px; }
.stat + .stat{ border-inline-start:1px solid var(--line); }
.stat-num{
	font-family:var(--f-en);
	font-size:clamp(1.9rem,3.4vw,2.9rem); font-weight:800; color:var(--orange-deep);
	letter-spacing:-.02em; line-height:1.1;
	font-variant-numeric:tabular-nums;
}
html[data-theme=dark] .stat-num{ color:var(--orange); }
.stat-label{ color:var(--text-2); font-size:.92rem; font-weight:700; }

/* =========================================================================
   Cards & grids
   ========================================================================= */
.cards-grid{ display:grid; gap:22px; }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.card{
	position:relative; display:block; background:var(--bg-2);
	border:1px solid var(--line); border-radius:var(--radius);
	padding:30px 28px; overflow:hidden;
	transition:transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.card::before{
	/* corner arc accent */
	content:""; position:absolute; width:120px; height:120px; border-radius:50%;
	inset-inline-end:-52px; inset-block-start:-52px;
	border:10px solid color-mix(in srgb, var(--orange) 16%, transparent);
	border-block-end-color:transparent; border-inline-start-color:transparent;
	transform:rotate(45deg);
	transition:transform .5s var(--ease), border-color .35s;
}
a.card:hover{ transform:translateY(-7px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--orange) 45%, var(--line)); }
a.card:hover::before{ transform:rotate(125deg); border-block-start-color:var(--orange); border-inline-end-color:var(--orange); }
.card-icon{
	display:grid; place-items:center; width:58px; height:58px; margin-bottom:18px;
	font-size:1.7rem; border-radius:16px;
	background:color-mix(in srgb, var(--orange) 13%, transparent);
	border:1px solid color-mix(in srgb, var(--orange) 25%, transparent);
}
.card h3{ font-size:1.12rem; margin-bottom:8px; }
.card p{ color:var(--text-2); font-size:.95rem; margin:0; }
.card time{ display:block; color:var(--orange-deep); font-weight:800; font-size:.82rem; margin-bottom:10px; font-family:var(--f-en); }
html[data-theme=dark] .card time{ color:var(--orange); }
.card-arrow{
	position:absolute; inset-inline-end:22px; inset-block-end:18px;
	font-size:1.2rem; color:var(--orange-deep); opacity:0;
	transition:opacity .3s, transform .3s var(--ease);
	transform:translateX(6px);
}
html[lang=en] .card-arrow{ transform:translateX(-6px) scaleX(-1); }
a.card:hover .card-arrow{ opacity:1; transform:translateX(0); }
html[lang=en] a.card:hover .card-arrow{ transform:translateX(0) scaleX(-1); }
.vmv{ cursor:default; }

/* About intro */
.about-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:60px; align-items:start; }
.edge-list{ display:grid; gap:14px; padding-block-start:26px; }
.edge-list li{
	display:flex; align-items:center; gap:14px; font-weight:800;
	background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:16px 20px;
	transition:transform .3s var(--ease), border-color .3s;
}
.edge-list li:hover{ transform:translateX(-6px); border-color:color-mix(in srgb, var(--orange) 40%, var(--line)); }
html[lang=en] .edge-list li:hover{ transform:translateX(6px); }

/* Filter bar + search */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.chip{
	padding:9px 18px; border-radius:999px; font-weight:800; font-size:.88rem;
	border:1.5px solid var(--line); background:var(--bg-2); color:var(--text-2);
	transition:all .25s var(--ease);
}
.chip:hover{ border-color:var(--orange); color:var(--orange-deep); }
.chip.is-active{
	background:linear-gradient(135deg,var(--orange),var(--orange-deep));
	border-color:transparent; color:#fff;
	box-shadow:0 8px 20px -8px rgba(244,149,58,.6);
}
.search-inline{ margin-bottom:30px; }
.search-inline input{
	width:min(420px,100%); padding:13px 20px; border-radius:14px;
	border:1.5px solid var(--line); background:var(--bg-2); color:var(--text);
	font:inherit; transition:border-color .2s, box-shadow .2s;
}
.search-inline input:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 4px color-mix(in srgb, var(--orange) 18%, transparent); }
.company-card.is-hidden{ display:none; }
.empty-note{ color:var(--text-2); font-weight:700; padding-block:30px; text-align:center; }

/* Presence */
.presence-grid{ display:grid; grid-template-columns:1.35fr .65fr; gap:44px; align-items:center; }
.presence-map canvas{ width:100%; height:auto; }
.presence-lists h3{
	display:flex; align-items:center; gap:10px; font-size:1.02rem; margin:26px 0 14px;
}
.presence-lists h3:first-child{ margin-top:0; }
.dot{ width:12px; height:12px; border-radius:50%; flex:none; }
.dot-orange{ background:var(--orange); box-shadow:0 0 14px rgba(244,149,58,.8); }
.dot-cream{ background:#CBB89A; }
.country-list{ display:flex; flex-wrap:wrap; gap:9px; }
.country-list li{
	padding:7px 15px; border-radius:999px; font-weight:700; font-size:.9rem;
	background:rgba(244,149,58,.14); border:1px solid rgba(244,149,58,.3); color:#F8D9B7;
}
.country-list.is-next li{
	background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:#C9BFB4;
	border-style:dashed;
}

/* Charts */
.charts-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.chart-card{ padding:26px; margin:0; }
.chart-card figcaption{ font-weight:800; margin-bottom:16px; }

/* Chairman */
.chairman{ position:relative; text-align:center; max-width:860px; padding-block:20px; }
.chairman-arc{
	position:absolute; width:230px; height:230px; border-radius:50%;
	inset-inline-start:50%; inset-block-start:-30px; transform:translateX(-50%);
	border:14px solid color-mix(in srgb, var(--orange) 18%, transparent);
	border-block-end-color:transparent; z-index:-1;
}
.q-mark{ font-size:5rem; line-height:.5; color:var(--orange); font-family:Georgia,serif; margin-bottom:6px; }
.q-text{ font-size:clamp(1.25rem,2.6vw,1.7rem); font-weight:800; line-height:1.7; max-width:30ch; margin-inline:auto; }
.chairman footer{ color:var(--text-2); font-weight:700; margin-block:16px 22px; }

/* CTA band */
.cta-band{
	background:linear-gradient(135deg, var(--orange) 0%, var(--orange-deep) 100%);
	color:#fff; overflow:hidden; position:relative; text-align:center;
}
.cta-arc{
	position:absolute; width:640px; height:640px; border-radius:50%;
	inset-inline-start:-200px; inset-block-start:-320px;
	border:34px solid rgba(255,255,255,.14);
	border-block-end-color:transparent; border-inline-end-color:transparent;
	animation:arc-rotate 40s linear infinite;
}
.cta-inner h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); }
.cta-inner p{ color:rgba(255,255,255,.9); font-size:1.1rem; max-width:60ch; margin-inline:auto; margin-bottom:28px; }
.cta-band .btn-ink:hover{ background:#0c0a0b; }

/* Page hero (inner pages) */
.page-hero{
	position:relative; overflow:hidden;
	padding-block:calc(var(--nav-h) + 74px) 64px;
	background:
		radial-gradient(46% 60% at 90% 0%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 70%),
		var(--cream);
}
.page-hero-arc{
	position:absolute; width:420px; height:420px; border-radius:50%;
	inset-inline-end:-130px; inset-block-start:-160px;
	border:26px solid var(--orange); border-block-end-color:transparent; border-inline-start-color:transparent;
	opacity:.5; animation:arc-rotate 50s linear infinite;
}
.page-title{ font-size:clamp(2rem,4.4vw,3.1rem); letter-spacing:-.01em; }
.page-lead{ color:var(--text-2); font-size:1.12rem; max-width:70ch; margin-top:8px; }
.title-icon{ font-size:.8em; }

/* Timeline */
.timeline{ position:relative; display:grid; gap:34px; max-width:760px; margin-inline:auto; padding-inline-start:34px; }
.timeline::before{
	content:""; position:absolute; inset-block:6px; inset-inline-start:9px; width:3px;
	background:linear-gradient(180deg, var(--orange), color-mix(in srgb, var(--orange) 10%, transparent));
	border-radius:3px;
}
.tl-item{ position:relative; }
.tl-item::before{
	content:""; position:absolute; inset-inline-start:-34px; inset-block-start:8px;
	width:19px; height:19px; border-radius:50%;
	background:var(--bg); border:5px solid var(--orange);
}
.tl-year{
	font-family:var(--f-en); font-weight:800; color:var(--orange-deep); font-size:1.05rem;
}
html[data-theme=dark] .tl-year{ color:var(--orange); }
.tl-body h3{ font-size:1.15rem; margin:2px 0 6px; }
.tl-body p{ color:var(--text-2); margin:0; }

/* Prose */
.prose p{ margin-bottom:1.2em; }
.prose.on-ink, .on-ink p{ color:#DCD2C6; }
.mini-list{ display:grid; gap:10px; }
.mini-list li{ position:relative; padding-inline-start:22px; color:var(--text-2); font-size:.95rem; }
.mini-list li::before{
	content:""; position:absolute; inset-inline-start:0; inset-block-start:.6em;
	width:9px; height:9px; border-radius:50%;
	background:linear-gradient(135deg, var(--orange), var(--orange-deep));
}

/* Contact */
.contact-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:34px; align-items:start; }
.contact-form{ padding:36px; display:grid; gap:18px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-form label{ display:grid; gap:8px; font-weight:800; font-size:.92rem; }
.contact-form input, .contact-form select, .contact-form textarea{
	padding:13px 16px; border-radius:12px; border:1.5px solid var(--line);
	background:var(--bg-2); color:var(--text); font:inherit; font-weight:400;
	transition:border-color .2s, box-shadow .2s;
}
.contact-form :is(input,select,textarea):focus{
	outline:none; border-color:var(--orange);
	box-shadow:0 0 0 4px color-mix(in srgb, var(--orange) 16%, transparent);
}
.form-note{ color:var(--text-2); margin:0; font-size:.95rem; }
.form-status{ margin:0; font-weight:800; min-height:1.4em; }
.form-status.ok{ color:#1F8F4D; }
.form-status.err{ color:#C2402A; }
.hp{ position:absolute; inset-inline-start:-9999px; }
.contact-aside{ display:grid; gap:18px; }
.contact-aside .card{ cursor:default; }
.f-contact{ display:grid; gap:6px; font-weight:700; color:var(--text-2); }

.single-cta{
	display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
	padding:26px 30px; margin-block:34px;
}
.single-cta p{ margin:0; font-weight:800; }

.big-404{
	font-family:var(--f-en); font-size:clamp(5rem,16vw,10rem); font-weight:800; line-height:1;
	background:linear-gradient(135deg,var(--orange),var(--orange-deep));
	-webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:6px;
}

/* Pagination */
.pagination{ margin-top:40px; text-align:center; }
.pagination .nav-links{ display:inline-flex; gap:8px; }
.pagination .page-numbers{
	display:grid; place-items:center; min-width:42px; height:42px; padding-inline:10px;
	border:1.5px solid var(--line); border-radius:12px; font-weight:800; font-family:var(--f-en);
}
.pagination .page-numbers.current{ background:var(--orange); border-color:transparent; color:#fff; }
.pagination a.page-numbers:hover{ border-color:var(--orange); color:var(--orange-deep); }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer{
	position:relative; background:#171314; color:#D8CEC3; overflow:hidden;
	margin-block-start:0;
}
html[data-theme=dark] .site-footer{ background:#0E0B09; }
.footer-arc{
	position:absolute; width:560px; height:560px; border-radius:50%;
	inset-inline-start:-220px; inset-block-end:-300px;
	border:30px solid rgba(244,149,58,.12);
	border-block-start-color:transparent; border-inline-end-color:transparent;
}
.footer-grid{
	position:relative; display:grid; grid-template-columns:1.3fr .7fr 1fr 1.1fr; gap:44px;
	padding-block:72px 50px;
}
.f-col h3{ color:#fff; font-size:1.02rem; margin-bottom:18px; }
.f-brand img{ width:120px; margin-bottom:16px; }
.f-brand p{ font-size:.95rem; color:#B8AC9F; }
.f-links{ display:grid; gap:10px; }
.f-links a{ color:#B8AC9F; font-weight:700; font-size:.95rem; transition:color .2s, padding .25s var(--ease); }
.f-links a:hover{ color:var(--orange); padding-inline-start:6px; }
.f-news{ display:grid; gap:14px; }
.f-news a{ color:#D8CEC3; font-weight:700; font-size:.93rem; line-height:1.5; }
.f-news a:hover{ color:var(--orange); }
.f-news time{ display:block; color:#8C8073; font-size:.8rem; font-family:var(--f-en); margin-top:2px; }
.f-note{ font-size:.9rem; color:#B8AC9F; }
.newsletter{ display:flex; gap:8px; margin-bottom:18px; }
.newsletter input{
	flex:1; min-width:0; padding:12px 16px; border-radius:12px;
	border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font:inherit;
}
.newsletter input:focus{ outline:none; border-color:var(--orange); }
.newsletter .btn{ padding:12px 20px; }
.socials{ display:flex; gap:10px; margin-top:14px; }
.socials a{
	display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
	background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
	color:#D8CEC3; transition:all .25s var(--ease);
}
.socials a:hover{ background:var(--orange); border-color:var(--orange); color:#fff; transform:translateY(-3px); }
.footer-map iframe{ display:block; width:100%; height:280px; border:0; filter:grayscale(.4) contrast(1.05); }
.footer-map.big iframe{ height:420px; }
.footer-bottom{ border-block-start:1px solid rgba(255,255,255,.08); padding-block:20px; position:relative; }
.footer-bottom p{ margin:0; font-size:.88rem; color:#8C8073; text-align:center; }

/* =========================================================================
   AI Chat widget
   ========================================================================= */
.chat{ position:fixed; inset-inline-end:22px; inset-block-end:22px; z-index:250; }
.chat-fab{
	position:relative; display:grid; place-items:center;
	width:62px; height:62px; border-radius:50%; border:none;
	background:linear-gradient(135deg,var(--orange),var(--orange-deep));
	box-shadow:0 16px 34px -10px rgba(244,149,58,.7);
	transition:transform .3s var(--ease);
}
.chat-fab:hover{ transform:scale(1.08); }
.chat-fab img{ width:32px; filter:brightness(0) invert(1); }
.chat-fab-pulse{
	position:absolute; inset:0; border-radius:50%;
	border:2px solid var(--orange);
	animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{
	0%{ transform:scale(1); opacity:.8; }
	100%{ transform:scale(1.65); opacity:0; }
}
.chat-panel[hidden]{ display:none; }
.chat-panel{
	position:absolute; inset-inline-end:0; inset-block-end:76px;
	width:min(380px, calc(100vw - 40px));
	display:flex; flex-direction:column; overflow:hidden;
	background:var(--bg-2); border:1px solid var(--line); border-radius:22px;
	box-shadow:var(--shadow);
	animation:chat-in .35s var(--ease);
}
@keyframes chat-in{ from{ opacity:0; transform:translateY(16px) scale(.97); } }
.chat-head{
	display:flex; align-items:center; gap:12px; padding:16px 18px;
	background:linear-gradient(135deg,var(--orange),var(--orange-deep)); color:#fff;
}
.chat-head img{ width:30px; filter:brightness(0) invert(1); }
.chat-head strong{ display:block; font-size:.98rem; }
.chat-head small{ opacity:.85; font-size:.78rem; }
.chat-close{
	margin-inline-start:auto; background:rgba(255,255,255,.18); border:none; color:#fff;
	width:32px; height:32px; border-radius:10px; font-size:1.2rem; line-height:1;
}
.chat-close:hover{ background:rgba(255,255,255,.3); }
.chat-log{
	flex:1; max-height:340px; min-height:200px; overflow-y:auto;
	padding:18px; display:flex; flex-direction:column; gap:12px;
	background:var(--bg);
}
.msg{
	max-width:86%; padding:11px 15px; border-radius:16px; font-size:.93rem; line-height:1.7;
	white-space:pre-wrap; word-wrap:break-word;
}
.msg.bot{
	align-self:flex-start; background:var(--bg-2); border:1px solid var(--line);
	border-start-start-radius:4px;
}
.msg.user{
	align-self:flex-end; color:#fff;
	background:linear-gradient(135deg,var(--orange),var(--orange-deep));
	border-start-end-radius:4px;
}
.msg.typing::after{ content:"…"; animation:blink 1s infinite; }
@keyframes blink{ 50%{ opacity:.3; } }
.chat-chips{ display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px; border-block-start:1px solid var(--line); }
.chat-chips button{
	padding:7px 13px; border-radius:999px; font-size:.8rem; font-weight:700;
	border:1.5px solid var(--line); background:var(--bg-2); color:var(--text-2);
	transition:all .2s;
}
.chat-chips button:hover{ border-color:var(--orange); color:var(--orange-deep); }
.chat-form{ display:flex; gap:8px; padding:12px 14px; border-block-start:1px solid var(--line); }
.chat-form input{
	flex:1; min-width:0; padding:11px 15px; border-radius:12px;
	border:1.5px solid var(--line); background:var(--bg); color:var(--text); font:inherit; font-size:.93rem;
}
.chat-form input:focus{ outline:none; border-color:var(--orange); }
.chat-send{
	display:grid; place-items:center; width:44px; border:none; border-radius:12px; color:#fff;
	background:linear-gradient(135deg,var(--orange),var(--orange-deep));
}
html[lang=ar] .chat-send svg{ transform:scaleX(-1); }

/* =========================================================================
   Reveal on scroll
   ========================================================================= */
[data-reveal]{
	opacity:0; transform:translateY(26px);
	transition:opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-in{ opacity:1; transform:none; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1080px){
	.hero-grid{ grid-template-columns:1fr; text-align:center; }
	.hero-copy{ display:flex; flex-direction:column; align-items:center; }
	.hero-globe canvas{ width:min(80vw,460px); }
	.about-grid, .presence-grid, .contact-grid{ grid-template-columns:1fr; }
	.cols-3{ grid-template-columns:repeat(2,1fr); }
	.charts-grid{ grid-template-columns:1fr; }
	.footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
	:root{ --nav-h:70px; }
	.primary-nav{
		position:fixed; inset-inline:0; inset-block-start:var(--nav-h); z-index:190;
		background:var(--glass);
		-webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
		border-block-end:1px solid var(--line);
		transform:translateY(-130%); transition:transform .4s var(--ease);
	}
	.primary-nav.is-open{ transform:none; }
	.nav-list{ flex-direction:column; align-items:stretch; padding:18px; gap:4px; }
	.nav-list a{ padding:13px 16px; font-size:1.02rem; }
	.burger{ display:block; }
	.nav-cta{ display:none; }
	.cols-3{ grid-template-columns:1fr; }
	.stats-band{ grid-template-columns:repeat(2,1fr); gap:20px; }
	.stat + .stat{ border:0; }
	.section{ padding-block:66px; }
	.form-row{ grid-template-columns:1fr; }
	.footer-grid{ grid-template-columns:1fr; gap:34px; }
	.brand-logo{ width:58px; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
	*, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
	[data-reveal]{ opacity:1; transform:none; }
	html{ scroll-behavior:auto; }
}

/* WP alignment basics */
.alignwide{ width:min(1000px,96%); margin-inline:auto; }
.alignfull{ width:100%; }
.wp-block-image img{ border-radius:var(--radius-sm); }

/* =========================================================================
   Static-site additions: detail modal
   ========================================================================= */
.modal{
	position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:20px;
	background:rgba(23,19,16,.55);
	-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
	opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.modal.is-open{ opacity:1; visibility:visible; }
.modal-box{
	width:min(640px,100%); max-height:86vh; overflow-y:auto;
	background:var(--bg-2); border:1px solid var(--line); border-radius:24px;
	padding:38px; position:relative; box-shadow:var(--shadow);
	transform:translateY(18px) scale(.98); transition:transform .35s var(--ease);
}
.modal.is-open .modal-box{ transform:none; }
.modal-close{
	position:absolute; inset-inline-end:16px; inset-block-start:16px;
	width:38px; height:38px; border-radius:12px; border:1px solid var(--line);
	background:var(--bg); font-size:1.3rem; line-height:1;
}
.modal-close:hover{ border-color:var(--orange); color:var(--orange-deep); }
.modal-box .card-icon{ margin-bottom:14px; }
.modal-box h3{ font-size:1.4rem; }
.modal-tag{
	display:inline-block; margin-bottom:14px; padding:5px 14px; border-radius:999px;
	font-size:.8rem; font-weight:800; color:var(--orange-deep);
	background:color-mix(in srgb, var(--orange) 13%, transparent);
	border:1px solid color-mix(in srgb, var(--orange) 30%, transparent);
}
html[data-theme=dark] .modal-tag{ color:var(--orange); }
.modal-box .prose{ color:var(--text-2); white-space:pre-line; }
.modal-box .btn{ margin-top:20px; }
body.modal-open{ overflow:hidden; }

/* Cards rendered as <button> (open detail modals) */
button.card{
	text-align:start; width:100%; font:inherit; color:inherit; cursor:pointer;
}
button.card:hover{
	transform:translateY(-7px); box-shadow:var(--shadow);
	border-color:color-mix(in srgb, var(--orange) 45%, var(--line));
}
button.card:hover::before{
	transform:rotate(125deg);
	border-block-start-color:var(--orange); border-inline-end-color:var(--orange);
}
button.card:hover .card-arrow{ opacity:1; transform:translateX(0); }
html[lang=en] button.card:hover .card-arrow{ transform:translateX(0) scaleX(-1); }
.f-news a{ cursor:pointer; }

/* =========================================================================
   Video showcase
   ========================================================================= */
.video-sec .wrap{ max-width:1000px; }
.video-frame{
	position:relative; border-radius:26px; overflow:hidden;
	box-shadow:var(--shadow); border:1px solid var(--line);
	aspect-ratio:16/9; background:#171314;
}
.video-frame video, .video-frame iframe{
	position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover;
}
.video-poster{
	position:absolute; inset:0; display:grid; place-items:center; cursor:pointer; z-index:2;
	background-size:cover; background-position:center;
	transition:opacity .4s var(--ease), visibility .4s;
}
.video-poster.is-hidden{ opacity:0; visibility:hidden; }
.video-play{
	display:grid; place-items:center; width:88px; height:88px; border-radius:50%;
	background:linear-gradient(135deg,var(--orange),var(--orange-deep)); color:#fff; border:none;
	box-shadow:0 20px 50px -12px rgba(244,149,58,.8);
	transition:transform .3s var(--ease);
}
.video-poster:hover .video-play{ transform:scale(1.1); }
.video-play svg{ margin-inline-start:5px; }
.video-badge{
	position:absolute; inset-block-end:22px; inset-inline-start:24px; z-index:2;
	color:#fff; font-weight:800; text-shadow:0 2px 14px rgba(0,0,0,.5);
	display:flex; align-items:center; gap:10px;
}

/* =========================================================================
   Arabic type scale — reduced sizes (client preference)
   ========================================================================= */
html[lang=ar] body{ font-size:15.5px; }
html[lang=ar] .hero-title{ font-size:clamp(1.9rem, 4.3vw, 3.2rem); }
html[lang=ar] .sec-title{ font-size:clamp(1.45rem, 2.9vw, 2.1rem); }
html[lang=ar] .page-title{ font-size:clamp(1.75rem, 3.7vw, 2.55rem); }
html[lang=ar] .hero-lead{ font-size:1.04rem; }
html[lang=ar] .sec-lead, html[lang=ar] .page-lead{ font-size:1rem; }
html[lang=ar] .body-lg{ font-size:1.04rem; }
html[lang=ar] .q-text{ font-size:clamp(1.1rem, 2.2vw, 1.45rem); }
html[lang=ar] .cta-inner h2{ font-size:clamp(1.55rem, 3.1vw, 2.25rem); }
html[lang=ar] .card h3{ font-size:1.05rem; }
html[lang=ar] .stat-label{ font-size:.88rem; }

/* =========================================================================
   About page — photo stack & fact strip
   ========================================================================= */
.story-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.photo-stack{
	position:relative; display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.photo-stack::before{
	content:""; position:absolute; width:220px; height:220px; border-radius:50%; z-index:0;
	inset-inline-end:-60px; inset-block-start:-60px;
	border:18px solid color-mix(in srgb, var(--orange) 30%, transparent);
	border-block-end-color:transparent; border-inline-start-color:transparent;
	transform:rotate(35deg);
}
.photo-stack img{
	position:relative; z-index:1; width:100%; height:100%; object-fit:cover;
	border-radius:18px; box-shadow:var(--shadow-sm);
	transition:transform .45s var(--ease);
}
.photo-stack img:hover{ transform:scale(1.03); }
.photo-stack .ph-wide{ grid-column:1/-1; aspect-ratio:16/9; }
.photo-stack .ph-sq{ aspect-ratio:1; }

.fact-strip{
	display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-block-start:44px;
}
.fact{
	background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
	padding:18px 20px; display:grid; gap:2px;
}
.fact b{
	font-family:var(--f-en); font-size:1.5rem; font-weight:800; color:var(--orange-deep);
	font-variant-numeric:tabular-nums;
}
html[data-theme=dark] .fact b{ color:var(--orange); }
.fact span{ color:var(--text-2); font-size:.85rem; font-weight:700; }

@media (max-width:1080px){
	.story-grid{ grid-template-columns:1fr; }
	.fact-strip{ grid-template-columns:repeat(2,1fr); }
}

/* =========================================================================
   Brand covers as page-hero backgrounds + brand gallery
   ========================================================================= */
.page-hero.has-cover{
	background-size:cover !important; background-position:center !important;
}
.page-hero.has-cover::before{
	content:""; position:absolute; inset:0;
	background:linear-gradient(90deg,
		var(--bg) 0%,
		color-mix(in srgb, var(--bg) 96%, transparent) 34%,
		color-mix(in srgb, var(--bg) 55%, transparent) 62%,
		color-mix(in srgb, var(--bg) 12%, transparent) 100%);
}
html[dir=ltr] .page-hero.has-cover::before{
	background:linear-gradient(-90deg,
		var(--bg) 0%,
		color-mix(in srgb, var(--bg) 96%, transparent) 34%,
		color-mix(in srgb, var(--bg) 55%, transparent) 62%,
		color-mix(in srgb, var(--bg) 12%, transparent) 100%);
}
.page-hero.has-cover .page-title,
.page-hero.has-cover .page-lead,
.page-hero.has-cover .eyebrow{ text-shadow:0 2px 22px var(--bg), 0 0 8px var(--bg); }
.page-hero.has-cover .page-lead{ max-width:56ch; font-weight:700; }
.page-hero.has-cover .wrap{ position:relative; z-index:1; }
.page-hero.has-cover .page-hero-arc{ display:none; }

.gallery-grid{ display:grid; grid-template-columns:1.2fr 1.2fr .9fr; gap:20px; align-items:stretch; }
.gallery-card{
	position:relative; border:1px solid var(--line); border-radius:18px; overflow:hidden;
	padding:0; background:var(--bg-2); cursor:zoom-in; box-shadow:var(--shadow-sm);
	transition:transform .35s var(--ease), box-shadow .35s;
}
.gallery-card img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.gallery-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.gallery-card:hover img{ transform:scale(1.04); }
.gallery-card figcaption{
	position:absolute; inset-inline:0; inset-block-end:0; padding:14px 18px;
	color:#fff; font-weight:800; font-size:.9rem;
	background:linear-gradient(0deg, rgba(12,9,7,.75), transparent);
}
.modal-box.modal-img{ padding:14px; width:min(880px,100%); }
.modal-box.modal-img img{ display:block; width:100%; border-radius:14px; }
@media (max-width:900px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .gallery-grid{ grid-template-columns:1fr; } }


/* =========================================================================
   Company cards — corporate monogram style
   ========================================================================= */
.company-card .co-top{
	display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
	margin-bottom:18px;
}
.co-mono{
	display:grid; place-items:center; width:56px; height:56px; flex:none;
	border-radius:18px; color:#fff; font-weight:800; font-size:1.35rem; line-height:1;
	background:linear-gradient(135deg, var(--orange), var(--orange-deep));
	box-shadow:0 10px 22px -8px rgba(244,149,58,.55);
	position:relative;
}
.co-mono::after{
	content:""; position:absolute; inset:3px; border-radius:15px;
	border:1.5px solid rgba(255,255,255,.35);
	border-block-end-color:transparent; border-inline-start-color:transparent;
}
.co-tag{
	padding:5px 13px; border-radius:999px; font-size:.72rem; font-weight:800;
	color:var(--orange-deep); white-space:nowrap;
	background:color-mix(in srgb, var(--orange) 12%, transparent);
	border:1px solid color-mix(in srgb, var(--orange) 28%, transparent);
	max-width:60%; overflow:hidden; text-overflow:ellipsis;
}
html[data-theme=dark] .co-tag{ color:var(--orange); }
.company-card h3{ font-size:1.08rem; }
.company-card p{ min-height:3.4em; }
.company-card:hover .co-mono{ transform:rotate(-4deg) scale(1.06); }
.co-mono{ transition:transform .35s var(--ease); }

/* Company card icon in the top row (restored icons + sector tag) */
.company-card .co-top .card-icon{ margin-bottom:0; }
/* Phone numbers stay LTR inside Arabic text, but align with the RTL column */
.f-contact span[dir="ltr"]{ unicode-bidi:isolate; }
html[dir="rtl"] .f-contact span[dir="ltr"]{ text-align:right; }
html[dir="ltr"] .f-contact span[dir="ltr"]{ text-align:left; }
/* Smaller English hero title */
html[lang=en] .hero-title{
	font-size: clamp(1.8rem, 4vw, 3rem);
}