/* 29LT Zarid Sans AL — commercial (29Letters), NOT bundled. Kept FIRST in every
   stack so that if a licensed ZaridSans-Regular.woff2 is ever dropped into
   assets/fonts/ it takes over site-wide with no code change. Until then this
   face simply does not resolve and the stack falls through to Readex Pro. */
/* IBM Plex Sans Arabic — SIL OFL 1.1, fsType 0 (embedding permitted).
   Humanist Arabic sans in the Frutiger Arabic register, licensed for web.
   Split by subset so Latin runs (numerals, ASFAR, email) stay in-family. */
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-arabic-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+102E0-102FB,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-latin-300-normal.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+102E0-102FB,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+102E0-102FB,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+102E0-102FB,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FEFF,U+102E0-102FB,U+10E60-10E7E,U+10EFD-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* 29LT Zarid Display — supplied by the client. Commercial 29LT face; a WEB
   licence (separate from desktop) is required before this ships publicly.
   Display cut => headings only. Body text stays on Readex Pro. */
@font-face{font-family:'Zarid Display';
  src:url('../fonts/ZaridDisplay-Regular.woff2') format('woff2');
  /* Measured on canvas: Zarid renders 0.818x the ink height of Readex Pro at the
     same font-size, so the shared type scale would render AR headings ~18% small.
     1/0.818 = 1.222 -> optically matched without touching a single clamp(). */
  size-adjust:122%;
  font-weight:400;font-style:normal;font-display:swap}
/* Readex Pro — the shipped face. Free/SIL OFL 1.1, Arabic + Latin in one family,
   instanced from the variable original at the five weights this site uses, so
   nothing is ever faux-bolded. Carries Arabic-Indic digits too. */
@font-face{font-family:'Readex Pro';src:url('../fonts/ReadexPro-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Readex Pro';src:url('../fonts/ReadexPro-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Readex Pro';src:url('../fonts/ReadexPro-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Readex Pro';src:url('../fonts/ReadexPro-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Readex Pro';src:url('../fonts/ReadexPro-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Greta Arabic';src:url('../fonts/GretaArabic-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Greta Arabic';src:url('../fonts/GretaArabic-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'GE SS Two';src:url('../fonts/GESSTwoLight-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'GE SS Two';src:url('../fonts/GESSTwoMedium-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
/* DM Sans (guideline English font) — bundled locally so it loads without Google Fonts */
@font-face{font-family:'DM Sans';src:url('../fonts/DMSans-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/DMSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/DMSans-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/DMSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

/* =====================================================================
   ASFAR — Saudi Tourism Investment Company
   "The Quiet Atlas" — clean white canvas, brand colour as restrained accent.
   Display/Body: DM Sans · Arabic: IBM Plex Sans Arabic · Canvas: #FCFCFA
   ===================================================================== */

:root{
  /* — surface & ink — */
  --canvas:#FBF8EE;              /* official brand cream (guideline p20) */
  --canvas-2:#F4EEDE;          /* whisper-warm panel for subtle alternation */
  --canvas-3:#EDE4CE;          /* one step down the same ramp — the ground behind a
     press release. A second step (#E6DABE) was tried and reverted: too dark.
     Body ink measures 13.75:1 on this, ink-soft 7.00:1. */
  --ink:#1A1A1A;
  --ink-soft:#4A4A4A;
  --ink-faint:#8A8A86;

  /* — brand accents (used as glints, never as fills) — */
  --teal:#27595F;                 /* primary voice — type, hairlines, marks.
     WAS var(--teal) — a self-reference, therefore invalid; value recovered
     from --teal-soft rgba(39,89,95,.16). */
  --teal-soft:rgba(39,89,95,.16);
  --petrol:#144750;            /* the two dark grounds only */
  --petrol-2:#10393F;
  --terra:#A9603E;             /* micro-accent */
  --gold:#A5814A;              /* hairline / foil glint */
  --gold-soft:#C2A06A;

  /* — type — */
  /* English → DM Sans (guideline English font, humanist sans; the real Greta
     Arabic AR+LT Latin is sans but isn't in the kit — the bundled Greta's Latin
     is a serif cut, so it must NOT carry Latin). Arabic glyphs fall through to
     Greta Arabic (its Arabic IS the correct brand sans). Per-glyph fallback. */
  --display:'Readex Pro','DM Sans','Greta Arabic','Helvetica Neue',Arial,sans-serif;
  --sans:'Readex Pro','DM Sans','GE SS Two','Helvetica Neue',Arial,sans-serif;

  --hero-veil:.37;   /* flat dark wash over the hero — raise for more contrast.
     Derived empirically: measured slope is -61.3 luminance per 1.0 alpha over
     the real gradient stack, so +.05 alpha = ~5% darker. */
  --shell:clamp(1200px, 98vw, 1840px);
  --pad:clamp(1.4rem,3.6vw,6rem);
  --sec:clamp(2.5rem,5.5vh,4.5rem);   /* section vertical rhythm — tightened */
  /* — TYPE SCALE — every size on the site should come from this list.
     Values are the expressions that were already in use, so adopting the scale
     changes nothing visually; it only stops two elements accidentally landing
     on the same size (the stat figure once hit 35.8px beside a 37.1px heading). */
  --fs-hero:clamp(1.8rem,3.9vw,5rem);
  --fs-h2:clamp(1.3rem,2.4vw,2.5rem);
  --fs-h3:clamp(1.02rem,calc(.75vw + .8rem),1.25rem);  /* calc() required: the bare
     `.75vw+.8rem` parses inline but becomes INVALID once substituted via var() */
  --fs-lead:clamp(1rem,1.2vw,1.5rem);
  --fs-fig:clamp(1.5rem,1.95vw,2.3rem);
  --fs-body:1rem;
  --fs-sm:.9rem;
  --fs-xs:.75rem;
  --fs-micro:clamp(.72rem,.9vw,.88rem);

  /* — map/dark-ground steps, previously hard-coded hexes — */
  --petrol-hi:#4A7479;    /* region hover + focus */
  --petrol-mid:#38666C;   /* blink peak, portfolio-wide state */
  --ink-deep:#0b1512;     /* the morph banner ground */

  /* — CORNER RADII — one scale. The sheet previously carried 1/2/3/4/6/14/16/20px
     for what is really three jobs, so surfaces disagreed with each other. — */
  --r-hair:1px;        /* focus rings, hairline rules */
  --r-btn:2px;         /* buttons, small chips */
  --r-surface:4px;     /* every card, panel, media box, input, form */
  --r-pill:999px;      /* pills / lozenges */

  /* — VERTICAL RHYTHM — every section is a multiple of --sec, not its own value.
     The multiples stay because they are deliberate, but they are now derived. — */
  --sec-tight:calc(var(--sec) * .84);   /* the map block, deliberately denser */
  --sec-loose:calc(var(--sec) * 1.8);   /* the sectors triptych */
  --sec-xl:calc(var(--sec) * 0.7);      /* the partners band */

  /* — RELATIVE TYPE STEPS — components sized off these instead of ad-hoc
     .72/.74/.8/.9/.92/.94/.95/.98/1.05/1.06/1.1/1.15em. — */
  --t-xs:.74em; --t-sm:.86em; --t-ms:.93em;
  --t-base:1em; --t-md:1.06em; --t-lg:1.13em;
  --t-sup:.5em;        /* the superscript unit beside a figure */

  --ease:cubic-bezier(.22,1,.36,1); /* expo-out — the one curve */
  --ease-2:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  font-family:var(--sans);
  background:var(--canvas);
  color:var(--ink-soft);
  /* floor matches Arabic's 16px (app-rtl.css) so a rem->em swap is byte-identical
     in both locales on phones; ceiling was hit at 2687px, freezing extra-wide. */
  font-size:clamp(16px,calc(9.94px + .393vw),22px);
  line-height:1.72;
  font-weight:400;   /* DM Sans regular */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
em{font-style:italic}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:var(--r-hair)}
.sectors :focus-visible,.footer :focus-visible{outline-color:var(--gold-soft)}

.wrap{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad);width:100%}
.section{padding-block:var(--sec)}

/* ── scroll progress bar ── */
.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:1200;
  background:linear-gradient(90deg,var(--teal),var(--gold));pointer-events:none;transition:width .12s linear}

/* ── shared type ── */
.eyebrow{display:inline-flex;align-items:center;gap:.9rem;
  font-family:var(--sans);font-size:.6875rem;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--teal);margin-bottom:1.7rem;line-height:1}
.eyebrow__no{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}
.eyebrow--light .eyebrow__no,.eyebrow--gold .eyebrow__no{color:var(--gold-soft)}
.eyebrow__rule{display:block;width:1.6rem;height:1px;background:var(--gold);flex:none;
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .1s}
.is-in .eyebrow__rule,.eyebrow.is-in .eyebrow__rule{transform:scaleX(1)}
.eyebrow--light{color:rgba(255,255,255,.92)}
.eyebrow--light .eyebrow__rule{background:var(--gold-soft)}
.eyebrow--gold{color:var(--gold-soft)}
.eyebrow--gold .eyebrow__rule{background:var(--gold-soft)}

.statement{
  font-family:var(--display);font-weight:500;
  font-size:var(--fs-h2);line-height:1.18;letter-spacing:-.005em;
  color:var(--ink);
}
.statement em{font-style:italic;color:var(--teal)}
.statement--light{color:#fff}
.statement--light em{color:var(--gold-soft)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--sans);font-size:.8125rem;font-weight:500;letter-spacing:.02em;
  border:0;background:transparent;cursor:pointer;
  padding:1.02rem 1.9rem;border-radius:var(--r-btn);position:relative;isolation:isolate;
  transition:color .45s var(--ease),background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease)}
.btn--solid{background:var(--teal);color:#fff}
.btn--solid::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--petrol);
  transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease);border-radius:var(--r-btn)}
.btn--solid:hover{transform:translateY(-2px)}
.btn--solid:hover::after{transform:scaleX(1);transform-origin:left}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--teal-soft)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--teal);color:var(--teal)}
.btn--lg{padding:1.2rem 2.5rem;font-size:.875rem}
.btn--text{position:relative;padding:1.02rem 0;font-weight:500;color:var(--ink)}
.btn--text::after{content:"";position:absolute;left:0;bottom:.7rem;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.btn--text:hover::after{transform:scaleX(1);transform-origin:left}
.btn--text-light{color:#fff}
/* light outline pill for dark grounds (hero) */
.btn--line-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.btn--line-light:hover{box-shadow:inset 0 0 0 1px #fff;background:rgba(255,255,255,.12);transform:translateY(-2px)}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{position:fixed;top:0;left:0;width:100%;z-index:1000;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),backdrop-filter .5s var(--ease)}
/* The nav carries .wrap for its block padding, but it must NOT sit inside the
   content shell — the logo hugs the viewport edge and the burger the other,
   independent of how narrow the content column is. padding-inline is logical,
   so it mirrors on the Arabic page automatically. */
.nav__in{display:flex;align-items:center;justify-content:space-between;
  max-width:none;padding-inline:clamp(1.4rem,2.6vw,4rem);
  padding-block:clamp(1.1rem,2vw,1.7rem);transition:padding .5s var(--ease)}
.nav__logo{display:block;position:relative;line-height:0}
/* Brand guideline p14 — on-screen logo: minimum 18px / OPTIMUM 56px lockup height.
   At rest (transparent nav over the hero) the logo sits at optimum; the frosted
   scrolled bar carries a slimmer 36px (2x minimum) to stay light. */
.nav__logo-img{height:58px;width:auto;transition:opacity .5s var(--ease),height .5s var(--ease)}
/* .page--inner = a page with no dark hero behind the nav (news/team listings,
   articles). The nav is white by design to sit over the hero and only goes
   solid past 72vh of scroll — on a hero-less page that left it invisible on
   cream. These pages get the solid treatment immediately. */
.nav.is-scrolled .nav__logo-img,.page--inner .nav .nav__logo-img{height:49px}
@media (max-width:820px){.nav__logo-img{height:40px}
  .nav.is-scrolled .nav__logo-img,.page--inner .nav .nav__logo-img{height:34px}}
.nav__logo-img--dark{position:absolute;inset:0;opacity:0}
.nav__links{display:none;gap:clamp(1.3rem,2.4vw,2.6rem)}
.nav__links a{font-size:.8125rem;font-weight:600;letter-spacing:.03em;color:#fff;position:relative;padding:.3rem 0;
  transition:color .4s var(--ease)}
/* lift links/lang for legibility over the light hero (dropped once the bar frosts) */
body:not(.page--inner) .nav:not(.is-scrolled) .nav__links a,
body:not(.page--inner) .nav:not(.is-scrolled) .nav__lang{text-shadow:0 1px 16px rgba(8,18,14,.45)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__side{display:flex;align-items:center;gap:1.4rem}
.nav__lang{display:inline-flex;align-items:center;gap:.55rem;line-height:1;
  font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  padding:.42rem 1rem;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:box-shadow .4s var(--ease),background .4s var(--ease)}
.nav__lang:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.72);background:rgba(255,255,255,.13)}
/* OPTICAL alignment. The three glyphs share an identical line box, so the DOM
   reports them as aligned — but their INK sits at very different heights.
   Measured on canvas with a fixed baseline (60px type): EN's ink centre is
   22px above the baseline, the pipe's 17px, and ع's just 1px — so the Arabic
   read ~4.5px low at the real 13px size. Nudge each so the ink centres meet.
   In em, so it holds if the pill's font-size ever changes. */
.nav__lang-opt{color:rgba(255,255,255,.58);text-decoration:none;transition:color .35s var(--ease)}
.nav__lang-opt[lang="ar"]{transform:translateY(-.18em)}
.nav__lang-opt[lang="en"]{transform:translateY(.18em)}
.nav__lang-opt:hover{color:#fff}
.nav__lang-opt.is-active{color:#fff}
.nav__lang-sep{color:rgba(255,255,255,.34);font-weight:400;transform:translateY(.09em)}
.nav.is-scrolled .nav__lang,.page--inner .nav .nav__lang{color:#fff}
.nav__burger{display:block;width:30px;height:18px;position:relative}
.nav__burger span{position:absolute;left:0;height:1.5px;width:100%;background:#fff;transition:.4s var(--ease)}
.nav__burger span:nth-child(1){top:3px}
.nav__burger span:nth-child(2){bottom:3px}
.nav__burger.is-active span{background:#fff}
.nav__burger.is-active span:nth-child(1){top:8px;transform:rotate(45deg)}
.nav__burger.is-active span:nth-child(2){bottom:8px;transform:rotate(-45deg)}

/* scrolled state — dark frosted bar (keeps the white logo + light links) */
.nav.is-scrolled,.page--inner .nav{background:rgba(16,52,60,.86);backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.06),0 14px 32px -20px rgba(0,0,0,.55)}
.nav.is-scrolled .nav__in,.page--inner .nav .nav__in{padding-block:clamp(1.05rem,1.9vw,1.45rem)}
.nav.is-scrolled .nav__links a,.page--inner .nav .nav__links a{color:#fff}
.nav.is-scrolled .nav__links a:hover,.page--inner .nav .nav__links a:hover{color:var(--gold-soft)}
.nav.is-scrolled .nav__burger span,.page--inner .nav .nav__burger span{background:#fff}

/* full-screen overlay menu — all viewports */
/* dimmed scrim behind the side drawer (click to close) */
.menu__scrim{position:fixed;inset:0;z-index:988;background:rgba(6,14,12,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease),visibility .5s var(--ease)}
.menu__scrim.is-open{opacity:1;visibility:visible;pointer-events:auto}
/* SIDE DRAWER — slides in from the inline-end edge (right in LTR, left in RTL) */
.menu{position:fixed;inset-block:0;inset-inline-end:0;inset-inline-start:auto;
  width:min(430px,92vw);z-index:990;background:var(--petrol);
  transform:translateX(100%);transition:transform .6s var(--ease),box-shadow .6s var(--ease);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(4.5rem,10vh,6rem) 0 clamp(1.6rem,4vh,2.6rem);pointer-events:none;overflow-y:auto}
/* The shadow belongs to the OPEN drawer only. Closed, this panel is still
   painted — it is merely translated off-screen — so a 70px blur offset 26px
   back toward the page threw ~96px of 40% black across the edge of every
   page, at every scroll position, above the content (z-index:990). That was
   the dark band running the height of the site. */
.menu.is-open{transform:none;pointer-events:auto;
  box-shadow:-26px 0 70px rgba(0,0,0,.4)}
.menu__grid{position:relative;display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vh,2.4rem);
  align-items:start;max-width:none;margin-inline:0;width:100%;padding-inline:clamp(1.6rem,5vw,2.6rem)}
.menu__links{display:flex;flex-direction:column;gap:.3rem}
.menu__links a{font-family:var(--display);font-weight:400;letter-spacing:-.02em;
  font-size:clamp(1.35rem,4.5vw,1.9rem);color:#fff;line-height:1.22;
  display:flex;align-items:baseline;gap:1.2rem;padding:.3rem 0;
  transition:color .3s,padding-inline-start .4s var(--ease)}
.menu__links a:hover,.menu__links a.is-active{color:var(--gold-soft)}
.menu__links a:hover{padding-inline-start:.6rem}
/* staggered entrance */
.menu__links a{opacity:0;transform:translateY(16px)}
.menu.is-open .menu__links a{animation:menuIn .65s var(--ease) both}
.menu.is-open .menu__links a:nth-child(1){animation-delay:.14s}
.menu.is-open .menu__links a:nth-child(2){animation-delay:.19s}
.menu.is-open .menu__links a:nth-child(3){animation-delay:.24s}
.menu.is-open .menu__links a:nth-child(4){animation-delay:.29s}
.menu.is-open .menu__links a:nth-child(5){animation-delay:.34s}
.menu.is-open .menu__links a:nth-child(6){animation-delay:.39s}
@keyframes menuIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .menu__links a{opacity:1;transform:none;animation:none!important}
}
@media (max-width:900px){
  .menu__grid{grid-template-columns:1fr;gap:1.8rem;align-items:start}
  .menu__links a{font-size:clamp(1.6rem,7vw,2.3rem)}
}

/* nav over the open menu — dissolve into the petrol overlay */
.nav.is-menu-open{background:transparent;backdrop-filter:none;box-shadow:none}
.nav.is-menu-open .nav__logo-img--dark{opacity:0}
.nav.is-menu-open .nav__logo-img--light{opacity:1}
.nav.is-menu-open .nav__links,.nav.is-menu-open .nav__cta{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
.nav.is-menu-open .nav__lang{color:#fff}
.nav.is-menu-open .nav__burger span{background:#fff}

/* =====================================================================
   HERO
   ===================================================================== */
/* 10% shorter than a full viewport, per client. .hero__pin matches so the
   sticky scene box and the section agree — if only one changed the scenes
   would either letterbox or overshoot the section. */
.hero{position:relative;height:96svh;min-height:576px}
.hero.is-morph{height:160vh}                    /* pinned scrub length. 273 frames over
   (160vh - 100vh) = ~2.2px of scroll per frame at 900vh. Was 340vh originally, then
   200vh; this clears the section in ~53% less scrolling than the original. */
.hero__pin{position:sticky;top:0;height:96svh;min-height:576px;overflow:hidden;display:flex;align-items:flex-end}
/* top-fade behind the fixed nav — lifts the white menu on bright scenes (reef/sky); smooth fade, no hard band */
.hero__pin::before{content:"";position:absolute;top:0;left:0;right:0;height:clamp(150px,24vh,240px);z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,14,12,.58) 0%,rgba(6,14,12,.38) 30%,rgba(6,14,12,.14) 62%,transparent 100%)}
/* ── rotating scenes (crossfade + slow ken-burns on the active one) ── */
.hero__scenes{position:absolute;inset:0;z-index:0;will-change:transform;backface-visibility:hidden}
.hero__scene{position:absolute;inset:0;opacity:0;transition:opacity 1.5s var(--ease)}
.hero__scene.is-active{opacity:1}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center 56%;
  /* matches kenburns' from-state: when a scene loses .is-active the animation
     stops applying, and without this the scale snapped 1.09 -> 1 (visible jump) */
  transform:scale(1.04)}
.hero__scene.is-active .hero__img{animation:kenburns 14s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.13)}}
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 58%;
  opacity:0;transition:opacity 1.4s var(--ease)}
.hero__vid.is-ready{opacity:1}
/* ── morph canvas: the "Morph" pill turns the hero into a SCROLL-SCRUBBED mountain→coast morph ── */
.hero__morph-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;
  opacity:0;visibility:hidden;transition:opacity 1s var(--ease),visibility 1s}
.hero.is-morph .hero__morph-canvas{opacity:1;visibility:visible}
.hero.is-morph .hero__scenes{opacity:0;transition:opacity 1s var(--ease)}
.hero__scrim{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(10,20,18,.36) 0%,rgba(12,22,20,0) 28%,rgba(12,22,20,0) 42%,rgba(8,18,16,.44) 70%,rgba(7,16,14,.74) 100%),
    linear-gradient(75deg,rgba(8,18,16,.44) 0%,rgba(8,18,16,.08) 40%,rgba(8,18,16,0) 64%)}
.hero.is-morph .hero__scrim{background:
    radial-gradient(80% 60% at 50% 84%,rgba(6,12,10,.55),transparent 70%),
    linear-gradient(180deg,rgba(10,20,18,.32) 0%,transparent 30%,transparent 46%,rgba(8,18,16,.5) 72%,rgba(7,16,14,.78) 100%)}
/* active pill state */
.hero__morph.is-on{background:rgba(197,160,74,.24);box-shadow:inset 0 0 0 1px var(--gold-soft);color:#fff}
/* raised so the caption sits ~35% down, matching the reference's placement */
.hero__in{position:relative;z-index:2;padding-bottom:clamp(8.5rem,39vh,26rem);width:100%}
/* ── slides (caption + CTA) stacked in one grid cell, only the active shows ── */
.hero__slides{display:grid}
.hero__slide{grid-area:1/1;display:flex;flex-direction:column;justify-content:flex-end;
  opacity:0;visibility:hidden;transform:translateY(22px);
  transition:opacity .85s var(--ease),transform .85s var(--ease),visibility .85s}
.hero__slide.is-active{opacity:1;visibility:visible;transform:none}
/* hero eyebrow: text · gold rule · outlined diamond (mirrors automatically in RTL) */
.hero__kicker{display:flex;align-items:center;gap:1.1rem;
  /* font-size intentionally omitted: it inherits the fluid body scale. The old
     clamp(.85rem,.4rem+.7vw,1.02rem) never applied — unspaced '+' is a parse error. */
  font-family:var(--sans);font-weight:500;
  letter-spacing:.02em;color:rgba(255,255,255,.9);margin:0 0 clamp(1.1rem,2.6vh,1.8rem);
  text-shadow:0 1px 12px rgba(0,0,0,.4)}
.hero__kicker-rule{flex:1 1 auto;max-width:min(600px,52vw);height:1px;
  background:linear-gradient(to right,var(--gold-soft) 0%,rgba(197,160,74,.28) 100%)}
.hero__kicker-dia{flex:none;width:12px;height:12px;transform:rotate(45deg);
  box-shadow:inset 0 0 0 1.5px var(--gold-soft)}
/* light weight + higher placement, following ksia.sa's hero (300 weight, ~34%
   down the viewport). Kept white rather than their warm tan: ASFAR's hero
   photography is dark forest/night, where tan loses contrast. */
.hero__title{font-family:var(--display);font-weight:300;color:#fff;
  font-size:var(--fs-hero);line-height:1.08;letter-spacing:-.02em;
  margin-bottom:1.8rem;text-shadow:0 2px 34px rgba(0,0,0,.4)}
.hero__cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
/* hero-only: the shared .btn padding is sized for in-page buttons and reads
   oversized against the hero caption */
.hero__cta .btn{font-size:.75rem;padding:.8rem 1.5rem}
/* morph mode: hide the photo slider caption, show the frame-synced morph caption */
.hero__morphcap{display:none}
.hero.is-morph .hero__slides,.hero.is-morph .hero__dots{display:none}
.hero.is-morph .hero__morphcap{display:block}
.hero__morph-lead{font-family:var(--display);font-weight:500;font-size:clamp(2.2rem,4.4vw,3.4rem);
  line-height:1.18;letter-spacing:-.015em;color:#F6EFDD;margin-bottom:1rem;
  text-shadow:0 2px 22px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.5)}
.hero__morph-over{font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#EBD9B2;
  margin-bottom:1rem;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.hero__morphcap .hero__title{font-size:clamp(1.4rem,2.5vw,2.1rem);margin-bottom:1.2rem;text-shadow:0 3px 30px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.5)}
@media (max-width:820px){.hero.is-morph{height:140vh}}
/* scene dots */
.hero__dots{display:flex;gap:.7rem;margin-top:clamp(1.8rem,4vh,2.6rem)}
.hero__dot{width:36px;height:3px;border-radius:var(--r-btn);background:rgba(255,255,255,.34);cursor:pointer;
  padding:0;transition:background .4s var(--ease);position:relative;overflow:hidden}
.hero__dot::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.hero__dot.is-active{background:rgba(255,255,255,.4)}
.hero__dot.is-active::after{transform:scaleX(1);transition:transform 6s linear}
/* tiny single-letter morph toggle (M = morph, P = photos) */
.hero__morph{position:absolute;left:var(--pad);bottom:clamp(2rem,6vh,3.5rem);z-index:3;
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:50%;
  color:#fff;font-size:.74rem;font-weight:600;line-height:1;letter-spacing:0;text-transform:uppercase;
  background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.hero__morph:hover{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px #fff;transform:translateY(-2px)}
.hero__morph-txt{display:block}
@media (prefers-reduced-motion:reduce){.hero__scene.is-active .hero__img,.hero__dot.is-active::after{animation:none}}
.hero__scroll{position:absolute;right:var(--pad);bottom:clamp(2rem,6vh,3.5rem);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.8rem}
.hero__scroll-label{font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.8);
  writing-mode:vertical-rl}
.hero__scroll-line{width:1px;height:46px;background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.hero__scroll-line::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--gold-soft);
  animation:scrolltick 2.2s var(--ease) infinite}
@keyframes scrolltick{0%{transform:translateY(-100%)}60%,100%{transform:translateY(280%)}}

/* =====================================================================
   ABOUT
   ===================================================================== */
.about__grid{display:block}
.about__text{display:flex;flex-direction:column;max-width:min(100%,44em);margin-inline:auto}
/* NB no font-size: it falls through to .statement{font-size:var(--fs-h2)}, which is
   what has always rendered (measured 41.76px at 1440). The clamp that used to sit
   here was a parse error (unspaced '+'); repairing it would SHRINK the heading to
   34.4px, so it is removed rather than repaired. */
.about__text .statement{position:relative;padding-left:1.2rem;margin:.2rem 0 1.4rem;
  line-height:1.3}
/* terracotta start-edge rule — shared by the About ("أسفار") and Vision
   ("رؤيتنا") headings. Padding/rule only: the two headings keep their own
   font sizes, which the section-title scale already holds in step. */
.about__text .statement::before,.approach__head .statement::before{content:"";position:absolute;left:0;top:.15em;bottom:.1em;width:1px;background:var(--terra)}
/* line-height matches .about__text .statement so both rules, which are sized
   from the heading's line box, come out to exactly the same height. */
.approach__head .statement{position:relative;padding-left:1.2rem;line-height:1.3}
.about__body p+p{margin-top:1rem}
.about__body p{max-width:none;font-size:var(--t-base)}
.about__text .atlas__view{margin-top:1.9rem}
/* ASFAR brand coins (guideline p45) — decorative element in the empty side space.
   inset-inline-end (not left) + the shell offset keeps the pattern flush with the
   content column's far edge, so the whole composition auto-mirrors:
   LTR = text left / coins right · RTL = text right / coins left. */
.about__coins{position:absolute;top:50%;
  inset-inline-end:max(var(--pad),calc((100% - var(--shell))/2 + var(--pad)));
  transform:translateY(-50%);
  width:clamp(190px,20vw,320px);height:auto;z-index:0;pointer-events:none;display:none}
/* one breakpoint drives BOTH halves — the pattern appears and the text goes
   flush to the inline-start edge together, so there is never a dead gutter.
   The measure spreads toward the pattern side but always reserves 360px for the
   coins + a gap, so the two never crowd each other at any width. */
@media(min-width:1080px){
  .about__coins{display:block}
  /* 59em not 1000px: an em cap grows with the type, so column and text scale
     together and chars-per-line stays put instead of the measure blowing out.
     59em == 1002px at 1440, i.e. the 1000px it replaces. */
  .about__text{max-width:min(59em,calc(100% - 296px));margin-inline:0 auto}
}
.about__media{overflow:hidden;border-radius:var(--r-btn);min-height:clamp(360px,54vh,560px);
  box-shadow:0 24px 60px rgba(20,71,80,.1)}
.about__media img{width:100%;height:100%;object-fit:cover}
.about__media--diamond{overflow:visible;border-radius:0;box-shadow:none;min-height:0;
  display:flex;align-items:center;justify-content:center}
.about__media--diamond img{width:auto;height:auto;max-width:100%;max-height:clamp(420px,60vh,600px);
  object-fit:contain;filter:saturate(1.05) contrast(1.04) drop-shadow(0 30px 55px rgba(20,71,80,.18))}


/* =====================================================================
   NUMBERS / PORTFOLIO
   ===================================================================== */
.numbers{position:relative;overflow:hidden;color:#fff;background:var(--petrol-2)}
.numbers__media{position:absolute;inset:0;z-index:0}
.numbers__media img{width:100%;height:100%;object-fit:cover}
.numbers__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,34,22,.62) 0%,rgba(8,26,17,.72) 60%,rgba(7,22,15,.82) 100%)}
.numbers__inner{position:relative;z-index:2}
/* portable on-dark treatment — was bound to the .numbers ancestor, which no
   longer exists; the stats now live beside the map inside #projects */
.stats--light{border-top-color:rgba(255,255,255,.22)}
.stats--light .stat__fig,.stats--light .stat__suffix{color:#fff}
.stats--light .stat__unit{color:var(--gold-soft)}
.stats--light .stat__label{color:rgba(255,255,255,.82)}
.stats--light .stat__rule{background:var(--gold-soft)}  /* --gold is too dim on petrol */
.numbers__head{max-width:46rem;margin-bottom:clamp(1.8rem,3.5vw,2.8rem)}
.numbers__head .statement{margin-top:.2rem}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,2.6rem);
  border-top:1px solid var(--teal-soft);padding-top:clamp(1.6rem,3vw,2.4rem)}
/* the figures are the loudest thing in the ledger — 400 was the lightest weight
   in the file and read as thin beside their own gold unit labels. */
.stat__fig{font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(2.3rem,4.4vw,4rem);line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;display:flex;align-items:flex-start}
.stat__suffix{font-size:var(--t-sup);margin-top:.25em;margin-inline-start:.04em;color:var(--ink)}
.stat__suffix:empty{display:none}   /* per-region data may leave it blank */
.stat__rule{display:block;width:2rem;height:1px;background:var(--gold);margin:1.3rem 0 1rem}
.stat__unit{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:.6rem}
.stat__label{font-size:var(--t-ms);color:var(--ink-soft);max-width:22ch}
/* guideline brand icon leading each stat description (aligned at the label) */
.stat__row{display:flex;gap:.7rem;align-items:flex-start}
.stat__icon{flex:none;width:clamp(44px,3.6vw,58px);height:auto;margin-top:.02rem;opacity:1}

/* =====================================================================
   APPROACH
   ===================================================================== */
.approach{background:var(--canvas);
  /* the full-bleed petrol stats band is the LAST element in this section, so the
     section's own bottom padding would leave a cream strip between the band and
     the next section. Zero it so the petrol runs flush into #fly. */
  padding-bottom:0}
.approach__head{margin-bottom:clamp(1.6rem,3.4vw,2.6rem)}
.approach__media{overflow:hidden;border-radius:var(--r-btn);
  box-shadow:0 24px 60px rgba(20,71,80,.1)}
.approach__media img{width:100%;aspect-ratio:16/9.5;max-height:340px;object-fit:cover;display:block}
.pillars{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.8rem)}
.pillar{position:relative;padding-top:1.5rem;border-top:1px solid var(--teal-soft)}
.pillar::before{content:"";position:absolute;top:-1px;left:0;width:3.4rem;height:2px;background:var(--accent,var(--teal))}
/* one accent for all three — the per-pillar teal/terra/gold gave three
   different rules on the same row (and --teal was undefined, so the first
   rendered transparent). Matches the eyebrow + stat rules. */
