/* =========================================================================
   EMIRATISATION page
   Signature: ribbons in the colours of the UAE flag sweep in and settle into
   a waving flag behind the headline (assets/pages/emiratisation.js, Three.js).
   Flag colours are used with restraint against the navy: in the hero, and as
   small marks (figure rules, tile bars, the portrait corner) elsewhere.
   All layout uses logical properties so Arabic and Urdu mirror cleanly.
   ========================================================================= */

:root {
  --flag-red: #E4332D;     /* = --red, the booth red */
  --flag-green: #00843D;
  --flag-white: #F5F7F6;
  --flag-black: #05080C;
  /* Arabic originals (shown in Arabic on every page): a Naskh face where the visitor has one */
  --f-arq: "Noto Naskh Arabic", "Amiri", "Traditional Arabic", "Geeza Pro", "SF Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, serif;
}
/* Arabic set inside English text: no tracking or capitals (they pull the joined letters apart) */
[lang="ar"][translate="no"] { font-family: var(--f-arq); letter-spacing: normal; text-transform: none; }

/* ---------- Hero ---------- */
.emh {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: grid; align-items: center;
  color: var(--fg); background: var(--bg-deep);
}
.emh-bg {
  position: absolute; inset: 0; z-index: -4; pointer-events: none;
  background:
    radial-gradient(60% 70% at 72% 42%, rgba(46, 141, 181, .26), transparent 70%),
    radial-gradient(50% 60% at 30% 100%, rgba(0, 132, 61, .10), transparent 70%),
    linear-gradient(180deg, var(--navy-990) 0%, var(--navy-950) 55%, var(--navy-990) 100%);
}
/* daylight: a cool sky, a step deeper than the page, so the white ribbons have something to read against */
:root[data-theme="light"] .emh-bg {
  background:
    radial-gradient(55% 65% at 74% 44%, rgba(27, 113, 148, .26), transparent 72%),
    radial-gradient(50% 60% at 30% 100%, rgba(0, 132, 61, .07), transparent 70%),
    linear-gradient(180deg, #C4D7E4 0%, #D6E3EC 55%, #E6EEF3 100%);
}
.emh-canvas, .emh-still { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; }
.emh-still { display: none; }
.emh-still svg { width: 100%; height: 100%; }
.emh.no-gl .emh-canvas { display: none; }
.emh.no-gl .emh-still { display: block; }
.emh-shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--deep-rgb), .82) 0%, rgba(var(--deep-rgb), .5) 34%, rgba(var(--deep-rgb), 0) 62%),
    linear-gradient(180deg, rgba(var(--deep-rgb), .55) 0%, transparent 22%, transparent 80%, var(--bg) 100%);
}
:root[data-theme="light"] .emh-shade {
  background:
    linear-gradient(90deg, rgba(240, 245, 248, .9) 0%, rgba(240, 245, 248, .62) 34%, rgba(240, 245, 248, 0) 60%),
    linear-gradient(180deg, rgba(201, 220, 232, .5) 0%, transparent 22%, transparent 80%, var(--bg) 100%);
}
:root[dir="rtl"] .emh-shade {
  background:
    linear-gradient(270deg, rgba(var(--deep-rgb), .82) 0%, rgba(var(--deep-rgb), .5) 34%, rgba(var(--deep-rgb), 0) 62%),
    linear-gradient(180deg, rgba(var(--deep-rgb), .55) 0%, transparent 22%, transparent 80%, var(--bg) 100%);
}
:root[dir="rtl"][data-theme="light"] .emh-shade {
  background:
    linear-gradient(270deg, rgba(240, 245, 248, .9) 0%, rgba(240, 245, 248, .62) 34%, rgba(240, 245, 248, 0) 60%),
    linear-gradient(180deg, rgba(201, 220, 232, .5) 0%, transparent 22%, transparent 80%, var(--bg) 100%);
}
.emh-inner {
  position: relative; display: grid; justify-items: start;
  padding-block: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + clamp(24px, 6vh, 72px)) clamp(96px, 14vh, 140px);
}
/* the copy column: the flag waves beside it; i18n.js scales the H1 down when a long word is wider than this column */
.emh-col { display: grid; justify-items: start; gap: clamp(16px, 2.6vh, 28px); width: min(100%, 40vw); }
.emh-crumbs { display: flex; gap: 10px; align-items: center; color: var(--fg-muted); }
.emh-crumbs a:hover { color: var(--accent); }
.emh-title {
  font-family: var(--f-display); font-weight: 900; font-stretch: 125%;
  font-size: clamp(3rem, min(7.4vw, 12.6vh), 10rem); line-height: .88; letter-spacing: -.035em;
  max-width: min(7.2em, 100%); margin-inline-start: -.04em; color: var(--fg);
  text-shadow: 0 10px 60px rgba(var(--deep-rgb), .6);
}
:root[data-theme="light"] .emh-title { text-shadow: 0 0 40px rgba(255, 255, 255, .7); }
.emh-accent { color: var(--accent-display); }
.emh-ar {
  margin-top: -6px; font-size: clamp(1.45rem, .95rem + 1.5vw, 2.5rem); font-weight: 700; line-height: 1.35; color: var(--fg);
}
/* Arabic pages: the translated H1 already says it */
:root[lang="ar"] .emh-ar { display: none; }
.emh-lead { max-width: min(44ch, 100%); color: rgba(var(--fg-rgb), .86); }
:root[data-theme="light"] .emh-lead { color: var(--fg); }
/* the buttons may run wider than the copy column: they sit below the flag, and so keep one row in every language */
.emh-actions { margin-top: 6px; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); }
/* Arabic and Urdu set display type at taller line-heights (i18n.css): a smaller H1 keeps the lead and buttons on the first screen */
@media (min-width: 1101px), (min-width: 761px) and (orientation: landscape) {
  :root[lang="ar"] .emh-title { font-size: clamp(2.6rem, min(6vw, 10vh), 8rem); }
  :root[lang="ur"] .emh-title { font-size: clamp(2.4rem, min(4.8vw, 7.6vh), 6.2rem); }
  /* Russian has the longest words ("Национальные"): a smaller H1 keeps them inside the copy column */
  :root[lang="ru"] .emh-title { font-size: clamp(2.6rem, min(6.2vw, 10.6vh), 8.4rem); }
}
.emh-foot {
  position: absolute; inset-inline: var(--gutter); bottom: clamp(20px, 3.6vh, 34px);
  display: flex; align-items: center; gap: 18px; color: var(--fg-muted); pointer-events: none;
}
/* right to left: the line moves under the flag (bottom left), clear of the chat button */
:root[dir="rtl"] .emh-foot { justify-content: flex-end; }
/* the four flag colours as one small mark (the hoist red first) */
.emh-flagmark, .emq-flag { display: inline-flex; gap: 3px; }
.emh-flagmark i, .emq-flag i { width: 14px; height: 3px; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(var(--fg-rgb), .3); }
.emh-flagmark i:nth-child(1), .emq-flag i:nth-child(1) { background: var(--flag-red); }
.emh-flagmark i:nth-child(2), .emq-flag i:nth-child(2) { background: var(--flag-green); }
.emh-flagmark i:nth-child(3), .emq-flag i:nth-child(3) { background: var(--flag-white); }
.emh-flagmark i:nth-child(4), .emq-flag i:nth-child(4) { background: var(--flag-black); }

