/*
Theme Name: InTech Child
Theme URI: https://intech-ksa.com
Author: Industrial Technologies Co. Ltd.
Description: ثيم ابن لـ GeneratePress يحمل طبقة هوية InTech الإصدار 4.0 وفلتر x-default وأنماط القوالب. Child theme of GeneratePress carrying the InTech Brand System v4.0 layer, the x-default hreflang filter, and the block patterns.
Template: generatepress
Version: 1.31.23
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: itco-child
Tags: business, industrial, rtl-language-support, custom-menu
*/

/* ============================================================
   InTech identity layer — merged in build task B2 from
   css/tokens.css + css/styles.css, refined to Brand System v4.0.

   Six corrections were applied during the merge; each is marked
   [B2-1] … [B2-6] at the line it affects:

   [B2-1] Type families → system stack. Zero webfonts is a locked
          decision; Oswald / Barlow / IBM Plex Mono / Cairo /
          Tajawal stay brand references for logo and print only.
   [B2-2] --gradient-signal-arc removed. The site is allowed two
          gradients; Signal Arc is campaign-only in the system.
   [B2-3] #F8F9FA added as --gray. It is one of the two dominant
          body surfaces in v4.0 and had no token at all.
   [B2-4] Hero no longer sets a gradient behind text. "No text over
          a gradient, ever" is a v4.0 rule; the hero is the single
          solid Navy panel the page is allowed.
   [B2-5] .hero__promise was Flag Red on Navy — 2.2:1, a contrast
          failure. It is now white text carried by a 6px red rule,
          so red stays the accent without carrying the words.
   [B2-6] .btn--ghost-light hovered to a translucent white wash.
          Gate E6 permits white button text on #1F396D or #D90429
          only, so the hover now inverts to a white fill with Navy
          text instead.
   [B2-7] The 6px red rule on a highlighted spec-table row was
          specified but never written. Added as table.spec tr.is-key.

   Standing rules this file must never break:
     · radius 0 on every component
     · no shadows anywhere — depth is borders, rules and tints
     · Ink Black is text, never a background; Navy carries dark
     · Red is CTA and safety only, ~10% of any composition
     · white and #F8F9FA dominate the body; Navy is an accent
       surface, capped at one hero panel per page
     · Arabic takes no uppercase and no letter-spacing
   Logical properties throughout → RTL/LTR mirror automatically.
   ============================================================ */

/* ============================================================
   1 — TOKENS
   Values here are the BRAND values, not placeholders. Do not
   introduce a colour, family, radius or shadow that is not below.
   ============================================================ */

:root {
  /* --- Core palette (v4.0) --- */
  --flag-red: #D90429;         /* accent / CTA — 10% of composition */
  --regal-navy: #1F396D;       /* primary brand — accent surface */
  --ink-black: #0A0F16;        /* text only — NEVER a background */
  --blue-slate: #51647A;       /* text secondary */
  --pale-slate: #B9C2CC;       /* borders / dividers — never text */
  --gray: #F8F9FA;             /* [B2-3] dominant body surface, with white */
  --surface-raised: #ECEFF2;   /* derived tint — fills, zebra rows */

  --red-hover: #B00320;
  --navy-hover: #16294F;

  /* --- Semantic mapping (what components consume) --- */
  --color-primary: var(--regal-navy);
  --color-primary-hover: var(--navy-hover);
  --color-primary-weak: var(--surface-raised);
  --color-accent: var(--flag-red);
  --color-accent-hover: var(--red-hover);
  --color-accent-weak: var(--surface-raised);
  --color-text: var(--ink-black);
  --color-text-secondary: var(--blue-slate);
  --color-surface: #FFFFFF;    /* body default */
  --color-bg: var(--gray);     /* [B2-3] the alternating body surface */
  --color-border: var(--pale-slate);
  --color-on-primary: #FFFFFF;
  --color-on-accent: #FFFFFF;

  /* The system defines no success green. Informational states are
     navy, critical states red, neutral states Blue Slate. */
  --color-info: var(--regal-navy);
  --color-critical: var(--flag-red);
  --color-neutral: var(--blue-slate);

  /* --- Gradients (2-stop maximum, and never behind text) ---
     [B2-2] Signal Arc (red → navy) is not defined here: the system
     restricts it to campaign artwork, and the site is capped at two
     gradients. Deep Shop is retained for non-text panels only. */
  --gradient-deep-shop: linear-gradient(135deg, #1F396D, #0A0F16);
  --gradient-cold-roll: linear-gradient(180deg, #ECEFF2, #B9C2CC);

  /* --- Type families ---
     [B2-1] One system stack, zero webfonts. The display / body /
     Arabic distinctions are kept as separate tokens so the identity
     faces can be switched back on in one place if that is ever
     approved — nothing downstream would have to change. */
  --font-system: system-ui, -apple-system, "Segoe UI", Tahoma, Roboto,
                 "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-system);
  --font-body: var(--font-system);
  --font-ar-display: var(--font-system);
  --font-ar-body: var(--font-system);
  /* Specs and figures still need tabular, fixed-width glyphs. This is
     the platform's own monospace — no IBM Plex Mono, nothing fetched. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* --- Type scale · Latin (LTR) --- */
  --scale-en-h1: 600 4rem/1.0 var(--font-display);          /* 64 */
  --scale-en-h2: 600 2.5rem/1.1 var(--font-display);        /* 40 */
  --scale-en-h3: 500 1.625rem/1.2 var(--font-display);      /* 26 */
  --scale-en-h4: 500 1.25rem/1.25 var(--font-display);      /* 20 */
  --scale-en-h5: 600 1.125rem/1.3 var(--font-body);         /* 18 */
  --scale-en-body: 400 1rem/1.6 var(--font-body);           /* 16 */
  --scale-en-small: 400 0.875rem/1.55 var(--font-body);     /* 14 */
  --scale-en-caption: 500 0.8125rem/1.5 var(--font-mono);   /* 13 */
  --scale-en-eyebrow: 500 0.75rem/1.4 var(--font-mono);     /* 12 */

  /* --- Type scale · Arabic (RTL) — same sizes, +0.15 line-height,
         heavier display weight. --- */
  --scale-ar-h1: 700 4rem/1.15 var(--font-ar-display);
  --scale-ar-h2: 700 2.5rem/1.25 var(--font-ar-display);
  --scale-ar-h3: 600 1.625rem/1.35 var(--font-ar-display);
  --scale-ar-h4: 600 1.25rem/1.4 var(--font-ar-display);
  --scale-ar-h5: 600 1.125rem/1.45 var(--font-ar-body);
  --scale-ar-body: 400 1.0625rem/1.8 var(--font-ar-body);   /* 17 */
  --scale-ar-small: 400 0.9375rem/1.75 var(--font-ar-body); /* 15 */
  --scale-ar-caption: 500 0.875rem/1.6 var(--font-ar-body);
  --scale-ar-eyebrow: 600 0.8125rem/1.5 var(--font-ar-body);

  /* --- Spacing scale (base 8) --- */
  --space-hair: 0.25rem;  /*  4 — icon nudges only */
  --space-1: 0.5rem;      /*  8 — inline icon gap */
  --space-2: 1rem;        /* 16 — label to field */
  --space-3: 1.5rem;      /* 24 — card padding */
  --space-4: 2.5rem;      /* 40 — block separation */
  --space-5: 4rem;        /* 64 — section break */
  --space-6: 6rem;        /* 96 — page margin */

  /* --- Geometry: radius 0 everywhere. This is a brand rule. --- */
  --radius: 0;

  /* --- Elevation: the system uses NO shadows. Depth comes from
         borders, rules and surface tints. --- */

  /* --- Components --- */
  --button-padding-y: 17px;
  --button-padding-x: 26px;
  --card-padding: var(--space-3);
  --divider-thin: 1px solid var(--pale-slate);
  --divider-medium: 2px solid var(--ink-black);
  --divider-accent: 6px solid var(--flag-red);
  --focus-outline: 2px solid var(--ink-black);
  --focus-offset: 2px;

  /* --- Signature pattern: Blueprint Grid, 48px module, 1px rules --- */
  --blueprint-module: 48px;

  /* --- Layout --- */
  --container: 1200px;
  --grid-gutter: 24px;
  --page-margin: 24px;
  --header-topbar-h: 36px;
  --header-main-h: 72px;

  /* --- Motion --- */
  --transition-fast: 150ms ease;
  --transition-med: 250ms ease;
}

/* ------------------------------------------------------------
   Language resolution.
   Latin carries tracking; Arabic never takes letter-spacing or
   uppercase — both are switched off wholesale under [dir="rtl"].
   ------------------------------------------------------------ */
:root,
[dir="ltr"] {
  --font-base: var(--font-body);
  --font-heading: var(--font-display);

  --t-h1: var(--scale-en-h1);
  --t-h2: var(--scale-en-h2);
  --t-h3: var(--scale-en-h3);
  --t-h4: var(--scale-en-h4);
  --t-h5: var(--scale-en-h5);
  --t-body: var(--scale-en-body);
  --t-small: var(--scale-en-small);
  --t-label: var(--scale-en-caption);
  --t-eyebrow: var(--scale-en-eyebrow);

  --track-h1: 0.02em;
  --track-h2: 0.02em;
  --track-h3: 0.03em;
  --track-h4: 0.04em;
  --track-h5: 0;
  --track-caption: 0.08em;
  --track-eyebrow: 0.2em;
  --case-eyebrow: uppercase;
}

[dir="rtl"] {
  --font-base: var(--font-ar-body);
  --font-heading: var(--font-ar-display);

  --t-h1: var(--scale-ar-h1);
  --t-h2: var(--scale-ar-h2);
  --t-h3: var(--scale-ar-h3);
  --t-h4: var(--scale-ar-h4);
  --t-h5: var(--scale-ar-h5);
  --t-body: var(--scale-ar-body);
  --t-small: var(--scale-ar-small);
  --t-label: var(--scale-ar-caption);
  --t-eyebrow: var(--scale-ar-eyebrow);

  --track-h1: 0;
  --track-h2: 0;
  --track-h3: 0;
  --track-h4: 0;
  --track-h5: 0;
  --track-caption: 0;
  --track-eyebrow: 0;
  --case-eyebrow: none;
}

/* Latin numerals inside Arabic text — brand rule, all figures and
   units stay Latin even mid-sentence. */
[dir="rtl"] {
  font-variant-numeric: lining-nums;
}
.num,
[dir="rtl"] .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;
  unicode-bidi: embed;
}

/* ------------------------------------------------------------
   Responsive type. Breakpoints 560 / 900 / 1200 per the system.
   64px H1 is a desktop figure; it steps down, never below the
   44px touch-target logic that governs controls.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  :root, [dir="ltr"] {
    --t-h1: 600 3rem/1.05 var(--font-display);
    --t-h2: 600 2rem/1.15 var(--font-display);
  }
  [dir="rtl"] {
    --t-h1: 700 3rem/1.2 var(--font-ar-display);
    --t-h2: 700 2rem/1.3 var(--font-ar-display);
  }
  :root { --space-6: 4rem; }
}

@media (max-width: 560px) {
  :root, [dir="ltr"] {
    --t-h1: 600 2.25rem/1.1 var(--font-display);
    --t-h2: 600 1.625rem/1.2 var(--font-display);
    --t-h3: 500 1.375rem/1.25 var(--font-display);
  }
  [dir="rtl"] {
    --t-h1: 700 2.25rem/1.25 var(--font-ar-display);
    --t-h2: 700 1.625rem/1.35 var(--font-ar-display);
    --t-h3: 600 1.375rem/1.4 var(--font-ar-display);
  }
  :root { --space-5: 3rem; --page-margin: 16px; }
}

/* ============================================================
   2 — CORE STYLESHEET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font: var(--t-body);
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-heading); }
h1 { font: var(--t-h1); font-family: var(--font-heading); letter-spacing: var(--track-h1); margin: 0 0 var(--space-2); }
h2 { font: var(--t-h2); font-family: var(--font-heading); letter-spacing: var(--track-h2); margin: 0 0 var(--space-2); }
h3 { font: var(--t-h3); font-family: var(--font-heading); letter-spacing: var(--track-h3); margin: 0 0 var(--space-1); }
h4 { font: var(--t-h4); font-family: var(--font-heading); letter-spacing: var(--track-h4); margin: 0 0 var(--space-1); }
h5 { font: var(--t-h5); letter-spacing: var(--track-h5); margin: 0 0 var(--space-1); }
p  { margin: 0 0 var(--space-2); }
a  { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding-inline-start: var(--space-3); }
strong, b { font-weight: 600; }

/* Every focus ring in the system: 2px Ink, 2px offset. */
:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

.section { padding-block: var(--space-5); }
.section--tint { background: var(--color-bg); }
.section--rule { border-top: var(--divider-medium); }

.section-head { max-width: 680px; margin-bottom: var(--space-4); }
.section-head p { color: var(--color-text-secondary); margin: 0; }

/* Eyebrow — mono, red, uppercase, wide tracking. Opens the single
   page hierarchy: eyebrow → title → Arabic mirror → content. */
.eyebrow {
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-1);
}

/* ================= SIGNATURE PATTERNS ================= */

/* Blueprint Grid — two crossed 1px rules on a 48px module. */
.blueprint {
  position: relative;
  isolation: isolate;
}
.blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px var(--blueprint-module)),
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px var(--blueprint-module));
}
.blueprint--on-navy::before { color: var(--blue-slate); opacity: 0.45; }
.blueprint--on-white::before { color: var(--pale-slate); opacity: 0.35; }

/* Rib Plate — vertical stripes, 26px pitch. Footers, side panels. */
.ribplate {
  background-image: repeating-linear-gradient(
    90deg,
    rgba(185, 194, 204, 0.14) 0 1px,
    transparent 1px 26px
  );
}

/* ================= BUTTONS ================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: var(--button-padding-y) var(--button-padding-x);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: var(--t-label);
  letter-spacing: var(--track-caption);
  text-transform: var(--case-eyebrow);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  text-decoration: none !important;
}

/* Primary is RED — the decisive action on the page. */
.btn--primary,
.btn--accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn--primary:hover,
.btn--accent:hover { background: var(--color-accent-hover); }

/* Secondary is Navy. */
.btn--secondary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.btn--secondary:hover { background: var(--color-primary-hover); }

/* Outline — transparent, navy rule, fills to Surface Raised. */
.btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn--outline:hover { background: var(--surface-raised); }

/* Knockout outline for dark surfaces.
   [B2-6] Hover inverts to a white fill with Navy text. A translucent
   white wash would put white button text on a surface that is neither
   #1F396D nor #D90429, which gate E6 does not allow. */
.btn--ghost-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}
.btn--ghost-light:hover {
  background: #fff;
  border-color: #fff;
  color: var(--regal-navy);
}

/* [T147-B4] §12: لا نصّ على Pale Slate — كان Blue Slate على Pale Slate
   (≈3.4:1). السطح المرفوع يحمل النصّ نفسه بـ≈5.2:1، والحدّ Pale Slate
   (دوره المأذون) يُبقي الزرّ المعطَّل مقروءاً شكلاً على الأبيض. */
.btn[disabled], .btn--disabled {
  background: var(--surface-raised);
  color: var(--blue-slate);
  border-color: var(--pale-slate);
  cursor: not-allowed;
}
.btn--sm { min-height: 40px; padding: 11px 18px; }
.btn--icon { padding: var(--space-1); min-width: 44px; }

/* ================= HEADER ================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--regal-navy);
  border-bottom: var(--divider-accent);
}

/* Thin utility strip, one step darker than the nav bar. */
.topbar {
  background: var(--navy-hover);
  color: rgba(255, 255, 255, 0.85);
  font: var(--t-label);
  letter-spacing: var(--track-caption);
  min-height: var(--header-topbar-h);
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block: var(--space-hair);
}
.topbar a { color: rgba(255, 255, 255, 0.85); }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar__contact { display: flex; align-items: center; gap: var(--space-3); }
.topbar__item { display: inline-flex; align-items: center; gap: var(--space-1); }

.langswitch { display: inline-flex; align-items: center; gap: var(--space-hair); }
.langswitch .sep { opacity: 0.4; }

/* Navy nav bar — the brand's navigation signature. */
.mainbar { min-height: var(--header-main-h); display: flex; align-items: center; }
.mainbar .container {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.brand { display: inline-flex; flex-direction: column; line-height: 1.1; }
.brand:hover { text-decoration: none; }
.brand__name {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: var(--track-h4);
  text-transform: var(--case-eyebrow);
  color: #fff;
}
.brand__sub {
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--pale-slate);
  margin-top: 2px;
}