.pillar{--accent:var(--gold)}
.pillar h3{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,1.9vw,1.7rem);color:var(--ink);margin-bottom:.7rem}
.pillar p{font-size:var(--t-base);max-width:44em}

/* =====================================================================
   CINEMATIC INTERLUDE
   ===================================================================== */

/* =====================================================================
   DESTINATIONS — pinned ATLAS
   ===================================================================== */
.atlas{background:var(--canvas);position:relative}
.atlas__head{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;align-items:end;
  position:sticky;top:0;z-index:3;background:var(--canvas);
  padding-top:clamp(1.6rem,4vh,3rem);padding-bottom:clamp(.8rem,1.6vh,1.4rem);margin-bottom:0}
.atlas__head-lead{grid-column:1 / 8}
.atlas__intro{grid-column:8 / 13;max-width:34ch;align-self:end;padding-bottom:.4rem}

.atlas__track{position:relative;height:300vh}            /* scroll length = pin duration */
.atlas__pin{position:sticky;top:clamp(8rem,18vh,10.5rem);height:calc(100svh - clamp(8rem,18vh,10.5rem));display:flex;align-items:center;overflow:hidden}
.atlas__stage{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;width:100%}
.atlas__media{position:relative;aspect-ratio:1/1.04;max-height:60svh;border-radius:var(--r-btn);overflow:hidden;
  box-shadow:0 24px 60px rgba(20,71,80,.12)}
.atlas__fig{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.atlas__fig.is-active{opacity:1}
.atlas__fig img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 6s var(--ease)}
.atlas__fig.is-active img{transform:scale(1)}

.atlas__index{display:flex;flex-direction:column;align-self:stretch;max-height:60svh}
.atlas__names{list-style:none;border-top:1px solid var(--teal-soft)}
.atlas__names li{border-bottom:1px solid var(--teal-soft)}
.atlas__names button{display:flex;align-items:baseline;gap:1.1rem;width:100%;text-align:left;
  padding:clamp(.45rem,.9vw,.78rem) 0;opacity:.52;transition:opacity .45s var(--ease),padding-left .45s var(--ease)}
.atlas__names button:hover{opacity:.75;padding-left:.5rem}
.atlas__names li.is-active button{opacity:1}
.atlas__n{font-family:var(--display);font-weight:400;font-size:clamp(1.35rem,2.2vw,1.95rem);color:var(--ink);
  letter-spacing:-.015em;line-height:1;position:relative}
.atlas__detail{margin-top:clamp(.9rem,2vw,1.5rem);min-height:6rem}
.atlas__region{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:.9rem}
.atlas__blurb{max-width:42ch;font-size:1.02rem;color:var(--ink-soft)}
.atlas__detail.is-swap .atlas__region,.atlas__detail.is-swap .atlas__blurb{opacity:0;transform:translateY(10px)}
.atlas__region,.atlas__blurb{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.atlas__view{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;position:relative;
  font-size:.8rem;font-weight:500;letter-spacing:.04em;color:var(--teal)}
.atlas__view i{font-style:normal;transition:transform .4s var(--ease)}
.atlas__view::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:var(--teal);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.atlas__view:hover::after{transform:scaleX(1);transform-origin:left}
.atlas__view:hover i{transform:translateX(4px)}
.atlas__progress{margin-top:auto;height:1px;background:var(--teal-soft);position:relative;overflow:hidden}
.atlas__progress span{position:absolute;left:0;top:0;height:100%;width:0;background:var(--teal);transition:width .25s var(--ease)}

/* mobile stack fallback (hidden on desktop) */
.atlas__stack{display:none}
.dcard{margin-top:clamp(2.5rem,6vw,4rem)}
.dcard figure{overflow:hidden;border-radius:var(--r-btn);aspect-ratio:4/3.4}
.dcard figure img{width:100%;height:100%;object-fit:cover}
.dcard__body{padding-top:1.4rem}
.dcard__body h3{font-family:var(--display);font-weight:400;font-size:2rem;color:var(--ink);letter-spacing:-.015em}
.dcard__body .atlas__region{margin-top:.5rem}
.dcard__body p:last-child{margin-top:.7rem;max-width:46ch}

/* =====================================================================
   SECTORS — value chain (petrol band #1)
   ===================================================================== */
.sectors{position:relative;background:var(--petrol);color:rgba(255,255,255,.78);
  padding-block:var(--sec-loose);overflow:hidden}
/* sectors as image cards */
.sectors--cards .sectors__head{max-width:44rem;margin-bottom:clamp(2rem,4vw,3rem)}
.sectors__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.2rem)}
.scard figure{overflow:hidden;border-radius:var(--r-surface);aspect-ratio:4/5;margin-bottom:1.2rem}
.scard figure img{width:100%;height:100%;object-fit:cover}
.scard h3{min-height:2.3em;text-wrap:balance;font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2vw,1.65rem);color:#fff;
  margin:.4rem 0 .6rem;letter-spacing:-.01em;line-height:1.15}
.scard p{font-size:.92rem;color:rgba(255,255,255,.72);max-width:40ch}
@media (max-width:760px){ .sectors__grid{grid-template-columns:1fr;gap:2.2rem} .scard figure{aspect-ratio:16/10} }

/* =====================================================================
   CTA
   ===================================================================== */
.cta{background:var(--canvas);text-align:center}
.cta__in{display:flex;flex-direction:column;align-items:center;max-width:46rem;margin-inline:auto}
.cta .eyebrow{justify-content:center}
.cta__title{font-family:var(--display);font-weight:500;font-size:clamp(1.65rem,3.4vw,2.9rem);line-height:1.1;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:2.6rem}

/* =====================================================================
   FOOTER (petrol band #2)
   ===================================================================== */
.footer{background:var(--petrol);color:rgba(255,255,255,.66);padding-block:clamp(1.1rem,1.9vw,1.4rem) clamp(.8rem,1.4vw,1rem)}
/* two real children (brand, form) — the old third track was empty and left the
   form floating in the middle instead of against the inline edge. */
.footer__top{display:grid;grid-template-columns:1fr auto;
  gap:clamp(1.8rem,3.4vw,3rem);align-items:start}
.footer__logo{height:56px;width:auto;margin-bottom:1.6rem}   /* guideline on-screen optimum */
.footer__brand p{max-width:34ch;font-size:.95rem;color:rgba(255,255,255,.6);line-height:1.7}
.footer__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.footer__col h4{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:1.3rem}
.footer__col a{display:block;font-size:var(--t-ms);color:rgba(255,255,255,.88);padding:.32rem 0;width:fit-content;
  position:relative;transition:color .35s var(--ease)}
.footer__col a::after{content:"";position:absolute;left:0;bottom:.18rem;height:1px;width:100%;background:var(--gold-soft);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.footer__col a:hover{color:#fff}
.footer__col a:hover::after{transform:scaleX(1);transform-origin:left}
/* ---- footer contact — an icon that discloses the form ----
   The form used to sit open in the footer and was the tallest thing in it.
   Collapsed to a trigger, the footer is only as tall as the brand block; the
   panel opens over the page, so opening it never changes the footer height. */
/* centred against the brand block: top-aligned left the trigger 48px above the
   brand's optical centre with ~97px of dead footer beneath it */
.footer__enquire{position:relative;justify-self:end;align-self:center}
.enquire__btn{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
  font:inherit;font-size:.8rem;color:#fff;
  padding:.62rem 1.05rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.05);
  transition:border-color .3s var(--ease),background-color .3s var(--ease)}
.enquire__btn:hover,.enquire__btn:focus-visible,
.enquire__btn[aria-expanded="true"]{border-color:var(--gold-soft);background:rgba(255,255,255,.09)}
.enquire__ico{width:17px;height:17px;flex:none;fill:none;stroke:var(--gold-soft);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.footer__form{position:absolute;z-index:8;
  bottom:calc(100% + .7rem);inset-inline-end:0;
  width:min(304px,calc(100vw - 2.4rem));
  border:1px solid rgba(255,255,255,.2);border-radius:var(--r-surface);
  background:#123f47;box-shadow:0 20px 44px -20px rgba(0,0,0,.6);
  padding:clamp(.85rem,1.5vw,1.1rem);
  opacity:0;visibility:hidden;transform:translateY(7px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.footer__enquire.is-open .footer__form{opacity:1;visibility:visible;transform:none}
.footer__form-title{font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:.45rem}
/* single column inside the square, centred in the leftover height */
.footer__form-grid{display:grid;grid-template-columns:1fr;gap:.5rem}
.footer__form-grid .ffield--wide{grid-column:auto}
.footer__form-grid textarea{min-height:2rem;resize:vertical}
.ffield{display:flex;min-width:0}
/* label kept for assistive tech, placeholder carries the visible cue */
.ffield span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ffield input,.ffield textarea{
  font:inherit;font-size:.8rem;color:#fff;width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.17);border-radius:var(--r-surface);
  padding:.38rem .6rem;height:2rem;line-height:1.25;resize:none;overflow:hidden;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.ffield input::placeholder,.ffield textarea::placeholder{color:rgba(255,255,255,.38)}
.ffield input:focus,.ffield textarea:focus{outline:none;
  border-color:var(--gold-soft);background:rgba(255,255,255,.08)}
.ffield.is-bad input,.ffield.is-bad textarea{border-color:#c9776a}
.footer__form-btn{height:2rem;width:100%;font-size:.72rem;white-space:nowrap;margin-top:.15rem}
.footer__form-note{font-size:.75rem;color:rgba(255,255,255,.6);margin:.6rem 0 0}
.footer__form-note:empty{display:none}
.footer__form-note.is-bad{color:#e0a094}
@media (max-width:1080px){
  /* brand and trigger stack; the panel follows the trigger to the start edge */
  .footer__top{grid-template-columns:1fr;gap:1.4rem}
  .footer__enquire{justify-self:start}
  .footer__form{inset-inline-start:0;inset-inline-end:auto}
}
@media (max-width:560px){
  .footer__form{width:min(304px,calc(100vw - 1.8rem))}
}

.footer__rule{display:block;height:1px;background:rgba(255,255,255,.22);margin:clamp(.8rem,1.4vw,1rem) 0 .6rem}
.footer__rule::after{display:none}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.78rem;letter-spacing:.04em}
.footer__pif{color:var(--gold-soft);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.7rem;display:inline-flex;align-items:center}
.footer__pif-logo{height:22px;width:auto;opacity:.85}
.footer__copy{color:rgba(255,255,255,.72)}
.footer__back{color:rgba(255,255,255,.72);display:inline-flex;gap:.5rem;transition:color .35s}
.footer__back i{font-style:normal;transition:transform .4s var(--ease)}
.footer__back:hover{color:#fff}
.footer__back:hover i{transform:translateY(-3px)}

/* =====================================================================
   REVEAL SYSTEM
   ===================================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal-img{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s var(--ease)}
.reveal-img.is-in{clip-path:inset(0 0 0 0)}
.reveal-img img{transform:scale(1.08);transition:transform 1.4s var(--ease)}
.reveal-img.is-in img{transform:scale(1)}
/* ── PARALLAX: each element composes the shared --px-y offset with whatever
   base transform it already has, so nothing is clobbered. Scale on framed
   images gives the drift room to move inside its frame without exposing edges. */
[data-px]{transform:translate3d(0,var(--px-y,0px),0);will-change:transform}
.about__coins[data-px]{transform:translateY(-50%) translate3d(0,var(--px-y,0px),0)}
.news__thumb img[data-px]{transform:translate3d(0,var(--px-y,0px),0) scale(1.18)}
@media (prefers-reduced-motion:reduce){
  [data-px],.about__coins[data-px],.news__thumb img[data-px]{transform:none}
  .about__coins[data-px]{transform:translateY(-50%)}
}

/* paragraphs inside a text block arrive in sequence rather than as one slab —
   the same 80ms idea as the card grids, applied to prose. */
@media (min-width:821px){
  .about__body p.reveal:nth-of-type(2),.faq__a:nth-of-type(2){transition-delay:.1s}
  .about__body p.reveal:nth-of-type(3){transition-delay:.2s}
}
/* the word-reveal mask needs a touch more room for Arabic descenders than the
   .1em the base rule allows, or letters like ج/ح clip at the bottom of the mask */
[dir="rtl"] .rw .w{padding-bottom:.2em;margin-bottom:-.2em}

/* stagger groups — desktop multi-column only (mobile stacks reveal together).
   Siblings arriving together read as a single block "popping"; ~80ms apart reads
   as one considered movement. Generic nth-child so adding items needs no edit. */
@media (min-width:821px){
  .stats .reveal:nth-child(2),.pillars .reveal:nth-child(2),
  .news__grid .reveal:nth-child(2),.team__grid .reveal:nth-child(2),
  .faq__list .reveal:nth-child(2){transition-delay:.08s}
  .stats .reveal:nth-child(3),.pillars .reveal:nth-child(3),
  .news__grid .reveal:nth-child(3),.team__grid .reveal:nth-child(3),
  .faq__list .reveal:nth-child(3){transition-delay:.16s}
  .stats .reveal:nth-child(4),.pillars .reveal:nth-child(4),
  .news__grid .reveal:nth-child(4),.team__grid .reveal:nth-child(4),
  .faq__list .reveal:nth-child(4){transition-delay:.24s}
  .team__grid .reveal:nth-child(5),.faq__list .reveal:nth-child(5){transition-delay:.32s}
  .team__grid .reveal:nth-child(6),.faq__list .reveal:nth-child(6){transition-delay:.40s}
}

/* FAQ answers snapped open instantly — <details> has no native transition.
   The panel still opens immediately (no layout trickery, no JS), but the answer
   eases in so the jump reads as a movement rather than a flash. */
.faq__a{opacity:0;transform:translateY(-4px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.faq__item[open] .faq__a{opacity:1;transform:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1080px){
  .approach__head{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr;gap:1.6rem}
  .atlas__stage{grid-template-columns:1fr .9fr;gap:2rem}
}
@media (max-width:820px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .about__grid{grid-template-columns:1fr;gap:2rem}
  .about__text{max-width:100%}
  .about__text .statement{padding-left:1.2rem}
  .about__media{min-height:0;order:-1}
  .about__media img{aspect-ratio:16/10}
  .stats{grid-template-columns:1fr 1fr;gap:2.4rem 1.6rem}
  .numbers__head .statement,.atlas__head .statement{font-size:clamp(1.5rem,5.4vw,2.1rem)}
  .atlas__head{display:block;position:static}
  .atlas__head-lead{margin-bottom:1rem}
  .atlas__intro{max-width:46ch;margin-top:1rem}
  /* swap pinned atlas for vertical stack */
  .atlas__track{display:none}
  .atlas__stack{display:block;margin-top:1rem}
  .footer__top{grid-template-columns:1fr}
  .footer__form{grid-column:auto}
  .footer__cols{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:.8rem}
}
@media (max-width:520px){
  .stats{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr 1fr}
  .hero__cta{gap:.4rem}
  .hero__cta .btn{flex:1 1 auto}
}
@media (max-width:380px){
  .footer__cols{grid-template-columns:1fr;gap:1.8rem}
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    /* delays too — otherwise the stagger still plays out as a 0.4s sequence,
       just with instant steps, which is exactly what these users opted out of */
    transition-delay:0s!important;animation-delay:0s!important;
    scroll-behavior:auto!important}
  .reveal,.reveal-img{opacity:1;transform:none;clip-path:none}
  .reveal-img img,.atlas__fig img,.hero__media img{transform:none}
  .hero__title .line>span{transform:none}
  .hero__lede,.hero__cta{opacity:1;transform:none}
  .atlas__track{display:none}
  .atlas__stack{display:block}
  .atlas__head{position:static}
}

/* =====================================================================
   GEO MAP — a portfolio across the Kingdom
   ===================================================================== */
.geomap{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(2rem,4.5vw,4rem);
  align-items:center;margin-top:clamp(1.8rem,3.5vw,3rem);padding-top:clamp(1.8rem,3.5vw,3rem);
  border-top:1px solid var(--teal-soft)}
.geomap__aside{max-width:34rem}
.geomap__aside .statement{font-size:clamp(1.2rem,1.9vw,1.7rem);margin-top:.2rem}
.geomap__list{list-style:none;margin-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid var(--teal-soft)}
.geomap__list li{border-bottom:1px solid var(--teal-soft)}
.geomap__list a{display:flex;align-items:baseline;gap:1rem;padding:.9rem 0;
  transition:padding-left .4s var(--ease)}
.geomap__list a:hover,.geomap__list li.is-hot a{padding-left:.5rem}
.geomap__list .gn{font-family:var(--display);font-size:1.2rem;color:var(--ink);letter-spacing:-.01em}
.geomap__list li.is-hot .gn,.geomap__list a:hover .gn{color:var(--teal)}
.geomap__list .gr{margin-left:auto;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.geomap__frame{position:relative;width:100%;aspect-ratio:1000/820.9}
.geomap__silhouette{position:absolute;inset:0;width:100%;height:100%}
.geomap__silhouette path{fill:#DFE6D2}
.geomap__routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.geomap__route{fill:none;stroke:var(--teal);stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:1;
  opacity:.45;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.geomap.is-in .geomap__route{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--ease) .2s}
.geopin{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.45rem;z-index:3}
.geopin__dot{width:11px;height:11px;border-radius:50%;background:var(--teal);position:relative;
  box-shadow:0 0 0 4px rgba(39,89,95,.12);transition:background .3s var(--ease),transform .3s var(--ease)}
.geopin__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--terra);
  animation:pinpulse 2.8s var(--ease) infinite}
@keyframes pinpulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.6);opacity:0}}
.geopin__label{font-family:var(--display);font-size:1.02rem;color:var(--ink);white-space:nowrap;
  opacity:0;transform:translateY(5px);transition:.35s var(--ease);
  background:var(--canvas);padding:.05rem .45rem;border-radius:var(--r-btn)}
.geopin:hover .geopin__label,.geopin.is-hot .geopin__label{opacity:1;transform:none}
.geomap.is-in .geopin__label{opacity:1;transform:none}
.geomap.is-in .geopin[data-i="1"] .geopin__label{transition-delay:.08s}
.geomap.is-in .geopin[data-i="2"] .geopin__label{transition-delay:.16s}
.geomap.is-in .geopin[data-i="3"] .geopin__label{transition-delay:.24s}
.geopin:hover .geopin__dot,.geopin.is-hot .geopin__dot{background:var(--terra);transform:scale(1.15)}

/* =====================================================================
   DESTINATION DETAIL PAGES
   ===================================================================== */
.dhero{position:relative;height:88svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end}
.dhero__media{position:absolute;inset:-6% 0 0 0;z-index:0;will-change:transform}
.dhero__media img{width:100%;height:106%;object-fit:cover;object-position:center 45%}
.dhero__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,16,14,.36),rgba(8,16,14,0) 32%,rgba(7,15,13,.28) 62%,rgba(6,14,12,.76) 100%)}
.dhero__in{position:relative;z-index:2;width:100%;padding-bottom:clamp(3rem,7vh,6rem)}
.dback{display:inline-flex;align-items:center;gap:.55rem;color:rgba(255,255,255,.82);
  font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.5rem}
.dback i{font-style:normal;transition:transform .4s var(--ease)}
.dback:hover i{transform:translateX(-4px)}
.dhero__eyebrow{color:var(--gold-soft)}
.dhero__title{font-family:var(--display);font-weight:700;color:#fff;
  font-size:clamp(2rem,4.4vw,4rem);line-height:1.04;letter-spacing:-.02em;margin:.6rem 0 1.3rem}
.dhero__lede{max-width:46ch;color:rgba(255,255,255,.9);font-size:clamp(1rem,1.3vw,1.24rem);line-height:1.62}
.dstory{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.5rem,3vw,3rem)}
.dstory__body{grid-column:2 / 8}
.dstory__body p{margin-bottom:1.4rem;font-size:1.07rem;color:var(--ink-soft);max-width:60ch}
.dstory__facts{grid-column:9 / 13;align-self:start;position:sticky;top:clamp(6rem,13vh,8rem)}
.dstory__facts .eyebrow{margin-bottom:1.2rem}
.dfact{display:flex;justify-content:space-between;gap:1rem;padding:.95rem 0;border-top:1px solid var(--teal-soft)}
.dfact:last-child{border-bottom:1px solid var(--teal-soft)}
.dfact__l{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:600;padding-top:.15rem}
.dfact__v{color:var(--ink);text-align:right;font-weight:500;font-size:.95rem;max-width:60%}
.dpull{font-family:var(--display);font-weight:400;color:var(--teal);
  font-size:clamp(1.6rem,3.4vw,2.7rem);line-height:1.24;max-width:24ch;letter-spacing:-.02em;
  margin:clamp(1rem,3vw,2.5rem) 0 0;padding-left:1.5rem;border-left:1px solid var(--terra)}
.dgallery{display:grid;gap:clamp(.8rem,1.5vw,1.4rem)}
.dgallery--1{grid-template-columns:1fr}
.dgallery--2{grid-template-columns:1fr 1fr}
.dgallery figure{overflow:hidden;border-radius:var(--r-btn)}
.dgallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.dopp{background:var(--petrol);color:rgba(255,255,255,.82);padding-block:clamp(4.5rem,9vw,7rem);position:relative;overflow:hidden}
.dopp__in{max-width:46rem;position:relative;z-index:2}
.dopp .eyebrow{color:var(--gold-soft)}
.dopp .eyebrow__rule{background:var(--gold-soft)}
.dopp h2{font-family:var(--display);font-weight:400;color:#fff;
  font-size:clamp(1.7rem,3.2vw,2.5rem);margin:.4rem 0 1.4rem;letter-spacing:-.01em;line-height:1.12}
.dopp p{color:rgba(255,255,255,.8);font-size:1.06rem;margin-bottom:2.2rem;line-height:1.7}
.dnext{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding-block:clamp(3rem,6vw,5rem);border-top:1px solid var(--teal-soft)}
.dnext__label{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.5rem}
.dnext__name{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.1rem);color:var(--ink);letter-spacing:-.01em;transition:color .3s var(--ease)}
.dnext a:hover .dnext__name{color:var(--teal)}
.dnext a.is-next{text-align:right;margin-left:auto}

@media (max-width:900px){
  .geomap{grid-template-columns:1fr;gap:2.4rem}
  .geomap__frame{max-width:560px;margin-inline:auto;width:100%}
  .dstory{display:block}
  .dstory__body{max-width:100%}
  .dstory__facts{position:static;margin-top:2.5rem}
  .dgallery--2{grid-template-columns:1fr}
  .dnext__name{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .geomap__route{stroke-dashoffset:0}
  .geopin__dot::after{animation:none;opacity:0}
  .dhero__media img{transform:none}
}

/* =====================================================================
   PROJECTS — Jabal Khairah
   ===================================================================== */
.project{background:var(--canvas)}
.project__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.8rem,3.5vw,3.5rem);align-items:center}
.project__media{position:relative;overflow:hidden;border-radius:var(--r-btn);aspect-ratio:4/4.3;
  box-shadow:0 24px 60px rgba(20,71,80,.1)}
.project__media img{width:100%;height:100%;object-fit:cover}
.project__media figcaption{position:absolute;left:1rem;bottom:1rem;color:#fff;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;background:rgba(16,57,63,.5);padding:.35rem .75rem;
  border-radius:var(--r-btn);backdrop-filter:blur(4px)}
.project__body .statement{margin:.2rem 0 1.4rem}
.project__body>p{max-width:52ch;margin-bottom:1.8rem}
.project__facts{list-style:none;margin-bottom:2rem;border-top:1px solid var(--teal-soft)}
.project__facts li{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;
  border-bottom:1px solid var(--teal-soft);font-size:.92rem}
.project__facts span{color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em;font-size:.7rem;font-weight:600;padding-top:.2rem}
.project__facts b{color:var(--ink);font-weight:500;text-align:right}

/* =====================================================================
   LEADERSHIP
   ===================================================================== */
/* cream ground — terracotta demoted from a full-bleed field to an accent
   (the active tab rule + the eyebrow mark), so the portraits carry the section */
.team{background:var(--canvas);color:var(--ink)}
.team .statement,.team .member h3{color:var(--ink)}
.team .team__intro{color:var(--ink-soft)}
.team .eyebrow{color:var(--terra)}
.team .eyebrow__no{color:var(--terra)}
.team .member p{color:var(--ink-soft)}
.team .team__note{color:var(--ink-faint)}
.team .team__close{border-top-color:rgba(26,26,26,.14)}
.team__head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3rem)}
.team__head .statement{margin:.2rem 0 1.3rem}
.team__intro{max-width:52ch}
/* segmented control — the markup is already a role="tablist", so give it the
   shape of a real control instead of three words floating in the cream.
   The track is the warm panel tone, so it reads as a surface on --canvas. */
.team__tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:.3rem;
  width:fit-content;max-width:100%;margin:0 auto clamp(2.4rem,5vw,3.6rem);
  background:var(--canvas-2);border:1px solid rgba(26,26,26,.07);
  border-radius:var(--r-pill);padding:.34rem;
  box-shadow:0 1px 2px rgba(26,26,26,.03) inset}
.team__tab{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  background:transparent;border-radius:var(--r-pill);
  padding:.62rem clamp(1rem,2.2vw,1.7rem);position:relative;
  font-family:var(--display);font-weight:600;
  /* a <button> does NOT inherit font-size, and this rule's old clamp was a parse
     error, so the tabs rendered at Chrome's UA default 13.33px at EVERY width —
     smaller than body copy. 1em resolves against the parent, i.e. the fluid body. */
  font-size:1em;letter-spacing:-.01em;color:var(--ink-faint);
  white-space:nowrap;
  transition:color .3s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease)}
.team__tab:hover{color:var(--ink-soft);background:rgba(26,26,26,.045)}
/* terracotta owns this section — the active segment carries it as a solid fill
   (white on --terra = 4.74:1, AA for this weight/size) */
.team__tab.is-active{color:#fff;background:var(--terra);
  box-shadow:0 6px 16px -8px rgba(169,96,62,.75)}
