/* ============================================================================
   EGYPT GLOBAL HEALTH & LONGEVITY INITIATIVE  —  /egypt-vision
   Presented by Dr. Dalal Akoury

   NATIVE TO drdalalakoury.com.
   Palette, type scale, nav chrome, buttons, section rhythm and footer are
   taken verbatim from the site homepage (index.html) so this page reads as
   part of the site, not as a visitor. Everything below the "PAGE-SPECIFIC"
   divider is new work built from those same tokens.

   Behaviour comes from the site's shared /assets/app.js (sticky nav, nav
   dropdowns, mobile accordion, reveal-on-scroll, EN/AR/FR/ES setLang).

   Build 2026-08-07-B  ·  Private strategic proposal
   ============================================================================ */

/* ==========================================================================
   1. SITE TOKENS — copied verbatim from the homepage
   ========================================================================== */
:root{
  --navy-deep:#0a1425;
  --navy:#0f1b33;
  --navy-mid:#16264a;
  --gold:#c9a55c;
  --gold-light:#d4af7a;
  --gold-pale:#f0e4c4;
  --gold-deep:#9a7b3e;
  --cream:#f7f3ea;
  --cream-soft:#faf7f0;
  --ink:#0e1a26;
  --text:#4a5563;
  --text-light:#e8e0d5;
  --text-muted:#9aa4b0;
  --border:#e6ddc9;
  --white:#ffffff;
  --display:'Cormorant Garamond',Georgia,serif;
  --body:'Montserrat',system-ui,sans-serif;
  --maxw:1200px;
  --shadow-md:0 8px 30px rgba(10,20,37,.12);
  --shadow-lg:0 28px 60px rgba(10,20,37,.22);

  /* shared-nav tokens (from assets/style.css, as the homepage copies them) */
  --lapis:#16305C;
  --lapis-deep:#0C1B33;
  --font-ar:'Amiri','Cairo',serif;
  --fs-caption:.8125rem;
  --radius-btn:4px;
  --ease:cubic-bezier(.16,.8,.24,1);

  /* Deep bronze for gold-coloured TEXT on cream grounds.
     --gold #c9a55c measures 2.2:1 on --cream and --gold-deep #9a7b3e
     measures 3.7:1 — both short of AA for body copy. #7a5f2c measures
     5.4:1 and is used for small gold text on light grounds only. */
  --gold-ink:#7a5f2c;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:132px}
body{
  font-family:var(--body);font-weight:300;color:var(--ink);
  background:var(--cream-soft);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{
  position:absolute;left:-9999px;top:0;z-index:300;background:var(--gold);
  color:var(--navy-deep);padding:14px 22px;font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   2. SHARED SITE CHROME — copied verbatim from the homepage
   ========================================================================== */
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 22px}}

.ftc{background:var(--lapis-deep);color:rgba(255,255,255,.85);font-size:var(--fs-caption);text-align:center;padding:9px 24px;letter-spacing:.01em}
.ftc b{font-weight:700;color:var(--gold-light)}

.langbar{background:var(--lapis);color:rgba(255,255,255,.72);padding:7px 0;font-size:var(--fs-caption)}
.langbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.ar-badge{font-family:var(--font-ar);color:var(--gold-light);font-weight:700}
.langsw{display:flex;gap:4px}
.langsw button{font-family:var(--body);font-size:var(--fs-caption);font-weight:700;letter-spacing:.06em;padding:4px 11px;border-radius:2px;cursor:pointer;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.7);background:transparent;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.langsw button:hover,.langsw button.on{background:var(--gold);color:var(--lapis-deep);border-color:var(--gold)}

.nav{position:sticky;top:0;z-index:100;background:rgba(12,27,51,.92);transition:background .3s var(--ease),box-shadow .3s var(--ease);padding:18px 0;box-shadow:0 2px 20px rgba(10,24,48,.18)}
/* The blur sits on a pseudo-layer, not on .nav itself: a backdrop-filter on
   .nav would make it the containing block for the fixed mobile menu. */
.nav::before{content:'';position:absolute;inset:0;z-index:-1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nav.solid{background:var(--lapis-deep);box-shadow:0 2px 30px rgba(10,24,48,.4)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:88px;width:auto;display:block}
@media(max-width:760px){.nav-logo img{height:56px}}
.nav-links,.nav-drop-menu{list-style:none}
.nav-links{display:flex;gap:0;align-items:center}
.nav-links a{font-size:var(--fs-caption);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.8);padding:9px 8px;white-space:nowrap;transition:color .15s var(--ease);position:relative}
.nav-links a.current{color:var(--gold-light)}
.nav-links a:hover{color:var(--gold-light)}
.nav-cta{font-size:var(--fs-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lapis-deep);background:var(--gold);padding:11px 16px;border-radius:var(--radius-btn);transition:background .2s var(--ease),transform .15s var(--ease);white-space:nowrap}
.nav-cta:hover{background:var(--gold-light)}
.nav-cta:active{transform:scale(.97)}
html[dir="rtl"] .nav-links a{letter-spacing:0;font-family:var(--font-ar)}
html[dir="rtl"] .nav-cta{font-family:var(--font-ar)}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.burger span{width:23px;height:2px;background:#fff;border-radius:2px}
.mnav{display:none;background:var(--lapis-deep);padding:8px 32px 26px}
.mnav.open{display:block}
.mnav a{display:block;color:rgba(255,255,255,.85);padding:13px 0;font-size:var(--fs-caption);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-drop{position:relative}
.nav-drop-trigger{display:inline-flex;align-items:center;gap:2px;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.8);transition:color .15s var(--ease)}
button.nav-drop-trigger{background:none;border:none;cursor:pointer;font:inherit;padding:9px 13px}
.nav-drop-trigger:hover,.nav-drop.open .nav-drop-trigger,.nav-drop-trigger.current{color:var(--gold-light)}
.nav-drop .chev{transition:transform .2s var(--ease)}
.nav-drop.open .chev{transform:rotate(180deg)}
.nav-drop-label{color:inherit;padding:9px 4px 9px 13px;cursor:pointer}
.nav-drop-label.current{color:var(--gold-light)}
.nav-drop-caret{background:none;border:none;cursor:pointer;color:inherit;font:inherit;display:inline-flex;align-items:center;padding:9px 13px 9px 4px}
.nav-drop-home:hover .nav-drop-menu{opacity:1;visibility:visible;transform:none}
.nav-drop-home:hover .chev{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:100%;left:0;margin-top:6px;min-width:190px;background:var(--lapis-deep);border:1px solid rgba(255,255,255,.12);border-radius:8px;box-shadow:var(--shadow-lg);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:110}
.nav-drop.open .nav-drop-menu{opacity:1;visibility:visible;transform:none}
.nav-drop-menu li a{display:block;padding:10px 14px;border-radius:6px;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:none;color:rgba(255,255,255,.82);transition:background .15s var(--ease),color .15s var(--ease)}
.nav-drop-menu li a:hover,.nav-drop-menu li a.current{background:rgba(191,154,84,.12);color:var(--gold-light)}
html[dir="rtl"] .nav-drop-trigger{letter-spacing:0}
html[dir="rtl"] .nav-drop-menu{left:auto;right:0}
html[dir="rtl"] .nav-drop-menu li a{letter-spacing:0}
.mnav-group-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.85);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.08)}
button.mnav-group-trigger{background:none;border:none;font:inherit;padding:13px 0;cursor:pointer}
.mnav-group-trigger .chev{transition:transform .2s var(--ease)}
.mnav-group.open .chev{transform:rotate(180deg)}
.mnav-group-label{flex:1;color:inherit;padding:13px 0;cursor:pointer}
.mnav-group-label.current{color:var(--gold-light)}
.mnav-group-caret{background:none;border:none;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;padding:13px 0 13px 12px}
.mnav-submenu{display:none;padding-left:16px}
.mnav-group.open .mnav-submenu{display:block}
.mnav-submenu a{padding:11px 0;font-size:.78rem;text-transform:none;letter-spacing:.02em}
.mnav-submenu a.current,.mnav-group-trigger.current{color:var(--gold-light)}
html[dir="rtl"] .mnav-submenu{padding-left:0;padding-right:16px}
@media(max-width:1760px){.nav-cta.desk{display:none}}
@media(max-width:1300px){.nav-links{display:none}.burger{display:flex}}

/* Buttons — verbatim */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 34px;border-radius:2px;font-family:var(--body);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;transition:all .3s;white-space:nowrap;cursor:pointer;text-align:center;line-height:1.4}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold-deep));color:var(--navy-deep);box-shadow:0 6px 20px rgba(201,165,92,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(201,165,92,.4)}
.btn-ghost{border:1px solid rgba(240,228,196,.5);color:var(--gold-pale)}
.btn-ghost:hover{background:rgba(240,228,196,.1);border-color:var(--gold)}
.btn-dark{border:1px solid var(--gold);color:var(--gold-ink)}
.btn-dark:hover{background:var(--gold);color:var(--white)}
.btn .ar{transition:transform .3s;display:inline-block}
.btn:hover .ar{transform:translateX(4px)}
.btn-block{width:100%}
.btn.is-pending{cursor:default}
.btn.is-pending:hover{transform:none}
.btn-wrapok{white-space:normal}

/* Section scaffolding — verbatim */
section.block{padding:128px 0}
.section-label{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-ink);font-weight:600;display:inline-flex;align-items:center;gap:14px;margin-bottom:18px}
.section-label::before{content:'';width:30px;height:1px;background:var(--gold);flex-shrink:0}
h2.sh{font-family:var(--display);font-weight:300;font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.1;color:var(--navy);margin-bottom:22px}
h2.sh em{font-style:italic;color:var(--gold-ink)}
h3.sh3{font-family:var(--display);font-weight:500;font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.2;color:var(--navy);margin-bottom:14px}
.lead-p{font-size:15px;line-height:1.9;color:var(--text);max-width:60ch}
.body-p{font-size:14.5px;line-height:1.95;color:var(--text);margin-bottom:18px;max-width:62ch}
.body-p:last-child{margin-bottom:0}
.body-p strong{color:var(--ink);font-weight:600}