.mainnav { display: flex; align-items: center; gap: var(--space-2); margin-inline: auto; }
.mainnav a, .mainnav .navlink {
  display: inline-flex;
  align-items: center;
  gap: var(--space-hair);
  padding: var(--space-1) 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: var(--track-h4);
  text-transform: var(--case-eyebrow);
  color: var(--pale-slate);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
[dir="rtl"] .mainnav a,
[dir="rtl"] .mainnav .navlink { font-family: var(--font-ar-display); font-weight: 600; }

/* Active state: white text + 3px red underline. */
.mainnav a:hover,
.mainnav .navlink:hover,
.mainnav .current-menu-item > a,
.mainnav .current_page_item > a,
.mainnav .navlink[aria-expanded="true"] {
  color: #fff;
  border-bottom-color: var(--flag-red);
  text-decoration: none;
}

/* ============================================================
   [CHROME-1…6] الترويسة ذات الطبقتين والتذييل — بنية فعلية لا CSS معلَّق.
   نُقلت من `website tests/sector-template` بعد قياسها وإصلاحها
   (المهمتان 28 و29)، وتقابل الترميز الذي يُخرجه `inc/chrome.php`.

   ⛔ ما كان هنا قبل اليوم كان `.dropdown.is-open` و`.mobile-panel.is-open`
   — أي قوائم لا تنفتح إلا بجافاسكربت يبدّل الصنف. لم يُكتب ذلك السكربت
   قط، ولا يجوز أن يُكتب: B5 تقفل الحركة على CSS بصفر JS. البديل هنا
   `:hover`/`:focus-within` على سطح المكتب و`<details>` على الجوال.
   ============================================================ */

/* [CHROME-1] قائمة سطح المكتب — أصناف ووردبريس القياسية
   (`.menu` · `.menu-item` · `.sub-menu`) كي يعمل `wp_nav_menu`
   بلا walker حين يُسنِد الفريق قائمة من لوحة التحكم. */
.menu { display: flex; align-items: center; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.menu > li { position: relative; }
.menu > li > a { padding-block: var(--space-2); }

/* القسم الحاوي لا الصفحة الحالية: `aria-current="page"` محجوز
   لمسار التنقّل، ووضعه هنا يُعلن للقارئ أنه على البوابة وهو ليس عليها. */
.mainnav a[data-current-section] { color: #fff; border-bottom-color: var(--flag-red); }

/* [CHROME-2] القائمة المنسدلة — مربّعة بحدّ وبلا ظلّ (§12).
   `visibility` لا `display` كي يعمل انتقال الشفافية، ولأن
   `display:none` يُخرج الروابط من ترتيب التركيز فيسقط `:focus-within`. */
.sub-menu {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  min-width: 260px;
  background: var(--color-surface);
  border: var(--divider-thin);
  border-top: var(--divider-accent);
  border-radius: var(--radius);
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast);
  z-index: 110;
}
.menu > li:hover > .sub-menu,
.menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; }
.sub-menu a {
  display: block;
  padding: var(--space-1) var(--space-2);
  font: var(--t-small);
  color: var(--color-text);
  border: 0;
  text-transform: none;
  letter-spacing: 0;
  min-height: 24px;
}
.sub-menu a:hover { background: var(--surface-raised); color: var(--color-primary); }

/* [CHROME-3] الشعار — النسخة المعكوسة وحدها تُقرأ على navy.
   `align-items: flex-start` لأن stretch الافتراضي كان يمدّ الصورة
   إلى عرض النصّ تحتها بينما الارتفاع مثبَّت ⇒ نسبة مشوّهة. */
.brand { align-items: flex-start; }
.brand__logo { height: 40px; width: auto; max-width: none; aspect-ratio: 900 / 192; }

/* [T79-1] السطر الوصفي العربي تحت اللوغو — الرئيسية العربية وحدها.
   يُقرأ سطراً مساعداً لا اسماً: حجم أصغر ووزن عادي ولون blue-slate،
   فلا ينافس اللوغو بصرياً ولا يُقرأ بديلاً للاسم الرسمي في التذييل.
   ولا يأخذ letter-spacing ولا uppercase — قاعدة العربية في §12. */
.brand__tagline {
  display: block;
  margin-top: 2px;
  font-size: 13px;   /* [T147-B7] 12px صغير على الحرف العربي */
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-muted, #51647A);
}
.site-header--navy .brand__tagline,
.topbar .brand__tagline { color: rgba(255, 255, 255, 0.82); }
@media (max-width: 560px) { .brand__tagline { display: none; } }

/* [CHROME-4] شريط الأدوات — أهداف اللمس ≥ 24px (WCAG 2.5.8). */
.topbar__tools { display: flex; align-items: center; gap: var(--space-2); }
/* [CHROME-4b] روابط الشركة الثلاثة داخل الشريط (القرار 48): مجموعة
   واحدة بفاصل رفيع يفصلها عن التنزيلات ومبدّل اللغة، كي تُقرأ
   كتلةً لا سلسلةً متصلة بما بعدها. */
.topbar__nav { display: flex; align-items: center; gap: var(--space-2); }
.topbar__nav + .topbar__item--downloads {
  padding-inline-start: var(--space-2);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
}
.topbar__item { min-height: 24px; }
.topbar .icon { width: 14px; height: 14px; flex: none; }
.langswitch__current { color: #fff; font-weight: 600; }
.langswitch__link { color: var(--pale-slate); }
.langswitch__link:hover { color: #fff; }

.header-cta { margin-inline-start: auto; white-space: nowrap; }

[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

/* [CHROME-5] درج الجوال — أكورديون `<details>` بصفر جافاسكربت.
   ⚠️ الدرج مُرسى على `.mainbar` لا على `.burger-details`: الأخيرة عرضها
   44px، و`inset-inline-start:0` مع `right:0` في RTL هما الحافة نفسها
   ⇒ كان الدرج ينهار إلى عرض الزر ويدفع الصفحة أفقياً. */
.mainbar { position: relative; }
.burger-details { display: none; }
.burger {
  list-style: none;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
}
.burger::-webkit-details-marker { display: none; }
.mobile-panel {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 120;
  padding: var(--space-2) var(--page-margin) var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--navy-hover);
  max-height: 75vh;
  overflow-y: auto;
}
.burger-details[open] .mobile-panel { display: block; }
.mobile-panel a { display: block; padding: 6px 0; min-height: 24px; color: var(--pale-slate); }
.mobile-panel a:hover { color: #fff; }
.mobile-accordion { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.mobile-accordion summary {
  padding: var(--space-1) 0;
  min-height: 44px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}
.mobile-accordion summary::-webkit-details-marker { display: none; }
.mobile-accordion summary::after { content: "+"; color: #fff; font-weight: 700; }
.mobile-accordion[open] summary::after { content: "\2212"; }
.mobile-submenu { list-style: none; padding: 0 0 var(--space-1); margin: 0; }
.mobile-submenu a { padding-inline-start: var(--space-2); }
.mobile-link { padding: var(--space-1) 0; font-weight: 600; display: block; color: var(--pale-slate); }
.mobile-panel .btn { margin-top: var(--space-2); text-align: center; display: block; }

/* [CHROME-6] التذييل — العناوين `<h2>` لا `<h4>`: أقسام التذييل
   عناوين حقيقية، والمستوى الدلالي لا يتبع المقاس البصري. */
.site-footer h2 { color: #fff; font-size: var(--t-h4); margin-bottom: var(--space-2); }
.footer-grid li { padding: 2px 0; }
.site-footer ul a { min-height: 24px; display: inline-flex; align-items: center; }

/* ============================================================
   [LAYOUT-1…4] لوحة الصفحة — التقاء أقسام الثيم بأغلفة GeneratePress.

   العطل المقيس (staging · 1440×900 · 2026-08-18): GeneratePress يطبع
   غلاف الصفحة `<div class="site grid-container container" id="page">`،
   و«container» هو **نفس اسم الصنف** الذي يستعمله هذا الثيم لخطّ
   المحتوى 1200px ⇒ قاعدة `.container` كانت تقع على الغلاف الخارجي
   أيضاً، فتُحبس الصفحة مرتين:

     body 1440 ← #page 1200 ← .site-content 1152 ←
     .inside-article 1072 (حشو GP 40px) ← <section> 1072 ← .container 992

   والنتيجتان هما ما رآه المالك: (١) الأشرطة المتناوبة والشريط الختامي
   navy تقف عند 1072px فتبدو جزراً داخل شاشة 1440 بدل أن تمتدّ حافةً
   إلى حافة؛ (٢) خطّ المحتوى 992px بينما خطّ الترويسة 1200px، وبداية
   كلٍّ منهما تفترق 64px ⇒ الترويسة والمتن لا يتحاذيان.

   الإصلاح: `inc/layout.php` يُسقط `container`/`grid-container` عن
   `#page` في القوالب التي يصمّمها هذا الثيم ويضيف `itco-canvas`،
   والقواعد أدناه تُصفّر حشو الأب بمُحدِّد دقيق لا بإلغاء شامل.
   ============================================================ */

/* [LAYOUT-1] الغلاف الخارجي: لوحة بعرض النافذة بلا سقف ولا حشو. */
.itco-canvas { max-width: none; padding-inline: 0; width: 100%; }

/* [LAYOUT-2] أغلفة GP الوسيطة لا تحمل حشواً: كل قسم يحمل حشوه
   بنفسه (`.section`) وحاويته بنفسه (`.container`). */
.itco-canvas .site-content,
.itco-canvas .content-area,
.itco-canvas .site-main { padding: 0; margin: 0; }

/* [LAYOUT-3] حشو `separate-containers` البالغ 40px هو ما كان يمنع
   الأشرطة من بلوغ الحافة. يُصفَّر لمقالة الصفحة وحدها — المحدِّد
   `>` مقصود: نتائج البحث مقالات أيضاً، لكنها داخل `.container`
   الخاصة بنا لا أبناءً مباشرين لـ`.site-main`، فتحتفظ بحشوها. */
.itco-canvas .site-main > article > .inside-article { padding: 0; }
.itco-canvas .site-main > article { margin-bottom: 0; border: 0; }

/* [LAYOUT-4] `.entry-content` لا يفتح بهامش علوي: أول عنصر فيه
   هيرو أو قسم، وكلاهما يحمل حشوه العلوي بنفسه. */
.itco-canvas .entry-content { margin-top: 0; }

/* [LAYOUT-5] الغلاف الذي يدسّه ووردبريس داخل كل `wp-block-group`.
   مقيس: **26 غلافاً** في الرئيسية وحدها، كلٌّ منها بـ`max-width:1200px`
   وحشو `40px` على الجانبين — وهو غلاف لم يكن في النموذج الذي اعتُمد
   التصميم منه (HTML خام بـ`.container` وحدها)، فلا شيء في الهوية
   يقابله. أثره تراكمي لأنه يتكرر في كل مستوى تعشيش:

     <section> 1440 → __inner-container (حشو 40) → .container 1120
     .container 1120 → __inner-container (حشو 40) → المحتوى 1040
     .section-head → __inner-container (حشو 40) → عنوان أعمق بـ40 أخرى

   ⇒ خطّ محتوى الهيرو 1200 (وهو HTML خام بلا غلاف) بينما بقية الأقسام
   1120، والنصّ داخلها 1040، والعناوين أعمق ⇒ حواف تبدأ من أربعة مواضع
   مختلفة في الصفحة الواحدة. تُصفَّر داخل لوحتنا وحدها: المسافات كلها
   تأتي من `.section` و`.container` ومكوّنات الهوية لا من هذا الغلاف. */
.itco-canvas .wp-block-group__inner-container {
  max-width: none;
  padding-inline: 0;
}

/* ================= HERO ================= */
/* [B2-4] Solid Regal Navy, not the Deep Shop gradient: v4.0 forbids
   text over a gradient outright. This is the one Navy panel a page
   is allowed — everything below it returns to white / #F8F9FA. */
.hero {
  position: relative;
  color: #fff;
  background: var(--regal-navy);
  padding-block: var(--space-6);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--blue-slate);
  opacity: 0.45;
  background-image:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px var(--blueprint-module)),
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px var(--blueprint-module));
}
.hero > .container { position: relative; }
.hero h1 { color: #fff; max-width: 18ch; }
[dir="rtl"] .hero h1 { max-width: 22ch; }
.hero .lede {
  font: var(--t-body);
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 60ch;
  margin-bottom: var(--space-3);
}
.hero .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.hero--slim { padding-block: var(--space-4); }
.hero--slim h1 { margin-bottom: var(--space-1); }
/* [B2-5] Was Flag Red on Navy — 2.2:1. White on Navy is 11.2:1, and
   the red stays present as the 6px rule rather than as the words. */
.hero__promise {
  font: var(--t-h3);
  color: #fff;
  border-inline-start: var(--divider-accent);
  padding-inline-start: var(--space-2);
  margin-bottom: var(--space-2);
}
.hero__pain { color: rgba(255, 255, 255, 0.8); max-width: 60ch; margin-bottom: 0; }

.crumbs {
  font: var(--t-label);
  letter-spacing: var(--track-caption);
  color: var(--pale-slate);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.crumbs a { color: var(--pale-slate); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #fff; }
.crumbs--light { color: var(--color-text-secondary); }
.crumbs--light a { color: var(--color-text-secondary); }
.crumbs--light [aria-current] { color: var(--color-text); }

/* ================= GRIDS & CARDS ================= */
.grid { display: grid; gap: var(--grid-gutter); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--card-padding);
  transition: border-color var(--transition-fast);
}
.card:hover { border-color: var(--color-primary); }
.card--link { display: flex; flex-direction: column; gap: var(--space-1); color: var(--color-text); }
.card--link:hover { text-decoration: none; }
.card--link:hover h3 { color: var(--color-primary); }

/* Icons: navy on light, square terminals, no fill. Red is reserved
   for safety-critical marks only — never decoration. */
.card__icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-primary);
  display: grid;
  place-items: center;
  margin-bottom: var(--space-1);
}
.card h3, .card h4 { margin: 0; }
.card__desc { color: var(--color-text-secondary); font: var(--t-small); margin: 0; }
.card__kicker {
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--color-accent);
}

/* Entry-path cards — 6px red top rule. */
.pathcards { display: grid; gap: var(--grid-gutter); grid-template-columns: 1fr 1fr; }
.pathcard {
  border: 1px solid var(--color-border);
  border-top: var(--divider-accent);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-text);
}
.pathcard:hover { text-decoration: none; border-color: var(--color-border); border-top-color: var(--flag-red); background: var(--surface-raised); }
.pathcard .go {
  font: var(--t-label);
  letter-spacing: var(--track-caption);
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: auto;
}

.strip { display: flex; gap: var(--space-2); overflow-x: auto; padding-bottom: var(--space-1); scroll-snap-type: x mandatory; }
.strip::-webkit-scrollbar { height: 4px; }
.strip::-webkit-scrollbar-thumb { background: var(--pale-slate); }
.strip__item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  min-width: 160px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  color: var(--color-text);
  font: var(--t-small);
}
.strip__item:hover { text-decoration: none; border-color: var(--color-primary); }
.strip__item .icon { color: var(--color-primary); }

/* Trust stats — numbers stay Latin and monospaced. */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.stat { border-inline-start: var(--divider-accent); padding-inline-start: var(--space-2); }
.stat__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--track-h2);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums lining-nums;
  direction: ltr;
}
[dir="rtl"] .stat__num { text-align: start; }
.stat__label { color: var(--color-text-secondary); font: var(--t-small); }

.feature h3 { display: flex; align-items: center; gap: var(--space-1); }
.feature h3 .icon { color: var(--color-primary); flex: none; }
.feature p { color: var(--color-text-secondary); margin: 0; }

/* Media placeholders — striped Surface Raised / Pale Slate until
   real workshop photography is supplied. */
.project-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.project-card__img,
.product-card__img,
.gallery .ph {
  aspect-ratio: 16 / 9;
  background-color: var(--surface-raised);
  background-image: repeating-linear-gradient(
    135deg,
    var(--pale-slate) 0 2px,
    transparent 2px 12px
  );
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--color-primary);
}
.project-card__body { padding: var(--space-2) var(--space-3) var(--space-3); }
.tag {
  display: inline-block;
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}
.project-card__result { color: var(--color-text-secondary); font: var(--t-small); margin: 0; }

.carousel { position: relative; }
.carousel__controls { display: flex; gap: var(--space-1); justify-content: flex-end; margin-bottom: var(--space-2); }
.carousel__btn {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: grid; place-items: center;
  cursor: pointer;
}
.carousel__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ================= CTA BAND ================= */
.ctaband {
  position: relative;
  background: var(--regal-navy);
  color: #fff;
  padding-block: var(--space-5);
  overflow: hidden;
}
.ctaband::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--blue-slate);
  opacity: 0.3;
  background-image:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px var(--blueprint-module)),
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px var(--blueprint-module));
}
.ctaband > .container { position: relative; }
.ctaband h2 { color: #fff; }
.ctaband p { color: rgba(255, 255, 255, 0.85); max-width: 60ch; }
.ctaband .actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }

/* ================= SPEC TABLES ================= */
.tablewrap { overflow-x: auto; border: 1px solid var(--color-border); background: var(--color-surface); }
table.spec {
  width: 100%;
  border-collapse: collapse;
  font: var(--t-small);
  min-width: 680px;
}
table.spec caption {
  text-align: start;
  font: var(--t-h4);
  font-family: var(--font-heading);
  letter-spacing: var(--track-h4);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  border-bottom: var(--divider-medium);
}
table.spec thead th {
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
  text-align: start;
  padding: var(--space-2);
  white-space: nowrap;
}
table.spec tbody td, table.spec tbody th {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  text-align: start;
}
table.spec tbody th { font-weight: 600; color: var(--color-primary); white-space: nowrap; }
table.spec tbody tr:nth-child(even) { background: var(--surface-raised); }
table.spec tbody tr:last-child td, table.spec tbody tr:last-child th { border-bottom: 0; }
table.spec td { color: var(--color-text-secondary); }
/* [B2-7] The highlighted spec row carries a 6px red rule. The v4.0
   table treatment calls for it; the source stylesheet had no rule. */
table.spec tr.is-key td, table.spec tr.is-key th { border-bottom: var(--divider-accent); }
table.spec .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; }

/* ================= CHALLENGE ↔ SOLUTION ================= */
.challenges { counter-reset: ch; display: grid; gap: var(--grid-gutter); grid-template-columns: repeat(2, 1fr); }
.challenge { position: relative; padding-inline-start: var(--space-4); }
.challenge::before {
  counter-increment: ch;
  content: counter(ch, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--color-primary);   /* [T147-B5] كان Flag Red ×5 في القسم — أكسنت أحمر واحد لكل شاشة (§12)، وNavy كما في .solution */
}
.connector { display: flex; align-items: center; gap: var(--space-1); color: var(--color-accent); font: var(--t-label); margin-block: var(--space-2); }
.connector::after { content: ""; flex: 1; border-top: 1px solid var(--color-border); }

.solutions { counter-reset: ch; display: grid; gap: var(--space-2); }
.solution {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  border: 1px solid var(--color-border);
  border-inline-start: var(--divider-accent);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
}
.solution::before {
  counter-increment: ch;
  content: counter(ch, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--color-primary);
}
.solution p { margin: 0; color: var(--color-text-secondary); }
.solution strong { display: block; color: var(--color-text); margin-bottom: 2px; }
/* [T142-1] ووردبريس يُدرج `wp-block-group__inner-container` داخل كل
   `wp-block-group` (ثيم كلاسيكي) ⇒ حين تكون الشبكة نفسها كتلة مجموعة
   يصير لها ابنٌ واحد هو الغلاف لا البطاقات. مقيس على الصفحة 28:
   `.challenges` ابنٌ واحد، والبطاقات الخمس في عمود واحد، وكل بطاقة
   1,295px لأن [BAL-2] يعطيها `block-size:100%` من ارتفاع الغلاف ⇒
   البطاقات 3–5 تفيض فوق قسمَي «كيف يُعالَج» و«مدى التهيئة».
   `display: contents` يُسقط الغلاف من شجرة التخطيط فتصير البطاقات
   أبناء الشبكة، والهامش الذي تضعه `is-layout-flow` يُصفَّر كي لا
   تنزاح بطاقة عن جارتها في الصف. محصور في كتل المجموعة وحدها. */
.wp-block-group:is(.challenges, .solutions, .grid, .grid--2, .grid--3, .grid--4,
  .steps, .pathcards, .articles, .indgrid, .tilerow, .valuestrip, .stats, .refprojects)
  > .wp-block-group__inner-container { display: contents; }
/* [T145-11] وعناصر الشبكة الحقيقية هنا هي الأحفاد لا الأبناء (الغلاف صار
   `display: contents`) ⇒ قاعدة `[T142-3]` (`.grid > *`) لا تبلغها، فكانت
   بطاقات `.challenges`/`.solutions` تحتفظ بـ`min-width:auto` وتتّسع لأي
   رمز طويل غير قابل للكسر على الهاتف. `min-width: 0` هنا يسدّ الفجوة. */
.wp-block-group:is(.challenges, .solutions, .grid, .grid--2, .grid--3, .grid--4,
  .steps, .pathcards, .articles, .indgrid, .tilerow, .valuestrip, .stats, .refprojects)
  > .wp-block-group__inner-container > * { margin-block: 0; min-width: 0; }

/* ================= ALERTS / PANELS ================= */
/* Left rule 6px + Surface Raised fill. Navy = info, red = critical,
   Blue Slate = neutral. */
.panel {
  border-inline-start: var(--divider-accent);
  border-inline-start-color: var(--color-primary);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: var(--space-2) var(--space-3);
}
.panel h3, .panel h4 { display: flex; align-items: center; gap: var(--space-1); margin-top: 0; }
.panel .icon { color: var(--color-primary); flex: none; }
.panel--accent { border-inline-start-color: var(--flag-red); }
.panel--accent .icon { color: var(--flag-red); }
.panel--neutral { border-inline-start-color: var(--blue-slate); color: var(--color-text-secondary); }
.panel > *:last-child { margin-bottom: 0; }

.panel-list { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin-top: var(--space-2); }
.panel-list li { display: flex; flex-direction: column; gap: 2px; }
.panel-list .k { font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: var(--case-eyebrow); color: var(--color-text-secondary); }
.panel-list .v { font-weight: 600; }

.callout {
  border: 1px solid var(--color-border);
  border-top: var(--divider-accent);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: var(--space-3);
}
.callout h3 { display: flex; align-items: center; gap: var(--space-1); margin-top: 0; }

.inex { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); }
.inex .col { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); background: var(--color-surface); }
.inex .col h3 { display: flex; align-items: center; gap: var(--space-1); margin-top: 0; }
.inex .col--in h3 .icon { color: var(--color-info); }
.inex .col--out h3 .icon { color: var(--color-critical); }
.inex ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-1); }
.inex li { display: flex; gap: var(--space-1); color: var(--color-text-secondary); align-items: baseline; }
.inex li .icon { flex: none; align-self: center; }
.inex .col--in li .icon { color: var(--color-info); }
.inex .col--out li .icon { color: var(--color-critical); }

.indgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.indcard { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2); background: var(--color-surface); }
/* [UX-1] Semantic level and visual scale are separate concerns.
   The industries grid sits under a section <h2>, so its cards must be <h3>
   or the heading order skips a level (WCAG 1.3.1). But h3 is 26px, which is
   oversized inside a compact 12-up card grid — the card was drawn for the
   20px h4 scale. So: keep the correct level, borrow the h4 scale.
   No new token, no new colour, no new font. */
.indcard :is(h3, h4) {
  font: var(--t-h4);
  letter-spacing: var(--track-h4);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: 0;
}
.indcard :is(h3, h4) .icon { color: var(--color-primary); }
.indcard p { margin: 0; color: var(--color-text-secondary); font: var(--t-small); }

.product-card { display: flex; flex-direction: column; gap: var(--space-1); }
.product-card__img { aspect-ratio: 4/3; border: 1px solid var(--color-border); margin-bottom: var(--space-1); }
.product-card .keyspec {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--t-label);
  letter-spacing: var(--track-caption);
  color: var(--color-primary);
  background: var(--surface-raised);
  border-radius: var(--radius);
  padding: var(--space-hair) var(--space-1);
  align-self: flex-start;
}
/* [UX-2] `.more` was scoped to `.product-card`, so the same link inside a
   plain `.card` rendered as unstyled body text. Promoted to a standalone
   class; `.product-card .more` keeps only what is specific to that card
   (push to the bottom of a flex column).
   `min-height: 24px` meets the WCAG 2.2 target-size minimum (2.5.8) for an
   inline text link — the 44px rule governs buttons, which already carry it. */
.more {
  font: var(--t-label);
  color: var(--color-primary);
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  min-height: 24px;
}
.product-card .more { margin-top: auto; }

.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.article-tease { display: flex; flex-direction: column; gap: var(--space-1); color: var(--color-text); border-top: var(--divider-medium); padding-top: var(--space-2); }
.article-tease:hover { text-decoration: none; }
.article-tease:hover h3 { color: var(--color-primary); }
.article-tease .kicker {
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--color-accent);
  font-variant-numeric: lining-nums;
}
.article-tease p { margin: 0; color: var(--color-text-secondary); font: var(--t-small); }

/* ================= FAQ ================= */
.faq { border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font: var(--t-h5);
  color: var(--color-text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--color-primary); flex: none; transition: transform var(--transition-fast); }
.faq details[open] summary { border-bottom: 1px solid var(--color-border); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .answer { padding: var(--space-2) var(--space-3); color: var(--color-text-secondary); margin: 0; }

.compliance ul { list-style: none; padding: 0; margin-top: var(--space-2); display: grid; gap: var(--space-1); }
.compliance li { display: flex; gap: var(--space-1); align-items: baseline; color: var(--color-text-secondary); }
.compliance li .icon { color: var(--color-primary); flex: none; align-self: center; }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.gallery .ph { aspect-ratio: 4/3; }
.gallery .ph.main { grid-column: 1 / -1; aspect-ratio: 21/9; }

/* ================= HOME LAYOUT RHYTHM =================
   [HOME-1] `.ph` was only ever styled as `.gallery .ph`, so a
   placeholder used anywhere else rendered as an unstyled empty div.
   Promoted to a standalone class — the same defect class as `.more`
   in task 26. `.gallery .ph` above still narrows the aspect ratio.

   [HOME-2] `.split` is the alternating text | visual section that
   carries most of the reference layout's rhythm. Logical grid order,
   so RTL mirrors it without a second rule. `--space-5` gutter keeps
   the two halves reading as separate columns, not one wrapped block.

   [HOME-3] The four-up value band and the equipment tile row replace
   the reference's photographic bands. Both stay on white or `--gray`:
   Navy is capped at one hero panel per page, so a second dark band is
   not available to us, and the emphasis those bands carried is
   rebuilt from rules and borders instead.

   [HOME-4] `.quote` carries the 6px red rule. That is the accent for
   its own screen — the reference gets the same emphasis from a dark
   panel, which the palette rules do not permit here.
   ------------------------------------------------------------ */
.ph {
  aspect-ratio: 16 / 9;
  background-color: var(--surface-raised);
  background-image: repeating-linear-gradient(
    135deg,
    var(--pale-slate) 0 2px,
    transparent 2px 12px
  );
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  color: var(--color-primary);
}
/* Caption sits inside the placeholder so the slot still says what it
   is waiting for. It is decorative text, never a content claim. */
.ph__note {
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--blue-slate);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-hair) var(--space-1);
  margin: 0;
  max-width: 80%;
  text-align: center;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.split__body > *:last-child { margin-bottom: 0; }
.split__body .actions { margin-top: var(--space-3); }
.split--flip .split__media { order: -1; }

.valuestrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.valuestrip__item {
  padding: var(--space-3);
  border-inline-start: 1px solid var(--color-border);
}
.valuestrip__item:first-child { border-inline-start: 0; }
.valuestrip__item h3 {
  font: var(--t-h5);
  font-family: var(--font-heading);
  letter-spacing: var(--track-h5);
  color: var(--color-primary);
  margin: 0 0 var(--space-1);
}
.valuestrip__item p { margin: 0; color: var(--color-text-secondary); font: var(--t-small); }

