:root{
/* ── Base palette ─────────────────────────────────────────────
   Teal ("تيفاني") is the identity colour. Gold is the ceremonial
   secondary; silver is the quiet structural secondary. */

/* Teal — Tiffany at 500; 700 is the brand primary, taken from the logo
   artwork. The deep end keeps Tiffany's cyan hue rather than drifting to
   bottle green, so dark bands read as deep Tiffany. */
--teal-950:#05262B;--teal-900:#073640;--teal-800:#0A4A54;--teal-700:#196F7C;
--teal-600:#0F8189;--teal-500:#0ABAB5;--teal-400:#4FCCC8;--teal-300:#7FDBD8;
--teal-200:#AEE8E6;--teal-100:#D3F0EF;--teal-50:#EBF8F7;

/* Gold — ceremonial: seals, rules, awards, honours */
--gold-800:#5F4A1E;--gold-700:#7E6229;--gold-600:#9A7735;--gold-500:#B08D4A;
--gold-400:#C6A667;--gold-300:#D9C08A;--gold-200:#E8D9B4;--gold-100:#F1E7CF;

/* Silver — structural secondary: hairlines, meta, dividers */
--silver-700:#5E6C6E;--silver-600:#7C8B8D;--silver-500:#98A5A7;
--silver-400:#AEBABB;--silver-300:#C7D0D1;--silver-200:#D8DEDF;--silver-100:#EBEEEF;

/* Ink — cool neutrals carrying the same cyan cast as the brand teal */
--ink-950:#081114;--ink-900:#0D1B1E;--ink-800:#173033;--ink-700:#244246;
--ink-600:#37585D;--ink-500:#4C6569;--ink-400:#6F868A;--ink-300:#9BAEB1;
--ink-200:#C7D2D4;--ink-100:#E4E9EA;--ink-50:#F1F4F5;

/* Paper — the ground. Pure white pages; the tinted paper is kept for
   printed documents, which stay warm. */
--paper:#FFFFFF;--paper-warm:#F6F3EC;--paper-print:#FBFAF7;--white:#FFFFFF;

/* Semantic hues */
--green-600:#1F7A4C;--green-100:#E1F0E8;
--amber-600:#B4761A;--amber-100:#F7EBD6;
--red-600:#A32B2B;--red-100:#F5E3E3;
--blue-600:#0F5B7A;--blue-100:#E0EDF3;

/* ── Semantic aliases — use THESE in components ───────────── */
--brand-primary:var(--teal-700);   /* the logo colour */
--brand-secondary:var(--silver-500);
--text-heading:var(--ink-900);
--text-body:var(--ink-700);
--text-muted:var(--ink-400);
--text-meta:var(--silver-700);
--text-inverse:var(--paper);
--text-accent:var(--teal-700);
--text-link:var(--teal-700);
--text-link-hover:var(--teal-900);
--text-on-accent:var(--white);
--text-on-dark:#E6F1F2;
--text-ceremonial:var(--gold-700);

--surface-page:var(--paper);
--surface-card:#F5F8F8;
--surface-sunken:var(--ink-50);
--surface-quiet:var(--ink-100);
--surface-accent-soft:var(--teal-50);
--surface-accent:var(--teal-500);
--surface-dark:var(--teal-950);
--surface-dark-alt:var(--teal-900);
--surface-brand:var(--teal-700);
--text-on-brand:var(--white);
--text-on-brand-muted:var(--teal-100);
--surface-gold-soft:var(--gold-100);

--border-hairline:var(--ink-100);
--border-default:var(--ink-200);
--border-strong:var(--ink-400);
--border-accent:var(--teal-500);
--border-gold:var(--gold-400);
--border-on-dark:rgba(230,241,242,.18);

--focus-ring:var(--teal-500);
--selection-bg:var(--teal-100);

--status-success-fg:var(--green-600);--status-success-bg:var(--green-100);
--status-warning-fg:var(--amber-600);--status-warning-bg:var(--amber-100);
--status-danger-fg:var(--red-600);--status-danger-bg:var(--red-100);
--status-info-fg:var(--blue-600);--status-info-bg:var(--blue-100);
}

