/* LGM shared styles. Order: fonts, tokens, base, header, buttons, landing sections, gold sheen, motion, reduced motion.
   Motion rule: only transform, opacity and clip-path animate; everything eases out with --ease-out.
   Gold rule: every gold surface samples ONE large metallic sheet (--metal) at its own page position (--px/--py, set by site.js),
   and the sheet slides as you scroll (scroll-driven animation where supported, otherwise site.js while scrolling). */

/* ---------- fonts (self-hosted; fallbacks are metric-matched so the swap does not move text) ---------- */
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-v1.woff2) format("woff2");font-weight:600 800;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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Cabin;src:url(/fonts/cabin-latin-v1.woff2) format("woff2");font-weight:400 700;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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/plexmono-500-latin-v1.woff2) format("woff2");font-weight:400 500;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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Tajawal;src:url(/fonts/tajawal-500-arabic-v1.woff2) format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;src:url(/fonts/tajawal-700-arabic-v1.woff2) format("woff2");font-weight:600 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:Tajawal;src:url(/fonts/tajawal-800-arabic-v1.woff2) format("woff2");font-weight:800 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold");font-weight:600 700;size-adjust:111.72%;ascent-override:78.77%;descent-override:18.8%;line-gap-override:0%}
@font-face{font-family:"Archivo Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold");font-weight:800 900;size-adjust:115.91%;ascent-override:75.92%;descent-override:18.12%;line-gap-override:0%}
@font-face{font-family:"Cabin Fallback";src:local("Arial"),local("ArialMT"),local("Roboto"),local("Roboto-Regular");font-weight:400 500;size-adjust:94.5%;ascent-override:101.59%;descent-override:26.45%;line-gap-override:0%}
@font-face{font-family:"Cabin Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Roboto Bold"),local("Roboto-Bold");font-weight:600 700;size-adjust:89.74%;ascent-override:106.97%;descent-override:27.86%;line-gap-override:0%}

/* ---------- tokens ---------- */
:root{
  --bg:#0A0A0A; --bg-2:#111110; --line:#262520; --line-2:#3A382F; --fg:#F4F1E6; --mute:#D6D2C6; --mute-2:#9C9888; --gold:#FFE838; --gold-2:#C9AE2A; --ink:#0A0A0A; --bad:#FF8A70;
  --metal:linear-gradient(115deg,#B58F0A 0%,#D9B515 3%,#FFE838 5.50%,#FFFBE0 7.50%,#FFE838 9.50%,#C29C0C 12.50%,#A98305 14%,#D9B515 16%,#FFF3A0 18.50%,#FFFFF0 19.50%,#F0CF2C 21.50%,#B58F0A 25%,#D9B515 28%,#FFE838 30.50%,#FFFBE0 32.50%,#FFE838 34.50%,#C29C0C 37.50%,#A98305 39%,#D9B515 41%,#FFF3A0 43.50%,#FFFFF0 44.50%,#F0CF2C 46.50%,#B58F0A 50%,#D9B515 53%,#FFE838 55.50%,#FFFBE0 57.50%,#FFE838 59.50%,#C29C0C 62.50%,#A98305 64%,#D9B515 66%,#FFF3A0 68.50%,#FFFFF0 69.50%,#F0CF2C 71.50%,#B58F0A 75%,#D9B515 78%,#FFE838 80.50%,#FFFBE0 82.50%,#FFE838 84.50%,#C29C0C 87.50%,#A98305 89%,#D9B515 91%,#FFF3A0 93.50%,#FFFFF0 94.50%,#F0CF2C 96.50%,#B58F0A 100%);
  --sw:2378px; --sh:1700px; /* tile = exactly 3 gold bands across and 1 down at 115deg, so the repeated sheet has no seams */ --sx:0px; --sy:0px; --sheet-x:400px; /* sheet origin chosen so the logo tile reads gold at the top of every page, LTR and RTL */
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --f-display:Archivo,"Archivo Fallback",Arial,sans-serif; --f-body:Cabin,"Cabin Fallback",Arial,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(20px,4vw,48px); --maxw:1240px;
  color-scheme:dark;
}
[lang|="ar"]{--f-display:Tajawal,Archivo,"Archivo Fallback",sans-serif;--f-body:Tajawal,Cabin,"Cabin Fallback",sans-serif}
[lang|="en"]{--f-display:Archivo,"Archivo Fallback",Arial,sans-serif;--f-body:Cabin,"Cabin Fallback",Arial,sans-serif}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
section[id]{scroll-margin-top:72px}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[lang]{font-family:var(--f-body)}
html[lang|="ar"] body{font-size:18px;line-height:1.75}
a{color:inherit}
a,button,label,summary{-webkit-tap-highlight-color:transparent}
img,video{display:block;max-width:100%}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3,.display{font-family:var(--f-display)}
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.skip{position:absolute;inset-inline-start:12px;top:-64px;z-index:200;padding:12px 16px;background:var(--gold);color:var(--ink);font-weight:600;text-decoration:none;transition:top .2s var(--ease-out)}
.skip:focus{top:12px}
/* film grain: one static tile, never animated */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px}