.tilerow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }
.tile {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.tile:hover { text-decoration: none; border-color: var(--color-primary); }
.tile:hover h3 { color: var(--color-primary); }
.tile .ph { aspect-ratio: 4 / 3; border: 0; border-bottom: 1px solid var(--color-border); }
.tile__body { padding: var(--space-2) var(--space-3) var(--space-3); display: grid; gap: var(--space-1); }
.tile h3 { font: var(--t-h4); font-family: var(--font-heading); letter-spacing: var(--track-h4); margin: 0; }
.tile p { margin: 0; color: var(--color-text-secondary); font: var(--t-small); }

.quote { border-inline-start: var(--divider-accent); padding-inline-start: var(--space-3); }
.quote blockquote {
  margin: 0;
  font: var(--t-h4);
  font-family: var(--font-heading);
  letter-spacing: var(--track-h4);
  color: var(--color-text);
}
.quote figcaption { margin-top: var(--space-2); color: var(--color-text-secondary); font: var(--t-small); }

/* ================= FOOTER ================= */
/* Navy, never Ink — Ink Black is text only. Rib Plate stripes. */
.site-footer {
  background: var(--regal-navy);
  color: var(--pale-slate);
  border-top: var(--divider-accent);
  padding-block: var(--space-4) var(--space-2);
  margin-top: var(--space-5);
}
.site-footer h4 { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-3); }
.site-footer a { color: var(--pale-slate); }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  font: var(--t-small);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .indgrid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .mainnav { display: none; }
  .burger-details { display: block; margin-inline-start: auto; }
  /* أربعة روابط نصّية في الشريط تلتفّ سطراً ثانياً على اللوح؛
     التنزيلات تُطوى أولاً لأنها الأقل نيّة، والثلاثة تبقى.
     ⚠️ المحدِّد مُنطاق بـ`.topbar__tools` عمداً: `[PROTO-8]` يُعيد
     تصريح `.topbar__item { display: inline-flex }` بعد هذا الاستعلام
     في الملف، وبخصوصية مساوية ⇒ قاعدة بصنف واحد هنا تكون **ميتة**.
     مقيس: كُتبت أولاً `.topbar__item--downloads` وحدها فلم تُطبَّق. */
  .topbar__tools .topbar__item--downloads { display: none; }
  .articles { grid-template-columns: repeat(2, 1fr); }
  .tilerow { grid-template-columns: repeat(2, 1fr); }
  .valuestrip { grid-template-columns: repeat(2, 1fr); }
  /* Row 2 of a 2×2 value band needs its own top rule, and the third
     item restarts the row so it must drop the inline-start rule. */
  .valuestrip__item:nth-child(3) { border-inline-start: 0; }
  .valuestrip__item:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
  /* The split stacks below 900: two 600px-wide halves is where a
     text column stops being comfortable to read. */
  .split { grid-template-columns: 1fr; gap: var(--space-4); }
  .split--flip .split__media { order: 0; }
}

@media (max-width: 560px) {
  .topbar__contact .hide-m { display: none; }
  /* [UX-3] `.indgrid` was missing from this list, so the industries grid was
     the only component still two-up below 560px. Sector names are long in
     Arabic ("الطيران والفضاء والبحري والسكك"), and a ~160px column wraps them
     to four cramped lines. Collapsing it matches every other grid here. */
  .grid--2, .grid--3, .grid--4, .indgrid,
  .challenges, .pathcards, .inex, .panel-list,
  .articles, .gallery, .stats,
  .tilerow, .valuestrip { grid-template-columns: 1fr; }
  /* Single column: every item after the first is separated by a top
     rule, and no item carries an inline-start rule. */
  .valuestrip__item { border-inline-start: 0; }
  .valuestrip__item + .valuestrip__item { border-top: 1px solid var(--color-border); }
  .solution { grid-template-columns: 1fr; }
  .solution::before { order: -1; }
  /* §7: الشعار + الهامبرغر + CTA المضغوط تبقى الثلاثة ظاهرة.
     ⚠️ المقاس محكوم بالإنجليزية لا بالعربية: «Request a Quote» أعرض. */
  .header-cta { padding: 10px 12px; font-size: 0.8rem; }
  .mainbar .container { gap: var(--space-1); }
  .brand__logo { height: 28px; }
  .mainbar { min-height: 60px; }
  /* شريط الأدوات كان يلتفّ سطوراً فيرفع الترويسة ⇒ الروابط النصّية
     تُطوى ويبقى الهاتف ومبدّل اللغة والبحث. الثلاثة والتنزيلات كلها
     في درج الجوال، فلا يصير رابط غير قابل للوصول. */
  .topbar__nav { display: none; }
  .topbar__tools .topbar__item:not([aria-label]) { display: none; }
  .topbar .container { flex-wrap: nowrap; }
}

/* ================= BADGE =================
   [B3-1] Added for the "قريبًا / Coming Soon" state on a product
   family that has no products in the matrix yet (family 6). Navy
   fill with white text is 11.2:1 and is one of the only two grounds
   gate E6 allows white text on — red is reserved for CTA and safety,
   and a "coming soon" state is neither. */
.badge {
  display: inline-block;
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius);
  padding: var(--space-hair) var(--space-1);
}
.badge--soon { background: var(--color-primary); }

/* ============================================================
   MOTION LAYER — native CSS scroll-driven animation only
   Added in build task B5. Zero JavaScript, zero libraries, zero
   scroll listeners. Marked [B5-1] … [B5-4] at the line affected.

   Scope is opt-in, never automatic: a page gets motion only if its
   pattern puts .hero--motion on the hero, and .h1--sweep on the H1.
   Home and sector pages only — product / family templates must not
   carry either class. One of each per page is the hard cap, and the
   opt-in class is what enforces it.

   Architecture rule that makes every fallback correct at once:
   THE BASE STYLE IS THE FINAL RESTING STATE. The keyframes move
   FROM an offset TO that base. So a browser with no scroll-timeline
   support, a reader with reduced-motion on, and a crawler reading
   raw HTML all land on the same compliant, readable result — the
   motion is progressive enhancement, never a display condition.

   Animated properties are transform / background-position only.
   Nothing here touches top / left / margin / width / height, so the
   layout box never changes and CLS contribution is zero.
   ============================================================ */

:root {
  /* [B5-1] Total parallax travel. The common ceiling is ~20vh; the
     brief caps this build at 8–12% of viewport height, so 10vh is
     the midpoint of the permitted band. The drift is split ±half
     around the resting position. */
  --parallax-travel: 10vh;
  /* The blueprint layer is bled past the hero edges by slightly more
     than half the travel, so drifting never exposes a bare Navy
     band at the top or bottom of the panel. */
  --parallax-bleed: 6vh;
}

/* ---------- Parallax: hero blueprint grid ----------
   [B5-2] The subject is .hero::before — the decorative blueprint
   grid — because the brand system ships no workshop photography yet
   (§12 records this gap). It is position:absolute with inset, so it
   is out of flow: translating it cannot move, reflow or resize a
   single text node. If a hero photograph is approved later, it
   becomes the subject and this rule is retargeted unchanged.

   background-attachment stays at its initial `scroll` value — never
   `fixed` — which is what avoids the iOS Safari repaint bug. */
.hero--motion::before {
  inset-block: calc(var(--parallax-bleed) * -1) calc(var(--parallax-bleed) * -1);
  transform: translate3d(0, 0, 0);   /* resting state = no offset */
}

@supports (animation-timeline: view()) {
  @keyframes itco-parallax-drift {
    from { transform: translate3d(0, calc(var(--parallax-travel) / -2), 0); }
    to   { transform: translate3d(0, calc(var(--parallax-travel) /  2), 0); }
  }

  .hero--motion::before {
    animation: itco-parallax-drift linear both;
    /* view() — not scroll() — so the drift is bound to this element
       passing through the viewport, not to whole-page scroll length. */
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

/* ---------- Scroll-driven gradient sweep on the H1 ----------
   [B5-3] CONTRAST GATE — read before applying a stop set.

   Measured against the Navy hero panel (#1F396D):
     white          → 11.2:1   PASS
     Pale Slate     →  6.17:1  PASS
     Flag Red       →  2.14:1  FAIL
     Regal Navy     →  1:1     FAIL (invisible)

   The brief forbids any single frame dropping below AA, so the
   Navy → Red pair cannot run on the Navy hero in any frame. Two
   compliant stop sets are defined below and NEITHER is auto-applied
   — which one is used is an owner decision, recorded as open.

   .h1--sweep is the mechanism. It is inert on its own: with no
   stop-set class beside it the heading renders as plain inherited
   colour, so a mis-applied class can never blank a headline. */
.h1--sweep {
  background-repeat: no-repeat;
  background-size: 300% 100%;
  /* Resting position parks the travelling band completely outside
     the visible window, so the resting fill is one flat colour. */
  background-position: 100% 0;
}

/* [B5-4] color:transparent is gated behind background-clip support.
   Without the gate, a browser that cannot clip the background to the
   glyphs would paint transparent text on Navy — an invisible H1.
   The gate makes that failure mode unreachable. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .h1--sweep-light,
  .h1--sweep-brand {
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
}

/* Option A — for the Navy hero. A luminosity sheen: the band is
   white dropped to 72% alpha, which composites to ~6.6:1 on Navy.
   Every frame sits between 11.2:1 and 6.6:1, so the whole sweep is
   above AA. Introduces no new token and no new colour. */
.h1--sweep-light {
  background-image: linear-gradient(100deg,
    #fff 0%, #fff 40%,
    rgba(255, 255, 255, 0.72) 50%,
    #fff 60%, #fff 100%);
  color: #fff;   /* resting + no-support fallback */
}
[dir="rtl"] .h1--sweep-light {
  background-image: linear-gradient(80deg,
    #fff 0%, #fff 40%,
    rgba(255, 255, 255, 0.72) 50%,
    #fff 60%, #fff 100%);
}

/* Option B — the Navy → Red pair the brief asks for, valid ONLY on
   a white / #F8F9FA surface, where Navy reads 11.2:1 and Red 5.25:1
   — both above AA. Do not place this on the Navy hero. */
.h1--sweep-brand {
  background-image: linear-gradient(100deg,
    var(--ink-black) 0%, var(--ink-black) 35%,
    var(--regal-navy) 50%,
    var(--flag-red) 65%,
    var(--ink-black) 100%);
  color: var(--ink-black);   /* resting + no-support fallback */
}
[dir="rtl"] .h1--sweep-brand {
  background-image: linear-gradient(80deg,
    var(--ink-black) 0%, var(--ink-black) 35%,
    var(--regal-navy) 50%,
    var(--flag-red) 65%,
    var(--ink-black) 100%);
}

@supports (animation-timeline: view()) {
  @keyframes itco-sweep {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
  }
  @keyframes itco-sweep-rtl {
    from { background-position: 0% 0; }
    to   { background-position: 100% 0; }
  }

  .h1--sweep {
    animation: itco-sweep linear both;
    animation-timeline: view();
    /* The sweep completes while the heading crosses the viewport —
       it does not stretch across the whole page. */
    animation-range: entry 0% cover 60%;
  }
  [dir="rtl"] .h1--sweep { animation-name: itco-sweep-rtl; }
}

/* ============================================================
   [PROTO-1…8] طبقة تصميم الرئيسية المعتمدة — من نموذج `website tests`
   بعد فحص 2026-08-17. إضافية بالكامل: صفر توكن جديد · صفر لون جديد
   · صفر webfont · صفر ظل · radius بلا تغيير · صفر جافاسكربت.
   كل مكوّن هنا مُعدِّل (modifier) لا استبدال ⇒ أنماط القطاع والعائلة
   الستة لا تتأثر بحرف واحد.
   ============================================================ */

/* [PROTO-1] هيرو فاتح — نقل لوحة navy من الهيرو إلى الشريط الختامي.
   §12 مستوفاة في الحالتين: لوحة navy واحدة لكل صفحة. والأبيض يسود
   جسم الصفحة كما ينصّ معيار القبول البصري. */
.hero--light {
  color: var(--color-text);
  background: var(--color-surface);
  border-bottom: var(--divider-thin);
}
.hero--light::before { content: none; }        /* لا شبكة بلوبرنت على الأبيض */
.hero--light h1:not(.grad-text) { color: var(--color-text); }
/* ⚠️ `.hero h1 { color:#fff }` الأساسية (0,1,1) تفوز على `.grad-text` (0,1,0)
   ⇒ بلا هذا السطر يُصيَّر العنوان أبيض على أبيض: غير مرئي تمامًا. */
.hero--light h1.grad-text { color: transparent; }
.hero--light .hero__promise {
  color: var(--color-primary);
  border-inline-start: var(--divider-accent);
  padding-inline-start: var(--space-2);
}
.hero--light .hero__pain,
.hero--light .hero__lede { color: var(--color-text-secondary); }

/* [PROTO-2] فقرة الهيرو — كانت في النموذج بلا تنسيق فامتدّت 1232px.
   65–75 حرفًا هو الحد المهني لطول السطر. */
.hero__lede {
  font: var(--t-body);
  font-size: 1.125rem;
  color: var(--color-text-secondary);
  max-width: 58ch;
  margin-bottom: var(--space-3);
}

/* [PROTO-3] تدرّج العنوان — صنف صريح لا محدِّد شامل.
   ⛔ لا يُعمَّم على h1…h4: المحدِّد الشامل في النموذج كان يفوز على كل
   مكوّن (0,1,2) فيجعل 41 عنوانًا شفّافًا ويُطفئ ألوان المكوّنات. */
.grad-text {
  background-image: linear-gradient(120deg,
    var(--regal-navy) 0%, var(--regal-navy) 35%, var(--flag-red) 50%,
    var(--regal-navy) 65%, var(--regal-navy) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;                 /* الساكن = هضبة navy نقية */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* النصّ هنا هو الخلفية المقصوصة، والمتصفح لا يطبع الخلفيات ⇒ بلا هذه
   القاعدة تُطبع العناوين فارغة. مشترٍ مؤسسي يطبع الصفحة لملف المشتريات. */
@media print {
  .grad-text {
    -webkit-background-clip: initial; background-clip: initial;
    color: var(--regal-navy) !important;
  }
}
@media (forced-colors: active) {
  .grad-text { background: none; color: CanvasText; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes itco-grad-settle     { from { background-position: 100% 0; } to { background-position: 0% 0; } }
    @keyframes itco-grad-settle-rtl { from { background-position: 0% 0; }   to { background-position: 100% 0; } }
    .grad-text {
      animation: itco-grad-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;     /* ينتهي مبكرًا ويستقرّ */
    }
    [dir="rtl"] .grad-text { animation-name: itco-grad-settle-rtl; }
    /* ⛔ عنوان الهيرو فوق الطية: لا "يدخل" المشهد أبدًا، فالحركة المرتبطة
       بالتمرير تتركه عند إطار عشوائي عند التحميل — وهو ما يُقرأ خطأ تصيير.
       يبقى ساكنًا على هضبة navy، والسويب لعناوين الأقسام وحدها.
       ومكسب إضافي: عنصر LCP بلا حركة. */
    .hero .grad-text { animation: none; background-position: 100% 0; }
  }
}

/* [PROTO-4] بطاقة قطاع بأيقونة — صفّ أفقي بشريط navy على الحافة الابتدائية.
   مُعدِّل: `.indcard` الأصلية تبقى كما هي لبقية القوالب. */
.indcard--icon {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-inline-start: 3px solid var(--color-primary);
  padding: var(--space-2) var(--space-3);
  transition: background var(--transition-fast);
}
.indcard--icon:hover { background: var(--color-bg); }
.indcard__icon {
  width: 30px; height: 30px; flex: none;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}
.indcard--icon:hover .indcard__icon { color: var(--flag-red); }
/* الشريط الأحمر ينمو من الحافة بدل أن يقفز — scaleY على طبقة مستقلة
   ⇒ حركة على التركيب لا على التخطيط، وتعمل RTL/LTR بلا تعديل. */
.indcard--icon::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -3px;
  width: 3px;
  background: var(--flag-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms ease-out;
}
.indcard--icon:hover::after,
.indcard--icon:focus-visible::after { transform: scaleY(1); }

/* [PROTO-5] خطوات مرقّمة — الترقيم هنا يحمل معلومة: تسلسل فعلي من
   الاحتياج إلى عرض السعر، لا زخرفة. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.step {
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  padding: var(--card-padding);
  background: var(--color-surface);
  transition: background var(--transition-fast), border-top-color var(--transition-fast);
}
.step:hover { background: var(--color-bg); border-top-color: var(--flag-red); }
.step__num {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.step h3 { margin: 0 0 var(--space-1); }
.step p { color: var(--color-text-secondary); font: var(--t-small); margin: 0; }

/* [PROTO-6] ظهور متدرّج عند التمرير. النمط الأساسي هو الحالة النهائية
   والحركة تتحرّك منها ⇒ متصفح بلا دعم، وزاحف يقرأ HTML خامًا، ومستخدم
   reduced-motion — ثلاثتهم يصلون إلى الصفحة كاملة.
   التتابع مجاني: كل بطاقة تعبر نطاقها في وقتها، بلا nth-child. */
@keyframes itco-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tile, .indcard, .valuestrip__item, .step, .feature {
      /* [T147-C1] backwards لا both: الإطار الأخير المملوء كان يتقدّم في
         التتالي على تحوّم [FX-4] فيُلغي ارتفاع البطاقة (مُثبت بمؤشر فعلي).
         والإطار الأخير = الحالة الطبيعية، فالظهور لم يتغيّر بصرياً. */
      animation: itco-rise 1 linear backwards;
      animation-timeline: view();
      animation-range: entry 5% entry 60%;
    }
  }
}

/* [PROTO-7] تكبير خفيف لصورة المعدة داخل إطار ثابت — خامل حتى وصول
   الصور التسع؛ المساحة المخطّطة لا تتحرّك. */
.tile .ph { overflow: hidden; }
.tile .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease-out; }
.tile:hover .ph img, .tile:focus-visible .ph img { transform: scale(1.03); }

/* [T165-1] صورة حقيقية في مساحة صورة خارج البلاطة (قسم «من نحن» في الرئيسية
   وأي `.ph` يحمل صورة): تملأ الإطار بنسبته وتُسقط الخطوط المائلة التي كانت
   تقول إن المساحة تنتظر صورة. البلاطة لها قاعدتها أعلاه [PROTO-7]. */
.ph > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph:has(> img) { background-image: none; }

/* [PROTO-8] إصلاحات مقيسة على النموذج، تسري على الثيم بنفس العلّة */

/* الشعار: align-items الافتراضي stretch كان يمدّه إلى عرض النصّ تحته
   بينما max-height يثبّت الارتفاع ⇒ نسبة 4.69 تُصيَّر 2.89. */
.brand { align-items: flex-start; }

/* أهداف اللمس ≥ 24px (WCAG 2.5.8) — كانت 14–20px في شريط الأدوات. */
.topbar__item,
.langswitch a,
.site-footer ul a { min-height: 24px; display: inline-flex; align-items: center; }
.topbar__item { padding-inline: 4px; }

/* إطار التركيز: ink على navy = 1.71:1 ⇒ غير مرئي. أبيض على الأسطح
   الداكنة. بلا box-shadow — الظلال ممنوعة في §12. */
.site-header :focus-visible,
.site-footer :focus-visible,
.ctaband :focus-visible,
.hero:not(.hero--light) :focus-visible { outline: 2px solid #fff; }

/* السؤال عنوانًا دلاليًا داخل summary — أقوى سطح استخراج لمحركات الإجابة. */
.faq summary :is(h3, h4) { font: inherit; margin: 0; color: inherit; }

/* الأرقام والوحدات لاتينية دائمًا داخل الجملة العربية — بلا عزل يُصيَّر
   رقم الهاتف معكوسًا: 0327 235 056. */
.num, [dir="ltr"] { unicode-bidi: isolate; }

/* الزر: كان translateY(-1px) — إزاحة بكسل بلا ظلّ يفسّرها تُقرأ ارتجافًا.
   البديل: إطار داخلي عند المرور، وانضغاط عند الضغط. */
.btn:hover { transform: none; }
.btn:active { transform: scale(0.985); }
.btn--primary:hover { outline: 2px solid var(--color-accent); outline-offset: -5px; }

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  /* الشعار وحده يكفي على الجوال — الاسم النصّي كان يرفع الترويسة
     إلى ~260px من أصل 812 في الإنجليزية. */
  .brand__sub { display: none; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Belt-and-braces for reduced motion. The global reset above already
   kills these by clearing animation-name, but scroll-driven timelines
   are new enough to be worth an explicit, targeted assertion: detach
   the timeline outright and pin both effects to their resting state. */
@media (prefers-reduced-motion: reduce) {
  .hero--motion::before,
  .h1--sweep {
    animation-timeline: auto !important;
    animation-range: normal !important;
  }
  .hero--motion::before { transform: translate3d(0, 0, 0) !important; }
  .h1--sweep { background-position: 100% 0 !important; }
}

/* ============================================================
   [SECTOR-1…5] طبقة قالب القطاع المعياري v2.0 — من فحص
   `website tests/sector-template` بتاريخ 2026-08-18.
   إضافية بالكامل: صفر توكن جديد · صفر لون · صفر خط · صفر ظل ·
   radius بلا تغيير · صفر جافاسكربت. كل قاعدة هنا إمّا مكوّن جديد
   لم يكن موجوداً، أو إصلاح مقيس يسري على الثيم بنفس العلّة
   ⇒ أنماط الرئيسية والعائلة لا تتأثر.
   ============================================================ */

/* [SECTOR-1] مسار التصفح داخل هيرو فاتح.
   `.crumbs` الأساسية pale-slate على navy. مع `.hero--light` يصير
   السطح أبيض ⇒ 1.63:1 وهو نصّ غير مقروء. النمط المخصّص موجود
   أصلاً (`.crumbs--light`) — وهذه القاعدة تجعله الافتراضي داخل
   الهيرو الفاتح فلا يعتمد الأمر على تذكّر المحرِّر. */
.hero--light .crumbs { color: var(--color-text-secondary); }
.hero--light .crumbs a { color: var(--color-text-secondary); }
.hero--light .crumbs a:hover { color: var(--color-primary); }
.hero--light .crumbs [aria-current] { color: var(--color-text); font-weight: 600; }

/* هدف لمس ≥ 24px — روابط مسار التصفح كانت 17px (WCAG 2.5.8) */
.crumbs a, .crumbs [aria-current] { min-height: 24px; display: inline-flex; align-items: center; }

/* [SECTOR-2] الشريط الختامي: `.ctaband > .container` لا يلتقط بنية
   نمط الكتل، لأن ووردبريس يُدرج `wp-block-group__inner-container`
   بين القسم والحاوية ⇒ الحاوية حفيدة لا ابنة، فتقع تحت طبقة
   شبكة البلوبرنت. المحدِّد بالنسل يصلح الحالتين. */
.ctaband .container { position: relative; }

/* [SECTOR-3] بطاقات المقالات المرتبطة — تُغذّى من المدونة.
   مكوّن جديد: لم يكن في الثيم ما يعرض مقالاً بصورة ومقتطف. */
.related-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--grid-gutter);
}
.post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  display: flex;
  flex-direction: column;
  transition: border-top-color var(--transition-fast), background var(--transition-fast);
}
.post-card:hover { border-top-color: var(--flag-red); background: var(--color-bg); }
.post-card .ph { aspect-ratio: 16 / 9; border: 0; border-bottom: 1px solid var(--color-border); }
.post-card__body { padding: var(--card-padding); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.post-card__tag { font-family: var(--font-mono); font-size: 13px; color: var(--color-primary); font-weight: 700; }   /* [T147-B7] كان 12px بالأحمر على كل بطاقة */
.post-card h3 { margin: 0; font: var(--t-h4); font-family: var(--font-heading); }
.post-card p { margin: 0; color: var(--color-text-secondary); font: var(--t-small); flex: 1; }
.post-card a { font-weight: 600; font: var(--t-small); min-height: 24px; display: inline-flex; align-items: center; }

/* [SECTOR-4] المشاريع المرجعية — القرار المفتوح 5 يمنع ذكر مشروع
   بعد. الخانة تُبنى وتُعلَّم ولا تُحذف، كي يلتقطها فحص §14 آلياً. */
.refprojects { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--grid-gutter); }
.refproject {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-primary);
  padding: var(--card-padding);
}
.refproject h3 { margin: 0 0 var(--space-1); font: var(--t-h4); font-family: var(--font-heading); }
.refproject p { margin: 0; color: var(--color-text-secondary); font: var(--t-small); }

/* [SECTOR-5] الشبكات تنهار عموداً واحداً على الهاتف — الجدول وحده
   يبقى قابلاً للتمرير داخل `.tablewrap`، ولا يمرّر الصفحة أفقياً. */
@media (max-width: 900px) {
  .refprojects { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .related-posts { grid-template-columns: 1fr; }
}

/* ============================================================
   طبقة [FX-1…8] — مؤثرات بصرية وحركية خفيفة (المهمة 32)

   أمر المالك 2026-08-18: parallax على الرئيسية · تدرّج نصّي متحرّك
   على العناوين الرئيسية وحدها · glassmorphism للبلوكات «إذا كانت
   خفيفة ولا تثقل الصفحات» · حركة خفيفة عند الاقتراب بالمؤشر ·
   القائمة في الوسط.

   القيود التي حكمت التنفيذ — §12 مقفلة ولم يُنتهك منها بند:
     · `radius: 0` بلا استثناء — لا زوايا دائرية في أي مكوّن جديد
     · ⛔ صفر ظلال — العمق من الحدود والشفافية لا من `box-shadow`
     · صفر لون جديد وصفر توكن لون جديد وصفر webfont
     · صفر جافاسكربت — الحركة كلها CSS scroll-driven/‏transition (B5)
   الخصائص المتحرّكة `transform` و`opacity` و`background-position`
   وحدها ⇒ صفر إعادة تخطيط وصفر مساهمة في CLS.
   ============================================================ */

/* [FX-1] ⛔ أُلغيت بأمر المالك 2026-08-18: «ألغِ الباترن خلف قسم
   الهيرو في الصفحة الرئيسية».
   كانت القاعدة تُعيد شبكة البلوبرنت `.hero::before` إلى الهيرو الفاتح
   لتكون موضوع الـparallax. بحذف تصريحاتها يستعيد
   `.hero--light::before { content: none }` (طبقة PROTO) سيادته
   ⇒ الهيرو سطح أبيض نظيف بلا أي نمط خلفه.

   ⚠️ أثر مقصود ومسجَّل: `.hero--motion` تبقى على نمطَي الرئيسية لكنها
   بلا موضوع تحرّكه ⇒ **لا parallax على الرئيسية بعد اليوم**. قواعد
   [B5-2] وقاعدة `prefers-reduced-motion` تبقى خاملة لا محذوفة، فمتى
   اعتُمدت صورة هيرو صارت هي الموضوع بلا تغيير في الكود. */

/* [FX-2] سويب التدرّج على عنوان الهيرو — موقوت لا مدفوع بالتمرير.
   PROTO-3 أوقفت حركة `.hero .grad-text` عمداً: العنوان فوق الطية فلا
   "يدخل" المشهد أبداً، والحركة المرتبطة بالتمرير تتركه عند إطار عشوائي
   عند التحميل. العلّة تخصّ `animation-timeline` وحدها ⇒ سويب موقوت
   يمرّ مرة واحدة عند التحميل يعطي الأثر المطلوب بلا تلك العلّة.
   طرفا التدرّج كلاهما هضبة navy نقية ⇒ الحالة النهائية = الساكن. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes itco-h1-sweep     { from { background-position: 100% 0; } to { background-position: 0% 0; } }
    @keyframes itco-h1-sweep-rtl { from { background-position: 0% 0; }   to { background-position: 100% 0; } }
    /* خصوصية مساوية لقاعدة PROTO-3 (0,2,0) وتالية لها في الملف ⇒ تفوز. */
    .hero .grad-text { animation: itco-h1-sweep 1100ms ease-out 150ms both; }
    [dir="rtl"] .hero .grad-text { animation-name: itco-h1-sweep-rtl; }
  }
}

