/*
Theme Name: ICV Book — Oman Local Content
Theme URI: https://omanicv.om/
Description: Block theme for the Oman ICV Book (كتاب المحتوى المحلي) — a bilingual (Arabic RTL primary / English secondary) national platform documenting In-Country Value achievements in the Sultanate of Oman. v0.3.0 rebuilds the whole presentation layer from the approved v2 mockup: photographic home hero, six pillar pages, three editions, the e-book reader, and every listing and detail page.
Version: 0.12.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: icv-book
Tags: block-theme, full-site-editing, rtl-language-support, translation-ready, custom-colors
*/

/* ==========================================================================
   GENERATED FILE — do not hand-edit.

   Sections 2-5 below are copied verbatim from the approved mockup
   (mockups/v2/{styles,pages,hero,reader}.css) by theme-build/build2.py.
   Edit the mockup and rebuild; anything typed here is lost on the next build.
   Section 1 declares the webfonts against the theme's own asset folder, and
   section 6 is the only WordPress-specific layer.
   ========================================================================== */

/* --- 1. webfonts (self-hosted, SIL OFL 1.1 — see assets/fonts/) ---------- */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-700.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/outfit-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/outfit-latin-700-normal.woff2) format('woff2')}

/* --- 2. styles.css (from the mockup) ---------------------------------- */
/* ==========================================================================
   Oman ICV Book — home page mockup v2 (client brief, 17/8 meeting)
   Arabic-first RTL. Bilingual heading pairs. No frameworks.
   ========================================================================== */

:root{
  --deep:#0e3b2e;
  --deep-2:#082019;
  --deep-3:#0b2c22;
  --green:#1f8a5f;
  --green-2:#16704c;
  --green-soft:#e9f2ec;
  --green-soft-2:#f3f8f5;
  --mint:#7fd9b0;
  --gold:#c9a227;
  --gold-2:#a9861c;
  --gold-soft:#f6efd9;
  --paper:#f7f6f1;
  --card:#ffffff;
  --line:#e6e3d8;
  --line-2:#efece2;
  --text:#1b2018;
  --muted:#5c6154;
  --radius:16px;
  --radius-lg:22px;
  --shadow-1:0 1px 2px rgba(11,44,34,.05), 0 6px 18px rgba(11,44,34,.05);
  --shadow-2:0 2px 6px rgba(11,44,34,.06), 0 18px 40px rgba(11,44,34,.09);
  --ease:cubic-bezier(.22,1,.36,1);
  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  color:var(--text);
  background:var(--paper);
  font-size:16px;
  line-height:1.75;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;line-height:1.35;font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* language visibility ---------------------------------------------------- */
/* ── one language at a time ───────────────────────────────────────────────
   The design was built to show Arabic with its English translation sitting
   underneath it. The client's review rejected that: the Arabic view must be
   Arabic. These are the classes that carry the English companion line — the
   nav's second line, section sub-headings, pillar labels, page-hero kickers —
   so hiding the family here keeps every page in step without touching markup.

   Deliberately NOT hidden: the language toggle (it has to say EN to be found),
   the "Oman ICV Book" line in the logo lockup, and company names, which the
   client confirmed stay in English. */
html[lang^="ar"] .en,
html[lang^="ar"] .en-h,
html[lang^="ar"] .en-sub,
html[lang^="ar"] .en-s{display:none !important}
html[lang^="ar"] .only-en{display:none !important}
html[lang^="en"] .only-ar{display:none !important}

/* ── the interim English view ──────────────────────────────────────────────
   The English layer is incomplete, and the client asked that the English view
   show no Arabic rather than show both. Suppressing the untranslated Arabic
   leaves cards that still occupy their full height with nothing inside them —
   18 empty shells on the home page alone, which reads as a broken page rather
   than an unfinished translation.

   A card with no `.only-en` descendant has no English text in it at all, so it
   is dropped entirely and its section closes up around it. Sections keep their
   heading, lead and call to action: "this section exists, its content is being
   translated" is honest, where 600px of blank is not.

   Remove this block when the English content is complete — every card will
   have English in it and the rule will stop matching on its own. Browsers
   without :has() simply keep the empty shells. */
html[lang^="en"] .card:not(:has(.only-en)),
html[lang^="en"] .prog:not(:has(.only-en)),
html[lang^="en"] .logo-card:not(:has(.only-en)),
html[lang^="en"] .jstep:not(:has(.only-en)),
html[lang^="en"] .why-item:not(:has(.only-en)),
html[lang^="en"] .side-card li:not(:has(.only-en)),
html[lang^="en"] .notice:not(:has(.only-en)),
html[lang^="en"] .opp:not(:has(.only-en)),
html[lang^="en"] .cat:not(:has(.only-en)),
html[lang^="en"] .pillar:not(:has(.only-en)),
/* An Arabic-only breadcrumb leaves a bar containing nothing but a chevron, and
   an unlabelled stat reads as a number someone forgot to finish. Both look
   like defects rather than untranslated content, so they go too. */
html[lang^="en"] .crumb:not(:has(.only-en)),
html[lang^="en"] .phero-stat:not(:has(.only-en)),
html[lang^="en"] .logo-note:not(:has(.only-en)){display:none}
/* Book covers stay: they are artwork, not text, so they read correctly in
   either language and the editions shelf would be empty without them. */

/* bilingual heading pair ------------------------------------------------- */
.bi{display:flex;flex-direction:column;gap:2px}
.bi .ar{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:-.01em}
.bi .en{font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.sec-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;justify-content:space-between;margin-bottom:8px}
.sec-head .lead{color:var(--muted);font-size:14.5px;max-width:62ch;margin-top:6px}
.sec-title-row{display:flex;align-items:center;gap:14px}
.sec-icon{width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;border-radius:14px;background:var(--gold-soft);color:var(--gold-2)}
.sec-icon svg{width:26px;height:26px}
section{padding-block:clamp(44px,5vw,72px)}
.sec-alt{background:var(--green-soft-2)}

/* buttons ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:999px;font-weight:600;font-size:14.5px;
  border:1px solid transparent;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s,box-shadow .25s}
.btn:hover{transform:translateY(-2px)}
.btn .arw{transition:transform .3s var(--ease)}
.btn:hover .arw{transform:translateX(-4px)}
html[lang^="en"] .btn:hover .arw{transform:translateX(4px)}
.btn-ghost{border-color:var(--gold);color:var(--gold-2);background:#fff}
.btn-ghost:hover{background:var(--gold-soft)}
.btn.is-soon{border-color:var(--line);color:var(--muted);background:var(--green-soft-2);cursor:default;pointer-events:none}
.btn.is-soon svg{width:15px;height:15px;opacity:.8}
.btn-line{border-color:var(--line);color:var(--text);background:#fff}
.btn-line:hover{border-color:var(--green);color:var(--green-2)}
.btn-solid{background:var(--deep);color:#fff}
.btn-solid:hover{background:var(--green-2)}
.btn-gold{background:var(--gold);color:#221a02}
.btn-gold:hover{background:var(--gold-2);color:#fff}
.link-arw{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--green-2)}
.link-arw .arw{transition:transform .3s var(--ease)}
.link-arw:hover .arw{transform:translateX(-4px)}
html[lang^="en"] .link-arw:hover .arw{transform:translateX(4px)}

/* ── HEADER ─────────────────────────────────────────────────────────────── */
.topbar{background:var(--deep-2);color:#cfe0d8;font-size:12.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.topbar a{color:#cfe0d8}
.topbar a:hover{color:#fff}
.topbar .tb-links{display:flex;gap:18px;flex-wrap:wrap}
.topbar .tb-soon{display:inline-flex;align-items:center;gap:7px;color:#9fb7ac;cursor:default}
.topbar .tb-badge{font-style:normal;font-size:10px;line-height:1;letter-spacing:.06em;padding:3px 7px 4px;border-radius:999px;border:1px solid rgba(255,255,255,.22);color:#cfe0d8;opacity:.85}

.site-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s}
.site-head.is-stuck{box-shadow:0 8px 24px rgba(11,44,34,.08)}
/* WordPress's fixed admin bar sits above a sticky header, so an editor loses
   the top of the logo. Offset by the admin bar's own height; below 782px core
   makes the bar absolute rather than fixed, so the offset must come back off. */
body.admin-bar .site-head{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-head{top:0}}
.head-in{display:flex;align-items:center;gap:22px;min-height:88px}
.brand{display:flex;align-items:center;gap:12px;flex:1 1 0;min-width:0}
.brand-mark{width:46px;height:46px;flex:0 0 46px}
.brand-txt{min-width:0}
.brand-txt .l1,.brand-txt .l2{white-space:nowrap;display:block}
.brand-txt .l1{font-size:15.5px;font-weight:700;line-height:1.25}
.brand-txt .l2{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* The nav sits in the middle of the header, not pushed against the tools, so
   the row stays balanced however many items it carries. The brand and the
   tools take equal flexible thirds on either side of it. */
.nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:4px}
.nav > li{position:relative}
.nav > li > a{display:block;padding:8px 11px;border-radius:10px;font-size:14px;font-weight:600;position:relative;white-space:nowrap}
.nav > li > a .en{display:block;font-size:10px;font-weight:500;color:var(--muted);letter-spacing:.01em;white-space:nowrap}
.nav > li > a::after{content:"";position:absolute;inset-inline:11px;bottom:2px;height:2px;background:var(--gold);
  transform:scaleX(0);transform-origin:inline-start;transition:transform .3s var(--ease)}
.nav > li > a:hover::after,.nav > li.is-active > a::after{transform:scaleX(1)}
.nav .has-sub > a{padding-inline-end:24px}
.nav .caret{position:absolute;inset-inline-end:6px;top:calc(50% - 3px);width:8px;height:6px}
.subnav{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:280px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-2);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s,transform .22s var(--ease),visibility .22s}
.nav .has-sub:hover .subnav,.nav .has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:none}
.subnav a{display:flex;flex-direction:column;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:600}
.subnav a span{font-size:11.5px;font-weight:500;color:var(--muted)}
.subnav a:hover{background:var(--green-soft)}

.head-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1 1 0;min-width:0}
.lang{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;font-size:13px;font-weight:600}
.lang button{padding:5px 12px;border-radius:999px;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--deep);color:#fff}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:#fff;
  transition:border-color .25s,color .25s,transform .25s var(--ease)}
.icon-btn:hover{border-color:var(--green);color:var(--green-2);transform:translateY(-2px)}
.icon-btn svg{width:19px;height:19px}
.burger{display:none}

/* ── NEWS TICKER ────────────────────────────────────────────────────────── */
.ticker-band{background:var(--deep-2);padding-block:16px}
.ticker{display:flex;align-items:center;gap:14px;background:#0c2a21;border:1px solid rgba(127,217,176,.18);
  border-radius:16px;padding:10px 14px;overflow:hidden}
.ticker-label{display:flex;align-items:center;gap:9px;color:#bfe4d3;font-size:13.5px;font-weight:600;flex:0 0 auto;
  padding-inline-end:14px;border-inline-end:1px solid rgba(127,217,176,.2)}