:root{
/* Families */
--font-arabic:"Cairo",system-ui,sans-serif;
--font-serif-display:"Libre Baskerville",Georgia,serif;
--font-sans:"Work Sans",system-ui,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;
/* Bilingual defaults: Arabic first, Latin falls through to the sans */
--font-body:var(--font-arabic),var(--font-sans);
--font-display:var(--font-arabic),var(--font-serif-display);

/* Scale — editorial, 1.25 ratio, rounded to whole px */
--text-2xs:11px;--text-xs:12px;--text-sm:14px;--text-base:16px;--text-md:18px;
--text-lg:21px;--text-xl:26px;--text-2xl:32px;--text-3xl:40px;--text-4xl:52px;
--text-5xl:64px;--text-6xl:80px;

/* Weights — Arabic display sits at 600/700; body at 400 */
--weight-light:300;--weight-regular:400;--weight-medium:500;
--weight-semibold:600;--weight-bold:700;--weight-black:900;

/* Line heights */
--leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.55;
--leading-arabic:1.85;--leading-loose:2;

/* Tracking — Arabic never gets positive tracking; Latin eyebrows do */
--tracking-tight:-0.02em;--tracking-normal:0;
--tracking-wide:0.06em;--tracking-eyebrow:0.16em;

/* Measure */
--measure-narrow:46ch;--measure:66ch;--measure-wide:80ch;
}

:root{
/* 4px base, balanced density */
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;
--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;--space-40:160px;

/* Component rhythm */
--control-height-sm:32px;--control-height:40px;--control-height-lg:48px;
--control-pad-x:18px;--control-pad-x-sm:12px;--control-pad-x-lg:26px;
--card-pad:24px;--card-pad-lg:32px;
--section-pad-y:96px;--section-pad-y-sm:56px;
--gutter:24px;--page-max:1200px;--doc-max:760px;

/* Corners — the system is square by decision. 2px is the ceiling. */
--radius-none:0;--radius-xs:2px;--radius-sm:3px;--radius-pill:999px;

/* Hairlines */
--rule-hair:1px;--rule-medium:2px;--rule-heavy:3px;--rule-accent:4px;
}

:root{
/* Shadows are restrained: this system prefers hairlines to elevation.
   Cards default to a border, not a shadow. Shadows appear only on things
   that genuinely float (menus, dialogs, sticky bars). */
--shadow-none:none;
--shadow-hairline:0 0 0 1px var(--border-hairline);
--shadow-xs:0 1px 2px rgba(5,38,43,.06);
--shadow-sm:0 2px 6px rgba(5,38,43,.07);
--shadow-md:0 6px 20px rgba(5,38,43,.09);
--shadow-lg:0 18px 48px rgba(5,38,43,.12);
--shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.5);
--shadow-focus:0 0 0 3px rgba(10,186,181,.32);
--shadow-gold-rule:inset 0 -3px 0 var(--gold-500);

/* Protection gradient for text over imagery */
--scrim-bottom:linear-gradient(to top,rgba(5,38,43,.86) 0%,rgba(5,38,43,.55) 38%,rgba(5,38,43,0) 100%); /* @kind other */

/* Blur — used sparingly, only on bars that overlay scrolling content */
--blur-bar:saturate(150%) blur(14px); /* @kind other */
}

:root{
/* Motion is quiet: fades and short slides. No bounce, no spring, no scale-up. */
--duration-instant:80ms; /* @kind other */
--duration-fast:140ms; /* @kind other */
--duration-base:220ms; /* @kind other */
--duration-slow:360ms; /* @kind other */
--duration-slower:600ms; /* @kind other */
--ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
--ease-editorial:cubic-bezier(.16,.84,.44,1); /* @kind other */
--transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard); /* @kind other */
--reveal-distance:12px; /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{
--duration-fast:0ms; /* @kind other */
--duration-base:0ms; /* @kind other */
--duration-slow:0ms; /* @kind other */
--duration-slower:0ms; /* @kind other */
--reveal-distance:0px; /* @kind other */
}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Arabic-first: a page that forgets dir still renders RTL. Latin surfaces
   opt out explicitly with <html dir="ltr"> or a [dir="ltr"] subtree. */
html:not([dir]){direction:rtl}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-arabic);font-weight:var(--weight-regular);-webkit-font-smoothing:antialiased}
:where([dir="rtl"]) body,body[dir="rtl"]{line-height:var(--leading-arabic)}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--font-display);color:var(--text-heading);font-weight:var(--weight-semibold);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--teal-200);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--teal-500)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--selection-bg);color:var(--ink-900)}
hr{border:0;border-top:var(--rule-hair) solid var(--border-hairline);margin:var(--space-8) 0}
img,svg{display:block;max-width:100%}
[hidden]{display:none !important}
code,kbd,pre{font-family:var(--font-mono);font-size:.92em}
small{font-size:var(--text-sm)}
figure,blockquote{margin:0}
ul,ol{margin:0;padding-inline-start:1.25em}
table{border-collapse:collapse;width:100%}