/* [FX-3] Glassmorphism — نسخة ملتزمة بالهوية.
   المعالجة الشائعة تعتمد ثلاثة عناصر: شفافية + طمس الخلفية + زوايا
   دائرية + ظلّ ناعم. الأخيران محظوران في §12 حظراً صريحاً ⇒ نُفِّذ
   الأولان وحدهما، والحدّ يبقى 1px Pale Slate والزاوية تبقى صفراً.

   ⚠️ حدّ صادق يجب معرفته: الطمس لا يُظهر شيئاً إلا إذا كان خلفه شيء.
   أسطح الأقسام اليوم لون مسطّح (أبيض / #F8F9FA) ⇒ الأثر المرئي الآن
   هو التدرّج اللوني الخفيف وحده، ويصير طمساً حقيقياً يوم تصل الصور
   التسع (§12) فتظهر خلف البلاطات.

   الوزن: `backdrop-filter` عملية على وحدة الرسم. لذلك هي مقيَّدة
   بالشاشات فوق 560px — الهاتف يأخذ السطح المعتم كما كان — ومحصورة
   في مكوّنات البطاقات، ولا تلمس الترويسة ولا الشريط الختامي navy. */
:root {
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-blur: 10px;
}
.tile,
.card,
.step,
.feature,
.faq,
.valuestrip__item {
  background-color: var(--glass-bg);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 561px) {
    .tile,
    .card,
    .step,
    .feature,
    .faq,
    .valuestrip__item {
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(112%);
              backdrop-filter: blur(var(--glass-blur)) saturate(112%);
    }
  }
}
/* من يطلب تقليل الشفافية يعود إلى السطح المعتم بالكامل. */
@media (prefers-reduced-transparency: reduce) {
  .tile, .card, .step, .feature, .faq, .valuestrip__item {
    background-color: var(--color-surface);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}
/* ⛔ الشريط الختامي navy مستثنى: 72% أبيض فوق navy يعطي سطحاً فاتحاً
   يهبط بـBlue Slate إلى 3.4:1 — دون AA. البطاقات داخله تبقى معتمة. */
.ctaband .card,
.ctaband .feature,
.ctaband .tile {
  background-color: var(--color-surface);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

/* [FX-4] حركة خفيفة عند اقتراب المؤشر — على البطاقات كلها.
   `transform` وحدها تتحرّك ⇒ على طبقة التركيب، بلا إعادة تخطيط.
   مقيَّدة بـ`hover: hover` فلا تعلق حالة تحوّم على شاشة اللمس. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tile,
  .card,
  .step,
  .feature,
  .valuestrip__item {
    transition:
      transform 200ms ease-out,
      border-color var(--transition-fast),
      background-color var(--transition-fast);
  }
  .tile:hover,
  .tile:focus-visible,
  .card:hover,
  .step:hover,
  .feature:hover,
  .valuestrip__item:hover {
    transform: translateY(-3px);
  }
}
/* لون الحدّ يتغيّر بلا حركة أيضاً، فالمستخدم بـreduced-motion يبقى
   يرى استجابة للتحوّم بدل أن يفقدها كلياً. */
.feature:hover,
.valuestrip__item:hover { border-color: var(--color-primary); }

/* [FX-5] بنود «لماذا إندستريال» ومحاور الخدمات صارت بلوكات.
   `.feature` كانت تعرّف `h3` و`p` فقط بلا سطح ولا حدّ ⇒ تُصيَّر نصّاً
   عارياً بينما جاراتها في الأقسام الأخرى بطاقات. */
.feature {
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  padding: var(--card-padding);
}
.feature:hover { border-top-color: var(--flag-red); }
/* بنود شريط القيم: الحدّ الفاصل يصير حدّاً كاملاً كي يقرأ البند بلوكاً. */
.valuestrip {
  gap: 1px;
  background-color: var(--color-border);
  border-color: var(--color-border);
}
.valuestrip__item {
  border-inline-start: 0;
  border-top: 3px solid transparent;
  background-color: var(--glass-bg);
}
.valuestrip__item:hover { border-top-color: var(--flag-red); }

/* [FX-6] القائمة الرئيسية في وسط الصفّ فعلياً.
   `margin-inline: auto` وحده يوسّط الكتلة بين جارتين غير متساويتين
   ⇒ القائمة كانت تنزاح مع كل تغيّر في عرض الشعار أو نصّ الزر.
   شبكة 1fr / auto / 1fr توسّطها بالنسبة إلى الصفّ لا إلى جيرانها. */
@media (min-width: 901px) {
  .mainbar .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .brand      { justify-self: start; }
  .mainnav    { justify-self: center; margin-inline: 0; }
  .header-cta { justify-self: end; margin-inline-start: 0; }
}

/* [FX-7] فراغ صريح بين فقرة الألم التشغيلي وزرّي الهيرو. */
.hero .actions { margin-top: var(--space-3); }

/* [FX-8] كتلة الهوية النظامية في التذييل — السجل التجاري والرقم
   الضريبي وباركود السجل. القيم لم تَرِد من الفريق ⇒ علامات صريحة
   (§11)، والباركود مساحة مُعلَّمة لأنه يُولَّد من رقم السجل نفسه. */
.footer-legal {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  margin-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.footer-legal__facts { display: grid; gap: 2px; font: var(--t-small); }
.footer-legal__facts span { color: var(--pale-slate); }
.footer-legal__barcode {
  width: 96px;
  height: 96px;
  flex: none;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-1);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--pale-slate);
  font: var(--t-small);
  font-size: 0.7rem;
  line-height: 1.3;
}
.footer-legal__barcode img { width: 100%; height: 100%; object-fit: contain; }
.footer-contact { display: grid; gap: var(--space-hair); }
.footer-contact__role {
  color: var(--pale-slate);
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
}
.footer-emails { padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.footer-emails ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 900px) { .footer-emails ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-emails ul { grid-template-columns: 1fr; } }
/* أيقونة واتساب داخل رقم التذييل تأخذ لون النصّ نفسه — لا لون جديد. */
.site-footer .num .icon { width: 16px; height: 16px; flex: none; }

/* ============================================================
   GATEWAY LAYER — [GATE-1 … 4]
   الدفعة 2 من «الثيم أولاً». قالب البوابة لا يُدخل مكوّناً جديداً
   واحداً: بُني كله من مكوّنات قائمة كانت مُعرَّفة ولا يستعملها أي
   نمط — `.pathcard` و`.strip__item` و`.stat` و`.hero--slim`
   و`.card--link`. هذه الطبقة تُصلح أربعة فوارق ظهرت عند أول
   استعمال فعلي لها، **إضافية بالكامل**: لا قاعدة قائمة تُعدَّل،
   ولا توكن جديد، ولا لون، ولا زاوية، ولا ظلّ.
   ============================================================ */

/* [GATE-1] بطاقات مسار الدخول وبلاطات الشريط تنضمّ إلى طبقة الزجاج.
   هما سطحا بطاقة يقفان بجوار `.card` في الصفحة نفسها؛ بلا هذا
   السطر يبقيان أبيضين معتمين بينما جارتهما شفافة — وهو فارق يصير
   ظاهراً يوم تصل الصور التسع فيظهر الطمس خلف البطاقات (§12). */
.pathcard,
.strip__item {
  background-color: var(--glass-bg);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 561px) {
    .pathcard,
    .strip__item {
      -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(112%);
              backdrop-filter: blur(var(--glass-blur)) saturate(112%);
    }
  }
}
@media (prefers-reduced-transparency: reduce) {
  .pathcard, .strip__item {
    background-color: var(--color-surface);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

/* [GATE-2] وحركة التحوّم نفسها — بالقيد نفسه: `transform` وحدها
   تتحرّك، ومقيَّدة بـ`hover: hover` فلا تعلق حالة على شاشة اللمس. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pathcard,
  .strip__item {
    transition:
      transform 200ms ease-out,
      border-color var(--transition-fast),
      background-color var(--transition-fast);
  }
  .pathcard:hover,
  .strip__item:hover { transform: translateY(-3px); }
}

/* [GATE-3] `.more` كانت `margin-top: auto` داخل `.product-card` وحدها.
   شبكة البوابة تصفّ ستّ بطاقات بأوصاف متفاوتة الطول ⇒ «التفاصيل»
   كانت تقف عند ارتفاع مختلف في كل بطاقة. نفس فئة العطل التي
   عالجها [UX-2] حين كانت `.more` مُنطاقة على بطاقة واحدة. */
.card--link { height: 100%; }
.card--link .more { margin-top: auto; }

/* [GATE-4] الشريط يتمدّد أفقياً بالتمرير، وهو المقصود. لكن الحدّ
   الأدنى 160px يجعله يفيض على الهاتف قبل أن يبدأ التمرير في
   الاستجابة ⇒ يضيق تحت 560 ويبقى قابلاً للتمرير.
   ⚠️ `overflow-x` على `.strip` يقصّ داخلها ⇒ لا تجاوز أفقي للصفحة. */
@media (max-width: 560px) {
  .strip__item { min-width: 132px; }
}

/* ============================================================
   FORM LAYER — [FORM-1 … 8]   (المهمة 36 — الدفعة 3)

   لماذا هذه الطبقة أصلاً: `style.css` لم يكن يحمل **أي** مكوّن
   نموذج — صفر قاعدة على `input` أو `select` أو `textarea` أو على
   أي صنف من أصناف Fluent Forms. أي نموذج يُدرَج اليوم يُصيَّر
   بأنماط الإضافة الافتراضية: زوايا دائرية 5px وظلال ولون أزرق
   `#1a7efb` — ثلاثتها محظورة في §12 حظراً صريحاً.

   القاعدة الحاكمة: كل قيمة أدناه توكن قائم. صفر لون جديد ·
   صفر خطّ · صفر ظلّ · `radius: 0` بلا استثناء · صفر جافاسكربت.

   ⚠️ الطبقة تُنسّق سطحين معاً عمداً:
     (أ) عناصر HTML الأصلية — فيبقى المكوّن صالحاً لو استُبدلت
         الإضافة يوماً، ولا يتعلّق الشكل بطرف ثالث؛
     (ب) أصناف Fluent Forms 6.x — لأنها ما يُصيَّر فعلاً اليوم.
   ============================================================ */

/* [FORM-1] لوحة النموذج — سطح مؤطَّر يفصل النموذج عمّا حوله.
   بلا ظلّ وبلا زاوية: العمق من الحدّ والمساحة (§12). */
.formpanel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--space-4);
}
.formpanel > *:first-child { margin-top: 0; }
.formpanel > *:last-child { margin-bottom: 0; }

/* قاعدة أكسنت علوية 6px — نفس المعالجة التي تحمل التوكيد في
   `.quote` و`.panel--accent`، فلا يُستحدث أسلوب توكيد جديد. */
.formpanel--accent { border-top: var(--divider-accent); }

/* [FORM-2] المجموعة: تسمية فوق الحقل، وفراغ ثابت من مقياس الـ8.
   `--space-2` هو 16px، وهو ما يعرّفه مقياس المسافات بأنه
   «label to field». */
.ff-el-group,
.formrow {
  margin-bottom: var(--space-3);
}
.ff-el-group:last-child { margin-bottom: 0; }

.formpanel label,
.ff-el-input--label label {
  display: block;
  margin-bottom: var(--space-1);
  font: var(--t-h5);
  color: var(--color-text);
}

/* النجمة الحمراء علامة إلزام لا زخرفة: لونها أكسنت الهوية،
   وهي على أبيض 5.2:1 ⇒ فوق AA. */
.ff-el-is-required > label:after,
.ff-el-input--label.asterisk-right label:after {
  content: " *";
  color: var(--color-accent);
  font-weight: 700;
}

/* [FORM-3] الحقل نفسه.
   الارتفاع الأدنى 44px هو معيار هدف اللمس للأزرار وعناصر
   التحكّم (وليس 24px الذي يحكم الرابط النصّي داخل المتن). */
.formpanel input[type="text"],
.formpanel input[type="email"],
.formpanel input[type="tel"],
.formpanel input[type="url"],
.formpanel input[type="number"],
.formpanel input[type="date"],
.formpanel input[type="search"],
.formpanel select,
.formpanel textarea,
.ff-el-form-control {
  display: block;
  inline-size: 100%;
  min-block-size: 44px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--t-body);
  box-shadow: none;
  transition: border-color var(--transition-fast);
  -webkit-appearance: none;
          appearance: none;
}

/* [FORM-3b] تصحيح مقيس — لا استنتاج.
   القياس على صفحة مصيَّرة أظهر أن `select` و`textarea` بقيا بزاوية
   **7px** بينما `input` صار 0. السبب خصوصية لا ترتيب: Fluent Forms
   تكتب `.ff-default .ff-el-form-control` وهي (0,2,0)، بينما
   `.formpanel select` (0,1,1) و`.ff-el-form-control` (0,1,0)
   تسقطان أمامها — و`input` وحده نجا لأن `.formpanel input[type="text"]`
   تساوي (0,2,1).
   الحلّ عنصر + صنف تحت `.ff-default` ⇒ (0,2,1) تتفوّق يقيناً،
   **بلا `!important` وبلا اعتماد على ترتيب تحميل الملفات** — وهو
   ترتيب لا يضمنه أحد لأن الإضافة تُدرج ملفها عند التصيير.
   ⚠️ ويشمل التصحيح `font-family` و`padding` و`line-height`: القاعدة
   نفسها كانت تفرض stack خطوط لا يحوي خطاً عربياً. */
.ff-default input.ff-el-form-control,
.ff-default select.ff-el-form-control,
.ff-default textarea.ff-el-form-control {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--t-body);
  line-height: 1.5;
  box-shadow: none;
}
.ff-default select.ff-el-form-control { padding-inline-end: 40px; }

.formpanel textarea,
.ff-default textarea.ff-el-form-control,
textarea.ff-el-form-control {
  min-block-size: 120px;
  resize: vertical;
  line-height: inherit;
}

/* النائب نصّ مساعد لا نصّ محتوى: Blue Slate على أبيض = 6.1:1. */
.formpanel ::placeholder,
.ff-el-form-control::placeholder {
  color: var(--color-text-secondary);
  opacity: 1;
}

/* السهم الأصلي للقائمة المنسدلة يختفي مع `appearance: none`،
   فيُرسم بحدّ CSS خالص — صفر أيقونة مُحمَّلة وصفر صورة مضمّنة.
   ⚠️ [T147-C3] الموضع فيزيائي (`background-position: right …`) لأن
   `background-position` لا يقبل كلمات منطقية، ولذلك يُعكس صراحةً في
   قاعدة `[dir="rtl"]` التالية — لا تحذفها. */
.formpanel select,
.ff-default select.ff-el-form-control,
select.ff-el-form-control {
  padding-inline-end: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
                    linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
[dir="rtl"] .formpanel select,
[dir="rtl"] .ff-default select.ff-el-form-control,
[dir="rtl"] select.ff-el-form-control {
  background-position: left 13px center, left 18px center;
  background-image: linear-gradient(135deg, transparent 50%, var(--color-primary) 50%),
                    linear-gradient(45deg, var(--color-primary) 50%, transparent 50%);
}

/* [FORM-4] التركيز — نفس التوكن الذي يحكم كل عنصر تفاعلي في
   الموقع: 2px ink بإزاحة 2px. لا يُستبدل بلون حدّ خافت. */
.formpanel input:focus-visible,
.formpanel select:focus-visible,
.formpanel textarea:focus-visible,
.ff-el-form-control:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-color: var(--color-primary);
}
/* احتياطي للمتصفحات التي لا تعرف `:focus-visible` على الحقول. */
.formpanel input:focus,
.formpanel select:focus,
.formpanel textarea:focus,
.ff-el-form-control:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}

/* [FORM-5] الاختيارات — صندوق مربّع بحدّ، وعلامة مرسومة بحدّ.
   الهدف اللمسي يأتي من حشو الصفّ لا من حجم المربّع نفسه. */
.ff-el-form-check,
.formcheck {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
  min-block-size: 28px;
  padding-block: 2px;
}
.ff-el-form-check label,
.ff-el-form-check-label,
.formcheck label {
  margin-bottom: 0;
  font: var(--t-body);
  color: var(--color-text);
  cursor: pointer;
}
.formpanel input[type="checkbox"],
.formpanel input[type="radio"] {
  inline-size: 20px;
  block-size: 20px;
  min-block-size: 0;
  margin-block-start: 3px;
  flex: none;
  accent-color: var(--color-primary);
  border-radius: var(--radius);
}
/* شعاع الاختيار مربّع كذلك — `radius: 0` قاعدة هوية لا تفاوض
   فيها، وتسري على عنصر التحكّم نفسه لا على البطاقات وحدها. */
.formpanel input[type="radio"] { border-radius: 50%; }

/* [FORM-6] النصّ المساعد ورسالة الخطأ.
   الخطأ أحمر على أبيض = 5.2:1 ⇒ فوق AA؛ ولا يعتمد اللون وحده:
   الحدّ يتغيّر معه فيبقى الخطأ مُدرَكاً لمن لا يميّز اللون. */
.ff-el-help-message,
.formhelp {
  display: block;
  margin-top: var(--space-hair);
  font: var(--t-small);
  color: var(--color-text-secondary);
}
.ff-el-is-error .ff-el-form-control,
.formpanel [aria-invalid="true"] {
  border-color: var(--color-critical);
  border-inline-start-width: 3px;
}
.ff-el-is-error .error,
.ff-el-is-error .text-danger,
.error_text,
.formerror {
  display: block;
  margin-top: var(--space-hair);
  font: var(--t-small);
  color: var(--color-critical);
}

/* عنوان القسم داخل النموذج — نموذج طلب السعر ذو الثلاثة عشر
   حقلاً يحتاج تقسيماً بصرياً وإلا قُرئ عموداً واحداً طويلاً. */
.ff-el-section-title,
.formsection {
  margin-block: var(--space-4) var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: var(--divider-medium);
  font: var(--t-h4);
  color: var(--color-text);
}
.ff-el-group:first-child .ff-el-section-title,
.formsection:first-child { margin-block-start: 0; }