/* "Why Egypt · Why Now" — intro paragraph + two-column body copy only.
   The base .lead-p/.body-p treatment (14.5-15px, weight 300 inherited
   from body, --text #4a5563) reads too light/thin here. Scoped override:
   darker slate, regular weight, modestly larger, tightened line-height —
   readability fix only, no layout/heading/eyebrow change. */
#why-egypt > .container > .center > .lead-p,
#why-egypt .split.top .body-p{
  color:#33404f;
  font-weight:400;
  line-height:1.75;
}
#why-egypt > .container > .center > .lead-p{font-size:17px}
#why-egypt .split.top .body-p{font-size:16.5px}

/* #why-egypt background photograph — same carved-relief image the hero on
   this page already uses (a separate, re-optimized local copy so the two
   can be swapped independently), with a warm ivory scrim in the same
   linear-gradient()+url() layering the hero/quoteband use elsewhere on
   the site for text-over-image sections. The scrim uses the site's own
   --cream token (not a new color) at high opacity because this section's
   text was designed for a plain white ground (dark navy heading, slate
   body copy) — a dark scrim like the hero's would fail that text, so a
   light one keeps every existing color exactly as readable as before.
   .evi-cell keeps its own solid white background, so the evidence cards
   stay crisp regardless of the photo behind them. */
#why-egypt{
  background:linear-gradient(rgba(247,243,234,.88),rgba(247,243,234,.88)),url('/images/egypt-global-health-why-egypt-bg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.center{text-align:center}
.center .section-label{justify-content:center}
.center .lead-p{margin:0 auto}
.center h2.sh{max-width:22ch;margin-left:auto;margin-right:auto}
.bg-cream{background:var(--cream)}
.bg-white{background:var(--white)}
.bg-navy{background:linear-gradient(135deg,#0a1425,#0f1b33);color:var(--white)}
.bg-navy h2.sh,.bg-navy h3.sh3{color:var(--white)}
.bg-navy h2.sh em{color:var(--gold-light)}
.bg-navy .lead-p,.bg-navy .body-p{color:rgba(232,224,213,.85)}
.bg-navy .body-p strong{color:var(--white)}
.bg-navy .section-label{color:var(--gold-light)}

/* --------------------------------------------- 5b. VISION — CINEMATIC BAND
   Full-bleed editorial photo section. Reuses .bg-navy (above) for all text
   colour, .btn-ghost for the CTA, and the site's established .chapter
   parallax technique (transform: translateY(var(--x)), set from a passive
   scroll listener, see script.js) — new markup/rules, no shared file touched. */
.vision-cine{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(680px,92vh,980px);padding:96px 0}
.vision-cine-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.vision-cine-img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:translateY(var(--vc-parallax,0px));transition:transform .1s linear;will-change:transform;display:block}
/* Text-side (left) reads strongly against the photo; image-side (right)
   stays photographic. A soft vertical pass blends the band into the
   cream sections above/below it. */
.vision-cine::after{content:'';position:absolute;inset:0;z-index:1;background:
  linear-gradient(90deg,rgba(10,20,37,.92) 0%,rgba(10,20,37,.82) 32%,rgba(10,20,37,.5) 60%,rgba(10,20,37,.22) 100%),
  linear-gradient(180deg,rgba(10,20,37,.32) 0%,transparent 18%,transparent 82%,rgba(10,20,37,.4) 100%)}
.vision-cine .container{position:relative;z-index:2}
.vision-cine-content{max-width:620px;margin-top:-2%}
.vision-cine-content .section-label{margin-bottom:22px}
.vc-eyebrow::before{transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease)}
.vision-cine.in .vc-eyebrow::before{transform:scaleX(1)}
.vc-eyebrow,.vc-h,.vc-p,.vc-cta{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.vc-eyebrow{transform:translateY(8px);transition-delay:.15s}
.vc-h{transform:translateY(24px);transition-delay:.28s}
.vc-p1{transform:translateY(18px);transition-delay:.42s}
.vc-p2{transform:translateY(18px);transition-delay:.52s}
.vc-p3{transform:translateY(18px);transition-delay:.62s}
.vc-cta{transform:translateY(14px);transition-delay:.72s}
.vision-cine.in .vc-eyebrow,.vision-cine.in .vc-h,.vision-cine.in .vc-p,.vision-cine.in .vc-cta{opacity:1;transform:none}
.vision-cine .vc-h{max-width:14ch}
.vision-cine .vc-p{max-width:none}
.vision-cine .vc-cta{margin-top:10px}
@media(hover:hover) and (pointer:fine){.vision-cine .vc-cta:hover{background:rgba(240,228,196,.1);border-color:var(--gold)}}
.vision-cine .vc-cta:active{transform:scale(.97)}
@media(max-width:900px){
  .vision-cine{min-height:0;padding:88px 0 76px}
  .vision-cine-content{margin-top:0}
  .vision-cine .vc-h{max-width:none}
  .vision-cine-img{object-position:62% center}
}
@media(max-width:480px){
  .vision-cine{padding:72px 0 64px}
}
@media(prefers-reduced-motion:reduce){
  .vc-eyebrow::before,.vc-eyebrow,.vc-h,.vc-p,.vc-cta{transition:opacity .3s linear!important;transform:none!important;transition-delay:0s!important}
  .vc-eyebrow,.vc-h,.vc-p,.vc-cta{opacity:1}
  .vc-eyebrow::before{transform:scaleX(1)!important}
  .vision-cine-img{transform:none!important;transition:none!important}
}

/* Stats band — verbatim */
.stats-band{background:var(--navy-deep);border-top:1px solid rgba(201,165,92,.2);border-bottom:1px solid rgba(201,165,92,.2)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--maxw);margin:0 auto}
.stat{text-align:center;padding:42px 18px;border-right:1px solid rgba(201,165,92,.14);transition:background .3s}
.stat:last-child{border-right:0}
.stat:hover{background:rgba(201,165,92,.05)}
.stat-num{font-family:var(--display);font-size:2.1rem;font-weight:300;color:var(--gold);line-height:1.2}
.stat-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-top:10px;line-height:1.7}
/* Flagged metric — same size/weight/layout as the other three, red instead
   of gold to read as a standalone, attention-worthy figure. #ff3b3b holds
   ~5.2:1 contrast on --navy-deep, clearing WCAG AA at this label's 10px size. */

@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat{border-bottom:1px solid rgba(201,165,92,.14)}}

/* Same flagged-metric treatment, reused on the light-background Opportunity
   story (35,000 Medical Tourists — the same figure flagged above). #ff3b3b
   only clears AA on the dark --navy-deep stats-band; on white/cream a
   deeper red is required to hold 4.5:1 at normal text size, hence the
   separate value here. Font, size, weight and layout are untouched —
   .opp-story .stat-num/.sh3 still set those. */


/* "The Opportunity" — alternating editorial storytelling sequence, one
   large photograph + narrow copy column per statistic, a pull quote at
   the midpoint, and a decorative oversized chapter numeral behind each
   image. Scoped entirely to #opportunity so the rest of the page's
   spacing, container width and card conventions are untouched. Reuses
   .section-label / h3.sh3 / .body-p / .plate·.plate-note as-is; only the
   .opp-* rules below are new.

   Each <article class="opp-story"> holds four flat children — head
   (eyebrow + stat + headline), media (chapter numeral + photo), narrative
   (the paragraph) and caption — in the exact order the mobile hierarchy
   wants them read. grid-template-areas repositions those same four
   elements into two columns on desktop (caption slotting directly under
   its photo) without any markup duplication; only the area map differs
   between the two breakpoints. */
/* overflow-x:hidden is the safety net for the intentional edge bleed below
   (photo negative-margin + decorative numeral overhang) — both are
   decorative and meant to run up to the viewport edge, never past it. */
#opportunity.block{padding-top:clamp(90px,9vw,150px);padding-bottom:clamp(100px,10vw,170px);overflow-x:hidden}
#opportunity .container{max-width:1440px}
#opportunity .lead-p{margin-top:22px;max-width:62ch}

.opp-stories{display:flex;flex-direction:column;gap:clamp(64px,7vw,92px);margin-top:80px}

.opp-story{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-areas:
    "media head"
    "media narrative"
    "capt  .";
  column-gap:clamp(40px,5vw,80px);
  row-gap:22px;
  align-items:center;
  text-align:left;
}
.opp-story--reverse{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  grid-template-areas:
    "head  media"
    "narrative media"
    ".     capt";
}
.opp-story > *{min-width:0}
.opp-story-head{grid-area:head;align-self:center}
.opp-story-media{grid-area:media;position:relative;align-self:center}
.opp-story-narrative{grid-area:narrative;align-self:center}
.opp-story-caption{grid-area:capt}

.opp-story:nth-of-type(1) .opp-story-media{margin-left:clamp(-28px,-2.2vw,0px)}
.opp-story:nth-of-type(2) .opp-story-media{margin-right:clamp(-28px,-2.2vw,0px)}

/* Uniform 4:3 landscape editorial photograph — same box on every chapter,
   regardless of how much copy sits beside it. aspect-ratio + width:100%
   sizes the box; height is never forced to match the text column (no
   height:100%/min-height/stretch anywhere in this rule set), so the two
   columns are free to end at different heights — that asymmetry is the
   intended editorial look, not a bug. */
.opp-story .plate{aspect-ratio:4/3;width:100%;height:auto;margin:0;overflow:hidden;position:relative;z-index:1}
.opp-story .plate img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--ease)}
@media(hover:hover){.opp-story:hover .plate:not(.is-pending) img{transform:scale(1.025)}}

/* Decorative chapter numeral — sits partially behind the image, toward
   its outer edge; never legible content, so aria-hidden in the markup. */
.opp-story-num{
  position:absolute;top:-.4em;left:-.06em;z-index:0;
  font-family:var(--display);font-weight:300;font-size:clamp(80px,9vw,160px);
  line-height:1;color:var(--gold-deep);opacity:.16;
  pointer-events:none;user-select:none;white-space:nowrap;
}
.opp-story--reverse .opp-story-num{left:auto;right:-.06em}

.opp-story-caption{font-family:var(--display);font-style:italic;font-weight:400;font-size:13px;line-height:1.6;color:var(--text-muted);margin:0;max-width:38ch}