/* phones and portrait tablets: the flag waves in the upper part, the type sits below it */
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  .emh { align-items: end; }
  .emh-inner { padding-block: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 27vh) calc(108px + env(safe-area-inset-bottom, 0px)); }
  .emh-col { width: 100%; }
  .emh-eyebrow { letter-spacing: .12em; }
  .emh-title { font-size: clamp(2.6rem, 13.4vw, 4.6rem); max-width: 100%; }
  .emh-lead { font-size: var(--t-base); }
  .emh-crumbs { display: none; }
  .emh-shade {
    background: linear-gradient(180deg, rgba(var(--deep-rgb), .5) 0%, transparent 16%, rgba(var(--deep-rgb), .2) 40%, rgba(var(--deep-rgb), .86) 58%, var(--bg) 100%);
  }
  :root[data-theme="light"] .emh-shade, :root[dir="rtl"][data-theme="light"] .emh-shade {
    background: linear-gradient(180deg, rgba(201, 220, 232, .5) 0%, transparent 16%, rgba(240, 245, 248, .2) 40%, rgba(240, 245, 248, .9) 58%, var(--bg) 100%);
  }
  :root[dir="rtl"] .emh-shade {
    background: linear-gradient(180deg, rgba(var(--deep-rgb), .5) 0%, transparent 16%, rgba(var(--deep-rgb), .2) 40%, rgba(var(--deep-rgb), .86) 58%, var(--bg) 100%);
  }
  .emh-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .emh-foot { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) { .emh-inner { padding-top: calc(var(--nav-h) + 25vh); } .emh-title { font-size: clamp(2.4rem, 11vw, 3.6rem); } }