/* labels: mono caps in English, bold body text in Arabic */
.label,.eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 22px;font:500 12px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.label .idx{color:var(--gold)}
.label .rule{flex:none;width:36px;height:1px;background:var(--line-2)}
.label .dot{flex:none;width:7px;height:7px;background:var(--gold)}
:lang(ar) .label,:lang(ar) .eyebrow{font:700 15px/1.4 var(--f-body);letter-spacing:0;text-transform:none}
:lang(ar) .label .idx{font-family:var(--f-mono);font-weight:500}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;view-transition-name:site-head;transition:transform .5s var(--ease-out),background-color .3s linear,border-color .3s linear}
.site-head.is-solid{background:rgba(10,10,10,.92);border-bottom-color:var(--line)}
.site-head.is-hidden{transform:translate3d(0,-100%,0)}
.site-head.static{position:relative}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.brand-name{font:600 13px/1.2 Cabin,"Cabin Fallback",Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile{flex:none;display:grid;place-items:center;width:36px;height:36px;color:var(--ink);font:700 13px/1 Cabin,"Cabin Fallback",Arial,sans-serif;letter-spacing:0}
.site-nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px)}
.nav-link{position:relative;padding:6px 0;font-size:15px;color:var(--mute);text-decoration:none;transition:color .3s}
.nav-link::after,.uline::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
[dir=rtl] .nav-link::after,[dir=rtl] .uline::after{transform-origin:left}
.lang-link{padding:10px 13px;border:1px solid var(--line-2);font-size:14px;line-height:1;color:var(--mute);text-decoration:none;white-space:nowrap;transition:color .3s,border-color .3s}
/* in-page language toggle (forms, privacy) */
.lang{display:flex}
.lang button{padding:10px 15px;border:1px solid var(--line-2);background:none;color:var(--mute);font:500 14px/1 var(--f-body);cursor:pointer;transition:color .3s,border-color .3s}
.lang button+button{border-inline-start:0}
.lang button[lang="ar"]{font-family:Tajawal,Cabin,sans-serif}
.lang button[aria-pressed="true"]{color:var(--ink);border-color:transparent;font-weight:600}
@media (hover:hover){
  .nav-link:hover{color:var(--fg)}
  .nav-link:hover::after,.uline:hover::after{transform:scaleX(1);transform-origin:left}
  [dir=rtl] .nav-link:hover::after,[dir=rtl] .uline:hover::after{transform-origin:right}
  .lang-link:hover,.lang button:hover{color:var(--fg);border-color:var(--gold)}
}
@media (max-width:900px){.nav-link{display:none}}
@media (max-width:560px){.brand-name{display:none}.site-nav{gap:10px}.site-head .btn-sm{padding:0 14px;font-size:14px}}
/* pages with a plain header (forms, privacy) have room: keep the name, stacked on two lines */
@media (max-width:560px){
  .site-head.static .brand-name{display:block}
  /* with a language switch beside it (privacy page) the name is stacked on two lines to make room */
  .site-head.static:has(.lang) .brand-name{flex:none;max-width:9.5em;white-space:normal;overflow:visible;font-size:11px;line-height:1.3;letter-spacing:.1em}
  .site-head.static .head-in{gap:12px}.site-head.static .lang button{padding:9px 11px;font-size:13px}
}
@media (max-width:380px){.site-head.static:has(.lang) .brand-name{letter-spacing:.05em}.site-head.static:has(.lang) .tile{width:32px;height:32px;font-size:12px}.site-head.static:has(.lang) .brand{gap:9px}.site-head.static .lang button{padding:8px 9px}}