.opp-story-stat{display:block;font-size:clamp(52px,6vw,90px);line-height:1;margin-bottom:14px}
.opp-story-head h3.sh3{margin-bottom:0}
.opp-story-narrative{font-size:16.5px;line-height:1.85;font-weight:400;color:#33404f;max-width:44ch;margin:0}

/* Pull quote — large italic serif with a gold vertical rule, no card or
   background box; spans slightly wider than the story copy column. */
.opp-pullquote{
  max-width:760px;margin:0 auto;padding-left:28px;border-left:1px solid var(--gold);
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.45;color:var(--navy);
}
.opp-pullquote em{font-style:italic;color:var(--gold-ink)}

.opp-divider{display:block;height:1px;background:rgba(201,165,92,.24)}

@media(max-width:1024px){
  .opp-story,.opp-story--reverse{
    grid-template-columns:1fr;
    grid-template-areas:"head" "media" "narrative" "capt";
    row-gap:28px;
  }
  .opp-story-head,.opp-story-media,.opp-story-narrative,.opp-story-caption{align-self:auto}
  .opp-story:nth-of-type(1) .opp-story-media,
  .opp-story:nth-of-type(2) .opp-story-media{margin-left:0;margin-right:0}
  .opp-story--reverse .opp-story-num{left:-.18em;right:auto}
  .opp-story-narrative{max-width:none}
  .opp-story-caption{max-width:none}
}
@media(max-width:767px){
  .opp-stories{gap:clamp(44px,10vw,60px);margin-top:56px}
  .opp-story-num{font-size:clamp(56px,20vw,84px)}
  .opp-story-stat{font-size:clamp(42px,12vw,60px)}
}

@media(prefers-reduced-motion:reduce){
  .opp-story .plate img{transition:none!important}
}

/* Footer — verbatim */
.footer{background:var(--navy-deep);color:rgba(232,224,213,.72);padding:64px 0 34px}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(201,165,92,.16)}
.footer .footer-logo{height:68px;width:auto;display:block;margin-bottom:18px}
.footer .fbrand{font-family:var(--display);font-size:1.7rem;color:var(--gold);margin-bottom:10px}
.footer .frole{font-size:12px;letter-spacing:.05em;color:var(--gold-light);margin-bottom:14px;line-height:1.75}
.footer p{font-size:13px;line-height:1.8}
.footer h5{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);margin-bottom:16px}
.footer ul{list-style:none;display:grid;gap:9px}
.footer ul a{font-size:13px;color:rgba(232,224,213,.78);transition:color .25s}
.footer ul a:hover{color:var(--gold-light)}
.footer-bottom{padding-top:26px;text-align:center;font-size:11.5px;color:rgba(232,224,213,.65);line-height:1.85}
@media(max-width:760px){.footer-top{grid-template-columns:1fr}}


/* ==========================================================================
   ▼▼▼  PAGE-SPECIFIC — new work, built from the tokens above
   ========================================================================== */

/* ---------------------------------------------- 3. PRIVATE-PROPOSAL RIBBON */
.proposal-bar{
  background:#071021;color:rgba(240,228,196,.78);
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  text-align:center;padding:8px 20px;line-height:1.7;
  border-bottom:1px solid rgba(201,165,92,.2);
}
.proposal-bar b{color:var(--gold-light);font-weight:700}

/* ------------------------------------------------------- 4. SECTION SUBNAV
   The site nav stays exactly as it is on every other page; this second rail
   carries the proposal's own sections and the briefing CTA. */
.subnav{position:sticky;top:0;z-index:90;background:rgba(10,20,37,.95);border-bottom:1px solid rgba(201,165,92,.24)}
.subnav::before{content:'';position:absolute;inset:0;z-index:-1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.subnav-in{max-width:var(--maxw);margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.subnav-links{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative}
/* If the rail ever does need to scroll, fade the right edge so it reads as
   scrollable rather than as text that has been chopped off. */
.subnav-links{mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
@media(min-width:1381px){.subnav-links{mask-image:none;-webkit-mask-image:none}}
.subnav-links::-webkit-scrollbar{display:none}
.subnav-links a{
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(232,224,213,.82);padding:15px 9px;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease);
}
.subnav-links a:hover{color:var(--gold-light)}
.subnav-links a[aria-current="true"]{color:var(--gold-light);border-bottom-color:var(--gold)}
.subnav-cta{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-deep);background:var(--gold);padding:10px 14px;border-radius:var(--radius-btn);white-space:nowrap;flex-shrink:0;transition:background .2s var(--ease)}
.subnav-cta:hover{background:var(--gold-light)}
@media(max-width:1380px){.subnav-cta{display:none}}
@media(max-width:640px){.subnav-in{padding:0 16px}.subnav-links a{padding:13px 9px;font-size:10px}}

/* ------------------------------------------------------------- 5. HERO */
.hero{position:relative;display:flex;align-items:center;color:var(--white);overflow:hidden;background:var(--navy-deep);min-height:clamp(520px,72vh,760px)}
.hero-bg{position:absolute;inset:0;z-index:0;background-image:url("/images/blocks-egyptian-DalalAkoury-Homecoming.jpg");background-size:cover;background-position:center;background-repeat:no-repeat}
/* Even navy scrim across the whole width — the hero copy is centered, so the
   overlay is no longer weighted to one side the way a left-aligned hero's was. */
.hero-bg::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(10,15,30,.86) 0%,rgba(10,15,30,.74) 45%,rgba(10,15,30,.88) 100%)}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);z-index:3}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);width:100%;margin:0 auto;padding:84px 28px 90px;text-align:center}
.hero-eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--gold-light);margin:0 auto 26px;max-width:100%}
.hero-eyebrow::before{content:'';width:34px;height:1px;background:var(--gold);flex-shrink:0}
.hero h1{font-family:var(--display);font-weight:300;font-size:clamp(2.05rem,4.1vw,3.5rem);line-height:1.1;letter-spacing:.005em;margin:0 auto 22px;max-width:19ch}
.hero h1 em{font-style:italic;color:var(--gold-light)}
.hero-lead{font-size:15px;line-height:1.9;color:rgba(232,224,213,.88);max-width:52ch;margin:0 auto 34px;font-weight:300}
.hero-attr{border-top:1px solid rgba(201,165,92,.3);padding-top:24px;max-width:54ch;text-align:left}
.hero-attr .pres{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(232,224,213,.72);margin-bottom:9px}
.hero-attr .who{font-family:var(--display);font-size:clamp(1.5rem,2.4vw,1.95rem);font-weight:400;color:var(--white);line-height:1.2;margin-bottom:8px}
.hero-attr .role{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-light);line-height:1.8}
@media(max-width:900px){.hero{min-height:0}.hero-inner{padding:72px 28px 80px}}

/* ---------------------------------------- 5b. SPHINX GATE HERO INTRO
   A temporary ceremonial intro layer inside the hero only. Two guardian
   Sphinx illustrations face each other, then part like curtains to reveal
   the hero copy beneath — motion only, no new colors/artwork/copy.
   `html.sg-js` gates every hidden/initial state so the page degrades to a
   fully visible, unanimated hero if JS never runs. See script.js for the
   choreography (SPHINX GATE INTRO block) and index.html for the safety-net
   inline script that adds/removes the `sg-js` class.                     */
:root{
  --sg-out:cubic-bezier(.16,1,.3,1);
  --sg-inout:cubic-bezier(.65,0,.35,1);
  --sg-in:cubic-bezier(.55,0,1,.45);
  --sg-gap-rest:clamp(40px,4vw,90px);
}

.sphinx-gate{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.sphinx-gate.sg-done{visibility:hidden}

.sphinx-gate-fig{
  position:absolute;top:50%;width:clamp(220px,40vw,560px);height:auto;
  object-fit:contain;opacity:0;pointer-events:none;user-select:none;
  scale:1.05;
  transition:translate .55s var(--sg-out),scale .55s var(--sg-out),opacity .55s var(--sg-out);
}
.sphinx-gate-left{left:50%;translate:calc(-100% - var(--sg-gap-rest)) -50%}
.sphinx-gate-right{right:50%;translate:calc(100% + var(--sg-gap-rest)) -50%}

/* stage 1 — the guardians arrive; the gate is still closed */
.sphinx-gate-fig.sg-visible{opacity:1;scale:1}

/* stage 2 — the gate opens; headline reveal overlaps this motion */
.sphinx-gate-fig.sg-open{transition:translate 1.3s var(--sg-inout),scale 1.3s var(--sg-inout),opacity 1.3s var(--sg-inout)}
.sphinx-gate-left.sg-open{translate:calc(-100% - 27vw) calc(-50% - 10px);scale:.97}
.sphinx-gate-right.sg-open{translate:calc(100% + 27vw) calc(-50% + 8px);scale:.97}

/* stage 3 — the guardians recede beyond the edges and dissolve */
.sphinx-gate-fig.sg-exit{opacity:0;transition:translate .75s var(--sg-in),scale .75s var(--sg-in),opacity .75s var(--sg-in)}
.sphinx-gate-left.sg-exit{translate:calc(-100% - 62vw) calc(-50% - 14px);scale:.94}
.sphinx-gate-right.sg-exit{translate:calc(100% + 62vw) calc(-50% + 14px);scale:.94}

@media(max-width:640px){
  :root{--sg-gap-rest:clamp(20px,5vw,40px)}
  .sphinx-gate-fig{width:clamp(150px,52vw,260px)}
  .sphinx-gate-left.sg-open{translate:calc(-100% - 22vw) calc(-50% - 6px)}
  .sphinx-gate-right.sg-open{translate:calc(100% + 22vw) calc(-50% + 6px)}
  .sphinx-gate-left.sg-exit{translate:calc(-100% - 58vw) calc(-50% - 8px)}
  .sphinx-gate-right.sg-exit{translate:calc(100% + 58vw) calc(-50% + 8px)}
}

/* hero copy — hidden only while html.sg-js is present, i.e. only once the
   intro script has confirmed it will run the reveal itself */
html.sg-js .hero-eyebrow{opacity:0;translate:0 8px;transition:opacity .5s var(--sg-out),translate .5s var(--sg-out)}
html.sg-js .hero-eyebrow::before{transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--sg-out) .05s}
html.sg-js .hero-eyebrow.sg-in{opacity:1;translate:0 0}
html.sg-js .hero-eyebrow.sg-in::before{transform:scaleX(1)}