.team__tab.is-active:hover{color:#fff;background:var(--terra)}
.team__tab:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
/* narrow screens: let the control fill the width and share it evenly */
@media (max-width:520px){
  .team__tabs{width:100%;flex-wrap:nowrap}
  .team__tab{flex:1 1 0;padding-inline:.5rem;font-size:.95rem}
}
/* committee members are listed by NAME. There is no portrait for them, and
   reusing one of the three stock leadership photos for a named individual
   would misrepresent that person — so these cards are typographic only. */
.member--text{display:flex;flex-direction:column;justify-content:center;
  gap:.3rem;padding:clamp(.9rem,1.6vw,1.3rem) clamp(.8rem,1.4vw,1.1rem);
  border:1px solid var(--teal-soft);border-radius:var(--r-surface);background:rgba(255,255,255,.4);
  min-height:clamp(84px,7.5vw,110px)}
.member--text h3{margin:0}
.member--text p{margin:0;color:var(--ink-soft)}
/* the roster is a rail now: three per view, the rest by swipe/arrows, and a
   view-all link to the full page. Shares initCarousel() with the news rail. */
.team__carousel{position:relative}
.team__viewport{overflow:hidden}
.team__grid{--team-gap:clamp(1.6rem,3vw,3.2rem);
  display:flex;gap:var(--team-gap);align-items:stretch;
  /* no grab cursor: the gaps between cards are not clickable, and a hand there
     reads as an affordance that isn't. Dragging still works; the arrows are
     the visible control. Pointer stays on the photo and the name only. */
  transition:transform .6s var(--ease);touch-action:pan-y}
.team__grid.is-dragging{transition:none;user-select:none}
/* The SLOT stays a third of the row so the rail still shows exactly 3 —
   capping the card itself let 5 fit and broke the 3-up rhythm. The size cut
   goes on the portrait, centred inside its slot. */
.member{flex:0 0 calc((100% - 2*var(--team-gap))/3);min-width:0;text-align:center}
@media (max-width:940px){.member{flex-basis:calc((100% - var(--team-gap))/2)}}
@media (max-width:640px){.member{flex-basis:86%}}
/* Arrows stay on every tab, even when a tab is too short to scroll — the
   disabled style is an empty outline, so an unavailable direction is obvious
   without the control disappearing and shifting the row. "View all" sits
   between them, so the whole row reads as one centred control group. */
.team__nav{align-items:center;gap:clamp(.9rem,1.9vw,1.5rem)}
.team__nav .team__viewallwrap{margin:0}
.team__viewallwrap{text-align:center;margin:clamp(1rem,2vw,1.5rem) 0 0}
.team__viewall{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-weight:600;font-size:var(--t-ms);color:var(--teal);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:opacity .25s var(--ease)}
.team__viewall:hover{opacity:.6}
.member[hidden]{display:none}
/* PORTRAIT FRAME. Built from the brand DIAMOND (guideline p33), not the Sadu
   pattern — Sadu was pulled from the site at brand review and the guideline
   restricts it at this size anyway. The frame is a warm panel with a gold
   hairline; a single diamond sits centred on the bottom edge like a seal. */
.member__ph{position:relative;display:block;width:100%;max-width:clamp(120px,13vw,200px);
  margin-inline:auto;aspect-ratio:1/1.12;margin-bottom:1.9rem;
  /* team-*.png shipped with a pale diamond composited behind each subject; it
     was keyed out (originals in assets/img/_orig), so the mat is free to be
     any tone. Reinstating that backdrop would make the frame unusable. */
  background:var(--canvas-2);border:1px solid rgba(165,129,74,.34);
  border-radius:var(--r-surface);padding:.5rem;
  transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.member__ph img{border-radius:calc(var(--r-surface) - 1px)}
/* the seal: a single ASFAR diamond, straddling the bottom border. Brand primary
   dark (#124750, guideline p20) rather than gold — the portraits now sit on the
   beige pattern, and gold on gold-beige lost the shape entirely. */
.member__ph::after{content:"";position:absolute;left:50%;bottom:0;
  width:clamp(14px,1.35vw,18px);aspect-ratio:1;transform:translate(-50%,50%);
  background:var(--petrol);
  -webkit-mask:url("../img/asfar-diamond.svg") center/contain no-repeat;
          mask:url("../img/asfar-diamond.svg") center/contain no-repeat}
.member:hover .member__ph{border-color:rgba(165,129,74,.62);background:var(--canvas-3)}
.member__ph img{width:100%;height:100%;object-fit:cover;object-position:center 8%;display:block}
/* اللجان: no portraits supplied for the committee members. The frame still holds
   its place with a monogram so the grid does not go ragged, and dropping a real
   photo in later needs no layout change. Deliberately NOT filled with one of the
   three existing portraits — those belong to other people. */
/* no portrait supplied yet: the card shows the same brand pattern the real
   portraits are composited onto, so a missing photo reads as an empty frame of
   the set rather than a different treatment. Drop a real photo in with
   tools/frame-portrait.py and it lands on this exact ground. */
.member__ph--empty i{position:absolute;inset:.5rem;display:grid;place-items:center;
  border-radius:calc(var(--r-surface) - 1px);
  background:var(--petrol) url("../img/asfar-pattern-petrol.webp") center/cover no-repeat;
  font-family:var(--display);font-style:normal;font-weight:600;
  font-size:clamp(1.4rem,3vw,2.05rem);letter-spacing:.06em;color:rgba(255,255,255,.5);
  transition:color .4s var(--ease)}
.member:hover .member__ph--empty i{color:rgba(255,255,255,.72)}
.member{text-align:center}
/* ---- member profile dialog ----
   The name is a real <button> so the profile is reachable by keyboard; the
   portrait is a redundant pointer target on top of that. */
.member__name{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-align:inherit;transition:color .3s var(--ease)}
.member--opens .member__ph{cursor:pointer}
.member__name:hover,.member--opens:hover .member__name{color:var(--teal)}
.member__name:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;border-radius:2px}

/* ── member profile: an overlay over the section, grown from the card ──
   The panel floats above the cards instead of resizing one of them, so the
   layout never reflows, every member gets exactly the same panel whatever
   their position in the rail, and there is room for a real biography. It
   scales up from the portrait that was clicked (transform-origin is set from
   that card in app.js), so it still reads as coming out of the image. */
.team.section,.teampage{position:relative}
.mexp{position:absolute;z-index:30;
  width:min(760px,72%);
  opacity:0;visibility:hidden;transform:scale(.88) translateY(10px);
  transform-origin:var(--mexp-ox,50%) var(--mexp-oy,50%);
  /* the scale carries a little past 1 and settles — it reads as the panel
     growing out of the portrait rather than simply appearing */
  transition:opacity .28s var(--ease),
             transform .52s cubic-bezier(.22,1.02,.28,1),
             visibility 0s .52s}
.mexp.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* the contents arrive just behind the panel, in reading order */
.mexp__ph,.mexp__name,.mexp__role,.mexp__text{opacity:0;transform:translateY(9px);
  transition:opacity .34s var(--ease),transform .34s var(--ease)}
.mexp.is-open .mexp__ph,.mexp.is-open .mexp__name,
.mexp.is-open .mexp__role,.mexp.is-open .mexp__text{opacity:1;transform:none}
.mexp.is-open .mexp__ph{transition-delay:.10s}
.mexp.is-open .mexp__name{transition-delay:.16s}
.mexp.is-open .mexp__role{transition-delay:.21s}
.mexp.is-open .mexp__text{transition-delay:.26s}
.mexp__in{position:relative;display:grid;
  grid-template-columns:clamp(120px,13vw,168px) minmax(0,1fr);
  grid-template-areas:"ph name" "ph role" "ph bio" "ph .";
  grid-template-rows:auto auto auto 1fr;
  column-gap:clamp(1.1rem,2.2vw,1.8rem);row-gap:.2rem;
  text-align:start;
  background:var(--canvas);border:1px solid rgba(165,129,74,.34);
  border-radius:var(--r-surface);padding:clamp(1.1rem,2.2vw,1.7rem);
  box-shadow:0 34px 80px -34px rgba(8,30,34,.62)}
.mexp__ph{grid-area:ph;position:relative;display:block;width:100%;aspect-ratio:1/1.12;
  background:var(--canvas-3);border:1px solid rgba(165,129,74,.5);
  border-radius:var(--r-surface);padding:.4rem}
.mexp__ph img{width:100%;height:100%;object-fit:cover;object-position:center 8%;
  display:block;border-radius:calc(var(--r-surface) - 1px)}
.mexp__ph--empty i{position:absolute;inset:.4rem;display:grid;place-items:center;
  border-radius:calc(var(--r-surface) - 1px);
  background:var(--petrol) url("../img/asfar-pattern-petrol.webp") center/cover no-repeat;
  font-family:var(--display);font-style:normal;font-weight:600;font-size:1.6rem;
  letter-spacing:.06em;color:rgba(255,255,255,.5)}
.mexp__name{grid-area:name;font-family:var(--display);font-weight:600;
  font-size:var(--t-md);color:var(--ink);line-height:1.25;margin:0;
  padding-inline-end:2.2rem}
.mexp__role{grid-area:role;color:var(--gold);font-weight:600;margin:.3rem 0 0}
.mexp__text{grid-area:bio;color:var(--ink-soft);line-height:1.8;margin:0;
  padding-top:clamp(.7rem,1.6vh,1rem);margin-top:clamp(.7rem,1.6vh,1rem);
  border-top:1px solid rgba(165,129,74,.28);white-space:pre-line}
/* no biography supplied yet — say so plainly rather than pad the panel */
.mexp__text--empty{opacity:.7;font-style:italic}
.mexp__close{position:absolute;top:.55rem;inset-inline-end:.55rem;z-index:2;
  width:1.9rem;height:1.9rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(20,71,80,.22);background:var(--canvas-2);color:var(--petrol);
  font:600 1rem/1 var(--sans);display:grid;place-items:center;
  transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.mexp__close:hover{background:var(--canvas-3);border-color:rgba(20,71,80,.4)}
.mexp__close:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
/* a light veil over the section only — enough to lift the panel off the cards
   and give a click-anywhere-to-close target, without the full-page dimming of
   a modal */
.mexp__veil{position:absolute;inset:0;z-index:29;background:rgba(251,248,238,.72);
  opacity:0;visibility:hidden;transition:opacity .32s var(--ease),visibility 0s .32s}
.mexp__veil.is-open{opacity:1;visibility:visible;transition-delay:0s}
/* the card the panel came from stays marked underneath */
.member.is-open .member__ph{border-color:rgba(165,129,74,.75);background:var(--canvas-3)}
.member.is-open .member__name{color:var(--teal)}
@media (max-width:700px){
  .mexp{width:92%}
  .mexp__in{grid-template-columns:1fr;
    grid-template-areas:"ph" "name" "role" "bio";justify-items:center;text-align:center}
  .mexp__ph{max-width:150px}
  .mexp__name{padding-inline-end:0}
}
@media (prefers-reduced-motion:reduce){
  .mexp,.mexp__veil,.mexp__ph,.mexp__name,.mexp__role,.mexp__text{
    transition:opacity .01s;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .mexp,.mexp__in{transition:none}
}
/* The brand pattern now lives INSIDE each portrait — the subjects were cut out
   of their studio backgrounds and re-composited onto the guideline p32 petrol
   pattern (asfar-pattern-petrol.webp). No motif is drawn around the frame; a
   second one out here fought the one in the photo. */
.member h3{font-family:var(--display);font-weight:600;font-size:var(--t-md);color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.member p{color:var(--ink-soft);margin-top:.4rem}
.team__note{margin-top:clamp(1.8rem,3.5vw,2.6rem);font-size:.78rem;color:var(--ink-faint);letter-spacing:.04em}

/* footer contact block */
.footer__contact{margin-top:1.6rem;display:flex;flex-direction:column;gap:.35rem}
.footer__contact a{font-size:.92rem;color:rgba(255,255,255,.82);width:fit-content;transition:color .3s var(--ease)}
.footer__contact a:hover{color:#fff}

@media (max-width:1080px){
  .approach__media img{aspect-ratio:16/9}
}
@media (max-width:900px){
  .project__grid{grid-template-columns:1fr;gap:2.4rem}
  .project__media{max-width:460px;aspect-ratio:4/3.4}
  .team__grid{grid-template-columns:1fr 1fr;gap:1.4rem}
}
@media (max-width:560px){
  .team__grid{grid-template-columns:1fr;max-width:340px}
}

/* =====================================================================
   Small section kicker-titles removed per request
   ===================================================================== */
.eyebrow{display:none}

/* =====================================================================
   SCROLL PARALLAX / 3D DEPTH
   ===================================================================== */
[data-px]{will-change:transform;backface-visibility:hidden;transition:none!important}
/* oversize the band media so it has room to drift without exposing edges */
.numbers__media{inset:-9% 0}
@media (prefers-reduced-motion:reduce){
  [data-px]{transform:none!important}
}

/* =====================================================================
   LOOK & FEEL — loader curtain · grain · magnetic · word reveal
   ===================================================================== */

/* ── film grain ── */
/* inset is NEGATIVE on purpose: the grain animation slides this layer by up to
   4% of its own size, and at inset:0 it is exactly viewport-sized, so every
   step left a bare strip down one edge — a hard vertical seam across a flat
   cream field, held for a full second at a time by steps(6), reading as a
   dark band running the height of the site. Oversizing it past the largest
   translate means the edges stay covered through the whole cycle. */
.grain{position:fixed;inset:-6%;z-index:1400;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px;animation:grain 6s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,2%)}80%{transform:translate(4%,-2%)}100%{transform:translate(0,0)}}

/* ── loader / page-transition curtain ── */
.loader{position:fixed;inset:0;z-index:2000;background:var(--petrol);display:grid;place-items:center;
  clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease)}
.loader.is-out{clip-path:inset(0 0 100% 0);pointer-events:none}      /* wipe up to reveal */
/* returning visitor inside the same tab: no wipe, no logo animation, nothing to
   wait for — the page is simply already revealed. */
.loader.is-instant{transition:none!important;display:none}
.loader.is-instant .loader__logo,.loader.is-instant .loader__bar i{animation:none!important}
.loader.is-in{clip-path:inset(100% 0 0 0)}       /* start below (for enter after nav) */
.loader.is-cover{clip-path:inset(0 0 0 0)}       /* rise to cover (exit) */
.loader__box{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
/* intro splash — full-screen brand moment: at least optimum (56px), scaled up with viewport */
.loader__logo{height:clamp(64px,10vh,88px);width:auto;opacity:0;transform:translateY(10px);animation:ldIn .9s var(--ease) .1s forwards}
.loader__bar{width:130px;height:1px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.loader__bar i{position:absolute;inset:0;background:var(--gold-soft);transform:scaleX(0);transform-origin:left;
  animation:ldBar 2.0s var(--ease) .25s forwards}
@keyframes ldIn{to{opacity:1;transform:none}}
@keyframes ldBar{to{transform:scaleX(1)}}


/* ── magnetic buttons ── */
[data-magnetic]{transition:transform .45s var(--ease)}

/* ── cinematic word-reveal headings ── */
.rw{opacity:1!important;transform:none!important;clip-path:none!important}
/* heading reveal — each word wipes in from its own bottom edge, slowly, with
   NO per-word cascade, so a whole heading arrives as one calm gesture.
   (Per-word rather than one clip on the line: on a multi-line heading every
   line then reveals together instead of the last line appearing first.) */
.rw .w{display:inline-block;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.rw .wi{display:inline-block;clip-path:inset(100% 0 0 0);transition:clip-path 1.15s var(--ease)}
.rw.is-in .wi{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){ .rw .wi{clip-path:none!important;transform:none!important} }

/* ── cinematic vignettes on full-bleed image sections ── */
.hero__scrim{background:
  /* flat veil — first layer = topmost; darkens the clear middle band the
     gradients deliberately leave open, so the headline holds on bright frames */
  linear-gradient(rgba(6,14,12,var(--hero-veil)),rgba(6,14,12,var(--hero-veil))),
  linear-gradient(180deg,rgba(10,20,18,.34) 0%,rgba(12,22,20,0) 28%,rgba(12,22,20,0) 42%,rgba(8,18,16,.42) 70%,rgba(7,16,14,.72) 100%),
  linear-gradient(75deg,rgba(8,18,16,.4) 0%,rgba(8,18,16,.08) 38%,rgba(8,18,16,0) 62%),
  radial-gradient(120% 80% at 50% 42%,transparent 52%,rgba(6,14,12,.34) 100%)}
/* numbers band = petrol ground + the brand Sadu pattern as a tone-on-tone
   texture (green photo removed); content sits above via .numbers__inner z-2 */
.numbers__media{display:none}
.numbers__scrim{background:linear-gradient(180deg,var(--petrol) 0%,var(--petrol-2) 100%)}

/* subtle unified crispness on photography (keeps green vibrant) */
.about__media img,.approach__media img,.project__media img,.team__media img,
.numbers__media img,.dgallery img,
.atlas__fig img,.dhero__media img,.fly__card img{filter:saturate(1.05) contrast(1.03)}

/* =====================================================================
   SIGNATURE 3D FLY-THROUGH
   ===================================================================== */
.fly{position:relative;height:300vh;background:var(--ink-deep)}
/* 273 frames over (300vh - 100vh) = ~6.6px of scroll per frame at 900vh.
   WAS 1100vh = 9000px of scrolling at 33px/frame — the section took 11 screen
   heights to clear. Its scrub is already rAF-throttled via onScrollRaf. */
.fly__pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center}
.fly__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.fly__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;
  opacity:0;transition:opacity .8s var(--ease)}
.fly.is-ready .fly__canvas{opacity:1}
.fly__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(72% 46% at 50% 47%,rgba(6,12,10,.6),rgba(6,12,10,.28) 45%,transparent 68%),
    radial-gradient(120% 92% at 50% 50%,transparent 46%,rgba(6,12,10,.5) 100%),
    linear-gradient(180deg,rgba(6,12,10,.4) 0%,transparent 26%,transparent 54%,rgba(6,12,10,.62) 100%)}
.fly__cap{position:relative;z-index:3;text-align:center;padding:0 var(--pad);pointer-events:none;
  text-shadow:0 2px 24px rgba(0,0,0,.65),0 1px 4px rgba(0,0,0,.5)}
.fly__over{font-size:.72rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:#EBD9B2;margin-bottom:1.2rem}
.fly__name{font-family:var(--display);font-weight:500;color:#fff;
  font-size:clamp(2.1rem,4.8vw,4.6rem);line-height:1.04;letter-spacing:-.01em;
  text-shadow:0 4px 30px rgba(0,0,0,.6),0 1px 4px rgba(0,0,0,.5)}
.fly__meta{font-variant-numeric:tabular-nums;margin-top:1.4rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;display:inline-flex;gap:.7rem;align-items:center}

@media (max-width:820px){
  .fly{height:auto}
  .fly__pin{position:relative;height:clamp(360px,56vh,480px)}
  .fly__canvas{display:none}
}
@media (prefers-reduced-motion:reduce){
  .fly{height:auto}
  .fly__pin{position:relative;height:clamp(360px,56vh,480px)}
  .fly__canvas{display:none}
}

/* =====================================================================
   BRAND SHADES — faint brand-colour washes + diamond watermarks
   ===================================================================== */
/* 2 · the hero photo used to cut straight to flat cream. A faint cool shade
   under the fold gives the photograph something to resolve into. */
.about{background:radial-gradient(58% 48% at 93% 2%,rgba(165,129,74,.055),transparent 60%),var(--canvas)}
/* 1 · alternation — Our Vision steps to the warm panel tone so it reads as a
   separate surface from About above it (L*98 -> L*94, a 4-point step) */
.approach{background:radial-gradient(55% 46% at 5% 8%,rgba(39,89,95,.04),transparent 60%),var(--canvas-2)}
.project{background:radial-gradient(55% 50% at 96% 98%,rgba(169,96,62,.045),transparent 60%),var(--canvas)}
.atlas{background:radial-gradient(52% 46% at 3% 4%,rgba(39,89,95,.045),transparent 58%),var(--canvas)}
.cta{background:radial-gradient(65% 60% at 50% 42%,rgba(165,129,74,.06),transparent 66%),var(--canvas)}

/* all decorative watermarks/patterns removed — clean grounds only */
.cta{position:relative;overflow:hidden}
.cta__in{position:relative;z-index:1}

.footer{position:relative}
.footer .wrap{position:relative;z-index:1}

.about{position:relative;overflow:hidden}
.about__grid{position:relative;z-index:1}

/* =====================================================================
   ASFAR SADU PATTERN — the heritage textile used as faint background
   shades on the dark grounds + a light section, and as crisp geometric
   "ribbon" seams at section transitions. Restrained, on-brand.
   ===================================================================== */
:root{--pat-fade:.055}

/* Brand DIAMOND motif (guideline p33) used sparingly: a colour accent above
   the CTA headline + a faint single-colour diamond-cluster watermark on the
   two petrol grounds. The old Sadu textures / ribbon seams stay removed. */
.sectors{position:relative;overflow:hidden}
.sectors .wrap{position:relative;z-index:1}
.approach{position:relative;overflow:hidden}
.approach .wrap{position:relative;z-index:1}
.footer{position:relative}
.cta__in{position:relative}
.cta__ribbon,.cta__diamonds{display:none}

@media (max-width:820px){
  .sectors::after,.footer::after{height:24px}
  .approach::after{opacity:.04}
}

/* =====================================================================
   NEWSLINE — single press-release strip (Projects section)
   ===================================================================== */
.newsline{display:flex;flex-direction:column;gap:.9rem;margin-top:clamp(2.2rem,4.5vw,3.4rem);
  padding:clamp(1.3rem,2.6vw,1.9rem) clamp(1.3rem,2.6vw,2.1rem);
  background:var(--canvas-2);border:1px solid var(--teal-soft);border-radius:var(--r-btn);position:relative}
.newsline::before{content:"";position:absolute;top:0;inset-inline-start:0;width:3px;height:100%;background:var(--teal)}
.newsline__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}
.newsline__badge{font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:var(--teal);padding:.34rem .75rem;border-radius:var(--r-btn);line-height:1}
.newsline__tag{font-size:.7rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal-soft);padding:.32rem .7rem;border-radius:var(--r-btn);line-height:1}
.newsline__date{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-inline-start:auto}
.newsline p{max-width:72ch;font-size:.95rem;color:var(--ink-soft)}

/* sectors intro line (Strategic Investments) */
/* the lede under the section title — a one-line lede, not running prose, so it
   takes the full content width rather than an editorial measure. It was capped
   at 38rem inside a 704px parent and always broke to two lines at 15.2px.
   ENGLISH is the binding case: it measures 1197px at 16px against Arabic's
   754px, i.e. 74.8px of width per 1px of font. The 1.35rem ceiling is what
   keeps it on one line — at 21.6px it needs 1616px, and the widest content
   column the shell ever gives is 1656px. */
.sectors__intro{max-width:100%;margin-top:1.1rem;color:rgba(255,255,255,.68);
  font-size:clamp(1rem,1.15vw,1.35rem)}

/* =====================================================================
   AWARD POLISH — wayfinding, type detailing, affordances, new components
   ===================================================================== */
/* anchor jumps clear the fixed nav (native/no-JS path) */
[id]{scroll-margin-top:5.5rem}

/* scrollspy — current section stays underlined in the nav */
.nav__links a.is-active::after{transform:scaleX(1);transform-origin:left}

/* heading + paragraph wrapping discipline */
.statement,.cta__title,.fly__name,.atlas__intro{text-wrap:balance}
.hero__lede,.dhero__lede,.about__body p,.pillar p,.scard p,.newsline p,.team__intro,.sectors__intro{text-wrap:pretty}

/* card affordances — quiet lift + slow zoom */
.scard figure img,.dcard figure img,.member__ph img{transition:transform 1.1s var(--ease)}
.scard:hover figure img,.dcard:hover figure img,.member:hover .member__ph img{transform:scale(1.045)}
.scard,.member,.dcard{transition:transform .6s var(--ease)}
.scard:hover,.member:hover{transform:translateY(-4px)}

/* focus + selection on every dark surface */
.menu :focus-visible,.dopp :focus-visible{outline-color:var(--gold-soft)}
.sectors ::selection,.footer ::selection,.menu ::selection,.numbers ::selection,.dopp ::selection{
  background:var(--gold-soft);color:var(--petrol-2)}

/* about — quiet key-facts hairline row */

/* leadership — deliberate closing row */
.team__close{margin-top:clamp(2rem,4vw,3rem);padding-top:1.15rem;border-top:1px solid var(--teal-soft);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.team__close .team__note{margin-top:0}

/* cta — grounded contact row */
.cta__contact{list-style:none;display:flex;justify-content:center;gap:clamp(1.8rem,5vw,4.2rem);flex-wrap:wrap;
  margin-top:clamp(2.2rem,4.5vw,3.2rem);padding-top:1.7rem;border-top:1px solid var(--teal-soft);
  width:min(100%,46rem)}
.cta__contact li{display:flex;flex-direction:column;gap:.4rem;text-align:center}
.cta__contact span{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)}
.cta__contact a,.cta__contact b{font-weight:500;color:var(--teal);font-size:.95rem}
.cta__contact a:hover{color:var(--petrol)}


/* numbers band ribbon seam removed per brand review */

/* Riyadh HQ marker — small brand diamond, label always on */
.geopin--hq{z-index:2;pointer-events:none}
.geopin__hqdot{width:12px;height:12px;background:var(--gold);flex:none;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.geopin--hq .geopin__label{opacity:1;transform:none;font-size:.8rem;color:var(--ink-faint)}


/* =====================================================================
   INVESTMENT MAP — faithful to asfar.primedigital.dev
   big line-map (lighter #436C74 provinces on the var(--petrol) band) with a
   white pulsing SVG marker on the active region, a floating company name,
   a cream PR card, and a dark region tab bar beneath the map.
   Layout forced LTR (map left · name · card right) so both languages match
   the reference; app-rtl.css restores RTL text inside the text blocks.
   ===================================================================== */
/* 3 · the morph banner (var(--ink-deep), L*6) used to jump straight to petrol (L*27).
   Starting the map at the banner's own black and resolving to petrol over
   420px turns two stacked dark blocks into one continuous descent. */
.invmap{position:relative;overflow:hidden;color:#fff;
  /* one source of truth: height cap x viewBox aspect (911/751). Map column,
     svg cap and head box all derive from this so they cannot drift. */
  /* cap raised from 570 so the map keeps growing on tall/extra-wide screens
     instead of stranding a small map beside stretched stat rows. Still a
     height cap x the viewBox aspect, so the box equals the drawn map. */
  /* compact: the section must fit between the nav and the fold at any scroll
     position, not only when scrollIntoView applies scroll-margin-top */
  --map-w:calc(clamp(360px,52vh,660px) * 1.2131);
  /* denser than the global --sec: keeps the whole section inside ~750px */
  /* no bottom padding — the tab bar sits flush on the section's bottom edge
     (both grid columns stretch, so the ledger's last row lands level with it) */
  padding-block:var(--sec-tight) 0;
  /* flat petrol. The 420px --ink-deep gradient that used to sit over the top
     of this section read as a dark shade around the map. */
  background:var(--petrol)}
.invmap__grid{display:grid;
  /* MAP SIDE SWITCH — this one declaration decides the whole section:
       direction:ltr  -> map LEFT in BOTH languages   (current)
       (removed)      -> mirrors per language: AR map-RIGHT, EN map-LEFT
     If you remove it, ALSO remove the [dir=rtl] .invmap__ledger/__head
     restores in app-rtl.css — they exist only to undo this lock and will fight
     a mirrored layout. drawLeader() is direction-aware and needs no change. */
  direction:ltr;grid-template-columns:3fr 1.3fr;
  /* row gap MUST be set separately: the single `gap` value is sized for the
     COLUMN split (map | ledger) and was also inserting ~46px between the head,
     the map row and the tab row — ~92px of incidental section height. */
  gap:clamp(.7rem,1.4vh,1.2rem) clamp(1.6rem,3.2vw,3.4rem);align-items:stretch;
  width:100%;max-width:var(--shell);margin:0 auto;
  /* vertical rhythm comes from .section's padding-block — do NOT stack a second
     set here (that was 225px of chrome on an 889px section) */
  padding:0 var(--pad)}
.invmap__mapblock{display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
/* the side column now holds only the company name (the lede was removed), so the
   map takes the reclaimed width — 3fr keeps enough room for a 2-3 line company
   name, which is all the leader line needs to point at */
.invmap__inner{display:grid;direction:ltr;grid-template-columns:var(--map-w);justify-content:center;gap:clamp(.9rem,1.5vw,1.5rem);
  align-items:center;flex:1 1 auto;padding-bottom:clamp(.7rem,1.5vh,1.2rem);
  position:relative}
.invmap__mapwrap{position:relative;min-width:0}
/* width-cap derived from the height cap x the viewBox aspect (911/751=1.2131):
   the box then equals the DRAWN map exactly, so there is no letterbox slack and
   the map's left edge lines up with the heading above it. */
.invmap__mapwrap svg{width:100%;max-width:var(--map-w);
  height:auto;display:block;overflow:visible}
/* region states — now just TWO (dL = CIE L* delta on the var(--petrol) ground):
     base   var(--petrol)   dL  0.0  every province, including the tagged ones
     ON     var(--gold)     dL 28.9  the tab-selected region, the map's only accent
   The former idle/blink/hover steps (--teal / --petrol-mid / --petrol-hi) were
   removed with the map's click behaviour: they signalled an affordance the map
   no longer has, and three permanently-tinted provinces read as pre-selected. */
/* The map is a DISPLAY surface, not a control — selection happens in the tab bar
   only. The country is drawn in ONE flat colour that never changes: nothing is
   clickable, nothing hovers, nothing blinks, and no province is ever filled.
   The PIN is the entire selection indicator. */
.invmap__region{fill:var(--petrol);stroke:#fff;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}
/* ONE pin, used everywhere — province markers and city pins are the same object
   at the same size, so no two pins on the map can look different. The halo spills
   onto the petrol ground so it is gold; the dot may sit on a gold selected fill,
   where gold-on-gold measures 1.48:1, so it keeps a cream ring to stay legible. */
.inv-marker_halo{fill:rgba(194,160,106,.40);animation:inv-marker 2s ease-in-out infinite}
.inv-marker_pulse{fill:rgba(194,160,106,.52)}
.inv-marker_dot{fill:var(--gold);stroke:var(--canvas);stroke-width:2.5}
@keyframes inv-marker{0%,100%{opacity:.45;r:26px}50%{opacity:.88;r:32px}}
/* floating company name beside the map */
/* dark region tab bar under the map block */
/* tab bar, after the reference: the section ground CONTINUES behind the tabs
   (transparent, not a solid block), labels are start-aligned rather than centred,
   and the active state is a quiet tonal lift instead of the old near-black
   #292d2d slab — the map's gold selection carries the accent, the bar stays calm. */
/* full-width row of the grid (was nested in the map column, so it stopped short
   of the stats and left the section's bottom edge ragged) */
/* TRUE full bleed: the bar was only .invmap__grid-wide (max 1840px), so above
   ~1900px it stopped short and left the section ground showing at both ends.
   The .vision__stats trick (width:100vw + margin-inline:calc(50% - 50vw)) does
   NOT work here: this is a grid ITEM, and a percentage margin on a grid item
   resolves against the grid area, not the element's own width — at 390px that
   put the bar at left:-172px, hanging off one edge and short of the other.
   Instead, walk back the exact distance to the viewport edge: the grid's own
   inline padding, plus half of whatever the shell leaves over. max(0px,…)
   keeps it correct below the shell's minimum, where the overshoot is negative. */
.invmap__tabs{display:flex;grid-column:1/-1;align-self:end;
  width:auto;
  margin-inline:calc(-1 * (var(--pad) + max(0px,(100vw - var(--shell))/2)));
  /* own ground: the bar used to be transparent, so it read as part of the
     petrol backdrop rather than as a control. This darker inset reads as a
     distinct strip and gives the active tab something to lift OFF of. */
  background:rgba(6,32,36,.55);
  border-top:1px solid rgba(255,255,255,.14)}
.invmap__tab{flex:1 1 0;appearance:none;-webkit-appearance:none;border:0;
  background:transparent;color:rgba(255,255,255,.74);
  font-family:var(--sans);
  /* was var(--fs-micro) — 12.9px at 1440, too small to read as navigation.
     The FLOOR does the work here: below ~1520px the vw term is smaller than
     1rem, so the floor is what ships on every laptop and tablet. */
  font-size:clamp(.85rem,.85vw,1.05rem);font-weight:600;
  letter-spacing:.01em;line-height:1.3;
  padding:clamp(1.1rem,1.7vw,1.55rem) clamp(.6rem,1.1vw,1.1rem);
  cursor:pointer;position:relative;text-align:center;
  transition:background .3s var(--ease),color .3s var(--ease)}
.invmap__tab:not(:first-child){border-inline-start:1px solid rgba(255,255,255,.14)}
.invmap__tab:hover{background:rgba(255,255,255,.07);color:#fff}
/* active = lifted lighter panel + a gold top edge, so the selected region is
   unmistakable at a glance instead of a 2%-lighter wash. */
.invmap__tab.is-active{background:rgba(255,255,255,.13);color:#fff;font-weight:600}
.invmap__tab.is-active::before{content:"";position:absolute;inset-inline:0;top:-1px;
  height:2px;background:var(--gold)}
.invmap__tab:focus-visible{outline:2px solid var(--gold-soft);outline-offset:-2px}
/* ── section head: row 1 INSIDE .invmap__grid, so it inherits the grid's
   1500px box + its z-index:1 (see the .invmap__grid,.invmap__tabs rule below).
   NB .eyebrow is display:none globally — the h2 is what actually reads. ── */
/* head sits over the MAP column only (was 1/-1) so the ledger beside it can
   start at the very top of the section, level with the heading */
/* head box = the MAP's width (same cap x aspect), so the heading's text edge
   lands on the map's edge in both directions — right in RTL, left in LTR */
/* lifted OUT of .invmap__grid — as a grid child it was confined to column 1
   (the map column), so in RTL it right-aligned to the map edge, not the page. */
.invmap__headwrap{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.invmap__head{margin-bottom:clamp(1.1rem,2.1vw,1.7rem)}
.invmap__head .statement{margin-top:.2rem}


/* ── LEADER LINE: an overlay svg spanning .invmap__inner. The polyline is
   computed in JS from the active region's centroid to the lede block, so it
   mirrors for free in RTL (the geometry is measured, never hard-coded). ── */
@keyframes leaderDraw{from{stroke-dashoffset:var(--leader-len,600)}to{stroke-dashoffset:0}}

/* ── right column: the 4 stats as a ledger rail, flush with the map block ── */
/* the rows keep their natural height and the group sits centred against the map,
   instead of being stretched to fill the column */
.invmap__ledger{display:flex;flex-direction:column;justify-content:flex-start;min-width:0;
  grid-column:2;grid-row:1/3}
/* .stats and .invmap__stats are both (0,1,0) — this MUST stay after the
   .stats breakpoints at ~566/579 so source order wins */
.invmap__stats{flex:1 1 auto;grid-template-columns:1fr;grid-auto-rows:1fr;gap:0;
  border-top:0;padding-top:0}
/* the region's own photograph, above the ledger and switching with the tabs.
   render() already writes #invImg from the same data that drives the figures,
   so the picture can never drift from the region it belongs to. */
.invmap__shot{margin:0 0 clamp(.45rem,.9vh,.75rem);flex:0 0 auto;
  border-radius:var(--r-surface);overflow:hidden;background:rgba(255,255,255,.05);
  /* The cap USED to be 11vh = 99px while the ratio wanted 124px at this column
     width, so object-fit:cover quietly shaved 20% off a picture that had
     already been cropped to 16:5.2 by tools/region-strip.py — that double crop
     is what cut the heads and feet off the people in region-all. The cap now
     sits above what the ratio asks for at every tested size, so it only guards
     the very wide tier and the ratio decides the shape. */
  aspect-ratio:16/5.2;max-height:clamp(96px,15vh,178px)}
.invmap__shot img{height:100%}
.invmap__shot img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .45s var(--ease)}
.invmap__shot img[src]{opacity:1}
@media (max-width:940px){.invmap__shot{aspect-ratio:16/4.6}}
.invmap__stats .stat{display:grid;
  /* THREE columns: icon, figure, label. In RTL that reads icon (rightmost) ->
     number -> text; LTR mirrors it automatically. The icon used to be nested
     inside .stat__row alongside the label, which put it between the number and
     the text. Fixed, not auto — auto sizes per row and leaves the edge ragged. */
  /* the figure track was clamp(6rem,8.6vw,9.6rem) = 124px at 1440 while the
     widest number ("328.5") measures 76px — 48px of dead slack that read as a
     gap between the label and the number. Sized to the content with a small
     buffer instead; still fixed, so the rows stay aligned with each other. */
  grid-template-columns:clamp(34px,2.4vw,40px) clamp(4.6rem,5.9vw,6.6rem) 1fr;
  grid-template-areas:"icon fig label" "icon rule label" "icon unit label";
  column-gap:clamp(.45rem,.65vw,.7rem);align-content:center;
  padding-block:clamp(.3rem,.6vh,.58rem);border-top:1px solid rgba(255,255,255,.16)}
.invmap__stats .stat:first-child{border-top:0}
.invmap__stats .stat__fig{grid-area:fig;font-size:var(--fs-fig)}
.invmap__stats .stat__rule{grid-area:rule;width:1.5rem;margin:.55rem 0 .45rem}
.invmap__stats .stat__unit{grid-area:unit;margin-bottom:0;font-size:.72rem;letter-spacing:.12em}
/* display:contents dissolves the wrapper so the icon and the label become
   grid items in their own right — no markup change needed. */
.invmap__stats .stat__row{display:contents}
.invmap__stats .stat__label{grid-area:label;align-self:center}
.invmap__stats .stat__icon{grid-area:icon;align-self:center;width:clamp(34px,2.4vw,40px)}
/* was font-size:.8rem, which rendered this component at 13px here and 16px in
   the Investment Impact band — the same label at two sizes. It now takes the
   shared step and only overrides what is genuinely local. */
.invmap__stats .stat__label{line-height:1.45;max-width:none}

/* right — cream PR card, rounded top, rising from the section's bottom edge */
.invmap__card{position:relative;background:var(--canvas);color:var(--ink);
  border-radius:var(--r-surface) var(--r-surface) 0 0;padding:clamp(1.3rem,1.7vw,1.7rem) clamp(1.3rem,1.6vw,1.8rem) clamp(1.3rem,2.2vh,1.8rem);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.65);display:flex;flex-direction:column;
  min-height:clamp(580px,74vh,680px);overflow:hidden;
  opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.invmap__card.is-in{opacity:1;transform:none}
.invmap__thumb{margin:0 0 1.1rem;width:100%;height:clamp(180px,22vh,225px);overflow:hidden;border-radius:var(--r-surface);background:#0d2830}
.invmap__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.invmap__region-pill{display:inline-block;align-self:flex-start;background:var(--petrol);color:#fff;
  font-family:var(--display);font-weight:700;font-size:.88rem;padding:.4rem 1.1rem;border-radius:var(--r-surface);margin-bottom:.7rem}
.invmap__ctitle{font-family:var(--display);font-weight:700;font-size:var(--t-lg);
  line-height:1.4;color:var(--petrol);margin:0 0 .75rem}
.invmap__ctext{font-size:.9rem;line-height:1.62;color:#4a5658;margin:0 0 .95rem;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.invmap__more{display:inline-block;align-self:flex-start;margin-top:auto;color:var(--petrol);font-weight:600;font-size:.95rem;
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;transition:opacity .25s}
.invmap__more:hover{opacity:.55}
@media (max-width:940px){
  .invmap__grid{grid-template-columns:1fr;padding-bottom:clamp(2rem,4vh,3rem)}
  .invmap__inner{grid-template-columns:1fr;gap:1.3rem;padding-bottom:1.6rem}
  .invmap__card{border-radius:var(--r-surface);margin-top:2rem;min-height:0}
  .invmap__tabs{flex-wrap:wrap}
  .invmap__tab{flex:1 1 45%}
  /* map and lede stack vertically here, so a leader line between them is meaningless */
  /* The grid drops to ONE column above, but the ledger kept grid-column:2 /
     grid-row:1/3 — which created an IMPLICIT second column. The map block was
     then squeezed into the 1fr leftover (47px at 390px wide) with the ledger
     beside it, and .invmap__tabs' `1 / -1` span only reached the end of the
     EXPLICIT grid, so the tab bar was 47px too. Resetting the placement lets
     all three stack as intended. */
  .invmap__ledger{margin-top:clamp(2rem,4vh,2.8rem);grid-column:auto;grid-row:auto}
  .invmap__stats .stat{padding-block:clamp(1rem,2vh,1.3rem)}
}
@media (max-width:520px){.invmap__tab{flex:1 1 100%;border-inline-start:0;border-top:1px solid rgba(255,255,255,.09)}}

/* =====================================================================
   FAQ — native <details> accordion (no JS: keyboard + screen-reader support
   comes free). Warm panel ground so it alternates against the cream Leadership
   section above it, per the v125 alternation rule.
   ===================================================================== */
/* matches .team (Leadership) at var(--canvas) — the old var(--canvas-2)
   alternation was deliberate but the client wants the two grounds equal. */
.faq{background:var(--canvas)}
/* the whole block centres on the page; the Q/A rows keep their own start
   alignment so the +/- sign stays pinned to the far edge */
.faq__head{max-width:46rem;margin:0 0 clamp(1.6rem,3vw,2.4rem);text-align:start}
.faq__head .statement{margin-top:.2rem}
.faq__list{max-width:56rem;margin-inline:auto;border-top:1px solid rgba(26,26,26,.13)}
.faq__item{border-bottom:1px solid rgba(26,26,26,.13)}
.faq__q{display:flex;align-items:flex-start;gap:1rem;cursor:pointer;list-style:none;
  padding:clamp(1rem,2vh,1.35rem) 0;
  font-family:var(--display);font-weight:600;color:var(--ink);
  font-size:var(--t-md);line-height:1.45;
  transition:color .3s var(--ease)}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--terra)}
.faq__q:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:var(--r-btn)}
/* the +/- sign, pushed to the far edge and mirrored for free */
.faq__sign{margin-inline-start:auto;flex:none;position:relative;
  width:18px;height:18px;margin-top:.28em}
.faq__sign::before,.faq__sign::after{content:"";position:absolute;inset-inline:0;top:50%;
  height:1.5px;background:var(--terra);border-radius:var(--r-hair);
  transition:transform .32s var(--ease),opacity .32s var(--ease)}
.faq__sign::after{transform:rotate(90deg)}
.faq__item[open] .faq__sign::after{transform:rotate(0deg);opacity:0}
/* no font-size: answers now match body copy instead of sitting 2px under it */
.faq__a{margin:0;padding:0 0 clamp(1.1rem,2.2vh,1.5rem);
  max-width:62ch;line-height:1.8;color:var(--ink-soft)}
@media (max-width:640px){.faq__q{font-size:1rem;gap:.7rem}}

/* =====================================================================
   NEWS — the press releases, lifted out of the map's side panel into
   their own 3-up row. Cream ground so it breaks the petrol of #projects.
   ===================================================================== */
/* 1 · alternation — News steps warm so Sectors / News / Leadership are not
   three identical cream fields in a row */
.news{background:var(--canvas-2)}
.news__head{max-width:46rem;margin-bottom:clamp(1.8rem,3.5vw,2.6rem)}
.news__head .statement{margin-top:.2rem}
/* auto-fit, not repeat(3): the third card used to be a duplicate of the first, and
   with it removed a hard 3-track grid left a visible empty slot. This fills the row
   with however many releases actually exist, and takes a genuine third one for free. */
.news__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(1.2rem,2.4vw,2.2rem);align-items:stretch}
.news__card{display:flex;flex-direction:column;background:#fff;color:var(--ink);
  border-radius:var(--r-surface);overflow:hidden;box-shadow:0 24px 60px -44px rgba(20,71,80,.55);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.news__card:hover{transform:translateY(-4px);box-shadow:0 34px 74px -44px rgba(20,71,80,.7)}
/* 160-200px was a letterbox that sliced these signing photos; 4:3 kept the
   frame but made the card enormous at a third of the row. 16:10 plus a
   narrower card is the middle ground — little cropping, compact card. */
.news__thumb{margin:0;width:100%;aspect-ratio:16/10;height:auto;overflow:hidden;background:#0d2830}
.news__thumb img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.news__body{display:flex;flex-direction:column;flex:1 1 auto;
  padding:clamp(1.1rem,1.5vw,1.5rem) clamp(1.1rem,1.4vw,1.5rem) clamp(1.2rem,1.8vh,1.6rem)}
.news__pill{display:inline-block;align-self:flex-start;background:var(--petrol);color:#fff;
  font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:.34rem .7rem;border-radius:var(--r-pill);margin-bottom:.85rem}
.news__title{font-family:var(--display);font-weight:700;
  font-size:var(--fs-h3);line-height:1.4;margin:0 0 .7rem}
.news__text{font-size:.88rem;line-height:1.65;color:#4a5658;margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden}
/* honest empty slot — NOT a fabricated story. Visibly a placeholder. */
.news__card--soon{background:transparent;box-shadow:none;
  border:1px dashed rgba(20,71,80,.32);justify-content:center;align-items:center;
  text-align:center;padding:clamp(1.6rem,3vw,2.4rem);min-height:clamp(260px,32vh,340px)}
.news__card--soon:hover{transform:none;box-shadow:none}
.news__soon-mark{font-size:.62rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terra);margin:0 0 .7rem}
.news__soon-text{font-size:.9rem;line-height:1.6;color:var(--ink-soft);margin:0;max-width:26ch}
@media (max-width:940px){.news__grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.news__grid{grid-template-columns:1fr}}

/* =====================================================================
   SECTORS — THE TRIPTYCH (interactive cinematic image accordion, petrol)
   hover/focus a sector photo -> it breathes open + reveals its caption;
   no-JS / reduced-motion / mobile -> three equal image cards, all captioned
   ===================================================================== */
/* 44rem (704px) was the real ceiling on the lede below the title — raising
   .sectors__intro alone did nothing while its parent capped it. */
.sectors--tript .sectors__head{max-width:100%;margin-bottom:clamp(1.6rem,3.5vw,2.6rem)}
.tript{display:flex;gap:6px;height:clamp(420px,52vh,560px)}
.tript__panel{position:relative;flex:1 1 0;min-width:44px;overflow:hidden;border-radius:var(--r-surface);
  box-shadow:inset 0 0 0 1px rgba(197,160,106,.14);background:#0d2830;cursor:pointer;color:#fff;text-align:start;outline-offset:-2px}
.tript__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transform:scale(1);transition:transform .9s var(--ease)}
.tript__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(16,57,63,.8) 0%,rgba(16,57,63,.14) 52%,rgba(16,57,63,0) 80%);
  opacity:.52;transition:opacity .6s var(--ease)}
/* idle mini-title (only surfaced in live accordion mode) */
.tript__title{position:absolute;z-index:2;inset-block-end:clamp(1rem,2vw,1.5rem);
  inset-inline-start:clamp(.4rem,.55vw,.5rem);inset-inline-end:clamp(.4rem,.55vw,.5rem);
  font-family:var(--display);font-size:.8rem;line-height:1.18;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.5);
  opacity:0;transition:opacity .4s var(--ease);
  display:flex;flex-direction:column;justify-content:flex-start;overflow-wrap:break-word;
  min-height:calc(4 * 1.18em + 2px + .5rem)}
.tript__title::before{content:"";display:block;width:24px;height:2px;background:var(--gold-soft);margin-bottom:.5rem;flex:none}
/* caption — shown by DEFAULT (the no-JS baseline); gated shut in live idle panels */
.tript__cap{position:absolute;z-index:2;inset-inline:0;inset-block-end:0;padding:clamp(1.3rem,2.4vw,2.2rem);
  clip-path:inset(0);transform:none;opacity:1;
  transition:clip-path .55s var(--ease) .08s,transform .55s var(--ease) .08s,opacity .55s var(--ease) .08s}
/* the title is now the ONLY thing in the caption (.tript__desc / .tript__eg
   were removed from the markup), so its bottom margin would just pad the box. */
.tript__name{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,1.4vw + .8rem,1.85rem);line-height:1.14;
  color:#fff;margin:0;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.tript__name::before{content:"";display:block;width:32px;height:2px;background:var(--gold-soft);margin-bottom:.9rem}
/* -- live accordion (JS adds .tript--live once it takes over interaction) -- */
.tript--live .tript__panel{flex-grow:.58;transition:flex-grow .7s var(--ease)}
.tript--live .tript__panel.is-open{flex-grow:2.7}
.tript--live .tript__panel:not(.is-open) .tript__img{transform:scale(1.08)}
.tript--live .tript__panel:not(.is-open) .tript__scrim{opacity:.66}
.tript--live .tript__panel:not(.is-open) .tript__cap{clip-path:inset(100% 0 0 0);transform:translateY(14px);opacity:0}
.tript--live .tript__panel:not(.is-open) .tript__title{opacity:1}
.tript--live .tript__panel.is-open .tript__scrim{opacity:.34}
@media (max-width:1289.98px){
  .tript{flex-direction:column;height:auto;gap:12px}
  .tript__panel{flex:none;aspect-ratio:16/10}
  .tript--live .tript__panel{flex-grow:0}
  .tript--live .tript__panel:not(.is-open) .tript__img{transform:scale(1)}
  .tript--live .tript__panel:not(.is-open) .tript__scrim{opacity:.5}
  .tript--live .tript__panel:not(.is-open) .tript__cap{clip-path:inset(0);transform:none;opacity:1}
  .tript--live .tript__panel:not(.is-open) .tript__title{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .tript--live .tript__panel{flex-grow:1;transition:none}
  .tript--live .tript__panel:not(.is-open) .tript__img{transform:scale(1)}
  .tript--live .tript__panel:not(.is-open) .tript__scrim{opacity:.5}
  .tript--live .tript__panel:not(.is-open) .tript__cap{clip-path:inset(0);transform:none;opacity:1}
  .tript--live .tript__panel:not(.is-open) .tript__title{opacity:0}
  .tript__img,.tript__cap,.tript__scrim{transition:none}
}


/* =====================================================================
   SECTORS — PURPLE GROUND (brand secondary purple #7D7185 "Saudi culture",
   deepened into an aubergine band so the Red Sea photos pop)
   ===================================================================== */
/* cream ground — the gold field is gone; gold survives as the caption rules
   (.tript__title::before / .tript__name::before) and the example line, and the
   photographs themselves now supply all the colour this section needs */
/* NB .sectors sets color:rgba(255,255,255,.78) for the petrol variant — it MUST
   be overridden here or any un-targeted text renders near-white on cream */
.sectors--tript{background:var(--canvas);color:var(--ink-soft)}
.sectors--tript .sectors__head .statement{color:var(--ink)}
.sectors--tript .sectors__intro{color:var(--ink-soft)}
.sectors--tript .eyebrow{color:var(--gold)}
.sectors--tript .eyebrow__no{color:var(--gold)}
.sectors--tript .eyebrow__rule{background:var(--gold)}
.sectors--tript .tript__panel{background:#233c40}   /* neutral fallback behind the photo */
.sectors--tript .tript__scrim{background:linear-gradient(0deg,rgba(28,19,7,.9) 0%,rgba(28,19,7,.5) 46%,rgba(28,19,7,.14) 72%,rgba(28,19,7,0) 90%)}
/* OPEN panel: text sits over the bright hero image → give it a strong bottom-weighted overlay (readable text, photo still shows up top) */
.sectors--tript .tript--live .tript__panel.is-open .tript__scrim{opacity:1;
  background:linear-gradient(0deg,rgba(14,9,3,.92) 0%,rgba(14,9,3,.78) 20%,rgba(14,9,3,.42) 34%,rgba(14,9,3,.12) 52%,rgba(14,9,3,0) 72%)}

/* =====================================================================
   BRAND GROUNDS — flat brand colours only. The Sadu pattern washes that
   used to sit behind the nav, map, leadership and footer were removed per
   request; every ground is now clean. The position/z-index helpers below
   are kept — layout still depends on them (the map's leader-line overlay
   and the content stacking above each section ground).
   ===================================================================== */
.nav__in{position:relative;z-index:1}
.team{position:relative;overflow:hidden}
.team .wrap{position:relative;z-index:1}
.invmap__grid,.invmap__tabs{position:relative;z-index:1}

/* =====================================================================
   Video lightbox — opened by any [data-video] trigger (hero "Watch film")
   ===================================================================== */
.vlb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,5vw,3.5rem);background:rgba(6,12,11,.84);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.vlb.is-open{opacity:1;visibility:visible}
.vlb__frame{position:relative;width:min(1120px,100%);aspect-ratio:16/9;background:#000;
  border-radius:var(--r-surface);overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.6);
  transform:scale(.96);transition:transform .55s var(--ease)}
.vlb.is-open .vlb__frame{transform:none}
.vlb__frame video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.vlb__close{position:absolute;top:calc(-1 * clamp(2.4rem,5vw,3rem));inset-inline-end:0;
  width:2.4rem;height:2.4rem;display:inline-flex;align-items:center;justify-content:center;
  padding:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.4rem;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);cursor:pointer;
  transition:background .4s var(--ease),transform .4s var(--ease)}
.vlb__close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}