/* ---------- buttons ---------- */
.btn{--h:54px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:var(--h);padding:0 28px;border:0;border-radius:0;font:600 16px/1.15 var(--f-body);color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.16);transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.62) 50%,transparent 70%);transform:translate3d(-110%,0,0);transition:transform .9s var(--ease-out)}
[dir=rtl] .btn::before{transform:translate3d(110%,0,0)}
.btn.ghost{color:var(--fg);background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.btn.ghost::before{display:none}
.btn-sm{--h:42px;padding:0 18px;font-size:14px}
.btn-lg{--h:62px;padding:0 34px;font-size:17px}
.btn-arrow::after{content:"\2192";display:inline-block;transition:transform .5s var(--ease-out)}
[dir=rtl] .btn-arrow::after{content:"\2190"}
.btn:active{transform:translate3d(0,1px,0) scale(.985);transition-duration:.08s}
.btn[disabled]{opacity:.6;cursor:wait}
@media (hover:hover){
  .btn:hover{transform:translate3d(0,-2px,0);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.16),0 18px 36px -16px rgba(255,232,56,.55)}
  .btn:hover::before{transform:translate3d(110%,0,0)}
  [dir=rtl] .btn:hover::before{transform:translate3d(-110%,0,0)}
  .btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--gold)}
  .btn-arrow:hover::after{transform:translate3d(4px,0,0)}
  [dir=rtl] .btn-arrow:hover::after{transform:translate3d(-4px,0,0)}
}

/* ---------- landing: hero ---------- */
.hero{padding-block:clamp(36px,6vw,88px) clamp(56px,7vw,104px)}
.display{margin:0;font-weight:800;font-size:clamp(44px,7vw,104px);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
:lang(ar) .display{font-size:clamp(36px,5.4vw,80px);line-height:1.28;letter-spacing:0}
/* each word rises out of its own mask; padding keeps descenders and Arabic dots inside the mask */
.w{display:inline-block;overflow:clip;padding-block:.08em .14em;margin-block:-.08em -.14em}
:lang(ar) .w{padding-block:.3em .26em;margin-block:-.3em -.26em}
.w>span{display:inline-block}
.au-t{padding-block:.08em .14em;margin-block:-.08em -.14em}
:lang(ar) .au-t{padding-block:.32em .2em;margin-block:-.32em -.2em}
h1 em,h2 em{padding-block:.1em .16em}
:lang(ar) h1 em,:lang(ar) h2 em{padding-block:.32em .2em}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:end;margin-top:clamp(36px,4.4vw,64px)}
.pull{margin:0 0 14px;font:700 clamp(22px,2.3vw,30px)/1.2 var(--f-display);letter-spacing:-.015em;text-wrap:balance}
:lang(ar) .pull{line-height:1.55;letter-spacing:0}
.lede{margin:0 0 32px;max-width:34em;color:var(--mute);font-size:clamp(17px,1.35vw,19px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;align-items:start}}