html.sg-js #hero-h .sg-line-mask{display:inline-block;overflow:hidden;vertical-align:top}
html.sg-js #hero-h .sg-line{display:inline-block;translate:0 105%;opacity:0;filter:blur(4px);transition:translate .8s var(--sg-out),opacity .8s var(--sg-out),filter .8s var(--sg-out)}
html.sg-js #hero-h .sg-line-mask:nth-of-type(2) .sg-line{transition-delay:.09s}
html.sg-js #hero-h.sg-in .sg-line{translate:0 0;opacity:1;filter:blur(0)}

html.sg-js .hero-lead{opacity:0;translate:0 14px;transition:opacity .65s var(--sg-out),translate .65s var(--sg-out)}
html.sg-js .hero-lead.sg-in{opacity:1;translate:0 0}

html.sg-js .hero-attr{opacity:0;translate:0 14px;transition:opacity .65s var(--sg-out),translate .65s var(--sg-out)}
html.sg-js .hero-attr.sg-in{opacity:1;translate:0 0}

@media(prefers-reduced-motion:reduce){
  .sphinx-gate-fig,
  .sphinx-gate-fig.sg-open,
  .sphinx-gate-fig.sg-exit,
  html.sg-js .hero-eyebrow,
  html.sg-js .hero-eyebrow::before,
  html.sg-js #hero-h .sg-line,
  html.sg-js .hero-lead,
  html.sg-js .hero-attr{transition-duration:.28s!important;transition-delay:0s!important}
  html.sg-js #hero-h .sg-line{filter:none}
}

/* ------------------------------------------- 6. ASSET PLATES (pending state)
   Every photographic slot renders a labelled placeholder until the licensed
   file is supplied. Pending slots issue NO network request — no 404s ever. */
.plate{position:relative;overflow:hidden;background:var(--navy-mid);border:1px solid rgba(201,165,92,.28);border-radius:4px}
.plate img{width:100%;height:100%;object-fit:cover;display:block}
.plate.is-pending{background:linear-gradient(140deg,#16264a 0%,#0f1b33 55%,#0a1425 100%)}
.plate.is-pending::before{
  content:'';position:absolute;inset:0;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23c9a55c' stroke-width='.9'%3E%3Cpath d='M42 0 L84 42 L42 84 L0 42 Z'/%3E%3Cpath d='M42 18 L66 42 L42 66 L18 42 Z'/%3E%3Cpath d='M0 0 L18 42 L0 84 M84 0 L66 42 L84 84'/%3E%3C/g%3E%3C/svg%3E");
  background-size:84px 84px;
}
.plate.is-pending::after{content:'';position:absolute;inset:14px;border:1px solid rgba(201,165,92,.3);pointer-events:none}
.plate-note{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;text-align:center;padding:34px 30px}
.plate-note .pk{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-light);border:1px solid rgba(201,165,92,.45);padding:6px 14px;border-radius:999px}
.plate-note .pt{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(1rem,1.4vw,1.25rem);color:rgba(255,255,255,.92);line-height:1.45;max-width:26ch}
.plate-note .pd{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,224,213,.65)}
.plate:not(.is-pending) .plate-note{display:none}

figure.fig{margin:0;position:relative}
figure.fig figcaption{margin-top:14px;font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--text);line-height:1.6}
.bg-navy figure.fig figcaption{color:rgba(232,224,213,.75)}

/* ---------------------------------------------- 6b. GRID BLOWOUT GUARD
   Grid and flex items default to min-width:auto, so one wide descendant (a
   <select> sized by its longest option, a long email, a code path) forces the
   whole track wider than the viewport. This is the standard fix. */
.split > *,.bio-grid > *,.stake-grid > *,.form-grid > *,.form-row > *,
.assetgrid > *,.eco-grid > *,.eco-node > *,.pillars > *,.gov > *,
.objectives > *,.flow-track > *,.footer-top > *,.subnav-in > *,
.paper-mod > *,.stats > *{min-width:0}
.field input,.field select,.field textarea{min-width:0;max-width:100%}
.field select{text-overflow:ellipsis}
.contact-lines a,.form-aside a{overflow-wrap:anywhere}

/* -------------------------------------------------- 7. SPLIT (site pattern) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.top{align-items:start}
.split.rev .split-media{order:2}
.split-media{position:relative}
/* Empty on purpose — no pending-image styling here. Same aspect-ratio/position
   as before so a real photo can be dropped in later with no layout change. */
.split-media .plate{aspect-ratio:4/5;background:var(--cream);border:0}
.split-media::after{content:'';position:absolute;inset:auto -16px -16px auto;width:58%;height:58%;border:1px solid var(--gold);border-radius:4px;z-index:-1}
.split.rev .split-media::after{inset:auto auto -16px -16px}
@media(max-width:880px){
  .split{grid-template-columns:1fr;gap:36px}
  .split.rev .split-media{order:0}
  .split-media .plate{aspect-ratio:3/2}
  .split-media::after{display:none}
}

/* --------------------------------------------------- 8. PULL-QUOTE BAND */
.quoteband{background:linear-gradient(135deg,#0a1425,#0f1b33);color:var(--white);text-align:center;padding:clamp(84px,10vw,132px) 0;position:relative;overflow:hidden}
.quoteband::before{
  content:'';position:absolute;inset:0;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23c9a55c' stroke-width='.9'%3E%3Cpath d='M42 0 L84 42 L42 84 L0 42 Z'/%3E%3Cpath d='M42 18 L66 42 L42 66 L18 42 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:84px 84px;
  mask-image:radial-gradient(ellipse 60% 90% at 50% 50%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 60% 90% at 50% 50%,#000,transparent 72%);
}
.quoteband .container{position:relative;z-index:2}
.quoteband .qk{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold-light);margin-bottom:30px}
.quoteband blockquote{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,3.9vw,3rem);line-height:1.28;color:var(--white);max-width:22ch;margin:0 auto}
.quoteband blockquote em{font-style:italic;color:var(--gold-light)}

/* "The Central Idea" pull-quote only — looping video background.
   .quoteband-video-el (z-index 0) < .quoteband-scrim (1) < the existing
   ::before geometric pattern, bumped to z-index 2 here so it still reads
   above the footage < .container (already z-index 2 above, same tier as
   the pattern — DOM/paint order puts the real content on top of the ::before
   pseudo-element at equal z-index, exactly as it already did pre-video).

   Scrim is navy-tinted, not black. The footage (hospital corridors, sunlit
   temple courtyards) turned out to be brightly lit throughout, not just at
   an occasional peak — an initial pass tuned to guarantee AA contrast at
   the single brightest sampled pixel (.90/.80/.94) ended up hiding the
   video almost entirely in normal viewing, per feedback. These lighter
   stops were chosen by rendering several candidates against both a typical
   mid-loop frame and the brightest sampled frame and picking for visible,
   recognisable footage: worst-case contrast at the single brightest pixel
   in either clip is 2.25:1 (desktop) / 2.66:1 (mobile) for the small gold
   italic accent — below WCAG AA there, a deliberate trade for visibility —
   while the white blockquote text, which carries the actual sentence,
   still clears AA everywhere: 4.63:1 desktop / 5.48:1 mobile worst-case.
   Mobile's stops sit ~.06 above desktop's, per spec, since its tighter
   9:16 crop puts more copy over open sky. */
.quoteband-video{isolation:isolate}
.quoteband-video::before{z-index:2}
.quoteband-video-el{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}
.quoteband-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,22,40,.65) 0%,rgba(11,22,40,.55) 45%,rgba(11,22,40,.69) 100%);
}
@media(max-width:768px){
  .quoteband-scrim{background:linear-gradient(180deg,rgba(11,22,40,.71) 0%,rgba(11,22,40,.61) 45%,rgba(11,22,40,.75) 100%)}
}
@media(prefers-reduced-motion:reduce){
  /* No video at all under reduced motion — the aside's existing navy
     gradient + pattern is already a finished background on its own. */
  .quoteband-video-el{display:none}
}

/* ---------------------------------------------- 9. ASSET CARDS (Egypt's 9)
   Domino-cascade entrance, DOM order = reading order regardless of the
   2-/1-column reflow below. Every timing value here is pure CSS
   transition-delay off a per-card --card-delay custom property, so there
   is no per-frame JS and no third-party motion library — this project
   loads none, so this mirrors the vanilla transform/opacity technique
   already used for .vision-cine and the site's own .chapter component,
   not a new pattern.

   Progressive enhancement: the pre-reveal hidden state below is gated on
   `html.ac-js` (index.html, same self-clearing FOUC-guard pattern as the
   Sphinx Gate's `sg-js`), not just `:not(.in)`. Without that class — JS
   never ran, was blocked, or errored before script.js's cascade init —
   .asset-card carries no opacity/transform rule at all and simply renders
   at its plain CSS default: fully visible. `.in` is applied per-card
   (script.js), not to .assetgrid, so desktop can batch-reveal all nine at
   once off one grid-level trigger while mobile reveals each card off its
   own individual trigger — same CSS either way. */
.assetgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;perspective:1600px}
.asset-card{position:relative;background:var(--white);border:1px solid rgba(15,27,51,.09);box-shadow:0 12px 38px rgba(7,25,50,.05);padding:34px 30px;transition:opacity .82s var(--ease) var(--card-delay,0s),transform .82s var(--ease) var(--card-delay,0s),box-shadow .35s var(--ease)}
.asset-card:nth-child(1){--card-delay:0s;--card-rot:-.3deg}
.asset-card:nth-child(2){--card-delay:.12s;--card-rot:.24deg}
.asset-card:nth-child(3){--card-delay:.24s;--card-rot:-.22deg}
.asset-card:nth-child(4){--card-delay:.36s;--card-rot:.28deg}
.asset-card:nth-child(5){--card-delay:.48s;--card-rot:-.2deg}
.asset-card:nth-child(6){--card-delay:.6s;--card-rot:.22deg}
.asset-card:nth-child(7){--card-delay:.72s;--card-rot:-.26deg}
.asset-card:nth-child(8){--card-delay:.84s;--card-rot:.18deg}
.asset-card:nth-child(9){--card-delay:.96s;--card-rot:-.18deg}
@media(hover:hover) and (pointer:fine){
  .asset-card:hover{transform:translateY(-5px);box-shadow:0 20px 46px rgba(7,25,50,.1);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
  .asset-card:hover .ac-rule{opacity:1}
  .asset-card:hover h3{transform:translateY(-2px);transition:transform .4s var(--ease)}
}
.asset-card:active{transform:translateY(-2px)}
.ac-rule{position:absolute;top:-1px;left:-1px;right:-1px;height:2px;background:var(--gold);opacity:.75;transform-origin:left center;transition:transform .5s var(--ease) calc(var(--card-delay,0s) + .15s),opacity .3s var(--ease)}
.asset-card .an{font-family:var(--display);font-size:1.05rem;font-style:italic;color:var(--gold-ink);letter-spacing:.08em;margin-bottom:16px;transition:opacity .4s var(--ease) calc(var(--card-delay,0s) + .18s),transform .4s var(--ease) calc(var(--card-delay,0s) + .18s)}
.asset-card h3{font-family:var(--display);font-size:1.5rem;font-weight:500;color:var(--navy);line-height:1.2;margin-bottom:10px;transition:opacity .58s var(--ease) calc(var(--card-delay,0s) + .23s),transform .58s var(--ease) calc(var(--card-delay,0s) + .23s)}
.asset-card p{font-size:13.5px;color:var(--text);line-height:1.8;transition:opacity .62s var(--ease) calc(var(--card-delay,0s) + .3s),transform .62s var(--ease) calc(var(--card-delay,0s) + .3s)}
html.ac-js .asset-card:not(.in){opacity:0;transform:translateY(58px) scale(.975) rotateX(5deg) rotateZ(var(--card-rot,0deg))}
html.ac-js .asset-card:not(.in) .ac-rule{transform:scaleX(0)}
html.ac-js .asset-card:not(.in) .an{opacity:0;transform:translateY(6px)}
html.ac-js .asset-card:not(.in) h3{opacity:0;transform:translateY(14px)}
html.ac-js .asset-card:not(.in) p{opacity:0;transform:translateY(12px)}
@media(max-width:980px){.assetgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){
  .assetgrid{grid-template-columns:1fr}
  .asset-card:nth-child(1){--card-delay:0s}
  .asset-card:nth-child(2){--card-delay:.08s}
  .asset-card:nth-child(3){--card-delay:.16s}
  .asset-card:nth-child(4){--card-delay:.24s}
  .asset-card:nth-child(5){--card-delay:.32s}
  .asset-card:nth-child(6){--card-delay:.4s}
  .asset-card:nth-child(7){--card-delay:.48s}
  .asset-card:nth-child(8){--card-delay:.56s}
  .asset-card:nth-child(9){--card-delay:.64s}
  html.ac-js .asset-card:not(.in){transform:translateY(34px) scale(.975) rotateX(2.5deg) rotateZ(var(--card-rot,0deg))}
}
@media(prefers-reduced-motion:reduce){
  .asset-card,.ac-rule,.asset-card .an,.asset-card h3,.asset-card p{transition:opacity .25s linear!important;transition-delay:0s!important}
  html.ac-js .asset-card:not(.in),html.ac-js .asset-card:not(.in) .an,html.ac-js .asset-card:not(.in) h3,html.ac-js .asset-card:not(.in) p{opacity:1;transform:none}
  html.ac-js .asset-card:not(.in) .ac-rule{transform:scaleX(1)}
  .asset-card:active,.asset-card:hover h3{transform:none}
}

/* -------------------------------------------------- 10. JOURNEY FLOW */
.flow{margin-top:56px;position:relative}
.flow-track{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}
.flow-track::before{content:'';position:absolute;left:0;right:0;top:20px;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 8%,var(--gold) 92%,transparent);opacity:.45}
.flow-step .dot{width:40px;height:40px;border-radius:50%;background:var(--cream);border:1px solid var(--gold-ink);display:grid;place-items:center;position:relative;z-index:2;font-family:var(--display);font-size:1rem;color:var(--gold-ink);margin-bottom:20px}
.bg-white .flow-step .dot{background:var(--white)}
.flow-step h3{font-family:var(--display);font-size:1.3rem;font-weight:500;color:var(--navy);margin-bottom:8px;line-height:1.25}
.flow-step p{font-size:13px;line-height:1.8;color:var(--text)}
@media(max-width:880px){.flow-track{grid-template-columns:repeat(2,1fr);gap:34px 24px}.flow-track::before{display:none}}
@media(max-width:520px){.flow-track{grid-template-columns:1fr}}

/* ---------------------------------------------------- 11. SIX PILLARS */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(201,165,92,.26);border:1px solid rgba(201,165,92,.32);margin-top:56px;border-radius:4px;overflow:hidden}
.pillar{background:rgba(10,20,37,.86);padding:44px 34px 40px;transition:background .4s var(--ease)}
.pillar:hover{background:rgba(22,38,74,.92)}
.pillar .pn{font-family:var(--display);font-size:1.7rem;font-style:italic;color:var(--gold);display:block;margin-bottom:16px;line-height:1}
.pillar h3{font-family:var(--display);font-size:1.55rem;font-weight:500;color:var(--white);margin-bottom:12px;line-height:1.2}
.pillar p{font-size:13.5px;line-height:1.85;color:rgba(232,224,213,.85)}
.pillar-spine{margin-top:34px;text-align:center;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(232,224,213,.78);line-height:2}
.pillar-spine span{color:var(--gold-light)}
@media(max-width:980px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.pillars{grid-template-columns:1fr}}

/* ------------------------------------------------ 12. ECOSYSTEM DIAGRAM */
.eco{margin-top:56px;border:1px solid var(--border);border-radius:4px;overflow:hidden;box-shadow:var(--shadow-md)}
.eco-core{background:linear-gradient(135deg,#16264a,#0a1425);color:var(--white);padding:clamp(38px,5vw,58px);text-align:center;position:relative;overflow:hidden}
.eco-core::before{content:'';position:absolute;inset:0;opacity:.09;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23c9a55c' stroke-width='.9'%3E%3Cpath d='M42 0 L84 42 L42 84 L0 42 Z'/%3E%3Cpath d='M42 18 L66 42 L42 66 L18 42 Z'/%3E%3C/g%3E%3C/svg%3E");background-size:84px 84px}
.eco-core > *{position:relative;z-index:2}
.eco-core .ek{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);margin-bottom:14px}
.eco-core h3{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--white);margin:0 auto;max-width:22ch;line-height:1.2}
.eco-core .eline{width:44px;height:1px;background:var(--gold);margin:22px auto 0}
.eco-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border)}
.eco-node{background:var(--white);padding:28px 30px;display:flex;gap:18px;align-items:flex-start;transition:background .3s}
.eco-node:hover{background:var(--cream)}
.eco-node .en{font-family:var(--display);font-style:italic;color:var(--gold-ink);font-size:1.05rem;flex-shrink:0;width:28px;padding-top:2px}
.eco-node h4{font-family:var(--display);font-size:1.2rem;font-weight:500;color:var(--navy);margin-bottom:5px;line-height:1.25}
.eco-node p{font-size:13px;line-height:1.75;color:var(--text)}
@media(max-width:880px){.eco-grid{grid-template-columns:1fr}}

/* ------------------------------------------------- 13. STAKEHOLDER TABS */
.stake{margin-top:52px}
.stake-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;border-bottom:1px solid rgba(201,165,92,.3);scrollbar-width:none}
.stake-tabs::-webkit-scrollbar{display:none}
.stake-tab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:rgba(232,224,213,.8);padding:16px 22px;border-bottom:2px solid transparent;transition:color .25s,border-color .25s,background .25s;white-space:nowrap;margin-bottom:-1px;background:none}
.stake-tab:hover{color:var(--gold-light);background:rgba(201,165,92,.07)}
.stake-tab[aria-selected="true"]{color:var(--gold-light);border-bottom-color:var(--gold)}
.stake-panel{padding-top:50px}
.stake-panel[hidden]{display:none}
.stake-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:start}
.stake-grid h3{font-family:var(--display);font-weight:300;font-size:clamp(1.7rem,3vw,2.4rem);color:var(--white);margin-bottom:18px;max-width:16ch;line-height:1.15}
.stake-grid h3 em{font-style:italic;color:var(--gold-light)}
.stake-list{display:grid;gap:1px;background:rgba(201,165,92,.22);border:1px solid rgba(201,165,92,.28);border-radius:4px;overflow:hidden}
.stake-list li{background:rgba(10,20,37,.7);padding:18px 26px;font-size:13.5px;line-height:1.75;color:rgba(232,224,213,.9);display:flex;gap:15px;align-items:flex-start}
.stake-list li::before{content:'';flex-shrink:0;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-top:9px}
@media(max-width:880px){.stake-grid{grid-template-columns:1fr;gap:34px}}

/* ------------------------------------------------------- 14. OBJECTIVES */
.objectives{counter-reset:obj;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin-top:48px;border-radius:4px;overflow:hidden}
.objective{background:var(--white);padding:30px 32px;counter-increment:obj;display:flex;gap:20px;align-items:flex-start}
.objective::before{content:counter(obj,decimal-leading-zero);font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--gold-ink);flex-shrink:0;padding-top:2px}
.objective p{font-size:13.5px;line-height:1.8;color:var(--text)}
.objectives .objective:last-child{grid-column:1 / -1}
@media(max-width:820px){.objectives{grid-template-columns:1fr}.objectives .objective:last-child{grid-column:auto}}

/* ---------------------------------------------------------- 15. NOTICE */
.notice{margin-top:48px;border:1px solid var(--border);border-left:2px solid var(--gold);background:rgba(201,165,92,.08);padding:28px 32px;border-radius:4px}
.notice .nk{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px;font-weight:600}
.notice p{font-size:13.5px;line-height:1.85;color:var(--text);max-width:82ch}
.notice p strong{color:var(--ink);font-weight:600}
.bg-navy .notice{background:rgba(201,165,92,.09);border-color:rgba(201,165,92,.34);border-left-color:var(--gold)}
.bg-navy .notice .nk{color:var(--gold-light)}
.bg-navy .notice p{color:rgba(232,224,213,.88)}
.bg-navy .notice p strong{color:var(--white)}