/* [FORM-7] زرّ الإرسال — نفس هندسة `.btn--primary` بالضبط.
   ⚠️ Fluent Forms تكتب لون الخلفية inline على الزرّ من إعدادات
   المحرِّر (`#1a7efb` افتراضاً)، ولا يُزيحه إلا `!important`.
   هذا هو الاستثناء الوحيد في الملف، وسببه أن المصدر سمة inline
   لا قاعدة CSS ⇒ لا يمكن الفوز عليه بالخصوصية. */
.ff-btn-submit,
.ff_submit_btn_wrapper .ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  padding: var(--button-padding-y) var(--button-padding-x) !important;
  border: 0;
  border-radius: var(--radius) !important;
  background: var(--color-accent) !important;
  color: var(--color-on-accent) !important;
  font: var(--t-h5);
  text-transform: none;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
.ff-btn-submit:hover,
.ff_submit_btn_wrapper .ff-btn:hover {
  background: var(--color-accent-hover) !important;
}
.ff-btn-submit:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* [FORM-8] رسالة النجاح — لا يوجد أخضر في اللوحة (§12 نصّاً:
   «النظام لا يعرّف أخضر نجاح»)، فالتأكيد navy بقاعدة بادئة. */
.ff-message-success,
.formsuccess {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-inline-start: 6px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--color-text);
}

/* شبكة الأعمدة التي تولّدها Fluent Forms لصفّ حقلين.
   تنهار عموداً واحداً على الهاتف كبقية شبكات الموقع. */
.ff-t-container { display: flex; flex-wrap: wrap; gap: 0 var(--grid-gutter); }
.ff-t-cell { flex: 1 1 240px; min-inline-size: 0; }

@media (max-width: 560px) {
  .formpanel { padding: var(--space-3); }
  .ff-t-cell { flex: 1 1 100%; }
}

/* ============================================================
   CONTACT LAYER — [CONTACT-1]   (المهمة 36 — الدفعة 3)
   ============================================================ */

/* [CONTACT-1] تصحيح مقيس — لا استنتاج.
   بطاقات «كيف تصل إلينا» كانت تصفّ الهواتف والصناديق الستة روابطَ
   سطرية داخل `<p>` يفصلها `<br>`. القياس على صفحة مصيَّرة أعطى
   **عشرة أهداف لمس بارتفاع 20px** — دون 24px التي يوجبها
   WCAG 2.5.8 لهدف المؤشر.
   ⚠️ ولا يكفي فصل كل رابط في فقرة مستقلة: صندوق العنصر السطري
   هو مساحة النقر، لا صندوق السطر الذي يحويه ⇒ الارتفاع يبقى 20px.
   والبنية نفسها كانت خاطئة دلالياً: قائمة قنوات اتصال تُكتب `<ul>`
   لا فقرةً يقطعها `<br>` — فيقرؤها المستعرض الصوتي «قائمة من ستة»
   بدل نصّ متصل.
   ⛔ صفر لون جديد وصفر توكن: الفراغ من مقياس الـ8 والألوان قائمة. */
.linkstack {
  list-style: none;
  padding: 0;
  margin-block: var(--space-2);
  display: grid;
  gap: var(--space-hair);
}
.linkstack li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1);
}
.linkstack a {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
}
/* اسم الغرض قبل العنوان — نصّ ثانوي لا رابط، ولذلك لا يأخذ
   هدف لمس ولا لون رابط. Blue Slate على أبيض = 6.1:1. */
.linkstack__role {
  color: var(--color-text-secondary);
  font: var(--t-small);
}

/* ============================================================
   [ROI-1…8] — ROI CALCULATOR  (task 38, 2026-08-19)
   ------------------------------------------------------------
   Owner order 2026-08-19: build the ROI calculator on staging as
   PROGRESSIVE ENHANCEMENT — every word of content is server-rendered
   and crawlable; JS only fills the result figures. §9 forbids
   JS-INJECTED CONTENT, not a JS read-out over rendered HTML.

   Zero new colours · zero new tokens · zero webfonts · zero shadows ·
   radius 0. Inputs inherit the form component built in task 36
   ([FORM-1…8]) by carrying `.formpanel` — this layer adds LAYOUT only.
   ============================================================ */

/* [ROI-1] Two-column shell. Single column below 1024 so the results
   panel follows the inputs instead of racing them. */
.roi {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .roi { grid-template-columns: 1.05fr 1fr; align-items: start; }
}
/* [T142-2] مسار `fr` يأخذ `min-width:auto` افتراضاً ⇒ جدول النتائج
   (`min-width:680px` في `table.spec`) كان يوسّع عمود النتائج إلى 819px
   فتفيض الصفحة الإنجليزية أفقياً إلى 1509px على شاشة 1440 (مقيس).
   تصفير الحدّ الأدنى يُبقي العمودين داخل الحاوية، والجدول يمرّر داخل
   `.tablewrap` كبقية جداول الموقع. */
.roi > * { min-width: 0; }
/* [T142-3] العلّة نفسها على الهاتف (390px، مقيس): بطاقة دراسة الحالة
   داخل `.grid` تتّسع إلى 732px بجدولها، وعمودا `.overview` في صفحة
   المنتج إلى 393px داخل حاوية 358px، وبلاطات `.stats` داخله كذلك ⇒
   تمرير أفقي للصفحة كلها. عنصر الشبكة لا يتّسع لمحتواه بعد اليوم. */
.grid > *, .grid--2 > *, .grid--3 > *, .grid--4 > *,
.overview > *, .stats > *, .tilerow > *, .indgrid > *, .valuestrip > *,
.steps > *, .pathcards > *, .articles > *, .related-posts > *, .refprojects > * { min-width: 0; }

/* [ROI-2] Input side. `.formpanel--accent` already supplies the 6px
   red top rule, so nothing is redeclared here. */
.roi__group {
  margin-block-end: var(--space-3);
  padding-block-end: var(--space-3);
  border-block-end: var(--divider-thin);
}
.roi__group:last-of-type { border-block-end: 0; padding-block-end: 0; }
.roi__group-title {
  font: var(--t-label);
  letter-spacing: var(--track-caption);
  color: var(--color-primary);
  margin-block-end: var(--space-2);
}
.roi__hint {
  display: block;
  font: var(--t-small);
  color: var(--color-text-secondary);
  margin-block-start: var(--space-hair);
}
.roi__2col { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
@media (min-width: 560px) { .roi__2col { grid-template-columns: 1fr 1fr; } }

/* Checkbox row — 20px control keeps the label's 24px hit area intact. */
.roi__check { display: flex; align-items: flex-start; gap: var(--space-1); }
.roi__check input[type="checkbox"] {
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 3px;
  accent-color: var(--flag-red);
  flex: 0 0 auto;
}
.roi__check label { margin: 0; font-weight: 400; min-block-size: 24px; }

/* [ROI-3] Advanced assumptions — closed by default. These are the
   figures the owner kept editable (decision 2026-08-19): they are
   labelled assumptions, not published claims. */
.roi__adv { border-block-start: var(--divider-thin); padding-block-start: var(--space-3); }
.roi__adv > summary {
  cursor: pointer;
  font: var(--t-h5);
  color: var(--color-primary);
  list-style: none;
  padding-block: var(--space-1);
  min-block-size: 24px;
}
.roi__adv > summary::-webkit-details-marker { display: none; }
.roi__adv > summary::after { content: " +"; color: var(--flag-red); font-weight: 700; }
.roi__adv[open] > summary::after { content: " −"; }

/* [ROI-4] Results panel. Sticky under the sticky main bar only where
   there is vertical room for it. */
@media (min-width: 1024px) {
  .roi__results { position: sticky; top: calc(var(--header-main-h) + var(--space-2)); }
}
.roi__head {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-3);
}
.roi__head h2 { margin: 0; font: var(--t-h4); color: var(--color-on-primary); }
.roi__body {
  border: 1px solid var(--color-border);
  border-block-start: 0;
  background: var(--color-surface);
}

/* [ROI-5] Headline figure + the 2×2 secondary grid. */
.roi__hero { padding: var(--space-3); border-block-end: var(--divider-thin); }
.roi__hero-label { font: var(--t-label); letter-spacing: var(--track-caption); color: var(--color-text-secondary); }
.roi__hero-value { font: var(--t-h2); color: var(--color-primary); margin-block: var(--space-hair); }
.roi__hero-sub { font: var(--t-small); color: var(--color-text-secondary); }

.roi__cells { display: grid; grid-template-columns: 1fr 1fr; }
.roi__cell { padding: var(--space-3); border-block-end: var(--divider-thin); }
.roi__cell:nth-child(odd) { border-inline-end: var(--divider-thin); }
.roi__cell-label { font: var(--t-label); letter-spacing: var(--track-caption); color: var(--color-text-secondary); }
.roi__cell-value { font: var(--t-h4); color: var(--color-text); margin-block: var(--space-hair); }
.roi__cell-sub { font: var(--t-small); color: var(--color-text-secondary); }
@media (max-width: 559px) {
  .roi__cells { grid-template-columns: 1fr; }
  .roi__cell:nth-child(odd) { border-inline-end: 0; }
}

/* [ROI-6] Breakdown + standing note + closing action. */
.roi__detail { padding: var(--space-3); border-block-end: var(--divider-thin); }
.roi__detail > summary {
  cursor: pointer;
  font: var(--t-h5);
  color: var(--color-primary);
  list-style: none;
  min-block-size: 24px;
}
.roi__detail > summary::-webkit-details-marker { display: none; }
.roi__detail > summary::after { content: " +"; color: var(--flag-red); font-weight: 700; }
.roi__detail[open] > summary::after { content: " −"; }
.roi__detail .tablewrap { margin-block-start: var(--space-2); }

.roi__note { padding: var(--space-3); font: var(--t-small); color: var(--color-text-secondary); }
.roi__note strong { color: var(--color-text); }
.roi__cta { padding: var(--space-3); background: var(--color-bg); border-block-start: var(--divider-thin); }
.roi__cta .btn { inline-size: 100%; justify-content: center; }

/* [ROI-7] No-JS state. The panel never lies about having a number:
   without script it says so, and the page's actual content — the four
   savings sources, the objections, the FAQ — is server-rendered and
   complete without it. */
.roi__noscript {
  padding: var(--space-3);
  border-block-end: var(--divider-thin);
  font: var(--t-small);
  color: var(--color-text-secondary);
}

/* [ROI-8] Objection cards reuse `.card`; only the quote line is new.
   Red on white = 5.25:1 — above AA. */
.card__quote {
  display: block;
  font: var(--t-label);
  letter-spacing: var(--track-caption);
  color: var(--color-accent);
  margin-block-end: var(--space-1);
}
.card__nums {
  font: var(--t-small);
  color: var(--color-text-secondary);
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-2);
  border-block-start: var(--divider-thin);
}
.card__nums strong { color: var(--color-primary); }

/* =========================================================================
   [FAM2 / PROD2] — إعادة تصميم صفحة العائلة وصفحة المنتج (المهمة 42)
   طبقة إضافية بالكامل: صفر لون جديد · صفر توكن · صفر ظلّ · radius يبقى 0
   ========================================================================= */

/* [PROD2-1] أداة إخفاء بصري تُبقي النصّ لقارئ الشاشة. لم تكن في الثيم،
   ويحتاجها معرض الصور كي تحمل كل مصغّرة اسماً منطوقاً. */
.u-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* [PROD2-2] قسم «نظرة عامة» في صفحة المنتج: الأرقام في العمود الأوسع
   والصورة في العمود الأضيق. الترتيب في الـDOM هو الأرقام أولاً، فتقع
   في جهة البداية — يمينَ الصفحة العربية ويسارَ الإنجليزية تلقائياً. */
.overview {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
/* الأرقام تُرصّ عمودياً داخل العمود بدل ثلاثة أعمدة متجاورة، فيبقى كل
   رقم مقروءاً بعرضه الكامل بجوار صورة أصغر. */
.overview .stats { grid-template-columns: 1fr; gap: var(--space-2); }

/* [PROD2-3] معرض صور المنتج — تبديل بصفر جافاسكربت.
   الآلية أزرار راديو مخفية تسبق المسرح، والمصغّرات عناوين label لها.
   والشريحة الأولى تظهر افتراضياً حتى في متصفح لا يدعم `:checked ~`. */
.pgallery { display: grid; gap: var(--space-2); }
.pgallery__radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.pgallery__slide { display: none; margin: 0; }
.pgallery__slide:nth-of-type(1) { display: block; }
.pgallery__radio:checked ~ .pgallery__stage .pgallery__slide { display: none; }
.pgallery__radio:nth-of-type(1):checked ~ .pgallery__stage .pgallery__slide:nth-of-type(1),
.pgallery__radio:nth-of-type(2):checked ~ .pgallery__stage .pgallery__slide:nth-of-type(2),
.pgallery__radio:nth-of-type(3):checked ~ .pgallery__stage .pgallery__slide:nth-of-type(3),
.pgallery__radio:nth-of-type(4):checked ~ .pgallery__stage .pgallery__slide:nth-of-type(4) { display: block; }
.pgallery__slide .ph { aspect-ratio: 4 / 3; }
.pgallery__slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

.pgallery__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-1); }
.pgallery__thumb {
  display: block;
  cursor: pointer;
  border: 1px solid var(--color-border);
  min-height: 24px;
  transition: border-color var(--transition-fast);
}
.pgallery__thumb:hover { border-color: var(--color-primary); }
.pgallery__thumb .ph { aspect-ratio: 4 / 3; border: 0; }
.pgallery__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
/* المصغّرة النشطة تحمل قاعدة حمراء سفلية — أكسنت واحد لا لوحة كاملة. */
.pgallery__radio:nth-of-type(1):checked ~ .pgallery__thumbs .pgallery__thumb:nth-of-type(1),
.pgallery__radio:nth-of-type(2):checked ~ .pgallery__thumbs .pgallery__thumb:nth-of-type(2),
.pgallery__radio:nth-of-type(3):checked ~ .pgallery__thumbs .pgallery__thumb:nth-of-type(3),
.pgallery__radio:nth-of-type(4):checked ~ .pgallery__thumbs .pgallery__thumb:nth-of-type(4) {
  border-color: var(--color-primary);
  border-block-end: var(--divider-accent);
}
/* إطار التركيز يجب أن يظهر على المصغّرة لا على الراديو المخفي. */
.pgallery__radio:nth-of-type(1):focus-visible ~ .pgallery__thumbs .pgallery__thumb:nth-of-type(1),
.pgallery__radio:nth-of-type(2):focus-visible ~ .pgallery__thumbs .pgallery__thumb:nth-of-type(2),
.pgallery__radio:nth-of-type(3):focus-visible ~ .pgallery__thumbs .pgallery__thumb:nth-of-type(3),
.pgallery__radio:nth-of-type(4):focus-visible ~ .pgallery__thumbs .pgallery__thumb:nth-of-type(4) {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* [PROD2-4] جدول المواصفات المدمج: خطّ أصغر وحشو أضيق وعرض مسقوف،
   فيُقرأ كتلةً واحدة بدل شريط يمتدّ عبر الصفحة. الجدول يبقى
   `<table>` دلالياً بـ`thead` و`th` — لا صورة ولا شبكة `div`. */
.tablewrap--compact { max-width: 860px; }
table.spec--compact { min-width: 0; font: var(--t-eyebrow); letter-spacing: normal; text-transform: none; }
table.spec--compact caption { font: var(--t-small); padding: var(--space-2); }
table.spec--compact thead th { padding: var(--space-1) var(--space-2); }
table.spec--compact tbody td,
table.spec--compact tbody th { padding: var(--space-1) var(--space-2); }
table.spec--compact tbody th { white-space: normal; width: 42%; }

/* [PROD2-5] بطاقة قطاع مصغّرة — أربع في الصفّ، بلا وصف. */
.card--mini { padding: var(--space-2); }
.card--mini .card__kicker {
  color: var(--color-primary);
  font: var(--t-small);
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.card--mini:hover .card__kicker { color: var(--color-accent); }

@media (max-width: 900px) {
  .overview { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 560px) {
  .pgallery__thumbs { grid-template-columns: repeat(4, 1fr); }
  .tablewrap--compact { max-width: none; }
}

/* [PROD2-6] القرار 60 — روابط أسماء القطاعات داخل خلايا الجدول كانت
   تُصيَّر بارتفاع 15–18px: صندوق العنصر السطري هو مساحة النقر لا صندوق
   السطر. WCAG 2.5.8 يطلب 24×24 للرابط النصّي. */
table.spec th a,
table.spec td a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* [PROD2-7] القرار 51 — هدفا لمس في شريط الأدوات دون 24px عرضاً:
   رابط مبدّل اللغة (19×24) والرابط الأيقوني (22×24). الارتفاع كان
   مستوفى والعرض دونه. */
.langswitch__link,
.langswitch__current,
.topbar__item > a {
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   [CHROME-7] المستوى الثالث في قائمة المنتجات — لوحة جانبية
   بأول أربعة موديلات من العائلة و«المزيد» يفتح صفحة العائلة.

   أمر المالك 2026-08-19: «عند فتح قائمة المنتجات ووضع المؤشر على
   عائلة، تظهر قائمة فرعية جانبية بأول 4 منتجات، والخامس المزيد».

   ⛔ صفر جافاسكربت كما في المستويين قبله (B5): `:hover` و
   `:focus-within` وحدهما. وصفر لون جديد وصفر توكن وصفر ظلّ
   و`radius: 0` — المكوّن كله مبنيّ من `.sub-menu` القائمة.
   ============================================================ */

/* المستوى الثاني صار مرساة موضع للثالث. */
.sub-menu > li { position: relative; }

/* [CHROME-7a] سهم يدلّ على أن للعنصر لوحة جانبية.
   الحدود هنا منطقية لا فيزيائية (`border-inline-start` مع
   `border-block` شفافة) ⇒ رأس السهم ينقلب مع اتجاه اللغة وحده:
   يمينًا في الإنجليزية ويسارًا في العربية، بلا قاعدة RTL منفصلة
   وبلا صورة ولا أيقونة تُحمَّل. */
.sub-menu > li.menu-item-has-children > a {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.sub-menu > li.menu-item-has-children > a::after {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  margin-inline-start: auto;
  border-block: 4px solid transparent;
  border-inline-start: 5px solid currentColor;
}

/* [CHROME-7b] اللوحة الجانبية. ترث كل شيء من `.sub-menu` —
   السطح والحدّ والقاعدة الحمراء والإخفاء بـ`visibility` — ولا
   تُعيد إلا الموضع: `inset-inline-start: 100%` تدفعها خارج الحافة
   المنطقية للمنسدلة، فتفتح يمينًا في الإنجليزية ويسارًا في العربية.
   و`top` السالبة تحاذي أول موديل مع العائلة التي فتحته. */
.sub-menu--flyout {
  top: calc(var(--space-1) * -1);
  inset-inline-start: 100%;
  z-index: 111;
  /* [CHROME-7d] عرض مقيَّد بالمساحة المتبقية لا ثابتًا.
     المقيس عند 901px — آخر عرض تظهر فيه قائمة سطح المكتب قبل أن
     تُخفى عند 900 — أن الحافة المنطقية للمنسدلة تقع عند 258px،
     فلوحة بعرض 260 الموروث كانت تخرج إلى **-2px** وتُضيف تمريرًا
     أفقيًا للمستند (903 مقابل 901). مقيس أن العلّة من هذه اللوحة
     وحدها: بإخفائها يعود العرض 901 بالضبط. */
  width: min(260px, 26vw);
  min-width: 0;
}
.sub-menu > li:hover > .sub-menu--flyout,
.sub-menu > li:focus-within > .sub-menu--flyout { opacity: 1; visibility: visible; }

/* [CHROME-7c] «المزيد» فاصلٌ عن الموديلات بخطّ رفيع كي يُقرأ
   إجراءً لا موديلًا خامسًا. */
.menu-item--more {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: var(--divider-thin);
}
.menu-item--more > a { font-weight: 600; color: var(--color-primary); }

/* ============================================================
   [LEGAL-1…6] — الصفحات القانونية (سياسة الخصوصية · الشروط والأحكام)
   طبقة إضافية بالكامل: صفر توكن جديد · صفر لون · صفر ظلّ · radius: 0.
   كل ما تفعله هو إعطاء النثر القانوني الطويل مقياس قراءة ومسافات
   وفهرسًا — وهي أول صفحات في المشروع نصّها فقرات متصلة لا بطاقات.
   ============================================================ */

/* [LEGAL-1] مقياس القراءة. الفقرة القانونية تُقرأ سطرًا سطرًا،
   و80ch هو الحد الذي يبقى العين فيه على السطر بلا قفز. الحاوية
   تبقى 1200 كما هي فلا يتغيّر تحاذي الصفحة مع الترويسة. */
.legalbody { max-width: 80ch; }
.legalbody > * + * { margin-top: var(--space-2); }
.legalbody p { color: var(--color-text-secondary); }
.legalbody li { color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.legalbody li:last-child { margin-bottom: 0; }
.legalbody strong { color: var(--color-text); font-weight: 600; }

/* [LEGAL-2] البند رقمٌ وعنوان. الفاصل العلوي 2px ink هو «قاعدة
   التوكيد» المعرَّفة في §12، ويُغني عن أي لون أو ظلّ يفصل البنود. */
.legalsec + .legalsec { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--divider-thin); }
.legalsec h2 { font: var(--t-h4); font-family: var(--font-heading); letter-spacing: var(--track-h4); scroll-margin-top: var(--space-5); }
.legalsec h3 { margin-top: var(--space-3); color: var(--color-primary); }
.legalsec > h3:first-of-type { margin-top: var(--space-2); }

/* [LEGAL-3] الملاحظة المُقتبسة. حدّ منطقي 3px navy — ينقلب مع اللغة
   وحده بلا قاعدة RTL — وسطح رمادي، بلا زاوية وبلا ظلّ. */
.legal-note {
  background: var(--surface-raised);
  border-inline-start: 3px solid var(--color-primary);
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-secondary);
}
.legal-note p:last-child { margin-bottom: 0; }

/* [LEGAL-4] الفهرس. صفحة بسبعة عشر بندًا بلا فهرس تُقرأ بالتمرير
   وحده؛ والروابط أهداف لمس كاملة الارتفاع (WCAG 2.5.8). */
.legal-toc { border: 1px solid var(--color-border); padding: var(--space-3); background: var(--color-surface); }
.legal-toc h2 { font: var(--t-h5); font-family: var(--font-heading); letter-spacing: var(--track-h5); margin-bottom: var(--space-2); }
.legal-toc ol {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-hair) var(--space-3);
}
.legal-toc a {
  display: inline-flex; align-items: center;
  min-height: 24px; padding-block: var(--space-hair);
  color: var(--color-text-secondary);
}
.legal-toc a:hover { color: var(--color-primary); }

/* [LEGAL-5] جدول الهوية أعلى الصفحة وجدول الكوكيز — يرثان `table.spec`
   بالكامل؛ ما يتغيّر أن الخلية نصّ لا رقم فتُلغى `white-space: nowrap`
   عن رأس الصفّ، وإلا خرج الجدول عن الشاشة على الهاتف. */
.legalbody table.spec tbody th { white-space: normal; }
.legalbody .tablewrap { margin-block: var(--space-2); }

/* [LEGAL-6] الهاتف: الفهرس عمود واحد، والمقياس يتبع الحاوية. */
@media (max-width: 560px) {
  .legal-toc ol { grid-template-columns: 1fr; }
}

/* [LEGAL-7] روابط النثر أهداف لمس كاملة. الرابط العاري داخل الفقرة
   يُصيَّر بارتفاع سطره وحده — 20px بالعربية و19px بالإنجليزية، وكلاهما
   دون 24px (WCAG 2.5.8). وهي فئة العطل نفسها في المهام 26 و36 و39 و42:
   **صندوق العنصر السطري هو مساحة النقر لا صندوق السطر.**
   الحشو الرأسي وحده يوسّع صندوق النقر بلا `inline-flex` — و`inline-flex`
   هنا خطأ لأنه يمنع نصّ الرابط من الالتفاف داخل فقرة متدفّقة. */
.legalsec a { padding-block: 3px; }

/* [LEGAL-8] جدول الهوية عمودان بنصّ قصير، فلا معنى لأن يرث
   `min-width: 680px` المفروضة لجداول المواصفات ⇒ كان يفرض تمريرًا
   أفقيًا داخل 343px على الهاتف بلا داعٍ. جدول الكوكيز ثلاثة أعمدة
   ويبقى يمرّر داخل `.tablewrap` كبقية جداول الموقع. */
.tablewrap--fit table.spec { min-width: 0; }

/* ================= [BLOG-1…7] طبقة المدونة — الدفعة 6 ================= */
/* لا لون جديد ولا توكن ولا خط ولا ظلّ، و`radius` بلا استثناء.
   البلاطات نفسها تستعمل `.articles` و`.article-tease` المعرَّفتين في
   الثيم منذ B2 ولم يستعملهما أي قالب حتى اليوم — سابقة بوابة المهمة 34
   حرفاً: المكوّن كان موجوداً وينتظر قالباً. */

/* [BLOG-1] سطر التاريخ. الأرقام لاتينية داخل الجملة العربية (§12)
   وتحملها `.num` القائمة. */
.postmeta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font: var(--t-small);
  color: var(--color-text-secondary);
  margin: 0;
}
.postmeta time { font-variant-numeric: lining-nums; }
.article-tease .postmeta__date {
  font: var(--t-small);
  color: var(--color-text-secondary);
  font-variant-numeric: lining-nums;
  margin-top: auto;
}

/* [BLOG-2] متن المقال. مقياس قراءة على المكوّن نفسه لا على غلاف
   GeneratePress — وهو **شرط** توسيع `itco_layout_owns_canvas()` إلى
   المقالات: بلا هذا السطر يمتدّ نصّ المقال بعرض النافذة كاملاً، وهو
   بالضبط ما حذّر منه تعليق `inc/layout.php` قبل الدفعة 6. */
.postbody {
  max-width: 74ch;
}
.postbody > * + * { margin-block-start: var(--space-2); }
.postbody h2 { margin-block-start: var(--space-4); }
.postbody h3 { margin-block-start: var(--space-3); }
.postbody ul, .postbody ol { padding-inline-start: var(--space-3); }
.postbody li + li { margin-block-start: var(--space-1); }
.postbody img { margin-block: var(--space-2); }
.postbody blockquote {
  margin: var(--space-3) 0;
  padding-inline-start: var(--space-2);
  border-inline-start: var(--divider-medium);
  color: var(--color-text-secondary);
}
.postbody table { width: 100%; border-collapse: collapse; }

/* [BLOG-3] الروابط النثرية داخل المتن أهداف لمس كاملة.
   فئة العطل نفسها في المهام 26 و36 و39 و42 و44 و48: **صندوق العنصر
   السطري هو مساحة النقر لا صندوق السطر** ⇒ رابط عارٍ داخل فقرة
   يُصيَّر ~20px. والحشو الرأسي وحده هو الحلّ — `inline-flex` يمنع
   التفاف نصّ الرابط داخل فقرة متدفّقة (سابقة `[LEGAL-7]`). */
.postbody a { padding-block: 3px; }

/* [BLOG-4] الصورة البارزة والوسوم. */
.postfigure { margin: 0 0 var(--space-3); }
.postfigure img { width: 100%; height: auto; }
.posttags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-2);
  border-top: 1px solid var(--color-border);
}
.posttags .tag {
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--color-border);
  padding-inline: var(--space-1);
}
.posttags .tag:hover { border-color: var(--color-primary); text-decoration: none; }

