/* =========================================================
   الأنماط الرئيسية — منقولة من النموذج التفاعلي (ncc-html-prototype/assets/css/style.css)
   مع إضافة أنماط الصفحات الداخلية (المنتجات، الأخبار، الصفحات، البحث، 404).
   كل القيم من tokens.css. الاتجاه عبر الخصائص المنطقية + html[dir=rtl] عند الحاجة.
   ========================================================= */

/* ---------- 1. أساس ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: var(--font-ar); line-height: 1.7; -webkit-font-smoothing: antialiased; }
html[dir=ltr] body { font-family: var(--font-en); }
body.menu-open, body.search-open { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; text-wrap: balance; }
p { margin: 0 0 1em; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid rgba(0, 165, 181, .55); outline-offset: 4px; }
.skip-link { position: fixed; top: 10px; inset-inline-start: 10px; z-index: 500; transform: translateY(-160%); background: #fff; color: #111; padding: 10px 14px; }
.skip-link:focus { transform: none; }
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.container { width: min(var(--container), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.section { padding-block: var(--section); }
.admin-hint { background: var(--surface); border-inline-start: 4px solid var(--accent); padding: 16px 20px; font-size: 14px; }
.num { font-family: var(--font-en); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

/* ---------- 2. الهيدر ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header); color: #fff; transition: background var(--ease), box-shadow var(--ease), color var(--ease), height var(--ease); }
.site-header.scrolled { height: 74px; background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .07); -webkit-backdrop-filter: blur(15px);
 backdrop-filter: blur(15px); }
.admin-bar .site-header { top: 32px; }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 36px; } /* space-between: على الجوال (حين تختفي القائمة) يبقى الشعار في طرف وزر القائمة في الطرف المقابل */
.brand { display: inline-flex; align-items: center; min-width: max-content; }
.brand-logo { height: 34px; width: auto; }
.brand-logo--dark { display: none; }
.site-header.scrolled .brand-logo--light { display: none; }
.site-header.scrolled .brand-logo--dark { display: block; }
.brand .custom-logo { height: 34px; width: auto; }
.brand-text { font-family: var(--font-ar); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.desktop-nav { flex: 1; display: flex; align-items: center; justify-content: center; }
.nav-list, .nav-sub { list-style: none; margin: 0; padding: 0; }
.desktop-nav > .nav-list { display: flex; align-items: center; justify-content: center; gap: clamp(17px, 2vw, 30px); }
.nav-list > li { display: flex; align-items: center; }
.desktop-nav a { position: relative; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: .86; padding-block: 6px; }
.desktop-nav a::after { content: ""; position: absolute; inset: auto 0 -6px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--ease); }
.desktop-nav a:hover, .desktop-nav a.active, .desktop-nav a.current-menu-item, .desktop-nav a.current_page_item { opacity: 1; }
.desktop-nav a:hover::after, .desktop-nav a.active::after, .desktop-nav a.current-menu-item::after, .desktop-nav a.current_page_item::after { transform: scaleX(1); }

/* ---------- 2.b قائمة منسدلة (من نحن) ---------- */
.desktop-nav .nav-item { position: relative; display: flex; align-items: center; }
.desktop-nav .nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-caret { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .7; transition: transform var(--ease); }
.desktop-nav .nav-item:hover .nav-caret, .desktop-nav .nav-item:focus-within .nav-caret { transform: rotate(45deg) translateY(0); opacity: 1; }
.nav-sub-toggle { display: none; }

.desktop-nav .nav-sub {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translate(-50%, -6px);
	min-width: 218px;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid var(--border);
	box-shadow: 0 22px 54px rgba(0, 31, 70, .16);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--ease), visibility var(--ease), transform var(--ease);
	z-index: 60;
}
/* جسر شفاف يمنع انغلاق القائمة أثناء نزول المؤشّر إليها */
.desktop-nav .nav-item::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline: -12px; height: 16px; }
.desktop-nav .nav-item:hover .nav-sub,
.desktop-nav .nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.desktop-nav .nav-sub a {
	padding: 9px 13px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--primary);
	opacity: 1;
	white-space: nowrap;
	transition: background var(--ease), color var(--ease);
}
.desktop-nav .nav-sub a::after { display: none; }
.desktop-nav .nav-sub a:hover { background: rgba(0, 45, 98, .07); color: var(--primary-900); }

.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn, .menu-toggle, .lang-toggle { border: 0; background: transparent; cursor: pointer; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; }
.icon-btn svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lang-toggle { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding-inline: 8px; font-family: var(--font-en); font-weight: 700; font-size: 12px; }
.menu-toggle { display: none; width: 44px; height: 44px; place-content: center; gap: 6px; }
.menu-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; }