/* ---- WIDE-SCREEN (>=1441px) ----
   Containers and type scale up together above 1440; below it nothing changes.
   Prose keeps an editorial measure so a wider shell never means a 140-char line. */
@media (min-width:1441px){
  /* .sectors__intro is deliberately NOT in this list — it is a one-line lede,
     not running prose, and 70ch resolved to ~940px, under the ~1054px it needs
     to stay on one line at its largest size. */
  .about__text .statement,.news__text,.faq__a{max-width:70ch}
}

/* ---- OUR VISION — portfolio figures ----
   Sits on a PETROL band inside the cream section, so it reads as the same
   component as the map ledger: white figures, gold units, gold icons.
   That ground is also why it carries .stats--light — on the cream it would
   have been invisible. Guideline palette: petrol #144750. */
.vision__stats{margin-top:clamp(2.4rem,5vw,4rem);
  background:var(--petrol);border-radius:0;
  /* break out of .wrap so the petrol runs edge to edge — no cream framing it.
     The inner padding re-aligns the figures to the shared content line, so the
     band is full-bleed but its contents still line up with every other section. */
  width:100vw;margin-inline:calc(50% - 50vw);
  padding-block:clamp(2.2rem,4vw,3.4rem);
  padding-inline:max(var(--pad), calc((100vw - var(--shell)) / 2 + var(--pad)))}
/* band title — gold on petrol, same register as the .stat__unit labels below */
.vision__stats-title{margin:0 0 clamp(1.6rem,3vw,2.6rem)}
.vision__statgrid{display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1.4rem,2.6vw,2.6rem);align-items:start;border-top:0}
.vision__statgrid .stat{display:block;padding:0}
.vision__statgrid .stat__fig{font-size:clamp(2rem,2.9vw,3rem);
  font-weight:700;letter-spacing:-.015em;line-height:1}
.vision__statgrid .stat__rule{margin:1rem 0 .8rem}
.vision__statgrid .stat__row{display:flex;align-items:flex-start;gap:.7rem;margin-top:.5rem}
.vision__statgrid .stat__icon{flex:none;width:34px;height:34px}
@media (max-width:940px){ .vision__statgrid{grid-template-columns:1fr 1fr;row-gap:2rem} }
@media (max-width:560px){ .vision__statgrid{grid-template-columns:1fr} }

/* ---- OUR PARTNERS — continuous logo marquee ----
   Two identical tracks slide left; when the first has moved exactly its own
   width the pair is back in register, so the loop is seamless with no JS.
   The clone carries aria-hidden so each partner is announced once. */
/* the warm panel tone, a step darker than the cream either side, so the band
   reads as its own zone. The ticker's fade mask resolves to transparent, so
   the rail picks this up and there is no seam between rail and band. */
.partners{background:var(--canvas-2);overflow:hidden;
  padding-block:var(--sec-xl)}
/* the marks sit on their own tonal band, so the heading needs a clear gap or
   the row reads as attached to it. */
.partners .statement{margin-bottom:clamp(.9rem,1.7vw,1.4rem)}
.partners__rail{display:flex;width:max-content;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.partners__track{display:flex;align-items:center;list-style:none;margin:0;padding:0;
  gap:clamp(2.6rem,5.5vw,6rem);padding-inline:clamp(1.3rem,2.75vw,3rem);
  animation:partnerSlide 34s linear infinite}
.partners__rail:hover .partners__track{animation-play-state:paused}
.partners__track li{flex:none;display:grid;place-items:center;
  /* equal box per logo; each mark scales to fit inside it, so a tall-narrow
     lockup and a wide wordmark carry the same optical weight */
  width:clamp(150px,14.5vw,240px);height:clamp(70px,6.6vw,104px)}
.partners__track img{display:block;width:auto;height:auto;
  max-width:clamp(150px,14.5vw,240px);max-height:clamp(70px,6.6vw,104px);
  filter:grayscale(1);opacity:.62;
  transition:filter .4s var(--ease),opacity .4s var(--ease)}
.partners__track li:hover img{filter:grayscale(0);opacity:1}
@keyframes partnerSlide{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .partners__track{animation:none}
  .partners__rail{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .partners__track:last-child{display:none}
}

/* ---- SECTION DIVIDER — brand diamond motif on a hairline ----
   #faq and #partners share var(--canvas-2), so without this they read as one
   continuous block. The rules fade toward the outer edges so the mark carries
   the eye rather than the line. Decorative only -> aria-hidden in the markup. */
.secdiv{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.6rem);
  margin-block:0 clamp(2.2rem,4.5vw,3.6rem)}
.secdiv__rule{flex:1;height:1px;min-width:0}
.secdiv__rule:first-child{
  background:linear-gradient(to right,transparent,rgba(165,129,74,.34))}
.secdiv__rule:last-child{
  background:linear-gradient(to left,transparent,rgba(165,129,74,.34))}
.secdiv__mark{flex:none;display:block;width:auto;height:clamp(20px,2.1vw,28px);
  opacity:.9}
@media (max-width:560px){ .secdiv__mark{height:18px} }


/* =====================================================================
   ARTICLE — press-release detail page (news-*.html)
   Banner image carries the headline; body sits beside a "more news" rail.
   All inline offsets are logical, so the whole page mirrors for RTL with no
   [dir=rtl] overrides.
   ===================================================================== */
/* No banner — the release opens on its headline. The ground is the warm panel
   tone, a step darker than the home page's cream, so a release reads as its own
   surface rather than a continuation of the landing page. Same nav clearance as
   the listing pages, since there is nothing for the fixed nav to sit over. */
/* The PAGE stays the normal cream; only the reading column is tinted — see
   .article__body. Same nav clearance as the listing pages. */
.article{background:var(--canvas);
  padding-block-start:calc(clamp(112px,8vw,140px) + var(--sec))}
/* the release photo, in the reading column */
.article__figure{margin:0 0 clamp(1.4rem,2.6vw,2rem);border-radius:var(--r-surface);overflow:hidden;
  background:var(--petrol)}
.article__figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.article__figure{max-width:100%}
/* the scrim and the absolutely-positioned caption are gone: the headline now
   sits BELOW the picture on the cream, so the photograph is never obscured and
   the type never has to fight a busy background. */
/* the head now lives INSIDE .article__body so the darker panel runs behind the
   pill, headline and date as well as the story — one surface, not two. */
.article__head{padding:0 0 clamp(1.2rem,2.2vw,1.8rem);max-width:none;margin-inline:0}
.article__pill{display:inline-block;background:var(--teal-soft);color:var(--teal);
  border:1px solid rgba(39,89,95,.28);
  font-family:var(--sans);font-weight:600;font-size:var(--t-sm);
  padding:.34rem 1rem;border-radius:var(--r-pill);margin-bottom:1rem}
.article__title{font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(1.3rem,1.35vw + .62rem,2.3rem);line-height:1.26;letter-spacing:-.01em;
  /* was 26ch, which stacked the headline into three short lines. Unset, it
     uses the full panel width. text-wrap:balance was REMOVED on purpose:
     balancing equalises the line lengths, so neither line reached the panel
     edge and the title read narrower than the dark area behind it. */
  max-width:none;margin:0}
/* capped: at the full shell width the body column was 936px and the photo
   527px tall, which read as zoomed-in rather than editorial. */
/* the cap used to be a flat 1320px, so every pixel past ~1440 became side
   margin and the article stranded itself in the middle of a wide screen. 92vw
   reproduces the old width at 1440 almost exactly (1325 vs 1320) and lets it
   spread from there. Line length is safe either way — .article__body p is
   capped at 68ch — so the extra width goes to the panel and the aside. */
.article__grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,26%,420px);
  gap:clamp(1.8rem,3.2vw,3.4rem);padding-block:clamp(1.4rem,2.6vw,2.2rem) clamp(2.4rem,4.5vw,4.2rem);
  align-items:start;max-width:min(1700px,92vw);margin-inline:auto}
/* .article__body p is (0,1,1) and beat the lede's (0,1,0), so the two ended up
   the same size and the lede did no work. Matching the type selector fixes it. */
.article__body p.article__lede{font-size:var(--t-lg);line-height:1.7;color:var(--ink);
  border-inline-start:2px solid var(--terra);padding-inline-start:clamp(.9rem,1.4vw,1.4rem);
  margin:0 0 1.6rem}
/* the darker shade belongs to the reading column, not the page: photo and
   body text sit on it as one panel, with the aside left on the page ground. */
.article__body{background:var(--canvas-3);border-radius:var(--r-surface);
  padding:clamp(1.3rem,2.4vw,2.1rem)}
/* 68ch measured 713px against an 864px reading column, so every paragraph
   stopped short of the panel it sits on. 92ch overruns the column at laptop
   widths (so the text fills it) while still bounding the line on a wide
   screen, where the column can reach ~1030px. */
.article__body p{font-size:var(--t-ms);color:var(--ink-soft);margin:0 0 1rem;max-width:92ch}
.article__back{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;
  font-family:var(--sans);font-weight:600;font-size:var(--t-ms);color:var(--teal);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:opacity .25s var(--ease)}
.article__back:hover{opacity:.6}
/* — more-news rail — */
.article__aside{position:sticky;top:calc(var(--navh,84px) + 1.4rem)}
.article__asidehead{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);margin:0 0 1.1rem}
.article__more{display:flex;flex-direction:column;gap:1.1rem}
.article__morecard{display:grid;grid-template-columns:clamp(72px,7vw,96px) 1fr;gap:.9rem;
  align-items:center;text-decoration:none;color:inherit;
  padding-bottom:1.1rem;border-bottom:1px solid var(--teal-soft)}
.article__more>a:last-child{border-bottom:0;padding-bottom:0}
.article__morecard img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-surface);display:block}
.article__morecard span{font-family:var(--display);font-weight:600;font-size:var(--t-ms);
  line-height:1.4;color:var(--ink);transition:color .25s var(--ease)}
.article__morecard:hover span{color:var(--teal)}
@media (max-width:940px){
  .article__grid{grid-template-columns:1fr;gap:2.4rem}
  .article__aside{position:static}
}
/* the news cards on the home page are now links — the whole card is the target */
.news__card{position:relative}
.news__link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.news__link span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.news__card:hover .news__title{color:var(--teal)}
.news__title{transition:color .3s var(--ease)}
.news__card:focus-within{outline:2px solid var(--gold-soft);outline-offset:3px}

/* =====================================================================
   NEWS CAROUSEL — transform-driven, not a scroll container.
   A scroll-snap track was tried first and rejected: with these cards the
   browser reported scrollWidth 3097 against clientWidth 1308 but a scroll
   range of exactly [0,0], so neither scrollLeft, scrollTo nor scrollIntoView
   could move it — in RTL *or* LTR. Translating the track is deterministic,
   works identically in both directions, and keeps swipe via pointer events.
   ===================================================================== */
.news__carousel{position:relative}
.news__viewport{overflow:hidden}
.news__track{--news-gap:clamp(1.2rem,2.4vw,2.2rem);
  display:flex;gap:var(--news-gap);
  transition:transform .6s var(--ease);
  touch-action:pan-y;             /* vertical page scroll still belongs to the page */
  touch-action:pan-y}
.news__track.is-dragging{transition:none;user-select:none}
/* four across from 1200px up — at three the cards ran ~450px wide and, with
   a picture on top, far too tall. */
.news__card{flex:0 0 calc((100% - 3*var(--news-gap))/4);min-width:0}
@media (max-width:1199.98px){.news__card{flex-basis:calc((100% - 2*var(--news-gap))/3)}}
@media (max-width:940px){.news__card{flex-basis:calc((100% - var(--news-gap))/2)}}
@media (max-width:640px){.news__card{flex-basis:86%}}
/* centred, and FILLED — the outlined version was a 1px teal-soft hairline on
   cream, which all but disappeared at a glance. */
.news__nav{display:flex;gap:.8rem;justify-content:center;
  margin-top:clamp(1.4rem,2.6vw,2.1rem)}
.news__navbtn{inline-size:clamp(46px,3.4vw,58px);aspect-ratio:1;border-radius:var(--r-pill);
  border:1px solid var(--petrol);background:var(--petrol);color:#fff;
  display:grid;place-items:center;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease)}
.news__navbtn svg{inline-size:38%;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.news__navbtn:hover{background:var(--terra);border-color:var(--terra);color:#fff}
.news__navbtn:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
/* disabled reads as an empty outline rather than a dimmed solid, so the
   available direction is obvious at a glance. */
.news__navbtn[disabled]{background:transparent;color:var(--petrol);
  border-color:rgba(20,71,80,.28);opacity:.5;pointer-events:none}
[dir="rtl"] .news__navbtn svg{transform:scaleX(-1)}
@media (prefers-reduced-motion:reduce){.news__track{transition:none}}

/* release date on the banner + source credit at the foot of the body */
.article__date{color:var(--ink-faint);font-family:var(--sans);font-weight:500;
  font-size:var(--t-sm);letter-spacing:.02em;margin:.85rem 0 0}

/* =====================================================================
   FULL TEAM PAGE (team.html / team-ar.html)
   ===================================================================== */
.teampage{background:var(--canvas);
  padding-block-start:calc(clamp(112px,8vw,140px) + var(--sec))}
.teampage__head{max-width:100%;margin-bottom:clamp(2rem,4vw,3.2rem)}
.teampage__lede{margin:.9rem 0 0;color:var(--ink-soft);max-width:60ch}
.teampage__group{margin-bottom:clamp(2.4rem,4.5vw,3.6rem)}
.teampage__gtitle{font-family:var(--sans);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  margin:0 0 1.2rem;padding-bottom:.7rem;border-bottom:1px solid var(--teal-soft)}
.teampage__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));
  gap:clamp(.9rem,1.8vw,1.4rem)}