/* ------------------------------------------ 15b. NATIONAL MOMENTUM — RING
   ORNAMENTS. Scoped entirely to #already; nothing here can leak into any
   other section. images/Egypt-Rings.jpg is a 736×735 JPG — a circular
   Egyptian lotus/geometric medallion on a solid white square canvas, with
   a white hollow center. Because the section background is also white,
   mix-blend-mode:multiply on the <img> makes the JPG's white canvas and
   white center vanish into the backdrop (white × white = white) while the
   ink/red/gold/green ring itself paints normally — no visible square edge,
   no separate cutout asset needed.

   Stacking: #already gets position:relative + overflow:hidden (the
   30–50%-cropped bleed happens here); .already-ornaments is an absolutely
   positioned, zero-height decorative layer at z-index:0, pointer-events:
   none, so it can never intercept clicks or get announced to a screen
   reader; #already .container is explicitly promoted to z-index:1 so
   every existing heading/paragraph/card keeps painting above it. */
#already{position:relative;overflow:hidden}
#already .container{position:relative;z-index:1}

.already-ornaments{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}

.already-ring{
  position:absolute;
  overflow:hidden;
  border-radius:50%;
  /* Soft edge-fade toward the section's centerline, so the ring stays
     strongest near the far edge it's entering from and softens before it
     could ever compete with the headline or card text. Applied to this
     non-rotating wrapper (not the spinning <img>) so the fade direction
     stays fixed to the viewport instead of sweeping around as it spins. */
  -webkit-mask-image:linear-gradient(var(--ring-fade-dir),#000 0%,#000 58%,transparent 90%);
  mask-image:linear-gradient(var(--ring-fade-dir),#000 0%,#000 58%,transparent 90%);
}
.already-ring img{
  display:block;
  width:100%;
  height:100%;
  mix-blend-mode:multiply;
  animation:already-ring-spin var(--ring-duration,120s) linear infinite;
  animation-direction:var(--ring-direction,normal);
}
@keyframes already-ring-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.already-ring--large{
  --ring-fade-dir:to right;
  --ring-duration:120s;
  width:950px;height:950px;
  left:-500px;top:120px;
  opacity:.15;
}
.already-ring--small{
  --ring-fade-dir:to left;
  --ring-duration:150s;
  --ring-direction:reverse;
  width:620px;height:620px;
  right:-330px;top:480px;
  opacity:.12;
}

@media(max-width:1439px){
  .already-ring--large{width:820px;height:820px;left:-420px;top:100px}
  .already-ring--small{width:540px;height:540px;right:-280px;top:440px}
}
@media(max-width:1199px){
  .already-ring--large{width:680px;height:680px;left:-350px;top:70px}
  .already-ring--small{width:440px;height:440px;right:-225px;top:400px}
}
@media(max-width:980px){
  .already-ring--large{width:520px;height:520px;left:-260px;top:40px;opacity:.12}
  .already-ring--small{width:340px;height:340px;right:-175px;top:520px;opacity:.1}
}
@media(max-width:767px){
  /* A deliberate mobile composition rather than a scaled-down desktop one:
     one ring enters softly from the upper-right behind the eyebrow/heading
     only, well clear of the card grid; the second is dropped rather than
     competing for the same narrow column — two overlapping rings read as
     clutter at this width, and mobile readability wins. */
  .already-ring--large{width:340px;height:340px;left:auto;right:-140px;top:-40px;opacity:.1}
  .already-ring--small{display:none}
}

@media(prefers-reduced-motion:reduce){
  .already-ring img{animation:none}
}

/* ------------------------------------------------------- 16. GOVERNANCE */
.gov{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(201,165,92,.22);border:1px solid rgba(201,165,92,.28);border-radius:4px;overflow:hidden}
.gov-cell{background:rgba(10,20,37,.8);padding:30px 28px}
.gov-cell h3{font-family:var(--display);font-size:1.25rem;font-weight:500;color:var(--gold-light);margin-bottom:8px;line-height:1.25}
.gov-cell p{font-size:13px;line-height:1.8;color:rgba(232,224,213,.85)}
@media(max-width:980px){.gov{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.gov{grid-template-columns:1fr}}

/* ------------------------------------------------------- 17. DR. AKOURY */
.bio-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.bio-media{position:relative}
.bio-media .plate{aspect-ratio:4/5}
/* The generic .plate img rule (§16) has no object-position, so it defaults
   to center/center — fine for the previous portrait's ~4:5 native crop,
   but the new one (Dr_Dalal_Akoury_Egypt_Vision.jpg, natively 941x1672,
   a much taller/narrower crop) centered on this box put the eyes/face
   almost entirely out of frame, worst on the 3:2 mobile ratio below.
   Biasing toward the top keeps the face in frame at both ratios. */
.bio-media .plate img{object-position:center 8%}
.bio-media::after{content:'';position:absolute;inset:auto -16px -16px auto;width:58%;height:58%;border:1px solid var(--gold);border-radius:4px;z-index:-1}
.bio-facts{margin-top:32px;display:grid;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.bio-facts li{background:var(--white);padding:15px 22px 15px 42px;font-size:13.5px;line-height:1.7;color:var(--text);position:relative}
.bio-facts li::before{content:'';position:absolute;left:22px;top:23px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.bio-facts li b{color:var(--ink);font-weight:600}
.pquote{margin-top:44px;border-top:1px solid var(--border);padding-top:36px}
.pquote blockquote{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.4rem,2.5vw,2rem);line-height:1.42;color:var(--navy);max-width:32ch;margin-bottom:20px}
.pquote .attr{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-ink);font-weight:600}
.pquote .attr small{display:block;letter-spacing:.04em;text-transform:none;font-size:13px;color:var(--text);margin-top:8px;font-weight:300}
@media(max-width:880px){
  .bio-grid{grid-template-columns:1fr;gap:36px}
  .bio-media .plate{aspect-ratio:3/2}
  .bio-media .plate img{object-position:center top}
  .bio-media::after{display:none}
}

/* --------------------------------------------------- 18. CONCEPT PAPER */
.paper-mod{margin-top:clamp(48px,6vw,72px);border:1px solid rgba(201,165,92,.34);background:linear-gradient(135deg,rgba(201,165,92,.12),transparent 62%);padding:clamp(34px,4.5vw,52px);border-radius:4px;display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,52px);align-items:center;text-align:left}
.paper-mod .pk{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-light);margin-bottom:14px}
.paper-mod h3{font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--white);margin-bottom:12px;max-width:22ch;line-height:1.2}
.paper-mod p{font-size:13.5px;line-height:1.85;color:rgba(232,224,213,.85);max-width:56ch}
.paper-mod .pend{margin-top:16px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);display:inline-flex;align-items:center;gap:9px}
.paper-mod .pend::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0}
.paper-mod .fine{font-size:11.5px;line-height:1.7;color:rgba(232,224,213,.72);margin-top:14px;max-width:36ch}
.paper-mod code{font-size:11px;background:rgba(0,0,0,.3);padding:2px 5px;border-radius:2px;color:var(--gold-pale);word-break:break-all}
@media(max-width:880px){.paper-mod{grid-template-columns:1fr}}

/* ------------------------------------------------------- 19. INVITATION */
.invite-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;justify-content:center}
@media(max-width:640px){.invite-cta .btn{width:100%}}

/* ------------------------------------------------------------ 20. FORM */
.form-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:60px;align-items:start}
.form-aside h2.sh{font-size:clamp(1.8rem,3.2vw,2.6rem)}
.form-aside p{font-size:14px;line-height:1.9;color:rgba(232,224,213,.88);margin-bottom:18px}
.contact-lines{margin-top:30px;padding-top:26px;border-top:1px solid rgba(201,165,92,.26);display:grid;gap:15px}
.contact-lines div{font-size:13.5px;line-height:1.7;color:rgba(232,224,213,.88)}
.contact-lines .cl{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-light);margin-bottom:4px}
.contact-lines a{color:var(--gold-pale);border-bottom:1px solid rgba(201,165,92,.45)}
.contact-lines a:hover{color:var(--white)}