/* ---------- Section heads: wider heading column, a size that keeps them to two or three lines ---------- */
.em-head { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.em-head .display { font-size: clamp(2.5rem, 1.3rem + 3.9vw, 5.6rem); }
@media (max-width: 860px) { .em-head { grid-template-columns: 1fr; } }

/* ---------- Figures ---------- */
.emf { background: var(--bg); padding-bottom: clamp(72px, 9vw, 130px); }
.emf-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-block-end: 1px solid var(--line-dark);
}
.emf-item {
  position: relative; display: grid; align-content: start; gap: 18px;
  padding: clamp(26px, 3vw, 40px) clamp(18px, 2.2vw, 32px) clamp(30px, 3.4vw, 48px);
  border-inline-start: 1px solid var(--line-dark);
}
.emf-item:first-child { border-inline-start: 0; padding-inline-start: 0; }
.emf-item::before {
  content: ""; position: absolute; inset-block-start: -1px; inset-inline: 0; height: 3px;
  background: var(--c); box-shadow: 0 0 0 .5px rgba(var(--fg-rgb), .22);
  transform: scaleX(var(--k, 1)); transform-origin: left;
}
:root[dir="rtl"] .emf-item::before { transform-origin: right; }
.emf-item:first-child::before { inset-inline-start: 0; }
.emf-tag { color: var(--accent); }
.emf-num { font-size: clamp(2.8rem, 1.2rem + 3.7vw, 5.6rem); color: var(--fg); white-space: nowrap; }
.emf-num sup { color: var(--accent-display); }
.emf-label { max-width: 26ch; color: var(--fg-muted); font-size: var(--t-sm); line-height: 1.5; }
.emf-sectors { display: flex; flex-wrap: wrap; gap: 8px; }
.emf-sectors span {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-dark);
  color: var(--fg); font-size: var(--t-xs); font-weight: 500; letter-spacing: .02em;
}
:root[data-theme="light"] .emf-sectors span { border-color: rgba(var(--fg-rgb), .22); }
@media (max-width: 1080px) {
  .emf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emf-item:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
  .emf-item:nth-child(n+3) { border-block-start: 1px solid var(--line-dark); }
}
@media (max-width: 520px) {
  .emf-item { padding-inline: 14px 0; gap: 12px; }
  .emf-item:nth-child(odd) { padding-inline: 0 14px; }
  .emf-num { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .emf-label { font-size: var(--t-xs); }
  .emf-sectors span { padding: 5px 9px; }
}

/* ---------- How to register ---------- */
.emr { overflow-x: clip; }
.emr-steps {
  --p: 0; list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px);
}
/* the rail behind the icons; it fills as the section scrolls into view */
.emr-steps::before, .emr-steps::after {
  content: ""; position: absolute; inset-block-start: 40px; inset-inline: 40px calc(33.33% - 40px); height: 2px; border-radius: 2px;
}
.emr-steps::before { background: rgba(25, 46, 73, .14); }
.emr-steps::after {
  background: linear-gradient(90deg, var(--flag-red), var(--flag-green) 50%, var(--teal));
  transform: scaleX(var(--p)); transform-origin: left;
}
:root[dir="rtl"] .emr-steps::after { transform-origin: right; background: linear-gradient(270deg, var(--flag-red), var(--flag-green) 50%, var(--teal)); }
.emr-step { position: relative; display: grid; align-content: start; gap: 14px; }
.emr-ico {
  position: relative; z-index: 1; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%;
  background: var(--paper); color: var(--teal-ink);
  box-shadow: inset 0 0 0 1.5px rgba(25, 46, 73, .16), 0 18px 40px -22px rgba(25, 46, 73, .45);
  transition: box-shadow .5s var(--ease), color .5s var(--ease), transform .5s var(--ease);
}
.emr-step.on .emr-ico { box-shadow: inset 0 0 0 1.5px var(--teal), 0 22px 44px -20px rgba(27, 113, 148, .55); }
.emr-step:hover .emr-ico { transform: translateY(-4px); }
.emr-ico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.emr-n { margin-top: 14px; color: var(--teal-ink); }
.emr-h { font-size: var(--t-xl); font-weight: 800; font-stretch: 110%; line-height: 1.06; color: var(--ink); }
.emr-p { color: var(--ink-muted); max-width: 34ch; }
.emr-cta { margin-top: clamp(48px, 6vw, 80px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
.emr-note { font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: var(--t-lg); color: var(--ink); }
@media (max-width: 860px) {
  .emr-steps { grid-template-columns: 1fr; gap: 36px; }
  .emr-steps::before, .emr-steps::after { inset-block: 40px 40px; inset-inline: 39px auto; width: 2px; height: auto; }
  .emr-steps::after { transform: scaleY(var(--p)); transform-origin: top; background: linear-gradient(180deg, var(--flag-red), var(--flag-green) 50%, var(--teal)); }
  :root[dir="rtl"] .emr-steps::after { transform-origin: top; background: linear-gradient(180deg, var(--flag-red), var(--flag-green) 50%, var(--teal)); }
  .emr-step { grid-template-columns: 80px minmax(0, 1fr); column-gap: 22px; row-gap: 8px; }
  .emr-ico { grid-row: 1 / span 3; }
  .emr-n { margin-top: 8px; }
}
@media (max-width: 520px) { .emr-cta .btn { width: 100%; } }

/* ---------- Sectors ---------- */
.ems { background: var(--bg); overflow-x: clip; }
.ems-glow {
  position: absolute; inset: 10% -10% auto auto; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--accent-rgb), .12), transparent);
}
.ems-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); gap: 16px;
}
.ems-tile {
  --mx: 50%; --my: 50%;
  position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: end; gap: 10px;
  padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r);
  /* opaque (the card gradient as it looks over navy): translucent tiles banded in software rasterising */
  background: linear-gradient(160deg, #22374F, #1C314B); border: 1px solid var(--line-dark);
  transition: translate .6s var(--ease), border-color .5s, box-shadow .6s var(--ease);   /* translate, so the hover lift never fights the GSAP entrance (transform) */
}
.ems-tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(var(--accent-rgb), .16), transparent 60%);
}
.ems-tile:hover { translate: 0 -6px; border-color: rgba(var(--accent-rgb), .45); box-shadow: 0 40px 80px -46px var(--shadow-deep); }
.ems-tile:hover::before { opacity: 1; }
.ems-energy { grid-column: span 2; grid-row: span 2; align-content: end; background: linear-gradient(160deg, #1D405D, #1B304B 60%); }
:root[data-theme="light"] .ems-tile { background: linear-gradient(160deg, #FFFFFF, #F7FAFB); }
:root[data-theme="light"] .ems-energy { background: linear-gradient(160deg, #DCEBF3, #FFFFFF 64%); }
.ems-art { position: absolute; inset: 22px 22px auto 22px; color: var(--accent); opacity: .85; pointer-events: none; }
.ems-art svg { width: 100%; height: auto; max-height: 300px; }
.ems-sea { animation: emsSea 6s ease-in-out infinite; }
.ems-sea2 { animation-duration: 8s; animation-direction: reverse; opacity: .6; }
@keyframes emsSea { 50% { transform: translateX(-14px); } }
.ems-flare { fill: var(--flag-red); stroke: none; transform-box: fill-box; transform-origin: 50% 100%; animation: emsFlare 1.6s ease-in-out infinite alternate; }
@keyframes emsFlare { to { transform: scale(.82, 1.12) rotate(-4deg); } }
.ems-ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: auto; border-radius: 14px; color: var(--accent); background: rgba(var(--accent-rgb), .1); align-self: start; }
.ems-tile:not(.ems-energy) { align-content: space-between; }
.ems-tile:not(.ems-energy) .ems-ico { margin-bottom: clamp(40px, 6vw, 80px); }
.ems-energy .ems-ico { display: none; }
.ems-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease); }
.ems-tile:hover .ems-ico svg { transform: scale(1.12) rotate(-6deg); }
.ems-kick { color: var(--accent); }
.ems-h { font-size: var(--t-xl); font-weight: 800; font-stretch: 112%; line-height: 1.05; }
.ems-energy .ems-h { font-size: var(--t-3xl); font-weight: 900; font-stretch: 122%; letter-spacing: -.03em; }
.ems-tile > * { min-width: 0; }
/* Russian sector names are long single words ("Здравоохранение"): smaller, and allowed to break */
:root[lang="ru"] .ems-tile:not(.ems-energy) { container-type: inline-size; }
:root[lang="ru"] .ems-tile:not(.ems-energy) .ems-h { font-size: min(1.5rem, 9.6cqi); font-stretch: 100%; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.ems-p { color: var(--fg-muted); font-size: var(--t-sm); max-width: 44ch; }
.ems-energy .ems-p { font-size: var(--t-base); }
/* the four flag colours run in under the tile on hover */
.ems-bar {
  position: absolute; inset-inline: 0; inset-block-end: 0; height: 4px;
  background: linear-gradient(90deg, var(--flag-red) 0 25%, var(--flag-green) 25% 50%, var(--flag-white) 50% 75%, var(--flag-black) 75%);
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease);
}
:root[dir="rtl"] .ems-bar { transform-origin: right; }
.ems-tile:hover .ems-bar, .ems-tile:focus-within .ems-bar { transform: scaleX(1); }
.ems-energy .ems-bar { transform: scaleX(1); }
:root[data-theme="light"] .ems-bar { box-shadow: 0 -1px 0 rgba(var(--fg-rgb), .12); }
@media (max-width: 1080px) {
  .ems-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); }
  .ems-energy { grid-row: span 1; min-height: 440px; }
}
@media (max-width: 520px) {
  .ems-grid { gap: 10px; grid-auto-rows: minmax(176px, auto); }
  .ems-tile { padding: 18px; }
  .ems-energy { min-height: 420px; }
  .ems-art { inset: 14px 10px auto 10px; }
  .ems-tile:not(.ems-energy) .ems-ico { margin-bottom: 28px; width: 46px; height: 46px; }
  .ems-h { font-size: 1.22rem; }
  .ems-energy .ems-h { font-size: 2.6rem; }
}

/* ---------- Chairman's priority ---------- */
.emq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 110px); align-items: center; }
.emq-portrait { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; background: #E2EAEF; box-shadow: 0 50px 90px -50px rgba(25, 46, 73, .55); }
.emq-portrait img { width: 100%; height: 100%; object-fit: cover; }
.emq-flag { position: absolute; inset-inline-start: 22px; inset-block-end: 22px; padding: 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, .88); }
.emq-flag i { box-shadow: 0 0 0 .5px rgba(25, 46, 73, .3); }
.emq-body { display: grid; gap: clamp(22px, 3vw, 36px); }
.emq-quote { margin: 0; }
.emq-quote p {
  font-family: var(--f-display); font-weight: 800; font-stretch: 108%;
  font-size: clamp(1.75rem, 1rem + 2.5vw, 3.3rem); line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
}
.emq-sign { display: grid; gap: 6px; padding-inline-start: 18px; border-inline-start: 3px solid var(--flag-red); }
.emq-name { font-family: var(--f-display); font-weight: 800; font-stretch: 110%; font-size: var(--t-lg); color: var(--ink); }
.emq-role { color: var(--ink-muted); }
.emq-note { max-width: 52ch; color: var(--ink-muted); font-size: var(--t-lg); line-height: 1.5; }
@media (max-width: 860px) {
  .emq-grid { grid-template-columns: 1fr; }
  .emq-portrait { max-width: 360px; width: 78%; }
}