.ticker-label svg{width:19px;height:19px}
.ticker-view{flex:1 1 auto;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker-track{display:flex;align-items:center;gap:0;width:max-content;animation:tick 46s linear infinite}
.ticker:hover .ticker-track,.ticker-track.is-paused{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes tick-ltr{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[lang^="en"] .ticker-track{animation-name:tick-ltr}
.ticker-item{display:flex;align-items:center;gap:10px;color:#e6f3ec;font-size:14px;padding-inline:18px;white-space:nowrap}
.ticker-item:hover{color:var(--mint)}
.ticker-item .dot{width:5px;height:5px;border-radius:50%;background:rgba(191,228,211,.5);flex:0 0 5px}
.badge-new{background:var(--mint);color:#06281c;font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px}
.ticker-nav{display:flex;gap:4px;flex:0 0 auto}
/* Each news item carries its publication date, so a reader can tell at a
   glance that these are dated announcements rather than evergreen slogans. */
.tk-date{color:rgba(230,243,236,.55);font-size:12.5px;padding-inline-start:10px}
.ticker-item[target="_blank"]:hover{color:#fff;text-decoration:underline}
.ticker-nav button{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;color:#bfe4d3;
  border:1px solid rgba(127,217,176,.22);transition:background .2s,color .2s}
.ticker-nav button:hover{background:rgba(127,217,176,.14);color:#fff}
.ticker-nav svg{width:14px;height:14px}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:clamp(420px,52vw,560px);display:grid;align-items:center;overflow:hidden;background:var(--deep-3)}
.hero-bg{position:absolute;inset:0}
.hero-bg .ph{height:100%;border-radius:0}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,32,25,.62),rgba(8,32,25,.5) 45%,rgba(8,32,25,.82))}
.hero-in{position:relative;z-index:2;padding-block:clamp(48px,6vw,84px);color:#fff}
.hero-grid{display:grid;grid-template-columns:1fr 1px 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.hero-rule{background:linear-gradient(180deg,transparent,rgba(255,255,255,.28),transparent)}
.hero-col h1{font-size:clamp(26px,3.4vw,40px);letter-spacing:-.015em}
.hero-col p{margin-top:14px;font-size:clamp(14.5px,1.2vw,16.5px);color:#dbe9e2;max-width:52ch}
.hero-col .btn{margin-top:22px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mint);margin-bottom:12px}
.hero-eyebrow::before{content:"";width:26px;height:2px;background:var(--gold)}
.hero-col.ltr{direction:ltr;text-align:left}
.hero-col.rtl{direction:rtl;text-align:right}

/* ── PLACEHOLDER MEDIA ──────────────────────────────────────────────────── */
.ph{position:relative;border-radius:var(--radius);overflow:hidden;background:
  linear-gradient(135deg,#123c30,#1f8a5f 55%,#7fd9b0);isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;opacity:.22;
  background-image:radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1.5px),
    radial-gradient(circle at 70% 65%,#fff 0 1px,transparent 1.5px);
  background-size:26px 26px,34px 34px}
.ph::after{content:attr(data-label);position:absolute;inset-inline-start:10px;bottom:8px;
  font-size:10.5px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.82);text-transform:uppercase}
.ph.v2{background:linear-gradient(135deg,#0e3b2e,#3f7d63 60%,#c9a227)}
.ph.v3{background:linear-gradient(135deg,#20303a,#3c6d7a 55%,#9fd0cf)}
.ph.v4{background:linear-gradient(135deg,#3a2f13,#8a7327 60%,#e0cd84)}
.ph.v5{background:linear-gradient(135deg,#12281f,#2f5e49 60%,#8fbfa5)}
.ph-4x3{aspect-ratio:4/3}
.ph-16x9{aspect-ratio:16/9}

/* ── CARD PRIMITIVES ────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1);
  transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:#d8d3c2}
.card-media{position:relative}
.card-body{padding:16px 18px 18px}
.card-kicker{font-size:12px;color:var(--muted);font-weight:600}
.card-title{font-size:16px;margin-top:6px;line-height:1.5}
.card-text{font-size:13.5px;color:var(--muted);margin-top:8px;line-height:1.7}
.card-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);display:flex;align-items:center;justify-content:space-between;gap:10px}
.tag{position:absolute;inset-inline-start:10px;top:10px;background:rgba(14,59,46,.92);color:#fff;font-size:11.5px;
  font-weight:600;padding:4px 11px;border-radius:999px;backdrop-filter:blur(4px)}
.tag.gold{background:rgba(201,162,39,.95);color:#221a02}
.tag.light{background:rgba(255,255,255,.94);color:var(--deep)}

/* ── WHY / IMPACT SPLIT ─────────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
/* With the national figures removed, the why-it-matters column is alone in
   this grid and should not sit in half the width. */
.split-1{grid-template-columns:1fr}
.split-1 .why-list{max-width:none}
.split-1 .why-item{max-width:820px}
.why-list{display:grid;gap:12px;margin-top:20px}
.why-item{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.why-item:hover{transform:translateX(-5px);border-color:var(--green);box-shadow:var(--shadow-1)}
html[lang^="en"] .why-item:hover{transform:translateX(5px)}
.why-ico{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:12px;
  background:var(--green-soft);color:var(--green-2)}
.why-ico svg{width:24px;height:24px}
.why-item h3{font-size:15.5px}
.why-item p{font-size:13px;color:var(--muted);margin-top:3px}

.impact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 14px;text-align:center;
  position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-1)}
.stat::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--gold);transform:scaleX(0);
  transform-origin:inline-start;transition:transform .5s var(--ease)}
.stat.is-in::after{transform:scaleX(1)}
.stat .num{font-size:clamp(21px,2.2vw,27px);font-weight:700;color:var(--green-2);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat .lbl{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}

.notice{display:flex;gap:12px;align-items:flex-start;background:var(--gold-soft);border:1px solid #e6d7a6;
  border-radius:14px;padding:13px 16px;font-size:13px;color:#4a3c0c;margin-top:18px}
.notice svg{width:20px;height:20px;flex:0 0 20px;margin-top:2px}
/* A "coming soon" notice is a status, not a warning — the gold of .notice
   reads as "something is wrong with this page". Same shape, calm green. */
.notice-soon{background:var(--green-soft);border-color:#c6ddd0;color:#1d3d2f;
  margin-top:0;font-size:13.5px}

/* ── PILLARS / JOURNEY / PROGRAMMES TRIPTYCH ────────────────────────────── */
.trip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);align-items:start}
.trip-col > .bi{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px}

.pillar-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pillar{text-align:center;padding:6px 4px;cursor:pointer}
.pillar-ico{width:64px;height:64px;margin-inline:auto;border-radius:50%;background:var(--deep);color:#fff;
  display:grid;place-items:center;transition:transform .4s var(--ease),background .3s}
.pillar-ico svg{width:30px;height:30px}
.pillar:hover .pillar-ico{transform:translateY(-5px) scale(1.06);background:var(--green)}
.pillar h3{font-size:13.5px;margin-top:10px;line-height:1.45}
.pillar .en-s{font-size:10.5px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

.journey{position:relative;padding-inline-start:34px}
.journey::before{content:"";position:absolute;inset-inline-start:15px;top:8px;bottom:8px;width:2px;background:var(--line)}
.journey-fill{position:absolute;inset-inline-start:15px;top:8px;width:2px;background:linear-gradient(180deg,var(--green),var(--gold));
  height:0;transition:height 1.4s var(--ease)}
.jstep{position:relative;padding-bottom:20px}
.jstep:last-child{padding-bottom:0}
.jdot{position:absolute;inset-inline-start:-34px;top:1px;width:32px;height:32px;border-radius:50%;background:#fff;
  border:2px solid var(--line);display:grid;place-items:center;color:var(--green-2);transition:border-color .4s,background .4s,color .4s,transform .4s var(--ease)}
.jdot svg{width:16px;height:16px}
.jstep.is-in .jdot{border-color:var(--green);background:var(--green-soft);transform:scale(1.06)}
.jstep:last-child.is-in .jdot{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-2)}
.jyear{font-size:15px;font-weight:700;color:var(--deep)}
.jtext{font-size:13.5px;color:var(--muted);margin-top:2px;line-height:1.85;max-width:62ch}
/* Each milestone now carries a heading and a link to the announcement it came
   from, so a reader can check the claim rather than take it on trust. */
.jhead{font-size:15.5px;font-weight:700;margin:2px 0 6px;line-height:1.45}
.jsrc{margin-top:8px}
.jsrc a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.jsrc a:hover{color:var(--green-2);text-decoration:underline}
.jsrc svg{width:13px;height:13px;flex:0 0 13px}

.prog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.prog{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 10px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:9px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.prog:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow-1)}
.prog .logo-slot{width:100%;height:46px;display:grid;place-items:center;border-radius:9px;background:var(--green-soft-2);
  border:1px dashed #cfd6cf;font-size:11px;font-weight:700;color:var(--green-2);letter-spacing:.04em;padding-inline:6px;text-align:center}
.prog .nm{font-size:12.5px;font-weight:600;line-height:1.4}
/* A supplied programme mark, in the card grid and on the detail hero. The
   dashed placeholder frame comes off once there is real artwork inside. */
.logo-slot.is-set{border:0;background:transparent;padding:0;width:100%;
  display:flex;align-items:center;justify-content:center}
.logo-slot.is-set img{max-height:100%;max-width:100%;width:auto;object-fit:contain;
  display:block;margin-inline:auto}
.prog-mark{display:inline-flex;align-items:center;margin:18px 0 4px;
  background:#fff;border-radius:12px;padding:10px 16px;box-shadow:var(--shadow-1)}
.prog-mark img{height:46px;width:auto;display:block}

/* ── programme icons ──────────────────────────────────────────────────────
   The official programme marks could not be cleared with every owner before
   the deadline, so each programme carries a symbolic icon instead. They are
   deliberately uniform in size, tile and colour — one shared treatment, only
   the glyph differs — so they read as a wayfinding set and not as a row of
   logos. The note under the grid says so in both languages. */
.prog-ico{display:grid;place-items:center;width:64px;height:64px;margin-inline:auto;
  border-radius:16px;background:var(--green-soft);color:var(--green-2)}
.prog-ico svg{width:30px;height:30px}
.prog-ico-hero{width:58px;height:58px;margin:18px 0 4px;border-radius:14px;
  background:rgba(255,255,255,.10);color:#cfe7da}
.prog-ico-hero svg{width:27px;height:27px}
.logo-note{font-size:11.5px;color:var(--muted);margin-top:12px;display:flex;gap:7px;align-items:flex-start}
.logo-note svg{width:14px;height:14px;flex:0 0 14px;margin-top:3px}

/* ── FILTER CHIPS ───────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:13.5px;font-weight:600;color:var(--text);transition:all .25s var(--ease)}
.chip svg{width:17px;height:17px;opacity:.75}
.chip:hover{border-color:var(--green);color:var(--green-2)}
.chip[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:#fff}
.chip[aria-pressed="true"] svg{opacity:1}
.chip.reset{border-style:dashed;color:var(--muted)}
.select{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:13.5px;font-weight:600;color:var(--muted)}
.select svg{width:16px;height:16px}
.filter-bar{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;
  display:grid;gap:12px;margin-top:20px;box-shadow:var(--shadow-1)}
.filter-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:flex-start}
.filter-row .lbl{font-size:13px;color:var(--muted);font-weight:600;margin-inline-end:4px}

/* ── OPPORTUNITIES BAR ──────────────────────────────────────────────────── */
.opps-bar{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 16px;margin-top:18px;box-shadow:var(--shadow-1)}
.opps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.opp{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:9px;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.opp:hover{transform:translateY(-4px);box-shadow:var(--shadow-1);border-color:var(--green)}
.opp-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.opp-ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--green-soft);color:var(--green-2)}
.opp-ico svg{width:20px;height:20px}
.opp .kind{font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold-2)}
.opp h3{font-size:15px;line-height:1.5}
.opp .meta{font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:12px}
.opp .meta span{display:inline-flex;align-items:center;gap:5px}
.opp .meta svg{width:14px;height:14px}

/* ── CAROUSEL ───────────────────────────────────────────────────────────── */
.carousel{position:relative;margin-top:20px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(238px,1fr);gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-block:6px;padding-inline:2px;
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
.rail > .card{display:flex;flex-direction:column}
.rail > .card .card-body{flex:1 1 auto;display:flex;flex-direction:column}
.rail > .card .card-foot{margin-top:auto}
.rail > .cat{justify-content:flex-start}
.rail > .cat > a{margin-top:auto}
.rail-cols-6{grid-auto-columns:minmax(196px,1fr)}
.car-btn{position:absolute;top:calc(50% - 20px);width:40px;height:40px;border-radius:50%;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow-2);display:grid;place-items:center;z-index:5;
  transition:background .25s,color .25s,transform .25s var(--ease)}
.car-btn:hover{background:var(--deep);color:#fff;transform:scale(1.06)}
.car-btn svg{width:16px;height:16px}
.car-prev{inset-inline-start:-14px}
.car-next{inset-inline-end:-14px}
.dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.dots button{width:8px;height:8px;border-radius:50%;background:#d5d2c6;transition:width .3s var(--ease),background .3s}
.dots button[aria-current="true"]{width:22px;background:var(--green-2)}

/* ── AUTHOR LINE ────────────────────────────────────────────────────────── */
.byline{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);font-weight:600}
.byline svg{width:15px;height:15px}

/* ── INITIATIVES STATS STRIP ────────────────────────────────────────────── */
.total-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 18px;box-shadow:var(--shadow-1)}
.total-card .ic{width:48px;height:48px;border-radius:14px;background:var(--green-soft);color:var(--green-2);display:grid;place-items:center}
.total-card .ic svg{width:24px;height:24px}
.total-card .n{font-size:28px;font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums;line-height:1.1}
.total-card .t{font-size:12px;color:var(--muted)}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);margin-top:24px;overflow:hidden}
.strip > div{display:flex;align-items:center;gap:12px;padding:18px 16px;border-inline-end:1px solid var(--line-2)}
.strip > div:last-child{border-inline-end:0}
.strip .ic{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--green-soft-2);color:var(--green-2);display:grid;place-items:center}
.strip .ic svg{width:22px;height:22px}
.strip .n{font-size:21px;font-weight:700;color:var(--deep);font-variant-numeric:tabular-nums;line-height:1.2}
.strip .t{font-size:12px;color:var(--muted);line-height:1.5}

/* ── MANDATORY LIST ─────────────────────────────────────────────────────── */
.searchbox{display:flex;align-items:center;gap:10px;flex:1 1 240px;min-width:210px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 16px}
.searchbox input{border:0;outline:0;background:none;font:inherit;font-size:14px;flex:1 1 auto;min-width:0;color:var(--text)}
.searchbox svg{width:17px;height:17px;color:var(--muted);flex:0 0 17px}
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.cat:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--green)}
.cat-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cat-thumb{width:74px;height:56px;border-radius:10px;flex:0 0 74px}
.cat-ico{width:42px;height:42px;border-radius:50%;background:var(--green-soft-2);color:var(--green-2);display:grid;place-items:center;flex:0 0 42px}
.cat-ico svg{width:22px;height:22px}
.cat h3{font-size:15px}
.cat .count{font-size:12.5px;color:var(--green-2);font-weight:700}
.cat p{font-size:12.5px;color:var(--muted);line-height:1.6}
.mio-band{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:space-between;background:var(--green-soft-2);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:14px 18px;margin-top:20px}
.mio-logo{display:grid;place-items:center;padding:8px 16px;background:#fff;border:1px solid var(--line);border-radius:10px;
  font-size:12px;font-weight:700;color:var(--deep);letter-spacing:.06em;text-align:center;line-height:1.3}
.mio-logo small{display:block;font-size:9px;letter-spacing:.14em;color:var(--muted);font-weight:600}

/* ── SEARCH DEMO ────────────────────────────────────────────────────────── */
.search-demo > *,.sd-layout > *,.sd-main,.sd-side,.sd-bar > *,.res > div{min-width:0}
.search-demo{display:grid;grid-template-columns:1fr 1.55fr;gap:clamp(20px,2.6vw,32px);margin-top:22px;align-items:start}
.sd-main{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-1)}
.sd-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sd-bar .searchbox{border-color:#d9d5c7}
.sd-filters{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px;align-items:center;justify-content:space-between}
.sd-count{font-size:13px;color:var(--muted);font-weight:600;margin-top:14px}
.sd-layout{display:grid;grid-template-columns:180px 1fr;gap:16px;margin-top:12px}
.sd-types{border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--green-soft-2)}
.sd-types h4{font-size:13.5px;margin-bottom:8px}
.sd-types button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border-radius:9px;font-size:13px;
  color:var(--muted);text-align:start;transition:background .2s,color .2s}
.sd-types button svg{width:16px;height:16px;flex:0 0 16px}
.sd-types button:hover{background:#fff;color:var(--text)}
.sd-types button[aria-pressed="true"]{background:#fff;color:var(--green-2);font-weight:700;box-shadow:var(--shadow-1)}
.res{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-2);align-items:flex-start}
.res:last-child{border-bottom:0}
.res .thumb{width:112px;height:70px;flex:0 0 112px;border-radius:10px}
.res .kind{font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;background:var(--green-soft);color:var(--green-2)}
.res h3{font-size:15px;margin-top:0}
.res .date{font-size:12px;color:var(--muted);margin-top:4px}
.res p{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.65}
.res-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sd-side{display:grid;gap:14px}
.sd-sections{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-1)}
.sd-sections h4{font-size:14px;margin-bottom:12px}
.sec-counts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sec-count{border:1px solid var(--line);border-radius:12px;padding:11px 12px;display:flex;align-items:center;gap:10px;
  transition:border-color .25s,transform .25s var(--ease)}
.sec-count:hover{border-color:var(--green);transform:translateY(-2px)}
.sec-count svg{width:18px;height:18px;color:var(--green-2);flex:0 0 18px}
.sec-count .nm{font-size:12.5px;font-weight:600;line-height:1.35}
.sec-count .n{font-size:11.5px;color:var(--muted)}
.tip{display:flex;gap:11px;background:var(--gold-soft);border:1px solid #e8dcb2;border-radius:14px;padding:13px 15px;
  font-size:12.5px;color:#4a3c0c}
.tip svg{width:19px;height:19px;flex:0 0 19px;color:var(--gold-2)}
.no-res{font-size:13.5px;color:var(--muted);padding:22px 4px;text-align:center}
.more-wrap{display:flex;justify-content:center;padding-top:16px}

/* ── EDITIONS PROMO ─────────────────────────────────────────────────────── */
.editions{background:var(--deep-2);color:#fff;position:relative;overflow:hidden}
.editions::before{content:"";position:absolute;inset:0;opacity:.16;
  background:radial-gradient(700px 320px at 85% 15%,var(--green),transparent 70%),
             radial-gradient(600px 300px at 10% 90%,var(--gold),transparent 70%)}
.ed-in{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.editions .bi .en{color:rgba(255,255,255,.62)}
.editions .lead{color:#cfe0d8}
.ed-books{display:flex;gap:16px;flex-wrap:wrap}
.ed-book{display:block;width:150px}
.ed-book.soon{cursor:default;pointer-events:none}
.ed-cover{aspect-ratio:3/4;border-radius:6px;box-shadow:0 12px 30px rgba(0,0,0,.4);position:relative;
  transition:transform .45s var(--ease)}
.ed-book:hover .ed-cover{transform:translateY(-8px) rotate(-1.5deg)}
.ed-cover .yr{position:absolute;top:14px;inset-inline-end:14px;font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em}
.ed-cover .spine{position:absolute;inset-block:0;inset-inline-start:0;width:9px;background:rgba(0,0,0,.35)}
.ed-book .nm{font-size:13px;margin-top:11px;text-align:center;color:#e6f3ec}
.ed-book .nm small{display:block;color:rgba(255,255,255,.6);font-size:11.5px}
.ed-book.soon .ed-cover{opacity:.55}

/* Real cover renders, in place of the drawn placeholder. They are 3D mockups
   cut out to transparency with their baked drop shadow removed, so the shadow
   here is the site's own and follows the hover like the placeholder did. */
.ed-cover-img{display:block;width:100%;height:auto;border-radius:2px;
  filter:drop-shadow(0 14px 26px rgba(11,44,34,.28));
  transition:transform .35s var(--ease),filter .35s}
.ed-book:hover .ed-cover-img{transform:translateY(-8px) rotate(-1.5deg);
  filter:drop-shadow(0 22px 34px rgba(11,44,34,.34))}
.ed-book.soon .ed-cover-img{opacity:.55}
.card-media .ed-cover-img{width:auto;max-width:100%}
.ed-cover-img.cover{max-width:100%}
.ed-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ── FOOTER ─────────────────────────────────────────────────────────────── */
.site-foot{background:#061a14;color:#b9d2c7;font-size:13.5px;padding-block:44px 22px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:28px}
.site-foot h4{color:#fff;font-size:14.5px;margin-bottom:12px}
.site-foot a:hover{color:var(--mint)}
.site-foot li{padding-block:4px}
.foot-bot{margin-top:32px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#8faea2}

/* ── REVEAL ─────────────────────────────────────────────────────────────── */
html.has-js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.has-js .reveal.is-in{opacity:1;transform:none}
html.has-js .reveal-d1{transition-delay:.08s}
html.has-js .reveal-d2{transition-delay:.16s}
html.has-js .reveal-d3{transition-delay:.24s}

/* ── MOCKUP BANNER ──────────────────────────────────────────────────────── */
.mock-note{background:#1b2018;color:#e8e6dc;font-size:12.5px;padding:9px 0}
.mock-note .wrap{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center;text-align:center}
.mock-note b{color:var(--gold)}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width:1320px){
  .nav > li > a .en{display:none}
  .topbar .tb-links li:nth-child(2){display:none}
}
@media (max-width:1080px){
  .trip{grid-template-columns:1fr;gap:36px}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip > div:nth-child(2n){border-inline-end:0}
  .opps-grid{grid-template-columns:repeat(2,1fr)}
  .search-demo{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1100px){
  .nav,.head-tools .lang{display:none}
  .burger{display:grid}
  .head-tools{margin-inline-start:auto}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:26px}
  .hero-rule{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent)}
  .split{grid-template-columns:1fr;gap:36px}
  .ed-in{grid-template-columns:1fr}
  .sd-layout{grid-template-columns:1fr}
  .sec-counts{grid-template-columns:1fr}
}
@media (max-width:640px){
  .brand-mark{width:38px;height:38px;flex:0 0 38px}
  .brand-txt .l1{font-size:13px}
  .brand-txt .l2{font-size:10px}
  .impact-grid{grid-template-columns:repeat(2,1fr)}
  .opps-grid{grid-template-columns:1fr}
  .pillar-grid{grid-template-columns:repeat(2,1fr)}
  .prog-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr}
  .car-prev{inset-inline-start:2px}
  .car-next{inset-inline-end:2px}
  .res .thumb{display:none}
  .ticker-label span{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html.has-js .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .ticker-track{animation:none}
}


/* ── success-partners strip ──────────────────────────────────────────────
   Sits above the footer on every page, per the client's review. The track is
   rendered twice and translated by exactly half its width, so the loop is
   seamless in both directions. */
.pstrip{background:#fff;border-top:1px solid var(--line);padding:26px 0 30px;overflow:hidden}
.pstrip-view{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.pstrip-track{display:flex;align-items:center;gap:52px;width:max-content;
  animation:pstrip 90s linear infinite}
.pstrip-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:58px;padding:0 4px}
.pstrip-item img{max-height:58px;width:auto}
@keyframes pstrip{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html[lang^="ar"] .pstrip-track{animation-name:pstrip-rtl}
@keyframes pstrip-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){
  .pstrip-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:34px}
  .pstrip-view{mask-image:none;-webkit-mask-image:none}
}

/* ── partner wall on the edition pages ──────────────────────────────── */
.pwall{margin-top:8px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;padding:18px;text-align:center}
.pwall img{width:100%;height:auto;display:block;border-radius:8px}


/* ── supplied brand lockup ───────────────────────────────────────────────
   The client's logo is a stacked lockup carrying "ACHIEVEMENTS ICV" and the
   Arabic name, so it replaces the mark-plus-text pair the header used to
   build by hand. Height drives the size; the file is square. */
.brand{display:flex;align-items:center;gap:0;text-decoration:none}
/* The lockup is a stacked mark: the Arabic wordmark under "ICV" is only
   legible from about 68px of total height, so the header bar carries it at 70
   rather than the 58 a single-line logo would need. */
.brand-logo{height:70px;width:auto;display:block}
@media (max-width:1320px){.brand-logo{height:62px}}
@media (max-width:900px){.brand-logo{height:54px}}
@media (max-width:900px){.head-in{min-height:72px}}
.foot-logo{height:74px;width:auto;display:block;margin-bottom:14px}

/* --- 3. pages.css (from the mockup) ----------------------------------- */
/* ── page shell additions (inner pages) ─────────────────────────────────── */
.crumb{background:var(--green-soft-2);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.crumb .wrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-block:11px}
.crumb a:hover{color:var(--green-2)}
.crumb .sep{opacity:.5}
.crumb b{color:var(--text);font-weight:600}

.phero{background:var(--deep-2);color:#fff;position:relative;overflow:hidden;padding-block:clamp(34px,4.2vw,58px)}
.phero::before{content:"";position:absolute;inset:0;opacity:.2;
  background:radial-gradient(700px 320px at 88% 10%,var(--green),transparent 70%),
             radial-gradient(560px 280px at 6% 96%,var(--gold),transparent 70%)}
.phero .wrap{position:relative;z-index:2}
.phero .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mint);margin-bottom:10px}
.phero .eyebrow::before{content:"";width:24px;height:2px;background:var(--gold)}
.phero h1{font-size:clamp(24px,3vw,38px);letter-spacing:-.015em}
.phero .en-h{font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px}
.phero p{color:#cfe0d8;margin-top:14px;max-width:70ch;font-size:15px}
.phero-row{display:flex;gap:26px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap}
.phero-stats{display:flex;gap:12px;flex-wrap:wrap}
.phero-stat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:12px 16px;min-width:120px}
.phero-stat .n{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.phero-stat .t{font-size:11.5px;color:rgba(255,255,255,.66)}

/* prose ------------------------------------------------------------------ */
.prose{max-width:74ch;font-size:15.5px}
/* Body copy is justified so both margins line up. Arabic sets well as an even
   block, and at this measure the ragged inline-end edge was the first thing
   the eye caught. Not on narrow screens: a short measure turns justification
   into visible gaps between words. */
.prose p,.prose .pull,.prose ul li{text-align:justify;text-justify:inter-word}
.prose p:last-child,.prose .pull{text-align-last:auto}
@media (max-width:620px){
  .prose p,.prose .pull,.prose ul li{text-align:start}
}
/* Same even-margin treatment for the body copy that lives outside .prose —
   page-hero intros, timeline steps, section leads and card copy. */
.phero p,
.jtext,
.sec-head .lead,
.whatis-col p,
.hero2-lead,
.card-text{text-align:justify;text-justify:inter-word}
@media (max-width:620px){
.phero p,
.jtext,
.sec-head .lead,
.whatis-col p,
.hero2-lead,
.card-text{text-align:start}
}
.prose > * + *{margin-top:16px}
.prose h2{font-size:clamp(19px,2vw,25px);margin-top:34px}
.prose h3{font-size:17px;margin-top:26px}
.prose .en-sub{display:block;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.prose ul{display:grid;gap:9px}
.prose ul li{position:relative;padding-inline-start:22px;color:var(--muted)}
.prose ul li::before{content:"";position:absolute;inset-inline-start:2px;top:11px;width:7px;height:7px;border-radius:50%;
  background:var(--gold)}
.prose .pull{background:var(--green-soft-2);border-inline-start:3px solid var(--green);border-radius:12px;padding:16px 18px;color:var(--text)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.4vw,48px);align-items:start}
.side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-1)}
/* ── AUTHOR CARD ────────────────────────────────────────────────────────────
   A small portrait at the side of the article. The photograph is shown whole,
   never cropped, so each keeps its own proportions — the card is narrow and
   sits against the outer edge so it accompanies the text rather than
   competing with it. */
.author-card{padding:10px;text-align:center;position:sticky;top:104px;
  width:200px;margin-inline-start:auto}
.author-card img{width:100%;height:auto;display:block;
  border-radius:calc(var(--radius) - 6px);background:var(--green-soft-2)}
.author-card .ac-name{margin-top:10px;font-weight:700;font-size:13.5px;line-height:1.45;color:var(--text)}
.author-card .ac-role{margin-top:2px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:1080px){
  /* the grid collapses to one column here, so the portrait stops being a
     sidebar and would otherwise sit oddly against one edge */
  .author-card{position:static;margin-inline:auto}
}
.side-card h3{font-size:15px;margin-bottom:12px}
.side-card ul{display:grid;gap:2px}
.side-card ul a,.side-card ul .sc-fact{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:10px;font-size:13.5px;color:var(--muted)}
.side-card ul a svg,.side-card ul .sc-fact svg{width:16px;height:16px;flex:0 0 16px}
.side-card ul a:hover{background:var(--green-soft-2);color:var(--green-2)}
.side-card ul a[aria-current="page"]{background:var(--green-soft);color:var(--green-2);font-weight:700}
.page-grid{display:grid;grid-template-columns:1fr 300px;gap:clamp(24px,3.4vw,44px);align-items:start}
/* Sidebar column that can hold more than one card and follows a long page. */
.side-col{display:grid;gap:16px;position:sticky;top:104px}
/* A page whose side column carries an image earns a wider one. The main
   column still clears the 620px timeline at this width. */
.page-grid.grid-wide-side{grid-template-columns:1fr clamp(320px,34vw,470px)}
.jr-illus{padding:10px;margin:0}
.jr-illus img{width:100%;height:auto;display:block;border-radius:calc(var(--radius) - 6px);background:var(--green-soft-2)}
.jr-illus figcaption{margin-top:10px;padding:0 4px 2px;font-size:11.5px;line-height:1.6;color:var(--muted)}

/* benefits --------------------------------------------------------------- */
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.benefit{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 15px;font-size:13.5px}
.benefit .tick{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--green-soft);color:var(--green-2);
  display:grid;place-items:center}
.benefit .tick svg{width:15px;height:15px}

/* listing grids ---------------------------------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grid-3 > .card,.grid-4 > .card,.grid-2 > .card{display:flex;flex-direction:column}
.grid-3 > .card .card-body,.grid-4 > .card .card-body,.grid-2 > .card .card-body{flex:1 1 auto;display:flex;flex-direction:column}
.grid-3 > .card .card-foot,.grid-4 > .card .card-foot,.grid-2 > .card .card-foot{margin-top:auto}
.result-count{font-size:13.5px;color:var(--muted);font-weight:600;margin-block:16px 12px}
.pager{display:flex;gap:7px;justify-content:center;align-items:center;margin-top:32px}
.pager a,.pager span{min-width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line);
  background:#fff;font-size:13.5px;font-weight:600;padding-inline:10px}
.pager a:hover{border-color:var(--green);color:var(--green-2)}
.pager [aria-current="page"]{background:var(--deep);color:#fff;border-color:var(--deep)}

/* gallery ---------------------------------------------------------------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
/* Real photographs, not the dashed placeholder tiles. A fixed 4:3 box keeps the
   grid even whatever the source crop, and object-fit does the trimming. */
/* the UA [hidden] rule loses to `.gallery .gal-item`, so restate it here */
.gallery .gal-item[hidden]{display:none}
.gallery .gal-item{display:block;border-radius:var(--radius);overflow:hidden;background:var(--green-soft-2);
  aspect-ratio:4/3;box-shadow:var(--shadow-1)}
.gallery .gal-item img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s var(--ease)}
.gallery .gal-item:hover img{transform:scale(1.04)}
.gallery .gal-item:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* Only the first six photographs are shown; the rest stay in the markup with
   the `hidden` attribute, so they cost nothing to load until asked for. */
.gal-toggle{display:block;margin:16px auto 0;padding:10px 22px;border-radius:999px;cursor:pointer;
  background:#fff;border:1px solid var(--line);color:var(--green-2);font:inherit;font-size:14px;font-weight:600;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.gal-toggle:hover{border-color:var(--gold);box-shadow:var(--shadow-1);transform:translateY(-1px)}
.gal-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.gal-toggle .gal-count{color:var(--muted);font-weight:500;margin-inline-start:6px}
.gallery .ph{aspect-ratio:4/3;transition:transform .4s var(--ease)}
.gallery a:hover .ph{transform:scale(1.03)}
.gallery .more{display:grid;place-items:center;border:1px dashed #cfd6cf;border-radius:var(--radius);background:#fff;
  font-size:13.5px;font-weight:600;color:var(--green-2);text-align:center;line-height:1.5;aspect-ratio:4/3}

/* partner logos ---------------------------------------------------------- */
.logos{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;align-items:stretch}
.logo-card{background:#fff;border:1px solid var(--line);border-radius:14px;height:84px;display:grid;place-items:center;
  padding:10px;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.logo-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow-1)}
.logo-card span{font-size:11.5px;font-weight:700;color:var(--green-2);letter-spacing:.04em;text-align:center;line-height:1.4}
.logo-card.cta{background:var(--gold);border-color:var(--gold)}
.logo-card.cta span{color:#221a02;font-size:12.5px}

/* numbered section head -------------------------------------------------- */
.num-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.num-head .n{width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:var(--deep);color:#fff;display:grid;
  place-items:center;font-size:14px;font-weight:700}
.num-head h2{font-size:19px}
.num-head .en{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* edition detail --------------------------------------------------------- */
.ed-detail{display:grid;grid-template-columns:1fr 340px;gap:clamp(24px,3.6vw,52px);align-items:start}
.ed-detail .cover{aspect-ratio:3/4;border-radius:8px;box-shadow:var(--shadow-2);position:relative}
.ed-detail .cover .yr{position:absolute;top:20px;inset-inline-end:20px;font-size:30px;font-weight:700;color:#fff}
.ed-detail .cover .spine{position:absolute;inset-block:0;inset-inline-start:0;width:12px;background:rgba(0,0,0,.32)}
.ed-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.ed-meta > div{display:flex;gap:11px;align-items:center;min-width:148px}
.ed-meta .ic{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:var(--green-soft-2);color:var(--green-2);
  display:grid;place-items:center}
.ed-meta .ic svg{width:19px;height:19px}
.ed-meta .t{font-size:11.5px;color:var(--muted)}
.ed-meta .v{font-size:14px;font-weight:700}
.dl-stack{display:grid;gap:14px}
.dl-row{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
@media (max-width:720px){.dl-row{grid-template-columns:1fr}}
.dl-band{display:grid;grid-template-columns:auto 1fr 1fr;gap:16px;align-items:center;background:var(--green-soft-2);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px}
.dl-band .mini-cover{width:104px;aspect-ratio:3/4;border-radius:6px;box-shadow:var(--shadow-1);position:relative}
.dl-big{display:flex;align-items:center;gap:14px;padding:20px;border-radius:var(--radius);font-weight:700;font-size:16px;
  transition:transform .3s var(--ease),box-shadow .3s}
.dl-big:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.dl-big svg{width:28px;height:28px;flex:0 0 28px}
.dl-big small{display:block;font-size:12px;font-weight:600;opacity:.72}
.dl-green{background:var(--deep);color:#fff}
.dl-gold{background:var(--gold);color:#221a02}

/* products table --------------------------------------------------------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-1)}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
table.tbl th,table.tbl td{padding:13px 16px;text-align:start;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl thead th{background:var(--green-soft-2);font-size:12.5px;font-weight:700;color:var(--deep);white-space:nowrap}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:hover{background:#fbfaf6}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;
  background:var(--green-soft);color:var(--green-2);white-space:nowrap}
.pill.gold{background:var(--gold-soft);color:var(--gold-2)}
.pill.grey{background:#eeeee7;color:var(--muted)}

/* article body ----------------------------------------------------------- */
.art-head{max-width:80ch}
.art-head .meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:12px}
.art-head .meta span{display:inline-flex;align-items:center;gap:6px}
.art-head .meta svg{width:15px;height:15px}
.art-figure{margin-block:26px}
.art-figure figcaption{font-size:12.5px;color:var(--muted);margin-top:9px}
.share{display:flex;gap:9px;align-items:center;margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}

/* indicators ------------------------------------------------------------- */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.ind{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.ind .n{font-size:22px;font-weight:700;color:var(--green-2);font-variant-numeric:tabular-nums}
.ind .t{font-size:12.5px;color:var(--muted);margin-top:4px}

/* contact ---------------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:600}
.field input,.field textarea,.field select{font:inherit;font-size:14px;padding:11px 14px;border:1px solid var(--line);
  border-radius:12px;background:#fff;color:var(--text)}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
.field textarea{min-height:130px;resize:vertical}
.contact-list{display:grid;gap:12px}
.contact-row{display:flex;gap:12px;align-items:flex-start;font-size:13.5px}
.contact-row .ic{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:var(--green-soft);color:var(--green-2);
  display:grid;place-items:center}
.contact-row .ic svg{width:19px;height:19px}
.contact-row .t{font-size:11.5px;color:var(--muted)}

/* pillar rail ------------------------------------------------------------ */
.pill-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:20px}
.pill-rail a{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 10px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:9px;font-size:12.5px;font-weight:600;line-height:1.4;
  transition:transform .3s var(--ease),border-color .3s}
.pill-rail a:hover{transform:translateY(-4px);border-color:var(--green)}
.pill-rail a[aria-current="page"]{border-color:var(--green);background:var(--green-soft)}
.pill-rail .ico{width:44px;height:44px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center}
.pill-rail a[aria-current="page"] .ico{background:var(--green)}
.pill-rail .ico svg{width:22px;height:22px}

/* proto banner ----------------------------------------------------------- */
.proto{background:#f6efd9;border-bottom:1px solid #e8dcb2;color:#4a3c0c;font-size:12.5px}
.proto .wrap{display:flex;gap:10px;align-items:center;justify-content:center;padding-block:8px;text-align:center;flex-wrap:wrap}
.proto svg{width:16px;height:16px;flex:0 0 16px}

@media (max-width:1080px){
  .page-grid,
  .page-grid.grid-wide-side{grid-template-columns:1fr}
  .side-col{position:static}
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .logos{grid-template-columns:repeat(4,1fr)}
  .ind-grid{grid-template-columns:repeat(2,1fr)}
  .pill-rail{grid-template-columns:repeat(3,1fr)}
  .ed-detail{grid-template-columns:1fr 260px}
}
@media (max-width:900px){
  .two-col{grid-template-columns:1fr}
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .dl-band{grid-template-columns:1fr}
  .dl-band .mini-cover{display:none}
  .ed-detail{grid-template-columns:1fr}
  .ed-detail .cover{max-width:280px}
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(2,1fr)}
  .pill-rail{grid-template-columns:repeat(2,1fr)}
}


/* ── coming-soon state ───────────────────────────────────────────────────
   Opportunities & Jobs and the Mandatory List were marked "coming soon" in
   the client's review, so the finished screens are held back rather than
   shown unapproved. */
.badge-soon{font-size:12px;font-weight:600;letter-spacing:.04em;padding:6px 14px;
  border-radius:999px;background:var(--gold-tint);color:var(--gold-dark);
  border:1px solid var(--gold)}

/* ── footer social block ─────────────────────────────────────────────── */
/* ── FOOTER SOCIAL ──────────────────────────────────────────────────────────
   Sits under the mark and the tagline. The links are placeholders until the
   client supplies the account URLs. */
.foot-social{margin-top:18px}
.foot-social > span:first-child{display:block;font-size:12.5px;font-weight:600;
  letter-spacing:.06em;color:#dbece3;margin-bottom:10px}
.fs-links{display:flex;gap:10px}
.fs-links a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:#dbece3;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease)}
.fs-links a:hover{border-color:var(--gold);background:rgba(255,255,255,.06);color:#fff}
.fs-links a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.fs-links svg{width:19px;height:19px}

/* --- 4. hero.css (from the mockup) ------------------------------------ */
/* ══ HERO v3 — photographic band, display type ══════════════════════════ */
.display{font-family:'Outfit','IBM Plex Sans Arabic',system-ui,sans-serif}

.hero2{position:relative;min-height:clamp(520px,48vw,700px);display:grid;overflow:hidden;background:var(--deep-2);isolation:isolate}
.hero2-media{position:absolute;inset:0;z-index:0}
.hero2-media > *{position:absolute;inset:0;width:100%;height:100%}
/* The <picture> wrapper must not become the positioned child: display:contents
   drops its box, and the img is given the fill explicitly. */
.hero2-media > picture{display:contents}
.hero2-media > picture > .hero-photo{position:absolute;inset:0;width:100%;height:100%}
.hero-photo{object-fit:cover;object-position:center 44%}
/* The photograph is composed with its open, graded side on one edge and the fort
   on the other. The copy block sits at the inline-start edge, so mirror the image
   in RTL to keep the type over the open side instead of over the architecture. */
[dir="rtl"] .hero-photo{transform:scaleX(-1)}
.hero-scene{display:block}
/* the copy block sits at the inline-start edge, so mirror the scene to keep the
   fort and dhow on the open side in both reading directions */
[dir="rtl"] .hero-scene{transform:scaleX(-1)}
/* ── LIVING HERO ────────────────────────────────────────────────────────────
   A canvas redraws the photograph each frame and adds the movement a still
   cannot carry: refraction on the sea, drifting light on the water, haze
   crossing the sky, birds. It fades in only once it has painted, so the
   photograph below it is what shows if the script never runs — and the <img>
   keeps the alt text while the canvas stays out of the accessibility tree.
   The RTL mirror is applied inside the canvas, not by `transform`, so it must
   NOT be repeated here. */
.hero-live{opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
.hero2-media.is-live .hero-live{opacity:1}
.hero2-media.is-live .hero-photo{opacity:0}
@media (prefers-reduced-motion:reduce){
  .hero-live{display:none}
  .hero2-media.is-live .hero-photo{opacity:1}
}

.hero2-scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to left,rgba(9,35,27,.80) 0%,rgba(9,35,27,.62) 28%,rgba(9,35,27,.30) 52%,rgba(9,35,27,.06) 74%,transparent 100%),
    linear-gradient(to bottom,rgba(7,28,22,.30),transparent 38%,rgba(7,28,22,.30))}
html[lang^="en"] .hero2-scrim{
  background:
    linear-gradient(to right,rgba(9,35,27,.80) 0%,rgba(9,35,27,.62) 28%,rgba(9,35,27,.30) 52%,rgba(9,35,27,.06) 74%,transparent 100%),
    linear-gradient(to bottom,rgba(7,28,22,.30),transparent 38%,rgba(7,28,22,.30))}
.hero2-in{position:relative;z-index:2;display:flex;align-items:center;padding-block:clamp(56px,7vw,104px);width:100%}
.hero2-copy{max-width:660px;color:#fff}

.eyebrow2{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#d7e7de;margin-bottom:clamp(14px,1.6vw,22px)}
.eyebrow2::before{content:"";width:44px;height:1.5px;background:#e9dfc4;flex:0 0 44px}

.h1-display{font-size:clamp(40px,6vw,86px);line-height:1.0;letter-spacing:-.035em;font-weight:600;
  text-wrap:balance}
.h1-display .ln{display:block}
[lang="ar"] .h1-display{letter-spacing:-.02em;line-height:1.16}
/* .h1-sub is always the OTHER language's version of the headline — English
   under the Arabic hero, Arabic under the English one. Hide the one that does
   not belong to the active language. */
html[lang^="ar"] .only-ar .h1-sub{display:none}
html[lang^="en"] .only-en .h1-sub{display:none}
.h1-sub{font-size:clamp(17px,2.1vw,30px);font-weight:600;color:rgba(255,255,255,.6);margin-top:10px;
  letter-spacing:-.02em;line-height:1.2}
.hero2-lead{margin-top:clamp(16px,2vw,26px);font-size:clamp(15px,1.25vw,17.5px);line-height:1.85;
  color:#d7e7de;max-width:54ch}
.hero2-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(22px,2.6vw,34px)}
.btn-green{background:var(--green);color:#fff;border-color:var(--green);padding:13px 24px}
.btn-green:hover{background:#19764f;border-color:#19764f;color:#fff}
.btn-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.62);padding:13px 24px}
.btn-white:hover{background:#fff;color:var(--deep);border-color:#fff}
.btn-green .arw,.btn-white .arw{transition:transform .3s var(--ease)}
.btn-green:hover .arw{transform:translateY(3px)}

.hero-marker{position:absolute;z-index:2;inset-inline-end:clamp(20px,4vw,64px);bottom:clamp(22px,4vw,58px);
  display:flex;align-items:flex-end;gap:16px;color:#fff}
.hero-marker .num{font-size:clamp(38px,4.6vw,62px);font-weight:600;line-height:.86;letter-spacing:-.04em;
  color:rgba(255,255,255,.94);text-shadow:0 2px 14px rgba(6,24,18,.55)}
.hero-marker .cap{border-inline-start:1px solid rgba(255,255,255,.42);padding-inline-start:14px;
  font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1.6;
  color:rgba(255,255,255,.86);max-width:23ch;text-shadow:0 1px 10px rgba(6,24,18,.6)}
html[lang^="ar"] .hero-marker .cap{max-width:15ch}
.hero-credit{position:absolute;z-index:2;inset-inline-start:clamp(20px,4vw,40px);bottom:12px;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)}

/* ══ WHAT IS LOCAL CONTENT — dark bilingual band ════════════════════════ */
.whatis{position:relative;background:var(--deep-2);color:#fff;overflow:hidden;
  padding-block:clamp(56px,7vw,104px)}
.whatis::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1.2px);background-size:26px 26px}
.whatis::after{content:"";position:absolute;inset:0;
  background:radial-gradient(880px 420px at 78% 42%,rgba(31,138,95,.30),transparent 72%)}
.whatis .wrap{position:relative;z-index:2}
.whatis-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,84px);align-items:start}
.whatis-col.rtl{direction:rtl;text-align:right}
.whatis-col.ltr{direction:ltr;text-align:left}
.whatis-col .eyebrow2{color:#8fd3ae;font-size:11.5px}
.whatis-col .eyebrow2::before{width:32px;flex:0 0 32px;background:var(--gold)}
.whatis-col.ltr .eyebrow2{flex-direction:row}
.whatis-col h2{font-size:clamp(24px,3.1vw,40px);letter-spacing:-.025em;line-height:1.2}
.whatis-col p{margin-top:16px;font-size:clamp(14.5px,1.2vw,17px);line-height:1.95;color:#cfe0d8;max-width:48ch}
.whatis-col.ltr p{margin-inline-end:auto}
.whatis-col.rtl p{margin-inline-start:auto}
.whatis-col .btn{margin-top:clamp(18px,2.4vw,30px)}

@media (max-width:720px){
  /* narrow screens crop the panorama hard — favour the fort so the image still
     reads as somewhere rather than as an empty gradient */
  .hero-photo{object-position:84% 52%}
}
@media (max-width:900px){
  .hero2{min-height:auto}
  .hero2-scrim,html[lang^="en"] .hero2-scrim{
    background:linear-gradient(to bottom,rgba(8,32,25,.62),rgba(8,32,25,.86))}
  .hero-marker{position:static;margin-top:32px}
  .hero-credit{display:none}
  .whatis-grid{grid-template-columns:1fr;gap:38px}
  .whatis-col.ltr,.whatis-col.rtl{text-align:start}
}

/* --- 5. reader.css (from the mockup) ---------------------------------- */
/* ══ E-BOOK READER ══════════════════════════════════════════════════════ */
.rd{--rd-bg:#0a1a14;--rd-bar:#0e2b21;--rd-line:rgba(255,255,255,.13);--rd-txt:#e6f0ea;
  position:fixed;inset:0;z-index:200;display:grid;grid-template-rows:auto 1fr auto;
  overflow:hidden;background:var(--rd-bg);color:var(--rd-txt)}
body.rd-open{overflow:hidden}

/* toolbar */
.rd-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--rd-bar);
  border-bottom:1px solid var(--rd-line);flex-wrap:wrap}
.rd-bar .grp{display:flex;align-items:center;gap:6px}
.rd-bar .sp{flex:1 1 auto}
.rd-title{min-width:0}
.rd-title b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rd-title span{display:block;font-size:11.5px;color:#8faea2}
.rd-btn{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:var(--rd-txt);
  border:1px solid var(--rd-line);background:rgba(255,255,255,.04);transition:background .2s,border-color .2s,color .2s}
.rd-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.rd-btn[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.rd-btn svg{width:18px;height:18px}
.rd-btn[hidden]{display:none !important}
.rd-btn.wide{width:auto;padding:0 14px;display:flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;white-space:nowrap}
.rd-pick{max-width:280px;font:inherit;font-size:13px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid var(--rd-line);border-radius:999px;
  padding:8px 14px;appearance:none;cursor:pointer;text-overflow:ellipsis}
.rd-pick option{background:#0e2b21;color:#fff}
.rd-pick:hover{background:rgba(255,255,255,.14)}
.rd-page{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  background:rgba(255,255,255,.06);border:1px solid var(--rd-line);border-radius:999px;padding:7px 14px}
.rd-page input{width:44px;background:transparent;border:0;color:#fff;font:inherit;text-align:center;
  border-bottom:1px solid var(--rd-line);outline:0}
.rd-page input:focus{border-color:var(--gold)}
.rd-page .of{color:#8faea2;font-weight:500}

/* stage */
.rd-stage{position:relative;overflow:auto;display:grid;place-items:center;padding:22px;scroll-behavior:smooth}
.rd-spread{display:flex;gap:2px;align-items:flex-start;transition:transform .45s var(--ease)}
.rd-sheet{position:relative;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden;
  flex:0 0 auto;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.rd-sheet img{display:block;width:100%;height:auto}
.rd-sheet.is-blank{background:transparent;box-shadow:none}
.rd-sheet .ldr{position:absolute;inset:0;display:grid;place-items:center;background:#f4f2ea;color:#8a8f80;font-size:12px}
.rd-turn-next .rd-spread{animation:rdNext .42s var(--ease)}
.rd-turn-prev .rd-spread{animation:rdPrev .42s var(--ease)}
@keyframes rdNext{from{opacity:.35;transform:translateX(3%) scale(.985)}to{opacity:1;transform:none}}
@keyframes rdPrev{from{opacity:.35;transform:translateX(-3%) scale(.985)}to{opacity:1;transform:none}}

/* edge navigation */
.rd-nav{position:absolute;top:0;bottom:0;width:clamp(56px,8vw,110px);border:0;z-index:5;
  display:grid;place-items:center;background:none;color:#fff;opacity:0;transition:opacity .25s}
.rd-stage:hover .rd-nav,.rd-nav:focus-visible{opacity:1}
.rd-nav span{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  background:rgba(10,26,20,.72);border:1px solid var(--rd-line);backdrop-filter:blur(6px)}
.rd-nav:hover span{background:var(--green)}
.rd-nav svg{width:20px;height:20px}
.rd-prev{inset-inline-start:0}
.rd-next{inset-inline-end:0}
.rd-nav[disabled]{opacity:0 !important;pointer-events:none}

.rd-notice{position:absolute;inset-inline:0;bottom:16px;margin-inline:auto;width:max-content;max-width:min(92%,560px);
  z-index:9;display:flex;align-items:center;gap:12px;background:rgba(201,162,39,.96);color:#241c02;
  padding:11px 16px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.rd-notice button{color:#241c02;font-size:17px;line-height:1;opacity:.7}
.rd-notice button:hover{opacity:1}

/* footer / progress */
.rd-foot{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--rd-bar);
  border-top:1px solid var(--rd-line);font-size:12px;color:#8faea2}
.rd-track{flex:1 1 auto;height:4px;border-radius:2px;background:rgba(255,255,255,.12);position:relative;cursor:pointer}
.rd-fill{position:absolute;inset-block:0;inset-inline-start:0;background:linear-gradient(90deg,var(--green),var(--gold));
  border-radius:2px;width:0;transition:width .3s var(--ease)}

/* thumbnails */
.rd-thumbs{position:absolute;top:58px;bottom:38px;inset-inline-start:0;width:240px;background:rgba(6,20,15,.96);
  border-inline-end:1px solid var(--rd-line);padding:14px 12px;overflow-y:auto;z-index:8;
  transform:translateX(-102%);transition:transform .32s var(--ease)}
[dir="rtl"] .rd-thumbs{transform:translateX(102%)}
.rd-thumbs.is-open,[dir="rtl"] .rd-thumbs.is-open{transform:none}
.rd-thumbs h3{font-size:12px;font-weight:600;color:#8faea2;margin:0 0 10px;letter-spacing:.1em;text-transform:uppercase}
.rd-thumbs .grid{display:grid;grid-template-columns:1fr;gap:8px}
.rd-thumbs button{padding:0;border:2px solid transparent;border-radius:4px;overflow:hidden;background:#fff;
  display:block;position:relative;line-height:0}
.rd-thumbs img{width:100%;height:auto;display:block}
.rd-thumbs button b{position:absolute;inset-inline-end:2px;bottom:2px;background:rgba(10,26,20,.82);
  color:#fff;font-size:9.5px;padding:1px 5px;border-radius:3px;line-height:1.5}
.rd-thumbs button[aria-current="true"]{border-color:var(--gold)}

/* search */
.rd-search{position:absolute;top:58px;bottom:38px;inset-inline-end:0;width:330px;background:rgba(6,20,15,.97);
  border-inline-start:1px solid var(--rd-line);padding:14px;overflow-y:auto;z-index:8;
  transform:translateX(102%);transition:transform .32s var(--ease);display:flex;flex-direction:column;gap:12px}
[dir="rtl"] .rd-search{transform:translateX(-102%)}
.rd-search.is-open,[dir="rtl"] .rd-search.is-open{transform:none}
.rd-search .box{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);
  border:1px solid var(--rd-line);border-radius:999px;padding:9px 14px}
.rd-search .box svg{width:16px;height:16px;color:#8faea2;flex:0 0 16px}
.rd-search .box input{flex:1 1 auto;min-width:0;background:none;border:0;color:#fff;font:inherit;font-size:13.5px;outline:0}
.rd-search .meta{font-size:12px;color:#8faea2}
.rd-hit{display:block;width:100%;text-align:start;background:rgba(255,255,255,.04);border:1px solid var(--rd-line);
  border-radius:10px;padding:10px 12px;transition:background .2s,border-color .2s}
.rd-hit:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.rd-hit .pn{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--mint);margin-bottom:4px}
.rd-hit .approx{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(201,162,39,.22);color:#e6c95f;padding:1px 6px;border-radius:4px}
.rd-hit p{font-size:12.5px;line-height:1.75;color:#cfe0d8;margin:0}
.rd-hit mark{background:rgba(201,162,39,.34);color:#fff;border-radius:2px;padding:0 2px}
.rd-note{font-size:11.5px;line-height:1.7;color:#7d998e;border-top:1px solid var(--rd-line);padding-top:10px}

@media (max-width:820px){
  .rd-bar{gap:7px;padding:8px 10px}
  .rd-title span{display:none}
  .rd-bar .hide-sm{display:none}
  .rd-pick{max-width:150px;padding:7px 10px;font-size:12px}
  .rd-stage{padding:10px}
  .rd-thumbs{width:170px}
  .rd-search{width:100%}
  .rd-nav{width:44px}
}
@media (prefers-reduced-motion:reduce){
  .rd-spread,.rd-sheet,.rd-thumbs,.rd-search,.rd-fill{transition:none}
  .rd-turn-next .rd-spread,.rd-turn-prev .rd-spread{animation:none}
  .rd-stage{scroll-behavior:auto}
}


/* --- 6. WordPress integration -------------------------------------------
   The mockup is full-bleed sections each holding its own .wrap, so the block
   editor's layout constraints and vertical gaps have to be switched off inside
   the content area — otherwise every section is boxed to contentSize and gets
   a 14px gap it was not designed for.
   ------------------------------------------------------------------------ */
.wp-site-blocks{padding:0 !important}
.icv-main,.icv-main>*{max-width:none}
.icv-main>.wp-block-post-content>*{margin-block:0}
.icv-main .wp-block-post-content{display:block}
.icv-main>*+*{margin-block-start:0}
.icv-chrome{display:block}

/* Core adds is-layout-flow margins to every direct child. The mockup controls
   its own vertical rhythm inside each <section>. */
.icv-main :where(.is-layout-flow)>*{margin-block-start:0;margin-block-end:0}

/* The admin bar is 32px of fixed chrome above the page; the sticky header has
   to sit below it or it covers the site title while an editor is logged in. */
body.admin-bar .site-head{top:32px}
@media (max-width:782px){body.admin-bar .site-head{top:46px}}

/* The reader is position:fixed over the whole viewport, so the admin bar lands
   on top of its toolbar — the page control and Download PDF button end up
   half-covered for any logged-in editor. Inset the reader instead of moving the
   bar, so the toolbar, the page and the footer strip all stay in proportion. */
body.admin-bar .rd{top:32px}
@media (max-width:782px){body.admin-bar .rd{top:46px}}

/* Post title shown only on templates that have no mockup section of their own
   (blog index, single posts). Pages render a pattern that carries its own H1. */
.icv-fallback-title{max-width:1240px;margin:34px auto 10px;padding:0 22px;
  font-size:26px;color:var(--navy)}
.icv-bare{min-height:100vh}

/* WordPress emits an empty <p> for a bare pattern reference in some editors. */
.icv-main>.wp-block-post-content>p:empty{display:none}

/* Editor canvas: the mockup's fixed/sticky bars are disruptive inside the
   Site Editor iframe. */
.editor-styles-wrapper .site-head,.editor-styles-wrapper .rd-bar{position:static}
.editor-styles-wrapper .proto{position:static}

/* Book preview: facing pages on wide screens, single page on phones. */
.rd-spread{direction:inherit;gap:0;perspective:1600px}
.rd-spread.is-facing .rd-sheet{box-shadow:0 12px 32px #0005}
.rd-spread.is-facing .rd-sheet::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 92%,#0002)}
.rd-spread.is-facing .rd-sheet + .rd-sheet::after{background:linear-gradient(90deg,#0002,transparent 8%)}
.rd-nav{opacity:1}
.rd-nav:disabled{opacity:.2;pointer-events:none}
@media(max-width:600px){.rd-nav{width:36px}.rd-nav span{width:30px;height:38px}.rd-pick{max-width:145px}}

html[lang^="en"] .ph[data-label-en]::after{content:attr(data-label-en)}

/* Reader page arrows: .rd-prev/.rd-next are placed with logical inset, so they swap
   sides between RTL and LTR, but the chevron glyphs are fixed. Mirror them in LTR so
   each arrow points away from its own edge (left edge = back, right edge = forward). */
html[dir="ltr"] .rd-nav svg{transform:scaleX(-1)}
/* Keyed on the button's own resolved direction too, so this stays correct if the
   stage is ever given a per-book dir. :dir() outranks the html[dir] rule above. */
.rd-nav:dir(ltr) svg{transform:scaleX(-1)}
.rd-nav:dir(rtl) svg{transform:none}

/* global hidden */
/* The filter chips set card.hidden, but .card{display:flex} (and .prog, .opp, …)
   outrank the UA default [hidden]{display:none}, so filtering had no visible
   effect on the home and initiatives pages. The gallery had the same collision
   and was patched locally above; this covers every component. */
[hidden]{display:none !important}

/* ── participating companies: the logo wall ─────────────────────────────── */
.cwall{margin-top:22px}
.cwall-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cwall-item{
  margin:0;position:relative;display:grid;place-items:center;gap:10px;
  min-height:140px;padding:20px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;cursor:default;outline:none;
  opacity:0;transform:translateY(16px);
  transition:opacity .55s ease var(--d,0ms),transform .55s cubic-bezier(.22,.8,.3,1) var(--d,0ms),
             border-color .3s ease,box-shadow .35s ease;
}
.cwall-item.is-in{opacity:1;transform:none}
/* the drift: each tile breathes on its own offset, so the wall is never static */
.cwall-item.is-in .cwall-logo{animation:cwall-drift 7s ease-in-out infinite;animation-delay:var(--d,0ms)}
@keyframes cwall-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.cwall-logo{display:grid;place-items:center;width:100%;height:62px}
.cwall-logo img{max-width:100%;max-height:62px;width:auto;height:auto;object-fit:contain;
  transition:transform .35s ease}
.cwall-name{font-size:11.5px;line-height:1.5;text-align:center;color:var(--muted);
  opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
/* hover / focus: this tile comes forward, the rest recede */
.cwall-item:hover,.cwall-item:focus-visible{border-color:var(--green);box-shadow:0 10px 26px rgba(8,36,26,.10)}
.cwall-item:hover .cwall-logo img,.cwall-item:focus-visible .cwall-logo img{transform:scale(1.05)}
.cwall-item:hover .cwall-name,.cwall-item:focus-visible .cwall-name{opacity:1;transform:none}
.cwall-item:hover .cwall-logo,.cwall-item:focus-visible .cwall-logo{animation-play-state:paused}
@media (max-width:1080px){.cwall-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.cwall-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){
  .cwall-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .cwall-item{min-height:118px;padding:14px 10px}
  .cwall-logo{height:48px}.cwall-logo img{max-height:48px}
  /* no hover on touch: show the names outright */
  .cwall-name{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .cwall-item{opacity:1;transform:none;transition:none}
  .cwall-item.is-in .cwall-logo{animation:none}
  .cwall-name{opacity:1;transform:none}
}

/* the count tile sits alone on this page, so it must not stretch */
.cwall-head{display:flex;align-items:center;justify-content:flex-start;margin-bottom:4px}
.cwall-head .total-card{width:auto;min-width:210px}

/* a tile that leads to a company profile */
.cwall-item.is-link{cursor:pointer;text-decoration:none;color:inherit}
.cwall-item.is-link:hover{transform:translateY(-3px)}
/* the "view details" cue on a linking tile - always visible, so touch users see it too */
.cwall-more{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:11.5px;font-weight:600;line-height:1.6;color:var(--green-2);
  background:var(--green-soft-2);border:1px solid var(--green-soft);
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.cwall-more svg{width:11px;height:11px;flex:none}
html[dir="ltr"] .cwall-more svg{transform:scaleX(-1)}
.cwall-more:dir(ltr) svg{transform:scaleX(-1)}
.cwall-item.is-link:hover .cwall-more,.cwall-item.is-link:focus-visible .cwall-more{
  background:var(--green);border-color:var(--green);color:#fff}
@media (max-width:560px){.cwall-more{font-size:11px;padding:2px 9px}}

/* ---- year-on-year comparison table on a company profile ---- */
.cmp{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.cmp table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.cmp th,.cmp td{padding:12px 14px;text-align:start;border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--tint,#f3f6f4);font-weight:700;font-size:13px;letter-spacing:.01em}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody th{font-weight:600;color:var(--ink,inherit)}
.cmp td{font-variant-numeric:tabular-nums;font-weight:700;color:var(--green)}
.cmp tbody tr:hover th,.cmp tbody tr:hover td{background:rgba(8,36,26,.03)}
@media (max-width:560px){.cmp table{font-size:13px}.cmp th,.cmp td{padding:10px}}

/* ---- key-result lists inside a profile card ---- */
.card-text ul{list-style:none;margin:6px 0 0;padding:0}
.card-text ul li{position:relative;padding-inline-start:14px;margin-top:6px;line-height:1.65}
.card-text ul li::before{content:'';position:absolute;inset-inline-start:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--green);opacity:.75}

/* ---- forward-looking list on a company profile ---- */
.prose ul.plain-list{list-style:none;margin:10px 0 0;padding:0}
.prose ul.plain-list li{position:relative;padding-inline-start:16px;margin-top:8px;line-height:1.7}
.prose ul.plain-list li::before{content:'';position:absolute;inset-inline-start:0;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--green);opacity:.8}

/* ---- company profile: about text beside the ICV recognition award ---- */
.about-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:30px;align-items:start}
.about-row .prose{margin-top:0;max-width:none}
.award-fig{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 26px rgba(8,36,26,.07)}
.award-fig img{display:block;width:100%;height:auto}
.award-fig figcaption{padding:11px 14px;font-size:12px;line-height:1.55;color:var(--muted);border-top:1px solid var(--line);background:#fcfdfc}
@media (max-width:860px){.about-row{grid-template-columns:1fr;gap:20px}}

/* ---- books and studies shelf ---- */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.shelf-item{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  transition:border-color .3s ease,box-shadow .35s ease}
.shelf-item:hover{border-color:var(--green);box-shadow:0 10px 26px rgba(8,36,26,.09)}
.shelf-cover{border-radius:8px;overflow:hidden;background:var(--tint,#f3f6f4);box-shadow:0 4px 14px rgba(8,36,26,.12)}
.shelf-cover img{display:block;width:100%;height:auto}
.shelf-body{min-width:0}
.shelf-title{margin:0;font-size:16px;line-height:1.45}
.shelf-meta{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.shelf-desc{margin:9px 0 0;font-size:13.5px;line-height:1.7;color:var(--muted)}
.shelf-link{margin-top:12px;display:inline-block}
.lib-sec{scroll-margin-top:90px}
.lib-jump{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.lib-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  background:var(--green-soft);color:var(--green-2);font-size:12px;font-weight:700}
.lib-head{margin:0 0 16px;font-size:22px}
.lib-intro{margin:-6px 0 18px;max-width:760px;font-size:14.5px;line-height:1.75;color:var(--muted)}

/* ---- studies list ---- */
.studies{display:grid;gap:14px}
.study{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;padding:18px 20px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  transition:border-color .3s ease,box-shadow .35s ease}
.study:hover{border-color:var(--green);box-shadow:0 10px 26px rgba(8,36,26,.08)}
.study-n{display:grid;place-items:center;height:46px;border-radius:12px;
  background:var(--green-soft-2);color:var(--green-2);font-weight:700;font-size:15px}
.study-main{min-width:0}
.study-title{margin:0;font-size:16.5px;line-height:1.55}
.study-authors{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--muted);unicode-bidi:plaintext}
.study-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.study-tag{padding:3px 10px;border-radius:999px;font-size:12px;line-height:1.6;color:var(--green-2);
  background:var(--green-soft-2);border:1px solid var(--green-soft)}
.study-source{margin:8px 0 0;font-size:13px;font-style:italic;color:var(--muted);unicode-bidi:plaintext}
/* Latin author names keep their own word order but sit on the reading side of the card */
html[dir="rtl"] .study-authors,html[dir="rtl"] .study-source{text-align:right}
.study.is-link{color:inherit;text-decoration:none;cursor:pointer}
.study.is-link:hover{transform:translateY(-2px)}
.study-title,.study-authors,.study-tags{display:block}
.study-tags{display:flex}
.study-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:4px 12px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--green-2);background:var(--green-soft-2);border:1px solid var(--green-soft);
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.study-go svg{width:12px;height:12px;flex:none}
html[dir="ltr"] .study-go svg{transform:scaleX(-1)}
.study.is-link:hover .study-go,.study.is-link:focus-visible .study-go{background:var(--green);border-color:var(--green);color:#fff}
.study.is-link:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.study{transition:border-color .3s ease,box-shadow .35s ease,transform .3s ease}

/* ---- a study's own page ---- */
.study-hero-authors{unicode-bidi:plaintext}
html[dir="rtl"] .study-hero-authors{text-align:right}

/* 1 - the study in numbers */
.study-nums-head{margin:0 0 14px;font-size:18px}
.study-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.study-nums .ind{padding:20px 16px;box-shadow:0 6px 18px rgba(8,36,26,.05)}
.study-nums .ind .n{font-size:30px;line-height:1.15}
.study-nums .ind .t{font-size:13px;line-height:1.55;margin-top:8px}
.study-nums-sec{padding-bottom:0}
.study-after-nums{padding-top:clamp(26px,3vw,40px)}

/* 2 - the study card */
.study-grid{grid-template-columns:minmax(0,1fr) 320px}
.study-card{position:sticky;top:96px}
.study-card h3{margin:0 0 6px;font-size:16px}
.study-card dl{margin:0}
.study-card .sc-row{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-2)}
.study-card .sc-row:last-child{border-bottom:0}
.study-card .sc-ic{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;
  background:var(--green-soft-2);color:var(--green-2)}
.study-card .sc-ic svg{width:17px;height:17px}
.study-card dt{font-size:12px;color:var(--muted)}
.study-card dd{margin:2px 0 0;font-size:14px;font-weight:600;line-height:1.55}
.study-cite{font-weight:500;font-style:italic;unicode-bidi:plaintext}
.study-card-link{margin-top:14px;width:100%;justify-content:center}
.study-card-link svg{width:15px;height:15px}
.study-card-link + .study-card-link{margin-top:10px}
.study-card-cover{display:block;width:120px;height:auto;margin:0 0 14px;border-radius:8px;box-shadow:0 6px 18px rgba(8,36,26,.15)}

/* 3 - the summary, section by section */
.study-page-body{min-width:0}
.study-page-body .sb{margin:0 0 34px;padding:0}
.sb:last-child{margin-bottom:0}
.sb-head{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:19px}
.sb-ic{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:11px;background:var(--green-soft);color:var(--green-2)}
.sb-ic svg{width:18px;height:18px}
.sb p{margin:0 0 10px;font-size:15.5px;line-height:1.9}
.sb p:last-child{margin-bottom:0}
.sb-box{padding:18px 20px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);
  border-inline-start:4px solid var(--green)}
.sb-summary .sb-box{background:var(--green-soft-2);border-color:var(--green-soft);border-inline-start-color:var(--green)}
.sb-summary .sb-box p{font-size:16px}
.sb-objective .sb-box{border-inline-start-color:var(--gold,#b8913a)}
.sb-list{margin:6px 0 0;padding-inline-start:20px;line-height:1.85}
.sb-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sb-cards li{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;border:1px solid var(--line);border-radius:14px;
  background:#fff;font-size:14.5px;line-height:1.75;transition:border-color .3s ease,box-shadow .3s ease}
.sb-cards li:hover{border-color:var(--green);box-shadow:0 8px 20px rgba(8,36,26,.07)}
.sb-n{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  background:var(--green);color:#fff;font-size:13px;font-weight:700}
.sb-checks{list-style:none;margin:0;padding:16px 18px;border-radius:var(--radius);background:var(--green-soft-2);border:1px solid var(--green-soft)}
.sb-checks li{position:relative;padding-inline-start:30px;margin:0 0 11px;font-size:15px;line-height:1.8}
.sb-checks li:last-child{margin-bottom:0}
.sb-checks li::before{content:"";position:absolute;inset-inline-start:0;top:5px;width:20px;height:20px;border-radius:50%;background:var(--green)}
.sb-checks li::after{content:"";position:absolute;inset-inline-start:7px;top:9px;width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.sb-subs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sb-sub{padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.sb-sub h3{margin:0 0 6px;font-size:15px;color:var(--green-2)}
.sb-sub p{font-size:14.5px;line-height:1.75}
.study-page-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.study-back{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--green-2);text-decoration:none}
.study-back svg{width:14px;height:14px}
html[dir="ltr"] .study-back svg{transform:scaleX(-1)}
@media (max-width:980px){
  .study-grid{grid-template-columns:1fr}
  .study-card{position:static;order:-1}
}
@media (max-width:640px){
  .sb-cards,.sb-subs{grid-template-columns:1fr}
  .study-nums .ind .n{font-size:26px}
}
@media (max-width:560px){
  .study{grid-template-columns:1fr;gap:10px;padding:15px}
  .study-n{width:40px;height:40px}
}
@media (max-width:460px){.shelf-item{grid-template-columns:96px minmax(0,1fr);gap:12px;padding:13px}}


/* ── SHARE YOUR STORY card (قصص نجاح) ─────────────────────── */
.card-share{display:flex;flex-direction:column;text-decoration:none;color:inherit;overflow:hidden}
.card-share .share-art{aspect-ratio:16/9;background:var(--deep)}
.card-share .share-art img{display:block;width:100%;height:100%;object-fit:cover}
.card-share .card-body{display:flex;flex-direction:column;flex:1;padding-top:18px}
.card-share .card-text{margin-top:0}
.card-share .card-share-btn{align-self:flex-start;margin-block-start:16px}
.card-share:hover .share-art img{transform:scale(1.03)}
.card-share .share-art img{transition:transform .5s var(--ease)}
.card-share:focus-visible{outline:2px solid var(--gold);outline-offset:3px}


/* ── AUTHOR PORTRAIT ─ one shape for every opinion-article author ───────────
   The supplied portraits run from 1.25:1 to 2.17:1, and one (Hilal Al Sawai)
   is landscape, so the column rendered at nine different heights. Fixing the
   frame and cropping to it normalises them without re-cutting the files.
   object-position keeps the face in frame on the tall ones.                  */
.author-card img{aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 22%}


/* ── MOBILE NAVIGATION ──────────────────────────────────────
   Below 1100px the rule above hides .nav and shows .burger. The burger had
   no behaviour, so every phone and tablet had no navigation at all and no
   way to reach English. These rules are the drawer; icvMobileNav() in
   assets/js/app.js toggles .nav-open on <html> and sets --nav-top from the
   header's real bottom edge, so the drawer sits under the header (and under
   the admin bar) instead of covering it.
   The language toggle stays in the bar on mobile rather than going in the
   drawer, so it is reachable whether the drawer is open or shut.          */
@media (max-width:1100px){
  .head-tools .lang{display:inline-flex}
  .head-tools .lang button{padding:6px 10px}
  .head-in{gap:12px}

  .nav-backdrop{position:fixed;inset-block:var(--nav-top,88px) 0;inset-inline:0;z-index:55;
    background:rgba(8,32,25,.45);opacity:0;visibility:hidden;
    transition:opacity .26s var(--ease),visibility .26s}
  .nav-open .nav-backdrop{opacity:1;visibility:visible}

  .site-head .nav{
    /* .site-head carries backdrop-filter, which makes it the containing
       block for its position:fixed children — so the drawer is placed from
       the header box, not the viewport: 100% is the header's bottom edge,
       and the height comes from viewport units, which ignore that. */
    position:fixed;z-index:58;
    inset-block-start:100%;inset-block-end:auto;
    height:calc(100vh - var(--nav-top,88px));
    height:calc(100dvh - var(--nav-top,88px));
    /* Closed, the drawer is display:none rather than parked off-screen:
       because the header is its containing block, an off-screen drawer adds
       its own width to the document and gives every phone page a horizontal
       scrollbar. The open animation is a fade-down, which reads the same in
       Arabic and English — a sideways slide would run the wrong way in one
       of the two. */
    inset-inline-end:0;
    width:min(88vw,340px);
    display:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    background:#fff;border-inline-start:1px solid var(--line);
    box-shadow:0 0 40px rgba(11,44,34,.16);
    padding:10px 14px 36px;margin:0}
  .nav-open .site-head .nav{display:block;animation:icvNavIn .26s var(--ease) both}
  @keyframes icvNavIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .nav-open .site-head .nav{animation:none}
    .nav-backdrop{transition:none}
  }

  .site-head .nav > li{position:static;border-bottom:1px solid var(--line-2)}
  .site-head .nav > li:last-child{border-bottom:0}
  .site-head .nav > li > a{padding:13px 8px;font-size:15.5px;border-radius:8px}
  .site-head .nav > li > a .caret{display:none}
  .site-head .nav > li > a .en{display:none}

  .site-head .subnav{position:static;opacity:1;visibility:visible;transform:none;
    pointer-events:auto;min-width:0;border:0;box-shadow:none;background:transparent;
    padding:0 0 10px;margin:0}
  .site-head .subnav li a{display:block;padding:9px 8px;font-size:13.5px;
    color:var(--muted);border-radius:8px}
  .site-head .subnav li a:hover{background:var(--gold-soft)}

  .nav-close-item{border-bottom:0 !important;display:flex;justify-content:flex-end;
    padding-bottom:6px;list-style:none}
  .nav-close{width:36px;height:36px;display:grid;place-items:center;
    border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--deep);cursor:pointer}
  .nav-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

  html.nav-open,html.nav-open body{overflow:hidden}
}
@media (min-width:1101px){
  .nav-backdrop,.nav-close-item{display:none}
}

/* ---- success stories: every card invites a story (10 Nov 2026) ---- */
.card-invite .card-media{position:relative;overflow:hidden}
.card-invite .ph{transition:transform .5s var(--ease)}
.card-invite:hover .ph{transform:scale(1.03)}
.invite-art{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:10px;
  color:#fff;text-align:center;pointer-events:none}
.invite-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)}
.invite-ic svg{width:20px;height:20px}
.invite-art b{font-size:clamp(24px,2.6vw,34px);font-weight:700;line-height:1.25;text-shadow:0 2px 14px rgba(0,0,0,.2)}
.invite-rule{display:block;width:44px;height:2px;border-radius:2px;background:var(--gold,#c9a227)}
.card-invite .tag{z-index:2}

/* a small «قريبًا» chip in place of a link (initiative cards, 10 Nov 2026) */
.badge-soon-sm{padding:3px 10px;font-size:11.5px;letter-spacing:.02em;white-space:nowrap}

/* English view: the legacy .en-sub subtitle repeats the English heading when the
   heading already has its own .only-en text - hide it there (14 pages, 11 Nov). */
.only-en ~ .en-sub{display:none !important}