.teampage__grid .member{max-width:none;margin-inline:0;flex:none}
.teampage__backwrap{margin-top:clamp(1.4rem,3vw,2.2rem)}

/* the card is headline-only now (the body lives on the detail page), so the
   body block no longer needs to reserve room for a paragraph. */
.news__body{padding-bottom:clamp(1.1rem,2vw,1.5rem)}
/* the longest Arabic headline wraps to SIX lines at a quarter-row card, and
   align-items:stretch made every card reserve that height — which is where the
   dead white space under the short titles came from. Three lines caps it; the
   full headline is on the detail page and stays in the link's accessible name. */
.news__title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
  overflow:hidden}

/* =====================================================================
   NEWS LISTING PAGE (news.html / news-ar.html)
   Same card component as the home rail, laid out as a grid instead of a
   track. The cards keep their flex declaration — it is simply inert on a
   grid item — so there is one card style to maintain, not two.
   ===================================================================== */
/* the nav is position:fixed and ~110px tall, but .section only pads 49.5px,
   so the h1 rendered UNDER the logo. Article pages don't need this — their
   banner is full-bleed and the nav is meant to sit over it. */
.newspage{background:var(--canvas);
  padding-block-start:calc(clamp(112px,8vw,140px) + var(--sec))}
.newspage__grid{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));
  gap:clamp(1.2rem,2.4vw,2.2rem);align-items:stretch}
/* the rail clamps titles to three lines to keep every card the same height;
   the listing has room, so let them run full length */
.newspage__grid .news__title{-webkit-line-clamp:none;display:block;overflow:visible}
.news__viewallwrap{text-align:center;margin:clamp(1.1rem,2.2vw,1.7rem) 0 0}

/* =====================================================================
   EXTRA-WIDE TIER  (>1921px)
   The base scales all hit their ceilings between 1655px and 2051px, so from
   roughly 2000px up the site stopped growing: at 3440 the shell still measured
   1840px, leaving 800px of dead gutter, while every heading sat at its cap.

   EVERY expression below is CONTINUOUS AT EXACTLY 1920px — each vw coefficient
   was solved so the tier evaluates to the same number the base rule already
   gives at 1920. Nothing at or below 1920px changes because of this block.
     --shell   base caps 1840 ; 95.8333vw x 19.2 = 1840.0
     --pad     base gives 69.12 ; 3.6vw x 19.2   = 69.12
     --fs-hero base gives 74.88 ; 3.9vw x 19.2   = 74.88
     --fs-h2   base caps 40    ; 2.0833vw x 19.2 = 40.0
     --fs-fig  base caps 36.8  ; 1.9167vw x 19.2 = 36.8
   This block MUST stay last in the file: .vision__statgrid and .partners__track
   are declared after the @media (min-width:1441px) block, so a tier placed there
   would lose on source order at equal specificity.
   ===================================================================== */

/* =====================================================================
   FULL-SCREEN SECTIONS — only the map is pinned to the viewport now. The
   others were reverted to natural flow: forcing a fixed height on a section
   whose content does not want it either strands empty space or squeezes the
   content until it clips. The hero (100svh) and the morph (.fly, a 300vh
   scroll pin) were always full-screen by their own design.
   ===================================================================== */
/* the map keeps its own frame: grid stretches, tab bar stays flush on the
   section's bottom edge (same mechanics as the earlier wide-screen pass) */
/* clear the fixed nav: without this the title sat under it on every full-screen
   viewport. The content row is minmax(0,1fr) so the ledger absorbs the loss and
   the tab bar stays on the section's bottom edge. */
/* a screen MINUS the nav: with scroll-margin-top offsetting the jump by the
   nav's height, a full 100svh section would hang its last ~90px below the fold
   and take the tab bar with it. */
.invmap.section{min-height:calc(100svh - var(--navh,90px));display:flex;flex-direction:column;
  padding-block-end:0;
  /* Do NOT pad for the nav. Reserving its height put a ~100px empty band above
     the title. The nav is an overlay, so the right tool is scroll-margin-top:
     anchor jumps and scrollIntoView land the section below the nav, while the
     section itself keeps ordinary top padding. */
  /* ~55% of the nav's height rather than all of it: the section title is
     CENTRED while the nav's logo and burger sit at the two edges, so the title
     can rise into that band without colliding with anything. */
  padding-block-start:calc(var(--navh,90px) * .45);
  scroll-margin-top:var(--navh,90px)}
/* space-between, NOT center: centering split the leftover height around the
   rows and left a bare petrol band under the tab bar. This pins the content
   to the top and the tabs to the section's real bottom edge at any height. */
.invmap.section .invmap__grid{flex:1 1 auto;align-content:space-between;
  /* minmax(0,1fr) lets the content row COMPRESS to the available height —
     unconstrained, the ledger column pushed the tab row 24px past the section
     edge. The ledger's stat rows are 1fr each, so they absorb the squeeze. */
  grid-template-rows:minmax(0,1fr) auto}
/* grid items default to min-height:auto, which silently re-expands the 1fr row
   to the ledger's content height — at some viewports that grew the section past
   100svh and pushed the tab bar below the fold. min-height:0 lets the track
   actually bind; the ledger's inner flex (photo fixed, stats 1fr rows) absorbs
   the difference. */
.invmap.section .invmap__mapblock,.invmap.section .invmap__ledger{min-height:0}
/* On a short viewport the floor is the MAP, not the ledger: the ledger's rows
   are 1fr and compress, but the svg's height is width/aspect and only shrinks
   if --map-w does. Lower the vh coefficient where height is scarce so the whole
   section — title, map, ledger, tabs — still lands on one screen. */
@media (max-height:820px){
  /* was navh + .3rem — a whole nav height of dead space above the title on the
     screens with the least room, which is what pushed the tabs off a 1280x700
     viewport (the delivered V12 overflowed here by 90px). The section already
     carries scroll-margin-top:var(--navh), so landing on the #investments
     anchor still clears the nav without paying for it in layout. */
  .invmap.section{padding-block-start:calc(var(--navh,90px) * .45);
    --map-w:calc(clamp(260px,42vh,560px) * 1.2131)}
  /* the ledger's own floor is photo + 4 stat rows; the rows are already at their
     min-content, so the photo is what has to give for the column to fit its row */
  .invmap.section .invmap__shot{max-height:clamp(64px,10vh,168px);
    margin-bottom:clamp(.35rem,.8vh,.7rem)}
}


/* ═══════════════ CLIENT AUDIT DIRECTIONS (design deck, 2026-08) ═══════════════
   01 hero: purpose-led CTAs · dash indicators · cream wave into About
   02 about/vision: statement-led About, PIF marker, Vision prioritised
   03 impact: petrol band, hero metric + data pictograms (no decorative icons)
   04 portfolio: full-bleed region photography, highlighted map region,
      data-led ledger. Deck placeholder figures were NOT adopted — the site's
      verified data stays. */

/* — 01 · primary gold button (deck's filled CTA) — */
.btn--gold{background:var(--gold);color:#fff}
.btn--gold::after{content:"";position:absolute;inset:0;z-index:-1;background:#8A6838;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.btn--gold:hover{transform:translateY(-2px)}
.btn--gold:hover::after{transform:scaleX(1);transform-origin:left}
.btn--gold:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* — 01 · hero dash indicators + wave — */
.hero__dot.is-active{background:#fff}
.hero__dot{transition:width .45s var(--ease),background-color .45s var(--ease)}
.hero__dot.is-active{width:54px}
.hero__dot:focus-visible{outline:2px solid var(--gold-soft);outline-offset:4px}
.hero__wave{position:absolute;inset-inline:0;bottom:-1px;width:100%;
  height:clamp(36px,6.5vh,80px);z-index:3;pointer-events:none;display:block}
.hero__wave path{fill:var(--canvas)}
[dir="rtl"] .hero__wave{transform:scaleX(-1)}
.hero__in{position:relative;z-index:4}

/* — 02 · statement-led About — */
.about2{display:grid;grid-template-columns:minmax(200px,.66fr) minmax(0,1.84fr);
  gap:clamp(1.6rem,4vw,4.5rem);align-items:start}
.about2__side{border-inline-start:2px solid var(--gold);padding-inline-start:clamp(1rem,1.8vw,1.6rem)}
.about2__side .eyebrow{margin-bottom:1.1rem}
.about2__co{font-family:var(--display);font-weight:600;font-size:clamp(1.15rem,1.75vw,1.6rem);
  line-height:1.32;color:var(--ink);letter-spacing:-.01em;max-width:14ch}
.about2__lede{font-family:var(--display);font-weight:600;color:var(--terra);
  font-size:clamp(1.7rem,2.9vw,2.7rem);line-height:1.16;letter-spacing:-.02em;
  margin-bottom:clamp(1.2rem,2.6vh,1.9rem);max-width:16ch}
.about2__body{color:var(--ink-soft);font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.85;max-width:58ch}
.about2__pif{display:flex;align-items:center;gap:1rem;margin-top:clamp(1.6rem,3.4vh,2.6rem);
  color:var(--ink);font-weight:600;letter-spacing:.04em}
.about2__pifrule{display:block;width:clamp(2.4rem,4vw,3.6rem);height:1px;background:var(--gold);flex:none}
.about2__dia{display:block;width:11px;height:11px;transform:rotate(45deg);
  border:1.5px solid var(--gold);flex:none}
@media (max-width:820px){
  .about2{grid-template-columns:1fr;gap:1.6rem}
  .about2__side{border-inline-start:0;padding-inline-start:0}
}

/* — 02 · Vision prioritised, Philosophy/Model supporting — */
.vision2__row{display:grid;grid-template-columns:minmax(200px,.7fr) minmax(0,1.85fr);
  gap:clamp(1.4rem,3.6vw,4rem);align-items:start;margin-bottom:clamp(2.4rem,6vh,4.4rem)}
.vision2__label{color:var(--gold);font-weight:700;font-size:.8rem;letter-spacing:.22em;
  text-transform:uppercase;border-inline-start:2px solid var(--gold);
  padding-inline-start:clamp(.9rem,1.6vw,1.4rem);line-height:1.7}
.vision2__lede{font-family:var(--display);font-weight:500;
  font-size:clamp(1.35rem,2.35vw,2.15rem);line-height:1.52;color:var(--ink);
  letter-spacing:-.01em;max-width:36ch}
.vision2__lede strong{font-weight:700;color:var(--petrol)}
.vision2__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,4vw,4rem)}
.vision2__col h3{color:var(--terra);font-weight:700;font-size:.82rem;letter-spacing:.2em;
  text-transform:uppercase;border-top:2px solid var(--terra);padding-top:1rem;margin-bottom:.9rem}
.vision2__col p{color:var(--ink-soft);line-height:1.85;max-width:52ch}
@media (max-width:820px){
  .vision2__row,.vision2__cols{grid-template-columns:1fr}
  .vision2__row{gap:1.2rem}
}

/* — 03 · Investment Impact band — */
.impact{position:relative;background:var(--petrol);color:#fff;overflow:hidden;
  padding-block:clamp(3.8rem,8.5vh,6.2rem) clamp(3.6rem,8vh,6rem)}
.impact__curve{position:absolute;top:-1px;inset-inline:0;width:100%;
  height:clamp(40px,7.5vh,88px);pointer-events:none;display:block}
.impact__curve path{fill:var(--canvas-2)}
[dir="rtl"] .impact__curve{transform:scaleX(-1)}
.impact__head{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);
  margin-bottom:clamp(2.2rem,5.5vh,4rem);font-family:var(--display)}
.impact__head-a{font-weight:700;font-size:clamp(1.35rem,2.3vw,2.1rem);
  letter-spacing:.06em;text-transform:uppercase;color:#F4EFE1;flex:none}
.impact__head-b{font-weight:300;font-size:clamp(1.35rem,2.3vw,2.1rem);
  letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,225,.72);flex:none}
.impact__headrule{flex:1;height:1px;background:rgba(244,239,225,.32)}
.impact__grid{display:grid;grid-template-columns:minmax(250px,1.32fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,3rem);align-items:stretch}
.impact__card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:6px;padding:clamp(1.4rem,2.6vw,2.4rem);
  display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.impact__fig{font-family:var(--display);font-weight:600;font-size:clamp(2rem,3.2vw,3rem);
  line-height:1.05;color:#F4EFE1;letter-spacing:-.01em}
.impact__cur{font-size:.55em;font-weight:600;letter-spacing:.03em;color:#E9DFC8}
.impact__figlabel{color:rgba(244,239,225,.8);font-size:clamp(.95rem,1.2vw,1.1rem)}
.impact__item{display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem}
.impact__picto{width:100%;max-width:210px;height:auto;color:#DCE9E6;margin-bottom:.35rem}
.impact__n{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,1.7vw,1.6rem);color:#F4EFE1}
.impact__l{color:rgba(244,239,225,.66);font-size:.9rem;line-height:1.6;max-width:26ch}
@media (max-width:1100px){
  .impact__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .impact__card{grid-column:1/-1;flex-direction:row;align-items:center;
    justify-content:space-between;flex-wrap:wrap}
}
@media (max-width:680px){.impact__grid{grid-template-columns:1fr;gap:2rem}
  .impact__item{justify-content:flex-start}}

/* — 04 · portfolio: full-bleed region photography behind the map — */
.invmap{position:relative}
.invmap__bgs{position:absolute;inset:0;z-index:0;overflow:hidden}
.invmap__bg{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity .9s var(--ease);transform:scale(1.02)}
.invmap__bg.is-active{opacity:1}
.invmap__bgs::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,44,50,.92),rgba(14,44,50,.78) 42%,rgba(14,44,50,.88))}
.invmap__headwrap{position:relative;z-index:1}

/* glass ledger, data-led rows: figure + unit on one line, label under */
.invmap__ledger{background:rgba(10,36,42,.55);border:1px solid rgba(255,255,255,.14);
  border-radius:6px;padding:clamp(1rem,1.9vw,1.7rem);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.invmap__rtitle{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,1.7vw,1.55rem);
  color:#F4EFE1;letter-spacing:.02em;padding-bottom:clamp(.45rem,1vh,.8rem);
  border-bottom:1px solid rgba(244,239,225,.35);margin-bottom:clamp(.25rem,.7vh,.55rem)}
.invmap__stats .stat{display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"fig unit" "label label";column-gap:.55rem;align-items:baseline;
  padding-block:clamp(.45rem,1vh,.8rem)}
.invmap__stats .stat__rule{display:none}
.invmap__stats .stat__fig{grid-area:fig}
.invmap__stats .stat__unit{grid-area:unit;margin:0;font-size:.72rem;
  letter-spacing:.1em;color:var(--gold-soft)}
.invmap__stats .stat__row{grid-area:label;display:block}
.invmap__stats .stat__label{max-width:none}