/* [BLOG-5] التنقّل بين المقالات — عمودان يتساويان، وبلاطتاهما هي
   `.article-tease` نفسها فلا مكوّن ثانٍ يُصان. */
.postnav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gutter);
}

/* [BLOG-6] ترقيم الصفحات. أهداف 44×44 كسائر أزرار الواجهة في §12،
   بزاوية صفر وبلا ظلّ. */
.itco-pagination { margin-block-start: var(--space-4); }
.itco-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}
.itco-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font: var(--t-label);
  font-variant-numeric: lining-nums;
}
.itco-pagination a.page-numbers:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
}
.itco-pagination .page-numbers.current {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
}
.itco-pagination .page-numbers.dots { border-color: transparent; }
.postpages { margin-block-start: var(--space-3); font: var(--t-small); }

/* [BLOG-7] الهاتف: عمود واحد في التنقّل بين المقالات.
   (`.articles` تنهار أصلاً 3⇐2⇐1 بقواعدها القائمة.) */
@media (max-width: 560px) {
  .postnav { grid-template-columns: 1fr; }
}

/* [BLOG-8] عنوان البلاطة `h2` دلالةً و`h3` مقياساً.
   المقيس على أرشيف القسم المُصيَّر قبل الإصلاح: التسلسل H1 ← H3 ← H2،
   أي **قفزة مستوى** — عنوان الأرشيف هو H1 والبلاطات تقع تحته مباشرةً
   بلا H2 بينهما. وهي فئة عطل المهمة 26 نفسها (شبكة القطاعات تحت `<h2>`
   كانت توجب `h3`)، وتُحلّ بالطريقة نفسها: **المستوى الدلالي يتبع
   التعشيش والمقياس البصري يُضبط صراحةً** بدل أن يُورَث من العنصر. */
.article-tease h2 {
  font: var(--t-h3);
  font-family: var(--font-heading);
  letter-spacing: var(--track-h3);
  margin: 0 0 var(--space-1);
}
.article-tease:hover h2 { color: var(--color-primary); }

/* ============================================================
   [GP-1 … 14] — GOVERNMENT PROCUREMENT REQUEST CENTRE
   ------------------------------------------------------------
   المهمة 99 (2026-09-03) — أمر المالك ببناء «مركز طلبات الجهات
   الحكومية» بواجهة تشبه لوحة تشغيل مشتريات لا صفحة تسويقية.

   القاعدة الحاكمة كما في كل طبقة قبلها: كل قيمة أدناه توكن قائم.
   ⛔ صفر لون جديد · صفر خطّ · صفر ظلّ · `radius: 0` بلا استثناء ·
   صفر أخضر (اللوحة لا تعرّفه — §12 نصّاً)، فحالة النجاح navy
   بقاعدة بادئة، وحالة الخطأ حمراء بحدّ سميك لا بلون وحده.

   🔧 وثلاث مقايضات واعية تُسجَّل صراحةً لأن الطلب ذكرها ونُفِّذت
   بغيرها، و§4 يحكم: «يتغيّر المقترح لا القيد»:
     (أ) «ظلال بسيطة» على البطاقات ⇒ ⛔ §12 يمنع الظلّ مطلقاً.
         العمق من الحدّ 1px والسطح المتناوب والقاعدة الحمراء 6px.
     (ب) «Badges لحالات الطلب» ⇒ `.badge` القائم navy وأبيض
         (11.2:1)، ولا تُشتقّ منه ألوان حالة جديدة.
     (ج) Dark Mode ⇒ الموقع لا يدعمه، فلم يُبنَ نظام كامل.
         نقطة التوسعة أسفل هذه الطبقة: كل لون هنا يمرّ بتوكن،
         فإعادة تعريف التوكنات في `:root` وحدها تكفي لاحقاً.
   ============================================================ */

/* [GP-1] شريط الخدمة العلوي — نيّة الصفحة في سطر واحد قبل الهيرو.
   navy على أبيض 11.2:1، والأزرار أهداف لمس 44px كبقية الموقع. */
.gp-servicebar {
  border-block-end: 1px solid var(--color-border);
  border-block-start: var(--divider-accent);
  background: var(--color-surface);
}
.gp-servicebar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-2);
}
.gp-servicebar__text {
  flex: 1 1 320px;
  margin: 0;
  font: var(--t-small);
  color: var(--color-text-secondary);
}
.gp-servicebar .actions { display: flex; gap: var(--space-1); flex-wrap: wrap; margin: 0; }
.gp-servicebar .btn { min-block-size: 44px; }

/* [GP-2] لوحة الهيرو — عمودان: النصّ ومحاكاة الواجهة.
   المحاكاة HTML وCSS خالصان لا صورة: تبقى حادّة على أي كثافة
   بكسل، وتُترجَم مع اللغة، ووزنها صفر بايت إضافي (D1). */
.gp-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-5);
  align-items: center;
}
.gp-hero__aside { min-inline-size: 0; }
/* رابط نصّي تحت أزرار الهيرو — هدف لمس 24px كما توجب WCAG 2.5.8
   للرابط داخل النثر (لا 44px التي تحكم الأزرار). */
.gp-hero__note { margin-block-start: var(--space-2); font: var(--t-small); }
.gp-hero__note a { display: inline-flex; align-items: center; min-block-size: 24px; }

/* محاكاة لوحة التشغيل. سطح مرتفع بحدّ، وترويسة navy — وهي
   استعمال «سطح أكسنت» لا «بيئة داكنة»، فالقسم كله فاتح. */
.gp-console {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.gp-console__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
}
.gp-console__ref { font-family: var(--font-mono); }
.gp-console__body { padding: var(--space-3); display: grid; gap: var(--space-2); }

.gp-console__file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
}
.gp-console__file .icon { color: var(--color-primary); flex: none; }
.gp-console__fname { font: var(--t-h5); margin: 0; }
.gp-console__fmeta { font: var(--t-small); color: var(--color-text-secondary); margin: 0; }

/* [GP-3] Badge الحالة — يرث `.badge` القائم ولا يعرّف لوناً.
   `--is-live` تختلف بالحدّ لا بالتعبئة، فيبقى الفرق مُدرَكاً
   لمن لا يميّز اللون. */
.gp-badge { display: inline-flex; align-items: center; gap: var(--space-hair); }
.gp-badge--outline {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* [GP-4] الخطّ الزمني — عمود واحد، نقطة وحدّ رأسي.
   الحالة المنجَزة تُملأ، والحالية تحمل حلقة، والقادمة فارغة ⇒
   ثلاث حالات مميَّزة بالشكل قبل اللون. */
.gp-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.gp-tl {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: start;
  gap: var(--space-2);
  padding-block: var(--space-2);
  padding-inline-start: 2px;
}
.gp-tl + .gp-tl::before {
  content: "";
  position: absolute;
  inset-block-start: -50%;
  inset-inline-start: 13px;
  inline-size: 1px;
  block-size: 100%;
  background: var(--color-border);
}
.gp-tl__dot {
  inline-size: 14px;
  block-size: 14px;
  margin-block-start: 5px;
  margin-inline-start: 6px;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  position: relative;
  z-index: 1;
}
.gp-tl.is-done .gp-tl__dot { background: var(--color-primary); border-color: var(--color-primary); }
.gp-tl.is-current .gp-tl__dot {
  background: var(--color-accent);
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.gp-tl__label { font: var(--t-body); color: var(--color-text-secondary); }
.gp-tl.is-done .gp-tl__label,
.gp-tl.is-current .gp-tl__label { color: var(--color-text); font-weight: 600; }
.gp-tl__at { font: var(--t-small); color: var(--color-text-secondary); }
.gp-timeline--static .gp-tl__label { color: var(--color-text); }

/* [GP-5] شريط الثقة التشغيلي — أربع بطاقات صغيرة. */
.gp-assure { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gutter); }
.gp-assure__item {
  border: 1px solid var(--color-border);
  border-block-start: 3px solid var(--color-primary);
  background: var(--color-surface);
  padding: var(--card-padding);
  display: grid;
  gap: var(--space-1);
}
.gp-assure__item .icon { color: var(--color-primary); }
.gp-assure__item h3 { font: var(--t-h5); margin: 0; }
.gp-assure__item p { font: var(--t-small); color: var(--color-text-secondary); margin: 0; }

/* [GP-6] بطاقات مسار الخدمة — ستّ، وكلٌّ رابط حقيقي إلى #gp-form
   فتعمل بلا جافاسكربت، ويعترضها السكربت ليختار النوع تلقائياً. */
.gp-paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.gp-path {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  border: 1px solid var(--color-border);
  border-block-start: var(--divider-accent);
  background: var(--color-surface);
  padding: var(--space-3);
  color: var(--color-text);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.gp-path:hover { text-decoration: none; background: var(--color-bg); }
.gp-path:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.gp-path__icon { color: var(--color-primary); }
.gp-path__title { font: var(--t-h5); font-family: var(--font-heading, inherit); }
.gp-path__desc { font: var(--t-small); color: var(--color-text-secondary); }
.gp-path__go {
  margin-block-start: var(--space-1);
  font: var(--t-label);
  letter-spacing: var(--track-caption);
  color: var(--color-primary);
  min-block-size: 24px;
  display: inline-flex;
  align-items: center;
}
.gp-path:hover .gp-path__go { color: var(--color-accent); }

/* [GP-7] النموذج — يبني فوق `.formpanel` القائم ولا ينسخه. */
.gp-form-wrap { display: grid; gap: var(--space-4); }
.gp-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--grid-gutter); }
.gp-req { color: var(--color-accent); font-weight: 700; }
.formsection--sub { font: var(--t-h5); border-bottom-width: 1px; }

/* شارة الخطوة ومؤشّر التقدّم. الرقم لاتيني دائماً (§12). */
.gp-step__count {
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
}
.gp-progress {
  list-style: none;
  display: flex;
  gap: var(--space-1);
  padding: 0;
  margin: 0 0 var(--space-3);
}
.gp-progress li {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  min-block-size: 34px;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  background: var(--color-surface);
}
.gp-progress li.is-done { background: var(--surface-raised); color: var(--color-primary); border-color: var(--color-primary); }
.gp-progress li.is-current {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

/* الخطوة نفسها: `fieldset` بلا حدّ ولا حشو — الحدّ تحمله اللوحة. */
.gp-step { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.gp-step:focus { outline: none; }
.gp-step:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }
.gp-step > legend { padding: 0; }

.gp-nav { display: flex; gap: var(--space-2); margin-block-start: var(--space-4); }
.gp-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-block-start: var(--space-3); }

/* الملاحظة التي تظهر بلا جافاسكربت وحدها؛ يحذفها السكربت. */
.gp-nojs {
  font: var(--t-small);
  color: var(--color-text-secondary);
  border-inline-start: 3px solid var(--color-border);
  padding-inline-start: var(--space-2);
  margin-block-end: var(--space-3);
}

/* [GP-8] بطاقات الاختيار — شعاع داخل بطاقة، هدف اللمس هو البطاقة
   كاملةً لا الدائرة الصغيرة. */
.gp-radios { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.gp-radio { display: block; cursor: pointer; }
/* ⚠️ الخصوصية لا الترتيب — عين مصيدة [FORM-3b].
   `.gp-radio input` = (0,2,0) تسقط أمام `.formpanel input[type="radio"]`
   = (0,2,1) في طبقة النموذج، فيبقى الشعاع **20×20** لا 1×1 — مقيس في
   المتصفح 2026-09-03. غير ضارّ (الشفافية صفر والموضع مطلق داخل الـlabel)
   لكنه صندوق غير مرئي بحجم 20px داخل البطاقة. العلاج نفس علاج FORM-3b:
   عنصر + سمة تحت `.formpanel` ⇒ (0,3,1) تتفوّق يقيناً، بلا `!important`
   وبلا اعتماد على ترتيب تحميل الملفات. */
.gp-radio input,
.formpanel .gp-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
  min-block-size: 0;
  margin: 0;
}
.gp-radio__body {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 56px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.gp-radio__icon { color: var(--color-primary); flex: none; }
.gp-radio__label { font: var(--t-body); }
.gp-radio:hover .gp-radio__body { background: var(--color-bg); }
.gp-radio input:checked + .gp-radio__body {
  border-color: var(--color-primary);
  border-inline-start: var(--divider-accent);
  background: var(--surface-raised);
}
.gp-radio input:focus-visible + .gp-radio__body {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* [GP-9] منطقة الرفع. الحدّ متقطّع لأنه العُرف المتعارَف عليه
   لمنطقة إفلات، وهو حدّ 1px بلون الحدود القائم — لا لون جديد
   ولا ظلّ ولا زاوية. */
.gp-drop {
  border: 1px dashed var(--color-border);
  background: var(--color-bg);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.gp-drop.is-over {
  border-color: var(--color-primary);
  border-style: solid;
  background: var(--surface-raised);
}
.gp-drop__icon { color: var(--color-primary); }
.gp-drop__lead { margin: 0; font: var(--t-body); }
.gp-drop__or { color: var(--color-text-secondary); margin-inline-start: var(--space-1); }
.gp-drop__btn { margin-block-start: var(--space-1); }
.gp-drop__meta { display: grid; gap: 2px; font: var(--t-small); color: var(--color-text-secondary); margin: var(--space-1) 0 0; }

/* بلا جافاسكربت يبقى حقل الملف ظاهراً ويعمل. مع الجافاسكربت
   يحلّ محلّه الزرّ، والحقل يبقى في الشجرة قابلاً للوصول عبر
   `<label for>` — فلا يُفقد التحكّم بلوحة المفاتيح. */
.gp-drop input[type="file"] {
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  position: absolute;
}
.gp-drop input[type="file"]:focus-visible + .gp-drop__meta { outline: var(--focus-outline); }
.gp-drop__btn:focus-within { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

/* [GP-10] قائمة الملفات. */
.gp-files { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: var(--space-1); }
.gp-files__empty { font: var(--t-small); color: var(--color-text-secondary); }
.gp-file {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  min-block-size: 44px;
}
.gp-file__ext {
  font: var(--t-eyebrow);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  padding: 2px var(--space-hair);
  min-inline-size: 46px;
  text-align: center;
}
.gp-file__name { font: var(--t-small); overflow-wrap: anywhere; }
.gp-file__meta { font: var(--t-small); color: var(--color-text-secondary); }
.gp-file__state { font: var(--t-small); color: var(--color-text-secondary); }
.gp-file.is-done { border-inline-start: 3px solid var(--color-primary); }
.gp-file.is-done .gp-file__state { color: var(--color-primary); }
.gp-file.is-error { border-inline-start: 3px solid var(--color-critical); }
.gp-file.is-error .gp-file__state { color: var(--color-critical); }
.gp-file__rm {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-secondary);
  font: var(--t-small);
  min-block-size: 32px;
  min-inline-size: 44px;
  padding-inline: var(--space-1);
  cursor: pointer;
}
.gp-file__rm:hover { border-color: var(--color-critical); color: var(--color-critical); }
.gp-file__rm:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

/* ظهور لطيف عند إضافة ملف — `opacity` و`transform` وحدهما
   فيبقى الأثر على طبقة التركيب، ويُلغى عند تفضيل تقليل الحركة. */
@media (prefers-reduced-motion: no-preference) {
  .gp-file { animation: gp-in 180ms ease-out both; }
}
@keyframes gp-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}

.gp-privacy {
  display: flex;
  gap: var(--space-1);
  align-items: flex-start;
  margin-block-start: var(--space-3);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font: var(--t-small);
  color: var(--color-text-secondary);
}
.gp-privacy__icon { color: var(--color-primary); flex: none; }

/* [GP-11] الملخّص ورسائل الحالة. */
.gp-summary { border: 1px solid var(--color-border); background: var(--color-bg); padding: var(--space-3); }
.gp-summary__title { font: var(--t-h5); margin: 0 0 var(--space-2); }
.gp-summary__list { display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: var(--space-1) var(--space-2); margin: 0; }
.gp-summary__list dt { font: var(--t-small); color: var(--color-text-secondary); margin: 0; }
.gp-summary__list dd { margin: 0; font: var(--t-small); display: flex; gap: var(--space-2); justify-content: space-between; align-items: baseline; }
.gp-summary__edit {
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: var(--t-small);
  text-decoration: underline;
  cursor: pointer;
  min-block-size: 24px;
  flex: none;
}
.gp-summary__edit:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); }

.gp-alert {
  margin-block: var(--space-2);
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-inline-start: 6px solid var(--color-neutral);
  background: var(--color-surface);
  font: var(--t-small);
}
.gp-alert--error { border-inline-start-color: var(--color-critical); color: var(--color-critical); }
.gp-alert--info { border-inline-start-color: var(--color-primary); }

/* الزرّ أثناء الإرسال — لا مؤشّر دوّار: تغيّر النصّ والتعتيم
   يكفيان، ويعملان مع `prefers-reduced-motion` بلا استثناء. */
.btn.is-busy { opacity: 0.7; cursor: progress; }

/* [GP-12] شاشة النجاح. لا أخضر — قاعدة navy بادئة كما في
   `.formsuccess` القائمة، والرقم بحجم يُقرأ من بعيد. */
.gp-done {
  border: 1px solid var(--color-border);
  border-block-start: var(--divider-accent);
  background: var(--color-surface);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-1);
  justify-items: start;
}
.gp-done:focus { outline: none; }
.gp-done__eyebrow { font: var(--t-h3); color: var(--color-primary); margin: 0; }
.gp-done__label {
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 0;
}
.gp-done__ref { margin: 0; }
.gp-done__ref .num {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text);
}
.gp-done__body { font: var(--t-small); color: var(--color-text-secondary); margin: var(--space-2) 0 0; max-width: 60ch; }
.btn.is-copied { background: var(--color-primary); color: var(--color-on-primary); }