/* showreel: a muted loop that becomes the full film with sound */
.reel{position:relative;margin:0;aspect-ratio:16/9;border:2px solid transparent;overflow:hidden;isolation:isolate}
.reel>img,.reel>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0f0f0e}
.reel>video{opacity:0;cursor:pointer;transition:opacity .7s var(--ease-out)}
.reel.is-full>video{cursor:auto}
.reel.is-playing>video,.reel.is-full>video{opacity:1}
.reel-btn{position:absolute;z-index:2;bottom:14px;display:inline-flex;align-items:center;gap:10px;border:0;background:rgba(10,10,10,.74);color:var(--fg);font:600 14px/1 var(--f-body);cursor:pointer;transition:background-color .3s,transform .5s var(--ease-out)}
.reel-sound{inset-inline-start:14px;padding:8px 16px 8px 8px}
[dir=rtl] .reel-sound{padding:8px 8px 8px 16px}
.reel-sound .ico{position:relative;flex:none;width:32px;height:32px;border-radius:50%}
.reel-sound .ico::after{content:"";position:absolute;top:50%;left:50%;margin:-6px 0 0 -3px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--ink)}
.reel-pause{inset-inline-end:14px;justify-content:center;width:40px;height:40px;padding:0}
.reel-pause::before,.reel-pause::after{content:"";width:3px;height:13px;background:var(--fg)}
.reel-pause::before{margin-inline-end:4px}
.reel-pause.is-paused::before{width:0;height:0;margin:0 0 0 3px;background:none;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--fg)}
.reel-pause.is-paused::after{display:none}
.reel.is-full .reel-btn{display:none}
@media (hover:hover){.reel-btn:hover{background:rgba(10,10,10,.92);transform:translate3d(0,-2px,0)}}

/* ---------- landing: ticker ---------- */
.ticker{position:relative;overflow:hidden;direction:ltr;border-block:1px solid var(--line);padding-block:20px}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:min(12%,140px);pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg),rgba(10,10,10,0))}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg),rgba(10,10,10,0))}
.ticker-track{display:flex;width:max-content;animation:tick 60s linear infinite}
.ticker-item{display:flex;align-items:center;gap:30px;padding-inline-end:30px;font:700 clamp(19px,2.2vw,28px)/1.3 var(--f-display);letter-spacing:-.01em;white-space:nowrap}
:lang(ar) .ticker-item{letter-spacing:0;font-weight:800}
.ticker-item i{flex:none;width:.3em;height:.3em;background:var(--gold);transform:rotate(45deg)}
@keyframes tick{to{transform:translate3d(-50%,0,0)}}
[dir=rtl] .ticker-track{animation-direction:reverse}
.ticker:hover .ticker-track,.ticker.is-paused .ticker-track{animation-play-state:paused}

/* ---------- landing: sections ---------- */
.sec{padding-block:clamp(72px,10vw,144px);border-top:1px solid var(--line)}
.sec-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,6vw,96px);align-items:end}
.h2{margin:0;font-weight:700;font-size:clamp(30px,4.3vw,58px);line-height:1.03;letter-spacing:-.03em;text-wrap:balance}
:lang(ar) .h2{font-weight:800;line-height:1.38;letter-spacing:0}
.sub{margin:18px 0 0;max-width:34em;color:var(--mute);font-size:clamp(17px,1.5vw,20px)}
.big-p{margin:0 0 18px;font-size:clamp(19px,1.8vw,24px);line-height:1.5;color:var(--fg)}
.big-p+.big-p{color:var(--mute)}
@media (max-width:900px){.sec-grid{grid-template-columns:1fr}}