/* A deliberately tiny utility layer — the recurring editorial devices. */
.mh-eyebrow{font-family:var(--font-body);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.mh-eyebrow--gold{color:var(--gold-600)}
/* العربية لا تأخذ تباعد حروف موجباً (DESIGN.md): تُصفَّر رموز التباعد في الصفحة العربية،
   وتُستعاد للأسطر اللاتينية وحدها، ومنها السطر اللاتيني تحت الاسم (Libre Baskerville بأحرف كبيرة) */
html[lang="ar"]{--tracking-wide:0;--tracking-eyebrow:0}
html[lang="ar"] :is([dir="ltr"],.mh-ltr,[style*="--font-serif-display"][style*="uppercase"]){--tracking-wide:0.06em;--tracking-eyebrow:0.16em}
.mh-rule{height:var(--rule-hair);background:var(--border-hairline);border:0}
.mh-rule--gold{height:var(--rule-medium);background:var(--gold-500)}
.mh-rule--accent{height:var(--rule-medium);background:var(--teal-500)}
.mh-measure{max-width:var(--measure)}
.mh-doc{max-width:var(--doc-max);margin-inline:auto}
.mh-page{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
.mh-lede{font-size:var(--text-md);color:var(--text-body);line-height:var(--leading-arabic)}
.mh-meta{font-size:var(--text-xs);color:var(--text-meta);letter-spacing:var(--tracking-wide)}
.mh-dark{background:var(--surface-dark);color:var(--text-on-dark)}
.mh-dark h1,.mh-dark h2,.mh-dark h3,.mh-dark h4{color:var(--white)}
.mh-numeral{font-family:var(--font-serif-display);font-variant-numeric:lining-nums tabular-nums;unicode-bidi:isolate}
/* RTL helpers: any Latin or numeric run embedded in Arabic must be isolated,
   or the bidi algorithm reorders it (a phone number reads backwards). */
.mh-ltr{direction:ltr;text-align:left;unicode-bidi:isolate}
.mh-num{unicode-bidi:isolate;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}


/* ترويسة الصفحة الأولى: الصورة تنزل تحت الاسم على الشاشات الضيقة */
@media (max-width:840px){.mh-hero-grid{grid-template-columns:1fr!important;gap:var(--space-10)!important}}

/* ───────────────────────── Language ─────────────────────────
   English mode swaps the Arabic face for the Latin ones and tightens
   the line-height; direction comes from <html dir> set by js/i18n.js. */
html[lang="en"]{--font-body:var(--font-sans),var(--font-arabic);--font-display:var(--font-serif-display),var(--font-arabic);--font-arabic:var(--font-serif-display);--leading-arabic:1.65}
html[lang="en"] body{line-height:var(--leading-arabic)}
/* Breadcrumb separators point along the reading direction. */
html[dir="ltr"] nav[aria-label] svg.lucide-chevron-left{transform:scaleX(-1)}

/* ───────────────────────── Header / nav ─────────────────────────
   Desktop: inline links. Narrow screens: a toggle button opens the
   links as a panel under the bar. */
.mh-header{position:sticky;top:0;z-index:30}
.mh-header-bar{display:flex;align-items:center;gap:var(--space-6)}
.mh-nav{display:flex;gap:var(--space-6);flex:1;flex-wrap:nowrap;min-width:0}
.mh-nav a{white-space:nowrap}
.mh-nav-toggle{display:none}
.mh-pdf-mobile{display:none}
.mh-lang{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);color:var(--text-heading);background:transparent;border:var(--rule-hair) solid var(--border-default);padding:6px 10px;cursor:pointer;white-space:nowrap;line-height:1}
.mh-lang:hover{border-color:var(--teal-500);color:var(--teal-700)}
@media (max-width:900px){
  .mh-header-bar{gap:var(--space-3)}
  .mh-pdf-mobile{display:block}
  .mh-nav{display:none!important;position:absolute;inset-inline:0;top:100%;flex-direction:column;gap:0;background:var(--surface-page);border-bottom:var(--rule-hair) solid var(--border-hairline);box-shadow:0 16px 32px -20px rgba(5,38,43,.35);padding:var(--space-2) var(--gutter) var(--space-4)}
  .mh-nav.is-open{display:flex!important}
  .mh-nav a{padding:12px 0!important;border-bottom:var(--rule-hair) solid var(--border-hairline)!important;font-size:var(--text-md)!important}
  .mh-nav a.is-active{color:var(--text-heading)!important;font-weight:var(--weight-semibold)!important}
  .mh-nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:transparent;border:var(--rule-hair) solid var(--border-default);color:var(--text-heading);cursor:pointer}
  .mh-pdf-desktop{display:none!important}
  .mh-header-spacer{flex:1}
  .mh-brand-text span{font-size:var(--text-sm)!important;white-space:nowrap}
}
@media (max-width:600px){.mh-brand-text{display:none}}