/* ---------- 3. الأزرار والروابط ---------- */
.btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; padding: 12px 20px; border: 1px solid transparent; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform var(--ease), background var(--ease), color var(--ease), border var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn-arrow { display: none; transition: transform var(--ease); font-family: var(--font-en); } /* الأزرار بلا أسهم (قرار تصميمي) — لإعادتها احذفي display:none */
.btn:hover .btn-arrow { transform: translate(3px, -3px); }
html[dir=rtl] .btn:hover .btn-arrow { transform: translate(-3px, -3px); }
.btn-primary, .btn--primary { background: var(--primary); color: #fff; }
/* كان الزر الأساسي يرتفع عند التحويم بلا تغيّر لوني — ردّ فعل ضعيف مقارنة ببقية الأزرار */
.btn-primary:hover, .btn--primary:hover { background: var(--primary-900); }
/* زر «طلب عرض سعر» في الهيدر: زجاجي فوق الهيرو، كحلي مصمت بعد التمرير (حين يصبح الهيدر أبيض) */
/* سطر واحد دائمًا: «Request a Quote» أطول من «طلب عرض سعر» فكان ينكسر سطرين
   ويرتفع الزر عن بقية عناصر الهيدر. nowrap يمنع الكسر، وتقليل الفجوات أدناه
   يوفّر له العرض الإضافي في الإنجليزية بدل أن يزحم القائمة. */
.header-cta { min-height: 44px; padding: 10px 22px; gap: 0; border-radius: 8px; font-size: 13px; letter-spacing: .01em; white-space: nowrap; transition: transform var(--ease), background var(--ease), color var(--ease), border-color var(--ease), box-shadow var(--ease); }
.site-header:not(.scrolled) .header-cta { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .42); letter-spacing: .03em; }
.site-header:not(.scrolled) .header-cta:hover { background: rgba(255, 255, 255, .06); border-color: #fff; }
.site-header.scrolled .header-cta { background: var(--primary); color: #fff; border-color: transparent; box-shadow: none; }
.site-header.scrolled .header-cta:hover { background: var(--primary-900); }

/* ---------- الهيدر في الاتجاه اللاتيني ----------
   تسميات القائمة الإنجليزية أطول من العربية («Sales & Marketing» مقابل «المبيعات
   والتسويق»)، وزر «Request a Quote» أعرض من «طلب عرض سعر» بنحو ٥٠ بكسل. القياس
   على هيدر حقيقي: عند 1366 يفيض الزر ٥٣ بكسل خارج الحاوية، وعند 1200 يفيض ١٨٢.
   لذلك نضغط الفجوات في الإنجليزية وحدها — والعربية تبقى بمسافاتها كما هي. */
html[dir="ltr"] .header-inner { gap: 24px; }
html[dir="ltr"] .desktop-nav > .nav-list { gap: clamp(12px, 1.5vw, 26px); }
html[dir="ltr"] .header-cta { padding-inline: 16px; }
html[dir="ltr"] .lang-toggle { min-width: 34px; }

/* وتحت 1330 بكسل لا تتّسع القائمة الإنجليزية مهما ضغطنا (القياس: فيض 14 بكسل عند 1301)،
   فننتقل إلى قائمة الجوال مبكرًا بدل حشر العناصر أو كسر الزر سطرين.
   العربية تبقى على حدّها الأصلي 1180. */
@media (max-width: 1330px) {
	html[dir="ltr"] .desktop-nav { display: none; }
	html[dir="ltr"] .menu-toggle { display: grid; }
	html[dir="ltr"] .header-cta { display: none; }
}
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-light { background: #fff; color: var(--primary); }
.btn-outline, .btn--ghost { border-color: var(--border); color: var(--primary); }
.btn-outline:hover, .btn--ghost:hover { border-color: var(--primary); }
.btn-ghost-light { border-color: rgba(255, 255, 255, .45); color: #fff; }
.text-link { display: inline-flex; gap: 9px; position: relative; font-size: 14px; font-weight: 700; }
.text-link::after { content: ""; position: absolute; inset: auto 0 -5px; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(.28); transition: transform var(--ease); }
html[dir=rtl] .text-link::after { transform-origin: right; }
.text-link:hover::after { transform: scaleX(1); }
.text-link-light { color: #fff; }

/* ---------- 4. قائمة الجوال + البحث ---------- */
.mobile-nav { position: fixed; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto; width: min(430px, 92vw); z-index: 1500; color: #fff; background: var(--primary-900); visibility: hidden; overflow-y: auto; box-shadow: -18px 0 60px rgba(0, 0, 0, .28); } /* الانزلاق في motion.css */
.mobile-nav.open { visibility: visible; }
.mobile-nav-inner { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding-block: 25px 32px; }
.mobile-nav-top { display: flex; align-items: center; justify-content: space-between; }
.mobile-nav-label { font-size: 12px; letter-spacing: .12em; opacity: .6; }
.mobile-close { color: #fff; font-size: 32px; }
.mobile-nav nav { display: flex; flex-direction: column; justify-content: center; padding-block: 30px; }
.mobile-nav nav > .nav-list { display: flex; flex-direction: column; gap: 6px; }
.mobile-nav .nav-list > li { display: flex; flex-wrap: wrap; align-items: center; }
.mobile-nav nav a { font-size: clamp(26px, 6.5vw, 38px); line-height: 1.3; font-weight: 700; } /* التتابع في motion.css */
.mobile-nav .nav-item { display: flex; flex-wrap: wrap; align-items: center; }
.mobile-nav .nav-item > a { flex: 1; }
.mobile-nav .nav-caret { display: none; }
.mobile-nav .nav-sub-toggle { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; background: transparent; border: 0; cursor: pointer; }
.mobile-nav .nav-sub-toggle i { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--ease); }
.mobile-nav .nav-sub-toggle[aria-expanded="true"] i { transform: rotate(-135deg) translateY(-2px); }
.mobile-nav .nav-sub { flex-basis: 100%; display: none; flex-direction: column; gap: 2px; padding: 6px 0 12px; padding-inline-start: 14px; border-inline-start: 1px solid rgba(255, 255, 255, .18); margin-block: 4px 10px; }
.mobile-nav .nav-sub-toggle[aria-expanded="true"] + .nav-sub { display: flex; }
.mobile-nav .nav-sub a { font-size: 16px !important; font-weight: 600 !important; opacity: .82; padding-block: 7px; }
.mobile-nav-bottom { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.search-overlay { position: fixed; inset: 0; z-index: 220; padding-top: clamp(90px, 15vh, 180px); background: rgba(0, 31, 70, .98); color: #fff; opacity: 0; visibility: hidden; transition: opacity var(--ease), visibility var(--ease); }
.search-overlay.open { opacity: 1; visibility: visible; }
.search-panel { max-width: 980px; }
.search-top { display: flex; justify-content: space-between; align-items: center; opacity: .65; }
.search-close { font-size: 34px; color: #fff; }
.search-form { margin-top: 35px; display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid rgba(255, 255, 255, .45); }
.search-form input { width: 100%; border: 0; background: transparent; color: #fff; outline: 0; padding: 20px 0; font-size: clamp(30px, 6vw, 72px); font-weight: 700; }
.search-form input::placeholder { color: rgba(255, 255, 255, .38); }
.search-submit { border: 0; background: transparent; color: #fff; font-size: 40px; cursor: pointer; }
.suggested { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.suggested > span { opacity: .55; margin-inline-end: 12px; font-size: 12px; }
.suggested a { border: 1px solid rgba(255, 255, 255, .22); color: #fff; padding: 8px 13px; }

/* ---------- 5. الهيرو ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: var(--primary-900); }
.hero-media, .hero-overlay, .hero-lines { position: absolute; inset: 0; }
.hero-media { background-position: center 55%; background-size: cover; background-repeat: no-repeat; } /* حركة الاستقرار في motion.css */
.hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { background: linear-gradient(90deg, rgba(0, 24, 53, .88), rgba(0, 33, 72, .6) 48%, rgba(0, 33, 72, .17)), linear-gradient(0deg, rgba(0, 20, 43, .5), transparent 50%); }
html[dir=rtl] .hero-overlay { background: linear-gradient(270deg, rgba(0, 24, 53, .88), rgba(0, 33, 72, .6) 48%, rgba(0, 33, 72, .17)), linear-gradient(0deg, rgba(0, 20, 43, .5), transparent 50%); }
.hero-lines { display: none; }
.hero-content { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .45fr); gap: clamp(40px, 10vw, 150px); align-items: end; padding-top: 160px; padding-bottom: clamp(110px, 12vh, 150px); }
.hero-copy { max-width: 850px; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--accent); }
.eyebrow.dark { color: var(--primary); }
.hero-title { margin: 20px 0 24px; font-size: clamp(50px, 7vw, 108px); line-height: .98; letter-spacing: -.055em; font-weight: 800; }
html[dir=rtl] .hero-title { letter-spacing: -.03em; line-height: 1.13; }
.hero-lead { margin: 0; max-width: 680px; font-size: clamp(16px, 1.5vw, 21px); color: rgba(255, 255, 255, .78); }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.hero-aside { border-inline-start: 1px solid rgba(255, 255, 255, .24); padding-inline-start: 28px; }
.hero-aside .hero-index { font-family: var(--font-en); font-size: 11px; letter-spacing: .15em; opacity: .6; }
.hero-aside p { font-size: 13px; color: rgba(255, 255, 255, .72); }
.scroll-indicator { position: absolute; z-index: 4; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; color: rgba(255, 255, 255, .65); font-size: 10px; letter-spacing: .13em; }
.scroll-indicator i { width: 1px; height: 28px; background: currentColor; animation: scrollLine 1.7s ease-in-out infinite; transform-origin: top; }
@keyframes scrollLine { 0%, 100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- 6. الأقسام ---------- */
.section-heading { margin-bottom: clamp(40px, 6vw, 80px); }
.section-heading h2, .intro h2, .manufacturing h2, .sustainability h2, .investor-strip h2 { margin: 16px 0 0; font-size: clamp(36px, 5vw, 72px); line-height: 1.13; letter-spacing: -.045em; }
html[dir=rtl] .section-heading h2, html[dir=rtl] .intro h2, html[dir=rtl] .manufacturing h2, html[dir=rtl] .sustainability h2, html[dir=rtl] .investor-strip h2 { letter-spacing: -.025em; }
.section-heading.split { display: grid; grid-template-columns: 1.25fr .55fr; gap: 60px; align-items: end; }
.section-heading.split p { margin: 0; color: var(--muted); }
.display-sm { font-size: clamp(42px, 5vw, 76px) !important; }
.intro-grid { display: grid; grid-template-columns: .38fr 1.62fr; gap: clamp(40px, 8vw, 120px); }
.intro-main { display: grid; grid-template-columns: 1.2fr .55fr; gap: clamp(40px, 7vw, 100px); align-items: end; }
.intro-main h2 { margin: 0; }
.intro-copy p { margin: 0 0 30px; color: var(--muted); }

.section-navy { background: var(--primary); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(255, 255, 255, .2); border-bottom: 1px solid rgba(255, 255, 255, .2); }
.stat { min-height: 210px; padding: 38px 28px; display: flex; flex-direction: column; justify-content: space-between; border-inline-start: 1px solid rgba(255, 255, 255, .2); }
.stat:first-child { border-inline-start: 0; }
.stat strong { font-family: var(--font-en); font-size: clamp(54px, 6vw, 86px); line-height: 1; letter-spacing: -.055em; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.stat span { color: rgba(255, 255, 255, .72); font-size: 13px; }

.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.product-card { border: 1px solid var(--border); background: #fff; transition: border var(--ease), transform var(--ease); display: flex; flex-direction: column; }
.product-card:hover { border-color: var(--primary); transform: translateY(-4px); }
.image-wrapper { overflow: hidden; background: var(--surface); }
.image-wrapper img { transition: transform 650ms cubic-bezier(.2, .8, .2, 1); }
.product-card:hover img, .news-card:hover img { transform: scale(1.035); }
.product-image { aspect-ratio: 1.18 / 1; position: relative; display: block; }
.product-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.04); }
.product-code { position: absolute; inset: auto auto 0 0; padding: 9px 12px; background: var(--primary); color: #fff; font-family: var(--font-en); font-weight: 800; font-size: 11px; direction: ltr; }
html[dir=rtl] .product-code { inset: auto 0 0 auto; }
.product-code-green { background: var(--green); }
.product-code-red { background: var(--red); }
.product-code-teal { background: var(--accent); }
.product-content { display: flex; justify-content: space-between; gap: 20px; padding: 26px; flex: 1; }
.card-tag { color: var(--accent-dark); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.product-content h3 { margin: 8px 0; font-size: 21px; }
.product-content p { margin: 0; color: var(--muted); font-size: 13px; }
.card-arrow { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); font-family: var(--font-en); transition: all var(--ease); }
.product-card:hover .card-arrow { background: var(--primary); color: #fff; transform: translate(3px, -3px); }
html[dir=rtl] .product-card:hover .card-arrow { transform: translate(-3px, -3px); }
.products-footer { margin-top: 40px; display: flex; justify-content: center; }

.manufacturing { background: var(--surface); overflow: hidden; }
.manufacturing-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(50px, 8vw, 120px); align-items: center; }
.manufacturing-image { position: relative; min-height: 620px; margin-inline-start: calc(var(--gutter) * -1); background: var(--primary-900); }
.manufacturing-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }
.image-caption { position: absolute; inset: auto 28px 28px auto; min-width: 190px; background: #fff; padding: 18px 20px; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
html[dir=rtl] .image-caption { inset: auto auto 28px 28px; }
.image-caption span { font-size: 11px; color: var(--muted); }
.image-caption strong { font-family: var(--font-en); font-size: 24px; direction: ltr; }
.manufacturing-copy > p { color: var(--muted); margin: 26px 0 38px; }
.accordion { border-top: 1px solid var(--border); }
.accordion-trigger { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: transparent; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 700; text-align: inherit; }
.accordion-trigger i { font-style: normal; font-size: 22px; transition: transform var(--ease); }
.accordion-trigger[aria-expanded=true] i { transform: rotate(45deg); }
.accordion-panel { border-bottom: 1px solid var(--border); }
.accordion-panel p { margin: 0; padding: 0 0 20px; color: var(--muted); font-size: 13px; }

.sustainability { position: relative; overflow: hidden; min-height: 720px; display: flex; align-items: center; color: #fff; background: var(--primary-900); }
.sustainability-media { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.sustainability-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 31, 70, .92), rgba(0, 31, 70, .56) 55%, rgba(0, 31, 70, .25)); }
html[dir=rtl] .sustainability-media::after { background: linear-gradient(270deg, rgba(0, 31, 70, .92), rgba(0, 31, 70, .56) 55%, rgba(0, 31, 70, .25)); }
.sustainability-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .55fr; gap: clamp(60px, 10vw, 150px); align-items: end; }
.sustainability-copy p { max-width: 620px; color: rgba(255, 255, 255, .72); margin: 25px 0 34px; }
.sustainability-points { border-top: 1px solid rgba(255, 255, 255, .28); }
.sustainability-points div { display: grid; grid-template-columns: 60px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.sustainability-points strong { font-family: var(--font-en); color: var(--accent); }

.investor-strip { padding-block: clamp(70px, 8vw, 110px); border-bottom: 1px solid var(--border); }
.investor-grid { display: grid; grid-template-columns: 1fr .7fr; gap: 70px; align-items: end; }
.investor-actions { display: flex; flex-wrap: wrap; gap: 26px; justify-content: flex-end; }
.ticker[hidden] { display: none; }
.ticker { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 13px; color: var(--muted); }
.ticker__symbol { font-weight: 700; color: var(--primary); }
.ticker__price { font-family: var(--font-en); font-weight: 800; font-size: 22px; color: var(--primary); font-variant-numeric: tabular-nums; }
.ticker__change { font-family: var(--font-en); font-variant-numeric: tabular-nums; }
.ticker__change.is-up { color: var(--green); } .ticker__change.is-down { color: var(--red); }

.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.news-image { aspect-ratio: 1.35 / 1; display: block; }
.news-image img { height: 100%; width: 100%; object-fit: cover; filter: saturate(.75); }
.news-meta { display: flex; justify-content: space-between; gap: 15px; margin-top: 18px; color: var(--muted); font-family: var(--font-en); font-size: 10px; letter-spacing: .07em; }
.news-meta span { color: var(--accent-dark); font-weight: 800; }
.news-card h3 { margin: 12px 0 16px; font-size: 19px; line-height: 1.45; }
.news-link { font-size: 12px; font-weight: 800; }
.news-link::after { content: " ↗"; font-family: var(--font-en); }

.cta { background: var(--primary); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta::before, .cta::after { content: ""; position: absolute; width: 48vw; height: 170px; background: rgba(0, 165, 181, .18); transform: skewY(-9deg); }
.cta::before { left: -10%; bottom: -60px; }
.cta::after { right: -15%; top: -110px; background: rgba(255, 255, 255, .05); }
.cta-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.cta h2 { margin: 18px 0; max-width: 1000px; font-size: clamp(40px, 6vw, 88px); line-height: 1.03; letter-spacing: -.055em; }
html[dir=rtl] .cta h2 { letter-spacing: -.02em; line-height: 1.2; }
.cta p { margin: 0; color: rgba(255, 255, 255, .7); }
.cta-actions { margin-top: 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- 7. الفوتر ---------- */
/* خلفية حبرية محايدة (لا كتلة لونية) يفصلها خط شعري، ومساحات واسعة وتباين هادئ */
.footer {
	--ft-line: rgba(255, 255, 255, .1);
	--ft-mute: rgba(255, 255, 255, .58);
	background: #08111f;
	color: #fff;
	padding-top: clamp(56px, 7vw, 88px);
	border-top: 1px solid var(--ft-line);
}
.footer-top {
	display: grid;
	grid-template-columns: 1.5fr .8fr 1.1fr .7fr;
	gap: clamp(32px, 5vw, 72px);
	padding-bottom: clamp(44px, 5vw, 68px);
}
.brand-footer { display: inline-block; margin-bottom: 20px; }
.brand-footer .brand-logo--dark { display: none; }
.brand-footer .brand-logo { height: 34px; width: auto; }
.footer-tagline {
	margin: 0;
	max-width: 34ch;
	font-size: 14px;
	line-height: 1.9;
	color: var(--ft-mute);
}
.footer-badge {
	margin-top: 26px;
	padding-top: 24px;
	border-top: 1px solid var(--ft-line);
	max-width: 260px;
}
.footer-badge img { width: min(210px, 100%); height: auto; opacity: .92; }
.footer-badge--anniv img { width: min(240px, 100%); opacity: 1; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }

.footer-col h2 {
	margin: 0 0 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--accent);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.footer-col a { color: var(--ft-mute); font-size: 14px; line-height: 1.7; transition: color var(--ease); }
.footer-col a:hover { color: #fff; }
/* رابط سريع: علامة صغيرة تنزلق عند المرور */
.footer-col > ul > li > a {
	position: relative;
	display: inline-block;
	padding-inline-start: 0;
	transition: color var(--ease), padding-inline-start var(--ease);
}
.footer-col > ul > li > a::before {
	content: "";
	position: absolute;
	inset-inline-start: -14px;
	top: 50%;
	width: 8px;
	height: 1px;
	background: var(--accent);
	opacity: 0;
	transition: opacity var(--ease);
}
.footer-col > ul > li > a:hover { padding-inline-start: 14px; }
.footer-col > ul > li > a:hover::before { opacity: 1; inset-inline-start: 0; }
.footer-menu { display: flex; flex-direction: column; gap: 13px; }

/* معلومات التواصل: أيقونة + نص */
.footer-contact li { display: flex; align-items: flex-start; gap: 12px; }
.footer-contact span:not(.footer-ico) { font-size: 14px; line-height: 1.75; color: var(--ft-mute); }
.footer-ico {
	flex: none;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 9px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--ft-line);
	color: var(--accent);
}
.footer-ico svg { width: 16px; height: 16px; }

/* حسابات التواصل */
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.footer-social a {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid var(--ft-line);
	color: rgba(255, 255, 255, .78);
	transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
.footer-social svg { width: 17px; height: 17px; }
.footer-social a:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	transform: translateY(-2px);
}

/* شريط الحقوق */
.footer-bottom {
	border-top: 1px solid var(--ft-line);
	min-height: 68px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 12.5px;
	color: rgba(255, 255, 255, .45);
}
.footer-legal { display: flex; align-items: center; gap: 20px; }
.footer-legal a { color: rgba(255, 255, 255, .5); font-size: 12.5px; transition: color var(--ease); }
.footer-legal a:hover { color: #fff; }
.footer-bottom .lang-toggle { color: rgba(255, 255, 255, .7); min-width: 0; height: auto; }
/* زر واتساب العائم ثابت في الزاوية اليمنى في الاتجاهين (قرار تصميمي معتمد)، وكان يجلس
   فوق طرف هذا الصف: مبدّل اللغة في الإنجليزية، وسطر الحقوق في العربية. نحجز له مساحة.
   الحشوة فيزيائية لا منطقية عمدًا — لأن الزر نفسه فيزيائي (right) ولا ينقلب مع الاتجاه.
   على الجوال تتولّى قاعدة لاحقة الأمر بحشوة سفلية بدل الجانبية. */
.footer-bottom { padding-right: 86px; }

/* ---------- 8. الحركة والمساعدات ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--slow), transform var(--slow); }
.reveal.visible { opacity: 1; transform: none; }
.image-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.2, .8, .2, 1); }
.image-reveal.visible { clip-path: inset(0); }
/* الزرّان العائمان في زاويتين متقابلتين: «العودة إلى الأعلى» يسارًا وواتساب يمينًا،
   في الاتجاهين معًا. الموضع فيزيائي لا منطقي عمدًا: واتساب مثبّت يمينًا بقرار تصميمي
   ولا ينقلب، فلو تبع زر العودة جهة نهاية السطر لانتقل إلى اليمين في الإنجليزية
   وجلس فوق واتساب — وهو ما كان يحدث فعلًا. */
.scroll-top { position: fixed; z-index: 80; inset: auto auto calc(24px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px)); width: 46px; height: 46px; border: 1px solid var(--border); background: #fff; color: var(--primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all var(--ease); }
.scroll-top.visible { opacity: 1; visibility: visible; transform: none; }
.whatsapp-fab { position: fixed; z-index: 80; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); right: calc(24px + env(safe-area-inset-right, 0px)); left: auto; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); transition: transform var(--ease), box-shadow var(--ease); }
.whatsapp-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 30px rgba(0, 0, 0, .34); }
.whatsapp-fab svg { width: 24px; height: 24px; }

/* ---------- 9. الصفحات الداخلية ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--primary-900); color: #fff; padding-top: calc(var(--header) + clamp(48px, 8vw, 110px)); padding-bottom: clamp(48px, 7vw, 90px); }
.page-hero::after { content: ""; position: absolute; inset: -20% -10% auto auto; width: 55vw; height: 140%; background: rgba(0, 165, 181, .08); transform: skewX(-18deg); pointer-events: none; }
.page-hero .container { position: relative; z-index: 2; }
.page-hero__title { font-size: clamp(36px, 5vw, 64px); line-height: 1.1; letter-spacing: -.04em; max-width: 900px; }
html[dir=rtl] .page-hero__title { letter-spacing: -.02em; line-height: 1.2; }
/* حجم العنوان بحسب طوله — العتبات في ncc_hero_title_class() داخل inc/helpers.php.
   القياس على 570 عنوانًا: الوسيط 29 حرفًا، و66% منها لا تتجاوز 40، فتحتفظ بحجمها الكامل.
   إعلانات تداول (90 حرفًا وأكثر) كانت تبتلع الشاشة في أربعة أسطر. */
.page-hero__title.is-long  { font-size: clamp(30px, 3.8vw, 48px); max-width: 820px; }
.page-hero__title.is-xlong { font-size: clamp(25px, 3vw, 38px); max-width: 760px; line-height: 1.35; letter-spacing: -.01em; }
.page-hero__eyebrow { display: inline-block; font-family: var(--font-en); font-weight: 800; font-size: 11px; letter-spacing: .1em; background: var(--primary); padding: 6px 10px; margin-bottom: 18px; }
.page-hero__meta { display: block; color: rgba(255, 255, 255, .6); font-size: 13px; margin-top: 12px; font-family: var(--font-en); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; letter-spacing: .06em; color: rgba(255, 255, 255, .6); margin: 0 0 22px; padding: 0; text-transform: uppercase; }
.breadcrumb li + li::before { content: "/"; margin-inline-end: 10px; opacity: .4; }
.breadcrumb li[aria-current] { color: #fff; }
.page-content { padding-block: clamp(56px, 7vw, 100px); }
.prose { max-width: 76ch; font-size: 17px; line-height: 1.85; }
.prose h2 { font-size: clamp(26px, 3vw, 36px); margin: 48px 0 16px; letter-spacing: -.02em; color: var(--primary); }
.prose h3 { font-size: 22px; margin: 32px 0 12px; color: var(--primary); }
/* روابط النص المنسّق — باستثناء الأزرار.
   بدون :not(.btn) كان تلوين الروابط وتسطيرها يتغلّب على .btn-primary (تخصيص 0-1-1 مقابل 0-1-0)
   فيخرج الزر بنص أزرق مسطّر فوق خلفية كحلية. أي زر داخل .prose يبقى زرًّا. */
.prose a:not(.btn) { color: var(--accent-dark); text-decoration: underline; text-underline-offset: .15em; }
.prose .btn { text-decoration: none; }
.prose ul, .prose ol { padding-inline-start: 1.4em; margin: 0 0 1em; }
.prose img { margin-block: 28px; }
.prose__cover { margin: 0 0 40px; }

/* --- جداول المحتوى المستورد ---------------------------------------------
   إعلانات تداول في الأرشيف القديم مكتوبة بجداول «بند / توضيح» (420 جدولًا في
   المنشورات). القالب القديم كان ينسّقها، وقالبنا لم يكن يعرّف أي نمط للجداول
   إطلاقًا — فكانت تظهر نصًّا عاريًا بلا رؤوس ولا حدود.

   الوسم كما استُورد: <table class="stacktable large-only" width="80%">
   مع <thead> يحمل «بند» و«توضيح». لا توجد نسخة small-only في البيانات،
   فلا نُخفي الجدول على الجوال بل نتيح تمريره أفقيًا. */
.prose table {
	width: 100%;
	margin: 28px 0;
	border-collapse: collapse;
	font-size: 15.5px;
	line-height: 1.7;
}
.prose table th,
.prose table td {
	padding: 12px 16px;
	border: 1px solid rgba(0, 45, 98, .14);
	text-align: start;
	vertical-align: top;
}
/* صف الرؤوس */
.prose table thead th {
	background: var(--primary);
	color: #fff;
	font-weight: 600;
	border-color: var(--primary);
}
/* عمود «البند»: أول خلية في كل صفّ — والأول في RTL هو الأيمن، وهو المطلوب */
.prose table tbody tr > :first-child {
	background: var(--primary);
	color: #fff;
	font-weight: 600;
	width: 26%;
	border-color: var(--primary);
}
.prose table tbody tr:nth-child(even) > td:not(:first-child) { background: rgba(0, 45, 98, .025); }

/* الجوال: تمرير أفقي بدل عصر الأعمدة */
@media (max-width: 640px) {
	.prose table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: normal;
	}
	.prose table th,
	.prose table td { padding: 10px 12px; }
	.prose table tbody tr > :first-child { width: auto; min-width: 120px; }
}

/* بطاقات الأرشيف (منتجات/أخبار/بحث) */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { border: 1px solid var(--border); background: #fff; transition: border var(--ease), transform var(--ease); }
.card:hover { border-color: var(--primary); transform: translateY(-4px); }
.card__link { display: block; height: 100%; }
.card__media { position: relative; aspect-ratio: 1.18 / 1; background: var(--surface); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); transition: transform 650ms cubic-bezier(.2, .8, .2, 1); }
.card:hover .card__media img { transform: scale(1.035); }
.card__body { padding: 26px; }
.card__eyebrow { display: inline-block; color: var(--accent-dark); font-family: var(--font-en); font-size: 10px; font-weight: 800; letter-spacing: .08em; margin-bottom: 8px; }
.card__title { font-size: 20px; line-height: 1.35; }
.card__text { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.badge { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 6px 10px; }

/* المنتج الواحد */
.product { display: grid; gap: 48px; padding-block: clamp(56px, 7vw, 100px) clamp(32px, 4vw, 56px); }
.product__media { align-content: start; }
.product__shot { margin: 0; background: var(--surface); }
.product__media img { width: 100%; filter: saturate(.85); }

.specs { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 1em; }
.specs th, .specs td { padding: 13px 14px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: middle; }
.specs th { color: var(--primary); font-weight: 700; width: 46%; }
/* plaintext يمنع انقلاب القيم اللاتينية (‎≥ 42.5 MPa)، لكنه يجعل «start» تتبع اتجاه كل قيمة
   فتتفرّق المحاذاة. لذلك المحاذاة صريحة هنا لتبقى القيمة ملاصقة لمسمّاها. */
.specs td { color: var(--muted); unicode-bidi: plaintext; font-variant-numeric: tabular-nums; text-align: right; }
html[dir=ltr] .specs td { text-align: left; }
.specs tr:nth-child(odd) { background: var(--surface); }

/* ---------- لوحة الإجراء الختامية في صفحة المنتج ---------- */
.product-cta { padding-bottom: clamp(56px, 7vw, 100px); }
.product-cta__inner {
	display: grid;
	gap: 22px;
	padding: clamp(26px, 3.5vw, 40px);
	background: var(--surface);
	border-top: 3px solid var(--primary);
}
.product-cta__text { display: grid; gap: 8px; }
.product-cta__text h2 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); color: var(--primary); letter-spacing: -.01em; }
.product-cta__text p { margin: 0; max-width: 60ch; color: var(--muted); font-size: 15px; line-height: 1.8; }
.product-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* شعار «شريك» تحت نص اللوحة: أرضية اللوحة فاتحة فيظهر الشعار بألوانه بلا لوحة */
.product-cta__logo { display: block; height: 40px; width: auto; margin-top: 6px; }
.product-cta__meta { margin: 0; font-size: 14px; color: var(--muted); }
.product-cta__meta a { color: var(--primary); font-weight: 700; }

/* زر أكبر للإجراء الأساسي: الحجم جزء من الأولوية البصرية لا الزخرفة */
.btn-lg { min-height: 54px; padding: 14px 26px; font-size: 14px; }
.btn-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* رسائل، نماذج، ترقيم */
.notice { padding: 14px 18px; font-size: 14px; margin-top: 16px; }
.notice--success { background: #e6f6ee; color: var(--c-success); }
.notice--error { background: #fdeaea; color: var(--c-error); }
.notice--info { background: #e9eef8; color: var(--c-info); }
.page-content .search-form { margin-top: 32px; max-width: 640px; border-bottom-color: var(--border); }
.page-content .search-form input { color: var(--ink); font-size: clamp(22px, 3vw, 36px); }
.page-content .search-form input::placeholder { color: var(--gray); }
.page-content .search-submit { color: var(--primary); }
.pagination { margin-top: 48px; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers { min-width: 44px; height: 44px; display: inline-grid; place-items: center; padding-inline: 12px; border: 1px solid var(--border); font-family: var(--font-en); font-weight: 700; }
.pagination .current { background: var(--primary); color: #fff; border-color: var(--primary); }
.error-404 { text-align: center; max-width: 44rem; margin-inline: auto; padding-block: 60px; }
.error-404__code { font-family: var(--font-en); font-size: clamp(120px, 20vw, 220px); line-height: 1; color: var(--accent); font-weight: 800; letter-spacing: -.06em; margin: 0 0 16px; }
.error-404 h1 { font-size: clamp(28px, 4vw, 44px); color: var(--primary); margin-bottom: 16px; }
.error-404 .btn { margin-top: 16px; }

.newsletter { padding-block: var(--section); background: var(--surface); }
.newsletter__inner { display: grid; gap: 32px; }
.newsletter h2 { font-size: clamp(30px, 4vw, 48px); color: var(--primary); letter-spacing: -.03em; }
.newsletter__form { display: flex; flex-wrap: wrap; gap: 8px; }
.newsletter__form input[type=email] { flex: 1 1 240px; min-height: 48px; padding: 0 16px; border: 1px solid var(--border); background: #fff; }

/* ---------- 10. الاستجابة ---------- */
@media (min-width: 1024px) {
	.product { grid-template-columns: 1fr 1.4fr; align-items: start; }
	.product-cta__inner { grid-template-columns: 1fr auto; align-items: center; column-gap: 40px; }
	.product-cta__actions { justify-content: flex-end; }
	.product-cta__meta { grid-column: 1 / -1; }
	.newsletter__inner { grid-template-columns: 1fr 1fr; align-items: center; }
}
@media (max-width: 1180px) {
	.desktop-nav { display: none; }
	.menu-toggle { display: grid; }
	.header-cta { display: none; }
	.products-grid { grid-template-columns: repeat(2, 1fr); }
	.products-grid .product-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 11px); }
}
@media (max-width: 900px) {
	:root { --header: 74px; }
	.section-heading.split, .intro-grid, .intro-main, .manufacturing-layout, .sustainability-grid, .investor-grid { grid-template-columns: 1fr; }
	.hero-content { grid-template-columns: 1fr; }
	.hero-aside { max-width: 500px; }
	.stats-grid { grid-template-columns: repeat(2, 1fr); }
	.stat:nth-child(3) { border-inline-start: 0; }
	.manufacturing-image { margin: 0; min-height: 520px; }
	.investor-actions { justify-content: flex-start; }
	.news-grid { grid-template-columns: 1fr 1fr; }
	.news-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: calc(50% - 14px); }
	.footer-top { grid-template-columns: 1.3fr 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	:root { --gutter: 20px; --section: 82px; }
	.header-inner { gap: 14px; }
	.search-trigger { display: none; }
	.hero { min-height: 850px; }
	.hero-content { padding-top: 140px; padding-bottom: 105px; }
	.hero-title { font-size: clamp(48px, 15vw, 76px); }
	.hero-lead { font-size: 15px; }
	.hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
	.hero-aside { display: none; }
	.section-heading.split { gap: 24px; }
	.stats-grid { grid-template-columns: 1fr 1fr; }
	.stat { min-height: 165px; padding: 25px 16px; }
	.stat strong { font-size: clamp(42px, 12vw, 62px); }
	.products-grid, .news-grid { grid-template-columns: 1fr; }
	.products-grid .product-card:last-child, .news-card:last-child { grid-column: auto; max-width: none; }
	.manufacturing-image { min-height: 430px; }
	.sustainability { min-height: 780px; }
	.sustainability-points { margin-top: 30px; }
	.investor-actions { flex-direction: column; align-items: flex-start; }
	.footer-top { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
	.footer-brand { grid-column: 1 / -1; }
	.footer-bottom { flex-direction: column; justify-content: center; padding: 22px 0 76px; text-align: center; }
	.footer-legal { justify-content: center; }
	.search-form input { font-size: 32px; }
	.product-cta__actions { flex-direction: column; align-items: stretch; }
	.product-cta__actions .btn { width: 100%; }
}
@media (max-width: 410px) {
	.stats-grid { grid-template-columns: 1fr; }
	.stat { border-inline-start: 0 !important; border-top: 1px solid rgba(255, 255, 255, .2); }
	.stat:first-child { border-top: 0; }
	.footer-top { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
	.reveal { opacity: 1; transform: none; }
	.image-reveal { clip-path: none; }
}

/* =========================================================
   تتبُّع الحروف والعربية — مراجعة ما قبل التسليم (2026-09-16)
   =========================================================

   الحرف العربي متّصل بما قبله وما بعده، و letter-spacing تُدخِل فراغًا بين كل
   حرفين فتفكّ هذا الاتصال. على iOS تظهر الكلمة **مقطّعة** فعلًا — رُصد على
   آيفون في «صناعة سعودية منذ 2005» وتتبُّعها 0.32em — وعلى كروم تبدو مبعثرة
   وإن بقيت متصلة.

   والتتبُّع تقليد طباعي **لاتيني** للعناوين الصغيرة لا مقابل له في العربية.
   فيُلغى هنا في الاتجاه العربي وحده، ويبقى في النسخة الإنجليزية وفي المقاطع
   اللاتينية المعلَّمة بـ dir="ltr" (الأسعار، رموز تداول، أكواد المنتجات)
   — ولهذا :not([dir="ltr"]).

   وحيث كان التتبُّع كبيرًا (‏≥ 0.18em) فالمقصود «عنوان صغير متباعد»، فيُعوَّض
   بتباعد بين **الكلمات** لا بين الحروف: يحفظ الأثر البصري ولا يمسّ الاتصال.
   ========================================================= */

html[dir="rtl"] .breadcrumb ol:not([dir="ltr"]),
html[dir="rtl"] .card-tag:not([dir="ltr"]),
html[dir="rtl"] .card__eyebrow:not([dir="ltr"]),
html[dir="rtl"] .eyebrow:not([dir="ltr"]),
html[dir="rtl"] .hero-aside .hero-index:not([dir="ltr"]),
html[dir="rtl"] .mobile-nav-label:not([dir="ltr"]),
html[dir="rtl"] .news-meta:not([dir="ltr"]),
html[dir="rtl"] .page-hero__eyebrow:not([dir="ltr"]),
html[dir="rtl"] .scroll-indicator:not([dir="ltr"]) {
	letter-spacing: normal;
}

/* =========================================================
   معالجات خاصة بـ iOS / سفاري — مراجعة ما قبل التسليم (2026-09-16)
   ========================================================= */

/* حقول النماذج على الجوال: سفاري على iOS **يُكبّر الصفحة تلقائيًا** عند التركيز
   على أي حقل خطّه أصغر من 16 بكسل — ثم لا يعيدها إلى مقاسها. قِيس على الموقع:
   ٢٩ حقلًا في نماذج «واصل» و«الموردين» و«التوظيف» بخط 15 بكسل، أي أن كل حقل
   في الموقع كان يقفز بالصفحة عند لمسه على الآيفون.

   يكفي بلوغ 16 بكسل ليمتنع التكبير. والقاعدة مقصورة على مقاسات الجوال فيبقى
   تصميم سطح المكتب (15 بكسل) كما هو. والتخصيص مضبوط ليعلو قواعد
   `.wf-field input` و`.iv-ir-field input` بلا !important. */
@media (max-width: 782px) {
	/* التخصيص محسوب لا اعتباطي: قواعد الحقول القائمة مثل
	   `body.page-wasel-a .wf-field input` وزنها (0,2,2)، فيلزم تجاوزها.
	   كل :not([attr]) يضيف (0,1,0)، فاثنتان مع ثلاثة عناصر = (0,2,3).
	   ولهذا تحمل select وtextarea الحيلة نفسها: بدونها كانتا تبقيان 15 بكسل. */
	html body input:not([type="checkbox"]):not([type="radio"]),
	html body select:not([multiple]):not([size]),
	html body textarea:not([hidden]):not([aria-hidden]) {
		font-size: 16px;
	}

	/* حقل البحث عنوانٌ كبير لا حقل نموذج — يُستثنى صراحةً.
	   ويحمل :not() نفسها ليعلو القاعدة أعلاه: (0,3,3) مقابل (0,2,3). */
	html body .search-form input:not([type="checkbox"]):not([type="radio"]) {
		font-size: 32px;
	}
}

/* =========================================================
   شارة «صديق للبيئة» — مشتركة (الرئيسية، أرشيف المنتجات، صفحة المنتج)
   أخضر داكن على أخضر فاتح: تباين 5.8:1 (AA).
   ========================================================= */
.ncc-eco {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 11px;
	border-radius: 999px;
	background: #e6f4ea;
	color: #1c6b3f;
	border: 1px solid rgba(28, 107, 63, .22);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: normal;
	white-space: nowrap;
	vertical-align: middle;
}
.ncc-eco svg { flex: 0 0 auto; }
/* فوق لون الكيس في بطاقات الرئيسية: زجاجي يرث لون نص البطاقة */
.ncc-eco--on-color {
	background: rgba(255, 255, 255, .14);
	color: inherit;
	border-color: rgba(255, 255, 255, .38);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	margin-bottom: 10px;
}
/* ترويسة صفحة المنتج الداكنة */
.ncc-eco--hero {
	background: rgba(80, 184, 72, .16);
	color: #bfe8c4;
	border-color: rgba(191, 232, 196, .35);
	margin-inline-start: 10px;
	margin-bottom: 18px;
}
/* ==========================================
   NCC Global Hero Background
   All standard pages and posts
   ========================================== */

.site-main > .page-hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(0, 27, 65, 0.85),
            rgba(0, 45, 98, 0.75)
        ),
        url('../img/media/hero.jpg') !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}