/* ---------- Closing call to action (stays navy in both modes, like the footer it leads into) ---------- */
.emc {
  position: relative; overflow: hidden; isolation: isolate; color: var(--fg);
  padding-block: clamp(96px, 12vw, 170px) clamp(200px, 22vw, 330px);
  background:
    radial-gradient(70% 90% at 80% 100%, rgba(46, 141, 181, .3), transparent 70%),
    linear-gradient(180deg, var(--navy-950), var(--navy-990));
}
.emc-ribbons { position: absolute; inset: auto 0 0 0; width: 100%; height: clamp(220px, 30vw, 420px); z-index: -1; pointer-events: none; overflow: visible; }
.emc-r { fill: none; stroke-width: 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.emc-r1 { stroke: var(--flag-red); opacity: .75; }
.emc-r2 { stroke: var(--flag-green); opacity: .85; }
.emc-r3 { stroke: var(--flag-white); opacity: .5; }
.emc-r4 { stroke: #000; opacity: .55; }
.emc-inner { display: grid; justify-items: start; gap: clamp(22px, 3vw, 36px); }
.emc-kicker { color: var(--accent); }
.emc-title { max-width: 9em; }
.emc-lead { max-width: 50ch; }
@media (max-width: 520px) { .emc .btn-row, .emc-btn { width: 100%; } .emc-r { stroke-width: 9; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ems-sea, .ems-flare { animation: none; }
}

/* ---------- Flag-colour rule: a thin divider at the top of a section (red, green, white, black) ---------- */
.em-flagrule { position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 2; display: flex; height: 3px; transform: scaleX(var(--k, 1)); transform-origin: left; }
:root[dir="rtl"] .em-flagrule { transform-origin: right; }
.em-flagrule i { flex: 1; }
.em-flagrule i:nth-child(1) { background: var(--flag-red); }
.em-flagrule i:nth-child(2) { background: var(--flag-green); }
.em-flagrule i:nth-child(3) { background: var(--flag-white); box-shadow: inset 0 0 0 .5px rgba(var(--fg-rgb), .18); }
.em-flagrule i:nth-child(4) { background: var(--flag-black); box-shadow: inset 0 0 0 .5px rgba(var(--fg-rgb), .18); }
.emf { position: relative; }

/* ---------- The Founder's vision (navy in both modes) ---------- */
.emz {
  position: relative; overflow: clip; color: var(--fg);
  background:
    radial-gradient(60% 50% at 78% 30%, rgba(46, 141, 181, .2), transparent 70%),
    radial-gradient(40% 40% at 10% 90%, rgba(0, 132, 61, .1), transparent 70%),
    linear-gradient(180deg, var(--navy-990), var(--navy-950) 60%, var(--navy-990));
  padding-bottom: clamp(80px, 10vw, 150px);
}
.emz-top { padding-block: clamp(96px, 12vw, 170px) clamp(48px, 6vw, 80px); }
.emz-text { display: grid; gap: clamp(22px, 3.4vh, 40px); }
.emz-eyebrow { color: var(--accent); }
.emz-main { margin: 0; display: grid; gap: clamp(20px, 3vh, 34px); }
.emz-quote { margin: 0; display: grid; gap: clamp(16px, 2.4vh, 28px); }
.emz-ar {
  font-weight: 700; font-size: clamp(2.3rem, 1.1rem + 4.1vw, 5.4rem); line-height: 1.4; color: var(--fg);
  text-align: left; text-wrap: balance; text-shadow: 0 10px 50px rgba(0, 0, 0, .35);
}
:root[dir="rtl"] .emz-ar { text-align: right; }
.emz-en { font-family: var(--f-display); font-weight: 800; font-stretch: 110%; font-size: clamp(1.3rem, .85rem + 1.5vw, 2.3rem); line-height: 1.18; letter-spacing: -.01em; color: var(--accent-display); max-width: 30ch; }
.emz-cite { display: flex; align-items: center; gap: 14px; color: var(--fg-muted); font-size: var(--t-sm); }
.emz-mark { flex: none; width: 4px; align-self: stretch; min-height: 34px; border-radius: 2px; background: linear-gradient(180deg, var(--flag-green) 0 33.3%, var(--flag-white) 33.3% 66.6%, #000 66.6%); box-shadow: -4px 0 0 var(--flag-red); margin-inline-start: 4px; }
:root[dir="rtl"] .emz-mark { box-shadow: 4px 0 0 var(--flag-red); }
/* Arabic pages: the original already reads, so its translation would only repeat it */
:root[lang="ar"] .zq-tr { display: none; }
.emz-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.emz-card, .emz-bridge {
  position: relative; display: grid; align-content: start; gap: 16px; margin: 0;
  padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r); border: 1px solid var(--line-dark);
  background: linear-gradient(160deg, #22374F, #1A2F49);
}
.emz-card::before { content: ""; position: absolute; inset-inline: clamp(24px, 2.6vw, 36px); inset-block-start: -1px; height: 2px; background: var(--flag-green); }
.emz-card + .emz-card::before { background: var(--flag-red); }
.emz-card-ar { font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.6; color: var(--fg-muted); text-align: left; }
:root[dir="rtl"] .emz-card-ar { text-align: right; }
.emz-card-q { margin: 0; }
.emz-card-q p { font-family: var(--f-display); font-weight: 700; font-stretch: 106%; font-size: var(--t-lg); line-height: 1.3; color: var(--fg); }
.emz-card-by { color: var(--fg-faint); margin-top: auto; }
.emz-bridge { background: linear-gradient(160deg, #1D5F80, #174A66); border-color: rgba(98, 184, 218, .35); }
.emz-bh { font-size: var(--t-2xl); font-weight: 900; font-stretch: 118%; letter-spacing: -.02em; line-height: 1; color: #FFFFFF; }
.emz-bp { color: rgba(255, 255, 255, .88); }
.emz-src { margin-top: clamp(28px, 3vw, 44px); max-width: 80ch; font-size: var(--t-xs); line-height: 1.6; color: var(--fg-faint); }
@media (max-width: 1080px) {
  .emz-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .emz-bridge { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .emz-cards { grid-template-columns: 1fr; }
}

/* ---------- Work hard. Aim to be the best. ---------- */
.emw { position: relative; background: var(--bg); overflow-x: clip; }
.emw-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.emw-tile {
  position: relative; overflow: hidden; display: grid; align-content: start; gap: 14px;
  padding: clamp(26px, 2.8vw, 40px); padding-block-start: clamp(34px, 3.4vw, 48px); border-radius: var(--r);
  border: 1px solid var(--line-dark); background: linear-gradient(160deg, #22374F, #1C314B);
  transition: translate .6s var(--ease), border-color .5s, box-shadow .6s var(--ease);
}
:root[data-theme="light"] .emw-tile { background: linear-gradient(160deg, #FFFFFF, #F4F8FA); }
.emw-tile:hover { translate: 0 -6px; border-color: rgba(var(--accent-rgb), .45); box-shadow: 0 40px 80px -46px var(--shadow-deep); }
.emw-bar { position: absolute; inset-inline: 0; inset-block-start: 0; height: 5px; background: var(--c); box-shadow: inset 0 -.5px 0 rgba(var(--fg-rgb), .2); transform: scaleX(var(--k, 1)); transform-origin: left; transition: height .5s var(--ease); }
:root[dir="rtl"] .emw-bar { transform-origin: right; }
.emw-tile:hover .emw-bar { height: 9px; }
.emw-ico { width: 64px; height: 64px; color: var(--accent); margin-bottom: clamp(20px, 3vw, 44px); }
.emw-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.emw-kick { color: var(--accent); }
.emw-h { font-size: clamp(2rem, 1.1rem + 2.4vw, 3.6rem); font-weight: 900; font-stretch: 118%; line-height: .95; letter-spacing: -.03em; }
.emw-p { color: var(--fg-muted); }
.emw-src { font-size: var(--t-xs); color: var(--fg-faint); line-height: 1.5; }
.emw-link { margin-top: 6px; justify-self: start; }
@media (max-width: 960px) { .emw-grid { grid-template-columns: 1fr; } .emw-ico { margin-bottom: 8px; } }

/* ---------- Closing line ---------- */
.emc-proud { display: inline-flex; align-items: center; gap: 14px; color: var(--fg-muted); }