/* =========================================================================
البورصة و الفرصة — El Borsa w El Forsa · landing page
Branding follows the Acumen Holding brand system:
· Colour — Acumen Brand Colour System v1, June 2026 (six core colours,
five shades each; 500 = base).
· Type — IBM Plex Sans Arabic, Inter and DM Mono, per El Borsa wal
Forsa Brand Identity v1.0. No serif: the book pairs two grotesques
with a monospace, and DM Mono sets every figure.
· Devices — the slanted gold flag and the bordered uppercase CTA, both
carried over from acumenholding.com.
========================================================================= */
:root{
/* The Acumen ramp that used to sit here is gone: this site follows the
El Borsa wal Forsa book now, not the holding company's system. The few
names below survive only because rules elsewhere still reference them,
and each points at a brand colour. */
--nwhite-100:#F3EED8; --nwhite-300:#F3EED8; --nwhite-500:#F3EED8;
--nwhite-700:#B3C0B4; --nwhite-900:#8FA192;
--gold-100:#485C4C; --gold-300:#485C4C; --gold-500:#D8B061;
--gold-700:#D8B061; --gold-900:#D8B061;
--ngrey-500:#B3C0B4; --ngrey-700:#B3C0B4; --ngrey-900:#D6DCD2;
--nblack-500:#D6DCD2; --nblack-700:#2A2A2A; --nblack-900:#1C281F;
--dgold-500:#D8B061;
/* ---- El Borsa wal Forsa, Brand Identity v1.0 (September 2026) ----
Green is the ground at 70% of every surface, which inverts the page: what
was dark type on white is now light type on green. Gold becomes usable for
type in the process - it fails at 1.75:1 on light gold, the book's own
worst pairing, and clears 5.93:1 on green.
Proportion the book asks for: green 70 - light 20 - gold 8 - accent 2. */
--green:#293A2D; /* Borsa Green - the ground */
--green-deep:#1C281F; /* Deep Green - depth, covers, alternate bands */
--rule-green:#485C4C; /* Rule Green - hairlines, on green only */
--gold:#D8B061; /* Borsa Gold - the accent, and the Show's pillar */
--light:#F3EED8; /* Light Gold - light surfaces and type on green */
--charcoal:#2A2A2A; /* Charcoal - mono ground, never primary */
/* pillar accents, 2%, each measured over green: 6.02 / 5.37 / 5.47 */
--slate:#A8BAC1; /* The Companies */
--sage:#9DB397; /* The Method */
--clay:#DFA085; /* The Founders */
/* ---- the page's own names, pointed at the palette above ---- */
--paper:var(--green); /* the default ground */
--stone:var(--green-deep);
--cream:var(--light); /* the alternating band - the book's 20% */
--ground-cover:var(--green-deep);
--border:var(--rule-green);
--gold-deep:var(--gold);
--gold-dark:var(--gold);
--gold-tint:var(--rule-green);
--gold-soft:var(--green-deep);
--ink-strong:var(--light); /* headings on green - 10.38:1 */
--ink:#D6DCD2; /* body copy - 8.72:1 */
--grey:#B3C0B4; /* secondary copy - 6.40:1 */
--font-display:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
--font-body:'Inter',ui-sans-serif,system-ui,-apple-system,sans-serif;
--font-ar:'IBM Plex Sans Arabic',ui-sans-serif,system-ui,sans-serif;
--font-mono:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
--measure:1180px;
--gutter-x:24px;
/* ---- the bar ----
The bar was 77px at every width, set by whatever its tallest child
happened to be — the 44px burger plus 16px of padding. That made it
shorter than the reference site's on desktop and TALLER on a phone,
which is backwards: a narrow screen wants the bar out of the way and
a wide one can afford the presence. It is now an explicit height that
steps with the viewport, and the wordmark is sized off the same scale
so the two never drift apart. Two lines of Arabic script need more
height than a one-line latin logo to stay legible, hence the ratio. */
--nav-h:72px;
--nav-logo:36px;
/* ---- spacing scale ----
4px base. Every gap, pad and margin below resolves to one of these, so
grids with the same column count share a column grid instead of drifting.
Before this there were 28 distinct gap values and 8 section paddings. */
--s1:4px; --s2:8px; --s3:12px; --s4:16px;
--s5:20px; --s6:24px; --s7:32px; --s8:40px;
/* vertical rhythm */
--pad-section:clamp(66px,9vw,112px); /* every .block, the pivot, contact */
--pad-band-top:clamp(76px,11vw,132px); /* an act opening, which carries more air */
--pad-band-bot:clamp(44px,6vw,68px); /* an act closing, before its line art */
--pad-cell:clamp(26px,3.4vw,40px); /* inside a matrix cell */
--pad-row:clamp(22px,3vw,34px); /* an editorial row */
--pad-head:clamp(36px,5vw,56px); /* under a section head */
/* horizontal rhythm */
--gap-grid:clamp(18px,2.4vw,26px); /* card + cell grids */
--gap-col:clamp(28px,5vw,60px); /* two-column prose */
--gap-col-tight:clamp(24px,3.4vw,44px); /* three-column prose */
--ease:cubic-bezier(0.22,1,0.36,1); /* strong ease-out — entrances, exits */
--ease-in-out:cubic-bezier(0.77,0,0.175,1); /* on-screen morphing — the waveform */
--ease-sine:cubic-bezier(0.37,0,0.63,1); /* easeInOutSine — pendulum motion, no snap at the ends */
}
@media(min-width:640px){:root{--gutter-x:32px}}
@media(min-width:768px){:root{--nav-h:88px;--nav-logo:44px}}
/* 1041px, not 1024: this is where .nav-links come back and the bar goes
from a burger to a full row, so the tallest step should land with it. */
@media(min-width:1041px){:root{--nav-h:104px;--nav-logo:52px}}
@media(min-width:1024px){:root{--gutter-x:44px}}
@media(min-width:1280px){:root{--gutter-x:56px}}
/* From desktop up the grid spans the viewport instead of sitting in a 1180px
column. The gutter grows with the screen so there is always a proportionate
margin, while prose keeps its own ch-based measure so lines stay readable. */
@media(min-width:1024px){:root{--measure:none}}
@media(min-width:1600px){:root{--gutter-x:72px}}
@media(min-width:2000px){:root{--gutter-x:clamp(88px,5vw,180px)}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--font-body);
background:var(--paper);
color:var(--ink);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;display:block}
::selection{background:var(--gold);color:var(--ink-strong)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:var(--gutter-x)}
section{position:relative}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);
color:var(--ink-strong);padding:12px 20px;font-weight:600;font-size:13px}
.skip:focus{left:12px;top:12px}
/* ============================ TYPE SCALE ============================
Headings are Inter, per the brand book's Latin face.
==================================================================== */
.h1{font-family:var(--font-display);font-weight:900;font-size:clamp(38px,6vw,72px);
line-height:1.1;letter-spacing:-.02em;color:var(--ink-strong)}
.h2{font-family:var(--font-display);font-weight:700;font-size:clamp(31px,5.4vw,66px);
line-height:1.05;letter-spacing:-.025em;color:var(--ink-strong)}
.h2 em{font-style:normal;color:var(--gold-deep)}
.h2--xl{font-size:clamp(38px,8vw,104px);letter-spacing:-.035em;font-weight:900}
.lead{margin-top:20px;font-size:clamp(16px,1.8vw,18px);max-width:58ch;color:var(--grey)}
.lead--tight{max-width:46ch}
/* ---- eyebrow · the Acumen gold flag ---- */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;text-transform:uppercase;
font-weight:600;font-size:12px;letter-spacing:.18em;color:var(--gold-dark)}
.eyebrow::before{content:"";display:inline-block;width:26px;height:9px;flex-shrink:0;
background:var(--gold);clip-path:polygon(0 0,100% 0,82% 100%,0 100%)}
.eyebrow--light{color:var(--gold-tint)}
.sec-head{max-width:min(62%,940px);margin-bottom:var(--pad-head)}
/* ============================== NAV ============================== */
/* At rest the bar IS the banner — same charcoal, no rule, so the two read as
one surface. Once scrolled it drops its own ground entirely and inverts its
contents to whatever section is passing underneath (see .nav--on-light). */
nav{
position:fixed;top:0;left:0;right:0;z-index:80;
display:flex;align-items:center;justify-content:space-between;gap:20px;
height:var(--nav-h);padding:0 var(--gutter-x);
background:var(--ground-cover);
border-bottom:1px solid transparent;
transition:background .35s var(--ease),border-color .35s var(--ease),
backdrop-filter .35s var(--ease);
}
nav.is-scrolled{
background:color-mix(in srgb, var(--ink-strong) 34%, transparent);
backdrop-filter:blur(14px) saturate(1.1);
border-bottom-color:color-mix(in srgb, var(--gold) 22%, transparent);
}
nav.is-scrolled.nav--on-light{
background:color-mix(in srgb, var(--paper) 62%, transparent);
border-bottom-color:var(--border);
}
.nav-brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
/* the wordmark is two lines of Arabic, so it needs more height than a
single-line logo to stay legible in the bar */
.nav-brand img{height:var(--nav-logo);width:auto}
/* two colourways of the same wordmark, crossfaded so neither pops */
.nav-brand{position:relative}
.nav-brand .nav-logo--ink{position:absolute;inset:0;opacity:0}
.nav-brand img{transition:opacity .3s var(--ease)}
.nav--on-light .nav-logo--gold{opacity:0}
.nav--on-light .nav-logo--ink{opacity:1}
.nav-links{display:flex;gap:var(--s6);font-size:14px;font-weight:500}
@media(min-width:1280px){.nav-links{gap:var(--s7);font-size:15px}}
.nav-links a{color:var(--nwhite-700);text-decoration:none;transition:color .3s var(--ease)}
.nav-links a:hover{color:var(--gold)}
.nav--on-light .nav-links a{color:var(--ink)}
.nav--on-light .nav-links a:hover{color:var(--gold-dark)}
@media(max-width:1040px){.nav-links{display:none}}
/* ---- CTA · bordered uppercase, per acumenholding.com ---- */
.cta{
display:inline-flex;align-items:center;gap:.6rem;
font-family:var(--font-body);font-size:12px;font-weight:600;
text-transform:uppercase;letter-spacing:.16em;text-decoration:none;
padding:.9rem 1.5rem;border:1px solid var(--gold);color:var(--gold-deep);
background:transparent;cursor:pointer;
transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.cta:hover{background:var(--gold);color:var(--ink-strong)}
.cta--ink{background:var(--ground-cover);color:var(--nwhite-500);border-color:var(--ink-strong)}
.cta--ink:hover{background:var(--charcoal);color:var(--nwhite-500);border-color:var(--charcoal)}
.cta--gold{background:var(--gold);color:var(--ink-strong);border-color:var(--gold)}
.cta--gold:hover{background:var(--gold-700);border-color:var(--gold-700);color:var(--nwhite-500)}
.cta--light{border-color:var(--gold);color:var(--gold-tint)}
.cta--light:hover{background:var(--gold);color:var(--ink-strong)}
.cta .arw{transition:transform .25s var(--ease)}
.cta:hover .arw{transform:translateX(3px)}
nav .cta{padding:.85rem 1.4rem;font-size:12px;
transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
/* over the banner and dark sections: gold fill reads as the primary action */
nav .cta--ink{background:var(--gold);color:var(--ink-strong);border-color:var(--gold)}
nav .cta--ink:hover{background:var(--gold-100);border-color:var(--gold-100);color:var(--ink-strong)}
/* over light sections: revert to the charcoal button from the brand system */
.nav--on-light .cta--ink{background:var(--ground-cover);color:var(--nwhite-500);border-color:var(--ink-strong)}
.nav--on-light .cta--ink:hover{background:var(--charcoal);border-color:var(--charcoal)}
/* ============================== HERO ============================== */
.hero{
/* A ticker's height short of the viewport, so the tape below always breaks
the fold instead of sitting exactly on it — the strip is 60px, and the
clamp keeps that peek proportional on taller screens without letting it
grow into a gap. min-height, so the banner still grows if the copy ever
needs more room than the viewport allows. */
min-height:calc(100svh - clamp(60px,7vh,84px));color:var(--nwhite-500);
/* The studio frame, scrimmed in Deep Green so the copy holds its contrast
over an image that is dark but not uniformly so, with Deep Green beneath
as the fallback if the file never loads. */
background:
linear-gradient(rgba(28,40,31,.74), rgba(28,40,31,.84)),
url(assets/hero-studio.webp) center/cover no-repeat,
var(--green-deep);
display:flex;flex-direction:column;justify-content:center;align-items:center;
/* the bar is fixed and opaque, so the banner has to start below it;
tied to --nav-h so growing the bar can never crop the eyebrow */
text-align:center;padding:calc(var(--nav-h) + 36px) var(--gutter-x) 52px;overflow:hidden;
}
.hero::before{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse 68% 55% at 50% 44%,rgba(216,176,97,.13),transparent 72%)}
.hero>*{position:relative;z-index:2}
/* The logo is sized off the viewport height so the calls to action never
fall below the fold on a laptop screen. */
/* THE WORDMARK, EXTRUDED — the depth treatment from the parallax site's hero.
Built around the real logo artwork rather than a generated "3D version":
Arabic letterforms are precisely what image models mangle, and this is the
brand's core asset. The source PNG is flat single-tone gold, so all of the
dimension comes from two masked layers stacked on it:
· __depth / __ext the side walls, behind
· the ![]()
itself the original file — and the fallback, below
· __face the lit gold gradient + specular sweep, on top
Both effect layers are masked with that same PNG, so they carry the exact
glyph outlines. They live behind an @supports gate: where masking is
unavailable they are never painted at all and the hero falls back to the
flat logo it had before — never to nothing, and never to a bare gradient.
The ![]()
keeps its original sizing rule, so the mark occupies the same
footprint and the calls to action stay above the fold; the wrapper simply
shrink-wraps it, which is also what gives the absolute layers their box. */
/* The extruded mark and the studio ground are the client's call, made after
seeing the flat brand version. Both depart from the book: its "never" list
for the mark rules out shadow and rotation, and rule 04 rules out type on a
photograph without a solid plate. Recorded here, not re-argued. */
.logo-lockup{position:relative;display:inline-block;
perspective:1100px;perspective-origin:50% 45%}
.logo-podcast{display:block;width:auto;height:auto;
max-width:min(620px,86vw);max-height:28svh;margin:24px auto 0}
.hero-tag{max-width:600px;margin:var(--s4) auto 0;font-size:clamp(15px,2vw,17.5px);
color:rgba(243,238,216,.72)}
.hero-cta{display:flex;gap:var(--s4);flex-wrap:wrap;justify-content:center;margin-top:var(--s7)}
.hero-credits{margin-top:24px;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
justify-content:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
color:var(--nwhite-700)}
.hero-credits b{color:var(--nwhite-500);font-weight:600}
.hero-credits .dot{width:4px;height:4px;background:var(--gold);flex-shrink:0}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* AUDIO OFF THE MIC.
The «و» of the wordmark is a hand holding a microphone, so the sound comes
off that glyph rather than off a separate graphic. Three arcs leave the mic
head and expand away from the letterforms — quarter-circles, open to the
upper right, so nothing sweeps back across the Arabic.
The origin is the mic's own centre in the artwork: its bounds are
x1106-1270 / y350-558 of the 1271x627 canvas, so 93.5% across and 72.4%
down, and the layer shares the image's box exactly. linear, because a
wavefront travels at a constant speed — easing it would read as a pulse. */
@keyframes mic-emit{
0% {opacity:0; transform:translate(-50%,-50%) rotate(-6deg) scale(.6)}
14% {opacity:.72}
100% {opacity:0; transform:translate(-50%,-50%) rotate(-6deg) scale(2.3)}
}
@supports ((-webkit-mask-image:url(assets/logo-podcast.png)) or (mask-image:url(assets/logo-podcast.png))){
/* the two effect layers sit exactly over the image's own box (the 24px is
the image's top margin, which the shrink-wrapping wrapper includes) */
.logo-lockup__depth,.logo-lockup__face{position:absolute;
top:24px;right:0;bottom:0;left:0;display:block;pointer-events:none}
/* the hero is centred, not left-anchored like the parallax build, so the
perspective points at the middle of the mark and the yaw is gentler —
the steeper angle reads as skew on a centred lockup. */
.logo-lockup__depth,.logo-lockup__face,.logo-podcast{
transform:rotateX(8deg) rotateY(-7deg);transform-origin:50% 60%}
/* The mic glyph carries its own, shallower extrusion, so the artwork is
split into two masks cut from the same 1271x627 canvas — identical
canvases mean `center/contain` lands them in exactly the same place, so
the two halves of the mark stay registered at every width.
· logo-podcast-body.png the Arabic letterforms
· logo-podcast-mic.png the microphone alone
(logo-podcast.png itself is untouched and still masks the face + serves
as the no-mask fallback image.) */
.logo-lockup__ext{position:absolute;inset:0;display:block;background:#6d5a2c;
-webkit-mask:url(assets/logo-podcast-body.png) center/contain no-repeat;
mask:url(assets/logo-podcast-body.png) center/contain no-repeat}
.logo-lockup__ext--mic{
-webkit-mask-image:url(assets/logo-podcast-mic.png);
mask-image:url(assets/logo-podcast-mic.png)}
/* The extrusion: each step is one pixel deeper and one shade darker. The
filter has to sit on the PARENT of the masked layer — on the masked layer
itself every offset copy is clipped away by that same glyph outline, which
is what happens on the parallax build: its depth is carried by the face
gradient alone. Here the walls really are drawn, so they are kept short —
five steps, not ten — or the mark reads as a chunky block rather than the
lit, slightly raised lockup in that hero. */
.logo-lockup__depth{
filter:
drop-shadow(1px 1px 0 #6a5729) drop-shadow(2px 2px 0 #625024)
drop-shadow(3px 3px 0 #5a4820) drop-shadow(4px 4px 0 #4f3f1a)
drop-shadow(5px 5px 0 #453616)
drop-shadow(9px 10px 12px rgba(0,0,0,.5))}
/* The microphone is a solid slab where the letterforms are thin strokes, so
the same wall depth reads much heavier on it. Two steps instead of five,
and a shorter, softer cast — enough to sit on the same light source
without the glyph turning into a block. */
.logo-lockup__depth--mic{
filter:
drop-shadow(1px 1px 0 #665327) drop-shadow(2px 2px 0 #56441d)
drop-shadow(5px 6px 8px rgba(0,0,0,.38))}
/* the lit face, with a raking highlight across the top of the letterforms */
.logo-lockup__face{
-webkit-mask:url(assets/logo-podcast.png) center/contain no-repeat;
mask:url(assets/logo-podcast.png) center/contain no-repeat;
background:
linear-gradient(103deg, transparent 26%, rgba(255,248,220,.85) 40%, transparent 52%),
linear-gradient(176deg, #f2dfa6 0%, #dcbd6e 34%, #c2a25a 62%, #9c7f3f 100%)}
}
@keyframes logo-tilt{
from{transform:perspective(1100px) rotateY(-3.5deg)}
to {transform:perspective(1100px) rotateY(3.5deg)}
}
/* The entrance is additive: the hero renders fully without it, so nothing is
ever left at opacity 0 if animation never runs. */
@media(prefers-reduced-motion:no-preference){
.hero-eyebrow{opacity:0;animation:rise .9s var(--ease) .1s forwards}
/* entrance first, then the tilt picks the transform up where rise left it
(rise ends at 1.28s). alternate + sine easing gives a pendulum rather
than a loop that resets with a jump. */
/* the emission sits in the lockup's own plane, so it takes the same tilt as
the face and the walls and rides the pendulum with them */
.logo-lockup__audio{position:absolute;top:24px;right:0;bottom:0;left:0;
pointer-events:none;
transform:rotateX(8deg) rotateY(-7deg);transform-origin:50% 60%}
/* 94%/66% is the grille rather than the glyph's centroid — the mic's bounds
run y350-558 and the head is the upper half, so arcs launched from the
centre would spend their first frames hidden inside the hand. They also
start at .6 rather than a point: the smallest arc clears the mic's edge. */
.logo-lockup__audio i{position:absolute;left:94%;top:66%;
width:clamp(38px,5vw,68px);aspect-ratio:1;border-radius:50%;
border:2px solid transparent;
border-top-color:var(--gold-100);border-right-color:var(--gold-100);
opacity:0;animation:mic-emit 2.4s linear infinite}
.logo-lockup__audio i:nth-child(2){animation-delay:.8s}
.logo-lockup__audio i:nth-child(3){animation-delay:1.6s}
/* same rule as the waveforms: nothing animates while it is off screen */
.logo-lockup.is-idle .logo-lockup__audio i{animation-play-state:paused}
.logo-lockup{opacity:0;
animation:rise 1s var(--ease) .28s forwards,
logo-tilt 4s var(--ease-sine) 1.28s infinite alternate}
.hero-cta{opacity:0;animation:rise .9s var(--ease) .7s forwards}
.hero-credits{opacity:0;animation:rise .9s var(--ease) .84s forwards}
}
@media(max-width:560px){
.hero{padding:calc(var(--nav-h) + 28px) var(--gutter-x) 52px} /* must match the bleed offset */
/* The hero label no longer fits one line at a readable size, so instead of
forcing it: the flag aligns to the FIRST line rather than floating at the
vertical centre of a two-line block, and the text centres under itself.
(Other eyebrows on the page are short enough to still hold one line.) */
.hero .eyebrow{font-size:10px;letter-spacing:.12em;gap:.5rem;
align-items:flex-start;text-align:center}
.hero .eyebrow::before{margin-top:.25em}
.nav-cta-tail{display:none}
.hero-cta{margin-top:var(--s6);gap:var(--s2)}
.hero-cta .cta{width:100%;justify-content:center}
.hero-credits{margin-top:24px;gap:8px;font-size:10px;letter-spacing:.12em}
}
/* ======================= THE MARKET LINE =========================
A price series and an audio waveform are the same drawing: a line
over time. The hero states the show's premise by resolving one into
the other. After that the listener half of the page carries the
waveform and the partner half carries the chart, and the «و» pivot
is where it changes state.
================================================================= */
.mline{display:block;width:100%;height:100%}
.ml-line{fill:none;stroke:var(--gold);stroke-width:1.6;
stroke-linejoin:round;stroke-linecap:round}
.ml-wave line{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;
vector-effect:non-scaling-stroke} /* the bleed stretches x, weight must not */
/* the same device, quieter, banding each act marker */
.act-art{width:100%;height:clamp(58px,8vw,96px);margin-top:clamp(24px,3.6vw,42px)}
.act-art .ml-line{stroke:var(--gold-dark);stroke-width:1.4}
.act-art .ml-wave line{stroke:var(--gold-dark);stroke-width:2.4;opacity:.75}
@keyframes ml-in{to{opacity:1}}
/* ---- live waveform ----
A chart is a record of the past, so it draws once and rests. A waveform is
live sound, so it keeps moving. Each bar scales about the shared centre line
(y=100 in the viewBox) — scaleY only, so x never shifts — and takes its
phase from its index and its trough depth from the seeded data, which is
what stops it reading as a single sine wave. */
@keyframes wave-breathe{
from{transform:scaleY(var(--lo,.6))}
to {transform:scaleY(1)}
}
/* --ease-sine, not --ease-in-out: cubic-bezier(0.77,0,0.175,1) only reaches
5% of its travel at a quarter of the cycle, so the bars hung at each end
and snapped through the middle — mechanical, not alive. A sine curve is
what a continuous oscillation wants. --d gives each bar its own duration
(the hero's are seeded, everything else falls back to 1.9s) so the loop
never re-synchronises into a single visible pulse. */
.ml-wave line{transform-origin:0 100px;
animation:wave-breathe calc(var(--d,1.9) * 1s) var(--ease-sine) infinite alternate;
animation-delay:calc(var(--i) * -137ms)}
/* 96 bars repainting forever is not free, and SVG children get no compositor
layer of their own — so the strip only runs while it is on screen.
The class is applied to PAUSE, never to run: if the script never lands the
strip simply keeps animating, rather than freezing invisible mid-entrance. */
.mline.is-idle .ml-wave line{animation-play-state:paused}
.pivot-mark{transform-origin:center}
/* ==================== TAPE (figures at a glance) ==================== */
.tape{background:var(--charcoal);border-top:1px solid rgba(216,176,97,.28);
border-bottom:1px solid rgba(216,176,97,.28);overflow:hidden;padding:var(--s4) 0}
.tape-track{display:flex;width:max-content;animation:slide 38s linear infinite}
.tape:hover .tape-track,.tape:focus-within .tape-track{animation-play-state:paused}
.tape-item{display:flex;align-items:baseline;gap:var(--s2);padding:0 var(--s6);white-space:nowrap;
border-right:1px solid rgba(216,176,97,.2)}
.tape-item b{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--gold)}
.tape-item span{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--nwhite-700)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
/* =================== ACT MARKER — the signature ====================
The show's name splits along its two audiences:
البورصة (the market) → the listener · الفرصة (the opportunity) → the partner
==================================================================== */
.act{background:var(--cream);color:var(--ink);
padding:var(--pad-band-top) 0 var(--pad-band-bot);overflow:hidden}
/* The show section runs on paper rather than the act's cream — the id beats
.act, and the sections around it keep the cream/paper alternation. */
#show{background:var(--paper)}
/* The flag is the act's only mark — scaled up from the eyebrow device, so the
eyebrow's own flag is dropped here to avoid doubling it. */
.act-flag{width:clamp(56px,7vw,84px);height:clamp(18px,2.2vw,26px);
background:var(--gold);clip-path:polygon(0 0,100% 0,82% 100%,0 100%)}
/* One title stack anchored to the right edge of the page — which also suits
البورصة, since Arabic reads right-to-left. Name, word, then what the act is
about; the rule still spans the full width so the block reads against it. */
.act-head{display:grid;justify-items:end;text-align:right}
.act-head .act-flag{margin-bottom:clamp(20px,2.6vw,36px)}
.act:not(.act--part) .act-word{font-size:max(62px,12.5vw)} /* الفرصة is shorter */
.act-head .act-for{max-width:44ch;margin-top:0;margin-bottom:var(--s3)}
/* ---- market chart + word share a row ----
Chart on the left edge, word right-aligned in the flexible column, so the
pair spans the full width. */
.act-signal{display:grid;grid-template-columns:auto minmax(0,1fr);
gap:clamp(20px,3vw,56px);align-items:center;width:100%}
.act-signal .act-word{padding-bottom:.34em}
.act-growth{width:clamp(200px,42vw,1120px)}
/* 42vw is the practical ceiling: the word is right-aligned in the remaining
column and is a single unbreakable token, so a wider chart squeezes it out. */
.growth{display:block;width:100%;height:auto}
@media(max-width:760px){
.act-signal{grid-template-columns:1fr;justify-items:end;gap:var(--s5)}
.act-growth{width:100%} /* stacked, so it spans like everything else */
}
/* ---- the growth chart ----
Candlesticks, because the page already spends its line chart on the market
line and its waveform on the show. Bodies grow up from a shared baseline on
a stagger, the trend traces the closes behind them, and the whole thing
collapses and rebuilds on a 5.6s loop. */
.growth .cd line{stroke:var(--gold-dark);stroke-width:2;opacity:.55}
.growth .cd rect{fill:var(--gold-dark)}
.growth .cd.dn rect{fill:var(--gold)}
.growth .cd.dn line{stroke:var(--gold)}
.growth .cd-trend{fill:none;stroke:var(--gold-deep);stroke-width:1.6;
stroke-linejoin:round;stroke-linecap:round;opacity:.9}
/* Timing, on a 5.6s loop. `animation-delay` on an INFINITE animation is a
permanent phase offset, not a one-time stagger: every candle keeps its lead
forever. So the stagger span is the thing that decides how much of each
cycle the chart is actually whole.
span = 17 x stagger all-up window = collapse% - (span + rise%)
At the old 110ms the span was 1.87s and the chart was fully drawn for only
1.49s of 5.6s — 27%, i.e. a half-built chart was the MAJORITY state, with the
right-hand candles permanently the thinnest. 45ms plus a wider hold puts it
at 3.38s, ~60%. Re-derive both numbers if the candle count or period change. */
@media(prefers-reduced-motion:no-preference){
/* scaleY only, about the shared baseline at y=208 — no x shift */
.growth .cd{transform-origin:0 208px;transform:scaleY(.06);opacity:0}
/* --ease, not --ease-in-out: a candle leaving the baseline is an entrance.
cubic-bezier(0.77,0,0.175,1) holds y=0 until x=0.77, so each candle used to
sit still for ~0.35s of its 0.78s rise and then snap. */
.act.seen .growth .cd{animation:candle-rise 5.6s var(--ease) infinite;
animation-delay:calc(var(--i) * 45ms)}
/* linear, and deliberately slower than the candle sweep, so the line always
arrives at a close AFTER that candle rather than ahead of it:
trend reaches x_i at .70 + 1.008(i/17) candle i lands at .672 + .045i
which stays positive across i=0..17 (+28ms at the left, +263ms at the right).
An ease-out here would race the front of the draw ahead and break that. */
.growth .cd-trend{stroke-dasharray:1;stroke-dashoffset:1}
.act.seen .growth .cd-trend{animation:trend-draw 5.6s linear infinite;
animation-delay:.7s}
}
@keyframes candle-rise{
0% {transform:scaleY(.06);opacity:0}
12% {transform:scaleY(1);opacity:1}
86% {transform:scaleY(1);opacity:1}
96% {transform:scaleY(.06);opacity:0}
100% {transform:scaleY(.06);opacity:0}
}
/* Percentages carry the .7s delay: keyframe p sits at .7 + 5.6p absolute. The
fade therefore starts at 73% (= 4.82s) — the moment the leftmost candle
begins to collapse — instead of outliving the candles by 1.2s. The dash
resets between 88% and 100%, while the line is already invisible. */
@keyframes trend-draw{
0% {stroke-dashoffset:1;opacity:.9}
18% {stroke-dashoffset:0;opacity:.9}
73% {stroke-dashoffset:0;opacity:.9}
88% {stroke-dashoffset:0;opacity:0}
100% {stroke-dashoffset:1;opacity:0}
}
/* direction:rtl keeps the Arabic shaping correct; text-align:left keeps the
word stacked with the Latin line beneath it. */
.act-word{font-family:var(--font-ar);font-weight:900;direction:rtl;text-align:right;
font-size:max(58px,11.5vw);line-height:1.0;letter-spacing:-.015em; /* البورصة */
padding-bottom:.34em; /* ink reaches .26em below the baseline (measured) */
color:var(--gold-dark)}
.act-for{font-family:var(--font-display);font-weight:500;
font-size:clamp(18px,1.8vw,34px);line-height:1.25;color:var(--gold-dark);
text-wrap:pretty}
/* ---------- Part One as a single section ----------
Three movements under one header: the opener, what the show is, what it
covers. The header keeps the act's scale; the movements are separated by
air and a hairline, not by new grounds. */
.act--part .act-head{margin-bottom:var(--pad-section)}
.act--part .movement+.movement{margin-top:var(--pad-section);padding-top:var(--pad-section);
border-top:1px solid var(--gold-300)}
/* The show section is on paper now, but the pillars keep the act's cream. It
is a movement inside .wrap, so the band is pulled out to the page edges and
given the gutter back as padding; the negative bottom margin carries it
through the section's own closing padding, so the colour runs to the
section's edge instead of stopping as a stripe. The rule above it is dropped
— the change of ground is the separator now. */
#pillars{background:var(--cream);border-top:0;
margin-inline:calc(-1 * var(--gutter-x));
padding-inline:var(--gutter-x);
padding-bottom:var(--pad-band-bot);
margin-bottom:calc(-1 * var(--pad-band-bot))}
.act--part .sec-head{margin-bottom:var(--pad-head)}
/* ============================= GROUNDS ============================= */
.block{padding:var(--pad-section) 0}
.b-paper{background:var(--paper);color:var(--ink)}
.b-stone{background:var(--stone);color:var(--ink)}
.b-cream{background:var(--cream);color:var(--ink)}
.b-ink{background:var(--ground-cover);color:var(--nwhite-500)}
.b-charcoal{background:var(--charcoal);color:var(--nwhite-500)}
.b-ink .h2,.b-charcoal .h2{color:var(--nwhite-500)}
.b-ink .h2 em,.b-charcoal .h2 em{color:var(--gold)}
.b-ink .lead,.b-charcoal .lead{color:rgba(243,238,216,.72)}
/* ======================== ENTRANCES ========================
All of it transform + opacity only, triggered by a .seen class from the
observer, so it runs off the main thread and never blocks paint. Every
group enters on a 55ms stagger rather than all at once.
========================================================== */
@keyframes rise-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rise-in-sm{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes flag-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mark-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.js-anim .stagger>*{opacity:0}
.js-anim .stagger.seen>*{animation:rise-in .62s var(--ease) forwards;
animation-delay:calc(var(--i,0) * 55ms)}
/* chips and hairline rows are small, so they travel a shorter distance */
.js-anim .subs.seen>*,.js-anim .listen.seen>*,
.js-anim .ticks.seen>*,.js-anim .geo.seen>*{
animation-name:rise-in-sm;animation-duration:.5s;
animation-delay:calc(var(--i,0) * 40ms)}
/* the act header assembles: flag, then label, word, translation, promise */
.js-anim .act-head .act-flag{transform:scaleX(0);transform-origin:left}
.js-anim .act.seen .act-head .act-flag{animation:flag-in .55s var(--ease) .05s forwards}
.js-anim .act-head .act-word,.js-anim .act-head .act-for{opacity:0}
.js-anim .act.seen .act-head .act-word {animation:rise-in .7s var(--ease) .24s forwards}
.js-anim .act.seen .act-head .act-for {animation:rise-in .6s var(--ease) .12s forwards}
/* the pivot mark lands with the microphone, not from nothing */
.js-anim .pivot-mark{opacity:0}
.js-anim .pivot.seen .pivot-mark{animation:mark-in .8s var(--ease) .1s forwards}
/* ================= 3D DEPTH — act one (#show) only =================
A trial band. Scoped to #show by ID so it cannot leak into the rest of the
page, and so it outranks the flat entrance rules (an id beats their three
classes) without !important.
TUNING: the four values below are the whole design. Change them live in
DevTools on the #show element — no rebuild.
Technique notes, and why it is built this way rather than the obvious way:
· perspective sits on each DIRECT parent (.act-signal, .movement, .stagger)
rather than once on the section. Sharing one vanishing point would need an
unbroken `transform-style: preserve-3d` chain down every branch, and any
link in that chain with overflow or clip-path silently flattens it —
.act-flag has a clip-path. Per-parent perspective gives slightly different
vanishing points but cannot be broken by a descendant.
· NOTHING THAT CARRIES TYPE RESTS AT NON-ZERO Z. Depth comes from pushing
the artwork back and from transient entrance depth only. A translateZ of
+40px at perspective 1200px scales the element by 1200/1160 = 3.4%, which
resamples glyphs — on البورصة at 11.5vw (~165px) that is a visibly soft
edge. So the word stays at z:0 and the chart, being SVG, takes the depth.
· The 3D entrance REPLACES the flat one inside this band instead of layering
over it. Two animations on one element, or an animation fighting .reveal's
transition, is how you get a transform that half-applies.
================================================================== */
#show{
--z-rest:-70px; /* the chart's resting depth */
--z-tilt:9deg; /* the chart's resting turn away from the reader */
--z-entry:-260px; /* how far back a block starts */
--z-entry-tilt:7deg; /* how far it is tipped when it starts */
}
/* Below 760px .act-signal stacks, so the chart is full-width and the same tilt
eats far more of a small screen — and perspective distortion is more obvious
the less room there is around it. Same four knobs, dialled back. */
@media(max-width:760px){
#show{--z-rest:-40px;--z-tilt:5deg;--z-entry:-160px;--z-entry-tilt:5deg}
}
@media(prefers-reduced-motion:no-preference){
#show .act-signal,#show .movement,#show .stagger{perspective:1200px}
/* Vanishing point at the row's LEFT edge, which is the chart's own left edge.
Pushing an element back pulls it toward the vanishing point, so with the
origin at 80% (past the word) the receding chart moved RIGHT and its right
edge crossed into البورصة — measured -4px of clearance at 1440. Anchored at
0% the left edge is the fixed point and the far edge shortens away from the
word instead, which both clears the collision and reads as the plane
turning away. The word is at z:0, so the origin does not move it. */
#show .act-signal{perspective-origin:0% 50%}
/* the chart is a plane angled away from the reader, at rest */
#show .act-growth{transform:translateZ(var(--z-rest)) rotateY(var(--z-tilt));
transform-origin:left center}
.js-anim #show .act-growth{
transform:translateZ(var(--z-entry)) rotateY(calc(var(--z-tilt) * 2.4))}
.js-anim #show.seen .act-growth{animation:depth-settle .95s var(--ease) .1s forwards}
/* prose and grids arrive as planes tipping up to flat */
.js-anim #show .reveal,.js-anim #show .stagger>*{transition:none;opacity:0;
transform:translateZ(var(--z-entry)) rotateX(var(--z-entry-tilt))}
.js-anim #show.seen .reveal{animation:depth-in .9s var(--ease) .06s forwards}
.js-anim #show.seen .stagger>*{animation:depth-in .9s var(--ease) forwards;
animation-delay:calc(var(--i,0) * 70ms)}
}
/* `to` only — the from-state is whatever the rules above computed, so the two
entrance shapes share one keyframe pair. */
@keyframes depth-settle{
to{transform:translateZ(var(--z-rest)) rotateY(var(--z-tilt))}
}
@keyframes depth-in{
to{opacity:1;transform:none}
}
/* figures roll up to their value as they arrive (see the count-up in the script) */
.counting{font-variant-numeric:tabular-nums}
/* ---- hover, gated so a tap does not fire a phantom hover ---- */
@media(hover:hover) and (pointer:fine){
/* The hover fill used to be a pale cream tint on a light card. Repainting
the site made --gold-soft Deep Green, which inverted the fill without
inverting the type: the heading was #1C281F on #1C281F, so the cell went
blank under the cursor. The cell inverts properly now - the fill is the
dark ground and the type comes up with it.
Measured on Deep Green: Light Gold 13.14:1, gold 7.51:1, Mist 8.10:1. */
.lens,.claim,.person{
transition:background .3s var(--ease),color .3s var(--ease)}
.lens h3,.lens p,.lens .n,
.claim h3,.claim p,.person h3,.person p{transition:color .3s var(--ease)}
.lens:hover,.claim:hover,.person:hover{background:var(--green-deep)}
.b-cream .lens:hover,.b-cream .lens:hover *,
.lens:hover,.lens:hover *{color:var(--light) !important}
.b-cream .lens:hover .n,.lens:hover .n{color:var(--gold) !important}
.b-cream .lens:hover p,.lens:hover p{color:var(--nwhite-700) !important}
}
/* ---- reveal ----
Scoped to .js-anim, which the script adds only once it has an observer
running. Without JS the content is simply visible. */
.js-anim .reveal{opacity:0;transform:translateY(24px);
transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-anim .reveal.seen{opacity:1;transform:none}
/* ============================= STORY ============================= */
/* The prose stacks on the left and the EGX mark anchors the right, sized to
exactly the height of the paragraph block — the exchange is what the show
explains, so the mark reads as the subject rather than as decoration.
The image is absolutely positioned on purpose: height:100% then resolves
against the stretched row without the mark's own 900x810 feeding back into
the row height. Its column is wide enough (height x 1.111) that max-width
never binds and shortens it. */
.story-cols{display:grid;grid-template-columns:minmax(0,1fr) auto;
gap:var(--gap-col);align-items:stretch;justify-content:space-between}
.story-prose{display:grid;gap:var(--s6);align-content:start;min-width:0}
.story-prose .lead{margin-top:0;max-width:62ch}
/* The mark is البورصة — the wordmark's own first line, cropped from the logo
artwork rather than set in Cairo, so the lettering is the brand's and not a
typeface approximation. At 1268x302 it is wide and short, so unlike the
square EGX logo it was replacing it is width-limited here: it takes the
column's full width and sits at the top, level with the heading beside it. */
.story-text{display:grid;align-content:start;min-width:0}
.story-mark{position:relative;margin:0;width:clamp(420px,36vw,640px)}
/* The plaque is a near-square illustration (1864x1572), so unlike the wide
wordmark it filled the column's width and stood on its own — a plain block
image, no absolute positioning and nothing to align against. */
.story-mark img{display:block;width:100%;height:auto}
/* the mark scales in rather than rising — it is a mark landing, not a line of
text arriving. Declared here, after .js-anim .reveal, so it wins the tie. */
.js-anim .story-mark{opacity:0;transform:none;transition:none}
.js-anim .story-mark.seen{animation:mark-in .7s var(--ease) .18s forwards}
/* stacked: the mark can no longer borrow the prose height, so it takes a
deliberate size and sits under the text */
/* Still stacking at 1100px. The mark now measures against heading + prose, so
it needs ~1.111x that height in width, and below ~1550px there is not enough
room to give it that AND leave the prose a sane measure — a narrower prose
is a TALLER prose, which demands a wider mark again. Rather than stack every
laptop, the mark top-aligns and runs shorter through that band (see
object-position above); full height alignment resumes above it. */
@media(max-width:1099px){
.story-cols{grid-template-columns:1fr;gap:var(--s7);justify-items:start}
.story-mark{width:auto}
.story-mark img{position:static;height:auto;width:clamp(112px,30vw,168px)}
}
/* ============================== HOST ============================== */
/* Three blocks: portrait, prose, credentials. Below 1080px the credentials
drop to a full-width row; below 720px everything stacks. */
/* The intro reads first and the credentials qualify it, so they stack: the
photo holds its own column down the left and the prose sits directly on top
of the list rather than beside it. (They used to run as three columns, which
put the "why she is independent" copy and the evidence for it side by side,
competing rather than reading in order.) */
/* Two halves, edge to edge: the portrait holds the whole left side and the
copy the whole right, so the section fills its width with no cap, no centred
block and nothing left over to pool between them. */
.host-grid{display:grid;align-items:start;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
grid-template-areas:"photo prose" "photo creds";
/* auto / 1fr, not two auto rows: the portrait spans both, and grid hands a
spanning item's extra height to the flexible track first. With two auto
rows that surplus was split between them, which pushed the credentials
away from the intro and opened a gap in the middle of the copy. Now row 1
is exactly the intro's height and all the slack falls below the list. */
grid-template-rows:auto 1fr;
column-gap:var(--gap-col-tight);
row-gap:clamp(30px,3.6vw,48px)}
@media(max-width:1080px){
.host-grid{grid-template-columns:minmax(190px,230px) 1fr;
grid-template-areas:"photo prose" "creds creds"}
}
@media(max-width:720px){
.host-grid{grid-template-columns:1fr;grid-template-areas:"photo" "prose" "creds"}
}
/* The section's bottom padding moves onto the credentials list instead of
sitting under the whole block. The portrait is fitted to the grid, so the
grid now ends where the portrait's feet are — she stands on the section's
floor with nothing beneath her — while the copy keeps its full breathing
room below the last rule. */
#host{padding-bottom:0}
.host-creds{padding-bottom:var(--pad-section)}
.host-photo{grid-area:photo}
.host-prose{grid-area:prose}
.host-creds{grid-area:creds}
/* the copy fills its half rather than being capped and pushed right */
.host-prose,.host-creds{justify-self:stretch;width:auto}
/* The portrait is a transparent cutout filling the section's left half, so it
stands directly on the paper with no cream panel and no gold rule behind it.
NOTE: the source is 591px wide, so past ~600px of column it is being scaled
UP — on a 1900px screen each half is ~856px, i.e. about 1.45x native. A
larger export is the only real fix for the softness that causes. */
/* bottom-aligned: the portrait stands on the section's baseline rather than
hanging from its top edge, so the figure and the credentials finish together */
.host-photo{align-self:end}
.host-photo img{width:100%;height:auto;display:block}
/* Matched to the copy's height. The portrait is taken out of flow so it stops
contributing its own intrinsic height to the grid — the rows are then sized
purely by the intro and the credentials, and the figure scales to fit that,
which is what removes the white that used to trail below the list. contain,
so nothing is cropped; bottom-left, so the figure keeps standing on the
section's baseline and stays aligned with the page's left gutter.
Scoped to the two-column layout: below 1081 the photo shares a row with the
intro and an out-of-flow image would collapse the figure to nothing. */
@media(min-width:1081px){
.host-photo{position:relative;align-self:stretch;min-height:0}
/* No width cap: the figure is sized by the column's height, so she spans it
from the intro's first line to the section floor — top and bottom aligned
with the copy at once. Anchored top-left, which only matters where the
half is too narrow to give her that height; there she falls short at the
bottom rather than dropping away from the text at the top. */
.host-photo img{position:absolute;inset:0;width:100%;height:100%;
object-fit:contain;object-position:left top}
}
/* after .host-photo{align-self:end}, for the same cascade reason: below 1080
the portrait shares a row with the intro only, so bottom-aligning it would
hang it off the intro's baseline with a gap above */
@media(max-width:1080px){.host-photo{align-self:start}}
@media(max-width:720px){.host-photo{max-width:230px;margin-bottom:8px}}
.creds{border-top:1px solid var(--border)}
.cred{display:grid;grid-template-columns:98px 1fr;gap:var(--s4);align-items:baseline;
padding:16px 0;border-bottom:1px solid var(--border)}
@media(max-width:460px){.cred{grid-template-columns:1fr;gap:4px}}
.cred dt{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
color:var(--gold-dark)}
.cred dd{font-size:14.5px;color:var(--grey);max-width:64ch}
.cred dd b{display:block;font-weight:600;color:var(--ink-strong);font-size:15px}
.indep{margin-top:var(--s6);padding:var(--s6) 24px;background:var(--gold-soft);
border-left:3px solid var(--gold);font-size:14.5px;color:var(--ink)}
.indep b{color:var(--gold-dark);font-weight:600}
/* ============================ PILLARS ============================
Not cards. Full-width editorial rows, with the Arabic name set as the
Latin title's counterpart on the same line — the identity's own idea
(the logo fuses the two scripts) used as structure. */
.pillar-list{list-style:none;padding:0;counter-reset:lens}
/* ---- THE FOUR LENSES ----------------------------------------------
Four equal lenses, so: four quadrants, divided by a single cross of
hairlines. The rules are the whole device — a reticle, which is what you
look through a lens at — and they cost nothing but a border. The list used to run as four full-width rows
with the right half empty; halving the measure lets the display type run
large enough to carry the section on its own, with no ornament at all. */
.pillar-list{display:grid;grid-template-columns:1fr 1fr;
border-bottom:1px solid var(--border)}
.pillar{display:grid;align-content:start;row-gap:10px;
/* a fixed numeral column, not auto: 1 is far narrower than 2 3 4, so an
auto column would indent each quadrant's title differently */
grid-template-columns:clamp(26px,2.1vw,34px) minmax(0,1fr);
grid-template-areas:"num title" "num body";
column-gap:clamp(14px,1.3vw,22px);
padding:var(--pad-cell) var(--pad-cell) var(--pad-cell) 0;
border-top:1px solid var(--border);
transition:background .3s var(--ease)}
.pillar:nth-child(2n){padding-right:0;padding-left:var(--pad-cell);
border-left:1px solid var(--border)}
/* THE NUMERALS.
Set in the display face rather than the body sans, so they read as part of
the titles they index instead of as a UI label, and lining figures so they
sit on one baseline beside the caps. They index the four lenses; they do not
rank them, which is why they stay quiet in gold rather than leading in ink.
The numbering comes from a counter on the , not from glyphs typed into
the markup, so it stays correct if the order ever changes. */
.pillar::before{counter-increment:lens;content:counter(lens);
grid-area:num;font-family:var(--font-display);font-weight:500;line-height:1;
font-variant-numeric:lining-nums;
font-size:clamp(26px,2.1vw,34px);color:var(--gold-dark);
padding-top:.06em}
.pillar h3{grid-area:title;font-family:var(--font-display);font-weight:500;
font-size:clamp(24px,2.9vw,40px);line-height:1.06;letter-spacing:-.02em;
color:var(--ink-strong);max-width:18ch}
.pillar-body{grid-area:body;font-size:15.5px;color:var(--grey);max-width:46ch}
@media(hover:hover) and (pointer:fine){
/* focusing one lens */
.pillar:hover{background:color-mix(in srgb, var(--gold) 10%, transparent)}
}
@media(max-width:820px){
.pillar-list{grid-template-columns:1fr}
.pillar,.pillar:nth-child(2n){padding:var(--pad-row) 0;
border-left:0;padding-left:0;padding-right:0}
}
/* The mission lead runs the section's full width. Its head block is capped at
min(62%,940px) like every other section head, so the cap is lifted here and
re-applied to the headline alone — otherwise the h2 would pull onto one line
and lose its break after "literate". */
#mission .sec-head{max-width:none}
#mission .sec-head .h2{max-width:min(62%,940px)}
#mission .sec-head .lead{max-width:none}
/* ==================== LITERACY GAP (bar comparison) ==================== */
/* start, not center: the figures column is the taller of the two, so centring
dropped the chart ~110px below the first stat and nothing in the two columns
lined up. Both now begin on the same line. */
.gap-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col);align-items:start}
@media(max-width:880px){.gap-grid{grid-template-columns:1fr}}
.bars{display:flex;flex-direction:column;gap:16px}
.bar-row{display:grid;grid-template-columns:132px 1fr 56px;gap:var(--s4);align-items:center}
@media(max-width:520px){.bar-row{grid-template-columns:88px 1fr 46px;gap:var(--s2)}}
/* left, not right: right-aligned labels sat the chart's visible edge 28-88px
inside its box, depending on the label's length, so nothing in the chart
lined up with the heading and lead above it. Flush left, every row starts on
the section's own left edge and the ragged edge moves to the label's tail,
where the bars begin. */
.bar-lab{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--nwhite-700);text-align:left}
.bar-track{height:12px;background:rgba(243,238,216,.1);overflow:hidden}
.bar-fill{height:100%;width:0;background:var(--gold);transition:width 1.3s var(--ease)}
.bar-val{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--gold)}
/* Egypt is the point of the chart — brightest row, so the eye starts there. */
.bar-row.egypt .bar-lab,.bar-row.egypt .bar-val{color:var(--nwhite-500)}
.bar-row.egypt .bar-fill{background:var(--nwhite-500)}
/* Sits directly under the bars it describes, so no rule — the chart above is
its own separator. (It only read as cramped when the two-column grid was
broken and the chart ran the section's full width.) */
.bars-cap{margin-top:var(--s6);font-size:13px;line-height:1.55;
color:rgba(243,238,216,.62)}
.gap-facts{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.gap-facts+.gap-facts{margin-top:var(--s6)}
/* no rule above each figure: the numbers are large enough to hold their own
grid, and four hairlines were reading as a table the stats do not form */
.fact{padding-top:var(--s4)}
.fact b{display:block;font-family:var(--font-display);font-weight:900;
font-size:clamp(38px,6.4vw,76px);color:var(--gold);line-height:.95;letter-spacing:-.03em}
.fact span{display:block;margin-top:8px;font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--nwhite-700)}
/* ==================== LENSES (the education model) ==================== */
.lens-grid{display:grid;grid-template-columns:repeat(2,1fr);
border-top:1px solid var(--gold-300);border-left:1px solid var(--gold-300)}
@media(max-width:760px){.lens-grid{grid-template-columns:1fr}}
/* past this width a 2x2 leaves each cell far wider than its prose */
@media(min-width:1800px){.lens-grid{grid-template-columns:repeat(4,1fr)}}
.lens{padding:var(--pad-cell);border-right:1px solid var(--gold-300);
border-bottom:1px solid var(--gold-300)}
.lens .n{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--gold-dark)}
.lens h3{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.4vw,25px);
margin-top:var(--s4);line-height:1.1;color:var(--ink-strong)}
.lens p{margin-top:12px;font-size:15px;color:var(--grey);max-width:52ch}
/* ======================= FORMAT / DISTRIBUTION ======================= */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-col)}
@media(max-width:760px){.two-col{grid-template-columns:1fr}}
.col-head{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold-dark);padding-bottom:var(--s4);border-bottom:1px solid var(--gold)}
.ticks{list-style:none}
.ticks li{position:relative;padding:var(--s4) 0 var(--s4) var(--s6);font-size:15px;
border-bottom:1px solid var(--border);color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;width:12px;height:5px;
top:calc(var(--s4) + .8em);transform:translateY(-50%); /* centred on line 1 */
background:var(--gold);clip-path:polygon(0 0,100% 0,82% 100%,0 100%)}
.b-ink .ticks li,.b-charcoal .ticks li{color:rgba(243,238,216,.8);
border-bottom-color:rgba(243,238,216,.14)}
/* ---- where to listen ---- */
.listen{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s7)}
.listen span{display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);
border:1px solid var(--border);color:var(--ink);font-size:13.5px;font-weight:500}
.listen svg{width:17px;height:17px;flex-shrink:0;color:var(--gold-deep)}
.listen-note{margin-top:20px;font-size:13px;color:var(--grey)}
/* ========================= INTERLUDE «و» ========================= */
.pivot{background:var(--charcoal);text-align:center;
padding:var(--pad-section) var(--gutter-x)}
.pivot::before{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse 58% 68% at 50% 50%,rgba(216,176,97,.16),transparent 72%)}
.pivot>*{position:relative;z-index:2}
/* A rendered studio mic in brand gold, cut out to real transparency, in place
of the flat «و» ligature that used to sit here. It is a tall, narrow object
where the glyph was nearly square, so the height runs larger: at the old
188px cap this silhouette is only 88px across and reads as a smudge. */
.pivot-mark{width:auto;height:clamp(150px,24vw,300px);margin:0 auto;
filter:drop-shadow(0 18px 34px rgba(0,0,0,.5))}
/* the glyph needs a box for the emission to sit in; inline-block so the
section's own text-align keeps it centred */
.pivot-mic{position:relative;display:inline-block}
/* AUDIO OFF THE PIVOT MIC.
Sound leaves the grille, so the rings are anchored to it: the mesh capsule
of the rendered mic centres on 60%/16% of the image box (measured off the
alpha, not guessed), where the old glyph put it at 40%/45%. */
@media(prefers-reduced-motion:no-preference){
.pivot-mic__audio{position:absolute;inset:0;pointer-events:none}
.pivot-mic__audio i{position:absolute;left:60%;top:16%;
width:clamp(30px,4.4vw,62px);aspect-ratio:1;border-radius:50%;
border:2px solid transparent;
border-top-color:var(--gold-100);border-left-color:var(--gold-100);
opacity:0;animation:mic-emit 2.4s linear infinite}
.pivot-mic__audio i:nth-child(2){animation-delay:.8s}
.pivot-mic__audio i:nth-child(3){animation-delay:1.6s}
.pivot-mic.is-idle .pivot-mic__audio i{animation-play-state:paused}
}
.pivot p{margin:var(--s4) auto 0;font-family:var(--font-display);font-weight:500;
font-size:clamp(16px,2.2vw,22px);line-height:1.35;color:rgba(243,238,216,.78);max-width:560px}
.pivot .sub{margin-top:var(--s4);font-family:var(--font-body);font-weight:600;font-size:11px;
letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
/* ============================ AUDIENCE ============================ */
/* ===================== AUDIENCE — THE MAP ======================
The geography is drawn from Natural Earth's public-domain boundaries rather
than sketched, so the shapes are the real ones. Only the four markets the
data covers are drawn — no context countries — so the map shows the
audience's footprint and claims nothing about anywhere else. Regions are
tinted by share: Egypt at 85.7% carries the brand gold, the rest step down
the ramp, which is the same information the callouts give in figures. */
.aud-x{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--gap-col);
align-items:center}
.aud-map{margin:0}
.mapx{display:block;width:100%;height:auto}
.mp path{stroke:var(--paper);stroke-width:1.2;stroke-linejoin:round}
.mp--egypt path{fill:var(--gold)}
.mp--saudi path{fill:#cfc4a0}
.mp--levant path{fill:#d8d0b6}
.mp--gcc path{fill:#e4dece}
.mp-dot{fill:var(--ink-strong)}
.mp-name{font-family:var(--font-body);font-size:12px;font-weight:600;
letter-spacing:.16em;text-transform:uppercase;fill:var(--grey);text-anchor:middle}
.mp-val{font-family:var(--font-display);font-weight:700;font-size:27px;
fill:var(--gold-deep);text-anchor:middle}
.aud-map figcaption{margin-top:var(--s4);font-size:12px;color:var(--grey)}
/* ---- the two age rings ---- */
.aud-side{display:flex;flex-direction:column;gap:var(--pad-head)}
.rings{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid)}
.ring{margin:0;display:grid;justify-items:center;text-align:center}
.ring-svg{display:block;width:min(100%,150px);height:auto}
.ring-track{stroke:var(--border);stroke-width:11}
.ring-arc{stroke:var(--gold);stroke-width:11;stroke-linecap:round;
/* the arc is a circle of circumference 339.29 (r=54); --pct of it is drawn */
stroke-dasharray:339.29;stroke-dashoffset:339.29;
transform:rotate(-90deg);transform-origin:50% 50%}
.ring figcaption b{display:block;margin-top:var(--s4);font-family:var(--font-display);
font-weight:900;font-size:clamp(28px,3.4vw,42px);line-height:1;color:var(--gold-deep);
letter-spacing:-.02em}
.ring figcaption span{display:block;margin-top:var(--s2);font-size:11px;letter-spacing:.16em;
text-transform:uppercase;color:var(--grey);max-width:18ch;margin-inline:auto}
/* ---- platform split ---- */
.split-row{display:grid;grid-template-columns:1fr;gap:var(--s2);
padding:var(--s4) 0;border-bottom:1px solid var(--border)}
.split-lab{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--gold-dark)}
.split-track{height:10px;background:var(--stone)}
.split-track i{display:block;height:100%;background:var(--gold);
transform:scaleX(0);transform-origin:left center}
.split-val{font-size:14.5px;color:var(--ink)}
@media(prefers-reduced-motion:no-preference){
/* The rings draw to their value and the bars grow to theirs — the motion IS
the quantity, which is the one thing animation can say here that a static
figure cannot. Both run off the section's existing .seen observer, on the
page's own entrance curve. */
.ring-arc{transition:stroke-dashoffset 1.1s var(--ease) .15s}
.split-track i{transition:transform 1s var(--ease) .3s}
.seen .ring-arc{stroke-dashoffset:calc(339.29 - var(--pct) * 3.3929)}
.seen .split-track i{transform:scaleX(calc(var(--w) / 100))}
}
@media(prefers-reduced-motion:reduce){
/* no draw, but the quantities still have to be visible */
.ring-arc{stroke-dashoffset:calc(339.29 - var(--pct) * 3.3929)}
.split-track i{transform:scaleX(calc(var(--w) / 100))}
}
@media(max-width:980px){
.aud-x{grid-template-columns:1fr;gap:var(--pad-head)}
}
@media(max-width:520px){
.rings{grid-template-columns:1fr;gap:var(--s7)}
}
/* =========================== IR CHANNEL =========================== */
/* A statement opening: the number leads, the headline answers it. Breaks the
eyebrow -> headline -> lead pattern the rest of the page runs on. */
.stat-open{margin-bottom:clamp(40px,5.5vw,72px)}
.stat-open .ir-hero{margin:var(--s5) 0 var(--s3)}
.stat-open .h2{max-width:16ch}
.ir-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--gap-col);
align-items:start}
@media(max-width:880px){.ir-grid{grid-template-columns:1fr}}
.ir-hero{display:flex;align-items:baseline;gap:var(--gap-grid);flex-wrap:wrap}
.ir-hero b{font-family:var(--font-display);font-weight:900;font-size:clamp(84px,17vw,210px);
line-height:.82;letter-spacing:-.04em;color:var(--gold-deep)}
.ir-hero span{font-size:15px;color:var(--ink);max-width:16ch;line-height:1.3}
.ir-item{padding-top:24px;border-top:1px solid var(--gold-300);margin-top:24px}
.ir-item h3{font-family:var(--font-display);font-weight:500;font-size:clamp(20px,2.4vw,26px);
line-height:1.1;color:var(--ink-strong)}
.ir-item p{margin-top:var(--s2);font-size:15px;color:var(--grey);max-width:58ch}
.ir-note{background:var(--ground-cover);color:var(--nwhite-500);padding:var(--pad-cell);
border-top:3px solid var(--gold)}
.ir-note h3{font-family:var(--font-display);font-weight:500;
font-size:clamp(21px,2.6vw,27px);line-height:1.15;color:var(--gold)}
.ir-note p{margin-top:16px;font-size:15px;color:rgba(243,238,216,.78)}
.ir-note .stamp{margin-top:24px;font-size:11.5px;font-weight:600;letter-spacing:.18em;
text-transform:uppercase;color:var(--nwhite-500);
padding-top:var(--s4);border-top:1px solid rgba(216,176,97,.36)}
/* ====================== COLLABORATION MODELS ====================== */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
@media(max-width:980px){.models{grid-template-columns:1fr}}
.model{display:flex;flex-direction:column;padding:32px 28px;background:var(--paper);
border:1px solid var(--border);border-top:3px solid var(--gold);
transition:box-shadow .3s var(--ease)}
.model:hover{box-shadow:0 14px 36px rgba(31,31,31,.09)}
.model .mh{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold-dark)}
.model h3{font-family:var(--font-display);font-weight:700;font-size:clamp(23px,2.8vw,28px);
margin-top:12px;line-height:1.1;color:var(--ink-strong)}
.model .desc{margin-top:var(--s4);font-size:14.5px;color:var(--grey);max-width:46ch}
.tiers{margin-top:24px;padding-top:20px;border-top:1px solid var(--border);
display:flex;flex-direction:column;gap:var(--s4);flex:1}
.tier{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.tier dt{font-size:12.5px;font-weight:700;color:var(--ink-strong);white-space:nowrap}
.tier dd{font-size:13px;color:var(--grey);text-align:right}
.model .meta{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--border);
display:flex;flex-direction:column;gap:var(--s2)}
/* margin-top:auto, not a fixed margin: .tiers used to carry flex:1 and was what
pushed this block to the card floor, so the three cards' Commitment/Timeline
rows shared a baseline however long each description ran. With the tier lists
gone nothing grows, and a fixed margin would hang .meta off the end of each
description instead — ragged across the row. */
.model .meta div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;
color:var(--grey)}
.model .meta b{color:var(--gold-deep);font-weight:600}
.rate-ask{margin-top:var(--s7);padding:var(--pad-cell);background:var(--gold-soft);
border-left:3px solid var(--gold);
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.rate-ask p{font-size:15px;color:var(--ink);max-width:58ch}
.rate-ask p b{color:var(--gold-dark);font-weight:600}
/* ========================= WHY THIS WINS =========================
Rows, not a second 2x2 matrix — the claim at display size with its
argument set beside it. */
.claim-list{list-style:none;border-bottom:1px solid var(--border)}
.claim{display:grid;grid-template-columns:minmax(200px,.82fr) 1.18fr;
gap:var(--gap-col-tight);align-items:baseline;
padding:var(--pad-row) 0;border-top:1px solid var(--border)}
.claim h3{font-family:var(--font-display);font-weight:500;
font-size:clamp(22px,3.4vw,40px);line-height:1.04;letter-spacing:-.02em;
color:var(--ink-strong)}
.claim p{font-size:15.5px;color:var(--grey);max-width:56ch}
@media(max-width:720px){.claim{grid-template-columns:1fr;gap:8px}}
/* =============== NEXT STEPS (a genuine sequence) =============== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid);
counter-reset:s}
@media(max-width:880px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.steps{grid-template-columns:1fr}}
.step{counter-increment:s;padding-top:24px;border-top:1px solid var(--gold);position:relative}
.step::before{content:counter(s);position:absolute;left:0;
top:calc(-13px + .5px); /* half the chip, offset onto the 1px rule */
font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-strong);
background:var(--gold);width:27px;height:27px;display:grid;place-items:center}
.step p{font-size:15.5px;color:var(--ink);max-width:34ch;padding-top:8px}
/* ========================= ACUMEN / BOARD ========================= */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid);
margin-top:var(--s8)}
/* the three 4-up grids collapse together, or they stop sharing a column grid */
@media(max-width:880px){.stats-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.stats-row{grid-template-columns:1fr}}
.stat{padding-top:var(--s4);border-top:1px solid var(--gold)}
.stat b{display:block;font-family:var(--font-display);font-weight:900;
font-size:clamp(30px,4.6vw,52px);line-height:.95;letter-spacing:-.03em;color:var(--gold-deep)}
.stat span{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--grey)}
.subs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:28px}
.subs span{font-size:12.5px;font-weight:500;padding:var(--s2) var(--s4);border:1px solid var(--gold-300);
color:var(--gold-deep)}
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);
border:1px solid var(--border);margin-top:var(--s8)}
@media(max-width:880px){.people{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.people{grid-template-columns:1fr}}
.person{background:var(--paper);padding:var(--s6) 20px}
.person b{display:block;font-family:var(--font-display);font-weight:500;font-size:17.5px;
line-height:1.15;color:var(--ink-strong)}
.person span{display:block;margin-top:8px;font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:var(--grey)}
/* ========================= CONTACT / FOOTER ========================= */
.contact{background:var(--ground-cover);color:var(--nwhite-500);text-align:center;
padding:var(--pad-section) var(--gutter-x)}
.contact::before{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse 62% 60% at 50% 46%,rgba(216,176,97,.15),transparent 74%)}
.contact>*{position:relative;z-index:2}
.contact .eyebrow{justify-content:center}
.contact .h2{max-width:20ch;margin:var(--s4) auto 0;color:var(--nwhite-500)}
.contact .h2 em{color:var(--gold)}
.contact .lead{margin-inline:auto;color:rgba(243,238,216,.72)}
.two-doors{display:grid;grid-template-columns:1fr 1fr;gap:1px;
background:rgba(216,176,97,.36);border:1px solid rgba(216,176,97,.36);
max-width:840px;margin:48px auto 0;text-align:left}
@media(max-width:660px){.two-doors{grid-template-columns:1fr}}
.door{background:var(--ground-cover);padding:var(--s7) 28px;text-decoration:none;display:block;
transition:background .3s var(--ease)}
.door:hover{background:var(--charcoal)}
.door .ar{font-family:var(--font-ar);direction:rtl;font-weight:900;font-size:28px;
line-height:1.15;color:var(--gold)}
.door h3{font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--nwhite-500);margin-top:12px}
.door p{margin-top:12px;font-size:14px;color:rgba(243,238,216,.7)}
.door .go{margin-top:var(--s4);font-size:11.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:8px}
.door .arw{transition:transform .25s var(--ease)}
.door:hover .arw{transform:translateX(4px)}
footer{background:var(--charcoal);color:var(--nwhite-700);padding:52px 0 var(--s8);
border-top:1px solid rgba(216,176,97,.28)}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;
flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid rgba(243,238,216,.12)}
.foot-brand .foot-logo{height:46px;width:auto}
.foot-by{margin-top:var(--s6);display:flex;align-items:center;gap:16px;flex-wrap:wrap;
font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--nwhite-700)}
.foot-by img{height:44px;width:auto}
.foot-nav{display:flex;gap:44px;flex-wrap:wrap}
.foot-nav div{display:flex;flex-direction:column;gap:var(--s2)}
.foot-nav h4{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold);margin-bottom:4px}
.foot-nav a{color:var(--nwhite-700);text-decoration:none;font-size:13.5px;transition:color .2s}
.foot-nav a:hover{color:var(--gold)}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
padding-top:var(--s6);font-size:12px;color:var(--nwhite-700)}
.foot-bot b{color:var(--nwhite-700);font-weight:500}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important}
.js-anim .reveal{opacity:1;transform:none}
.ml-wave line{animation:none;transform:none}
.ml-line{stroke-dashoffset:0 !important}
.js-anim .stagger>*,.js-anim .act-head>*,.js-anim .pivot-mark{
opacity:1 !important;animation:none !important;transform:none !important}
/* the 3D band flattens completely — depth is movement, and this is the one
place where "gentler" means none at all */
#show .act-growth,.js-anim #show .reveal,.js-anim #show .stagger>*{
opacity:1 !important;transform:none !important;animation:none !important}
#show .act-signal,#show .movement,#show .stagger{perspective:none}
.growth .cd{opacity:1;transform:none;animation:none}
.growth .cd-trend{stroke-dashoffset:0;animation:none}
}
/* ================= FROM THE DESIGN CANVAS ================= */
/* The canvas keeps styles.css byte-identical and expresses every change as an
override block plus markup. That block is reproduced here verbatim so the two
stay in step — edit here, not in the canvas copy, or the next export diverges.
This round the canvas brought its own mobile layer: the nav burger and drawer,
and the narrow-screen tracks for the funnel, platform, mission and ledger rows.
The RESPONSIVE LAYER below deliberately no longer covers any of those. */
a{color:#D8B061}a:hover{color:#D8B061}
/* pivot — reworked motion: mark lands, glow breathes, sound rings ripple out from the grille behind it, copy follows */
.pivot-mic{isolation:isolate}
.pivot-mic .pivot-mark{position:relative;z-index:2}
.pivot-mic__audio{z-index:1}
.pivot-mic::before{content:"";position:absolute;left:55%;top:30%;width:230%;aspect-ratio:1;border-radius:50%;
transform:translate(-50%,-50%);z-index:0;pointer-events:none;
background:radial-gradient(circle,rgba(216,176,97,.28) 0%,rgba(216,176,97,.08) 38%,transparent 66%)}
@keyframes pivot-ring{
0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
12%{opacity:.75}
100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}
}
@keyframes pivot-glow{from{opacity:.55;transform:translate(-50%,-50%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes pivot-float{from{transform:translateY(0) rotate(-1.2deg)}to{transform:translateY(-8px) rotate(1.2deg)}}
@keyframes pivot-land{from{opacity:0;transform:translateY(28px) scale(.86)}to{opacity:1;transform:none}}
@keyframes pivot-copy{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
.pivot-mic__audio i{left:60%;top:16%;width:clamp(44px,6vw,84px);border-radius:50%;
border:1.5px solid rgba(212,203,174,.9);border-top-color:rgba(212,203,174,.9);border-right-color:rgba(212,203,174,.9);
transform:translate(-50%,-50%);opacity:0;animation:pivot-ring 3s cubic-bezier(.16,.6,.4,1) infinite}
.pivot-mic__audio i:nth-child(2){animation-delay:1s}
.pivot-mic__audio i:nth-child(3){animation-delay:2s}
.pivot-mic::before{animation:pivot-glow 3s cubic-bezier(.37,0,.63,1) infinite alternate}
.pivot-mic.is-idle::before{animation-play-state:paused}
.js-anim .pivot-mic{opacity:0}
.js-anim .pivot.seen .pivot-mic{animation:pivot-land 1s cubic-bezier(.22,1,.36,1) .05s forwards}
.js-anim .pivot.seen .pivot-mark{animation:pivot-float 3.6s cubic-bezier(.37,0,.63,1) 1.05s infinite alternate;opacity:1}
.js-anim .pivot-mark{opacity:1}
.js-anim .pivot>p{opacity:0}
.js-anim .pivot.seen>p{animation:pivot-copy .8s cubic-bezier(.22,1,.36,1) .45s forwards}
.js-anim .pivot.seen>p.sub{animation-delay:.7s}
}
#listen .ticks li::before{display:none}
@keyframes partner-in{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:1040px){.nav-burger{display:grid !important;color:#F3EED8}.nav-cta-tail{display:none}.nav--on-light .nav-burger{color:#F3EED8;border-color:#485C4C}}
@media(max-width:720px){
/* funnel rows: label over bar over value */
#audience .funnel>div{grid-template-columns:1fr !important;gap:10px !important;align-items:start !important}
#audience .funnel>div>div:last-child{text-align:left !important}
#audience .funnel>div>div:last-child span{white-space:normal !important}
/* platform reach rows */
.plat-row{grid-template-columns:88px minmax(0,1fr) 56px !important;gap:10px !important}
/* mission bars */
.mission-grid .bars>div{grid-template-columns:84px minmax(0,1fr) 48px !important;gap:10px !important}
/* show ledger */
.show-ledger-row{grid-template-columns:1fr !important;gap:4px !important}
/* contact doors + partner panel padding */
.contact-doors a{min-height:0 !important}
}
@media(max-width:520px){
.h2--xl{font-size:clamp(34px,11vw,52px) !important}
#audience .funnel>div>div:first-child b{font-size:14px !important}
}
input::placeholder,textarea::placeholder{color:#B3C0B4}
.person>b{align-self:end}.person>b+span{align-self:start;margin-top:4px !important}.person>span[aria-hidden]{margin-top:0 !important;letter-spacing:0 !important;text-transform:none !important}
@media(max-width:900px){#acumen>.wrap>div:first-child{grid-template-columns:1fr !important}#acumen>.wrap>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:1040px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}.foot-grid>div:first-child{grid-column:1/-1}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr !important}}
@media(max-width:760px){.contact-doors{grid-template-columns:1fr !important}}
@media(max-width:900px){.next-steps{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:480px){.next-steps{grid-template-columns:1fr !important}}
@media(max-width:900px){.mission-grid{grid-template-columns:1fr !important}}
@media(max-width:1180px){#host>.wrap{grid-template-columns:1fr !important}#host>.wrap>figure{max-width:420px !important;aspect-ratio:591/731;align-self:start !important}}
@media(max-width:1099px){.story-cols{grid-template-columns:1fr !important}.story-cols .story-mark{justify-self:start !important;max-width:520px !important}}
@media(prefers-reduced-motion:reduce){.pivot-mic,.pivot>p{opacity:1 !important;animation:none !important}.pivot-mic::before{animation:none}}
/* =========================================================================
RESPONSIVE LAYER
What is left here after the canvas brought its own mobile work: the pieces
the canvas does not cover. The nav burger and drawer, and the narrow tracks
for the funnel, platform, mission-bar and show-ledger rows, now live in the
canvas block above and are NOT duplicated here — a second opinion on the
same rows would just fight it, and this file loads last so it would win.
Appended last on purpose: the rules below override base rules of equal
specificity, and two override inline styles the canvas writes (marked, and
the only !important in here).
Breakpoints, and why each exists:
1024 the section-head measure is a desktop device; below it heads run full
820 iOS zooms a focused field under 16px
560 the existing phone breakpoint, already used by the hero
========================================================================= */
/* ------------------------------ THE PORT ---------------------------------
The canvas renders the drawer conditionally; the static page keeps it in the
DOM and lets the `hidden` attribute carry that state. `hidden` works through
the user-agent rule [hidden]{display:none}, which an inline display always
outranks — and the canvas writes display:grid inline on this element. Without
this the drawer is on screen from first paint. Same for the partner panel. */
[hidden]{display:none !important}
/* ------------------------- SECTION HEADS, NARROW -------------------------
.sec-head is capped at 62% of the band so a headline sits in a column and
the rest of the row stays open. That is a desktop device. Below 1024px there
is no "rest of the row" — the cap was setting 31px display type in a 193px
measure, three words to a line, while the band itself was 327px wide. */
@media(max-width:1023px){
.sec-head{max-width:none}
.sec-head .lead,.stat-open .lead{max-width:62ch}
/* the mission head keeps the cap on the headline itself rather than on the
block, so it needs releasing separately */
#mission .sec-head .h2{max-width:none}
}
/* the audience opener sets its own tighter measure; give it the width too.
(The canvas drops .h2--xl to clamp(34px,11vw,52px) below 520 — this is the
measure, not the size, so the two stack rather than conflict.) */
@media(max-width:640px){
.stat-open .h2{max-width:none}
}
/* ------------------------------ THE MODELS -------------------------------
The meta rows are label/value pairs justified apart; on a narrow card they
need to be allowed to wrap rather than overlap. (This block also used to
stack the tier lists — those are gone from the cards now.) */
@media(max-width:560px){
.model .meta div{flex-wrap:wrap}
}
/* ------------------------------ THE FORM ---------------------------------
iOS Safari zooms the whole page when a focused field is under 16px, and the
canvas writes 15px inline on every input — hence !important, the only way a
stylesheet reaches an inline declaration. Desktop keeps 15px. */
@media(max-width:820px){
#partner-form input,#partner-form textarea{font-size:16px !important}
}
/* --------------------------- TOUCH TARGETS ------------------------------
The footer link rows are 22px tall, which is fine for a cursor and not for a
thumb. On touch pointers they get the height, rather than the whole page
getting looser for everyone. */
@media(hover:none){
footer .foot-grid a{padding-block:9px;margin-block:-9px}
.listen span{padding:var(--s4) var(--s5)}
}
/* --------------------------- PHONE, LANDSCAPE ---------------------------
A phone on its side is about 360px tall. The hero asks for nearly the full
viewport plus 112px of padding, so without this the logo, the tag, both
buttons and the credit line are pushed off the bottom of the screen.
The canvas's drawer centres its own content, so it needs nothing here. */
@media(max-height:520px) and (orientation:landscape){
.hero{min-height:0;padding-top:84px;padding-bottom:var(--s6)}
.logo-podcast{max-height:34svh;margin-top:var(--s3)}
.hero-tag{margin-top:var(--s3)}
.hero-cta{margin-top:var(--s5)}
.hero-credits{margin-top:var(--s4)}
/* six 30px rows plus a button do not fit 360px of height */
.nav-drawer{align-content:start !important;padding-top:calc(var(--nav-h) + 8px) !important;
overflow-y:auto}
.nav-drawer a{font-size:22px !important;line-height:1.35 !important}
}
/* ----------------------------- LOOSE ENDS ------------------------------- */
@media(max-width:560px){
/* thirty characters of uppercase at .08em tracking overshoot a 312px measure */
.contact .wrap > p:last-child{overflow-wrap:anywhere;letter-spacing:.04em}
}
/* --------------------- THE HOST PORTRAIT, FITTED -------------------------
Two faults in the canvas layout, and they interact.
First: the figure was stretched to the full grid column and the portrait
dropped in with object-fit:contain. The column is far wider than the
portrait is tall, so contain fitted by HEIGHT and centred what it drew --
at 1900px she was 545px wide in an 831px panel, 143px of dead cream a side.
Second, and only visible once the first is fixed: shrinking the figure
inside a 1fr track just moves the dead space, leaving a void between the
portrait and the copy that grows with the viewport (373px at 1920).
So the figure gets a DEFINITE width and the copy's track takes whatever is
left. Definite is the important word. Deriving the figure's width from its
height instead -- aspect-ratio plus a height:100% -- and then asking an auto
track to size to it is circular (width <- height <- row <- track), and the
browser resolves that circle by collapsing the portrait to 383px and running
the copy out to 1278px. A clamp breaks the cycle before it starts.
The portrait then fills that width and stands on the bottom edge, so the
cream meets her shoulders on both sides and the only cream left is the band
above her head that carries the "Presented by" label. */
#host > .wrap > figure{
background:#F3EED8;
overflow:hidden}
@media(min-width:1181px){
#host > .wrap{grid-template-columns:auto minmax(0,1fr) !important}
#host > .wrap > figure{
width:clamp(300px,30vw,540px) !important;
max-width:none !important;
min-height:0 !important;
align-self:stretch !important;
justify-self:start !important}
#host > .wrap > figure > img{
top:auto !important;
bottom:0 !important;
width:100% !important;
height:auto !important;
/* if the copy is ever shorter than the portrait needs, cap rather than
overflow: overflow:hidden on the figure would otherwise crop her head */
max-height:100% !important;
object-fit:contain !important;
object-position:center bottom !important}
}
/* Below 1180 the section stacks; the canvas caps the figure at 420px. The cap
is kept and the portrait fills it, so the cream hugs her there too. */
@media(max-width:1180px){
#host > .wrap > figure{
width:min(420px,100%) !important;
height:auto !important;
aspect-ratio:auto !important;
align-self:start !important;
min-height:0 !important}
#host > .wrap > figure > img{
position:static !important;
width:100% !important;
height:auto !important;
margin-top:clamp(44px,7vw,72px) !important}
}
/* ------------------------- FIGURES ARE MONO ------------------------------
"DM Mono sets every figure - tickers, prices, multiples, percentages,
timecodes and act numbers. Tabular by default, so numbers align when they
stack." Brand Identity v1.0, section 05.
The canvas writes font-family inline on all of these, so each needs the
override. tabular-nums is the point of the choice: the mission bars and the
audience funnel stack figures in a column, and proportional digits make a
stacked column of numbers ragged. */
.tape-item b,
#bars b,
#funnel b,
#audience .plat-row b,
#audience .ir-note > b,
#acumen .stagger b,
#mission .mission-grid b,
.next-steps > div > span:nth-of-type(1),
#pillars .lens-cell span,
.ir-hero b,
.stat b,
.bar-val{
font-family:var(--font-mono) !important;
font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
letter-spacing:-.01em}
/* ====================== SURFACES THAT ARE NOT GREEN ======================
Inverting the ground to green flipped every text colour light. That is right
on the ~70% of the page that is now green or deep green, and wrong on the
surfaces that stay Light Gold and on anything filled with gold. Left alone
the footer was light type on its own light ground at 1.2:1, and the button
labels sat on gold at 1.75:1 - the exact pairing the book singles out as the
one that looks plausible and fails hardest.
!important throughout, because the canvas writes colour inline on most of
these elements and an ordinary rule loses to it.
Measured: Deep Green on Light Gold 13.14:1, Deep Green on gold 7.51:1,
Rule Green on Light Gold 6.20:1. */
/* -- Light Gold surfaces: the portrait plate, the footer, the drawer -- */
#host > .wrap > figure, #host > .wrap > figure *,
footer, footer *,
#partner-drawer [role="dialog"], #partner-drawer [role="dialog"] *{
color:var(--green-deep) !important}
/* secondary copy on those surfaces, still clearing 4.5:1 */
#host > .wrap > figure > p,
footer h4,
footer .foot-grid > div:not(:first-child) a,
#partner-drawer [role="dialog"] label > span:first-child,
#partner-drawer [role="dialog"] p{color:var(--rule-green) !important}
#partner-drawer [role="dialog"] h2,
#partner-drawer [role="dialog"] h2 em{color:var(--green-deep) !important}
/* inputs keep a light field with dark type */
#partner-form input,#partner-form textarea{
background:#FBF8EC !important;color:var(--green-deep) !important;
border-color:var(--rule-green) !important}
/* -- one primary button: gold fill, deep green label, everywhere --
.cta--ink was gold in the nav and deep green in #collaborate, so a single
colour rule made one of the two invisible. It is one button now. */
.cta--ink{background:var(--gold) !important;border-color:var(--gold) !important}
.cta--gold,.cta--ink,.cta--gold *,.cta--ink *{color:var(--green-deep) !important}
.contact-doors a:first-child,.contact-doors a:first-child *{
color:var(--green-deep) !important}
/* -- Rule Green is a hairline colour. It carries no type on green, where it
sits at 1.68:1; these picked it up from the token remap. -- */
.eyebrow--light{color:var(--gold)}
.cta--light{color:var(--light);border-color:var(--gold)}
/* ======================= THE ALTERNATING RHYTHM =========================
Green is the ground, but a page that is green end to end has no rhythm, so
the bands alternate: green, light, green, deep. Light Gold is what
alternates rather than white - white is not in the palette, and Light Gold
is the book's own light surface at 20% of the system.
The light bands are .b-cream, #pillars and #listen. NOT .act--part: #show carries
that class but overrides its own background to green, so treating it as
light put deep-green headings on a green ground at 1.27:1.
On the light bands every text colour has to come back down, and the canvas
writes colour inline, so these need !important to reach it. Gold carries no
type here at all - 1.75:1 on Light Gold - so the accent role falls to Rule
Green at 6.20:1. */
.b-cream,#pillars,#listen{background:var(--light)}
.b-cream,.b-cream *,#pillars,#pillars *,#listen,#listen *{color:var(--green-deep) !important}
.b-cream p,.b-cream span,.b-cream li,.b-cream dd,.b-cream figcaption,#pillars p,#pillars span,#pillars li,#pillars dd,#listen p,#listen span,#listen li,#listen dd,#listen figcaption{
color:var(--rule-green) !important}
.b-cream h1,.b-cream h2,.b-cream h3,.b-cream h4,.b-cream b,.b-cream strong,.b-cream .h2,.b-cream dt,#pillars h1,#pillars h2,#pillars h3,#pillars b,#pillars .h2,#pillars dt,#listen h1,#listen h2,#listen h3,#listen h4,#listen b,#listen strong,#listen .h2,#listen dt{
color:var(--green-deep) !important}
.b-cream .h2 em,.b-cream h2 em,#pillars .h2 em,#pillars h2 em,#listen .h2 em,#listen h2 em{color:var(--rule-green) !important}
.b-cream .eyebrow,#pillars .eyebrow,#listen .eyebrow{color:var(--rule-green) !important}
.b-cream .eyebrow::before,#pillars .eyebrow::before,#listen .eyebrow::before{background:var(--gold)}
.b-cream .col-head,#pillars .col-head,#listen .col-head{
color:var(--rule-green) !important;border-bottom-color:var(--rule-green)}
/* -- the plates that paint their own dark ground inside a light band --
Matched structurally, not on [style*="background:#1C281F"]: the browser
normalises the inline value to rgb() form, so the attribute never matches
what the canvas authored. .lens is NOT one of these - it has no background
of its own and sits directly on the band. The three collaboration cards and
the rate panel are: .model takes var(--paper), so on a light band it is a
green card that needs its type to stay light. */
.b-cream .ir-note,.b-cream .ir-note *,
#acumen .stagger > div,#acumen .stagger > div *,
#collaborate .rate-ask,#collaborate .rate-ask *{color:var(--light) !important}
.b-cream .ir-note h3,#acumen .stagger > div b,#listen .ir-note h3,
#collaborate .rate-ask p b{color:var(--gold) !important}
.b-cream .ir-note p,.b-cream .ir-note .stamp,#acumen .stagger > div span,
#listen .ir-note p,#listen .ir-note .stamp{color:var(--nwhite-700) !important}
/* Buttons keep their own treatment wherever they land, and this has to outrank
the dark-plate rules above it: #collaborate .rate-ask * is an ID selector, so
it was repainting the Request rates label light on its gold fill - 1.75:1,
the pairing the book names as the worst. Hence the id on these too. */
.b-cream .cta--gold,.b-cream .cta--ink,#pillars .cta--gold,#pillars .cta--ink,
.b-cream .cta--gold *,.b-cream .cta--ink *,
#collaborate .cta--gold,#collaborate .cta--ink,
#collaborate .cta--gold *,#collaborate .cta--ink *,
#listen .cta--gold,#listen .cta--ink{color:var(--green-deep) !important}
/* ------------------- THE COLLABORATION CARDS, LIGHT --------------------
The cards take the band's own Light Gold rather than sitting on it as dark
blocks. Same colour as the ground means the border does all the separating,
so the hairline goes to Rule Green, the 3px cap stays gold, and a soft lift
keeps them reading as panels instead of dissolving into the band.
Gold cannot carry type here - 1.75:1 on Light Gold - so the per-episode
figures in .meta, which were gold on the dark card, come down to Deep Green.
Measured on Light Gold: Deep Green 13.14:1, Rule Green 6.20:1. */
#collaborate .model{
background:var(--light) !important;
border:1px solid var(--rule-green) !important;
border-top:3px solid var(--gold) !important;
box-shadow:0 10px 24px -18px rgba(28,40,31,.55)}
#collaborate .model,#collaborate .model *{color:var(--rule-green) !important}
#collaborate .model h3,
#collaborate .model .meta b{color:var(--green-deep) !important}
#collaborate .model .mh{color:var(--rule-green) !important}
#collaborate .model .tiers,#collaborate .model .meta{
border-top-color:var(--rule-green) !important}
/* ---------------------- THE LEADERSHIP PORTRAITS -------------------------
The eight portraits are transparent cutouts, so whatever sits behind them is
the backdrop. White on the client's instruction - it is the one colour on
the page from outside the brand palette, which has no white; Light Gold is
the book's light surface.
Matched with :has(> img) rather than on the tile, because the same .stagger
grid also holds the four stat cards, which have no image and must keep their
Deep Green ground. The caption bar below each portrait keeps that ground
too, so a white photo sits over a dark name plate. */
#acumen .stagger > div > div:has(> img){background:#FFFFFF !important}
/* The 01-04 step numerals were gold on the dark band. Gold cannot carry type on
Light Gold (1.75:1), and the blanket light-band rule dropped them to Rule
Green - the same colour as the body copy beside them, which flattened the
hierarchy. Deep Green restores it at 13.14:1 without reaching outside the
palette. The 44x2 marker bar above each keeps the gold. */
.b-cream .next-steps > div > span{color:var(--green-deep) !important}
.b-cream .next-steps > div > span:first-child{background:var(--gold) !important}