/* ───────────────────────── Journey ───────────────────────── */
/* فهرس الميادين: روابط فوق خط علوي بدل البطاقات */
.mh-stage-link{display:grid;gap:var(--space-1);align-content:start;padding-top:var(--space-3);border-top:var(--rule-medium) solid var(--border-default);border-bottom:0;transition:border-color var(--duration-fast) var(--ease-standard)}
.mh-stage-link:hover,.mh-stage-link.is-active{border-top-color:var(--teal-600)}
.mh-stage{scroll-margin-top:90px}
/* تفاصيل المحطة تُفتح عند الطلب */
.mh-disclosure{margin-top:var(--space-5);border-top:var(--rule-hair) solid var(--border-hairline)}
.mh-disclosure>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding-top:var(--space-4);min-height:44px;cursor:pointer;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-accent)}
.mh-disclosure>summary::-webkit-details-marker{display:none}
.mh-disclosure>summary svg{transition:transform var(--duration-base) var(--ease-standard)}
.mh-disclosure[open]>summary svg{transform:rotate(180deg)}
/* الجدارات المتراكمة: قائمة مرتبة بخطوط شعرية */
.mh-competency-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));column-gap:var(--space-10)}
.mh-competency-list>li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-3) 0;border-top:var(--rule-hair) solid var(--border-hairline);font-size:var(--text-md);color:var(--text-heading)}
.mh-competency-list .mh-numeral{font-size:var(--text-lg);color:var(--text-accent)}

/* ───────────────────────── Responsive grids ─────────────────────────
   Layouts are inline grids; these classes override them by width. */
@media (max-width:1024px){
  .mh-pillars-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mh-stage-map{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:900px){
  .mh-stage{grid-template-columns:1fr!important;gap:var(--space-8)!important}
  .mh-stage-head{position:static!important}
  .mh-record-grid,.mh-contact-grid,.mh-quote-grid{grid-template-columns:1fr!important;gap:var(--space-10)!important}
  .mh-threads-grid{grid-template-columns:1fr!important}
}
@media (max-width:840px){
  .mh-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--space-6)!important}
}
@media (max-width:700px){
  .mh-station-grid{grid-template-columns:1fr!important;gap:var(--space-6)!important}
  .mh-station-stats{grid-template-columns:1fr!important;gap:var(--space-4)!important}
}
@media (max-width:600px){
  :root{--gutter:16px;--section-pad-y:56px;--section-pad-y-sm:40px;--text-3xl:30px;--text-2xl:26px;--text-xl:22px;--text-lg:19px;--space-20:48px;--space-24:56px;--space-16:40px}
  .mh-pillars-grid{grid-template-columns:1fr!important}
  .mh-form-row{grid-template-columns:1fr!important}
  .mh-hero-grid{gap:var(--space-8)!important}
  .mh-hero-actions>*{flex:1 1 auto}
  .mh-tabs-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* main عنصر في شبكة الصفحة؛ بلا هذا يتمدد ليتسع لمحتوى لا يلتف مثل شريط الميادين */
main{min-width:0}
/* المسار على الجوال: فهرس الميادين شريط ثابت تحت الترويسة، والمحطات بعرض كامل */
@media (max-width:900px){
  .mh-stage-map{position:sticky;top:65px;z-index:5;display:flex!important;gap:var(--space-6)!important;overflow-x:auto;scrollbar-width:none;margin:var(--space-10) calc(-1 * var(--gutter)) var(--space-12)!important;padding:0 var(--gutter);background:var(--surface-page);border-bottom:var(--rule-hair) solid var(--border-hairline)}
  .mh-stage-map::-webkit-scrollbar{display:none}
  .mh-stage-link{flex:0 0 auto;align-content:center;min-height:44px;padding:0;border-top:0;border-bottom:var(--rule-medium) solid transparent}
  .mh-stage-link:hover,.mh-stage-link.is-active{border-bottom-color:var(--teal-500)}
  .mh-stage-link>:not(:nth-child(2)){display:none}
  .mh-stage-link>:nth-child(2){font-size:var(--text-sm)!important;white-space:nowrap}
  .mh-stage{scroll-margin-top:130px}
}
@media (max-width:600px){
  .mh-station{grid-template-columns:1fr!important;gap:0!important}
  .mh-station>span:first-child{display:none!important}
  .mh-station-card{padding:var(--space-5)!important}
}
/* Tables never squeeze below a readable width; the wrapper scrolls instead. */
.mh-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:600px){.mh-table-wrap table{min-width:540px}}