/* [GP-13] لوحة المتابعة والحالة الفارغة والهيكل العظمي. */
.gp-track { display: grid; gap: var(--space-4); }
.gp-why h3 { font: var(--t-h5); margin: 0 0 var(--space-1); }
.gp-why p { margin: 0; font: var(--t-small); }
.gp-result { border: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-3); }
.gp-result:focus { outline: none; }
.gp-result__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding-block-end: var(--space-2);
  border-block-end: var(--divider-medium);
}
.gp-result__ref { margin: 0; font-size: 1.25rem; font-weight: 600; }
.gp-result__status { margin: 0; }
.gp-result__updated { margin: 0; font: var(--t-small); color: var(--color-text-secondary); margin-inline-start: auto; }
.gp-result__h { font: var(--t-h5); margin: var(--space-3) 0 var(--space-1); }
.gp-result__msg { margin-block-start: var(--space-3); border-inline-start: var(--divider-accent); padding-inline-start: var(--space-2); }
.gp-result__msg h3 { font: var(--t-h5); margin: 0 0 var(--space-hair); }
.gp-result__msg p { margin: 0; }
.gp-result__reply { margin-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-3); }
.gp-result__reply h3 { font: var(--t-h5); margin: 0 0 var(--space-2); }

.gp-sk {
  display: block;
  block-size: 14px;
  inline-size: min(320px, 60%);
  background: var(--surface-raised);
}
@media (prefers-reduced-motion: no-preference) {
  .gp-sk { animation: gp-pulse 1.2s ease-in-out infinite; }
}
@keyframes gp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.gp-tl--skeleton .gp-tl__dot { border-color: var(--surface-raised); }

.gp-empty {
  border: 1px dashed var(--color-border);
  background: var(--color-bg);
  padding: var(--space-5) var(--space-3);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}
.gp-empty__icon { color: var(--color-text-secondary); }
.gp-empty__title { font: var(--t-h4); margin: 0; }
.gp-empty__body { max-width: 62ch; color: var(--color-text-secondary); margin: 0; }

/* [GP-14] مركز الكتالوجات — الفلاتر والبطاقات. */
.gp-catalog__filters { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gutter); margin-block-end: var(--space-3); }
.gp-catalog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gutter); }
.gp-doc {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  padding: var(--card-padding);
  display: grid;
  gap: var(--space-1);
  align-content: start;
}
.gp-doc__icon { color: var(--color-primary); }
.gp-doc__title { font: var(--t-h5); margin: 0; }
.gp-doc__meta { display: flex; flex-wrap: wrap; gap: var(--space-1); font: var(--t-small); color: var(--color-text-secondary); margin: 0; }
.gp-doc__cta { margin-block-start: var(--space-2); justify-self: start; }
.gp-catalog__none { font: var(--t-small); color: var(--color-text-secondary); }

.gp-trustcard__rows .num { font-weight: 600; }

/* المصيدة الخفيّة — خارج الشاشة لا `display:none`. */
.gp-hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

/* ------------------------------------------------------------
   استجابة الطبقة. نقاط الكسر 900 / 560 هي نقاط النظام نفسها.
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .gp-assure { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .gp-hero__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .gp-paths { grid-template-columns: repeat(2, 1fr); }
  .gp-catalog__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gp-assure,
  .gp-paths,
  .gp-radios,
  .gp-2col,
  .gp-catalog__filters,
  .gp-catalog__grid { grid-template-columns: 1fr; }

  /* الملف على الهاتف: سطران بدل خمسة أعمدة مضغوطة. */
  .gp-file { grid-template-columns: auto 1fr auto; row-gap: var(--space-hair); }
  .gp-file__state { grid-column: 2 / -1; }
  .gp-file__rm { grid-column: 3; grid-row: 1; }

  .gp-summary__list { grid-template-columns: 1fr; }
  .gp-summary__list dt { margin-block-start: var(--space-1); }
  .gp-result__updated { margin-inline-start: 0; inline-size: 100%; }
  .gp-nav .btn,
  .gp-actions .btn { flex: 1 1 100%; }
  .gp-done__ref .num { font-size: 1.5rem; }
}

/* ------------------------------------------------------------
   نقطة التوسعة إلى الوضع الداكن — لم يُبنَ عمداً.
   الموقع لا يدعم Dark Mode اليوم، و§12 يمنع الخلفيات الغامقة،
   فبناء نظام كامل هنا كان سيخالف الهوية لا أن يخدمها.
   لكن كل لون في هذه الطبقة يمرّ بتوكن (`--color-surface` ·
   `--color-bg` · `--color-border` · `--color-text*` ·
   `--surface-raised`) ولا يوجد فيها Hex واحد مكتوب مباشرةً ⇒
   يوم يُعتمد الوضع الداكن، تُعاد تعريف التوكنات في `:root`
   وحدها وتتبعها هذه الطبقة كاملةً بلا تعديل قاعدة واحدة هنا.
   ------------------------------------------------------------ */

/* ============================================================
   [ROI2-1…12] — ROI CALCULATOR v2, MULTI-SCENARIO  (task 105)
   ------------------------------------------------------------
   Extends [ROI-1…8] (task 38); nothing in that layer is redefined.

   Zero new colours · zero new tokens · zero webfonts · zero shadows ·
   radius 0. Charts are inline SVG built by the page's own script from
   the same arrays as the tables beside them — no chart library, so no
   third-party CSS or fonts enter the page either.

   Positive/negative marks use the two colours the identity already
   assigns to these roles: navy = informational, red = critical (§12).
   The system defines no success green and none is invented here.
   ============================================================ */

/* [ROI2-1] Scenario selector — a radiogroup drawn as four cards.
   Server-rendered; the script only toggles which panels are hidden. */
.roi-scen {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-3);
}
@media (min-width: 560px) { .roi-scen { grid-template-columns: 1fr 1fr; } }
.roi-scen > legend {
  grid-column: 1 / -1;   /* [BAL-11] the legend labels the whole group; it must
                            never share a row with a choice card */
  font: var(--t-label);
  letter-spacing: var(--track-caption);
  color: var(--color-primary);
  padding: 0;
  margin-block-end: var(--space-1);
}
.roi-scen__opt { position: relative; display: block; }
.roi-scen__opt input {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  accent-color: var(--flag-red);
}
.roi-scen__opt label {
  display: block;
  margin: 0;
  padding: var(--space-2);
  padding-inline-start: calc(var(--space-2) + 20px + var(--space-1));
  border: 1px solid var(--color-border);
  cursor: pointer;
  min-block-size: 24px;
  font-weight: 400;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.roi-scen__opt label:hover { background: var(--color-bg); }
.roi-scen__opt input:checked + label {
  border-color: var(--color-primary);
  border-inline-start: var(--divider-accent);
  background: var(--color-surface);
}
.roi-scen__opt input:focus-visible + label {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}
.roi-scen__t { display: block; font: var(--t-h5); color: var(--color-primary); }
.roi-scen__d { display: block; font: var(--t-small); color: var(--color-text-secondary); }

/* [ROI2-2] Repeatable equipment rows. Without script one row is
   present and fully usable; the button that clones a row is hidden
   until the script arms it. */
.roi-rows { display: grid; gap: var(--space-2); }
.roi-row {
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-primary);
  padding: var(--space-2);
}
.roi-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  margin-block-end: var(--space-1);
}
.roi-row__title { font: var(--t-label); letter-spacing: var(--track-caption); color: var(--color-primary); }
.roi-row__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-2); }
@media (min-width: 720px) { .roi-row__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.roi-row__del {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-accent);
  font: var(--t-label);
  min-block-size: 24px;
  min-inline-size: 24px;
  padding-inline: var(--space-1);
  cursor: pointer;
}
.roi-row__del:hover:not(:disabled) { border-color: var(--color-accent); }
.roi-row__del:disabled { color: var(--color-border); cursor: not-allowed; }
.roi-add {
  margin-block-start: var(--space-2);
  border: 1px dashed var(--color-border);
  background: transparent;
  color: var(--color-primary);
  font: var(--t-h5);
  inline-size: 100%;
  min-block-size: 44px;
  cursor: pointer;
}
.roi-add:hover { border-color: var(--color-primary); background: var(--color-bg); }

/* [ROI2-3] Sourced-figure note. Every default that came from an
   outside authority carries its source and the date it was read,
   inline, where the number is — not in a footnote nobody opens. */
.roi-src {
  display: block;
  font: var(--t-small);
  color: var(--color-text-secondary);
  border-inline-start: 2px solid var(--color-primary);
  padding-inline-start: var(--space-1);
  margin-block-start: var(--space-hair);
}
.roi-src a { color: var(--color-primary); }

/* [ROI2-4] Three-point result table — the range replaces the single
   headline number the old calculator printed. */
.roi-3pt { margin-block-start: var(--space-2); }
.roi-3pt .spec th[scope="col"] { font: var(--t-label); letter-spacing: var(--track-caption); }
.roi-3pt .is-expected { background: var(--color-primary-weak); }
.roi-3pt .is-expected th[scope="row"] { color: var(--color-primary); }

/* [ROI2-5] Chart shell. The SVG scales to the container width; the
   table underneath carries the same numbers for anything that cannot
   read the picture — a screen reader, or an answer engine. */
.roi-chart {
  margin-block: var(--space-2);
  border: 1px solid var(--color-border);
  padding: var(--space-2);
  background: var(--color-surface);
}
.roi-chart__cap {
  font: var(--t-label);
  letter-spacing: var(--track-caption);
  color: var(--color-text-secondary);
  margin-block-end: var(--space-1);
}
.roi-chart__svg { inline-size: 100%; block-size: auto; display: block; }
/* SVG is direction-neutral; a mirrored time axis would read as a
   reversed timeline in Arabic. */
[dir="rtl"] .roi-chart__svg { direction: ltr; }
.roi-chart__bar.is-pos { fill: var(--color-primary); }
.roi-chart__bar.is-neg { fill: var(--color-accent); }
.roi-chart__line { fill: none; stroke: var(--ink-black); stroke-width: 2; }
.roi-chart__zero { stroke: var(--color-border); stroke-width: 1; }
.roi-chart__tick { fill: var(--color-text-secondary); font-size: 11px; font-family: var(--font-mono); }
@media (forced-colors: active) {
  .roi-chart__bar.is-pos, .roi-chart__bar.is-neg { fill: CanvasText; }
  .roi-chart__line { stroke: CanvasText; }
}

/* [ROI2-6] Live region for the result panel. Announced politely so a
   screen-reader user hears the new figures without losing their place
   in the form. */
.roi__results[aria-busy="true"] { opacity: 0.6; }

/* [ROI2-7] Secondary metric grid — four cells, same rhythm as [ROI-5]. */
.roi__cells--4 { grid-template-columns: 1fr 1fr; }
@media (max-width: 559px) { .roi__cells--4 { grid-template-columns: 1fr; } }

/* [ROI2-8] Method blocks: the equations, printed. */
.roi-eq {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  direction: ltr;
  unicode-bidi: embed;
  display: block;
  background: var(--surface-raised);
  padding: var(--space-1) var(--space-2);
  border-inline-start: 3px solid var(--color-primary);
  overflow-x: auto;
}

/* [ROI2-9] Action row under the result: quote / WhatsApp / print. */
.roi__actions { display: grid; gap: var(--space-1); padding: var(--space-3); background: var(--color-bg); border-block-start: var(--divider-thin); }
.roi__actions .btn { inline-size: 100%; justify-content: center; }
.roi-print {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  font: var(--t-h5);
  min-block-size: 44px;
  cursor: pointer;
}
.roi-print:hover { border-color: var(--color-primary); background: var(--color-bg); }

/* [ROI2-10] Assumption ledger — every editable default in one table so
   the reader can audit what the result rests on before trusting it. */
.roi-ledger td:last-child, .roi-ledger th:last-child { text-align: start; }

/* [ROI2-11] Scenario-conditional blocks. `hidden` must win over the
   grid/flex display values these blocks otherwise carry — same
   specificity trap recorded for [FORM-3b] and [FORM-5]. */
.roi [hidden], .roi-row[hidden], [data-scen][hidden] { display: none !important; }

/* [ROI2-12] PRINT — this is the "download the mini feasibility study"
   deliverable. No PDF library: the browser's own Save-as-PDF produces
   selectable, searchable, accessible text, which jsPDF does not.
   The script opens every <details> before calling print(), so the
   assumptions and their sources print with the headline figures. */
@media print {
  .site-header, .topbar, .site-footer, .roi__actions,
  .roi-add, .roi-row__del, .crumbs, .actions, .ctaband { display: none !important; }
  .roi { display: block; }
  .roi__results { position: static !important; }
  .roi-chart { break-inside: avoid; border-color: #000; }
  .roi__head { background: transparent !important; color: var(--ink-black) !important; border-block-end: var(--divider-medium); }
  .roi__head h2 { color: var(--ink-black) !important; }
  .roi-chart__bar.is-pos { fill: #1F396D !important; }
  .roi-chart__bar.is-neg { fill: #D90429 !important; }
  .spec { break-inside: auto; }
  .spec tr { break-inside: avoid; }
  details { break-inside: avoid; }
  .section { padding-block: var(--space-2); }
  a[href]::after { content: ""; }   /* no URL spam in a costed study */
  .roi-print-only { display: block !important; }
}
.roi-print-only { display: none; }

/* ============================================================
   [BAL-1…9] — VISUAL BALANCE: EQUAL HEIGHTS ACROSS THE SITE
   (task 106, owner report 2026-09-05 with screenshots)
   ------------------------------------------------------------
   The owner reported unbalanced boxes on the ROI page and asked for
   the same treatment site-wide.

   DIAGNOSIS (measured, not guessed): CSS Grid already stretches its
   items to the row height — the boxes were NOT failing to stretch.
   What failed is INSIDE them:
     (a) the visible bordered box was a child (a <label>) that kept its
         own auto height while its grid-item parent stretched, so the
         border stopped short of the row height;
     (b) cards whose text runs to a different number of lines pushed
         their footer line to a different vertical position, so a row
         of cards read as ragged even when the outer boxes matched;
     (c) in field grids, labels of different lengths wrap to a
         different number of lines, so the inputs beneath them sat at
         different heights across one row.

   Fix: make each box a column that fills its cell, and give the part
   that must line up (footer, input) `margin-block-start:auto`.

   Zero new colours · zero new tokens · zero webfonts · zero shadows ·
   radius 0. Layout only.
   ============================================================ */

/* [BAL-1] Every grid that carries boxes stretches them. This is the
   default, declared explicitly so a later `align-items` cannot quietly
   turn it off. */
.grid, .valuestrip, .tilerow, .roi-scen, .roi__2col, .roi-row__grid {
  align-items: stretch;
}

/* [BAL-2] Box components become columns that fill their cell. Without
   this the border ends where the text ends, which is exactly the
   ragged edge the owner photographed. */
.card, .step, .feature, .indcard, .pathcard, .tile,
.valuestrip__item, .roi__cell, .roi-row,
.challenge, .article-card, .refproject, .stat, .gp-path, .gp-assure__item {
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

/* [BAL-3] The footer line of a card sticks to the bottom, so a row of
   cards lines up on their last line and not only on their frame. */
.card__nums, .tile__foot, .pathcard__foot {
  margin-block-start: auto;
}
/* A card's prose should take the slack, not the footer. */
.card > p:not(.card__nums):last-of-type { margin-block-end: 0; }

/* [BAL-4] Scenario selector — the real defect in the screenshot.
   `.roi-scen__opt` stretched, but the <label> inside it (the element
   that actually draws the border) did not, so the four cards showed
   four different box heights. */
.roi-scen__opt { display: grid; }
.roi-scen__opt label {
  block-size: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-hair);
}

/* [BAL-5] Field grids — the second screenshot. Labels of unequal
   length wrap to a different number of lines, so the inputs drifted
   out of alignment across the row. Pushing the control down aligns
   every input on one baseline regardless of how its label wrapped. */
.roi__2col > div,
.roi-row__grid > div {
  display: flex;
  flex-direction: column;
}
.roi__2col > div > input,
.roi__2col > div > select,
.roi-row__grid > div > input,
.roi-row__grid > div > select {
  margin-block-start: auto;
}
/* The hint under a field must not fight the auto margin above it. */
.roi__2col > div > .roi__hint,
.roi-row__grid > div > .roi__hint { margin-block-start: var(--space-hair); }

/* [BAL-6] Equipment row: the delete control keeps a stable 24px target
   and the header does not stretch with the column. */
.roi-row__head { flex: 0 0 auto; }
.roi-row__grid { flex: 1 1 auto; }

/* [BAL-7] Result cells share one height per row so the 2x2 block reads
   as a single panel rather than four unequal tiles. */
.roi__cells { align-items: stretch; }
.roi__cell-sub { margin-block-start: auto; }

/* [BAL-8] Value strip items: the heading block and the prose beneath
   it align across all four columns. */
.valuestrip__item h3 { flex: 0 0 auto; }
.valuestrip__item p:last-child { margin-block-end: 0; }

/* [BAL-9] Long unbroken strings (model codes, emails, URLs) must not
   force one box wider than its neighbours and break the row rhythm. */
.card, .step, .feature, .indcard, .pathcard, .tile,
.valuestrip__item, .roi-scen__opt label { min-inline-size: 0; overflow-wrap: anywhere; }

/* [BAL-10] Uniform ROW height across multi-row card grids.
   CSS Grid sizes each row to its own content, so a 2x2 block of cards
   came out with two different row heights even though the cards inside
   each row matched. The owner asked for one height across the block,
   which is also how a set of parallel choices should read — as one
   control, not two stacked pairs.
   `1fr` on the implicit rows makes every row take the tallest row's
   height. Applied to the card grids only, never to prose or tables. */
.grid--2, .grid--3, .grid--4,
.roi-scen, .tilerow, .indgrid, .valuestrip,
.steps, .pathcards, .challenges, .articles,
.related-posts, .refprojects, .stats, .gp-paths, .gp-assure {
  grid-auto-rows: 1fr;
}
/* ⛔ Deliberately NOT equalised, because they are not card grids:
   `.split` (prose beside an image) · `.solutions` (auto 1fr label/body)
   · `.tile__body` and `.footer-contact` (single-column internals).
   Forcing equal rows on those stretches a caption to a photo's height. */
/* Below the two-column breakpoint each card is its own row, so equal
   rows would stretch every card to the tallest one in the page. Let
   them size to content on narrow screens. */
@media (max-width: 559px) {
  .grid--2, .grid--3, .grid--4,
  .roi-scen, .tilerow, .indgrid, .valuestrip,
  .steps, .pathcards, .challenges, .articles,
  .related-posts, .refprojects, .stats, .gp-paths, .gp-assure { grid-auto-rows: auto; }
}

/* ============================================================
   [T144-W9] Equipment-row fields: label wraps its control
   ============================================================
   The five fields in an equipment row carried a bare <label> with no
   `for` and no wrapping, so screen readers announced five unnamed
   inputs — and generating ids would not have survived addRow(), which
   clones the first row and strips `id` from every input and `for` from
   every label precisely because duplicate ids would be worse. Wrapping
   the control inside its label associates them structurally, so the
   association is carried by the clone with no bookkeeping at all.

   That inserts one element between the grid cell and the control, which
   the [BAL-6] alignment above reached through with a direct-child
   selector. These two rules re-establish the same behaviour through the
   new wrapper: the label fills the cell, and `margin-block-start: auto`
   on the input keeps every control on one baseline no matter how many
   lines its label wrapped to. `gap` keeps a floor under that spacing in
   the shortest cell, where there is no slack for the auto margin. */
.roi-row__grid > div > .roi-row__field {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--space-1);
  margin-bottom: 0;
}
.roi-row__grid > div > .roi-row__field > input {
  margin-block-start: auto;
}

/* [T147-C2] الأنماط المضمّنة الخمسة في قالبَي المشتريات والحاسبة صارت
   صنفين — والقيم نفسها حرفياً، فصفر فارق مرئي. */
.gp-console__line { margin: 0; }
.roi__group-title--spaced { margin-block-start: 1rem; }

/* ============================================================
   [MOT-0…9] طبقة المؤثرات الحركية — المهمة 147 (القرار 102)
   ============================================================
   الهوية صناعية هندسية: الحركة تشبه رسم خطّ على مخطط لا ارتداد
   كرة — قصيرة، ذات اتجاه، ولا تتكرر. والقيود مقفلة:
   · صفر جافاسكربت (B5 · §13) وصفر طلب شبكي (D1).
   · transform وopacity وحدهما ⇒ طبقة التركيب، بلا إعادة تخطيط ولا CLS.
   · صفر ظلّ وصفر زوايا (§12) · وNavy لا أحمر حيث يُضاف لون.
   · لا حركة على عنصر LCP (عنوان الهيرو).
   · كل مؤثر خلف @supports وتقليل الحركة، والحالة الساكنة هي النهائية
     ⇒ متصفح بلا دعم أو زاحف أو reduced-motion يرى الصفحة كاملة.
   · قاعدة [T147-C1]: الظهور المرتبط بالتمرير يُملأ backwards لا both
     إن كان للعنصر تحوّم بـtransform، وإلا ألغاه.
   ============================================================ */

/* [MOT-0] توكنات الحركة — نظام الهوية لا يعرّف توكنات حركة. */
:root {
  --motion-fast: 150ms;
  --motion-base: 240ms;
  --motion-slow: 400ms;
  --ease-draw: cubic-bezier(0.2, 0.7, 0.2, 1);   /* بداية حازمة ونهاية هادئة */
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* [MOT-1] ظهور متدرّج لبطاقات صفحات القطاعات والبوابات والمقالات
       ذات الصلة — كانت ساكنة. والتتابع مجاني: كل بطاقة تعبر نطاقها في
       وقتها. [MOT-8] وأرقام «هذا الطراز في سطر» في صفحات المنتجات. */
    .challenge, .solution, .product-card, .pathcard, .article-tease, .stat {
      animation: itco-rise 1 linear backwards;
      animation-timeline: view();
      animation-range: entry 5% entry 60%;
    }

    /* [MOT-2] «رسم الخطّ الهندسي»: حدّ الحلّ الأكسنتي ينمو من الأعلى
       حين تدخل البطاقة المشهد. الحدّ الحقيقي يُخفى هنا وحدها (داخل
       @supports) ويُرسم بعنصر زائف بالعرض واللون نفسيهما ⇒ بلا دعم يبقى
       الحدّ الأصلي كما كان، وبعد الرسم الشكل مطابق له. عمودي ⇒ بلا
       استثناء RTL. */
    .solution { position: relative; border-inline-start-color: transparent; }
    .solution::after {
      content: "";
      position: absolute;
      inset-block: -1px;
      inset-inline-start: -6px;
      inline-size: 6px;
      background: var(--flag-red);
      transform-origin: top;
      pointer-events: none;
      animation: itco-draw-y 1 linear both;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }
  }
}
@keyframes itco-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* [MOT-3] سهم «التفاصيل» يتقدّم باتجاه القراءة عند التحوّم. النصّ البديل
   الفارغ (`/ ""`) يُسكت السهم عند قارئ الشاشة، والتصريح الأول احتياط
   للمتصفح الذي لا يعرف الصيغة. */
.more::after,
.pathcard .go::after {
  content: "→";
  content: "→" / "";
  display: inline-block;
  transition: transform var(--motion-fast) var(--ease-draw);
}
[dir="rtl"] .more::after,
[dir="rtl"] .pathcard .go::after {
  content: "←";
  content: "←" / "";
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  a:hover .more::after,
  a.more:hover::after,
  a:focus-visible .more::after,
  .pathcard:hover .go::after { transform: translateX(4px); }
  [dir="rtl"] a:hover .more::after,
  [dir="rtl"] a.more:hover::after,
  [dir="rtl"] a:focus-visible .more::after,
  [dir="rtl"] .pathcard:hover .go::after { transform: translateX(-4px); }
}

/* [MOT-4] روابط النثر: خطّ سفلي رفيع ظاهر دائماً — قرار المالك 120
   (المهمة 204). كان الخطّ شفّافاً يظهر عند المرور فقط، فالرابط يتميّز عن
   النصّ حوله باللون وحده (1.7:1). عند المرور والتركيز يقترب الخطّ
   ويثخن، فتبقى للرابط استجابة. الروابط ذات الأصناف (أزرار · بطاقات)
   خارج النطاق. */
:where(p, li, td, dd, .answer) > a:not([class]) {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-thickness var(--motion-fast) ease, text-underline-offset var(--motion-fast) ease;
}
:where(p, li, td, dd, .answer) > a:not([class]):hover,
:where(p, li, td, dd, .answer) > a:not([class]):focus-visible {
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

/* [MOT-5] إبراز صفّ جدول المواصفات لمن يتتبّع رقماً عبر الأعمدة —
   حدّ Pale Slate (دوره المأذون) لا لون جديد، والصفوف الزوجية تحمل
   السطح المرفوع أصلاً فيميّزها الحدّ. */
table.spec tbody tr { transition: background-color var(--motion-fast) ease; }
@media (hover: hover) and (pointer: fine) {
  table.spec tbody tr:hover {
    background-color: var(--surface-raised);
    outline: 1px solid var(--pale-slate);
    outline-offset: -1px;
  }
}

/* [MOT-6] انتقال ناعم بين صفحات الموقع (View Transitions عبر المستندات)
   — تلاشٍ 180ms والترويسة مسمّاة فتبقى ثابتة لا تومض. متصفح بلا دعم
   ينتقل انتقالاً عادياً. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: itco-site-header; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 180ms; }
}

/* [MOT-7] شريط تقدّم القراءة في المقالات — أبيض 3px أسفل الترويسة
   الـNavy، فوق قاعدتها الحمراء، وينمو من بداية السطر. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .single-post .site-header::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0;
      block-size: 3px;
      background: var(--color-on-primary);
      transform-origin: left;
      transform: scaleX(0);
      pointer-events: none;
      animation: itco-progress 1 linear both;
      animation-timeline: scroll(root block);
    }
    [dir="rtl"] .single-post .site-header::after { transform-origin: right; }
  }
}
@keyframes itco-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* [MOT-9] فتح السؤال الشائع بانسياب — تفاعل يبدأه القارئ فلا CLS.
   الشاشة وحدها: الطباعة تفتح كل <details> كما كانت. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  @media screen and (prefers-reduced-motion: no-preference) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size var(--motion-base) var(--ease-draw), content-visibility var(--motion-base) allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
  }
}

/* تقليل الحركة: إعادة الضبط الشاملة أعلاه تُسقط الرسوم والانتقالات؛
   وهذا تثبيت صريح للعناصر الزائفة المرسومة كي تبقى على حالتها النهائية. */
@media (prefers-reduced-motion: reduce) {
  .solution::after { transform: none !important; }
  .single-post .site-header::after { display: none; }
}

/* ================= [T150-1] تصفّح المدونة حسب الموضوع ================= */
/* شريطا المعدة والقطاع فوق قائمة المقالات في الفهرس وكل أرشيف تصنيف.
   المكوّن `.tag` نفسه المعرَّف منذ B2 ومستعمَل في `.posttags` — لا مكوّن
   جديد ولا لون جديد ولا ظلّ، والزاوية صفر. الحالية تأخذ Navy بخطّ سفلي
   3px (نمط العنصر النشط في §12) لا الأحمر: الأحمر للـCTA أسفل الشاشة. */
.blogtopics {
  display: grid;
  gap: var(--space-2);
  margin-block-end: var(--space-4);
}
.blogtopics__all { margin: 0; }
.blogtopics__row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}
.blogtopics__label {
  margin: 0;
  padding-block-start: 0.4rem;
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--case-eyebrow);
  color: var(--color-text-secondary);
}
.blogtopics__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.blogtopics .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 32px;
  margin: 0;
  padding-inline: var(--space-1);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--t-small);
  letter-spacing: 0;
  text-transform: none;
}
.blogtopics .tag .num { color: var(--color-text-secondary); }
.blogtopics .tag:hover { border-color: var(--color-primary); text-decoration: none; }
.blogtopics .tag[aria-current="page"] {
  border-color: var(--color-primary);
  border-block-end-width: 3px;
  color: var(--color-primary);
}
@media (max-width: 560px) {
  .blogtopics__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .blogtopics__label { padding-block-start: 0; }
}

