/* Option 2 (27 Oct 2026): Draft 4 "Combined" (Option 1) with reworked motion: a flat star that stays in the
   opening screens, a loading screen that lifts on a wave, smoother answers, menu and cards.
   Brand colours only; every other shade is a tint or shade of them. Arabic-ready (logical properties). */
:root {
  --navy: #020059;
  --navy-2: #1a1880;
  --steel: #49608e;
  --sky: #cedcec;
  --white: #ffffff;
  --ground: #01003a;              /* navy, darkened: the page */
  --panel: rgba(206, 220, 236, 0.06);
  --panel-2: rgba(206, 220, 236, 0.12);
  --edge: rgba(206, 220, 236, 0.14);
  --text: #eef3f9;
  --muted: #c3cfe1;
  --m: clamp(16px, 3vw, 48px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Roles: what each colour is for. Dark mode is the default set; light mode swaps the values below. */
  --ink: var(--white);            /* headings and strong text */
  --accent: var(--sky);           /* small labels, dates */
  --btn-bg: var(--sky); --btn-ink: var(--navy); --btn-hover: var(--white);
  --bar-bg: rgba(1, 0, 58, 0.92);
  --spot: rgba(206, 220, 236, 0.14);
  --foot-bg: var(--ground);
  --word: var(--sky);
  --chip-bg: var(--white); --chip-ink: var(--navy);
  --chip-solid: #100f5c;          /* a solid step up from the page, so the waves never run behind its words */
  --display: 'Poppins', 'Cairo', system-ui, sans-serif;
  --body: 'Poppins', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  color-scheme: dark;
}
:root[data-theme='light'] {
  --ground: #ffffff;
  --panel: rgba(2, 0, 89, 0.04);
  --panel-2: rgba(2, 0, 89, 0.08);
  --edge: rgba(2, 0, 89, 0.12);
  --text: #0d0c3d;
  --muted: #4a5578;
  --ink: var(--navy);
  --accent: var(--steel);
  --btn-bg: var(--navy); --btn-ink: var(--white); --btn-hover: var(--navy-2);
  --bar-bg: rgba(255, 255, 255, 0.94);
  --spot: rgba(2, 0, 89, 0.06);
  --foot-bg: #eef3fa;
  --word: var(--navy);
  --chip-bg: var(--navy); --chip-ink: var(--white);
  --chip-solid: #eef3fa;
  color-scheme: light;
}
html[lang='ar'] { --display: 'Cairo', 'Poppins', system-ui, sans-serif; --body: 'IBM Plex Sans Arabic', 'Poppins', system-ui, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--ground); -webkit-font-smoothing: antialiased; overflow-x: clip; }
html[lang='ar'] body { line-height: 1.85; }
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m { padding-inline: var(--m); }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 200; padding: 8px 14px; border-radius: 999px; background: var(--sky); color: var(--navy); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Bar ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 20px; padding: 16px var(--m); transition: background-color 300ms ease, translate 400ms var(--ease); }
.bar.is-solid { background: var(--bar-bg); }
.bar.is-hidden { translate: 0 -100%; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 15px; line-height: 1; letter-spacing: 0.01em; flex: none; }
html[lang='ar'] .brand { font-family: 'Cairo', sans-serif; font-size: 18px; line-height: 1.1; }
.brand img { width: 34px; height: 34px; }
.brand span { max-width: 6em; }
.nav { margin-inline-start: auto; display: flex; gap: 2px; }
.nav a { padding: 8px 12px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--muted); transition: color 200ms ease, background-color 200ms ease; }
.nav a:hover { color: var(--ink); background: var(--panel); }
.nav a[aria-current='page'] { color: var(--ink); background: var(--panel-2); }
.tools { display: flex; align-items: center; gap: 6px; }
.tool { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px; background: var(--panel); border: 0; color: var(--ink); font: 500 14px/1 var(--body); text-decoration: none; cursor: pointer; }
.tool:hover { background: var(--panel-2); }
.tool--lang:lang(en) { font-family: 'Poppins', sans-serif; }
.tool--lang:lang(ar) { font-family: 'IBM Plex Sans Arabic', sans-serif; }
.tool svg { width: 20px; height: 20px; }
.tool--menu { display: none; }
@media (max-width: 1080px) { .nav { display: none; } .tools { margin-inline-start: auto; } .tool--menu { display: inline-flex; } }