/* the active region fills cream on the map, named beside its pin */
.invmap__region{transition:fill .5s var(--ease)}
.invmap__region.is-hot{fill:#F2ECDC;stroke:#F2ECDC}
.invmap__maplabel{font:600 15px var(--sans);letter-spacing:.1em;fill:#fff;
  text-transform:uppercase;paint-order:stroke;stroke:rgba(10,36,42,.6);stroke-width:3px}

/* clear selected/hover/focus states on the region tabs */
.invmap__tab:focus-visible{outline:2px solid var(--gold-soft);outline-offset:-3px}
.invmap__tab.is-active{color:#F4EFE1;box-shadow:inset 0 -2px 0 var(--gold-soft)}


/* — audit polish round (verification findings) — */
/* the deck's About block carries its gold eyebrow; eyebrows stay hidden
   site-wide per the earlier request — re-enabled ONLY here, words only */
.about2__side .eyebrow{display:inline-flex;color:var(--gold);font-weight:700;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase}
.about2__side .eyebrow__no,.about2__side .eyebrow__rule{display:none}
/* deck p9 shows a SOLID gold diamond on the PIF marker */
.about2__dia{background:var(--gold);border:0}
/* deck bolds the vision phrase in the same ink, not a second color */
.vision2__lede strong{color:inherit}
/* deck's supporting sub-heads are full-size terracotta, not micro-labels */
.vision2__col h3{font-size:clamp(.95rem,1.3vw,1.25rem);letter-spacing:.14em}
/* deck p7 composes the hero symmetrically — centre the slide stack */
.hero__slides,.hero__slide,.hero__morphcap{text-align:center}
.hero__kicker{justify-content:center}
.hero__cta{justify-content:center}
.hero__dots{justify-content:center}
.hero__title{margin-inline:auto}
/* the secondary CTA is gold-stroked in the deck, not white */
.hero__cta .btn--line-light{box-shadow:inset 0 0 0 1px rgba(194,160,106,.8)}
.hero__cta .btn--line-light:hover{box-shadow:inset 0 0 0 1px var(--gold-soft);
  background:rgba(165,129,74,.22)}
/* comfortable hit area for the dashes: the 3px dash is painted content-box
   inside a 23px-tall button, so the target is real without changing the look */
.hero__dot{height:23px;padding:10px 0;background-clip:content-box}
.hero__dot::after{top:10px;bottom:10px}
/* deck p14: the country reads as translucent glass with dashed province
   borders so the region photograph shows through; active region stays cream */
.invmap__region{fill:rgba(236,243,241,.10);stroke:rgba(255,255,255,.55);
  stroke-dasharray:4 3}
.invmap__region.is-hot{fill:#F2ECDC;stroke:#F2ECDC;stroke-dasharray:none}
.invmap__bgs::after{background:linear-gradient(180deg,rgba(14,44,50,.86),rgba(14,44,50,.6) 42%,rgba(14,44,50,.8))}
.invmap__maplabel{font-size:17px}
.invmap__head{text-align:start}
/* pictograms share one band and the figures one baseline (deck p13) */
.impact__picto{height:clamp(68px,9vh,92px);width:auto;max-width:100%}
.impact__l{min-height:3.1em}

/* deck p7: the hero CTA pair is pill-shaped */
.hero__cta .btn{border-radius:999px}


/* — type & alignment pass (fonts / icons / text) — */
/* Arabic suffix is a word, not a letter: give it a real gap on its logical side */
[dir="rtl"] .stat__suffix{margin-inline-start:.16em}
/* the ledger figure line reads as ONE piece: number · suffix · unit share the
   baseline, the unit sized as part of the figure rather than a floating tag */
.invmap__stats .stat{row-gap:.3rem}
.invmap__stats .stat__unit{font-size:.82rem;font-weight:600;letter-spacing:.06em;
  line-height:1.2;align-self:baseline}
[dir="rtl"] .invmap__stats .stat__unit{letter-spacing:0}
.invmap__stats .stat__label{margin-top:.1rem}
/* pictograms sit as blocks — inline SVGs carried a stray baseline gap */
.impact__picto{display:block}
/* centered hero kickers are plain text per the deck — the stretching rule and
   diamond ornament belonged to the old start-aligned composition */
.hero__slide .hero__kicker-rule,.hero__slide .hero__kicker-dia{display:none}

/* ledger: the whole figure phrase shares ONE baseline — number, suffix word
   and unit ("67 ألف متر مربع" / "339 K M²"), no superscript fragments */
.invmap__stats .stat__fig{align-items:baseline}
.invmap__stats .stat__suffix{margin-top:0;font-size:.55em}
[dir="rtl"] .invmap__stats .stat__suffix{margin-inline-start:.3em}


/* ═══ deck-exact spec pass (sizes/colors read from the PDF's text layers,
   960pt slide of a 1920px design → px = pt × 2) ═══ */
:root{--ice:#CAE6EA}

/* — hero: 32px kicker · 89px two-line title · 22px pill CTAs (deck p7) — */
.hero__kicker{font-size:clamp(.95rem,1.65vw,1.55rem);font-weight:400}
.hero__slide .hero__title{font-size:clamp(2.3rem,4.6vw,5.2rem);line-height:1.06}
.hero__cta .btn{font-size:clamp(.85rem,1.05vw,1rem);padding:1.1rem 2.4rem}

/* — destination captions: kicker above · name · region line below (deck p8) — */
.hero__morphcap .hero__morph-over{font-size:clamp(.72rem,.95vw,.95rem);margin-bottom:1.2rem}
.hero__morphcap .hero__title{font-size:clamp(2.1rem,4vw,4.4rem);margin-bottom:.7rem}
.hero__morph-sub{font-size:clamp(.68rem,.9vw,.9rem);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#EBD9B2;margin-bottom:1.3rem;
  text-shadow:0 2px 20px rgba(0,0,0,.6)}

/* — about: deck's exact inks; 65px statement · 32px body/subtitle/marker — */
.about2__co{color:#334345;font-size:clamp(1.2rem,1.65vw,1.6rem)}
.about2__lede{font-size:clamp(1.9rem,3.37vw,3.3rem)}
.about2__body{font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.78;color:#2A1D07}
.about2__pif{font-size:clamp(1rem,1.4vw,1.3rem);color:#263234}

/* — vision: gold label · lede · terracotta col heads at the deck's shared 32px — */
.vision2__label{font-size:clamp(.9rem,1.5vw,1.4rem);letter-spacing:.14em}
.vision2__lede{font-size:clamp(1.15rem,1.65vw,1.6rem);line-height:1.66;max-width:60ch}
.vision2__col h3{font-size:clamp(1rem,1.5vw,1.4rem);letter-spacing:.08em}

/* — impact: 56/48px split header · ice-blue data figures (deck #CAE6EA) — */
.impact__head-a{font-size:clamp(1.6rem,2.9vw,3rem)}
.impact__head-b{font-size:clamp(1.4rem,2.5vw,2.6rem)}
.impact__fig{color:var(--ice);font-size:clamp(2.1rem,3.37vw,3.5rem)}
.impact__cur{color:var(--ice)}
.impact__figlabel{color:var(--ice);font-size:clamp(1rem,1.8vw,1.45rem)}
.impact__n{color:var(--ice);font-size:clamp(1.15rem,1.875vw,1.9rem)}
.impact__picto{color:#BFD9DB}

/* — portfolio: stacked ASFAR / INVESTMENT / PORTFOLIO title (deck p14) — */
.invmap__title-a{display:block;font-weight:700;color:#FCF7EE;
  font-size:clamp(1.5rem,2.9vw,2.8rem);line-height:1.12;letter-spacing:.04em}
.invmap__title-b{display:block;font-weight:300;color:#D2DDDE;
  font-size:clamp(1.3rem,2.5vw,2.4rem);line-height:1.16;letter-spacing:.14em;
  text-transform:uppercase}
/* — panel: 48px region name · figures with the unit AT figure size, in the
   deck's ice blue; labels calm cream beneath — */
.invmap__rtitle{font-size:clamp(1.35rem,2.4vw,2.3rem)}
.invmap__stats .stat__fig,.invmap__stats .stat__suffix{color:var(--ice)}
.invmap__stats .stat__unit{font-size:var(--fs-fig);font-weight:700;color:var(--ice);
  letter-spacing:0;text-transform:none;line-height:1}
.invmap__stats .stat__label{color:#EDE7DA}
.invmap__maplabel{font-size:21px}

/* — the deck's palm-frond pattern on the two cream sections (p9/p10) — */
.about,.approach{position:relative;overflow:hidden}
.about>.wrap,.approach>.wrap{position:relative;z-index:1}
.about::before,.approach::before{content:"";position:absolute;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20520%20700%22%20fill%3D%22none%22%20stroke%3D%22%23A6824A%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.09%22%3E%3Cpath%20d%3D%22M70%20640%20Q150%20240%20470%2050%20M80%20593%20Q182%20500%20257%20513%20M80%20593%20Q33%20464%20-40%20441%20M93%20546%20Q193%20462%20263%20478%20M93%20546%20Q54%20422%20-14%20397%20M108%20500%20Q205%20426%20271%20444%20M108%20500%20Q76%20382%2013%20355%20M124%20456%20Q219%20391%20280%20411%20M124%20456%20Q100%20344%2042%20316%20M142%20414%20Q234%20357%20290%20379%20M142%20414%20Q125%20308%2072%20279%20M162%20373%20Q250%20325%20301%20347%20M162%20373%20Q151%20273%20104%20244%20M184%20334%20Q267%20294%20313%20317%20M184%20334%20Q179%20241%20136%20212%20M208%20296%20Q286%20264%20327%20287%20M208%20296%20Q208%20211%20170%20182%20M233%20260%20Q306%20235%20343%20258%20M233%20260%20Q237%20183%20205%20154%20M261%20226%20Q328%20207%20359%20230%20M261%20226%20Q268%20156%20240%20129%20M290%20193%20Q351%20179%20378%20201%20M290%20193%20Q300%20131%20277%20106%20M321%20162%20Q375%20153%20398%20174%20M321%20162%20Q333%20108%20314%2085%20M354%20133%20Q401%20127%20420%20146%20M354%20133%20Q367%2087%20351%2065%20M389%20105%20Q429%20102%20443%20119%20M389%20105%20Q402%2067%20389%2048%20M425%2078%20Q458%2078%20469%2093%20M425%2078%20Q437%2048%20428%2032%22/%3E%3C/svg%3E") no-repeat center/contain}
.about::before{inset-inline-end:-9%;top:-10%;width:min(44vw,680px);height:min(58vw,900px);
  transform:rotate(12deg)}
.approach::before{inset-inline-start:-11%;bottom:-16%;width:min(40vw,620px);height:min(52vw,820px);
  transform:rotate(-158deg)}
[dir="rtl"] .about::before{transform:rotate(-12deg) scaleX(-1)}
[dir="rtl"] .approach::before{transform:rotate(158deg) scaleX(-1)}

/* keep the one-screen fit on short viewports despite the larger spec */
@media (max-height:820px){
  .invmap__title-a{font-size:1.45rem}
  .invmap__title-b{font-size:1.2rem}
  .invmap__rtitle{font-size:1.3rem}
  .invmap__stats .stat__unit{font-size:calc(var(--fs-fig) * .8)}
}

/* deck renders the whole figure phrase at ONE size — "61K M²", "1.1B SAR" —
   only the superscript is smaller. Suffix joins the figure size in the ledger,
   the card unit joins the 1.1 figure. */
.invmap__stats .stat__suffix{font-size:1em;margin-top:0}
.invmap__stats .stat{column-gap:.3rem}
.impact__cur{font-size:1em}
@media (max-height:820px){
  .invmap__stats .stat__unit,.invmap__stats .stat__suffix{font-size:calc(var(--fs-fig) * .8)}
}

/* deck p14 anchors the portfolio title at the leading edge, beside the map */
.invmap__head .statement{margin-inline:0;max-width:none}

/* — auto-playing hero film (is-film): same caption swap as the old scrub mode
   but WITHOUT its 160vh scroll-scrub height — the hero stays 96svh and the
   film simply plays. Canvas fades in over the video scene. — */
.hero.is-film .hero__slides,.hero.is-film .hero__dots{display:none}
.hero.is-film .hero__morphcap{display:block}
.hero__morph-canvas{transition:opacity 1.2s var(--ease)}
.hero.is-film .hero__morph-canvas{opacity:1;visibility:visible}
.hero.is-film .hero__scenes{opacity:0;transition:opacity 1.2s var(--ease)}


/* — deck p9 "Option 1" applied as-is — */
.about2__lede{font-weight:700}
.about2__body{max-width:47ch;line-height:1.62}
/* second frond, lower-left of About (deck shows fragments in both corners) */
.about::after{content:"";position:absolute;pointer-events:none;
  inset-inline-start:-14%;bottom:-34%;width:min(30vw,460px);height:min(38vw,600px);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20520%20700%22%20fill%3D%22none%22%20stroke%3D%22%23A6824A%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.09%22%3E%3Cpath%20d%3D%22M70%20640%20Q150%20240%20470%2050%20M80%20593%20Q182%20500%20257%20513%20M80%20593%20Q33%20464%20-40%20441%20M93%20546%20Q193%20462%20263%20478%20M93%20546%20Q54%20422%20-14%20397%20M108%20500%20Q205%20426%20271%20444%20M108%20500%20Q76%20382%2013%20355%20M124%20456%20Q219%20391%20280%20411%20M124%20456%20Q100%20344%2042%20316%20M142%20414%20Q234%20357%20290%20379%20M142%20414%20Q125%20308%2072%20279%20M162%20373%20Q250%20325%20301%20347%20M162%20373%20Q151%20273%20104%20244%20M184%20334%20Q267%20294%20313%20317%20M184%20334%20Q179%20241%20136%20212%20M208%20296%20Q286%20264%20327%20287%20M208%20296%20Q208%20211%20170%20182%20M233%20260%20Q306%20235%20343%20258%20M233%20260%20Q237%20183%20205%20154%20M261%20226%20Q328%20207%20359%20230%20M261%20226%20Q268%20156%20240%20129%20M290%20193%20Q351%20179%20378%20201%20M290%20193%20Q300%20131%20277%20106%20M321%20162%20Q375%20153%20398%20174%20M321%20162%20Q333%20108%20314%2085%20M354%20133%20Q401%20127%20420%20146%20M354%20133%20Q367%2087%20351%2065%20M389%20105%20Q429%20102%20443%20119%20M389%20105%20Q402%2067%20389%2048%20M425%2078%20Q458%2078%20469%2093%20M425%2078%20Q437%2048%20428%2032%22/%3E%3C/svg%3E")}
/* the vision surface arrives on the deck's subtle diagonal, not a curve */
.approach{clip-path:polygon(0 1.4vw,100% 0,100% 100%,0 100%)}
[dir="rtl"] .approach{clip-path:polygon(0 0,100% 1.4vw,100% 100%,0 100%)}

/* the after-frond needs its own paint box + a mirrored rotation */
.about::after{background-repeat:no-repeat;background-size:contain;
  background-position:center;transform:rotate(-152deg)}
[dir="rtl"] .about::after{transform:rotate(152deg) scaleX(-1)}


/* ═ About (deck p9) — em-locked type system: ONE scale drives every size in
   the block (deck ratios: title 2.045x body; eyebrow/subtitle/body/marker all
   equal), and the measures are in ch of their own font — so the ratios AND
   the line breaks hold at every viewport, not just the one it was tuned at. ═ */
.about2{font-size:clamp(12.5px,1.646vw,25.3px)}
.about2__side .eyebrow{font-size:1em;font-weight:700;letter-spacing:.05em;
  margin-bottom:.6em}
.about2__co{font-size:1em;line-height:1.4;font-weight:600;max-width:18ch}
.about2__lede{font-size:2.045em;line-height:1.18;font-weight:700;
  letter-spacing:-.015em;max-width:16ch;margin-bottom:.62em}
.about2__body{font-size:1em;line-height:1.5;max-width:47ch}
.about2__pif{font-size:1em;margin-top:1.75em;gap:.8em}
.about2__pifrule{width:2.6em}
.about2__dia{width:.5em;height:.5em}
.about2__side{padding-inline-start:1.1em}
.about2{gap:clamp(1.2rem,2.4vw,3rem)}


/* ═ the deck's OWN frond artwork, extracted 1:1 from p9 (vector paths, fill
   #EEE6DA) and placed at the deck's exact coordinates (page 960pt = 100vw).
   No rotation — the art is authored in its final orientation. ═ */
.about::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22730.73%2082.78%20256.86%20256.68%22%3E%3Cpath%20d%3D%22M960.79%20312.33%20C933.62%20324.85%20905.98%20336.09%20874.30%20335.12%20C874.46%20335.55%20874.62%20335.98%20874.48%20336.28%20C876.09%20336.66%20877.54%20336.61%20879.15%20336.99%20C898.24%20338.96%20916.63%20337.77%20934.48%20333.10%20C943.54%20330.48%20951.07%20325.72%20957.38%20318.97%20C958.92%20317.18%20960.16%20315.25%20961.40%20313.32%20C961.24%20312.89%20961.08%20312.46%20960.79%20312.33%20M936.83%20299.19%20C909.66%20311.72%20882.02%20322.95%20850.34%20321.98%20C850.50%20322.41%20850.66%20322.84%20850.52%20323.14%20C852.13%20323.52%20853.58%20323.47%20855.19%20323.85%20C874.28%20325.83%20892.67%20324.63%20910.52%20319.96%20C919.58%20317.34%20927.11%20312.58%20933.42%20305.84%20C934.96%20304.04%20936.20%20302.11%20937.44%20300.18%20C937.28%20299.75%20936.99%20299.62%20936.83%20299.19%20M909.93%20280.78%20C882.77%20293.30%20855.12%20304.54%20823.44%20303.57%20C823.60%20304.00%20823.76%20304.43%20823.63%20304.73%20C825.24%20305.11%20826.69%20305.06%20828.30%20305.44%20C847.38%20307.42%20865.78%20306.22%20883.63%20301.55%20C892.68%20298.93%20900.22%20294.17%20906.53%20287.42%20C908.06%20285.63%20909.30%20283.70%20910.55%20281.77%20C910.39%20281.34%20910.23%20280.91%20909.93%20280.78%20M892.03%20270.78%20C862.18%20276.71%20832.41%20280.91%20801.21%20272.66%20C801.07%20272.95%20801.23%20273.38%20800.96%20273.97%20C802.44%20274.65%20804.05%20275.03%20805.23%20275.57%20C823.44%20281.79%20841.98%20284.94%20860.83%20284.31%20C870.56%20284.13%20879.16%20280.94%20886.83%20275.89%20C888.82%20274.66%20890.36%20272.86%20892.05%20271.50%20L892.03%20270.78%20M870.15%20254.66%20C839.93%20258.29%20809.50%20260.04%20778.95%20249.59%20C778.81%20249.88%20778.97%20250.31%20778.70%20250.90%20C780.18%20251.58%20781.65%20252.26%20782.83%20252.80%20C800.66%20260.62%20818.96%20265.09%20837.86%20265.91%20C847.61%20266.46%20856.53%20264.12%20864.65%20259.64%20C866.64%20258.41%20868.34%20257.05%20870.33%20255.82%20C870.47%20255.52%20870.31%20255.09%20870.15%20254.66%20M854.23%20238.79%20C821.72%20234.94%20789.74%20229.19%20760.53%20211.14%20C760.39%20211.44%20760.12%20212.03%20759.99%20212.32%20C761.33%20213.30%20762.67%20214.27%20764.01%20215.24%20C780.53%20227.46%20798.54%20236.44%20818.18%20241.88%20C828.29%20244.74%20838.02%20244.56%20847.66%20242.20%20C850.11%20241.54%20852.40%20240.45%20854.55%20239.65%20C854.25%20239.51%20854.39%20239.22%20854.23%20238.79%20M828.67%20221.35%20C821.30%20217.96%20813.63%20214.45%20806.12%20211.36%20C789.20%20204.66%20771.88%20198.86%20754.96%20192.16%20C747.02%20189.23%20739.19%20185.28%20731.23%20181.63%20C731.69%20182.20%20731.55%20182.49%20731.84%20182.63%20C732.59%20183.33%20733.77%20183.87%20734.52%20184.57%20C751.88%20195.75%20770.19%20204.87%20788.64%20213.69%20C799.55%20218.69%20810.54%20221.96%20822.06%20223.31%20C825.12%20223.64%20828.31%20223.68%20831.37%20224.02%20C831.51%20223.72%20831.64%20223.43%20831.49%20223.00%20C830.60%20222.59%20829.56%20221.75%20828.67%20221.35%20M740.65%20159.53%20C740.06%20159.26%20739.47%20158.99%20738.88%20158.72%20C739.04%20159.15%20739.50%20159.72%20739.79%20159.85%20C752.37%20171.34%20766.47%20180.30%20780.69%20188.98%20C789.29%20194.35%20798.25%20197.39%20808.05%20199.38%20C809.66%20199.77%20811.11%20199.72%20812.72%20200.10%20C812.85%20199.80%20812.99%20199.51%20812.69%20199.37%20C812.24%20198.81%20811.78%20198.24%20811.19%20197.97%20C803.05%20193.16%20795.31%20187.47%20787.05%20183.68%20C771.12%20176.37%20755.47%20168.47%20740.65%20159.53%20M734.37%20128.08%20C734.08%20127.95%20733.49%20127.68%20733.19%20127.54%20C733.06%20127.84%20732.92%20128.13%20732.49%20128.29%20C750.03%20149.20%20768.28%20169.35%20795.69%20177.29%20C795.83%20177.00%20795.96%20176.70%20796.39%20176.54%20C795.94%20175.98%20795.91%20175.25%20795.32%20174.98%20C787.88%20169.42%20780.57%20163.57%20772.85%20158.60%20C759.05%20149.77%20745.66%20140.05%20734.37%20128.08%20M920.68%20194.30%20C920.25%20194.46%20919.82%20194.62%20919.39%20194.78%20C940.35%20222.25%20948.51%20253.49%20954.95%20285.37%20C955.24%20285.50%20955.67%20285.34%20955.97%20285.48%20C956.62%20283.28%20957.70%20280.92%20958.06%20278.58%20C959.76%20268.65%20959.15%20259.09%20955.34%20249.48%20C948.02%20230.41%20937.58%20213.48%20924.00%20197.97%20C922.79%20196.70%20921.88%20195.57%20920.68%20194.30%20M905.46%20186.24%20C905.03%20186.40%20904.60%20186.56%20904.17%20186.72%20C922.27%20215.74%20927.40%20247.37%20930.80%20279.64%20C931.10%20279.78%20931.53%20279.62%20931.82%20279.75%20C932.77%20277.69%20933.85%20275.33%20934.50%20273.13%20C937.09%20263.60%20937.34%20253.72%20934.68%20243.93%20C929.25%20224.65%20920.37%20206.65%20908.34%20190.07%20C907.43%20188.94%20906.37%20187.37%20905.46%20186.24%20M948.01%20203.99%20C947.58%20204.15%20947.15%20204.30%20946.72%20204.46%20C967.67%20231.93%20975.84%20263.17%20982.28%20295.05%20C982.57%20295.19%20983.00%20295.03%20983.30%20295.16%20C983.95%20292.96%20985.03%20290.60%20985.39%20288.27%20C987.09%20278.33%20986.48%20268.77%20982.67%20259.17%20C975.35%20240.10%20964.91%20223.17%20951.33%20207.65%20C950.12%20206.38%20949.21%20205.25%20948.01%20203.99%20M740.51%20107.69%20L740.08%20107.85%20C740.24%20108.28%20740.27%20109.01%20740.72%20109.57%20C746.32%20120.71%20754.05%20130.33%20763.33%20138.88%20C767.83%20143.08%20773.00%20145.81%20779.12%20146.48%20C776.26%20143.38%20773.40%20140.28%20770.40%20137.48%20C762.91%20130.47%20754.98%20123.62%20747.49%20116.61%20C744.79%20113.94%20742.65%20110.82%20740.51%20107.69%20M877.33%20165.84%20C876.90%20166.00%20876.47%20166.16%20876.04%20166.32%20C894.15%20195.34%20899.14%20227.26%20902.68%20259.24%20C902.97%20259.37%20903.40%20259.21%20903.70%20259.35%20C904.64%20257.28%20905.73%20254.92%20906.38%20252.72%20C908.96%20243.20%20909.21%20233.31%20906.56%20223.53%20C901.12%20204.25%20892.25%20186.25%20880.22%20169.66%20C879.31%20168.53%20878.24%20166.97%20877.33%20165.84%20M851.33%20152.48%20C850.90%20152.64%20850.47%20152.80%20850.04%20152.96%20C867.24%20180.85%20872.18%20211.32%20875.67%20241.84%20C875.97%20241.98%20876.40%20241.82%20876.69%20241.96%20C877.64%20239.89%20878.59%20237.83%20879.24%20235.63%20C881.98%20226.53%20881.96%20217.24%20879.47%20207.88%20C874.35%20189.46%20865.79%20172.33%20854.22%20156.30%20C853.31%20155.17%20852.24%20153.61%20851.33%20152.48%20M831.57%20138.77%20L831.14%20138.93%20C834.18%20151.75%20837.95%20164.55%20840.56%20177.53%20C843.17%20190.51%20844.47%20203.25%20846.54%20217.41%20C847.65%20215.77%20848.48%20214.73%20849.03%20213.55%20C852.54%20205.88%20853.14%20197.58%20850.96%20189.09%20C847.76%20175.83%20842.97%20162.93%20837.03%20150.20%20C835.16%20146.49%20833.30%20142.77%20831.57%20138.77%20M805.90%20122.35%20C805.47%20122.51%20805.04%20122.67%20805.04%20122.67%20C814.79%20144.99%20818.06%20168.99%20825.36%20191.98%20C826.07%20191.23%20826.90%20190.18%20827.01%20189.16%20C829.67%20181.81%20829.56%20174.27%20826.98%20166.66%20C822.28%20152.00%20815.43%20138.15%20807.42%20124.47%20C806.97%20123.91%20806.65%20123.05%20805.90%20122.35%20M782.79%20104.24%20C790.51%20122.43%20795.22%20141.73%20799.80%20161.32%20C800.50%20160.57%20801.07%20160.12%20801.34%20159.53%20C801.97%20156.60%20803.61%20153.79%20803.09%20151.05%20C802.49%20146.13%20801.89%20141.21%20800.13%20136.48%20C795.69%20125.16%20789.95%20114.31%20782.79%20104.24%20M749.57%2083.28%20C749.43%2083.58%20749.16%2084.17%20748.73%2084.33%20C753.77%2087.35%20756.54%2092.20%20759.02%2096.91%20C761.80%20101.75%20764.44%20106.89%20766.49%20111.76%20C771.57%20124.80%20777.95%20137.37%20785.32%20149.32%20C804.51%20180.63%20826.27%20210.25%20853.25%20235.48%20C889.83%20270.12%20931.02%20294.74%20976.64%20308.89%20L980.64%20302.51%20C945.56%20291.05%20912.88%20273.56%20883.24%20251.03%20C873.41%20243.66%20863.69%20235.28%20854.40%20226.73%20C831.33%20205.43%20810.93%20181.43%20792.65%20155.90%20C788.24%20149.95%20784.13%20144.13%20783.00%20136.47%20C781.34%20126.07%20775.52%20116.98%20770.13%20107.72%20C766.29%20101.31%20761.88%2095.36%20757.04%2089.57%20C754.92%2087.17%20752.11%2085.52%20749.57%2083.28%22%20fill%3D%22%23EEE6DA%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E");background-size:contain;
  background-repeat:no-repeat;background-position:center;transform:none;
  width:26.76vw;height:26.74vw;top:1.70vw;bottom:auto;inset-inline-end:-2.82vw}
.about::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-26.15%20262.82%20245.65%20177.29%22%3E%3Cpath%20d%3D%22M180.91%20394.88%20C179.63%20394.88%20178.34%20394.99%20177.03%20395.19%20C180.07%20397.40%20183.10%20399.33%20186.14%20400.71%20C194.15%20404.57%20202.16%20408.16%20209.89%20412.30%20C212.65%20413.68%20215.13%20415.89%20217.90%20417.82%20L218.17%20417.54%20C217.90%20417.27%20217.62%20416.71%20217.34%20416.44%20C210.16%20408.71%20201.33%20402.64%20191.94%20397.68%20C188.42%20395.81%20184.74%20394.88%20180.91%20394.88%20M156.32%20388.30%20C156.04%20389.12%20155.49%20389.68%20155.49%20390.23%20C155.49%20392.71%20155.21%20395.47%20156.04%20397.68%20C157.70%20401.54%20159.36%20405.40%20162.12%20408.99%20C168.47%20417.27%20175.65%20424.71%20183.93%20431.33%20C173.16%20417.82%20164.88%20403.19%20156.32%20388.30%20M155.77%20374.50%20C155.77%20374.78%20155.49%20375.05%20155.49%20375.05%20C156.04%20375.33%20156.32%20375.88%20156.87%20376.16%20C164.33%20378.92%20171.51%20381.95%20178.96%20384.16%20C192.49%20388.02%20205.47%20392.99%20217.62%20399.88%20C217.90%20400.16%20218.45%20400.16%20218.72%20400.16%20C218.72%20399.88%20219.00%20399.61%20219.00%20399.33%20C199.67%20386.36%20180.07%20374.50%20155.77%20374.50%20M128.43%20368.98%20C127.88%20370.09%20127.60%20371.19%20127.32%20372.02%20C127.05%20378.64%20128.98%20384.71%20132.85%20390.50%20C140.30%20401.26%20148.86%20411.20%20158.80%20420.02%20C159.36%20420.58%20159.91%20420.85%20160.46%20421.40%20C160.74%20421.13%20161.01%20421.13%20161.29%20420.85%20C148.03%20404.85%20139.75%20386.09%20128.43%20368.98%20M146.63%20358.69%20C144.60%20358.72%20142.58%20358.84%20140.58%20359.05%20C139.20%20359.33%20137.82%20359.60%20136.71%20359.60%20C136.71%20359.88%20136.71%20360.16%20136.71%20360.16%20C137.26%20360.43%20137.82%20360.71%20138.37%20360.98%20C146.10%20363.19%20153.83%20365.95%20161.56%20367.05%20C176.20%20369.26%20190.83%20372.02%20205.19%20375.88%20C205.75%20376.16%20206.30%20376.16%20206.85%20376.16%20C206.57%20375.61%20206.02%20375.33%20205.75%20375.05%20C192.77%20368.71%20178.96%20364.85%20165.15%20360.98%20C158.94%20359.33%20152.73%20358.60%20146.63%20358.69%20M104.68%20353.81%20C104.13%20355.46%20103.58%20356.57%20103.58%20357.67%20C102.47%20364.85%20104.13%20371.74%20107.72%20378.09%20C113.52%20388.02%20120.42%20397.68%20128.43%20406.51%20C130.91%20409.26%20133.40%20411.75%20135.88%20414.51%20L136.16%20414.23%20C130.64%20404.57%20124.56%20394.92%20119.32%20384.99%20C114.07%20374.78%20109.93%20364.57%20104.68%20353.81%20M138.09%20341.91%20C133.12%20341.95%20128.15%20342.36%20123.18%20343.05%20C120.42%20343.33%20117.94%20344.15%20115.45%20344.71%20C115.45%20344.98%20115.45%20345.26%20115.45%20345.53%20C116.28%20345.81%20117.11%20346.08%20118.21%20346.08%20C125.11%20347.19%20132.02%20348.29%20139.20%20348.84%20C154.66%20350.22%20170.12%20351.05%20185.59%20352.43%20C192.77%20352.98%20199.95%20354.36%20207.40%20355.46%20C207.13%20354.91%20207.13%20354.91%20206.85%20354.64%20C206.02%20354.36%20204.92%20354.09%20204.09%20353.81%20C187.24%20348.84%20170.12%20345.53%20153.00%20343.05%20C148.03%20342.22%20143.06%20341.88%20138.09%20341.91%20M75.14%20340.57%20C74.86%20340.57%2074.58%20340.57%2074.31%20340.57%20C74.03%20342.50%2073.75%20344.43%2073.75%20346.36%20C73.75%20354.36%2075.96%20362.09%2080.38%20368.98%20C88.94%20382.78%2099.99%20394.64%20113.24%20404.85%20C114.35%20405.68%20115.45%20406.51%20116.55%20407.33%20C116.83%20407.06%20117.11%20407.06%20117.38%20406.78%20C96.40%20388.30%2085.35%20364.85%2075.14%20340.57%20M93.39%20337.50%20C93.36%20337.39%2093.36%20337.39%2093.36%20337.53%20L93.40%20337.50%20L93.39%20337.50%20M48.90%20332.84%20C48.63%20332.84%2048.35%20332.84%2047.80%20332.84%20C47.52%20334.77%2047.25%20336.98%2047.25%20338.91%20C47.25%20347.19%2049.46%20355.19%2054.15%20362.64%20C63.26%20376.98%2074.86%20389.68%2088.39%20400.16%20C89.49%20400.99%2090.60%20401.82%2091.70%20402.64%20C91.98%20402.37%2092.25%20402.09%2092.53%20402.09%20C71.27%20382.78%2059.40%20358.22%2048.90%20332.84%20M122.35%20326.77%20C113.52%20326.77%20105.51%20329.26%2098.33%20333.67%20L93.40%20337.50%20L93.64%20338.08%20C120.97%20333.39%20148.59%20330.36%20176.75%20338.36%20C176.75%20338.08%20176.75%20337.53%20176.75%20337.26%20C175.37%20336.70%20174.27%20336.15%20172.89%20335.60%20C156.32%20329.53%20139.47%20326.50%20122.35%20326.77%20M0.03%20324.01%20C-0.25%20324.01%20-0.53%20324.01%20-0.80%20324.29%20C-0.80%20326.22%20-1.08%20328.43%20-0.80%20330.36%20C0.03%20338.64%203.06%20346.64%208.31%20353.53%20C18.80%20367.33%2031.51%20378.64%2046.14%20388.02%20C47.25%20388.85%2048.63%20389.40%2049.73%20390.23%20C50.01%20389.95%2050.28%20389.68%2050.56%20389.40%20C27.09%20372.02%2013.01%20348.29%200.03%20324.01%20M21.29%20322.91%20C21.01%20322.91%2020.74%20322.91%2020.18%20322.91%20C19.91%20324.84%2019.63%20327.05%2019.63%20328.98%20C19.63%20337.26%2021.84%20345.26%2026.54%20352.71%20C35.65%20367.05%2047.25%20379.74%2060.78%20390.23%20C61.88%20391.05%2062.99%20391.88%2064.09%20392.71%20C64.37%20392.43%2064.64%20392.16%2064.92%20392.16%20C43.38%20373.12%2031.78%20348.29%2021.29%20322.91%20M-24.55%20322.63%20C-24.83%20322.63%20-25.10%20322.63%20-25.38%20322.91%20C-25.38%20324.84%20-25.65%20327.05%20-25.38%20328.98%20C-24.55%20337.26%20-21.51%20345.26%20-16.26%20352.15%20C-5.77%20365.95%206.93%20377.26%2021.57%20386.64%20C22.67%20387.47%2024.05%20388.02%2025.16%20388.85%20C25.43%20388.57%2025.71%20388.30%2025.98%20388.02%20C2.51%20370.64%20-11.57%20347.19%20-24.55%20322.63%20M-23.44%20309.67%20L-25.38%20316.01%20C17.15%20317.67%2057.46%20328.70%2096.12%20347.74%20C120.14%20359.60%20142.24%20374.50%20163.50%20390.78%20C168.47%20394.64%20173.16%20398.50%20175.92%20404.30%20C179.51%20412.58%20186.69%20418.64%20193.32%20424.71%20C198.01%20428.85%20202.98%20432.71%20208.23%20436.30%20C210.44%20437.96%20213.20%20438.51%20215.69%20439.61%20C215.69%20439.34%20215.96%20439.06%20215.96%20438.51%20C211.27%20437.13%20207.68%20434.09%20204.64%20430.78%20C201.33%20427.47%20198.01%20424.16%20195.25%20420.30%20C187.80%20410.92%20179.79%20402.37%20170.95%20394.09%20C147.76%20373.12%20123.18%20354.36%2095.02%20340.02%20C56.91%20320.70%2017.42%20310.22%20-23.44%20309.67%20M126.97%20308.35%20C117.87%20308.58%20108.84%20309.70%2099.99%20311.87%20C91.98%20313.81%2085.35%20317.67%2079.55%20323.46%20C78.17%20324.84%2077.07%20326.50%2075.96%20327.88%20C76.52%20328.43%2076.52%20328.43%2076.79%20328.70%20C100.82%20318.50%20125.11%20309.94%20152.45%20311.05%20C152.45%20310.77%20152.45%20310.22%20152.18%20309.94%20C150.80%20309.67%20149.41%20309.39%20148.31%20309.39%20C144.24%20308.91%20140.16%20308.58%20136.10%20308.42%20C133.05%20308.30%20130.01%20308.28%20126.97%20308.35%20M112.40%20296.32%20C100.30%20296.75%2088.39%20298.77%2076.79%20302.49%20C69.06%20304.98%2062.71%20309.39%2057.46%20315.46%20C56.36%20316.84%2055.25%20318.77%2054.15%20320.15%20C54.42%20320.70%2054.70%20320.70%2054.98%20320.98%20C77.90%20309.12%20101.37%20298.36%20128.70%20297.80%20C128.70%20297.53%20128.43%20296.98%20128.43%20296.70%20C127.05%20296.70%20125.67%20296.42%20124.56%20296.42%20C120.49%20296.22%20116.43%20296.18%20112.40%20296.32%20M102.75%20277.11%20C101.37%20277.39%20100.26%20277.39%2098.88%20277.66%20C82.87%20280.42%2067.96%20285.94%2054.42%20294.22%20C47.52%20298.36%2042.55%20304.15%2038.96%20311.32%20C38.13%20312.98%2037.58%20314.91%2037.03%20316.84%20C37.58%20316.84%2037.86%20317.12%2038.13%20317.12%20C57.19%20300.29%2077.07%20284.84%20103.30%20277.94%20C103.02%20277.66%20103.02%20277.39%20102.75%20277.11%20M76.52%20268.28%20C75.14%20268.56%2073.75%20268.56%2072.37%20268.83%20C56.36%20271.59%2041.45%20277.11%2027.92%20285.39%20C21.01%20289.53%2016.04%20295.32%2012.45%20302.49%20C11.62%20304.15%2011.07%20306.08%2010.52%20308.01%20C11.07%20308.01%2011.35%20308.29%2011.62%20308.29%20C30.68%20291.46%2050.56%20276.01%2076.79%20269.11%20C76.79%20268.83%2076.52%20268.56%2076.52%20268.28%20M53.60%20263.32%20C52.22%20263.59%2051.11%20263.59%2049.73%20263.87%20C33.72%20266.63%2018.80%20272.15%205.27%20280.42%20C-1.63%20284.56%20-6.60%20290.35%20-10.19%20297.53%20C-11.02%20299.18%20-11.57%20301.11%20-12.12%20303.05%20C-11.57%20303.05%20-11.30%20303.32%20-11.02%20303.32%20C8.03%20286.49%2027.92%20271.04%2054.15%20264.14%20C53.87%20263.87%2053.87%20263.59%2053.60%20263.32%22%20fill%3D%22%23EEE6DA%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E");background-size:contain;
  background-repeat:no-repeat;background-position:center;transform:none;
  width:25.59vw;height:18.47vw;bottom:-1vw;top:auto;inset-inline-start:-2.73vw}
.approach::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2218.80%20561.75%20256.86%20256.68%22%3E%3Cpath%20d%3D%22M45.60%20791.29%20C72.77%20803.82%20100.41%20815.06%20132.09%20814.09%20C131.93%20814.52%20131.77%20814.95%20131.91%20815.24%20C130.30%20815.62%20128.85%20815.57%20127.24%20815.96%20C108.16%20817.93%2089.76%20816.73%2071.91%20812.07%20C62.85%20809.44%2055.32%20804.69%2049.01%20797.94%20C47.47%20796.14%2046.23%20794.22%2044.99%20792.29%20C45.15%20791.86%2045.31%20791.43%2045.60%20791.29%20M69.56%20778.15%20C96.73%20790.68%20124.37%20801.92%20156.05%20800.95%20C155.89%20801.38%20155.73%20801.81%20155.87%20802.10%20C154.26%20802.48%20152.81%20802.44%20151.20%20802.82%20C132.12%20804.79%20113.72%20803.59%2095.87%20798.93%20C86.81%20796.30%2079.28%20791.55%2072.97%20784.80%20C71.43%20783.01%2070.19%20781.08%2068.95%20779.15%20C69.11%20778.72%2069.40%20778.58%2069.56%20778.15%20M96.46%20759.74%20C123.62%20772.27%20151.27%20783.51%20182.95%20782.54%20C182.79%20782.97%20182.63%20783.40%20182.76%20783.69%20C181.15%20784.07%20179.70%20784.02%20178.09%20784.41%20C159.01%20786.38%20140.61%20785.18%20122.77%20780.52%20C113.71%20777.89%20106.17%20773.14%2099.86%20766.39%20C98.33%20764.60%2097.09%20762.67%2095.85%20760.74%20C96.00%20760.31%2096.16%20759.88%2096.46%20759.74%20M114.36%20749.74%20C144.21%20755.68%20173.98%20759.87%20205.18%20751.62%20C205.32%20751.92%20205.16%20752.35%20205.43%20752.94%20C203.95%20753.62%20202.34%20754.00%20201.16%20754.54%20C182.95%20760.75%20164.41%20763.91%20145.56%20763.27%20C135.84%20763.09%20127.23%20759.90%20119.56%20754.85%20C117.57%20753.62%20116.03%20751.83%20114.34%20750.46%20L114.36%20749.74%20M136.24%20733.63%20C166.46%20737.26%20196.89%20739.00%20227.44%20728.55%20C227.58%20728.85%20227.42%20729.28%20227.69%20729.87%20C226.21%20730.55%20224.74%20731.22%20223.56%20731.76%20C205.73%20739.59%20187.43%20744.06%20168.53%20744.88%20C158.79%20745.42%20149.86%20743.09%20141.74%20738.60%20C139.75%20737.38%20138.05%20736.01%20136.06%20734.78%20C135.92%20734.49%20136.08%20734.06%20136.24%20733.63%20M152.16%20717.75%20C184.67%20713.90%20216.66%20708.15%20245.86%20690.11%20C246.00%20690.40%20246.27%20690.99%20246.40%20691.29%20C245.06%20692.26%20243.72%20693.23%20242.38%20694.20%20C225.86%20706.43%20207.85%20715.41%20188.21%20720.85%20C178.10%20723.70%20168.38%20723.52%20158.73%20721.17%20C156.28%20720.50%20154.00%20719.41%20151.84%20718.61%20C152.14%20718.48%20152.00%20718.18%20152.16%20717.75%20M177.72%20700.31%20C185.09%20696.93%20192.76%20693.41%20200.27%20690.32%20C217.19%20683.63%20234.51%20677.82%20251.43%20671.13%20C259.37%20668.20%20267.20%20664.25%20275.16%20660.59%20C274.71%20661.16%20274.84%20661.46%20274.55%20661.59%20C273.80%20662.29%20272.62%20662.83%20271.87%20663.53%20C254.51%20674.71%20236.20%20683.83%20217.76%20692.65%20C206.84%20697.66%20195.85%20700.92%20184.33%20702.28%20C181.27%20702.61%20178.08%20702.65%20175.02%20702.98%20C174.88%20702.69%20174.75%20702.39%20174.91%20701.96%20C175.79%20701.55%20176.83%20700.72%20177.72%20700.31%20M265.74%20638.50%20C266.33%20638.23%20266.92%20637.96%20267.51%20637.68%20C267.35%20638.11%20266.89%20638.68%20266.60%20638.82%20C254.02%20650.30%20239.93%20659.27%20225.70%20667.94%20C217.10%20673.31%20208.14%20676.35%20198.35%20678.35%20C196.74%20678.73%20195.29%20678.68%20193.68%20679.06%20C193.54%20678.77%20193.41%20678.47%20193.70%20678.34%20C194.15%20677.77%20194.61%20677.21%20195.20%20676.94%20C203.34%20672.13%20211.09%20666.43%20219.34%20662.64%20C235.27%20655.34%20250.92%20647.44%20265.74%20638.50%20M272.02%20607.05%20C272.31%20606.91%20272.90%20606.64%20273.20%20606.51%20C273.33%20606.80%20273.47%20607.10%20273.90%20607.26%20C256.36%20628.16%20238.12%20648.32%20210.70%20656.26%20C210.57%20655.96%20210.43%20655.67%20210.00%20655.51%20C210.45%20654.94%20210.48%20654.21%20211.07%20653.94%20C218.51%20648.38%20225.82%20642.53%20233.54%20637.56%20C247.34%20628.73%20260.73%20619.01%20272.02%20607.05%20M85.71%20673.27%20C86.14%20673.43%2086.57%20673.58%2087.00%20673.74%20C66.04%20701.21%2057.88%20732.45%2051.44%20764.33%20C51.15%20764.47%2050.72%20764.31%2050.42%20764.44%20C49.77%20762.24%2048.69%20759.88%2048.33%20757.55%20C46.63%20747.61%2047.24%20738.05%2051.05%20728.45%20C58.37%20709.38%2068.81%20692.45%2082.39%20676.93%20C83.60%20675.66%2084.51%20674.53%2085.71%20673.27%20M100.93%20665.21%20C101.36%20665.37%20101.79%20665.53%20102.22%20665.69%20C84.12%20694.70%2079.00%20726.34%2075.59%20758.60%20C75.30%20758.74%2074.87%20758.58%2074.57%20758.72%20C73.62%20756.65%2072.54%20754.29%2071.89%20752.09%20C69.31%20742.57%2069.06%20732.68%2071.71%20722.90%20C77.14%20703.62%2086.02%20685.62%2098.05%20669.03%20C98.96%20667.90%20100.02%20666.34%20100.93%20665.21%20M58.38%20682.95%20C58.81%20683.11%2059.24%20683.27%2059.67%20683.43%20C38.72%20710.90%2030.56%20742.14%2024.12%20774.01%20C23.82%20774.15%2023.39%20773.99%2023.10%20774.13%20C22.44%20771.93%2021.36%20769.57%2021.00%20767.23%20C19.30%20757.30%2019.92%20747.73%2023.72%20738.13%20C31.04%20719.06%2041.48%20702.13%2055.06%20686.61%20C56.27%20685.35%2057.18%20684.22%2058.38%20682.95%20M265.88%20586.66%20L266.31%20586.82%20C266.15%20587.25%20266.13%20587.97%20265.67%20588.54%20C260.07%20599.68%20252.34%20609.29%20243.06%20617.84%20C238.56%20622.05%20233.39%20624.78%20227.27%20625.44%20C230.13%20622.34%20232.99%20619.25%20235.99%20616.44%20C243.48%20609.43%20251.41%20602.58%20258.90%20595.57%20C261.60%20592.90%20263.74%20589.78%20265.88%20586.66%20M129.06%20644.80%20C129.49%20644.96%20129.92%20645.12%20130.35%20645.28%20C112.24%20674.30%20107.25%20706.23%20103.71%20738.20%20C103.42%20738.34%20102.99%20738.18%20102.69%20738.31%20C101.75%20736.25%20100.66%20733.89%20100.01%20731.69%20C97.43%20722.16%2097.18%20712.28%2099.83%20702.49%20C105.27%20683.22%20114.15%20665.22%20126.17%20648.63%20C127.08%20647.50%20128.15%20645.94%20129.06%20644.80%20M155.06%20631.44%20C155.49%20631.60%20155.92%20631.76%20156.35%20631.92%20C139.15%20659.81%20134.21%20690.29%20130.72%20720.81%20C130.42%20720.94%20129.99%20720.78%20129.70%20720.92%20C128.75%20718.86%20127.81%20716.79%20127.15%20714.59%20C124.41%20705.49%20124.43%20696.20%20126.92%20686.85%20C132.04%20668.43%20140.60%20651.29%20152.17%20635.27%20C153.08%20634.14%20154.15%20632.58%20155.06%20631.44%20M174.83%20617.73%20L175.26%20617.89%20C172.21%20630.71%20168.44%20643.51%20165.83%20656.49%20C163.22%20669.48%20161.92%20682.21%20159.85%20696.37%20C158.74%20694.74%20157.91%20693.69%20157.37%20692.51%20C153.85%20684.84%20153.25%20676.55%20155.43%20668.05%20C158.63%20654.80%20163.42%20641.89%20169.36%20629.17%20C171.23%20625.45%20173.09%20621.74%20174.83%20617.73%20M200.49%20601.31%20C200.92%20601.47%20201.35%20601.63%20201.35%20601.63%20C191.60%20623.96%20188.33%20647.95%20181.03%20670.94%20C180.33%20670.19%20179.49%20669.15%20179.38%20668.13%20C176.72%20660.78%20176.83%20653.23%20179.41%20645.62%20C184.11%20630.97%20190.96%20617.11%20198.97%20603.44%20C199.42%20602.87%20199.74%20602.01%20200.49%20601.31%20M223.60%20583.21%20C215.88%20601.39%20211.17%20620.69%20206.59%20640.29%20C205.89%20639.54%20205.32%20639.08%20205.05%20638.49%20C204.43%20635.57%20202.78%20632.75%20203.30%20630.01%20C203.90%20625.10%20204.51%20620.18%20206.26%20615.45%20C210.71%20604.12%20216.44%20593.28%20223.60%20583.21%20M256.82%20562.25%20C256.96%20562.54%20257.23%20563.13%20257.66%20563.29%20C252.62%20566.32%20249.85%20571.16%20247.37%20575.87%20C244.59%20580.72%20241.95%20585.86%20239.90%20590.72%20C234.82%20603.77%20228.44%20616.33%20221.07%20628.29%20C201.88%20659.59%20180.12%20689.21%20153.15%20714.45%20C116.56%20749.09%2075.38%20773.70%2029.75%20787.85%20L25.75%20781.48%20C60.83%20770.02%2093.51%20752.53%20123.15%20729.99%20C132.98%20722.63%20142.70%20714.24%20151.99%20705.69%20C175.06%20684.39%20195.46%20660.39%20213.74%20634.86%20C218.15%20628.91%20222.26%20623.10%20223.39%20615.44%20C225.05%20605.04%20230.87%20595.94%20236.26%20586.68%20C240.11%20580.28%20244.52%20574.32%20249.36%20568.53%20C251.47%20566.14%20254.28%20564.49%20256.82%20562.25%22%20fill%3D%22%23EEE6DA%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E");background-size:contain;
  background-repeat:no-repeat;background-position:center;transform:none;
  width:26.76vw;height:26.74vw;top:7.45vw;bottom:auto;inset-inline-start:1.93vw}
.approach::after{content:"";position:absolute;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22801.25%20511.88%20202.88%20146.54%22%3E%3Cpath%20d%3D%22M833.18%20549.31%20C834.23%20549.31%20835.30%20549.22%20836.38%20549.05%20C833.88%20547.23%20831.37%20545.63%20828.86%20544.49%20C822.26%20541.31%20815.65%20538.34%20809.27%20534.93%20C806.99%20533.79%20804.94%20531.97%20802.66%20530.37%20L802.43%20530.60%20C802.66%20530.83%20802.89%20531.28%20803.12%20531.51%20C809.04%20537.89%20816.33%20542.90%20824.08%20547.00%20C826.98%20548.54%20830.02%20549.31%20833.18%20549.31%20M853.47%20554.74%20C853.70%20554.06%20854.16%20553.60%20854.16%20553.15%20C854.16%20551.10%20854.38%20548.82%20853.70%20547.00%20C852.33%20543.81%20850.97%20540.62%20848.69%20537.66%20C843.45%20530.83%20837.52%20524.68%20830.69%20519.21%20C839.57%20530.37%20846.41%20542.45%20853.47%20554.74%20M853.93%20566.13%20C853.93%20565.90%20854.16%20565.68%20854.16%20565.68%20C853.70%20565.45%20853.47%20564.99%20853.02%20564.77%20C846.86%20562.49%20840.94%20559.98%20834.79%20558.16%20C823.62%20554.97%20812.91%20550.87%20802.89%20545.18%20C802.66%20544.95%20802.21%20544.95%20801.98%20544.95%20C801.98%20545.18%20801.75%20545.41%20801.75%20545.63%20C817.70%20556.34%20833.88%20566.13%20853.93%20566.13%20M876.49%20570.69%20C876.94%20569.78%20877.17%20568.86%20877.40%20568.18%20C877.62%20562.71%20876.03%20557.70%20872.84%20552.92%20C866.69%20544.04%20859.62%20535.84%20851.42%20528.55%20C850.97%20528.10%20850.51%20527.87%20850.05%20527.41%20C849.83%20527.64%20849.60%20527.64%20849.37%20527.87%20C860.31%20541.08%20867.14%20556.57%20876.49%20570.69%20M861.46%20579.18%20C863.14%20579.16%20864.81%20579.06%20866.46%20578.89%20C867.60%20578.66%20868.74%20578.43%20869.65%20578.43%20C869.65%20578.20%20869.65%20577.97%20869.65%20577.97%20C869.19%20577.75%20868.74%20577.52%20868.28%20577.29%20C861.90%20575.47%20855.52%20573.19%20849.14%20572.28%20C837.07%20570.46%20824.99%20568.18%20813.14%20564.99%20C812.69%20564.77%20812.23%20564.77%20811.78%20564.77%20C812.00%20565.22%20812.46%20565.45%20812.69%20565.68%20C823.40%20570.91%20834.79%20574.10%20846.18%20577.29%20C851.31%20578.66%20856.43%20579.26%20861.46%20579.18%20M896.08%20583.21%20C896.54%20581.85%20896.99%20580.94%20896.99%20580.03%20C897.90%20574.10%20896.54%20568.41%20893.57%20563.17%20C888.79%20554.97%20883.09%20547.00%20876.49%20539.71%20C874.43%20537.43%20872.38%20535.38%20870.33%20533.11%20L870.11%20533.33%20C874.66%20541.31%20879.68%20549.28%20884.00%20557.48%20C888.33%20565.90%20891.75%20574.33%20896.08%20583.21%20M868.51%20593.04%20C872.61%20593.01%20876.71%20592.67%20880.81%20592.10%20C883.09%20591.87%20885.14%20591.18%20887.19%20590.73%20C887.19%20590.50%20887.19%20590.27%20887.19%20590.05%20C886.51%20589.82%20885.83%20589.59%20884.92%20589.59%20C879.22%20588.68%20873.52%20587.77%20867.60%20587.31%20C854.84%20586.17%20842.08%20585.49%20829.32%20584.35%20C823.40%20583.90%20817.47%20582.76%20811.32%20581.85%20C811.55%20582.30%20811.55%20582.30%20811.78%20582.53%20C812.46%20582.76%20813.37%20582.98%20814.05%20583.21%20C827.95%20587.31%20842.08%20590.05%20856.21%20592.10%20C860.31%20592.78%20864.41%20593.06%20868.51%20593.04%20M920.46%20594.15%20C920.69%20594.15%20920.92%20594.15%20921.14%20594.15%20C921.37%20592.55%20921.60%20590.96%20921.60%20589.36%20C921.60%20582.76%20919.78%20576.38%20916.13%20570.69%20C909.07%20559.30%20899.95%20549.51%20889.02%20541.08%20C888.11%20540.40%20887.19%20539.71%20886.28%20539.03%20C886.06%20539.26%20885.83%20539.26%20885.60%20539.48%20C902.92%20554.74%20912.03%20574.10%20920.46%20594.15%20M905.39%20596.68%20C905.42%20596.76%20905.42%20596.76%20905.42%20596.65%20L905.39%20596.67%20L905.39%20596.68%20M942.11%20600.52%20C942.33%20600.52%20942.56%20600.52%20943.02%20600.52%20C943.25%20598.93%20943.47%20597.11%20943.47%20595.51%20C943.47%20588.68%20941.65%20582.07%20937.78%20575.92%20C930.26%20564.08%20920.69%20553.60%20909.52%20544.95%20C908.61%20544.27%20907.70%20543.58%20906.79%20542.90%20C906.56%20543.13%20906.33%20543.36%20906.11%20543.36%20C923.65%20559.30%20933.45%20579.57%20942.11%20600.52%20M881.50%20605.53%20C888.79%20605.53%20895.40%20603.48%20901.32%20599.84%20L905.39%20596.67%20L905.19%20596.20%20C882.64%20600.07%20859.85%20602.57%20836.61%20595.97%20C836.61%20596.20%20836.61%20596.65%20836.61%20596.88%20C837.75%20597.33%20838.66%20597.79%20839.80%20598.25%20C853.47%20603.26%20867.37%20605.76%20881.50%20605.53%20M982.44%20607.81%20C982.66%20607.81%20982.89%20607.81%20983.12%20607.58%20C983.12%20605.99%20983.35%20604.17%20983.12%20602.57%20C982.44%20595.74%20979.93%20589.14%20975.60%20583.44%20C966.94%20572.05%20956.46%20562.71%20944.39%20554.97%20C943.47%20554.29%20942.33%20553.83%20941.42%20553.15%20C941.20%20553.38%20940.97%20553.60%20940.74%20553.83%20C960.11%20568.18%20971.73%20587.77%20982.44%20607.81%20M964.89%20608.72%20C965.12%20608.72%20965.35%20608.72%20965.80%20608.72%20C966.03%20607.13%20966.26%20605.31%20966.26%20603.71%20C966.26%20596.88%20964.44%20590.27%20960.56%20584.12%20C953.04%20572.28%20943.47%20561.80%20932.31%20553.15%20C931.40%20552.47%20930.49%20551.78%20929.57%20551.10%20C929.35%20551.33%20929.12%20551.55%20928.89%20551.55%20C946.66%20567.27%20956.23%20587.77%20964.89%20608.72%20M1002.72%20608.95%20C1002.94%20608.95%201003.17%20608.95%201003.40%20608.72%20C1003.40%20607.13%201003.63%20605.31%201003.40%20603.71%20C1002.72%20596.88%201000.21%20590.27%20995.88%20584.58%20C987.22%20573.19%20976.74%20563.85%20964.66%20556.11%20C963.75%20555.43%20962.61%20554.97%20961.70%20554.29%20C961.47%20554.52%20961.25%20554.74%20961.02%20554.97%20C980.39%20569.32%20992.01%20588.68%201002.72%20608.95%20M1001.80%20619.65%20L1003.40%20614.42%20C968.31%20613.05%20935.04%20603.94%20903.14%20588.22%20C883.32%20578.43%20865.09%20566.13%20847.55%20552.69%20C843.45%20549.51%20839.57%20546.32%20837.29%20541.53%20C834.33%20534.70%20828.41%20529.69%20822.94%20524.68%20C819.07%20521.26%20814.97%20518.08%20810.64%20515.11%20C808.81%20513.75%20806.53%20513.29%20804.48%20512.38%20C804.48%20512.61%20804.26%20512.84%20804.26%20513.29%20C808.13%20514.43%20811.09%20516.94%20813.60%20519.67%20C816.33%20522.40%20819.07%20525.14%20821.35%20528.32%20C827.50%20536.07%20834.10%20543.13%20841.40%20549.96%20C860.54%20567.27%20880.81%20582.76%20904.06%20594.60%20C935.50%20610.54%20968.08%20619.20%201001.80%20619.65%20M877.69%20620.74%20C885.20%20620.55%20892.65%20619.63%20899.95%20617.83%20C906.56%20616.24%20912.03%20613.05%20916.82%20608.27%20C917.95%20607.13%20918.87%20605.76%20919.78%20604.62%20C919.32%20604.17%20919.32%20604.17%20919.09%20603.94%20C899.27%20612.37%20879.22%20619.43%20856.66%20618.52%20C856.66%20618.74%20856.66%20619.20%20856.89%20619.43%20C858.03%20619.65%20859.17%20619.88%20860.08%20619.88%20C863.44%20620.28%20866.80%20620.55%20870.16%20620.68%20C872.67%20620.78%20875.18%20620.80%20877.69%20620.74%20M889.71%20630.67%20C899.70%20630.32%20909.52%20628.65%20919.09%20625.58%20C925.47%20623.53%20930.71%20619.88%20935.04%20614.87%20C935.95%20613.73%20936.87%20612.14%20937.78%20611.00%20C937.55%20610.54%20937.32%20610.54%20937.09%20610.32%20C918.18%20620.11%20898.81%20628.99%20876.26%20629.45%20C876.26%20629.68%20876.49%20630.13%20876.49%20630.36%20C877.62%20630.36%20878.76%20630.59%20879.68%20630.59%20C883.04%20630.76%20886.38%20630.79%20889.71%20630.67%20M897.68%20646.53%20C898.81%20646.30%20899.73%20646.30%20900.87%20646.07%20C914.08%20643.80%20926.38%20639.24%20937.55%20632.41%20C943.25%20628.99%20947.35%20624.21%20950.31%20618.29%20C950.99%20616.92%20951.45%20615.33%20951.90%20613.73%20C951.45%20613.73%20951.22%20613.50%20950.99%20613.50%20C935.27%20627.40%20918.87%20640.15%20897.22%20645.85%20C897.45%20646.07%20897.45%20646.30%20897.68%20646.53%20M919.32%20653.82%20C920.46%20653.59%20921.60%20653.59%20922.74%20653.36%20C935.95%20651.08%20948.26%20646.53%20959.42%20639.70%20C965.12%20636.28%20969.22%20631.50%20972.18%20625.58%20C972.87%20624.21%20973.32%20622.62%20973.78%20621.02%20C973.32%20621.02%20973.09%20620.79%20972.87%20620.79%20C957.14%20634.69%20940.74%20647.44%20919.09%20653.13%20C919.09%20653.36%20919.32%20653.59%20919.32%20653.82%20M938.23%20657.92%20C939.37%20657.69%20940.28%20657.69%20941.42%20657.46%20C954.64%20655.18%20966.94%20650.63%20978.11%20643.80%20C983.80%20640.38%20987.90%20635.60%20990.87%20629.68%20C991.55%20628.31%20992.01%20626.71%20992.46%20625.12%20C992.01%20625.12%20991.78%20624.89%20991.55%20624.89%20C975.83%20638.79%20959.42%20651.54%20937.78%20657.23%20C938.01%20657.46%20938.01%20657.69%20938.23%20657.92%22%20fill%3D%22%23EEE6DA%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E") no-repeat center/contain;
  width:21.14vw;height:15.26vw;top:2.28vw;inset-inline-end:-4.60vw}
[dir="rtl"] .about::before,[dir="rtl"] .about::after,
[dir="rtl"] .approach::before,[dir="rtl"] .approach::after{transform:scaleX(-1)}


/* ═ Vision — deck Option 2 (p12), geometry and colors read from the PDF:
   band #F2ECE3 · gold card #B79A6E (189,109.5 352.5x236.3 of a 960pt page)
   · two #FCF7EE cards · brand-motif clusters painted in band color so they
   read as cutouts, cropped by the card edges exactly as the deck crops them.
   Type is em-locked to one scale (27.8/20.3/15.8/12/9.8pt ratios). ═ */
.approach{background:#F2ECE3}
.approach::before,.approach::after{content:none}
.vision3{font-size:clamp(12px,1.646vw,25.3px);
  display:grid;grid-template-columns:13.5% 38.35% 38.35%;
  column-gap:3.27%;align-items:start}
.vision3__title{font-family:var(--display);font-weight:700;color:var(--gold);
  font-size:1.688em;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;margin:0}
.vision3__gold{position:relative;overflow:hidden;background:#B79A6E;border-radius:6px;
  aspect-ratio:352.5/236.3;display:flex;flex-direction:column;justify-content:flex-end;
  padding:4% 3.4% 5.2%}
.vision3__motif{position:absolute;left:71.73%;top:-11.72%;width:49.75%;height:69.27%}
[dir="rtl"] .vision3__motif{left:auto;right:71.73%;transform:scaleX(-1)}
.vision3__goldin{position:relative}
.vision3__gold h3{font-family:var(--display);font-weight:500;color:#FCF7EE;
  font-size:1.284em;line-height:1.25;margin:0 0 .45em;letter-spacing:.01em}
.vision3__gold p{color:rgba(252,247,238,.94);font-size:max(.72em,13px);
  line-height:1.55;margin:0}
.vision3__cards{display:flex;flex-direction:column;gap:2.51vw}
.vision3__card{position:relative;overflow:hidden;background:#FCF7EE;border-radius:6px;
  min-height:11.1vw;padding:4.1% 3.85% 4.6%}
.vision3__cmotif{position:absolute;left:91.62%;top:9.59%;width:27.85%;height:85.28%}
[dir="rtl"] .vision3__cmotif{left:auto;right:91.62%;transform:scaleX(-1)}
.vision3__card h3{font-family:var(--display);font-weight:600;color:#334345;
  font-size:1em;line-height:1.3;margin:0 0 .5em}
.vision3__card p{color:#443F37;font-size:max(.6em,12px);line-height:1.55;margin:0;
  max-width:97%}
@media (max-width:940px){
  .vision3{grid-template-columns:1fr;row-gap:1.4rem}
  .vision3__gold{aspect-ratio:auto;padding:1.4rem}
  .vision3__cards{gap:1rem}
  .vision3__card{min-height:0}
}

/* the gold card and the two cards share ONE height (deck p12 has them equal:
   236.3 vs 106.5+24.1+105.8): the grid stretches, the two cards split their
   column evenly, the gold card follows — aligned top and bottom at any width */
.vision3{align-items:stretch}
.vision3__title{align-self:start}
.vision3__gold{aspect-ratio:auto;height:100%;min-height:24.6vw}
.vision3__cards{height:100%}
.vision3__card{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.vision3__card h3,.vision3__card p{position:relative}
@media (max-width:940px){.vision3__gold{height:auto;min-height:0}.vision3__cards{height:auto}}

/* deck p12 band rhythm: cards near the band top, generous space below */
.approach.section{padding-block:clamp(2.2rem,3.6vw,3.6rem) clamp(3.2rem,6vw,6.2rem)}

/* deck p13 exact: pictogram blocks keep their NATURAL heights and bottom-align
   above the shared number baseline (folders 2 rows sit shorter than the 3-row
   grids); the metric card is the deck's soft rounded tile, no border */
.impact__picto{height:auto;width:clamp(150px,12vw,232px);max-width:100%;margin-bottom:.55rem}
.impact__card{border:0;border-radius:14px;background:rgba(255,255,255,.085)}


/* ═ Vision — deck Option 1 (p10), read from the PDF: cream band #FCF7EE,
   gold VISION & MISSION label (rule left) beside the bold-phrase lede, two
   terracotta-ruled columns aligned under the lede, fronds at p10's own
   coordinates. Shared 15.8pt scale (=1.646vw), bodies 9.8pt, ink sampled
   #2E4345, line-height 1.3 throughout — all deck-measured. ═ */
.approach{background:#FCF7EE}
.approach.section{padding-block:clamp(3rem,7.3vw,7rem) clamp(4rem,10.6vw,10rem)}
.vision4{font-size:clamp(12px,1.646vw,25.3px);
  display:grid;grid-template-columns:26.3fr 57.8fr;
  grid-template-areas:"label lede" ". cols";
  padding-inline-start:5.7vw;
  row-gap:clamp(3rem,9.9vw,9.5rem)}
.vision4__label{grid-area:label;color:var(--gold);font-weight:700;font-size:1em;
  line-height:1.27;letter-spacing:.05em;text-transform:uppercase;margin:0;
  border-inline-start:1.5px solid var(--gold);padding-inline-start:1em}
.vision4__lede{grid-area:lede;color:#2A1D07;font-size:1em;line-height:1.3;
  margin:0;max-width:34.5em}
.vision4__lede strong{font-weight:700;color:inherit}
.vision4__cols{grid-area:cols;display:grid;
  grid-template-columns:1fr 1fr;column-gap:10.3%}
.vision4__col h3{color:#A9603F;font-weight:700;font-size:1em;line-height:1.3;
  letter-spacing:.05em;text-transform:uppercase;margin:0 0 .95em;
  border-top:1px solid #A9603F;padding-top:.55em}
.vision4__col p{color:#2E4345;font-size:max(.62em,12.5px);line-height:1.3;margin:0}
/* fronds at p10's coordinates (page 960pt = 100vw), bottom-anchored */
.approach::before,.approach::after{content:"";position:absolute;pointer-events:none;
  background-repeat:no-repeat;background-size:contain;background-position:center;
  transform:none}
.approach::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%2218.80%20248.21%20256.86%20256.68%22%3E%3Cpath%20d%3D%22M45.60%20477.75%20C72.77%20490.28%20100.41%20501.52%20132.09%20500.55%20C131.93%20500.98%20131.77%20501.41%20131.91%20501.70%20C130.30%20502.08%20128.85%20502.04%20127.24%20502.42%20C108.16%20504.39%2089.76%20503.19%2071.91%20498.53%20C62.85%20495.90%2055.32%20491.15%2049.01%20484.40%20C47.47%20482.61%2046.23%20480.68%2044.99%20478.75%20C45.15%20478.32%2045.31%20477.89%2045.60%20477.75%20M69.56%20464.61%20C96.73%20477.14%20124.37%20488.38%20156.05%20487.41%20C155.89%20487.84%20155.73%20488.27%20155.87%20488.56%20C154.26%20488.95%20152.81%20488.90%20151.20%20489.28%20C132.12%20491.25%20113.72%20490.05%2095.87%20485.39%20C86.81%20482.76%2079.28%20478.01%2072.97%20471.26%20C71.43%20469.47%2070.19%20467.54%2068.95%20465.61%20C69.11%20465.18%2069.40%20465.04%2069.56%20464.61%20M96.46%20446.20%20C123.62%20458.73%20151.27%20469.97%20182.95%20469.00%20C182.79%20469.43%20182.63%20469.86%20182.76%20470.15%20C181.15%20470.53%20179.70%20470.48%20178.09%20470.87%20C159.01%20472.84%20140.61%20471.64%20122.77%20466.98%20C113.71%20464.35%20106.17%20459.60%2099.86%20452.85%20C98.33%20451.06%2097.09%20449.13%2095.85%20447.20%20C96.00%20446.77%2096.16%20446.34%2096.46%20446.20%20M114.36%20436.20%20C144.21%20442.14%20173.98%20446.33%20205.18%20438.08%20C205.32%20438.38%20205.16%20438.81%20205.43%20439.40%20C203.95%20440.08%20202.34%20440.46%20201.16%20441.00%20C182.95%20447.21%20164.41%20450.37%20145.56%20449.73%20C135.84%20449.55%20127.23%20446.36%20119.56%20441.31%20C117.57%20440.08%20116.03%20438.29%20114.34%20436.93%20L114.36%20436.20%20M136.24%20420.09%20C166.46%20423.72%20196.89%20425.46%20227.44%20415.02%20C227.58%20415.31%20227.42%20415.74%20227.69%20416.33%20C226.21%20417.01%20224.74%20417.68%20223.56%20418.23%20C205.73%20426.05%20187.43%20430.52%20168.53%20431.34%20C158.79%20431.88%20149.86%20429.55%20141.74%20425.07%20C139.75%20423.84%20138.05%20422.47%20136.06%20421.24%20C135.92%20420.95%20136.08%20420.52%20136.24%20420.09%20M152.16%20404.21%20C184.67%20400.37%20216.66%20394.61%20245.86%20376.57%20C246.00%20376.86%20246.27%20377.45%20246.40%20377.75%20C245.06%20378.72%20243.72%20379.69%20242.38%20380.66%20C225.86%20392.89%20207.85%20401.87%20188.21%20407.31%20C178.10%20410.17%20168.38%20409.98%20158.73%20407.63%20C156.28%20406.96%20154.00%20405.87%20151.84%20405.07%20C152.14%20404.94%20152.00%20404.64%20152.16%20404.21%20M177.72%20386.77%20C185.09%20383.39%20192.76%20379.87%20200.27%20376.78%20C217.19%20370.09%20234.51%20364.28%20251.43%20357.59%20C259.37%20354.66%20267.20%20350.71%20275.16%20347.06%20C274.71%20347.62%20274.84%20347.92%20274.55%20348.05%20C273.80%20348.75%20272.62%20349.29%20271.87%20349.99%20C254.51%20361.18%20236.20%20370.29%20217.76%20379.11%20C206.84%20384.12%20195.85%20387.38%20184.33%20388.74%20C181.27%20389.07%20178.08%20389.11%20175.02%20389.44%20C174.88%20389.15%20174.75%20388.85%20174.91%20388.42%20C175.79%20388.02%20176.83%20387.18%20177.72%20386.77%20M265.74%20324.96%20C266.33%20324.69%20266.92%20324.42%20267.51%20324.15%20C267.35%20324.58%20266.89%20325.14%20266.60%20325.28%20C254.02%20336.76%20239.93%20345.73%20225.70%20354.40%20C217.10%20359.78%20208.14%20362.82%20198.35%20364.81%20C196.74%20365.19%20195.29%20365.14%20193.68%20365.53%20C193.54%20365.23%20193.41%20364.94%20193.70%20364.80%20C194.15%20364.23%20194.61%20363.67%20195.20%20363.40%20C203.34%20358.59%20211.09%20352.89%20219.34%20349.10%20C235.27%20341.80%20250.92%20333.90%20265.74%20324.96%20M272.02%20293.51%20C272.31%20293.37%20272.90%20293.10%20273.20%20292.97%20C273.33%20293.26%20273.47%20293.56%20273.90%20293.72%20C256.36%20314.62%20238.12%20334.78%20210.70%20342.72%20C210.57%20342.42%20210.43%20342.13%20210.00%20341.97%20C210.45%20341.40%20210.48%20340.68%20211.07%20340.40%20C218.51%20334.85%20225.82%20328.99%20233.54%20324.02%20C247.34%20315.19%20260.73%20305.48%20272.02%20293.51%20M85.71%20359.73%20C86.14%20359.89%2086.57%20360.05%2087.00%20360.21%20C66.04%20387.67%2057.88%20418.91%2051.44%20450.79%20C51.15%20450.93%2050.72%20450.77%2050.42%20450.90%20C49.77%20448.70%2048.69%20446.34%2048.33%20444.01%20C46.63%20434.08%2047.24%20424.51%2051.05%20414.91%20C58.37%20395.84%2068.81%20378.91%2082.39%20363.39%20C83.60%20362.12%2084.51%20360.99%2085.71%20359.73%20M100.93%20351.67%20C101.36%20351.83%20101.79%20351.99%20102.22%20352.15%20C84.12%20381.17%2079.00%20412.80%2075.59%20445.07%20C75.30%20445.20%2074.87%20445.04%2074.57%20445.18%20C73.62%20443.11%2072.54%20440.75%2071.89%20438.55%20C69.31%20429.03%2069.06%20419.14%2071.71%20409.36%20C77.14%20390.08%2086.02%20372.08%2098.05%20355.49%20C98.96%20354.36%20100.02%20352.80%20100.93%20351.67%20M58.38%20369.41%20C58.81%20369.57%2059.24%20369.73%2059.67%20369.89%20C38.72%20397.36%2030.56%20428.60%2024.12%20460.48%20C23.82%20460.61%2023.39%20460.45%2023.10%20460.59%20C22.44%20458.39%2021.36%20456.03%2021.00%20453.69%20C19.30%20443.76%2019.92%20434.20%2023.72%20424.59%20C31.04%20405.52%2041.48%20388.59%2055.06%20373.08%20C56.27%20371.81%2057.18%20370.68%2058.38%20369.41%20M265.88%20273.12%20L266.31%20273.28%20C266.15%20273.71%20266.13%20274.43%20265.67%20275.00%20C260.07%20286.14%20252.34%20295.75%20243.06%20304.30%20C238.56%20308.51%20233.39%20311.24%20227.27%20311.90%20C230.13%20308.81%20232.99%20305.71%20235.99%20302.90%20C243.48%20295.89%20251.41%20289.04%20258.90%20282.03%20C261.60%20279.37%20263.74%20276.24%20265.88%20273.12%20M129.06%20331.27%20C129.49%20331.42%20129.92%20331.58%20130.35%20331.74%20C112.24%20360.76%20107.25%20392.69%20103.71%20424.66%20C103.42%20424.80%20102.99%20424.64%20102.69%20424.77%20C101.75%20422.71%20100.66%20420.35%20100.01%20418.15%20C97.43%20408.62%2097.18%20398.74%2099.83%20388.95%20C105.27%20369.68%20114.15%20351.68%20126.17%20335.09%20C127.08%20333.96%20128.15%20332.40%20129.06%20331.27%20M155.06%20317.91%20C155.49%20318.07%20155.92%20318.22%20156.35%20318.38%20C139.15%20346.27%20134.21%20376.75%20130.72%20407.27%20C130.42%20407.40%20129.99%20407.25%20129.70%20407.38%20C128.75%20405.32%20127.81%20403.25%20127.15%20401.05%20C124.41%20391.96%20124.43%20382.66%20126.92%20373.31%20C132.04%20354.89%20140.60%20337.75%20152.17%20321.73%20C153.08%20320.60%20154.15%20319.04%20155.06%20317.91%20M174.83%20304.19%20L175.26%20304.35%20C172.21%20317.17%20168.44%20329.97%20165.83%20342.95%20C163.22%20355.94%20161.92%20368.67%20159.85%20382.83%20C158.74%20381.20%20157.91%20380.15%20157.37%20378.97%20C153.85%20371.31%20153.25%20363.01%20155.43%20354.51%20C158.63%20341.26%20163.42%20328.35%20169.36%20315.63%20C171.23%20311.91%20173.09%20308.20%20174.83%20304.19%20M200.49%20287.77%20C200.92%20287.93%20201.35%20288.09%20201.35%20288.09%20C191.60%20310.42%20188.33%20334.41%20181.03%20357.40%20C180.33%20356.65%20179.49%20355.61%20179.38%20354.59%20C176.72%20347.24%20176.83%20339.69%20179.41%20332.08%20C184.11%20317.43%20190.96%20303.57%20198.97%20289.90%20C199.42%20289.33%20199.74%20288.47%20200.49%20287.77%20M223.60%20269.67%20C215.88%20287.85%20211.17%20307.15%20206.59%20326.75%20C205.89%20326.00%20205.32%20325.55%20205.05%20324.96%20C204.43%20322.03%20202.78%20319.22%20203.30%20316.47%20C203.90%20311.56%20204.51%20306.64%20206.26%20301.91%20C210.71%20290.58%20216.44%20279.74%20223.60%20269.67%20M256.82%20248.71%20C256.96%20249.00%20257.23%20249.59%20257.66%20249.75%20C252.62%20252.78%20249.85%20257.62%20247.37%20262.33%20C244.59%20267.18%20241.95%20272.32%20239.90%20277.19%20C234.82%20290.23%20228.44%20302.80%20221.07%20314.75%20C201.88%20346.05%20180.12%20375.67%20153.15%20400.91%20C116.56%20435.55%2075.38%20460.16%2029.75%20474.32%20L25.75%20467.94%20C60.83%20456.48%2093.51%20438.99%20123.15%20416.46%20C132.98%20409.09%20142.70%20400.70%20151.99%20392.15%20C175.06%20370.85%20195.46%20346.85%20213.74%20321.33%20C218.15%20315.37%20222.26%20309.56%20223.39%20301.90%20C225.05%20291.50%20230.87%20282.40%20236.26%20273.14%20C240.11%20266.74%20244.52%20260.79%20249.36%20254.99%20C251.47%20252.60%20254.28%20250.95%20256.82%20248.71%22%20fill%3D%22%23EEE6DA%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E");
  width:26.76vw;height:26.74vw;inset-inline-start:2.01vw;bottom:-1.5vw;top:auto}
.approach::after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22801.25%20198.30%20202.88%20146.54%22%3E%3Cpath%20d%3D%22M833.18%20235.73%20C834.23%20235.73%20835.30%20235.64%20836.38%20235.47%20C833.88%20233.65%20831.37%20232.05%20828.86%20230.91%20C822.26%20227.73%20815.65%20224.77%20809.27%20221.35%20C806.99%20220.21%20804.94%20218.39%20802.66%20216.79%20L802.43%20217.02%20C802.66%20217.25%20802.89%20217.70%20803.12%20217.93%20C809.04%20224.31%20816.33%20229.32%20824.08%20233.42%20C826.98%20234.96%20830.02%20235.73%20833.18%20235.73%20M853.47%20241.16%20C853.70%20240.48%20854.16%20240.02%20854.16%20239.57%20C854.16%20237.52%20854.38%20235.24%20853.70%20233.42%20C852.33%20230.23%20850.97%20227.04%20848.69%20224.08%20C843.45%20217.25%20837.52%20211.10%20830.69%20205.63%20C839.57%20216.79%20846.41%20228.86%20853.47%20241.16%20M853.93%20252.55%20C853.93%20252.32%20854.16%20252.10%20854.16%20252.10%20C853.70%20251.87%20853.47%20251.41%20853.02%20251.18%20C846.86%20248.91%20840.94%20246.40%20834.79%20244.58%20C823.62%20241.39%20812.91%20237.29%20802.89%20231.60%20C802.66%20231.37%20802.21%20231.37%20801.98%20231.37%20C801.98%20231.60%20801.75%20231.83%20801.75%20232.05%20C817.70%20242.76%20833.88%20252.55%20853.93%20252.55%20M876.49%20257.11%20C876.94%20256.20%20877.17%20255.28%20877.40%20254.60%20C877.62%20249.14%20876.03%20244.12%20872.84%20239.34%20C866.69%20230.46%20859.62%20222.26%20851.42%20214.97%20C850.97%20214.52%20850.51%20214.29%20850.05%20213.83%20C849.83%20214.06%20849.60%20214.06%20849.37%20214.29%20C860.31%20227.50%20867.14%20242.99%20876.49%20257.11%20M861.46%20265.60%20C863.14%20265.58%20864.81%20265.48%20866.46%20265.31%20C867.60%20265.08%20868.74%20264.85%20869.65%20264.85%20C869.65%20264.62%20869.65%20264.39%20869.65%20264.39%20C869.19%20264.17%20868.74%20263.94%20868.28%20263.71%20C861.90%20261.89%20855.52%20259.61%20849.14%20258.70%20C837.07%20256.88%20824.99%20254.60%20813.14%20251.41%20C812.69%20251.18%20812.23%20251.18%20811.78%20251.18%20C812.00%20251.64%20812.46%20251.87%20812.69%20252.10%20C823.40%20257.33%20834.79%20260.52%20846.18%20263.71%20C851.31%20265.08%20856.43%20265.68%20861.46%20265.60%20M896.08%20269.63%20C896.54%20268.27%20896.99%20267.36%20896.99%20266.44%20C897.90%20260.52%20896.54%20254.83%20893.57%20249.59%20C888.79%20241.39%20883.09%20233.42%20876.49%20226.13%20C874.43%20223.85%20872.38%20221.80%20870.33%20219.53%20L870.11%20219.75%20C874.66%20227.73%20879.68%20235.70%20884.00%20243.90%20C888.33%20252.32%20891.75%20260.75%20896.08%20269.63%20M868.51%20279.46%20C872.61%20279.43%20876.71%20279.09%20880.81%20278.52%20C883.09%20278.29%20885.14%20277.60%20887.19%20277.15%20C887.19%20276.92%20887.19%20276.69%20887.19%20276.47%20C886.51%20276.24%20885.83%20276.01%20884.92%20276.01%20C879.22%20275.10%20873.52%20274.19%20867.60%20273.73%20C854.84%20272.59%20842.08%20271.91%20829.32%20270.77%20C823.40%20270.32%20817.47%20269.18%20811.32%20268.27%20C811.55%20268.72%20811.55%20268.72%20811.78%20268.95%20C812.46%20269.18%20813.37%20269.41%20814.05%20269.63%20C827.95%20273.73%20842.08%20276.47%20856.21%20278.52%20C860.31%20279.20%20864.41%20279.48%20868.51%20279.46%20M920.46%20280.57%20C920.69%20280.57%20920.92%20280.57%20921.14%20280.57%20C921.37%20278.97%20921.60%20277.38%20921.60%20275.78%20C921.60%20269.18%20919.78%20262.80%20916.13%20257.11%20C909.07%20245.72%20899.95%20235.93%20889.02%20227.50%20C888.11%20226.81%20887.19%20226.13%20886.28%20225.45%20C886.06%20225.68%20885.83%20225.68%20885.60%20225.90%20C902.92%20241.16%20912.03%20260.52%20920.46%20280.57%20M905.39%20283.10%20C905.42%20283.18%20905.42%20283.18%20905.42%20283.07%20L905.39%20283.09%20L905.39%20283.10%20M942.11%20286.94%20C942.33%20286.94%20942.56%20286.94%20943.02%20286.94%20C943.25%20285.35%20943.47%20283.53%20943.47%20281.93%20C943.47%20275.10%20941.65%20268.49%20937.78%20262.34%20C930.26%20250.50%20920.69%20240.02%20909.52%20231.37%20C908.61%20230.69%20907.70%20230.00%20906.79%20229.32%20C906.56%20229.55%20906.33%20229.78%20906.11%20229.78%20C923.65%20245.72%20933.45%20265.99%20942.11%20286.94%20M881.50%20291.95%20C888.79%20291.95%20895.40%20289.90%20901.32%20286.26%20L905.39%20283.09%20L905.19%20282.62%20C882.64%20286.49%20859.85%20288.99%20836.61%20282.39%20C836.61%20282.62%20836.61%20283.07%20836.61%20283.30%20C837.75%20283.75%20838.66%20284.21%20839.80%20284.67%20C853.47%20289.68%20867.37%20292.18%20881.50%20291.95%20M982.44%20294.23%20C982.66%20294.23%20982.89%20294.23%20983.12%20294.00%20C983.12%20292.41%20983.35%20290.59%20983.12%20288.99%20C982.44%20282.16%20979.93%20275.55%20975.60%20269.86%20C966.94%20258.47%20956.46%20249.14%20944.39%20241.39%20C943.47%20240.71%20942.33%20240.25%20941.42%20239.57%20C941.20%20239.80%20940.97%20240.02%20940.74%20240.25%20C960.11%20254.60%20971.73%20274.19%20982.44%20294.23%20M964.89%20295.14%20C965.12%20295.14%20965.35%20295.14%20965.80%20295.14%20C966.03%20293.55%20966.26%20291.73%20966.26%20290.13%20C966.26%20283.30%20964.44%20276.69%20960.56%20270.54%20C953.04%20258.70%20943.47%20248.22%20932.31%20239.57%20C931.40%20238.89%20930.49%20238.20%20929.57%20237.52%20C929.35%20237.75%20929.12%20237.97%20928.89%20237.97%20C946.66%20253.69%20956.23%20274.19%20964.89%20295.14%20M1002.72%20295.37%20C1002.94%20295.37%201003.17%20295.37%201003.40%20295.14%20C1003.40%20293.55%201003.63%20291.73%201003.40%20290.13%20C1002.72%20283.30%201000.21%20276.69%20995.88%20271.00%20C987.22%20259.61%20976.74%20250.27%20964.66%20242.53%20C963.75%20241.85%20962.61%20241.39%20961.70%20240.71%20C961.47%20240.94%20961.25%20241.16%20961.02%20241.39%20C980.39%20255.74%20992.01%20275.10%201002.72%20295.37%20M1001.80%20306.07%20L1003.40%20300.84%20C968.31%20299.47%20935.04%20290.36%20903.14%20274.64%20C883.32%20264.85%20865.09%20252.55%20847.55%20239.11%20C843.45%20235.93%20839.57%20232.74%20837.29%20227.95%20C834.33%20221.12%20828.41%20216.11%20822.94%20211.10%20C819.07%20207.68%20814.97%20204.49%20810.64%20201.53%20C808.81%20200.17%20806.53%20199.71%20804.48%20198.80%20C804.48%20199.03%20804.26%20199.26%20804.26%20199.71%20C808.13%20200.85%20811.09%20203.36%20813.60%20206.09%20C816.33%20208.82%20819.07%20211.56%20821.35%20214.74%20C827.50%20222.49%20834.10%20229.55%20841.40%20236.38%20C860.54%20253.69%20880.81%20269.18%20904.06%20281.02%20C935.50%20296.96%20968.08%20305.62%201001.80%20306.07%20M877.69%20307.16%20C885.20%20306.97%20892.65%20306.05%20899.95%20304.25%20C906.56%20302.66%20912.03%20299.47%20916.82%20294.69%20C917.95%20293.55%20918.87%20292.18%20919.78%20291.04%20C919.32%20290.59%20919.32%20290.59%20919.09%20290.36%20C899.27%20298.79%20879.22%20305.85%20856.66%20304.94%20C856.66%20305.16%20856.66%20305.62%20856.89%20305.85%20C858.03%20306.07%20859.17%20306.30%20860.08%20306.30%20C863.44%20306.70%20866.80%20306.97%20870.16%20307.10%20C872.67%20307.20%20875.18%20307.22%20877.69%20307.16%20M889.71%20317.09%20C899.70%20316.74%20909.52%20315.07%20919.09%20312.00%20C925.47%20309.95%20930.71%20306.30%20935.04%20301.29%20C935.95%20300.15%20936.87%20298.56%20937.78%20297.42%20C937.55%20296.96%20937.32%20296.96%20937.09%20296.74%20C918.18%20306.53%20898.81%20315.41%20876.26%20315.87%20C876.26%20316.10%20876.49%20316.55%20876.49%20316.78%20C877.62%20316.78%20878.76%20317.01%20879.68%20317.01%20C883.04%20317.18%20886.38%20317.21%20889.71%20317.09%20M897.68%20332.95%20C898.81%20332.72%20899.73%20332.72%20900.87%20332.49%20C914.08%20330.22%20926.38%20325.66%20937.55%20318.83%20C943.25%20315.41%20947.35%20310.63%20950.31%20304.71%20C950.99%20303.34%20951.45%20301.75%20951.90%20300.15%20C951.45%20300.15%20951.22%20299.93%20950.99%20299.93%20C935.27%20313.82%20918.87%20326.57%20897.22%20332.27%20C897.45%20332.49%20897.45%20332.72%20897.68%20332.95%20M919.32%20340.24%20C920.46%20340.01%20921.60%20340.01%20922.74%20339.78%20C935.95%20337.50%20948.26%20332.95%20959.42%20326.12%20C965.12%20322.70%20969.22%20317.92%20972.18%20312.00%20C972.87%20310.63%20973.32%20309.04%20973.78%20307.44%20C973.32%20307.44%20973.09%20307.21%20972.87%20307.21%20C957.14%20321.11%20940.74%20333.86%20919.09%20339.55%20C919.09%20339.78%20919.32%20340.01%20919.32%20340.24%20M938.23%20344.34%20C939.37%20344.11%20940.28%20344.11%20941.42%20343.88%20C954.64%20341.60%20966.94%20337.05%20978.11%20330.22%20C983.80%20326.80%20987.90%20322.02%20990.87%20316.10%20C991.55%20314.73%20992.01%20313.13%20992.46%20311.54%20C992.01%20311.54%20991.78%20311.31%20991.55%20311.31%20C975.83%20325.21%20959.42%20337.96%20937.78%20343.65%20C938.01%20343.88%20938.01%20344.11%20938.23%20344.34%22%20fill%3D%22%23EEE6DA%22%20fill-rule%3D%22evenodd%22/%3E%3C/svg%3E");
  width:21.14vw;height:15.26vw;inset-inline-end:-4.55vw;bottom:15.18vw;top:auto}
[dir="rtl"] .approach::before,[dir="rtl"] .approach::after{transform:scaleX(-1)}
@media (max-width:820px){
  .vision4{grid-template-columns:1fr;grid-template-areas:"label" "lede" "cols";
    padding-inline-start:0;row-gap:1.4rem}
  .vision4__cols{grid-template-columns:1fr;row-gap:1.4rem}
  .vision4__col p{font-size:.85rem}
}


/* ═ Portfolio — deck p14 measured spec (page 960pt = 100vw):
   3-column band [title 16.7 | map 43 | panel 28.8], panel #10353D @ .63,
   glass country #C9C4CD @ .16 with dashed cream provinces @ .45,
   active region ice #CAE6EA, ring-and-dot pin, dash indicators bottom-left.
   The labelled tab bar STAYS (user) — the dashes mirror it. ═ */
.invmap.section .invmap__grid{grid-template-columns:minmax(140px,16.7fr) minmax(0,43fr) minmax(240px,28.8fr);
  grid-template-rows:minmax(0,1fr);column-gap:2vw;align-items:stretch;
  align-content:start}
.invmap__head{grid-column:1;grid-row:1;margin:0;padding-top:2.9vw}
.invmap.section .invmap__mapblock{grid-column:2;grid-row:1;min-height:0}
.invmap.section .invmap__ledger{grid-column:3;grid-row:1;min-height:0;
  background:rgba(16,53,61,.63);border:0;border-radius:8px;
  padding:1.9vw 1.15vw 1.5vw}
.invmap__title-a{font-size:clamp(1.4rem,2.9vw,2.9rem);line-height:1.22}
.invmap__title-b{font-size:clamp(1.2rem,2.5vw,2.5rem);line-height:1.17}
.invmap__rtitle{font-size:clamp(1.3rem,2.5vw,2.5rem);color:#FCF7EE;
  border-bottom:1px solid #FCF7EE;padding-bottom:1.15vw;margin-bottom:.2vw}
.invmap__stats .stat{padding-block:1.15vw;border-top:1px solid rgba(252,247,238,.5)}
.invmap__stats .stat:first-child{border-top:0}
.invmap__stats .stat__fig{font-size:clamp(17px,1.875vw,36px)}
.invmap__stats .stat__unit{font-size:clamp(17px,1.875vw,36px)}
.invmap__stats .stat__label{font-size:clamp(11px,1.02vw,19.6px);color:#E8EDE6;line-height:1.35}
/* map: deck's glass country + dashed provinces + ice active region */
.invmap__region{fill:rgba(201,196,205,.16);stroke:rgba(252,247,238,.45);
  stroke-dasharray:3.5 2;stroke-width:1}
.invmap__region.is-hot{fill:#CAE6EA;stroke:#CAE6EA;stroke-dasharray:none}
/* deck pin: petrol ring + teal dot, static */
.inv-marker_halo{fill:none;stroke:#154751;stroke-width:2;opacity:1;animation:none}
.inv-marker_pulse{display:none}
.inv-marker_dot{fill:#275A61;stroke:none}
/* dash indicators, bottom-left above the tab bar */
.invmap__dashes{position:absolute;z-index:2;left:3.96vw;
  /* the band is direction:ltr in BOTH languages (site convention: map left,
     panel right) — the dashes pin physical-left with it, as in the deck */
  bottom:calc(4.2rem + 1.6vw);display:flex;gap:.35vw}
.invmap__dash{width:3.04vw;height:3px;min-width:26px;border:0;padding:8px 0;
  background:transparent;cursor:pointer;background-clip:content-box;
  background-color:rgba(252,247,238,.41)}
.invmap__dash.is-active{background-color:rgba(252,247,238,.84)}
.invmap__dash:focus-visible{outline:2px solid var(--gold-soft);outline-offset:2px}
/* lighter deck scrim: photo reads, leading edge carries the title */
.invmap__bgs::after{background:
  linear-gradient(90deg,rgba(14,44,50,.55),rgba(14,44,50,0) 32%),
  linear-gradient(180deg,rgba(14,44,50,.6),rgba(14,44,50,.35) 45%,rgba(14,44,50,.55))}
[dir="rtl"] .invmap__bgs::after{background:
  linear-gradient(270deg,rgba(14,44,50,.55),rgba(14,44,50,0) 32%),
  linear-gradient(180deg,rgba(14,44,50,.6),rgba(14,44,50,.35) 45%,rgba(14,44,50,.55))}
@media (max-height:820px){
  .invmap__rtitle{font-size:1.35rem;padding-bottom:.6vw}
  .invmap__stats .stat{padding-block:.7vw}
  .invmap__head{padding-top:1.2vw}
}
@media (max-width:940px){
  .invmap.section .invmap__grid{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .invmap__head,.invmap.section .invmap__mapblock,.invmap.section .invmap__ledger{grid-column:1}
  .invmap__head{grid-row:1}.invmap.section .invmap__mapblock{grid-row:2}
  .invmap.section .invmap__ledger{grid-row:3}
  .invmap__dashes{display:none}
}

/* deck-exact: no visible tab bar — the dash strip is the selector (the tab
   buttons remain in the DOM, hidden, feeding labels to dashes and captions) */
.invmap__tabs{display:none}
.invmap__dashes{bottom:3.9vw}

/* p14 refinements: stats flow from the top at the deck's pitch (no stretch),
   the map fills its 43vw column, the region name is uppercase */
.invmap.section .invmap__ledger{justify-content:flex-start}
.invmap.section .invmap__ledger .invmap__stats{flex:0 0 auto;grid-auto-rows:auto}
.invmap__stats .stat{padding-block:1.45vw 1.15vw}
.invmap__rtitle{text-transform:uppercase;letter-spacing:.03em}
.invmap.section .invmap__inner{--map-w:min(42vw,calc((100svh - 230px) * 1.2131))}
.invmap.section .invmap__mapblock{display:flex;align-items:center;justify-content:center}
@media (max-height:820px){
  .invmap__stats .stat{padding-block:.85vw .65vw}
}

/* p15/p14 grading + presence fixes: accent-driven figures, region fill and
   pin; visible dash strip; the deck's larger panel radius */
.invmap__stats .stat__fig,.invmap__stats .stat__suffix,
.invmap__stats .stat__unit{color:var(--rg-a,#CAE6EA)}
.invmap__region.is-hot{fill:var(--rg-f,#CAE6EA);stroke:var(--rg-f,#CAE6EA)}
.inv-marker_halo{stroke:var(--rg-ring,#154751)}
.inv-marker_dot{fill:var(--rg-dot,#275A61)}
.invmap.section .invmap__ledger{border-radius:12px}
.invmap__dash{background-color:rgba(252,247,238,.55);
  filter:drop-shadow(0 1px 5px rgba(10,36,42,.65))}
.invmap__dash:hover{background-color:rgba(252,247,238,.75)}
.invmap__dash.is-active{background-color:rgba(252,247,238,.92)}

/* the map ships two stacked paths for the north-west province — the twin
   doubled the 16% glass into a visibly lighter block. One paints, one hides. */
.invmap__region[data-dup]{display:none}

/* panel exactly as the deck crop: black-weight title over a 2px hairline,
   rows DISTRIBUTED down the panel (equal shares, centred), fused figure
   phrase (grid gap 0 — spacing lives in the unit text), 14px radius */
.invmap__rtitle{font-weight:700;border-bottom-width:2px;padding-bottom:1.3vw}
.invmap.section .invmap__ledger{border-radius:14px}
.invmap.section .invmap__ledger .invmap__stats{flex:1 1 auto;display:grid;
  grid-auto-rows:1fr;align-items:stretch}
.invmap__stats .stat{align-content:center;padding-block:0}
.invmap__stats .stat{column-gap:0}
@media (max-height:820px){.invmap__stats .stat{padding-block:0}}


/* ═══ PIXEL-EXACT p15/p14 BAND (every value measured from the PDF; page
   960pt = 100vw, so 1pt = 0.10417vw). Band height = the deck's own 44.08vw.
   Absolute placement replaces the grid at desktop widths. ═══ */
@media (min-width:941px){
  .invmap.section{height:44.08vw;min-height:0;
    max-height:calc(100svh - var(--navh,90px));
    padding:0;display:block;overflow:hidden}
  .invmap.section .invmap__grid{display:block;position:relative;height:100%;
    max-width:none;padding:0;margin:0}
  /* title: 3.96vw / 5.75vw · 2.9vw bold cream · 2.5vw light #D2DDDE,
     line tops at +34pt and +28pt exactly */
  .invmap__head{position:absolute;left:3.96vw;top:5.75vw;margin:0;padding:0}
  .invmap__title-a{font-size:2.9vw;line-height:1;margin:0 0 .65vw}
  .invmap__title-b{font-size:2.5vw;line-height:1;margin:0 0 .42vw}
  /* map: country box 23.35vw / 4.92vw · 43.04vw × 35.48vw (same 1.213 aspect) */
  .invmap.section .invmap__mapblock{position:absolute;left:23.35vw;top:4.92vw;
    width:43.04vw;height:35.48vw;display:block;min-height:0}
  .invmap.section .invmap__inner{--map-w:43.04vw;display:block;width:43.04vw;
    padding:0;margin:0}
  .invmap__mapwrap{width:43.04vw;height:35.48vw}
  /* panel: right 3.67vw / top 2.73vw · 28.83vw × 37.67vw · #10353D at .63 ·
     radius .76vw · inner inset 1.02vw */
  .invmap.section .invmap__ledger{position:absolute;right:3.67vw;top:2.73vw;
    width:28.83vw;height:37.67vw;margin:0;padding:0 1.02vw;
    background:rgba(16,53,61,.63);border:0;border-radius:.76vw;
    display:flex;flex-direction:column;justify-content:flex-start}
  /* title zone ends at the hairline, 7.27vw from panel top */
  .invmap__rtitle{height:7.27vw;box-sizing:border-box;margin:0;
    padding:2.2vw 0 0;line-height:1;font-size:2.5vw;
    border-bottom:2px solid #FCF7EE}
  /* four rows, 6.72vw each (deck pitch 64.5pt), separators on rows 2-4 land
     exactly on the deck's y positions */
  .invmap.section .invmap__ledger .invmap__stats{flex:0 0 auto;display:grid;
    grid-auto-rows:6.72vw;align-items:stretch}
  .invmap__stats .stat{align-content:center;padding-block:0;column-gap:0}
  .invmap__stats .stat__fig{font-size:1.875vw}
  .invmap__stats .stat__unit{font-size:1.875vw}
  .invmap__stats .stat__label{font-size:1.02vw}
  /* dashes: 3.96vw / 40.17vw · 3.04vw × 0.24vw · pitch gap 0.34vw ·
     deck opacities exactly (.41 / .84), no effects */
  .invmap__dashes{left:3.96vw;top:40.17vw;bottom:auto;gap:.34vw}
  .invmap__dash{width:3.04vw;height:max(.24vw,2px);min-width:0;padding:8px 0;
    background-clip:content-box;background-color:rgba(252,247,238,.41);
    filter:none}
  .invmap__dash:hover{background-color:rgba(252,247,238,.6)}
  .invmap__dash.is-active{background-color:rgba(252,247,238,.84)}
  .invmap__maplabel{font-size:1.49vw}
}

@media (min-width:941px){
  /* anchor the absolute children to the SECTION itself; kill inherited gaps */
  .invmap.section .invmap__grid{position:static}
  .invmap.section .invmap__ledger .invmap__stats{margin:0;padding:0;border:0}
  .invmap__rtitle{margin:0}
}

@media (min-width:941px){
  /* absolute skeleton: the grid IS the section box; the stats grid pins to
     the deck's own coordinates inside the panel — no flow spacing survives */
  .invmap.section .invmap__grid{position:absolute;inset:0;height:auto;margin:0;padding:0}
  .invmap.section .invmap__ledger{position:absolute;padding:0 1.02vw}
  .invmap__rtitle{position:absolute;top:0;left:1.02vw;right:1.02vw;padding:2.2vw 0 0}
  .invmap.section .invmap__ledger .invmap__stats{position:absolute;
    top:7.27vw;left:1.02vw;right:1.02vw;margin:0;padding:0}
}

@media (min-width:941px){
  /* the base .stats grid carries a row-gap — zero it so the deck's 6.72vw
     pitch lands the separators on the measured positions exactly */
  .invmap.section .invmap__ledger .invmap__stats{gap:0}
}

@media (min-width:941px){
  /* user pass: named region indicators (name over its dash), map a notch
     smaller, panel tighter and narrower */
  .invmap__dashes{top:40vw;gap:1.7vw;align-items:flex-start}
  .invmap__dash{width:auto;min-width:3.04vw;height:auto;background:none;
    padding:0 0 .55vw;position:relative;
    color:rgba(252,247,238,.55);font:600 max(.78vw,11px) var(--sans);
    letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
    background-clip:border-box}
  .invmap__dash::after{content:"";position:absolute;left:0;bottom:0;width:100%;
    height:max(.24vw,2px);background:rgba(252,247,238,.41)}
  .invmap__dash:hover{color:rgba(252,247,238,.8)}
  .invmap__dash:hover::after{background:rgba(252,247,238,.6)}
  .invmap__dash.is-active{color:#FCF7EE}
  .invmap__dash.is-active::after{background:rgba(252,247,238,.84)}
  /* map: −10%, re-centred between title and panel */
  .invmap.section .invmap__mapblock{left:25.2vw;top:6.3vw;width:38.5vw;height:31.74vw}
  .invmap.section .invmap__inner{--map-w:38.5vw;width:38.5vw}
  .invmap__mapwrap{width:38.5vw;height:31.74vw}
  /* panel: narrower and shorter, internals scaled with it */
  .invmap.section .invmap__ledger{width:25.5vw;height:34vw}
  .invmap__rtitle{height:6.6vw;padding-top:1.95vw;font-size:2.2vw}
  .invmap.section .invmap__ledger .invmap__stats{top:6.6vw;grid-auto-rows:6vw}
  .invmap__stats .stat__fig{font-size:1.7vw}
  .invmap__stats .stat__unit{font-size:1.7vw}
  .invmap__stats .stat__label{font-size:.95vw}
}

@media (min-width:941px){
  .invmap__dash,.invmap__dash:hover,.invmap__dash.is-active{background:none}
}

/* the SELECTED region reads in its own accent (the same tone its panel
   figures use — sand for the mountain regions, ice for Yanbu) instead of
   plain cream, so the highlight is a colour of its own */
@media (min-width:941px){
  .invmap__dash.is-active{color:var(--rg-a,#CAE6EA)}
  .invmap__dash.is-active::after{background:var(--rg-a,#CAE6EA)}
}
/* focus ring: a cream hairline, not a gold box — the gold sat too close to
   the brand accent and read as a second highlight */
.invmap__dash:focus-visible{outline:2px solid rgba(252,247,238,.85);
  outline-offset:3px;border-radius:2px}

/* the deck's 16% glass / 45% borders vanish against our darker, busier
   photography — the country reads properly at these weights */
.invmap__region{fill:rgba(214,224,226,.30);stroke:rgba(252,247,238,.82);
  stroke-width:1.15}
.invmap__maplabel{paint-order:stroke;stroke:rgba(10,36,42,.72);stroke-width:3.5px}
.invmap__bgs::after{background:
  linear-gradient(90deg,rgba(14,44,50,.5),rgba(14,44,50,0) 34%),
  linear-gradient(180deg,rgba(14,44,50,.5),rgba(14,44,50,.28) 45%,rgba(14,44,50,.5))}
[dir="rtl"] .invmap__bgs::after{background:
  linear-gradient(270deg,rgba(14,44,50,.5),rgba(14,44,50,0) 34%),
  linear-gradient(180deg,rgba(14,44,50,.5),rgba(14,44,50,.28) 45%,rgba(14,44,50,.5))}

/* belt-and-braces: the pin is gold everywhere, whatever the region tone */
.inv-marker_halo{stroke:#A6824A}
.inv-marker_dot{fill:#A6824A}

/* the map is not interactive — no path may take focus or paint an outline */
.invmap__region{outline:none;pointer-events:none}
.invmap__region:focus,.invmap__region:focus-visible{outline:none}
/* pushed further: the country reads clearly over busy photography */
.invmap__region{fill:rgba(219,229,231,.42);stroke:rgba(255,253,247,.95);
  stroke-width:1.3}
.invmap__bgs::after{background:
  linear-gradient(90deg,rgba(14,44,50,.46),rgba(14,44,50,0) 34%),
  linear-gradient(180deg,rgba(14,44,50,.44),rgba(14,44,50,.24) 45%,rgba(14,44,50,.46))}
[dir="rtl"] .invmap__bgs::after{background:
  linear-gradient(270deg,rgba(14,44,50,.46),rgba(14,44,50,0) 34%),
  linear-gradient(180deg,rgba(14,44,50,.44),rgba(14,44,50,.24) 45%,rgba(14,44,50,.46))}

@media (min-width:1921px){
  :root{
    --shell:clamp(1840px,95.8333vw,2560px);
    --pad:clamp(69.12px,3.6vw,120px);
    --fs-hero:clamp(74.88px,3.9vw,120px);
    --fs-h2:clamp(40px,2.0833vw,60px);
    --fs-fig:clamp(36.8px,1.9167vw,52px);
  }
  /* declares its own size rather than using --fs-fig, so it needs the same lift */
  .vision__statgrid .stat__fig{font-size:clamp(48px,2.5vw,72px)}
  /* the map tab bar — base caps at 20.8px (reached at 1981px) */
  /* continuous at 1920: .85vw x 19.2 = 16.32 */
  .invmap__tab{font-size:clamp(16.32px,.85vw,20px)}
  /* the sector lede. Ceiling checked against the ENGLISH string, which needs
     74.8px of width per 1px of font: 28px x 74.8 = 2094px, against a content
     column of 2269px at 2560 and 2320px at 3440 — so it stays on one line. */
  .sectors__intro{font-size:clamp(21.6px,1.125vw,28px)}
  /* the brand coins (guideline p45) capped at 320px, so as the shell grew the
     About section just opened a bigger hole between the text and the artwork.
     Growing the artwork fills it with a brand element instead of stretching the
     measure, which is already at 108 characters. 16.667vw x 19.2 = 320.0. */
  .about__coins{width:clamp(320px,16.667vw,520px)}
  /* THE ABOUT BLOCK ON WIDE SCREENS.
     Measured at 2560: the paragraph grew (15.7 -> 20.2px) but the column held at
     50% of the content width, leaving a 628px hole beside the coins — the text
     read small and stranded. Growing the TYPE is what extends the column, because
     the cap below is in em: raising the paragraph to 1.22em lifts it to ~25px at
     2560 and ~28px at 3440, and 72em then resolves to ~1483px instead of 1215px.
     Reserve widens to 460px because the coins themselves now reach 427-520px. */
  .about__body p{font-size:1.22em}
  .about__text{max-width:min(72em,calc(100% - 460px))}
}