.facts{list-style:none;margin:clamp(44px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.facts li{min-width:0;padding-block:24px 0;padding-inline-end:24px}
.facts li+li{padding-inline-start:24px;border-inline-start:1px solid var(--line)}
.facts b{display:block;margin-bottom:10px;font:500 12px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
:lang(ar) .facts b{font:700 14px/1.4 var(--f-body);letter-spacing:0;text-transform:none}
.facts span{font:600 clamp(18px,1.6vw,22px)/1.35 var(--f-display)}
@media (max-width:760px){.facts{grid-template-columns:1fr}.facts li{padding-block:18px}.facts li+li{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--line)}}

/* stats */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(44px,5vw,72px);border-top:1px solid var(--line)}
.stat{min-width:0;padding-block:clamp(26px,3vw,40px) 6px;padding-inline-end:clamp(16px,2.4vw,32px)}
.stat+.stat{padding-inline-start:clamp(16px,2.4vw,32px);border-inline-start:1px solid var(--line)}
.stat .n{display:inline-block;margin:0 0 16px;font:800 clamp(52px,6.2vw,92px)/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
:lang(ar) .stat .n{font-size:clamp(40px,4.8vw,72px);line-height:1.3;letter-spacing:0}
.stat .l{margin:0 0 8px;font:600 18px/1.35 var(--f-display)}
:lang(ar) .stat .l{font-weight:700;line-height:1.55}
.stat .d{margin:0;font-size:15px;color:var(--mute)}
.bar{max-width:220px;height:2px;margin-top:22px;background:var(--line)}
.bar i{display:block;height:100%;transform:scaleX(var(--w,1));transform-origin:left center}
[dir=rtl] .bar i{transform-origin:right center}
@media (max-width:860px){.stats{grid-template-columns:1fr}.stat+.stat{padding-inline-start:0;border-inline-start:0;border-top:1px solid var(--line)}}

/* charts */
.charts{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;margin-top:clamp(36px,4vw,56px)}
.cc{min-width:0;padding:clamp(22px,2.6vw,32px);border:1px solid var(--line);background:var(--bg-2)}
.ct{margin:0 0 4px;font:600 17px/1.35 var(--f-display)}
:lang(ar) .ct{font-weight:700;line-height:1.55}
.cs{margin:0 0 26px;font-size:15px;color:var(--mute)}
.cs .au-t{font-weight:700;font-variant-numeric:tabular-nums}
.plot{--ph:250px;display:flex;align-items:flex-end;gap:14px;height:var(--ph);margin-bottom:36px;border-bottom:1px solid var(--line-2);direction:ltr}
:lang(ar) .plot{margin-bottom:58px}
.col{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0;height:100%}
.col .v{margin-bottom:10px;font:500 14px/1 var(--f-mono);color:var(--fg);font-variant-numeric:tabular-nums}
.col .b{width:100%;max-width:72px;height:calc(var(--p) * .78%);transform-origin:50% 100%}
.col .b:not(.au){background:linear-gradient(180deg,#8a7418,#4a3d0e)}
.col .x{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);width:max-content;max-width:130%;font:500 11px/1.35 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--mute)}
:lang(ar) .col .x{font:500 13px/1.35 var(--f-body);letter-spacing:0;text-transform:none}
.cc{display:flex;flex-direction:column}
.cc-a .plot{margin-top:auto}
.cc-b .note{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.lc{display:block;width:100%;height:auto;margin:4px 0 14px;overflow:visible;direction:ltr}
.lc .grid line{stroke:var(--line);stroke-width:1}
.lc .grid .base{stroke:var(--line-2)}
.lc .ln{fill:none;stroke:url(#gl);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.lc .ln.dash{stroke-dasharray:2 9}
.lc .pt circle{fill:var(--bg);stroke:url(#gl);stroke-width:2.5}
.lc .pt text,.lc .xl text{text-anchor:middle}
.lc .pt text{font:600 13px var(--f-mono);fill:var(--fg)}
.lc .xl text{font:500 11px var(--f-mono);fill:var(--mute);letter-spacing:.06em}
.lc .ex{font:500 9px var(--f-mono);fill:var(--mute);letter-spacing:.14em;text-anchor:middle}
:lang(ar) .lc .ex{font:500 11px var(--f-body);letter-spacing:0}
@media (max-width:860px){.charts{grid-template-columns:1fr}.plot{--ph:210px}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,52px);margin-top:clamp(44px,5vw,72px)}
.pillar{position:relative;min-width:0;padding-top:30px}
.pillar::before,.pillar::after{content:"";position:absolute;top:0;inset-inline:0;height:1px}
.pillar::before{background:var(--line-2)}
.pillar::after{background:var(--gold);transform-origin:left center}
[dir=rtl] .pillar::after{transform-origin:right center}
.pillar-n{display:block;margin-bottom:26px;font:800 clamp(56px,5.6vw,84px)/.9 Archivo,"Archivo Fallback",Arial,sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--gold-2)}
.pillar h3{margin:0 0 10px;font-size:clamp(20px,1.8vw,24px);font-weight:700;line-height:1.25;letter-spacing:-.01em}
:lang(ar) .pillar h3{line-height:1.55;letter-spacing:0}
.pillar p{margin:0;font-size:16px;color:var(--mute)}
@media (max-width:860px){.pillars{grid-template-columns:1fr}}

/* closing call to action */
.closing{padding-block:clamp(88px,12vw,180px);border-top:1px solid var(--line)}
.closing .big{max-width:13em;margin:0 0 40px;font:800 clamp(38px,6.2vw,96px)/.98 var(--f-display);letter-spacing:-.04em;text-wrap:balance}
:lang(ar) .closing .big{max-width:16em;line-height:1.35;letter-spacing:0}
.note-star{max-width:46ch;margin:30px 0 0;padding-top:16px;border-top:1px solid var(--line);font:700 13px/1.65 var(--f-body);color:#b3af9f}
.note-star::before{content:"* ";color:var(--gold)}

/* creator strip + footer */
.strip{border-top:1px solid var(--line);padding-block:30px}
.strip .wrap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px}
.strip span{color:var(--mute)}
.link-arrow{position:relative;font:700 clamp(19px,2vw,24px)/1.35 var(--f-display);text-decoration:none}
.link-arrow::before{content:"";position:absolute;inset-inline:0;bottom:-2px;height:1px;background:rgba(255,232,56,.4)}
.nw{white-space:nowrap}
.arr{display:inline-block;margin-inline-start:10px;color:var(--gold);transition:transform .5s var(--ease-out)}
[dir=rtl] .arr{transform:scaleX(-1)}
@media (hover:hover){.link-arrow:hover .arr{transform:translate3d(5px,0,0)}[dir=rtl] .link-arrow:hover .arr{transform:translate3d(-5px,0,0) scaleX(-1)}}
.site-foot{padding-block:56px 40px;border-top:1px solid var(--line);color:var(--mute);font-size:14px}
.foot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px}
.foot-grid p{margin:0}
.foot-mark{margin:56px 0 28px;overflow:hidden;font:800 calc(min(var(--maxw),100vw - 2 * var(--gutter)) / 11.9)/.9 Archivo,"Archivo Fallback",Arial,sans-serif;letter-spacing:-.045em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--line-2);direction:ltr;text-align:left;user-select:none}
[dir=rtl] .foot-mark{text-align:right}
.foot-mark::before{content:"London Gulf Marketing"} /* decorative: drawn as generated content so it is not page text */
details.src{max-width:52em;font-size:13px;color:var(--mute)}
details.src summary{display:inline-block;padding:6px 2px;border-bottom:1px dotted #5a574c;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;list-style:none}
details.src summary::-webkit-details-marker{display:none}
:lang(ar) details.src summary{font:700 14px/1.4 var(--f-body);letter-spacing:0;text-transform:none}
details.src[open] summary{color:var(--gold);border-bottom-color:var(--gold)}
@media (hover:hover){details.src summary:hover{color:var(--gold);border-bottom-color:var(--gold)}}
details.src p{margin:14px 0 0;line-height:1.65}
details.src a{color:var(--mute);text-underline-offset:3px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

/* ---------- gold sheen: one sheet, sampled at each element's page position ---------- */
.au,.tile,.btn:not(.ghost),.lang button[aria-pressed="true"],.chip input:checked+span,.check input:checked,.pbar b,.uk i,.gives li::before,.review::before,.rw::before,.reel-sound .ico{background-image:var(--metal);background-size:var(--sw) var(--sh);background-repeat:repeat;background-position:calc(var(--ox,0px) - var(--px,0px) + var(--sheet-x)) calc(var(--oy,0px) - var(--py,0px))}
.au-t,h1 em,h2 em,.ref,.eyebrow{background-image:var(--metal);background-size:var(--sw) var(--sh);background-repeat:repeat;background-position:calc(var(--ox,0px) - var(--px,0px) + var(--sheet-x)) calc(var(--oy,0px) - var(--py,0px));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:normal}
.reel,.intro{background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--metal) border-box;background-size:auto,var(--sw) var(--sh);background-repeat:no-repeat,repeat;background-position:0 0,calc(var(--ox,0px) - var(--px,0px) + var(--sheet-x)) calc(var(--oy,0px) - var(--py,0px))}
.sdt :is(.au,.tile,.btn:not(.ghost),.lang button[aria-pressed="true"],.chip input:checked+span,.check input:checked,.pbar b,.uk i,.reel-sound .ico,.au-t,h1 em,h2 em,.ref,.eyebrow),.sdt :is(.gives li,.review,.rw)::before{animation:sheen linear both;animation-timeline:scroll(root)}
.sdt :is(.reel,.intro){animation:sheen2 linear both;animation-timeline:scroll(root)}
@keyframes sheen{from{background-position:calc(var(--sheet-x) - var(--px,0px)) calc(0px - var(--py,0px))}to{background-position:calc(var(--sx) - var(--px,0px) + var(--sheet-x)) calc(var(--sy) - var(--py,0px))}}
@keyframes sheen2{from{background-position:0 0,calc(var(--sheet-x) - var(--px,0px)) calc(0px - var(--py,0px))}to{background-position:0 0,calc(var(--sx) - var(--px,0px) + var(--sheet-x)) calc(var(--sy) - var(--py,0px))}}

/* ---------- motion ---------- */
@keyframes wordUp{from{transform:translate3d(0,108%,0)}}
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,18px,0)}}
@keyframes settle{from{transform:scale(1.04)}}
.display .w>span{animation:wordUp 1s var(--ease-out) both;animation-delay:calc(var(--i,0) * 45ms + 40ms)}
.rise{animation:fadeUp .9s var(--ease-out) both;animation-delay:calc(var(--i,0) * 80ms + 120ms)}
.reel>img{animation:settle 1.6s var(--ease-out) both}
/* scroll reveal: site.js adds .rvl only to elements still below the fold, then .is-in once they arrive */
.rvl{opacity:0;transform:translate3d(0,32px,0)}
.rvl.is-in{opacity:1;transform:none;transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.pillar.rvl::after{transform:scaleX(0)}
.pillar.rvl.is-in::after{transform:scaleX(1);transition:transform 1.3s var(--ease-out) calc(var(--i,0) * 80ms + .25s)}
/* charts: site.js adds .pre to a chart still below the fold, then .go when it arrives */
.pre .bar i{transform:scaleX(0)}
.pre.go .bar i{transform:scaleX(var(--w,1));transition:transform 1.5s var(--ease-out) calc(var(--k,0) * 90ms + .2s)}
.stat:nth-child(2){--k:1}.stat:nth-child(3){--k:2}
.pre .col .b{transform:scaleY(0)}
.pre .col .v{transform:translate3d(0,calc(var(--ph) * var(--p) * .0078),0)}
.pre.go .col .b,.pre.go .col .v{transform:none;transition:transform 1.4s var(--ease-out) calc(var(--k,0) * 110ms + .15s)}
.col:nth-child(2){--k:1}.col:nth-child(3){--k:2}.col:nth-child(4){--k:3}
.pre .lc .reveal{clip-path:inset(0 100% 0 0)}
.pre.go .lc .reveal{clip-path:inset(0);transition:clip-path 1.6s var(--ease-io) .2s}
.pre .lc .pt{opacity:0}
.pre.go .lc .pt{opacity:1;transition:opacity .6s var(--ease-out) var(--d,0s)}
/* page-to-page */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .22s var(--ease-io) both}
::view-transition-new(root){animation:vtIn .45s var(--ease-out) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translate3d(0,14px,0)}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .display .w>span,.rise,.reel>img,.ticker-track{animation:none}
  .sdt :is(.au,.tile,.btn:not(.ghost),.lang button[aria-pressed="true"],.chip input:checked+span,.check input:checked,.pbar b,.uk i,.reel-sound .ico,.au-t,h1 em,h2 em,.ref,.eyebrow,.reel,.intro),.sdt :is(.gives li,.review,.rw)::before{animation:none}
  .site-head,.btn,.btn::before,.btn-arrow::after,.arr,.nav-link::after,.uline::after,.reel>video{transition:none}
  .site-head.is-hidden{transform:none}
}