/* Phone menu: a navy screen with the pages set large */
.menu { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; padding: 18px var(--m) 40px; background: var(--navy); color: var(--white); --ink: var(--white); }
.menu.is-open { display: flex; }
.menu__top { display: flex; justify-content: space-between; align-items: center; }
.menu ul { list-style: none; margin: auto 0; padding: 0; }
.menu li a { display: block; padding: 6px 0; font-family: var(--display); font-weight: 900; font-size: clamp(36px, 10vw, 64px); line-height: 1.1; letter-spacing: -0.03em; text-decoration: none; }
html[lang='ar'] .menu li a { letter-spacing: 0; line-height: 1.5; }
.menu li a[aria-current='page'] { color: var(--sky); }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font: 600 16px/1.2 var(--body); text-decoration: none; border: 0; cursor: pointer; transition: background-color 200ms ease, scale 160ms ease; }
.btn:hover { background: var(--btn-hover); }
.btn:active { scale: 0.97; }
.btn--ghost { background: var(--panel); color: var(--ink); }
.btn--ghost:hover { background: var(--panel-2); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.link { font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--sky); color: var(--navy); font-size: 12px; font-weight: 600; }

/* ---------- Loading moment (first visit) and the wave between pages ---------- */
.loader { position: fixed; inset: 0; z-index: 120; display: none; place-items: center; background: #01003a; color: var(--white); }
html.is-loading .loader { display: grid; }
/* Its wavy bottom edge, seen as it lifts away */
.loader__edge { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: 70px; color: #01003a; scale: 1 -1; }

/* One loader for every wait: the name locks in letter by letter while the bar fills (see Loader in motion.js) */
.ld { display: grid; justify-items: center; gap: 22px; padding: 0 24px; color: var(--white); --ld-dim: #49608e; --ld-track: rgba(206, 220, 236, 0.18); --ld-fill: var(--sky); }
.ld__star { width: 40px; height: 40px; fill: var(--ld-fill); animation: spin 1.1s cubic-bezier(0.6, 0, 0.3, 1) infinite; }
.ld__word { display: flex; direction: ltr; font-family: 'Poppins', sans-serif; font-weight: 900; font-size: clamp(30px, 7.5vw, 96px); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.ld__word span { display: inline-block; text-align: center; color: var(--ld-dim); }
.ld__word span.on { color: currentColor; }
.ld__track { width: min(440px, 76vw); height: 6px; border-radius: 6px; background: var(--ld-track); overflow: hidden; }
.ld__fill { height: 100%; background: var(--ld-fill); transform-origin: left; transform: scaleX(0); }
html[dir='rtl'] .ld__fill { transform-origin: right; }
.ld__meta { display: flex; justify-content: space-between; width: min(440px, 76vw); margin-top: -10px; font: 600 14px/1 'Poppins', 'IBM Plex Sans Arabic', sans-serif; color: var(--ld-fill); font-variant-numeric: tabular-nums; }
/* Between pages it sits on the last wave, which is the page colour */
.ld--wipe { opacity: 0; }
:root[data-theme='light'] .ld--wipe { color: var(--navy); --ld-dim: #9aa8c6; --ld-track: rgba(2, 0, 89, 0.1); --ld-fill: var(--navy); }
html.is-wiping .ld--wipe { opacity: 1; }
/* On a picture: a small one, on the picture's navy frame */
.poster__img { position: relative; }
.media-ld { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: var(--navy-2); transition: opacity 450ms ease; }
.media-ld.is-done { opacity: 0; pointer-events: none; }
.media-ld .ld { gap: 10px; width: 100%; }
.media-ld .ld__star { width: 22px; height: 22px; }
.media-ld .ld__word { font-size: clamp(15px, 1.7vw, 22px); }
.media-ld .ld__track, .media-ld .ld__meta { width: 68%; }
.media-ld .ld__track { height: 4px; }
.media-ld .ld__meta { margin-top: -4px; font-size: 11px; }
@keyframes spin { to { rotate: 360deg; } }

.wipe { position: fixed; inset: 0; z-index: 110; pointer-events: none; }
.wipe__layer { position: absolute; inset: 0; transform: translateY(110%); }
.wipe__layer > svg { position: absolute; left: 0; width: 100%; height: 70px; }
.wipe__layer .edge-top { bottom: calc(100% - 1px); }
.wipe__layer .edge-bottom { top: calc(100% - 1px); scale: 1 -1; }
.wipe__layer:nth-child(1) { background: var(--sky); color: var(--sky); }
.wipe__layer:nth-child(2) { background: var(--steel); color: var(--steel); }
.wipe__layer:nth-child(3) { background: var(--ground); color: var(--ground); display: grid; place-items: center; }
html.is-wiping .wipe__layer { transform: none; }

/* ---------- The logo: the official mark, only in the opening screens (see motion.js) ---------- */
/* White star on dark, navy star on light (like logo-white and logo-navy); the rings keep their brand colours. */
/* 64% of the shorter side of the screen, at most 720px, so it keeps in proportion with the text when zoomed out */
.stage-star { --s: min(64vmin, 720px); visibility: hidden; position: fixed; left: 50%; top: 50%; z-index: 1; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); pointer-events: none; will-change: transform; }
.logo-mark { display: block; width: 100%; height: 100%; overflow: visible; --logo-star: var(--white); }
:root[data-theme='light'] .logo-mark { --logo-star: var(--navy); }
.logo-mark .main path, .logo-mark .diag path { fill: var(--logo-star); }
.logo-mark .ring--sky path { fill: var(--sky); }
.logo-mark .ring--steel path { fill: var(--steel); }
.logo-mark .ring .ghost { opacity: var(--ghost, 0.14); } /* where a ring will be drawn, shown faintly */
/* On a phone the logo is part of the page instead: after the name, above "who we are" and above each page
   title. It scrolls exactly with the page (a picture moved by script trails behind a phone's own scrolling),
   and sways gently on its own. */
/* (.title .line > span would otherwise show the name's logo as one of its words) */
.title .line > .title-logo, .who__logo, .phero-logo { display: none; }
@keyframes logo-sway { from { rotate: -7deg; } to { rotate: 7deg; } }
@media (max-width: 759.98px) {
  .stage-star { display: none; }
  .title .line > .title-logo { display: inline-block; width: 0.8em; height: 0.8em; margin-inline-start: 0.16em; vertical-align: -0.02em; }
  .phero-logo { display: block; order: -1; width: 64px; height: 64px; margin-bottom: 22px; }
  .title-logo svg, .who__logo svg, .phero-logo svg { animation: logo-sway 6s ease-in-out infinite alternate; }
}
/* The logo floats above the waves of the first screens but below every piece of text: main makes no layer of
   its own, so the logo (z 1, earlier in the page) sits between the waves (no z) and the text (z 1, later). */
main { position: relative; }
.foot { position: relative; z-index: 2; }

/* ---------- First screens: the name or page title, with waves flowing in from the bottom ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 120px 22vh; overflow: hidden; }
.hero--page { min-height: 76svh; padding-block: 140px 20vh; }
.hero__waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html[dir='rtl'] .hero__waves { scale: -1 1; }
.hero > *:not(.hero__waves) { position: relative; z-index: 1; }
.title { margin: 0; max-width: 8em; font-weight: 900; font-size: clamp(58px, 9vw, 150px); line-height: 0.92; letter-spacing: -0.045em; color: var(--ink); }
html[lang='ar'] .title { line-height: 1.2; letter-spacing: 0; }
.hero--page .title { font-size: clamp(48px, 7vw, 116px); max-width: 10em; }
.title .line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.title .line > span { display: inline-block; }
.lead { margin: 26px 0 0; max-width: 36ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--text); }
html[lang='ar'] .lead { line-height: 1.8; }
.actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.chip { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; padding: 7px 16px 7px 7px; border-radius: 999px; background: var(--chip-solid); font-size: 14px; color: var(--muted); max-width: 100%; width: max-content; }
html[dir='rtl'] .chip { padding: 7px 7px 7px 16px; }
.chip > span:first-child { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: var(--white); flex: none; }
.chip img { width: 84px; }
@media (max-width: 760px) { .hero { justify-content: flex-end; padding-bottom: 26vh; } .chip { border-radius: 22px; } }

/* ---------- Shared section bits ---------- */
.sec { padding-block: clamp(76px, 13vw, 190px); } /* a little tighter on phones */
.h2 { margin: 0 0 16px; max-width: 14em; font-weight: 900; font-size: clamp(38px, 5vw, 76px); line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
html[lang='ar'] .h2 { line-height: 1.3; letter-spacing: 0; }
.sub { margin: 0 0 44px; max-width: 46ch; color: var(--muted); }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.head-row .h2 { margin: 0; }
.cell { position: relative; padding: 30px; border-radius: 26px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge); overflow: hidden; }
.cell::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, -500px) var(--my, -500px), var(--spot), transparent 45%); pointer-events: none; }
.cell h3 { margin: 0 0 6px; font-weight: 900; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
html[lang='ar'] .cell h3 { letter-spacing: 0; line-height: 1.4; }
.cell p { margin: 0; }
.cell .small { font-size: 15px; color: var(--accent); margin-bottom: 12px; }

/* ---------- Home: who we are (held while three statements take turns beside the star) ---------- */
.who { height: 100svh; }
.who__inner { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.who__list { grid-column: 2; position: relative; min-height: 380px; }
.js .who__item { position: absolute; inset: 0; opacity: 0; translate: 0 40px; transition: opacity 500ms ease, translate 700ms var(--ease); }
.js .who__item.on { opacity: 1; translate: 0 0; }
.js .who__item.past { translate: 0 -40px; } /* the one you scrolled past leaves upwards */
.who__item + .who__item { margin-top: 40px; }
.who__item small { display: block; margin-bottom: 14px; font-size: 16px; color: var(--accent); font-weight: 600; }
.who__item p { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3.4vw, 54px); line-height: 1.08; letter-spacing: -0.035em; color: var(--ink); }
html[lang='ar'] .who__item p { line-height: 1.45; letter-spacing: 0; }
.who__dots, .story__dots { display: flex; gap: 8px; margin-top: 28px; }
/* Each dash fills as you scroll towards the next statement or stage (--p, 0 to 1, set by motion.js) */
.who__dots i, .story__dots i { width: 40px; height: 5px; border-radius: 5px; background: linear-gradient(to right, var(--accent) calc(var(--p, 0) * 100%), var(--panel-2) 0); }
html[dir='rtl'] .who__dots i, html[dir='rtl'] .story__dots i { background: linear-gradient(to left, var(--accent) calc(var(--p, 0) * 100%), var(--panel-2) 0); }
/* On a phone: the logo fills the space between the bar and the statements, which stack in one place (so the
   tallest one sets the height and nothing spills over), with the dashes below them. */
@media (max-width: 759.98px) {
  .who__inner { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; padding-block: 84px 9svh; }
  .who__logo { display: grid; place-items: center; min-height: 0; container-type: size; }
  .who__logo svg { width: min(62vw, 250px, 88cqh); height: auto; aspect-ratio: 1; }
  .who__list { grid-column: 1; display: grid; min-height: 0; }
  .js .who__item { position: relative; inset: auto; grid-area: 1 / 1; }
  .who__item + .who__item { margin-top: 0; }
  .who__item p { font-size: clamp(26px, 7.4vw, 34px); }
  .who__dots { position: static !important; grid-area: 2 / 1; }
}
html:not(.js) .who, html:not(.js) .story { height: auto; padding-block: 120px; }

/* ---------- Home: the five stages, held while the waves rise ---------- */
.story { position: relative; height: 100svh; overflow: hidden; }
.story canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
html[dir='rtl'] .story canvas { scale: -1 1; }
.story__inner { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.stages { list-style: none; margin: 0; padding: 0; position: relative; min-height: 360px; }
.js .stages li { position: absolute; inset: 0; opacity: 0; translate: 0 30px; transition: opacity 450ms ease, translate 600ms var(--ease); }
.js .stages li.on { opacity: 1; translate: 0 0; }
.js .stages li.past { translate: 0 -30px; }
.stages li + li { margin-top: 16px; }
.stages .cell { height: max-content; }
.stages .help { margin-top: 14px; padding: 14px 18px; border-radius: 16px; background: var(--panel); }
.stages .help b { color: var(--ink); }
.story__note { position: absolute; z-index: 1; inset-inline-start: var(--m); bottom: 22px; font-size: 14px; color: var(--muted); }
/* On a phone: everything starts below the bar and fits in one screen; the stages stack in one place, the note
   follows them, and the waves only rise a little in the space left at the bottom (motion.js), below the words. */
@media (max-width: 759.98px) {
  .story { display: flex; flex-direction: column; }
  .story__inner { flex: none; height: auto; grid-template-columns: 1fr; align-content: start; gap: 16px; padding-top: 80px; }
  .story .h2 { margin-bottom: 6px; font-size: clamp(28px, 8vw, 36px); line-height: 1.08; }
  .story .sub { font-size: 15px; line-height: 1.55; }
  html[lang='ar'] .story .sub { line-height: 1.7; }
  .story__dots { margin-top: 14px; }
  .stages { display: grid; min-height: 0; }
  .js .stages li { position: relative; inset: auto; grid-area: 1 / 1; }
  .stages li + li { margin-top: 0; }
  .stages .cell { padding: 20px; border-radius: 22px; }
  .stages .cell h3 { font-size: 24px; }
  .stages .help { margin-top: 10px; padding: 10px 14px; font-size: 15px; }
  .story__note { position: relative; inset: auto; margin: 0; padding: 14px var(--m) 0; font-size: 13px; }
}
/* Short phones (an iPhone SE with Safari's bars showing): a little tighter still, so the note stays on screen */
@media (max-width: 759.98px) and (max-height: 620px) {
  .story__inner { gap: 10px; padding-top: 72px; }
  .story .h2 { font-size: 26px; }
  .story .sub { font-size: 14px; }
  .story__dots { margin-top: 10px; }
  .stages .cell { padding: 16px 18px; }
  .stages .cell h3 { font-size: 21px; }
  .stages .cell .small { margin-bottom: 6px; }
  .stages .help { margin-top: 8px; padding: 8px 12px; font-size: 14px; }
  .story__note { padding-top: 10px; }
}

/* ---------- Home: what do you need (rows fill with light blue on hover) ---------- */
.need ul { list-style: none; margin: 0; padding: 0; max-width: 1040px; } /* the two parts of each row stay near each other */
.need a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 22px 24px; border-radius: 24px; text-decoration: none; overflow: hidden; }
.need a::before { content: ''; position: absolute; inset: 0; background: var(--sky); clip-path: inset(0 100% 0 0 round 24px); transition: clip-path 500ms var(--ease); }
html[dir='rtl'] .need a::before { clip-path: inset(0 0 0 100% round 24px); }
.need a:hover::before, .need a:focus-visible::before { clip-path: inset(0 0 0 0 round 24px); }
.need a > * { position: relative; transition: color 300ms ease; }
.need a:hover > *, .need a:focus-visible > * { color: var(--navy); }
.need b { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 3.6vw, 54px); line-height: 1.1; letter-spacing: -0.03em; color: var(--ink); }
html[lang='ar'] .need b { letter-spacing: 0; line-height: 1.5; }
.need span { font-size: 16px; color: var(--muted); }
/* On phones each row stacks: what you need, then where to go */
@media (max-width: 600px) { .need a { grid-template-columns: 1fr; gap: 4px; padding: 18px 16px; } .need b { font-size: clamp(26px, 8vw, 34px); } }

/* ---------- Posters: on hover the card lifts a little and the picture moves closer (flat, no tilt) ---------- */
.posters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.poster { text-decoration: none; }
.poster__img { aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: var(--navy-2); box-shadow: inset 0 0 0 1px var(--edge); transition: translate 450ms var(--ease); }
.poster__img img { width: 100%; height: 100%; object-fit: cover; transition: scale 700ms var(--ease); }
.poster:hover .poster__img, .poster:focus-visible .poster__img { translate: 0 -6px; }
.poster:hover .poster__img img, .wrow .poster__img:hover img { scale: 1.05; }
.poster__card { height: 100%; display: flex; align-items: flex-end; padding: 24px; font-family: var(--display); font-weight: 900; font-size: clamp(20px, 2vw, 30px); line-height: 1.1; color: var(--white); }
.poster h3 { margin: 16px 0 2px; font-size: 18px; line-height: 1.35; font-family: var(--body); color: var(--ink); }
.poster p { margin: 0; font-size: 15px; color: var(--muted); }
@media (max-width: 880px) { .posters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- News list ---------- */
.newslist { list-style: none; margin: 0; padding: 0; }
.newslist li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; padding: 28px 0; box-shadow: 0 -1px 0 var(--edge); }
.newslist time { font-size: 15px; color: var(--accent); padding-top: 6px; }
.newslist h3 { margin: 0 0 6px; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
html[lang='ar'] .newslist h3 { letter-spacing: 0; line-height: 1.5; }
.newslist p { margin: 0; color: var(--muted); max-width: 64ch; }
@media (max-width: 760px) { .newslist li { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Join: the waves come back ---------- */
.join { position: relative; min-height: 92svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; padding-block: 120px 26vh; }
.join canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
html[dir='rtl'] .join canvas { scale: -1 1; }
.join > *:not(canvas) { position: relative; z-index: 1; }
.join .h2 { max-width: 10em; font-size: clamp(48px, 7vw, 112px); }
.join p { margin: 0 0 28px; max-width: 36ch; font-size: 20px; color: var(--text); }
/* On phones the join section is as tall as its words plus room for the waves, not a whole screen */
@media (max-width: 760px) { .join { min-height: 0; padding-block: 96px 34vh; } .join p { font-size: 18px; } }

/* ---------- About ---------- */
.statement { margin: 0; max-width: 26ch; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3.8vw, 60px); line-height: 1.1; letter-spacing: -0.035em; color: var(--ink); }
html[lang='ar'] .statement { letter-spacing: 0; line-height: 1.5; max-width: 30ch; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.bento .cell:nth-child(1), .bento .cell:nth-child(2) { grid-column: span 3; }
.bento .cell:nth-child(n+3) { grid-column: span 2; }
.bento .cell { min-height: 230px; display: flex; flex-direction: column; justify-content: flex-end; }
@media (max-width: 880px) { .bento { grid-template-columns: 1fr; } .bento .cell { grid-column: auto !important; min-height: 0; } }
.partof { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 28px 32px; border-radius: 26px; background: var(--sky); color: var(--navy); }
.partof img { width: 150px; }
.partof p { margin: 0; max-width: 46ch; font-size: 18px; font-weight: 500; }

/* ---------- Team ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.member { display: flex; flex-direction: column; gap: 6px; }
.member__photo { aspect-ratio: 4 / 3; border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge); display: grid; place-items: center; margin-bottom: 14px; }
.member__photo svg { width: 64px; height: 64px; opacity: 0.5; }
.member h3 { margin: 0; font-size: 24px; color: var(--ink); }
.member .role { color: var(--accent); font-size: 15px; }
.member p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 880px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; } }
.band { margin-top: 80px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 34px clamp(24px, 4vw, 44px); border-radius: 30px; background: var(--sky); color: var(--navy); }
.band h2 { margin: 0 0 6px; font-weight: 900; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; color: var(--navy); }
.band p { margin: 0; max-width: 52ch; }
.band .btn { background: var(--navy); color: var(--white); }
.band .btn:hover { background: var(--navy-2); }

/* ---------- Workshops page ---------- */
.wlist { display: grid; gap: 56px; }
.wrow { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.wrow .poster__img { max-width: 440px; }
.wrow h2 { margin: 0 0 14px; font-weight: 900; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
html[lang='ar'] .wrow h2 { letter-spacing: 0; line-height: 1.4; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 16px; }
.facts dt { font-size: 14px; color: var(--accent); }
.facts dd { margin: 0; font-weight: 600; }
.wrow p { margin: 0 0 20px; color: var(--muted); max-width: 52ch; }
@media (max-width: 760px) { .wrow { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 900px; }
.faq details { border-radius: 22px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px; cursor: pointer; list-style: none; font-family: var(--display); font-weight: 800; font-size: clamp(19px, 1.8vw, 24px); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; transition: rotate 300ms var(--ease); }
.faq details[open] .plus { rotate: 45deg; }
.faq details.is-closing .plus { rotate: 0deg; } /* turns back as soon as the answer starts to close */
.faq .answer { padding: 0 26px 24px; color: var(--muted); overflow: hidden; }
.faq .tag { margin-inline-start: 10px; vertical-align: middle; }

/* ---------- Contact ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ways .cell { display: flex; flex-direction: column; gap: 12px; min-height: 280px; }
.ways .cell .btn { margin-top: auto; align-self: flex-start; }
.ways .cell:first-child { background: var(--sky); color: var(--navy); box-shadow: none; }
.ways .cell:first-child h3 { color: var(--navy); }
.ways .cell:first-child .btn { background: var(--navy); color: var(--white); }
@media (max-width: 880px) { .ways { grid-template-columns: 1fr; } }
.channels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.channels a { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--edge); text-decoration: none; font-weight: 600; transition: background-color 200ms ease; }
.channels a:hover { background: var(--panel-2); }
.channels svg { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-ink); }
@media (max-width: 880px) { .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Find us: each channel with a short line saying what is there */
.channels a { min-height: 92px; padding: 18px 20px; }
.ch__name { display: grid; gap: 2px; min-width: 0; }
.ch__name small { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--muted); }
.ch__arr { margin-inline-start: auto; color: var(--muted); transition: translate 250ms var(--ease); }
.channels a:hover .ch__arr { translate: 4px 0; }
html[dir='rtl'] .channels a:hover .ch__arr { translate: -4px 0; }
@media (max-width: 520px) { .channels { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { background: var(--foot-bg); box-shadow: inset 0 1px 0 var(--edge); padding: 64px var(--m) 24px; }
.foot__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; font-size: 15px; }
.foot__cols h2 { margin: 0 0 12px; font-size: 15px; font-family: var(--body); color: var(--ink); }
.foot__cols a { display: block; color: var(--muted); text-decoration: none; padding: 3px 0; }
.foot__cols a:hover { color: var(--ink); }
.foot__mark { display: inline-flex; padding: 10px 18px; border-radius: 999px; background: var(--white); }
.foot__mark img { width: 120px; }
.foot__word { margin-top: 96px; color: var(--word); }
.foot__word svg { display: block; width: 100%; height: auto; overflow: visible; }
.foot__word text { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: 146px; fill: currentColor; }
html[lang='ar'] .foot__word text { font-family: 'Cairo', sans-serif; font-size: 200px; }
.foot__note { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .foot__cols { grid-template-columns: 1fr 1fr; } }

/* Label for the team review */
.foot__others a { color: var(--ink); }

/* Content is never hidden without script, and nothing moves for reduced motion */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Small phones: the Join button shows only its icon so the bar fits in both languages */
@media (max-width: 480px) {
  .tools .btn--sm { width: 42px; padding: 0; }
  .tools .btn--sm span:not(.vh) { display: none; }
  .bar { gap: 10px; }
}

/* The logo: white on dark, navy on light */
.brand .logo--light { display: none; }
:root[data-theme='light'] .brand .logo--dark { display: none; }
:root[data-theme='light'] .brand .logo--light { display: block; }
.menu .brand .logo--dark { display: block !important; }
.menu .brand .logo--light { display: none !important; }

/* Theme switch: the new mode spreads in a circle from the button (see motion.js) */
:root.theme-vt::view-transition-old(root), :root.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
:root.theme-vt::view-transition-new(root) { z-index: 2; }
.tool .ic-sun, :root[data-theme='light'] .tool .ic-moon { display: none; }
:root[data-theme='light'] .tool .ic-sun { display: block; }
.tool[aria-pressed='true'] { background: var(--btn-bg); color: var(--btn-ink); }
.menu__tools { display: flex; gap: 8px; flex-wrap: wrap; }
.menu .tool { color: var(--white); background: rgba(206, 220, 236, 0.12); }
.menu .tool[aria-pressed='true'] { background: var(--sky); color: var(--navy); }

/* Calm mode (the reduce-motion button, or the device asking for less motion): nothing moves,
   and every statement and stage is shown in full instead of taking turns. */
html.calm *, html.calm *::before, html.calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.calm .who, html.calm .story { height: auto; padding-block: 120px; }
html.calm .who__item, html.calm .stages li { position: static !important; opacity: 1 !important; translate: none !important; }
html.calm .who__item, html.calm .stages li { grid-area: auto; } /* on a phone they otherwise share one place */
html.calm .who__item + .who__item { margin-top: 40px; }
html.calm .stages li + li { margin-top: 16px; }
html.calm .who__dots, html.calm .story__dots { display: none; }
html.calm .story__note { position: static; margin: 32px var(--m) 0; }
html.calm .who__logo, html:not(.js) .who__logo { container-type: normal; margin-bottom: 28px; }
html.calm .who__logo svg, html:not(.js) .who__logo svg { width: 150px; }
html.calm .poster__img, html.calm .poster__img img { translate: none !important; scale: none !important; }
@media (max-width: 640px) { .tools .tool--hide-sm { display: none; } }
.tool__short { display: none; }
@media (max-width: 480px) {
  .tool--lang { padding: 0; }
  .tool--lang .tool__long { display: none; }
  .tool--lang .tool__short { display: inline; }
  .bar .brand { flex: 0 1 auto; min-width: 0; }
  .tools { flex: none; gap: 5px; }
}