/* ============================================================
   [VMV] الرؤية والرسالة والقيم وسياسة الجودة — نمطا vision-values-ar/en.
   بطاقة واحدة بأربع حالات، والتبديل بأزرار راديو مخفية تسبق البطاقة
   ونقاط label على جهة النهاية ⇒ صفر جافاسكربت (B5 · §13)، على سابقة
   معرض المنتج [PROD2-3].
   · الهوية (§12): زوايا صفر · صفر ظلّ · حدّ 1px Pale Slate · بلاطة
     الأيقونة Navy بنمط Blueprint وأيقونة بيضاء بأطراف مربعة ولا تحمل نصّاً
     · والأحمر أكسنت واحد في البطاقة: مؤشّر الحالة النشطة.
   · الألواح الأربعة في خلية شبكة واحدة ⇒ ارتفاع البطاقة = أطول لوح،
     فلا قفزة تخطيط عند التبديل (صفر CLS).
   · بلا دعم `:checked ~` يظهر اللوح الأول وحده. وتحت 560px تُعرض الألواح
     الأربعة متتابعة وتختفي النقاط — قراءة لا نقر، والنصّ كله ظاهر.
   · خصائص منطقية وحدها ⇒ البلاطة تعبر حافة البطاقة يميناً في العربية
     ويساراً في الإنجليزية، والنقاط على الجهة المقابلة، بلا قاعدة RTL.
   ============================================================ */

/* [VMV-1] الراديو مخفيّ بصرياً ويبقى قابلاً للتركيز بلوحة المفاتيح
   (الأسهم تتنقّل بين الحالات لأنها مجموعة راديو واحدة). */
.vmv { position: relative; }
.vmv__radio {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* [VMV-2] البطاقة: عمود المحتوى وعمود النقاط. الهامش في جهة البداية
   يحجز مكان البلاطة التي تعبر حافة البطاقة. */
.vmv__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: var(--space-5);
  padding-block: var(--space-4);
  padding-inline: 0 var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.vmv__stage { display: grid; }

/* [VMV-3] اللوح: البلاطة والنصّ. كل الألواح في الخلية نفسها، والظاهر
   واحد. الإخفاء بـvisibility لا display كي يتلاشى اللوح بانتقال، ويخرج
   المخفيّ من شجرة الإتاحة ومن النقر. */
.vmv__panel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--motion-base) var(--ease-draw),
    transform var(--motion-base) var(--ease-draw),
    visibility 0s linear var(--motion-base);
}
.vmv__panel:nth-child(1) { opacity: 1; visibility: visible; transform: none; }
.vmv__radio:checked ~ .vmv__card .vmv__panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}
.vmv__radio:nth-of-type(1):checked ~ .vmv__card .vmv__panel:nth-child(1),
.vmv__radio:nth-of-type(2):checked ~ .vmv__card .vmv__panel:nth-child(2),
.vmv__radio:nth-of-type(3):checked ~ .vmv__card .vmv__panel:nth-child(3),
.vmv__radio:nth-of-type(4):checked ~ .vmv__card .vmv__panel:nth-child(4) {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--motion-base) var(--ease-draw),
    transform var(--motion-base) var(--ease-draw),
    visibility 0s;
}

/* [VMV-4] بلاطة الأيقونة — سطح Navy غير نصّي، فيحمل نمط Blueprint
   (نمط واحد لكل سطح). تعبر حافة البطاقة بمقدار الهامش المحجوز. */
.vmv__tile {
  display: grid;
  place-items: center;
  inline-size: 200px;
  aspect-ratio: 1;
  margin-inline-start: calc(-1 * var(--space-5));
  background: var(--regal-navy);
  color: #fff;
  border-radius: var(--radius);
}
.vmv__icon {
  inline-size: 44%;
  block-size: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  overflow: visible;
}

/* [VMV-5] النصّ. العدّاد Blue Slate لا أحمر — الأحمر للمؤشّر وحده. */
.vmv__body { max-width: 68ch; }
.vmv__kicker {
  margin: 0 0 var(--space-1);
  font: var(--t-eyebrow);
  letter-spacing: var(--track-eyebrow);
  color: var(--color-text-secondary);
}
.vmv__body h3 { margin: 0 0 var(--space-2); color: var(--color-text); }
.vmv__statement { margin: 0; color: var(--color-text); }
.vmv__statement + .vmv__list { margin-block-start: var(--space-2); }
.vmv__list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
}
.vmv__list li {
  padding-inline-start: var(--space-2);
  border-inline-start: 2px solid var(--color-border);
}
.vmv__list strong { color: var(--color-primary); }

/* [VMV-6] النقاط: هدف لمس 24×24 (WCAG 2.5.8). الخامل مربّع مفرّغ
   Blue Slate (≥3:1 عنصراً غير نصّي — Pale Slate دون ذلك)، والتحوّم
   Navy، والنشط شريط أحمر 6px يطول — القاعدة الأكسنتية نفسها في الهوية. */
.vmv__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-hair);
}
.vmv__dot {
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  cursor: pointer;
  transition: block-size var(--motion-base) var(--ease-draw);
}
.vmv__dot::before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border: 2px solid var(--blue-slate);
  transition:
    block-size var(--motion-base) var(--ease-draw),
    background-color var(--motion-fast) linear,
    border-color var(--motion-fast) linear;
}
.vmv__dot:hover::before { background: var(--color-primary); border-color: var(--color-primary); }
.vmv__radio:nth-of-type(1):checked ~ .vmv__card .vmv__dot:nth-child(1),
.vmv__radio:nth-of-type(2):checked ~ .vmv__card .vmv__dot:nth-child(2),
.vmv__radio:nth-of-type(3):checked ~ .vmv__card .vmv__dot:nth-child(3),
.vmv__radio:nth-of-type(4):checked ~ .vmv__card .vmv__dot:nth-child(4) { block-size: 40px; cursor: default; }
.vmv__radio:nth-of-type(1):checked ~ .vmv__card .vmv__dot:nth-child(1)::before,
.vmv__radio:nth-of-type(2):checked ~ .vmv__card .vmv__dot:nth-child(2)::before,
.vmv__radio:nth-of-type(3):checked ~ .vmv__card .vmv__dot:nth-child(3)::before,
.vmv__radio:nth-of-type(4):checked ~ .vmv__card .vmv__dot:nth-child(4)::before {
  inline-size: 6px;
  block-size: 32px;
  border: 0;
  background: var(--flag-red);
}
/* إطار التركيز على النقطة لا على الراديو المخفي. */
.vmv__radio:nth-of-type(1):focus-visible ~ .vmv__card .vmv__dot:nth-child(1),
.vmv__radio:nth-of-type(2):focus-visible ~ .vmv__card .vmv__dot:nth-child(2),
.vmv__radio:nth-of-type(3):focus-visible ~ .vmv__card .vmv__dot:nth-child(3),
.vmv__radio:nth-of-type(4):focus-visible ~ .vmv__card .vmv__dot:nth-child(4) {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* [VMV-7] الشاشة المتوسطة: بلاطة أصغر تعبر الحافة بمقدار أقل. */
@media (max-width: 900px) {
  .vmv__card { margin-inline-start: var(--space-4); padding-block: var(--space-3); }
  .vmv__panel { grid-template-columns: 128px minmax(0, 1fr); gap: var(--space-3); }
  .vmv__tile { inline-size: 128px; margin-inline-start: calc(-1 * var(--space-4)); }
}

/* [VMV-8] الهاتف: الألواح الأربعة متتابعة والبلاطة فوق النصّ، والنقاط
   والراديو خارج الصفحة — لا نقر على أهداف صغيرة، ولا نصّ مخفيّ.
   المحدِّد بخصوصية قاعدة الإخفاء نفسها ويأتي بعدها فيغلبها. */
@media (max-width: 560px) {
  .vmv__radio,
  .vmv__nav { display: none; }
  .vmv__card {
    grid-template-columns: minmax(0, 1fr);
    margin-inline-start: 0;
    padding: var(--space-3);
  }
  .vmv__stage { gap: var(--space-3); }
  .vmv .vmv__radio ~ .vmv__card .vmv__panel {
    grid-area: auto;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-2);
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
  .vmv__panel + .vmv__panel {
    padding-block-start: var(--space-3);
    border-block-start: var(--divider-thin);
  }
  .vmv__tile { inline-size: 56px; margin-inline-start: 0; }
  .vmv__tile.blueprint::before { display: none; }
  .vmv__icon { inline-size: 60%; }
}

@media (prefers-reduced-motion: reduce) {
  .vmv__panel,
  .vmv__radio:checked ~ .vmv__card .vmv__panel,
  .vmv__dot,
  .vmv__dot::before { transition: none; }
  .vmv__panel,
  .vmv__radio:checked ~ .vmv__card .vmv__panel { transform: none; }
}

/* ============================================================
   [T185] أيقونات الموقع — المجموعة الخطّية (inputs/site-icons-t180):
   شبكة 24 · سماكة 2px · نهايات مربّعة · بلا تعبئة · navy على الفاتح.
   بطاقات العائلات تستعمل `.card__icon` ومسارات الخدمات `.feature h3 .icon`
   القائمتين؛ والجديد هنا موضع الأيقونة في شريط القيم وحده.
   ============================================================ */
/* [T185-1] أيقونة شريط القيم فوق عنوانها: البند عمود flex ([BAL-2])،
   فلا تتمدّد الأيقونة على عرضه ولا تنكمش، وتبدأ من حافة النصّ في الاتجاهين. */
.valuestrip__item .icon {
  flex: none;
  align-self: flex-start;
  color: var(--color-primary);
  margin-block-end: var(--space-2);
}

/* ============================================================
   [T191] نتائج البحث الداخلي — بنودها `.article-tease` القائمة (العنوان
   `h2` بمقياس `h3` من [BLOG-8]) وترقيمها `.itco-pagination` ([BLOG-6]):
   لا مكوّن ثانٍ يُصان، ولا لون ولا توكن جديد.
   ============================================================ */
/* [T191-1] قائمة النتائج عمود واحد بمقياس القراءة نفسه في [BLOG-2]، لا
   شبكة `.articles` الثلاثية: نتائج البحث مرتّبة بالصلة، والعمود الواحد
   يُبقي ذلك الترتيب مقروءاً. */
.resultlist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  max-width: 74ch;
}

/* ============================================================
   [T195] صورة القطاع وصورة الخدمة — شريط صورة بعرض الحاوية تحت رأس
   القسم الأول في صفحات القطاعات والخدمات. الإطار والخطوط المائلة
   وقاعدة الملء من `.ph` و[T165-1] القائمتين؛ والجديد هنا النسبة
   والمسافة وحدهما: لا لون ولا توكن جديد.
   ============================================================ */
/* [T195-1] 21:9 على العرض الواسع كي لا يدفع الشريط المحتوى شاشةً
   كاملة، و16:9 (نسبة الملف نفسه) تحت 560px حيث يضيق الارتفاع.
   الصورة تحت الهيرو وتُحمَّل `loading="lazy"`: لا تدخل وزن الصفحة
   الأول ولا تصير عنصر LCP.
   النسبة على الصورة نفسها لا على الإطار وحده (كما في [PROD2] لشرائح
   المعرض): `.ph` شبكة صفّها `auto`، فـ`height: 100%` من [T165-1] يؤول
   إلى ارتفاع الصورة الطبيعي ويمدّ الإطار إلى 16:9 مهما كانت نسبته. */
.ph--band {
  aspect-ratio: 21 / 9;
  margin-block-end: var(--space-4);
}
.ph--band > img {
  aspect-ratio: 21 / 9;
  height: auto;
}
@media (max-width: 559px) {
  .ph--band,
  .ph--band > img { aspect-ratio: 16 / 9; }
}

/* ============================================================
   [T199] انحرافات بوابة القبول المقيسة في المهمة 198 (axe-core في
   متصفح حقيقي): لون نصّ زرّ مبنيّ على `<label>`، وخطّ سفلي ظاهر لرابطين
   داخل نصّ. لا لون ولا توكن جديد.
   ============================================================ */
/* [T199-1] `<label class="btn btn--secondary">` داخل `.formpanel`: قاعدة
   التسمية في [FORM-2] (`.formpanel label` = 0,1,1) أخصّ من
   `.btn--secondary` (0,1,0)، فكانت تفرض لون نصّ الحقول الداكن على لوحة
   الزرّ الكحلية — المقيس 1.7:1 على زرّ «اختر ملفاً» في مركز طلبات الجهات
   الحكومية. الزرّ يستعيد لون نصّه وحده؛ باقي ما ترثه التسمية كما هو. */
.formpanel label.btn--secondary { color: var(--color-on-primary); }

/* [T199-2] رابطان يقعان داخل نصّ ولا تبلغهما [MOT-4] (أبوهما `span` و
   `label` لا `p`): مصدر الرقم في حاسبة العائد وسياسة الخصوصية في سطر
   الإقرار. لون الرابط قريب من لون النصّ المحيط (المقيس 1.85:1) فاللون
   وحده لا يميّزه ⇒ خطّ سفلي ظاهر دائماً، لا عند المرور فقط. */
.roi-src a,
.formcheck label a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ============================================================
   [T200] مخالفة وصولية طفيفة في مركز طلبات الجهات الحكومية.
   ============================================================ */
/* [T200-1] بند القائمة صار غلافاً حول الرابط (`role="listitem"` على
   الرابط نفسه كان يُلغي دوره رابطاً). الغلاف هو عنصر الشبكة الآن، وهو
   شبكة بخلية واحدة فتمتدّ البطاقة إلى ارتفاع الصف كما كانت قبله —
   [BAL-2] و[GP-6] على `.gp-path` كما هما. */
.gp-paths__item { display: grid; }

/* ============================================================
   [T202] صور البطاقات — خانات كانت تُعرض خطوطاً مائلة بلا صورة
   (بطاقات العائلات في صفحات القطاعات)، وبطاقات لم تكن لها خانة صورة
   (البوابات وبطاقات المقالات). الإطار والحدّ من التوكنات القائمة: لا
   لون ولا توكن جديد.
   ============================================================ */
/* [T202-1] `.product-card__img` عُرِّفت خانةً فارغة فقط (خطوط مائلة)،
   بلا قاعدة لصورة داخلها. الصورة تملأ الإطار بنسبته وتُسقط الخطوط كما
   تفعل [T165-1] مع `.ph`. والنسبة على الصورة نفسها لا على الإطار وحده
   (درس [T195-1]): الإطار شبكة صفّها `auto`. */
.product-card__img { overflow: hidden; }
.product-card__img > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.product-card__img:has(> img) { background-image: none; }

/* [T202-2] صورة أعلى بطاقة الرابط (بوابات القطاعات والمنتجات والخدمات،
   وبطاقات العائلات في دراسات الحالة): 16:9 لصور القطاعات والخدمات،
   و`--4x3` لصور العائلات. `span` لا `div`: البطاقة نفسها رابط.
   [T202-3] والصيغة نفسها لصورة المقالة البارزة في بطاقتها بقوائم المدونة
   والأرشيفات، بنسبة ملفها (1200×630). */
.card__media,
.article-tease__media {
  display: block;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-color: var(--surface-raised);
  margin-bottom: var(--space-1);
}
.card__media > img,
.article-tease__media > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.card__media--4x3 > img { aspect-ratio: 4 / 3; }
.article-tease__media > img { aspect-ratio: 1200 / 630; }

/* ============================================================
   [T203] سطر المواصفة في بطاقة العائلة بصفحات القطاعات.
   ============================================================ */
/* [T203-1] `.keyspec` عُرِّف `inline-flex`، فكل `<span class="num">` داخله
   يصير بنداً مرناً مستقلاً والنصّ حوله بنوداً مجهولة تتزاحم جنباً إلى
   جنب: الرقم يُعصَر ويُكسَر في وسطه. المقيس على الصفحات العربية الـ11:
   45 رقماً من 45 على أكثر من سطر («1996» ⇒ «19» ثم «96»). السطر نصّ
   يجري، لا صفّ بنود ⇒ `block`: الأرقام تبقى في السطر، و`align-self` من
   القاعدة الأولى يُبقي الشريحة بعرض محتواها. */
.product-card .keyspec { display: block; }

/* [T203-2] بطاقة المقالة ترتفع عند دخولها المشهد ولا تبهت. [MOT-1]
   يحرّك `opacity` على نطاق من ارتفاع البطاقة نفسها (`entry 5% → 60%`)؛
   ومنذ [T202-3] صارت البطاقة بصورتها نحو 460–490px، فالصفّ الأول الذي
   يطلّ من أسفل الشاشة يبقى نصف شفّاف حتى يُمرَّر. المقيس عند 1280×900
   بلا تمرير: `opacity` 0.41 في المدونة العربية و0.54 في الإنجليزية، و13
   نصّاً دون حدّ التباين (axe `color-contrast`). الإزاحة تبقى والبهتان
   يسقط عن هذه البطاقة وحدها: نصّها وصورتها بتباينهما الكامل في كل ارتفاع
   شاشة. بقية بطاقات [PROTO-6] و[MOT-1] كما هي. */
@keyframes itco-rise-move { from { transform: translateY(10px); } to { transform: none; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .article-tease { animation-name: itco-rise-move; }
  }
}