.form-card{background:rgba(255,255,255,.04);border:1px solid rgba(201,165,92,.3);padding:clamp(26px,3.4vw,44px);border-radius:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{margin-bottom:22px}
.field label{display:block;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-light);margin-bottom:9px}
.field label .req{color:var(--gold);margin-left:3px}
.field input,.field select,.field textarea{
  width:100%;background:rgba(10,20,37,.55);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius-btn);padding:13px 15px;font-size:14px;font-weight:300;
  color:var(--white);font-family:var(--body);min-height:48px;
  transition:border-color .25s,background .25s;
}
.field textarea{min-height:112px;resize:vertical;line-height:1.7}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23c9a55c' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 17px center}
.field select option{background:var(--navy-deep);color:var(--white)}
.field input::placeholder,.field textarea::placeholder{color:rgba(232,224,213,.55)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(201,165,92,.55)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold);background:rgba(10,20,37,.78)}
.field .hint{font-size:11.5px;color:rgba(232,224,213,.75);margin-top:7px;line-height:1.6}
.field .err{display:none;font-size:12px;color:#f5c4ae;margin-top:8px;line-height:1.5;align-items:center;gap:7px}
.field.invalid .err{display:flex}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#d98a6a}

.consent{display:flex;gap:13px;align-items:flex-start;margin:8px 0 24px}
.consent input[type="checkbox"]{width:24px;height:24px;min-height:0;flex-shrink:0;margin-top:1px;accent-color:var(--gold);cursor:pointer}
.consent label{font-size:12.5px;line-height:1.75;color:rgba(232,224,213,.88);letter-spacing:0;text-transform:none;font-weight:300;margin:0;cursor:pointer}
.consent label a{color:var(--gold-pale);border-bottom:1px solid rgba(201,165,92,.45)}
.form-status{display:none;padding:16px 20px;border-radius:var(--radius-btn);font-size:13.5px;line-height:1.65;margin-bottom:22px}
.form-status.show{display:block}
.form-status.error{background:rgba(217,138,106,.16);border:1px solid rgba(217,138,106,.5);color:#f5cdb9}
.form-success{display:none;text-align:center;padding:clamp(32px,5vw,56px) clamp(18px,3vw,34px)}
.form-success.show{display:block}
.form-success .sicon{width:56px;height:56px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;margin:0 auto 24px}
.form-success h3{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:400;color:var(--white);margin-bottom:16px}
.form-success p{font-size:14px;line-height:1.85;color:rgba(232,224,213,.88);max-width:44ch;margin:0 auto 10px}
.form-card.sent .form-body{display:none}
.form-fine{font-size:11.5px;line-height:1.7;color:rgba(232,224,213,.75);margin-top:16px}
.noscript-note{border:1px solid rgba(201,165,92,.42);background:rgba(201,165,92,.1);padding:18px 22px;font-size:13.5px;line-height:1.7;color:rgba(232,224,213,.92);margin-bottom:24px;border-radius:var(--radius-btn)}
@media(max-width:920px){.form-grid{grid-template-columns:1fr;gap:44px}}
@media(max-width:640px){.form-row{grid-template-columns:1fr;gap:0}}

/* --------------------------------------------- 21. PROPOSAL LEGAL BLOCK */
.proposal-legal{border-top:1px solid rgba(201,165,92,.16);margin-top:30px;padding-top:26px}
.proposal-legal p{font-size:11.5px;line-height:1.9;color:rgba(232,224,213,.68);margin-bottom:12px;max-width:none;text-align:left}
.proposal-legal p strong{color:rgba(232,224,213,.9);font-weight:600}
.foot-private{display:inline-block;margin-top:14px;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-light);border:1px solid rgba(201,165,92,.38);padding:7px 15px;border-radius:999px}

/* ------------------------------------------------- 22. RECIPIENT PATHWAY */
.pathway-note{display:none}
.pathway-note.on{display:block}
.pathway-benefits{max-width:860px;margin:40px auto 0;text-align:left}

/* ----------------------------------------------------------- 23. PRINT */
@media print{
  html{scroll-behavior:auto}
  body{background:#fff;color:#111;font-size:10.5pt;line-height:1.55}
  .ftc,.langbar,.nav,.mnav,.subnav,.proposal-bar,.burger,.form-card,
  .invite-cta,.hero-cta,.paper-mod .btn,.stake-tabs,.skip{display:none!important}
  .hero,.bg-navy,.quoteband,.footer,.eco-core,.pillar,.gov-cell,
  .stake-list li,.form-aside{background:#fff!important;color:#111!important}
  .hero-bg{display:none}
  .hero{min-height:0;padding:0 0 20pt}
  .hero h1,.hero-lead,.hero-attr .who,h2.sh,h3.sh3,.pillar h3,.gov-cell h3,
  .stake-grid h3,.eco-core h3,.paper-mod h3,.quoteband blockquote{color:#111!important}
  .pillar p,.gov-cell p,.stake-list li,.eco-node p,.body-p,.lead-p,
  .paper-mod p,.footer p,.proposal-legal p{color:#333!important}
  .section-label,.hero-eyebrow,.quoteband .qk,.pquote .attr{color:#7a5f2c!important}
  section.block{padding:18pt 0;break-inside:avoid}
  .plate{display:none}
  .stake-panel[hidden]{display:block!important}
  .assetgrid,.pillars,.gov,.objectives,.eco-grid,.stake-list{border-color:#ccc!important;background:#ccc!important}
  .asset-card,.pillar,.gov-cell,.objective,.eco-node{background:#fff!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#666}
  a[href^="#"]::after{content:""}
  .reveal{opacity:1!important;transform:none!important}
}

/* ==========================================================================
   §  EGYPT GLOBAL HEALTH & HUMAN POTENTIAL INITIATIVE — NEW COMPONENTS
   --------------------------------------------------------------------------
   Everything ABOVE this line is the stylesheet already serving
   /egypt-vision/, reproduced unchanged so the new page inherits the site's
   exact typography, palette, spacing, buttons, cards, nav, subnav, hero and
   footer treatment.

   Everything BELOW is only what the new sections genuinely require. Nothing
   here overrides a base rule except where explicitly noted.
   ========================================================================== */


/* ── FIX carried over from the live page: the base reset only clears markers
      on `ul`, so every `ol`-based grid (the card grids, the platform list, the
      objectives, the journey track) rendered browser list numbers alongside its
      own designed numerals. ─────────────────────────────────────────────── */
ol{list-style:none}

/* ── Second fix carried over: the base rule is `img{max-width:100%}` with no
      `height:auto`, so any <img> carrying width/height attributes keeps its
      full attribute height while the width is constrained — a 1122x1402
      portrait rendered 322px wide and 1402px tall. Restoring height:auto
      lets width/height attributes do their real job (reserving layout space
      to prevent shift) without distorting anything. ─────────────────── */
img{height:auto}


/* ── HERO BACKGROUND — contemporary Egypt.
      The base stylesheet points .hero-bg at the carved-block photograph used by
      /egypt-vision/. This page leads with a modern Cairo skyline instead, with
      the Sphinx Gate intro still playing over it: heritage opening onto the
      present. Swap the URL below to change the hero image. ──────────────── */
.hero-bg{background-image:url("/images/cairoskyline-About-dr.akoury.jpg")}


/* ── Language switcher: the site bar's buttons become real links to the four
      language URLs. Visual treatment is copied verbatim from .langsw button so
      the bar is pixel-identical to every other page on the site. ─────────── */
.langsw-btn{
  display:inline-block;font-family:var(--body);font-size:var(--fs-caption);font-weight:700;
  letter-spacing:.06em;padding:4px 11px;border-radius:2px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.7);background:transparent;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
  line-height:1.5
}
.langsw-btn:hover{color:#fff;border-color:rgba(201,165,92,.6)}
.langsw-btn.on{background:var(--gold);border-color:var(--gold);color:var(--lapis-deep)}
.langsw-btn:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}


/* ── Form honeypot. Clipped, not pushed off-screen: a `left:-9999px` offset
      is direction-dependent and blows out horizontal scroll on the RTL page. ─ */
.hp-trap{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Same problem, same fix, for the site's skip link on the RTL page. */
html[dir="rtl"] .skip{left:auto;right:-9999px}
html[dir="rtl"] .skip:focus{right:16px;left:auto}


/* ── Hero: a two-button call to action between the lead and the attribution ─ */
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:0 auto 40px}
@media(max-width:560px){.hero-cta{flex-direction:column;align-items:stretch}.hero-cta .btn{width:100%}}
html.sg-js .hero-cta{opacity:0;transform:translateY(16px)}
html.sg-js .hero-cta.sg-in{opacity:1;transform:none;transition:opacity .9s var(--sg-out),transform .9s var(--sg-out)}
@media(prefers-reduced-motion:reduce){html.sg-js .hero-cta{transition-duration:.2s}}


/* ── Source attribution inside a card, and inline source references ──────── */
.src-line{margin-top:14px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);font-weight:600}
.bio-facts li a,.evi-src a{color:var(--gold-ink);font-weight:600;font-size:11px;
  letter-spacing:.08em;border-bottom:1px solid rgba(201,165,92,.45);white-space:nowrap}
.bio-facts li a:hover,.evi-src a:hover{color:var(--navy);border-bottom-color:var(--navy)}


/* ── Evidence cells: published national figures, each carrying its source ── */
.evi-h{text-align:center;margin-top:56px}
.evi{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:4px;overflow:hidden;margin-top:28px}
.evi > *{min-width:0}
.evi-cell{background:var(--white);padding:34px 26px 30px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;transition:background .3s}
.evi-cell:hover{background:var(--cream-soft)}
.evi-num{font-family:var(--display);font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:300;
  color:var(--gold-ink);line-height:1.1}
.evi-lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
  line-height:1.75;font-weight:600;max-width:22ch}
.evi-src{margin-top:auto;padding-top:12px;font-size:11.5px;line-height:1.7;color:var(--text);
  border-top:1px solid var(--border);width:100%}
.evi-foot{margin-top:22px;font-size:12.5px;line-height:1.85;color:var(--text);
  max-width:88ch;margin-inline:auto;text-align:center}
@media(max-width:880px){.evi{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.evi{grid-template-columns:1fr}}


/* ── Full-width editorial figure (16:9 photograph + caption) ─────────────── */
.band-fig{margin:56px 0 0}
.band-fig .plate{aspect-ratio:16/9;border:0;border-radius:4px;box-shadow:var(--shadow-md)}
.band-fig figcaption{text-align:center;max-width:70ch;margin-inline:auto}
.bg-navy .band-fig figcaption{color:rgba(232,224,213,.85)}
@media(max-width:640px){.band-fig .plate{aspect-ratio:4/3}}


/* ── Platform layer chips + note (inside the existing .stake tab component) ─ */
.layer-chip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;padding:7px 14px;border-radius:999px;margin-bottom:18px;line-height:1.6}
.chip-integrate{background:rgba(30,122,90,.18);border:1px solid rgba(88,196,155,.55);color:#7fd8b4}
.chip-new{background:rgba(201,165,92,.16);border:1px solid rgba(201,165,92,.55);color:var(--gold-pale)}
.chip-later{background:rgba(232,224,213,.08);border:1px solid rgba(232,224,213,.32);color:rgba(232,224,213,.85)}
.layer-note{font-size:13px;line-height:1.85;color:rgba(232,224,213,.78);margin-top:16px;max-width:44ch}
.notice-dark{border-color:rgba(201,165,92,.34);background:rgba(201,165,92,.09)}
.notice-dark .nk{color:var(--gold-light)}
.notice-dark p{color:rgba(232,224,213,.88)}
.notice-dark p strong{color:#fff}


/* ── Challenge · Pilot response · Measurement ────────────────────────────── */
.cr{margin-top:52px;border:1px solid var(--border);border-radius:4px;overflow:hidden;
  background:var(--border);display:grid;gap:1px}
.cr-row{display:grid;grid-template-columns:.9fr 1.1fr 1fr;gap:1px;background:var(--border)}
.cr-row > *{min-width:0;background:var(--white);padding:28px 30px}
.cr-row .cr-c{background:var(--cream-soft)}
.cr-k{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--gold-ink);margin-bottom:11px}
.cr-c h3{font-family:var(--display);font-size:1.25rem;font-weight:500;color:var(--navy);
  line-height:1.28}
.cr-r p,.cr-m p{font-size:13px;line-height:1.8;color:var(--text)}
.cr-m{background:var(--white)}
.cr-m p{color:var(--ink)}
@media(max-width:980px){.cr-row{grid-template-columns:1fr}}


/* ── Day-90 decision: three outcomes ─────────────────────────────────────── */
.dec{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:4px;overflow:hidden;margin-top:44px}
.dec > *{min-width:0}
.dec-cell{background:var(--white);padding:34px 30px;border-top:3px solid transparent}
.dec-k{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--text-muted);margin-bottom:12px}
.dec-cell h4{font-family:var(--display);font-size:1.6rem;font-weight:500;color:var(--navy);
  margin-bottom:10px;line-height:1.2}
.dec-cell p{font-size:13px;line-height:1.8;color:var(--text)}
.dec-stop{border-top-color:#8c3a3a}
.dec-stop h4{color:#8c3a3a}
.dec-refine{border-top-color:var(--gold-ink)}
.dec-refine h4{color:var(--gold-ink)}
.dec-pilot{border-top-color:#1e7a5a}
.dec-pilot h4{color:#1a6b4f}
@media(max-width:880px){.dec{grid-template-columns:1fr}}


/* ── Sources ─────────────────────────────────────────────────────────────── */
.srcs{margin-top:48px;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.srcs > *{min-width:0}
.srcs li{background:var(--white);padding:24px 28px;display:flex;gap:18px;align-items:flex-start}
.srcs .sn{font-family:var(--display);font-style:italic;color:var(--gold-ink);font-size:1.05rem;
  flex-shrink:0;width:28px;padding-top:2px}
.srcs a{font-size:13.5px;line-height:1.7;color:var(--navy);display:block;
  border-bottom:1px solid rgba(201,165,92,.4)}
.srcs a:hover{color:var(--gold-ink)}
.srcs .sp{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-muted)}
.srcs li:target{background:var(--cream)}
@media(max-width:760px){.srcs{grid-template-columns:1fr}}


/* ── Seven value pillars: let the seventh fill the row on wide screens ───── */
@media(min-width:981px){.pillars .pillar:nth-child(7){grid-column:1 / -1}}


/* ==========================================================================
   §  RIGHT-TO-LEFT (Arabic)
   --------------------------------------------------------------------------
   The base stylesheet is written with physical properties. Rather than
   rewrite 900 lines, the handful of rules whose direction actually matters
   are mirrored here. Everything else is already direction-agnostic (grid,
   flex, centred text, logical `margin-inline`).
   ========================================================================== */
html[dir="rtl"]{--body:'Cairo','Montserrat',system-ui,sans-serif;
  --display:'Amiri','Cormorant Garamond',Georgia,serif}
html[dir="rtl"] body{letter-spacing:0}
html[dir="rtl"] .section-label,html[dir="rtl"] .hero-eyebrow,html[dir="rtl"] .stat-label,
html[dir="rtl"] .cr-k,html[dir="rtl"] .dec-k,html[dir="rtl"] .layer-chip,
html[dir="rtl"] .evi-lab,html[dir="rtl"] .src-line,html[dir="rtl"] .srcs .sp,
html[dir="rtl"] .pillar-spine,html[dir="rtl"] .subnav-links a,html[dir="rtl"] .subnav-cta,
html[dir="rtl"] .stake-tab,html[dir="rtl"] .btn,html[dir="rtl"] .notice .nk,
html[dir="rtl"] .hero-attr .pres,html[dir="rtl"] .hero-attr .role,
html[dir="rtl"] .footer h5,html[dir="rtl"] .contact-lines .cl,
html[dir="rtl"] .field label,html[dir="rtl"] .pquote .attr{letter-spacing:.04em}

/* Directional arrows in buttons */
html[dir="rtl"] .btn .ar{transform:scaleX(-1)}
html[dir="rtl"] .btn:hover .ar{transform:scaleX(-1) translateX(3px)}

/* Rules, gutters and decorative frames that read left-to-right by default */
html[dir="rtl"] .notice{border-left:1px solid var(--border);border-right:2px solid var(--gold)}
html[dir="rtl"] .hero-attr{text-align:right}
html[dir="rtl"] .split.rev .split-media{order:0}
html[dir="rtl"] .bio-media::after,html[dir="rtl"] .split-media::after{inset:auto auto -16px -16px}
html[dir="rtl"] .stat{border-right:0;border-left:1px solid rgba(201,165,92,.14)}
html[dir="rtl"] .stat:last-child{border-left:0}
html[dir="rtl"] .subnav-links{mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent);
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 26px),transparent)}
html[dir="rtl"] .flow-track::before{background:linear-gradient(270deg,transparent,var(--gold) 8%,var(--gold) 92%,transparent)}
html[dir="rtl"] .bio-facts li::before{left:auto;right:0}
html[dir="rtl"] .bio-facts li{padding-left:0;padding-right:22px}
html[dir="rtl"] .consent input[type="checkbox"]{margin-right:0;margin-left:12px}
html[dir="rtl"] .stake-tab{margin-bottom:-1px}

/* Latin fragments inside Arabic text keep their own direction */
html[dir="rtl"] .langsw-btn,html[dir="rtl"] .srcs a,html[dir="rtl"] .contact-lines a,
html[dir="rtl"] input[type="tel"],html[dir="rtl"] input[type="email"]{direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .srcs a,html[dir="rtl"] .contact-lines a{text-align:right}

/* Arabic display type needs a little more line-height to breathe */
html[dir="rtl"] h2.sh{line-height:1.4}
html[dir="rtl"] h3.sh3,html[dir="rtl"] .eco-core h3,html[dir="rtl"] .dec-cell h4,
html[dir="rtl"] .cr-c h3{line-height:1.5}
html[dir="rtl"] .hero h1{line-height:1.35}
html[dir="rtl"] .quoteband blockquote,html[dir="rtl"] .pquote blockquote,
html[dir="rtl"] .opp-pullquote{line-height:1.7}


html[dir="rtl"] .conv-media::after{inset:auto auto -14px -14px}
html[dir="rtl"] .evi-def{border-left:1px solid var(--border);border-right:2px solid var(--gold)}
html[dir="rtl"] .door > a{border-top:2px solid var(--gold)}
html[dir="rtl"] .door-k,html[dir="rtl"] .door-go{letter-spacing:.04em}


/* ==========================================================================
   §  PRINT — the page must be readable as a handed-over document
   ========================================================================== */
@media print{
  .subnav,.langbar,.nav,.mnav,.hero-cta,.sphinx-gate,.quoteband-video-el{display:none!important}
  .stake-panel[hidden]{display:block!important}
  .cr-row{grid-template-columns:1fr;break-inside:avoid}
  .dec-cell,.evi-cell,.srcs li,.asset-card,.eco-node{break-inside:avoid}
}


/* ── REVISION C ─────────────────────────────────────────────────────────────
   Three additions: the "which door is yours" wayfinder under the hero, the
   short convener bridge high on the page, and a definition line under the
   evidence figures. Plus a tighter section rhythm for both new bands so they
   read as connective tissue rather than as full chapters.
   ────────────────────────────────────────────────────────────────────────── */

/* Retire the alarm-red statistic treatment inherited from the previous page.
   Nothing on this page uses .stats / .stat-flag, and red reads as warning or
   failure — wrong register for a navy-and-gold diplomatic document. Figures
   here are distinguished by typography and by their source line, never by
   colour. These rules are neutralised rather than deleted so that any stray
   markup carrying the old classes still renders in the brand palette. */
.stat-flag .stat-num,.opp-story.stat-flag .stat-num,
.opp-story.stat-flag .sh3{color:var(--gold)}
.stat-flag .stat-label{color:var(--text-muted)}

section.block.block-tight{padding:88px 0}
h2.sh.sh-sm{font-size:clamp(1.75rem,3.2vw,2.5rem)}

/* Three doors */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
.doors > *{min-width:0}
.door{display:flex}
.door > a{display:flex;flex-direction:column;gap:10px;width:100%;background:var(--white);
  border:1px solid var(--border);border-top:2px solid var(--gold);border-radius:4px;
  padding:32px 30px 28px;box-shadow:0 12px 38px rgba(7,25,50,.05);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .door > a:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gold)}
  .door > a:hover .door-go{color:var(--navy)}
}
.door-k{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--gold-ink)}
.door h3{font-family:var(--display);font-size:1.35rem;font-weight:500;color:var(--navy);line-height:1.3}
.door p{font-size:13px;line-height:1.8;color:var(--text);flex-grow:1}
.door-go{margin-top:8px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--gold-ink);transition:color .3s var(--ease)}
@media(max-width:900px){.doors{grid-template-columns:1fr}}

/* Convener bridge */
.conv{display:grid;grid-template-columns:.42fr 1fr;gap:56px;align-items:center}
.conv > *{min-width:0}
.conv-media{position:relative}
.conv-media img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 20%;
  border-radius:4px;display:block;box-shadow:var(--shadow-md)}
.conv-media::after{content:'';position:absolute;inset:auto -14px -14px auto;width:56%;height:56%;
  border:1px solid var(--gold);border-radius:4px;z-index:-1}
.conv .btn{margin-top:10px}
/* .btn is nowrap by design; this label is a sentence, so let it wrap on
   narrow screens rather than force horizontal scroll. */
.conv .btn,.door > a{white-space:normal;max-width:100%}
/* The base .btn is white-space:nowrap, which is right for short English
   labels but forces horizontal scroll once a label is translated —
   Spanish and French run 30-50% longer. Let buttons wrap on narrow
   screens, and let full-width buttons wrap at any size. */
.btn-block{white-space:normal}
@media(max-width:760px){.btn{white-space:normal;max-width:100%}}
@media(max-width:560px){.conv .btn{width:100%}}
@media(max-width:860px){
  .conv{grid-template-columns:1fr;gap:34px}
  .conv-media{max-width:300px}
  .conv-media::after{display:none}
}

/* Figure definition */
.evi-def{margin-top:18px;padding:18px 22px;border:1px solid var(--border);
  border-left:2px solid var(--gold);border-radius:4px;background:var(--cream-soft);
  font-size:12.5px;line-height:1.85;color:var(--text);max-width:88ch;margin-inline:auto}
.evi-def strong{color:var(--ink);font-weight:600}

/* Assurance line under the closing call to action */
.inv-assurance{margin:20px auto 0;max-width:78ch;font-size:12.5px;line-height:1.9;
  color:rgba(232,224,213,.72)}