/* =========================================================================
   BEIT AL-ILM — Homepage revamp
   Design system: "House of Knowledge" — clean, scholarly, warm-editorial.
   DDC semantic colour engine: Discover=navy, Develop=green, Contribute=gold.
   Bilingual (EN/AR, RTL-aware) · light/dark · reduced-motion aware.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* brand primitives */
  --navy:#042346;         --navy-ink:#0A2E57;
  --green:#115224;        --green-ink:#14612C;
  --gold:#EBA25A;         --gold-ink:#9A5F1C;

  /* surfaces & text (light) */
  --bg-canvas:#FCFCFA; --bg-surface:#FFFFFF; --bg-surface-2:#F4F5F1;
  --bg-sunken:#EDEEE8; --bg-inverse:#042346;
  --text-strong:#15222F; --text-body:#454F59; --text-muted:#79838D;
  --text-on-brand:#F6F2EA;
  --border-subtle:rgba(4,35,70,.10); --border-strong:rgba(4,35,70,.18);
  --focus-ring:#9A5F1C; --nav-bg:rgba(252,252,250,.82);

  /* media veils (over imagery/video) */
  --veil-discover:linear-gradient(180deg, rgba(4,35,70,.28) 0%, rgba(4,35,70,.82) 100%);
  --veil-develop:linear-gradient(180deg, rgba(9,48,22,.26) 0%, rgba(9,48,22,.84) 100%);
  --veil-contribute:linear-gradient(180deg, rgba(120,74,26,.24) 0%, rgba(52,30,8,.80) 100%);
  --veil-neutral:linear-gradient(180deg, rgba(6,18,30,.12) 0%, rgba(6,18,30,.78) 100%);

  /* shadows (cool-ink, not pure black) */
  --shadow-sm:0 1px 2px rgba(10,20,30,.05),0 2px 8px rgba(10,20,30,.05);
  --shadow-md:0 4px 14px rgba(10,20,30,.07),0 10px 30px rgba(10,20,30,.06);
  --shadow-lg:0 12px 28px rgba(10,20,30,.10),0 24px 60px rgba(10,20,30,.08);
  --shadow-accent:0 10px 28px color-mix(in srgb, var(--accent-fill) 30%, transparent);

  /* neutral default accent (no data-ddc) = warm gold */
  --accent:var(--gold-ink); --accent-fill:var(--gold);
  --accent-line:var(--gold); --accent-soft:rgba(235,162,90,.14);
  --veil:var(--veil-neutral);

  /* type */
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Inter Tight","Inter",sans-serif;
  --font-ar:"Tajawal","Inter",sans-serif;

  /* spacing */
  --space-3xs:4px; --space-2xs:8px; --space-xs:12px; --space-sm:16px;
  --space-md:24px; --space-lg:32px; --space-xl:48px; --space-2xl:64px;
  --space-3xl:96px; --space-4xl:128px;

  /* containers */
  --container:1120px; --container-wide:1280px; --container-narrow:720px;
  --gutter:clamp(20px,5vw,40px);

  /* radius */
  --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1); --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-fast:150ms; --dur:300ms; --dur-slow:600ms; --dur-reveal:700ms;
}

[data-theme="dark"]{
  --navy-ink:#88AEDD; --green-ink:#59BE84; --gold-ink:#EEB273;
  --bg-canvas:#06182B; --bg-surface:#0C2338; --bg-surface-2:#0A1E31;
  --bg-sunken:#04111F; --bg-inverse:#020C18;
  --text-strong:#EAF1F7; --text-body:#A7B4C0; --text-muted:#6E7C89;
  --border-subtle:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
  --focus-ring:#EEB273; --nav-bg:rgba(6,24,43,.86);
  --shadow-sm:0 2px 10px rgba(0,0,0,.30);
  --shadow-md:0 6px 24px rgba(0,0,0,.40);
  --shadow-lg:0 16px 48px rgba(0,0,0,.52);
  --accent-soft:rgba(238,178,115,.16);
}

/* DDC engine — set data-ddc on any section/card */
[data-ddc="discover"]{ --accent:var(--navy-ink); --accent-fill:var(--navy);
  --accent-line:var(--navy); --accent-soft:rgba(4,35,70,.07); --veil:var(--veil-discover); }
[data-ddc="develop"]{ --accent:var(--green-ink); --accent-fill:var(--green);
  --accent-line:var(--green); --accent-soft:rgba(17,82,36,.09); --veil:var(--veil-develop); }
[data-ddc="contribute"]{ --accent:var(--gold-ink); --accent-fill:var(--gold);
  --accent-line:var(--gold); --accent-soft:rgba(235,162,90,.14); --veil:var(--veil-contribute); }
[data-theme="dark"] [data-ddc="discover"]{ --accent-soft:rgba(136,174,221,.14); }
[data-theme="dark"] [data-ddc="develop"]{ --accent-soft:rgba(89,190,132,.15); }
[data-theme="dark"] [data-ddc="contribute"]{ --accent-soft:rgba(238,178,115,.16); }

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  font-family:var(--font-body); background:var(--bg-canvas); color:var(--text-body);
  line-height:1.75; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
[data-lang="ar"] body,[data-lang="ar"]{ --font-body:var(--font-ar); --font-display:var(--font-ar); }
[data-lang="ar"]{ --ar-scale:1.05; }
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ color:var(--text-strong); font-family:var(--font-display); font-weight:600; line-height:1.15; }

/* ---------- 3. Utilities ---------- */
.u-container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.u-container--wide{ max-width:var(--container-wide); }
.u-container--narrow{ max-width:var(--container-narrow); }
.u-sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* section rhythm */
.section{ padding-block:clamp(72px,9vw,128px); position:relative; }
.section--alt{ background:var(--bg-surface-2); }
.section--brand{ background:var(--bg-inverse); color:var(--text-on-brand); }
.section--brand h2,.section--brand h3{ color:var(--text-on-brand); }

/* ---------- 4. Type helpers ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:var(--space-2xs);
  font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); }
[data-lang="ar"] .eyebrow{ text-transform:none; letter-spacing:0; font-weight:700; }
.section-head{ margin-block-end:clamp(36px,5vw,60px); max-width:var(--container-narrow); }
.section-head.is-center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.6rem,1.25rem + 1.7vw,2.35rem); letter-spacing:-.018em;
  margin-block:14px 14px; }
.section-head .lede{ font-size:clamp(1.05rem,1rem + .3vw,1.2rem); color:var(--text-body); line-height:1.7; }
.section-line{ inline-size:56px; block-size:3px; border-radius:2px; background:var(--accent-line); }
.is-center .section-line{ margin-inline:auto; }
.text-accent{ color:var(--accent); }

/* ---------- 5. Ripple motif ---------- */
.ripple-dot{ --r:9px; position:relative; inline-size:var(--r); block-size:var(--r);
  border-radius:50%; background:var(--accent-line); flex:0 0 auto; }
.ripple-dot::before,.ripple-dot::after{ content:""; position:absolute; inset:50%;
  translate:-50% -50%; border-radius:50%; border:1px solid var(--accent-line); }
.ripple-dot::before{ inline-size:calc(var(--r)*2); block-size:calc(var(--r)*2); opacity:.35; }
.ripple-dot::after{ inline-size:calc(var(--r)*3.2); block-size:calc(var(--r)*3.2); opacity:.16; }

/* ---------- 6. Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2xs);
  padding:13px 26px; border-radius:var(--radius-md); font:600 .95rem/1 var(--font-body);
  border:1.5px solid transparent; text-decoration:none; white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s, border-color .3s; }
.btn-sm{ padding:9px 18px; font-size:.85rem; }
.btn-primary{ background:var(--accent-fill); color:#fff; }
[data-ddc="contribute"] .btn-primary,.btn-primary.on-gold{ color:#3a2408; }
.btn-secondary{ background:var(--navy); color:#fff; }
[data-theme="dark"] .btn-secondary{ background:var(--green); color:#eafaf0; }
.btn-outline{ background:transparent; color:var(--text-strong); border-color:var(--border-strong); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn--on-media{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.30); backdrop-filter:blur(8px); }
.btn--on-media:hover{ background:rgba(255,255,255,.22); }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-accent); }
.btn:active{ transform:scale(.98); }
.btn:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
.link-quiet{ color:var(--text-on-brand); font-weight:500; font-size:.95rem;
  border-bottom:1px solid transparent; transition:border-color .3s; }
.link-quiet:hover{ border-color:currentColor; }

/* ---------- 7. Cards & pills ---------- */
.card{ position:relative; background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); padding:var(--space-lg);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent; }
.card--rail{ border-inline-start:4px solid var(--accent-line); }
.card__icon{ inline-size:52px; block-size:52px; border-radius:var(--radius-md);
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); margin-block-end:var(--space-md); }
.pill{ display:inline-flex; align-items:center; gap:var(--space-3xs);
  padding:8px 16px; border-radius:var(--radius-pill); font:500 .82rem/1 var(--font-body);
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--border-subtle); }

/* ---------- 8. Reveal / parallax ---------- */
.has-js .reveal{ opacity:0; transform:translateY(24px);
  transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
.has-js .reveal.is-visible{ opacity:1; transform:none; }
.reveal-group>*{ transition-delay:calc(var(--i,0) * 70ms); }
.parallax{ position:relative; overflow:hidden; }
.parallax__img{ position:absolute; inset:-9% 0; width:100%; height:118%; object-fit:cover; will-change:transform; }

/* ---------- 9. Navbar ---------- */
.nav{ position:fixed; inset-block-start:0; inset-inline:0; z-index:100;
  background:transparent; border-block-end:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s; }
.nav.is-scrolled{ background:var(--nav-bg); backdrop-filter:blur(14px); border-block-end-color:var(--border-subtle); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-md);
  block-size:72px; }
.nav__logo{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; }
.nav__logo img{ height:38px; width:auto; }
.nav__logo .en{ color:#fff; font-size:1.05rem; line-height:1; transition:color .4s; }
.nav.is-scrolled .nav__logo .en{ color:var(--text-strong); }
.nav__logo .ar{ color:var(--gold); font-size:.85rem; }
.nav__links{ display:flex; align-items:center; gap:var(--space-lg); }
.nav__link{ font-size:.9rem; font-weight:500; color:rgba(255,255,255,.82); position:relative; padding-block:4px; transition:color .3s; }
.nav.is-scrolled .nav__link{ color:var(--text-body); }
.nav__link::after{ content:""; position:absolute; inset-block-end:-2px; inset-inline-start:0; inline-size:0; block-size:2px;
  background:var(--gold); transition:inline-size .3s var(--ease); }
.nav__link:hover,.nav__link.is-active{ color:#fff; }
.nav.is-scrolled .nav__link:hover,.nav.is-scrolled .nav__link.is-active{ color:var(--text-strong); }
.nav__link:hover::after,.nav__link.is-active::after{ inline-size:100%; }
.nav__controls{ display:flex; align-items:center; gap:var(--space-2xs); }
.icon-btn{ inline-size:40px; block-size:40px; border-radius:var(--radius-md);
  display:grid; place-items:center; background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.3); transition:color .3s, border-color .3s, transform .3s; }
.nav.is-scrolled .icon-btn{ color:var(--text-body); border-color:var(--border-subtle); }
.icon-btn:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-1px); }
.icon-btn .moon{ display:none; }
[data-theme="dark"] .icon-btn .sun{ display:none; }
[data-theme="dark"] .icon-btn .moon{ display:block; }
.lang-btn{ inline-size:auto; padding-inline:14px; font-weight:600; font-size:.85rem; }
.hamburger{ display:none; }

@media (max-width:860px){
  .nav__links{ position:fixed; inset-block-start:72px; inset-inline:0; flex-direction:column; gap:0;
    background:var(--bg-surface); border-block-end:1px solid var(--border-subtle);
    padding:var(--space-sm) var(--gutter) var(--space-lg);
    transform:translateY(-120%); opacity:0; pointer-events:none; transition:transform .4s var(--ease), opacity .3s; }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__link{ inline-size:100%; padding-block:14px; border-block-end:1px solid var(--border-subtle); }
  .hamburger{ display:grid; place-items:center; inline-size:40px; block-size:40px; gap:5px;
    background:transparent; border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
  .hamburger span{ inline-size:18px; block-size:2px; background:var(--text-strong); transition:.3s; }
  .hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hamburger.is-open span:nth-child(2){ opacity:0; }
  .hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ---------- 10. HERO ---------- */
.s-hero{ position:relative; }
.hero-slide{ position:relative; overflow:hidden; display:flex; align-items:center; min-block-size:100vh; min-block-size:100svh; }
.hero-slide__media{ position:absolute; inset:0; z-index:0;
  background:radial-gradient(130% 120% at 74% 12%, #0b3d73 0%, #06274c 42%, #04101f 100%); }
.hero-slide__media video,.hero-slide__media img{ inline-size:100%; block-size:100%; object-fit:cover;
  transition:opacity .5s var(--ease); }
.hero-slide__media video.is-looping{ opacity:0; }
.hero-slide__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(0,0,0,.52) 0%, rgba(0,0,0,.14) 26%, transparent 52%); }
.hero-slide__content{ position:relative; z-index:2; inline-size:100%; padding-block:clamp(64px,10vh,120px); }
.hero-grid{ display:flex; justify-content:space-between; align-items:center; gap:clamp(44px,7vw,120px); }
.hero-col{ position:relative; z-index:0; }
.hero-col::before{ content:""; position:absolute; z-index:-1; inset:-28px -50px; pointer-events:none;
  background:radial-gradient(120% 135% at 26% 60%, rgba(3,12,22,.62) 0%, rgba(3,12,22,.26) 46%, transparent 74%); }
.hero-col--right::before{ background:radial-gradient(120% 135% at 74% 60%, rgba(3,12,22,.62) 0%, rgba(3,12,22,.26) 46%, transparent 74%); }
.hero-col--left{ max-width:min(48%,540px); }
.hero-col--right{ max-width:min(38%,400px); }
@media (max-width:1024px){ .hero-grid{ flex-direction:column; align-items:flex-start; gap:var(--space-xl); }
  .hero-col::before{ inset:-14px -22px; }
  .hero-col--left,.hero-col--right{ max-width:100%; } }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display);
  font-weight:600; letter-spacing:.02em; color:#fff; margin-block-end:var(--space-md); }
.hero-eyebrow .ar{ color:var(--gold); font-size:1.05em; }
.hero-slide__title{ font-size:clamp(1.45rem,1.05rem + 1.9vw,2.35rem); font-weight:600; line-height:1.12;
  letter-spacing:-.02em; color:#fff; text-wrap:balance; }
.hero-slide__sub{ margin-block-start:var(--space-md); font-size:clamp(1rem,.95rem + .35vw,1.18rem);
  color:rgba(255,255,255,.82); line-height:1.7; max-width:56ch; font-weight:300; }
.hero-ddc{ display:inline-flex; align-items:center; gap:12px; margin-block-start:var(--space-lg);
  font-weight:600; letter-spacing:.02em; color:rgba(255,255,255,.5); font-size:.95rem; flex-wrap:wrap; }
.hero-ddc span{ transition:color .5s; }
.hero-ddc .sep{ opacity:.5; }
.hero-ddc .on{ color:#fff; }
.hero-slide[data-ddc="discover"] .hero-ddc .w-d{ color:#9CC2F2; }
.hero-slide[data-ddc="develop"] .hero-ddc .w-v{ color:#7FD6A2; }
.hero-slide[data-ddc="contribute"] .hero-ddc .w-c{ color:var(--gold); }
.hero-ctas{ display:flex; align-items:center; gap:var(--space-md); margin-block-start:var(--space-xl); flex-wrap:wrap; }
/* hero primary CTA stays gold on every slide so it always pops on the scrim */
.s-hero .btn-primary{ background:var(--gold); color:#3a2408; border-color:var(--gold); }
.s-hero .btn-primary:hover{ box-shadow:0 10px 28px rgba(235,162,90,.42); }

/* per-slide fade-slide-up */
.hero-line{ opacity:0; transform:translateY(18px);
  animation:hero-in .8s var(--ease) forwards; animation-delay:calc(var(--i,0) * 110ms + .3s); }
@keyframes hero-in{ to{ opacity:1; transform:none; } }

/* hero controls */
.hero-swiper .swiper-pagination{ inset-block-start:auto; inset-block-end:40px; inset-inline:auto; z-index:6;
  display:flex; gap:8px; justify-content:flex-start; padding-inline:var(--gutter); }
.hero-swiper .swiper-pagination-bullet{ inline-size:34px; block-size:3px; border-radius:2px;
  background:rgba(255,255,255,.35); opacity:1; transition:background .3s; }
.hero-swiper .swiper-pagination-bullet-active{ background:var(--gold); }
.hero-nav{ position:absolute; inset-block-start:50%; z-index:5; transform:translateY(-50%);
  inline-size:48px; block-size:48px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.28); color:#fff;
  backdrop-filter:blur(6px); transition:background .3s, transform .3s; opacity:0; }
.s-hero:hover .hero-nav{ opacity:1; }
.hero-nav:hover{ background:rgba(255,255,255,.22); }
.hero-nav.prev{ inset-inline-start:clamp(12px,3vw,32px); }
.hero-nav.next{ inset-inline-end:clamp(12px,3vw,32px); }
[dir="rtl"] .hero-nav svg{ transform:scaleX(-1); }
.hero-scroll-cue{ position:absolute; inset-block-end:22px; inset-inline-start:50%; transform:translateX(-50%);
  z-index:5; color:rgba(255,255,255,.8); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; flex-direction:column; align-items:center; gap:6px; }
[data-lang="ar"] .hero-scroll-cue{ text-transform:none; letter-spacing:0; }
.hero-scroll-cue svg{ animation:bob 1.8s var(--ease-inout) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* ---------- 11. STORY ---------- */
.s-story__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:stretch; }
@media (max-width:900px){ .s-story__grid{ grid-template-columns:1fr; } }
.s-story__prose p{ color:var(--text-body); margin-block-end:var(--space-md); font-size:1.05rem; }
.s-story__prose p.lead{ font-size:1.15rem; color:var(--text-strong); }
.s-story__belief{ margin-block-start:var(--space-lg); padding:var(--space-lg); background:var(--bg-surface-2);
  border-radius:var(--radius-lg); border-inline-start:4px solid var(--navy); }
.s-story__belief .lbl{ font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--navy-ink); }
[data-lang="ar"] .s-story__belief .lbl{ text-transform:none; letter-spacing:0; }
.s-story__media{ position:relative; }
.s-story__sticky{ position:sticky; inset-block-start:96px; block-size:clamp(380px,58vh,540px);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.story-img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; opacity:0; transition:opacity .7s ease; }
.story-img.is-active{ opacity:1; }
@media (max-width:900px){ .s-story__sticky{ position:static; block-size:clamp(300px,60vw,420px); } }
.s-story__media-cap{ position:absolute; inset-block-end:0; inset-inline:0; z-index:2; padding:var(--space-md);
  background:var(--veil-neutral); color:#fff; font-size:.85rem; }
.name-band{ margin-block:clamp(48px,7vw,96px) 0; position:relative; overflow:hidden; color:#fff;
  min-block-size:clamp(340px,48vh,540px); display:flex; align-items:center;
  padding-block:clamp(48px,7vw,96px); background:#04101c; }
.name-band__video{ opacity:1 !important; }
.name-band__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(3,14,26,.82) 0%, rgba(3,14,26,.44) 42%, rgba(3,14,26,.06) 72%, transparent 100%); }
[dir="rtl"] .name-band__scrim{ background:linear-gradient(270deg, rgba(3,14,26,.82) 0%, rgba(3,14,26,.44) 42%, rgba(3,14,26,.06) 72%, transparent 100%); }
.name-band .u-container{ position:relative; z-index:2; }
.name-band__quote{ font-family:var(--font-display); font-weight:500; max-width:640px;
  font-size:clamp(1.4rem,1.1rem + 1.7vw,2.15rem); line-height:1.42; color:#fff; text-wrap:balance; }
.name-band__quote b{ color:var(--gold); font-weight:600; }
.name-band .u-container--wide{ max-width:none; }
.complement{ margin-block-start:clamp(40px,6vw,72px); }
.complement__intro{ font-family:var(--font-display); font-size:clamp(1.2rem,1rem + 1vw,1.6rem);
  color:var(--text-strong); margin-block-end:var(--space-lg); text-wrap:balance; }
/* Complement comparison (redesigned) */
.complement-compare{ display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch;
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md); overflow:hidden; }
.cc-panel{ padding:clamp(26px,3.4vw,44px); }
.cc-panel--accent{ background:linear-gradient(160deg, var(--accent-soft) 0%, transparent 70%); }
.cc-icon{ inline-size:48px; block-size:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); margin-block-end:16px; }
.cc-panel--base{ --accent:var(--navy-ink); --accent-soft:rgba(4,35,70,.07); }
[data-theme="dark"] .cc-panel--base{ --accent-soft:rgba(136,174,221,.12); }
.cc-label{ font-family:var(--font-display); font-weight:600; font-size:1.18rem; color:var(--text-strong); display:block; margin-block-end:10px; }
.cc-panel p{ color:var(--text-body); }
.cc-plus{ display:grid; place-items:center; inline-size:60px; position:relative; }
.cc-plus::before{ content:""; position:absolute; inset-block:14%; inline-size:1px; background:var(--border-subtle); }
.cc-plus svg{ position:relative; z-index:1; inline-size:34px; block-size:34px; padding:7px; border-radius:50%;
  background:var(--bg-surface); border:1px solid var(--border-subtle); color:var(--gold); }
@media (max-width:720px){ .complement-compare{ grid-template-columns:1fr; }
  .cc-plus{ inline-size:auto; block-size:52px; }
  .cc-plus::before{ inset:auto; inline-size:60%; block-size:1px; } }

/* ---------- 12. MISSION / VISION (3D flip) ---------- */
.s-mv__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-lg); }
@media (max-width:820px){ .s-mv__grid{ grid-template-columns:1fr; } }
.flip{ perspective:1600px; min-block-size:clamp(300px,30vw,340px); }
.flip__inner{ position:relative; inline-size:100%; block-size:100%; min-block-size:inherit;
  transition:transform .85s cubic-bezier(.2,.8,.2,1); transform-style:preserve-3d; }
.flip:hover .flip__inner,.flip:focus-within .flip__inner{ transform:rotateY(180deg); }
.flip__face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,4vw,44px);
  border-radius:var(--radius-lg); border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm); overflow:hidden; }
.flip__front{ background:var(--bg-surface); border-block-start:4px solid var(--accent-line); }
.flip__back{ transform:rotateY(180deg); border-color:transparent; color:#fff;
  background:linear-gradient(155deg, var(--accent-fill) 0%, color-mix(in srgb, var(--accent-fill) 55%, #000) 100%); }
.flip .lbl{ font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  display:block; margin-block-end:14px; }
[data-lang="ar"] .flip .lbl{ text-transform:none; letter-spacing:0; }
.flip__front p{ font-size:1.1rem; color:var(--text-strong); line-height:1.6; }
.flip__back .lbl{ color:rgba(255,255,255,.72); }
.flip__back p{ font-family:var(--font-display); font-size:clamp(1.15rem,1rem + .6vw,1.5rem); line-height:1.45; color:#fff; }
.flip__hint{ margin-block-start:18px; font-size:.78rem; font-weight:600; color:var(--text-muted); display:inline-flex; align-items:center; gap:7px; }
.flip__hint::after{ content:"\21bb"; font-size:1rem; }
@media (max-width:600px){ .flip{ min-block-size:auto; perspective:none; }
  .flip__inner{ transform:none!important; } .flip__face{ position:static; } .flip__back{ display:none; } }

/* ---------- 13. BELIEFS ---------- */
.s-beliefs__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-md); }
@media (max-width:1024px){ .s-beliefs__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .s-beliefs__grid{ grid-template-columns:1fr; } }
.belief{ background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:var(--space-lg); position:relative; overflow:hidden; --bcolor:var(--navy);
  transition:transform .85s var(--ease), box-shadow .85s var(--ease), border-color .85s; }
.belief::before{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg, var(--bcolor) 0%, color-mix(in srgb, var(--bcolor) 56%, #000) 100%);
  clip-path:circle(0% at 8% 0%); transition:clip-path 1.05s var(--ease); }
.belief:hover{ transform:translateY(-8px) rotate(-1.4deg); box-shadow:var(--shadow-lg); border-color:transparent; }
.belief:hover::before{ clip-path:circle(155% at 8% 0%); }
.belief > *{ position:relative; z-index:1; }
.belief h3,.belief p,.belief__num{ transition:color .7s var(--ease); }
.belief:hover .belief__num,.belief:hover h3{ color:#fff; }
.belief:hover p{ color:rgba(255,255,255,.9); }
.belief__num{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--bcolor); }
.belief h3{ font-size:1.15rem; margin-block:var(--space-sm) var(--space-2xs); }
.belief p{ color:var(--text-body); font-size:.97rem; }
.belief::after{ content:""; position:absolute; inset-block-start:calc(-1 * var(--space-sm)); inset-inline-end:calc(-1 * var(--space-sm));
  inline-size:80px; block-size:80px; border-radius:50%; border:1.5px solid var(--bcolor); opacity:.16; }

/* ---------- 14. ESSENCE ---------- */
.s-essence{ text-align:center; position:relative; overflow:hidden; }
.s-essence .ripple-field{ position:absolute; inset:0; z-index:0; opacity:.5;
  background:repeating-radial-gradient(circle at 50% 50%, rgba(235,162,90,.35) 0 1px, transparent 1px 52px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000, transparent 62%);
  mask-image:radial-gradient(circle at 50% 50%, #000, transparent 62%); }
.s-essence__line{ position:relative; z-index:1; font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.8rem,1.3rem + 2.4vw,3rem); letter-spacing:-.02em; color:var(--text-strong); }
.s-essence__qual{ position:relative; z-index:1; max-width:640px; margin:var(--space-md) auto 0; color:var(--text-body); }

/* ---------- DDC Journey ---------- */
.ddc-intro{ position:relative; overflow:hidden; background:var(--bg-surface-2); animation:ddc-bg 26s ease-in-out infinite; }
.ddc-intro::before{ content:""; position:absolute; z-index:0; inset-block-start:-14%; inset-inline-start:50%; translate:-50% 0;
  inline-size:min(760px,92vw); aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(17,82,36,.10), rgba(4,35,70,.06) 46%, transparent 70%);
  animation:ddc-pulse 18s ease-in-out infinite; }
.ddc-intro > *{ position:relative; z-index:1; }
@keyframes ddc-pulse{ 0%,100%{ transform:scale(.82); opacity:.65; } 50%{ transform:scale(1.15); opacity:1; } }
@keyframes ddc-bg{ 0%,100%{ background-color:var(--bg-surface-2); } 50%{ background-color:color-mix(in srgb, var(--bg-surface-2) 84%, var(--gold) 16%); } }
.ddc-logic{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,4vw,52px); margin-block-start:var(--space-2xl); position:relative; }
.ddc-logic::before{ content:""; position:absolute; inset-block-start:34px; inset-inline:17%; block-size:2px; z-index:0;
  background:linear-gradient(90deg, var(--navy), var(--green), var(--gold)); opacity:.4; }
@media(max-width:820px){ .ddc-logic{ grid-template-columns:1fr; } .ddc-logic::before{ display:none; } }
.ddc-logic__card{ text-align:center; position:relative; z-index:1; }
.ddc-logic__badge{ inline-size:68px; block-size:68px; border-radius:50%; margin:0 auto 20px; display:grid; place-items:center;
  background:var(--bg-surface-2); color:var(--accent); border:2px solid var(--accent-line); font-family:var(--font-display); font-weight:700; font-size:1.3rem;
  position:relative; transition:background .45s var(--ease), color .45s, transform .45s var(--ease), box-shadow .45s; }
.ddc-logic__card:hover .ddc-logic__badge{ background:var(--accent-fill); color:#fff; transform:translateY(-5px) scale(1.06);
  box-shadow:0 12px 28px color-mix(in srgb, var(--accent-fill) 40%, transparent); }
[data-ddc="contribute"] .ddc-logic__card:hover .ddc-logic__badge{ color:#3a2408; }
.ddc-logic__badge::after{ content:""; position:absolute; inset:-9px; border-radius:50%; border:1.5px solid var(--accent-line); opacity:.25; }
.ddc-logic__q{ font-family:var(--font-display); font-weight:600; color:var(--accent); font-size:1.5rem; display:block; }
.ddc-logic__card h3{ font-size:1rem; color:var(--text-muted); font-weight:500; margin-block:2px 12px; }
.ddc-logic__card p{ color:var(--text-body); font-size:.96rem; max-width:32ch; margin-inline:auto; }
.ddc-reflect{ margin-block-start:var(--space-md); padding:var(--space-md) var(--space-lg); border-radius:var(--radius-lg);
  background:linear-gradient(90deg, rgba(4,35,70,.07), rgba(17,82,36,.07), rgba(235,162,90,.10));
  display:flex; align-items:center; gap:14px; color:var(--text-body); }
.ddc-reflect b{ color:var(--text-strong); }
.ddc-stage{ padding-block:clamp(56px,8vw,110px); }
.ddc-stage__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
@media(max-width:900px){ .ddc-stage__grid{ grid-template-columns:1fr; } }
.ddc-stage--rev .ddc-stage__text{ order:2; }
.ddc-stage--rev .ddc-stage__media{ order:1; }
@media(max-width:900px){ .ddc-stage--rev .ddc-stage__text,.ddc-stage--rev .ddc-stage__media{ order:0; } }
.ddc-stage__num{ display:block; font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.6rem);
  color:var(--accent); opacity:.24; line-height:1; }
.ddc-stage__text h2{ font-size:clamp(1.5rem,1.2rem + 1.3vw,2.05rem); margin-block:6px 14px; }
.ddc-caveat{ border-inline-start:3px solid var(--accent-line); padding-inline-start:16px; color:var(--text-body);
  margin-block:16px; }
.ddc-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px 22px; margin-block-start:var(--space-md); }
@media(max-width:520px){ .ddc-list{ grid-template-columns:1fr; } }
.ddc-list li{ display:flex; align-items:center; gap:10px; color:var(--text-strong); font-size:.97rem; font-weight:500; }
.ddc-stage__media{ display:grid; gap:14px; }
.ddc-shot{ position:relative; overflow:hidden; border-radius:var(--radius-lg); box-shadow:var(--shadow-md); }
.ddc-shot:first-child{ aspect-ratio:16/10; }
.ddc-shot:last-child{ aspect-ratio:16/7; }
.ddc-shot img{ position:absolute; inset:-12% 0; inline-size:100%; block-size:124%; object-fit:cover; will-change:transform; }
.ddc-closing{ padding-block:clamp(56px,8vw,110px); text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(160deg, #2a1a08 0%, #06121f 72%); color:#fff; }
.ddc-closing::before{ content:""; position:absolute; inset:-30%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 30% 30%, rgba(235,162,90,.20), transparent 42%),
            radial-gradient(circle at 74% 72%, rgba(235,162,90,.13), transparent 44%);
  animation:closing-drift 20s ease-in-out infinite; }
.ddc-closing .u-container{ position:relative; z-index:1; }
@keyframes closing-drift{ 0%,100%{ transform:translate(0,0) rotate(0deg) scale(1); } 50%{ transform:translate(4%,-4%) rotate(8deg) scale(1.08); } }
.ddc-closing__q{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,1.1rem + 1.6vw,2.1rem);
  max-width:760px; margin:0 auto var(--space-xl); line-height:1.42; color:#fff; }
.ddc-closing .btn-primary{ background:var(--gold); color:#3a2408; border-color:var(--gold); }

/* ---------- 15. Placeholder sections (to be built next) ---------- */
.s-todo{ text-align:center; border-block:1px dashed var(--border-strong); }
.s-todo .tag{ display:inline-block; font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); padding:6px 14px; border-radius:var(--radius-pill); }
.s-todo h2{ margin-block:var(--space-md) var(--space-2xs); }
.s-todo p{ color:var(--text-muted); }

/* ---------- 16. Footer ---------- */
.footer{ background:var(--bg-inverse); color:var(--text-on-brand); padding-block:var(--space-3xl) var(--space-xl); }
.footer__top{ display:flex; justify-content:space-between; gap:var(--space-2xl); flex-wrap:wrap; }
.footer__brand{ max-width:360px; }
.footer__brand img{ height:46px; margin-block-end:var(--space-md); }
.footer__brand h3{ color:var(--text-on-brand); font-size:1.2rem; }
.footer__brand p{ color:rgba(246,242,234,.66); margin-block-start:var(--space-2xs); }
.footer__cols{ display:flex; gap:var(--space-2xl); flex-wrap:wrap; }
.footer__col h4{ color:var(--gold); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; margin-block-end:var(--space-sm); }
[data-lang="ar"] .footer__col h4{ text-transform:none; letter-spacing:0; }
.footer__col a{ display:block; color:rgba(246,242,234,.72); padding-block:5px; font-size:.92rem; transition:color .3s; }
.footer__col a:hover{ color:#fff; }
.footer__bottom{ margin-block-start:var(--space-2xl); padding-block-start:var(--space-lg);
  border-block-start:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:var(--space-md);
  flex-wrap:wrap; color:rgba(246,242,234,.5); font-size:.85rem; }

/* ---------- 17. Go-top ---------- */
.go-top{ position:fixed; inset-block-end:24px; inset-inline-end:24px; z-index:90;
  inline-size:46px; block-size:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--gold); color:#3a2408; border:none; box-shadow:var(--shadow-md);
  opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .3s, transform .3s; }
.go-top.is-visible{ opacity:1; pointer-events:auto; transform:none; }

/* ---------- name-band video + Belong gallery ---------- */
.name-band__video{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; z-index:0; opacity:.20; }
.belong-gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; grid-auto-flow:dense; gap:14px; }
.bg-item{ position:relative; overflow:hidden; border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
.bg-item img{ inline-size:100%; block-size:100%; object-fit:cover; transition:transform .5s var(--ease); }
.bg-item:hover img{ transform:scale(1.05); }
.bg-item{ cursor:pointer; transition:opacity .55s var(--ease), transform .55s var(--ease); }
.belong-gallery.scattered .bg-item{ box-shadow:none; }
.bg-item.bg-tall{ grid-row:span 2; }
.bg-item.bg-wide{ grid-column:span 2; }
/* Lightbox */
.lightbox{ position:fixed; inset:0; z-index:2000; background:rgba(4,10,18,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .4s ease; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lb-img{ position:fixed; object-fit:contain; border-radius:12px; z-index:1; }
.lb-nav,.lb-close{ position:fixed; z-index:3; inline-size:52px; block-size:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26); color:#fff; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .3s, transform .3s; }
.lb-nav:hover,.lb-close:hover{ background:rgba(255,255,255,.26); transform:scale(1.06); }
.lb-nav:hover{ transform:translateY(-50%) scale(1.06); }
.lb-close{ inset-block-start:24px; inset-inline-end:28px; }
.lb-prev{ inset-inline-start:24px; inset-block-start:50%; transform:translateY(-50%); }
.lb-next{ inset-inline-end:24px; inset-block-start:50%; transform:translateY(-50%); }
[dir="rtl"] .lb-nav svg{ transform:scaleX(-1); }
.lb-count{ position:fixed; inset-block-end:26px; inset-inline-start:50%; transform:translateX(-50%); color:rgba(255,255,255,.82);
  font-size:.9rem; font-weight:600; z-index:3; letter-spacing:.05em; }
@media (max-width:900px){ .belong-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .belong-gallery{ grid-auto-rows:150px; } .bg-item.bg-wide{ grid-column:span 2; } }

/* ---------- Beit Al-Ilm TV ---------- */
.s-tv{ background:var(--bg-surface-2); }
.tv{ max-width:840px; margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:26px; }
.tv__set{ inline-size:100%; background:linear-gradient(160deg,#3a2c20 0%,#241a12 100%);
  border-radius:30px; padding:22px 22px 16px; position:relative;
  box-shadow:var(--shadow-lg), inset 0 2px 0 rgba(255,255,255,.06), inset 0 -6px 18px rgba(0,0,0,.4); }
.tv__screen{ position:relative; aspect-ratio:4/3; border-radius:20px/16px; overflow:hidden; background:#05070a;
  box-shadow:inset 0 0 60px rgba(0,0,0,.9), inset 0 0 0 4px #0b0e13; }
.tv__video{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:contain; background:#000; opacity:0; transition:opacity .35s ease; }
.tv.is-on .tv__video{ opacity:1; }
.tv__static{ position:absolute; inset:0; pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px; animation:tv-static .28s steps(3) infinite; transition:opacity .2s; }
@keyframes tv-static{ 0%{background-position:0 0} 33%{background-position:-46px 24px} 66%{background-position:34px -30px} 100%{background-position:12px 34px} }
.tv.is-changing .tv__static{ opacity:1; mix-blend-mode:normal; background-color:#161616; z-index:5; }
.tv.is-changing .tv__video{ opacity:0; transition:opacity .05s; }
.tv:not(.is-on) .tv__static{ opacity:.16; }
.tv__scanlines{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); }
.tv__osd{ position:absolute; inset-block-start:14px; inset-inline-end:16px; font:600 .85rem/1 ui-monospace,monospace;
  color:#8dff8d; text-shadow:0 0 8px rgba(80,255,80,.7); opacity:0; transition:opacity .3s; }
.tv.is-on .tv__osd{ opacity:.9; }
.tv__off{ position:absolute; inset:0; display:grid; place-items:center; color:#465063;
  font:600 .8rem/1 ui-monospace,monospace; letter-spacing:.18em; text-transform:uppercase; }
[data-lang="ar"] .tv__off{ letter-spacing:0; text-transform:none; }
.tv.is-on .tv__off{ display:none; }
.tv__brand{ text-align:center; color:rgba(255,240,225,.5); font-size:.78rem; letter-spacing:.06em; margin-block-start:12px; }
.tv__controls{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:center; }
.tv__power{ display:inline-flex; align-items:center; gap:10px; padding:11px 22px; border-radius:var(--radius-pill);
  background:var(--bg-surface); border:1px solid var(--border-subtle); color:var(--text-strong); font-weight:600; font-size:.9rem;
  box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s; }
.tv__power:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); }
.tv__led{ inline-size:10px; block-size:10px; border-radius:50%; background:#c0392b; transition:background .3s, box-shadow .3s; }
.tv.is-on .tv__led{ background:#2ecc71; box-shadow:0 0 10px rgba(46,204,113,.8); }
.tv__chan{ display:inline-flex; align-items:center; gap:14px; }
.tv__btn{ inline-size:44px; block-size:44px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-surface); border:1px solid var(--border-subtle); color:var(--text-strong); box-shadow:var(--shadow-sm);
  transition:transform .2s, color .2s, border-color .2s; }
.tv__btn:hover{ transform:translateY(-1px); color:var(--gold); border-color:var(--gold); }
[dir="rtl"] .tv__btn svg{ transform:scaleX(-1); }
.tv__chlabel{ min-inline-size:120px; text-align:center; font-weight:600; color:var(--text-strong); font-size:.95rem; }
/* CRT realism + power effect */
.tv__screen{ border-radius:26px/18px; }
.tv__crt{ position:absolute; inset:0; transform-origin:center center; }
.tv__glare{ position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120% 72% at 26% 9%, rgba(255,255,255,.16), transparent 44%),
            radial-gradient(150% 130% at 50% 122%, rgba(0,0,0,.62), transparent 56%); }
.tv__scanlines{ background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); opacity:.6; }
.tv.turn-on .tv__crt{ animation:crt-on .55s cubic-bezier(.2,.7,.2,1) both; }
.tv.turn-off .tv__crt{ animation:crt-off .48s ease-in both; }
@keyframes crt-on{ 0%{ transform:scale(0,0); filter:brightness(5); opacity:0; } 22%{ transform:scale(.35,.01); opacity:1; }
  46%{ transform:scale(1,.01); filter:brightness(3.2); } 100%{ transform:scale(1,1); filter:brightness(1); } }
@keyframes crt-off{ 0%{ transform:scale(1,1); filter:brightness(1); } 42%{ transform:scale(1,.012); filter:brightness(3.4); }
  72%{ transform:scale(.32,.012); } 100%{ transform:scale(0,0); filter:brightness(7); opacity:0; } }

/* ---------- Complement (plain, no hover theming) ---------- */
.complement{ position:relative; } 50%{ transform:scale(1.09);} }

/* ---------- DDC closing button ---------- */
.ddc-closing .btn-primary{ gap:10px; }
.ddc-closing .btn-primary svg{ transition:transform .3s var(--ease); }
.ddc-closing .btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 14px 34px rgba(235,162,90,.5); }
.ddc-closing .btn-primary:hover svg{ transform:translateX(5px); }
[dir="rtl"] .ddc-closing .btn-primary svg{ transform:scaleX(-1); }
[dir="rtl"] .ddc-closing .btn-primary:hover svg{ transform:scaleX(-1) translateX(5px); }

/* TV controls integrated into the bezel */
.tv__panel{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-block-start:16px; flex-wrap:wrap; }
.tv__brand{ margin-block-start:0; text-align:start; }
.tv__set .tv__power,.tv__set .tv__btn{ background:linear-gradient(#241a12,#150e08); border:1px solid rgba(255,255,255,.08);
  color:rgba(255,240,225,.82); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 3px 6px rgba(0,0,0,.5); }
.tv__set .tv__power:hover,.tv__set .tv__btn:hover{ color:#fff; border-color:rgba(255,255,255,.2); transform:translateY(-1px); }
.tv__set .tv__chlabel{ color:rgba(255,240,225,.85); }

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero-line{ opacity:1 !important; transform:none !important; }
  .hero-slide__media video{ display:none; }
  .parallax__img{ transform:none !important; }
}


/* ================= initiatives.css ================= */
/* ---------- INCUBATED INITIATIVES (Contribute) ---------- */
.s-initiatives{ position:relative; overflow:hidden; }

/* honesty line under the header */
.s-initiatives__honesty{ max-width:60ch; margin:14px auto 0; font-size:.92rem; color:var(--text-muted); line-height:1.65; }

/* decorative concentric-ripple motif behind the header — CSS/SVG, not a photo */
.s-initiatives__ripple{ position:absolute; z-index:0; inset-block-start:clamp(-140px,-9vw,-60px); inset-inline-start:50%;
  translate:-50% 0; inline-size:min(760px,120vw); block-size:min(760px,120vw); pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%, var(--accent-line) 0 1.5px, transparent 1.5px 46px);
  opacity:.07; -webkit-mask-image:radial-gradient(circle at 50% 50%, #000, transparent 62%);
  mask-image:radial-gradient(circle at 50% 50%, #000, transparent 62%);
  animation:s-init-pulse 8s var(--ease-inout) infinite; }
@keyframes s-init-pulse{ 0%,100%{ opacity:.05; } 50%{ opacity:.10; } }
.s-initiatives .u-container{ position:relative; z-index:1; }

/* grid: 3 / 2 / 1 columns, equal-height cards */
.s-initiatives__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,28px);
  align-items:stretch; }
@media (max-width:1023px){ .s-initiatives__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:639px){ .s-initiatives__grid{ grid-template-columns:1fr; } }

/* card */
.s-initiatives__card{ position:relative; display:flex; flex-direction:column; block-size:100%;
  background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.s-initiatives__card:hover{ transform:translateY(-6px); border-color:transparent;
  box-shadow:var(--shadow-lg), 0 0 0 1.5px var(--accent-line); }
.s-initiatives__card:focus-within{ border-color:transparent;
  box-shadow:var(--shadow-md), 0 0 0 2px var(--accent-line); }

/* media (16:9) — photo or gradient placeholder */
.s-initiatives__media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-surface-2); }
.s-initiatives__media img{ inline-size:100%; block-size:100%; object-fit:cover;
  transition:transform .55s var(--ease); }
.s-initiatives__card:hover .s-initiatives__media img{ transform:scale(1.03); }
/* gentle gold gradient scrim at the bottom edge of the media */
.s-initiatives__scrim{ position:absolute; inset-block-end:0; inset-inline:0; block-size:46%; z-index:1; pointer-events:none;
  background:linear-gradient(to top, color-mix(in srgb, var(--accent-fill) 34%, transparent) 0%, transparent 100%); }

/* gradient placeholder (no photo yet) — DDC-tinted radial + concentric rings + topical icon */
.s-initiatives__ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; color:var(--accent);
  background:radial-gradient(120% 118% at 30% 18%,
    color-mix(in srgb, var(--accent-fill) 30%, var(--bg-surface)) 0%,
    color-mix(in srgb, var(--accent-fill) 13%, var(--bg-surface)) 46%,
    var(--bg-surface) 100%); }
.s-initiatives__ph::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-radial-gradient(circle at 74% 26%, var(--accent-line) 0 1px, transparent 1px 26px);
  -webkit-mask-image:radial-gradient(circle at 74% 26%, #000, transparent 68%);
  mask-image:radial-gradient(circle at 74% 26%, #000, transparent 68%); }
.s-initiatives__ph-ico{ position:relative; opacity:.9; }
.s-initiatives__ph-cap{ position:relative; font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); opacity:.82; }
[data-lang="ar"] .s-initiatives__ph-cap{ text-transform:none; letter-spacing:0; }

/* relationship pill — overlaid top-start, always visible (load-bearing trust element) */
.s-initiatives__rel{ position:absolute; z-index:2; inset-block-start:12px; inset-inline-start:12px;
  display:inline-flex; align-items:center; gap:7px; max-inline-size:calc(100% - 24px);
  padding-block:6px; padding-inline:10px 12px; border-radius:var(--radius-pill);
  font-size:.72rem; font-weight:600; letter-spacing:.04em; line-height:1.1; color:#3a2408;
  background:color-mix(in srgb, var(--gold) 88%, #fff); border:1px solid color-mix(in srgb, var(--gold-ink) 45%, transparent);
  box-shadow:0 2px 10px rgba(58,36,8,.22); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.s-initiatives__rel-dot{ inline-size:6px; block-size:6px; border-radius:50%; background:currentColor; flex:0 0 auto; opacity:.85; }

/* body */
.s-initiatives__body{ display:flex; flex-direction:column; flex:1;
  padding:clamp(18px,2.2vw,24px); gap:var(--space-sm); }

/* name — permanent bilingual lockup (EN + AR beneath), mirrors the logo/footer pattern */
.s-initiatives__name{ font-size:1.28rem; line-height:1.2; letter-spacing:-.01em; }
.s-initiatives__name-en{ display:block; }
.s-initiatives__name-ar{ display:block; margin-block-start:3px; font-family:var(--font-ar); font-weight:500;
  font-size:1rem; color:var(--accent); }

/* tag row — small uppercase pills */
.s-initiatives__tags{ list-style:none; display:flex; flex-wrap:wrap; gap:7px; }
.s-initiatives__tag{ display:inline-flex; align-items:center; padding:5px 11px; border-radius:var(--radius-pill);
  font-size:.68rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; line-height:1.1;
  color:var(--text-body); background:transparent; border:1px solid var(--border-strong); }
[data-lang="ar"] .s-initiatives__tag{ text-transform:none; letter-spacing:0; font-size:.78rem; }

/* one-line description */
.s-initiatives__desc{ color:var(--text-body); font-size:.95rem; line-height:1.6; }

/* skills cluster */
.s-initiatives__skills{ margin-block-start:auto; }
.s-initiatives__skills-lbl{ display:block; margin-block-end:9px; font-size:.7rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--accent); }
[data-lang="ar"] .s-initiatives__skills-lbl{ text-transform:none; letter-spacing:0; }
.s-initiatives__skill-list{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; }
.s-initiatives__skill{ display:inline-flex; align-items:center; padding:5px 11px; border-radius:var(--radius-pill);
  font-size:.76rem; font-weight:500; line-height:1.1; color:var(--accent);
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent-line) 22%, transparent); }
.s-initiatives__note{ color:var(--text-body); font-size:.9rem; line-height:1.55; }

/* honest relationship line */
.s-initiatives__rel-line{ display:flex; align-items:flex-start; gap:8px;
  padding-block-start:var(--space-sm); border-block-start:1px solid var(--border-subtle);
  font-size:.82rem; line-height:1.5; color:var(--text-muted); }
.s-initiatives__rel-ico{ flex:0 0 auto; margin-block-start:1px; color:var(--accent); }

/* footer — Instagram link, or muted coming-soon */
.s-initiatives__foot{ display:flex; }
.s-initiatives__ig{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--radius-pill);
  font-size:.85rem; font-weight:600; color:var(--accent); background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent-line) 30%, transparent);
  transition:transform .3s var(--ease), background .3s, color .3s, box-shadow .3s; }
.s-initiatives__ig bdi{ font-weight:600; }
.s-initiatives__ig-ext{ opacity:.7; margin-inline-start:-2px; }
.s-initiatives__ig:hover{ transform:translateY(-2px); color:#3a2408; background:var(--gold);
  box-shadow:0 8px 20px color-mix(in srgb, var(--gold) 38%, transparent); }
.s-initiatives__ig:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
[dir="rtl"] .s-initiatives__ig-ext{ transform:scaleX(-1); }

.s-initiatives__soon{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--radius-pill);
  font-size:.85rem; font-weight:600; color:var(--text-muted); background:var(--bg-surface-2);
  border:1px dashed var(--border-strong); cursor:default; }
.s-initiatives__soon .s-initiatives__ig-glyph{ opacity:.6; }

/* closing pull-quote — gold-tinted band with a start-rule (mirrors in RTL) */
.s-initiatives__pull{ position:relative; margin-block-start:clamp(48px,6vw,80px);
  padding:clamp(30px,4.4vw,56px) clamp(26px,4vw,60px);
  background:linear-gradient(150deg, var(--accent-soft) 0%, color-mix(in srgb, var(--accent-soft) 30%, transparent) 72%);
  border:1px solid var(--border-subtle); border-inline-start:4px solid var(--accent-line);
  border-radius:var(--radius-xl); overflow:hidden; text-align:center; }
.s-initiatives__pull-mark{ position:absolute; z-index:0; inset-block-start:-.28em; inset-inline-start:.14em;
  font-family:var(--font-display); font-weight:700; font-size:8rem; line-height:1; color:var(--accent-line);
  opacity:.16; pointer-events:none; }
.s-initiatives__quote{ position:relative; z-index:1; max-width:820px; margin-inline:auto;
  font-family:var(--font-display); font-weight:500; letter-spacing:-.01em;
  font-size:clamp(1.35rem,1.05rem + 1.5vw,2.05rem); line-height:1.42; color:var(--text-strong); text-wrap:balance; }
.s-initiatives__pull-ctas{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--space-sm); margin-block-start:clamp(24px,3vw,36px); }

/* ---- motion / reduced-motion ---- */
@media (prefers-reduced-motion:reduce){
  .s-initiatives__ripple{ animation:none; }
  .s-initiatives__card:hover{ transform:none; }
  .s-initiatives__card:hover .s-initiatives__media img{ transform:none; }
  .s-initiatives__ig:hover{ transform:none; }
}


/* ================= founders.css ================= */
/* ---------- FOUNDERS ---------- */
.s-founders__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3.4vw,36px); align-items:stretch; }
@media (max-width:760px){ .s-founders__grid{ grid-template-columns:1fr; } }

/* founder card (extends shared .card) */
.s-founders__card{ position:relative; overflow:visible; text-align:center;
  display:flex; flex-direction:column; align-items:center;
  padding-block-start:clamp(38px,5vw,54px); padding-inline:clamp(22px,3vw,38px); }
/* accent top rail — survives .card:hover border fade */
.s-founders__card::before{ content:""; position:absolute; z-index:2; inset-block-start:-1px; inset-inline:-1px; block-size:4px;
  background:var(--accent-line); border-start-start-radius:var(--radius-lg); border-start-end-radius:var(--radius-lg); }
/* soft accent glow behind the portrait */
.s-founders__card::after{ content:""; position:absolute; z-index:0; inset-block-start:0; inset-inline:0; block-size:220px;
  pointer-events:none; background:radial-gradient(120% 82% at 50% 0%, var(--accent-soft), transparent 72%);
  border-start-start-radius:var(--radius-lg); border-start-end-radius:var(--radius-lg); }
.s-founders__card > *{ position:relative; z-index:1; }

/* portrait placeholder — DDC-tinted disc with concentric ripple rings + initials */
.s-founders__portrait{ position:relative; inline-size:128px; block-size:128px; margin-block-end:var(--space-md);
  border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(155deg, var(--accent-fill) 0%, color-mix(in srgb, var(--accent-fill) 56%, #000) 100%);
  box-shadow:0 12px 30px color-mix(in srgb, var(--accent-fill) 34%, transparent); }
.s-founders__portrait::before,.s-founders__portrait::after{ content:""; position:absolute; inset:50%; translate:-50% -50%;
  border-radius:50%; border:1.5px solid var(--accent-line); pointer-events:none; }
.s-founders__portrait::before{ inline-size:146%; block-size:146%; opacity:.30; }
.s-founders__portrait::after{ inline-size:174%; block-size:174%; opacity:.13; }
.s-founders__initials{ font-family:var(--font-display); font-weight:700; font-size:2.35rem; letter-spacing:.02em; color:#fff; }
/* gold reads better with dark ink (mirrors the .btn-primary rule on contribute) */
[data-ddc="contribute"] .s-founders__initials{ color:#3a2408; }

.s-founders__name{ font-size:1.3rem; letter-spacing:-.01em; }
.s-founders__role{ display:block; margin-block-start:6px; font-size:.78rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
[data-lang="ar"] .s-founders__role{ text-transform:none; letter-spacing:0; font-weight:700; }

/* placeholder quote — dashed frame signals draft copy, echoing the .s-todo convention */
.s-founders__quote{ position:relative; margin-block-start:var(--space-md); inline-size:100%;
  padding:clamp(20px,2.6vw,28px) clamp(20px,2.8vw,30px) clamp(18px,2.4vw,24px);
  background:var(--accent-soft); border:1px dashed var(--accent-line); border-radius:var(--radius-lg); }
.s-founders__quote::before{ content:"\201C"; position:absolute; inset-block-start:-.22em; inset-inline-start:.28em;
  font-family:var(--font-display); font-weight:700; font-size:3.4rem; line-height:1; color:var(--accent-line);
  opacity:.32; pointer-events:none; }
.s-founders__flag{ display:inline-block; margin-block-end:12px; font-size:.66rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  padding:4px 11px; border-radius:var(--radius-pill); background:var(--bg-surface); border:1px solid var(--border-subtle); }
[data-lang="ar"] .s-founders__flag{ text-transform:none; letter-spacing:0; }
.s-founders__quote p{ position:relative; font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.02rem,.98rem + .35vw,1.18rem); line-height:1.55; color:var(--text-strong); text-wrap:balance; }

.s-founders__pending{ display:block; margin-block-start:12px; font-size:.8rem; font-style:italic; color:var(--text-muted); }

/* ambiance band — full-bleed, DDC-veiled, caption anchored to the bottom-start */
.s-founders__band{ position:relative; overflow:hidden; margin-block-start:clamp(48px,7vw,84px);
  min-block-size:clamp(260px,38vh,420px); display:flex; align-items:flex-end;
  padding-block:clamp(36px,5vw,56px); background:#04101c; }
.s-founders__band-img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; z-index:0; }
.s-founders__band-scrim{ position:absolute; inset:0; z-index:1; background:var(--veil); }
.s-founders__band .u-container{ position:relative; z-index:2; }
.s-founders__band-cap{ font-family:var(--font-display); font-weight:500; color:#fff; max-width:640px;
  font-size:clamp(1.24rem,1.02rem + 1.1vw,1.75rem); line-height:1.4; text-wrap:balance;
  text-shadow:0 1px 18px rgba(3,12,22,.4); }


/* ================= future.css ================= */
/* =========================================================================
   OUR FUTURE — HWPL Peace Education (PROPOSED / exploring)
   Section-scoped styles. Neutral (gold) accent; individual tiles carry their
   own data-ddc. Calm + restrained by design — this is a plan, not a launch.
   ========================================================================= */

.s-future{ position:relative; }

/* ---- Status pill: always visible, static gold ring (never pulses) ---- */
.s-future__status{ display:flex; inline-size:max-content; max-inline-size:100%;
  margin-block-start:14px; margin-inline:auto; align-items:center; gap:8px;
  padding:7px 15px; border-radius:var(--radius-pill);
  font:700 .78rem/1 var(--font-body); letter-spacing:.06em;
  color:var(--gold-ink); background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--gold) 52%, transparent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent); }
.s-future__status svg{ inline-size:15px; block-size:15px; flex:0 0 auto; }
[data-lang="ar"] .s-future__status{ letter-spacing:0; }

/* ---- Status disclaimer band: bordered info callout, never collapsible ---- */
.s-future__disclaimer{ display:flex; gap:var(--space-md); align-items:flex-start;
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-inline-start:4px solid var(--gold); border-radius:var(--radius-lg);
  padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,30px); box-shadow:var(--shadow-sm); }
.s-future__disclaimer-icon{ flex:0 0 auto; inline-size:40px; block-size:40px;
  border-radius:var(--radius-md); display:grid; place-items:center;
  background:var(--accent-soft); color:var(--gold-ink); }
.s-future__disclaimer-icon svg{ inline-size:22px; block-size:22px; }
.s-future__disclaimer p{ color:var(--text-body); font-size:.98rem; line-height:1.7; }
.s-future__disclaimer b{ color:var(--text-strong); }
@media (max-width:560px){ .s-future__disclaimer{ flex-direction:column; gap:var(--space-sm); } }

/* ---- What is HWPL? — factual, attributed, un-branded ---- */
.s-future__hwpl{ margin-block-start:clamp(28px,4vw,44px);
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-inline-start:4px solid var(--border-strong); border-radius:var(--radius-lg);
  padding:clamp(24px,3.4vw,40px); box-shadow:var(--shadow-sm); }
.s-future__hwpl-head{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
  margin-block-end:var(--space-md); }
.s-future__hwpl-head h3{ font-size:1.3rem; }
.s-future__attribution{ display:inline-flex; align-items:center; gap:6px;
  padding:5px 13px; border-radius:var(--radius-pill);
  font-size:.76rem; font-weight:500; font-style:italic; letter-spacing:.01em;
  color:var(--text-muted); background:var(--bg-surface-2); border:1px solid var(--border-subtle); }
.s-future__hwpl-body p{ color:var(--text-body); font-size:1.02rem; line-height:1.75; }
.s-future__hwpl-body p + p{ margin-block-start:var(--space-md); }
.s-future__hwpl-foot{ margin-block-start:var(--space-md); padding-block-start:var(--space-md);
  border-block-start:1px solid var(--border-subtle);
  color:var(--text-muted); font-size:.85rem; line-height:1.6; }

/* ---- Block scaffolding (title + caveat chip) ---- */
.s-future__block{ margin-block-start:clamp(48px,7vw,88px); }
.s-future__block-head{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
  margin-block-end:clamp(24px,3.5vw,40px); }
.s-future__block-title{ font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem); letter-spacing:-.012em; }
.s-future__chip{ display:inline-flex; align-items:center; padding:6px 14px;
  border-radius:var(--radius-pill); font:600 .74rem/1 var(--font-body); letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--border-subtle); }
[data-lang="ar"] .s-future__chip{ text-transform:none; letter-spacing:0; font-weight:700; }

/* ---- Why it could fit — 3 DDC tiles ---- */
.s-future__tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,24px); }
@media (max-width:820px){ .s-future__tiles{ grid-template-columns:1fr; } }
.s-future__tile{ position:relative; background:var(--bg-surface);
  border:1px solid var(--border-subtle); border-block-start:3px solid var(--accent-line);
  border-radius:var(--radius-lg); padding:var(--space-lg); overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.s-future__tile::after{ content:""; position:absolute; z-index:0; inset-block-start:-40px; inset-inline-end:-40px;
  inline-size:120px; block-size:120px; border-radius:50%; background:var(--accent-soft);
  opacity:0; transition:opacity .4s var(--ease); }
.s-future__tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.s-future__tile:hover::after{ opacity:.7; }
.s-future__tile > *{ position:relative; z-index:1; }
.s-future__tile-icon{ inline-size:48px; block-size:48px; border-radius:var(--radius-md);
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent);
  margin-block-end:var(--space-md); }
.s-future__tile-icon svg{ inline-size:26px; block-size:26px; }
.s-future__tile-tag{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); }
[data-lang="ar"] .s-future__tile-tag{ text-transform:none; letter-spacing:0; }
.s-future__tile h4{ font-size:1.18rem; margin-block:8px 10px; }
.s-future__tile p{ color:var(--text-body); font-size:.98rem; line-height:1.7; }
.s-future__relevance{ margin-block-start:clamp(20px,2.6vw,28px); max-inline-size:70ch;
  margin-inline:auto; text-align:center; color:var(--text-muted); font-size:.9rem; line-height:1.65; }

/* ---- Responsible path — 4 phases, numbered vertical flow with blend ribbon ---- */
.s-future__phases{ list-style:none; max-inline-size:760px; }
.s-future__phase{ position:relative; display:grid; grid-template-columns:46px 1fr;
  column-gap:clamp(16px,2.4vw,26px); padding-block-end:clamp(24px,3.4vw,38px); }
.s-future__phase:last-child{ padding-block-end:0; }
/* calm neutral connector; graduated colour lives in the numbered nodes */
.s-future__phase:not(:last-child)::before{ content:""; position:absolute; z-index:0;
  inset-inline-start:23px; translate:-50% 0; inset-block-start:46px; inset-block-end:0;
  inline-size:2px; background:var(--border-strong); }
.s-future__phase-node{ position:relative; z-index:1; inline-size:46px; block-size:46px;
  border-radius:50%; display:grid; place-items:center; background:var(--bg-surface);
  border:2px solid var(--node-color,var(--navy-ink)); box-shadow:var(--shadow-sm); }
.s-future__phase-node span{ font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  color:var(--node-color,var(--navy-ink)); line-height:1; }
.s-future__phase-body{ padding-block-start:4px; }
.s-future__phase-body h4{ font-size:1.1rem; margin-block-end:6px; }
.s-future__phase-body p{ color:var(--text-body); font-size:.98rem; line-height:1.7; }

/* ---- Long-term ambition — closing line into Join ---- */
.s-future__close{ margin-block-start:clamp(48px,7vw,88px); text-align:center;
  max-inline-size:780px; margin-inline:auto; }
.s-future__close-label{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-block-end:12px; }
[data-lang="ar"] .s-future__close-label{ text-transform:none; letter-spacing:0; font-weight:700; }
.s-future__close-line{ font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.3rem,1.05rem + 1.2vw,1.85rem); line-height:1.45; color:var(--text-strong);
  text-wrap:balance; }
.s-future__bridge{ margin-block-start:clamp(24px,3.4vw,34px); }
.s-future__bridge svg{ transition:transform .3s var(--ease); }
.s-future__bridge:hover svg{ transform:translateX(4px); }
[dir="rtl"] .s-future__bridge svg{ transform:scaleX(-1); }
[dir="rtl"] .s-future__bridge:hover svg{ transform:scaleX(-1) translateX(4px); }

@media (prefers-reduced-motion:reduce){
  .s-future__bridge:hover svg{ transform:none; }
  [dir="rtl"] .s-future__bridge:hover svg{ transform:scaleX(-1); }
}


/* ================= join.css ================= */
/* =========================================================================
   JOIN / GET INVOLVED + CONTACT  ·  Agent A5  ·  section-scoped styles
   Reuses the shared design system (.section, .card, .btn, .eyebrow, .pill,
   .ripple-dot, .reveal, DDC colour engine). Adds only s-join__* / s-contact__*.
   Authored with logical properties so RTL mirrors for free.
   ========================================================================= */

/* Outer wrapper stacks two full-bleed bands, so drop the shared .section padding.
   (Higher specificity than .section — no reliance on stylesheet order.) */
.s-join.section{ padding-block:0; }

/* ---------- A · Get Involved (contribute / gold) ---------- */
.s-join__involve{ position:relative; overflow:hidden; }
/* warm gold ambiance — CSS only, no image asset */
.s-join__involve::before{ content:""; position:absolute; z-index:0; pointer-events:none;
  inline-size:min(560px,72vw); block-size:min(560px,72vw); border-radius:50%;
  inset-block-start:-170px; inset-inline-end:-130px;
  background:radial-gradient(circle, var(--accent-soft), transparent 70%); }
.s-join__involve > .u-container{ position:relative; z-index:1; }

.s-join__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-md);
  margin-block-start:var(--space-md); }
@media (max-width:1024px){ .s-join__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .s-join__grid{ grid-template-columns:1fr; } }

.s-join__card{ display:flex; flex-direction:column; overflow:hidden; }
/* gold top rail via ::before so .card:hover (which clears the border) can't remove it */
.s-join__card::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0;
  block-size:3px; background:var(--accent-line); z-index:2; }
.s-join__icon{ transition:transform .45s var(--ease); }
.s-join__card:hover .s-join__icon{ transform:rotate(-6deg) scale(1.08); }
.s-join__card-title{ font-size:1.15rem; margin-block-end:var(--space-2xs); }
.s-join__card-frame{ color:var(--text-body); font-size:.95rem; margin-block-end:var(--space-md); }

.s-join__ctas{ display:flex; flex-direction:column; align-items:stretch; gap:var(--space-2xs); margin-block-start:auto; }
.s-join__cta{ position:relative; overflow:hidden; isolation:isolate; inline-size:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-align:center;
  padding:10px 16px; border-radius:var(--radius-pill);
  border:1.5px solid var(--accent-line); color:var(--accent); background:transparent;
  font:600 .86rem/1.2 var(--font-body);
  transition:color .3s var(--ease), border-color .3s var(--ease); }
/* gold ripple fill radiating from centre (site ripple motif) */
.s-join__cta::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--accent-fill); transform:scale(0); transform-origin:center; opacity:0;
  transition:transform .5s var(--ease), opacity .35s var(--ease); }
.s-join__cta > span{ position:relative; z-index:1; }
.s-join__cta:hover, .s-join__cta:focus-visible{ color:#3a2408; border-color:var(--accent-fill); }
.s-join__cta:hover::before, .s-join__cta:focus-visible::before{ transform:scale(1); opacity:1; }
.s-join__cta:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }
[data-lang="ar"] .s-join__cta{ font-weight:700; }

/* closing reassurance band */
.s-join__assure{ display:flex; align-items:center; gap:14px; max-inline-size:760px;
  margin:var(--space-xl) auto 0; padding:var(--space-md) var(--space-lg);
  border-radius:var(--radius-lg); color:var(--text-body); font-size:.97rem;
  background:linear-gradient(90deg, var(--accent-soft), transparent 82%);
  border:1px solid var(--border-subtle); border-inline-start:3px solid var(--accent-line); }

/* ---------- B · Contact (develop / teal) ---------- */
.s-contact__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,5vw,64px);
  align-items:start; }
@media (max-width:860px){ .s-contact__grid{ grid-template-columns:1fr; } }

/* info column */
.s-contact__item{ display:flex; align-items:flex-start; gap:var(--space-sm);
  margin-block-end:var(--space-lg); }
.s-contact__item-ic{ flex:0 0 auto; inline-size:44px; block-size:44px; border-radius:var(--radius-md);
  display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.s-contact__item-body{ display:flex; flex-direction:column; gap:3px; }
.s-contact__item-label{ font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); }
[data-lang="ar"] .s-contact__item-label{ text-transform:none; letter-spacing:0; font-weight:700; }
.s-contact__item-val{ color:var(--text-strong); font-weight:500; font-size:1.02rem; }
.s-contact__mail{ transition:color .3s; }
.s-contact__mail:hover{ color:var(--accent); }

.s-contact__socials-wrap{ margin-block-end:var(--space-lg); }
.s-contact__socials{ display:flex; flex-wrap:wrap; gap:var(--space-sm); margin-block-start:var(--space-xs); }
.s-contact__social{ display:inline-flex; align-items:center; gap:10px;
  padding:9px 15px; border-radius:var(--radius-pill);
  background:var(--bg-surface); border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.s-contact__social-ic{ display:grid; place-items:center; color:var(--accent); }
.s-contact__social-txt{ display:flex; flex-direction:column; line-height:1.15; }
.s-contact__social-name{ font-size:.9rem; font-weight:600; color:var(--text-strong); }
.s-contact__social-handle{ font-size:.78rem; color:var(--text-muted); }
.s-contact__social:hover{ transform:translateY(-2px); border-color:var(--accent);
  box-shadow:var(--shadow-md); }
.s-contact__social:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px; }

.s-contact__note{ font-size:.9rem; color:var(--text-muted); line-height:1.6;
  padding-inline-start:14px; border-inline-start:3px solid var(--accent-line);
  max-inline-size:44ch; }

/* form card */
.s-contact__form{ background:var(--bg-surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl); padding:clamp(24px,4vw,40px); box-shadow:var(--shadow-md); }
.s-contact__field{ margin-block-end:var(--space-md); }
.s-contact__label{ display:block; font-size:.85rem; font-weight:600; color:var(--text-strong);
  margin-block-end:8px; transition:color .3s var(--ease); }
.s-contact__field:focus-within .s-contact__label{ color:var(--accent); }
.s-contact__input{ inline-size:100%; padding:13px 16px; border-radius:var(--radius-md);
  border:1.5px solid var(--border-strong); background:var(--bg-canvas); color:var(--text-strong);
  font:inherit; font-size:.97rem; line-height:1.5;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.s-contact__input::placeholder{ color:var(--text-muted); opacity:1; }
.s-contact__input:focus{ outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); }
.s-contact__input:required:invalid:not(:placeholder-shown){ border-color:#c0392b; }
.s-contact__textarea{ min-block-size:132px; resize:vertical; line-height:1.65; }

.s-contact__submit{ inline-size:100%; margin-block-start:var(--space-2xs); }
.s-contact__submit svg{ transition:transform .3s var(--ease); }
.s-contact__submit:hover svg{ transform:translateX(4px); }
[dir="rtl"] .s-contact__submit svg{ transform:scaleX(-1); }
[dir="rtl"] .s-contact__submit:hover svg{ transform:scaleX(-1) translateX(4px); }

.s-contact__status{ margin-block-start:var(--space-sm); font-size:.9rem; font-weight:500;
  min-block-size:1.3em; color:var(--text-body); }
.s-contact__status[data-state="ok"]{ color:var(--green-ink); }
.s-contact__status[data-state="err"]{ color:#c0392b; }

/* ---------- Reduced motion: keep the fill/focus, drop the movement ---------- */
@media (prefers-reduced-motion:reduce){
  .s-join__card:hover .s-join__icon{ transform:none; }
  .s-join__cta::before{ transition:none; }
  .s-contact__social:hover{ transform:none; }
  .s-contact__submit:hover svg{ transform:none; }
  [dir="rtl"] .s-contact__submit:hover svg{ transform:scaleX(-1); }
}

/* ===== round-2 tweaks: hovers, sticky contact, button ===== */
.ddc-closing .btn-primary{ transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s; }
.s-founders__card{ transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.s-founders__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.s-future__tile{ transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.s-future__tile:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.s-contact .s-contact__grid{ align-items:start; }
@media (min-width:900px){ .s-contact__info{ position:sticky; inset-block-start:96px; } }

/* ===== DDC horizontal scroll (01·02·03) ===== */
/* Horizontal layout only when script.js turns it on (.is-hscroll, desktop + motion allowed);
   otherwise the stages simply stack. The strip is held by CSS sticky, not a JS pin (see 2026-10-06 block). */
.ddc-horizontal.is-hscroll{ position:relative; }
.is-hscroll .ddc-sticky{ position:sticky; top:var(--ddc-top,64px); overflow:hidden; }
.is-hscroll .ddc-track{ display:flex; flex-wrap:nowrap; inline-size:max-content; will-change:transform; }
.is-hscroll .ddc-panel{ flex:0 0 100vw; inline-size:100vw; display:flex; align-items:center; }
.ddc-panel .ddc-stage__grid{ inline-size:100%; }
@media (max-width:900px){
  .ddc-horizontal{ overflow:visible; }
  .ddc-track{ display:block; inline-size:auto; transform:none !important; }
  .ddc-panel{ inline-size:auto; min-block-size:auto; display:block; padding-block:clamp(56px,8vw,110px) !important; }
}

/* ===== TV rotary knobs (old-TV) ===== */
.tv__controls{ align-items:flex-start; gap:36px; }
.tv__ctrl{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.tv__ctrl-lbl{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,240,225,.62); font-weight:600; min-inline-size:0; text-align:center; }
[data-lang="ar"] .tv__ctrl-lbl{ text-transform:none; letter-spacing:0; }
.tv__set .tv-knob{ inline-size:56px; block-size:56px; border-radius:50%; padding:0; position:relative; cursor:pointer;
  background:radial-gradient(circle at 38% 32%, #34281c, #120c07); border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 2px 5px rgba(255,255,255,.07), inset 0 -3px 7px rgba(0,0,0,.6), 0 5px 10px rgba(0,0,0,.5);
  transition:transform .5s cubic-bezier(.34,1.4,.5,1), box-shadow .3s; }
.tv__set .tv-knob:hover{ box-shadow:inset 0 2px 5px rgba(255,255,255,.09), 0 7px 14px rgba(0,0,0,.55); }
.tv-knob::after{ content:""; position:absolute; inset-block-start:7px; inset-inline-start:50%; margin-inline-start:-1.5px;
  inline-size:3px; block-size:19px; border-radius:2px; background:#f4ede2; box-shadow:0 0 6px rgba(255,255,255,.45); }
.tv__power .tv__led{ display:none; }
.tv.is-on .tv__set .tv__power.tv-knob{ transform:rotate(132deg); box-shadow:inset 0 2px 5px rgba(255,255,255,.07), 0 0 16px rgba(46,204,113,.5), 0 5px 10px rgba(0,0,0,.5); }
.tv__dial.tv-knob{ transform:rotate(var(--turn,0deg)); }
.tv__chan{ gap:12px; }

/* ===== round-3: DDC badge pulse, complement latch tints, TV realism ===== */
.ddc-logic__card:hover .ddc-logic__badge::after{ border-color:var(--accent); animation:ddc-pulse 1.5s ease-out infinite; }
@keyframes ddc-pulse{ 0%{ transform:scale(.9); opacity:.6; } 100%{ transform:scale(1.8); opacity:0; } }
.complement.is-night .cc-panel--base{ background:rgba(135,206,235,.28); }
.complement.is-day .cc-panel--accent{ background:rgba(255,224,130,.4); }
.tv__osd{ z-index:6; }
.tv__set{ background:linear-gradient(160deg,#4a3826 0%,#2c2015 55%,#1b130c 100%); }
.tv__screen{ box-shadow:inset 0 0 74px rgba(0,0,0,.94), inset 0 0 0 5px #090c11, inset 0 8px 30px rgba(0,0,0,.7), inset 0 -8px 30px rgba(0,0,0,.7); }
.tv__screen::after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(0deg, transparent 46%, rgba(255,255,255,.05) 49%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.05) 51%, transparent 54%);
  background-size:100% 240%; animation:tv-refresh 7.5s linear infinite; }
@keyframes tv-refresh{ 0%{ background-position:0 -120% } 100%{ background-position:0 220% } }

/* ===== round-4: future phase hover, TV standby, founders duo image ===== */
.s-future__phase-node{ transition:background .35s ease, border-color .35s ease, color .35s ease; }
.s-future__phase-node span{ transition:color .35s ease; }
.s-future__phase:hover .s-future__phase-node{ border-color:var(--gold); background:rgba(235,162,90,.14); }
.s-future__phase:hover .s-future__phase-node span{ color:var(--gold); }
.tv__off{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; pointer-events:none;
  color:#3b4552; font:600 .72rem/1 ui-monospace,monospace; letter-spacing:.22em; text-transform:uppercase; }
.tv__off-led{ inline-size:9px; block-size:9px; border-radius:50%; background:#7a2b22; box-shadow:0 0 8px rgba(192,57,43,.55); animation:tv-standby 2.4s ease-in-out infinite; }
@keyframes tv-standby{ 0%,100%{ opacity:.4 } 50%{ opacity:.9 } }
.s-founders__duo{ max-inline-size:920px; margin-inline:auto; }
.s-founders__duo-frame{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(120deg, var(--bg-surface-2), var(--bg-surface)); display:grid; place-items:center; box-shadow:var(--shadow-md); }
.s-founders__duo-img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; z-index:0; }
.s-founders__duo-ph{ color:var(--text-muted); font-size:.92rem; text-align:center; padding:22px; }
.s-founders__duo-frame::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg, rgba(0,0,0,.55), transparent 42%); }
.s-founders__duo-tag{ position:absolute; inset-block-end:16px; z-index:2; display:flex; flex-direction:column; gap:2px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.s-founders__duo-tag b{ font-family:var(--font-display); font-size:1.12rem; }
.s-founders__duo-tag i{ font-style:normal; font-size:.82rem; opacity:.86; }
.s-founders__duo-tag--l{ inset-inline-start:22px; }
.s-founders__duo-tag--r{ inset-inline-end:22px; text-align:end; align-items:flex-end; }

/* ===== round-5: smooth card hovers, hero spread, hamburger, RTL scroll, TV dial ===== */
/* beat `.has-js .reveal` (0,2,0) so box-shadow/border also transition, not just transform */
.has-js .s-initiatives__card{ transition:opacity .6s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.has-js .s-future__tile{ transition:opacity .6s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.s-future__tile::after{ transition:opacity .55s var(--ease); }
.has-js .s-join__card{ transition:opacity .6s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); }
.s-join__card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
/* hero: push left/right further apart on desktop */
@media (min-width:1025px){ .hero-slide__content > .u-container.hero-grid{ max-inline-size:min(1600px,93vw); } }
/* hamburger bars must be visible on the dark hero (were --text-strong) */
.hamburger span{ background:#fff; }
.nav.is-scrolled .hamburger span{ background:var(--text-strong); }
.hamburger{ border-color:rgba(255,255,255,.35); }
.nav.is-scrolled .hamburger{ border-color:var(--border-subtle); }
/* keep the WHOLE horizontal DDC section LTR in both languages so the pinned scroll works identically; only the text inside is RTL */
[dir="rtl"] .ddc-horizontal{ direction:ltr; }
[dir="rtl"] .ddc-horizontal .ddc-stage__text{ direction:rtl; }
/* TV channel dial is now clickable (next channel) */
.tv__dial.tv-knob{ cursor:pointer; }
.tv__dial.tv-knob:hover{ transform:rotate(var(--turn,0deg)) scale(1.07); }

/* ===== round-6: complement simple hover ===== */
.complement-compare{ transition:box-shadow .4s var(--ease); }
.cc-panel{ transition:background .35s ease; }
.cc-panel--base:hover{ background:var(--accent-soft); }
.cc-panel--accent:hover{ background:linear-gradient(160deg, var(--accent-soft) 0%, transparent 55%); }
.cc-icon{ transition:transform .35s var(--ease); }
.cc-panel:hover .cc-icon{ transform:translateY(-3px) scale(1.08); }

/* ===== round-7: center complement intro + fix Join glow clipping ===== */
.complement__intro{ text-align:center; max-inline-size:56ch; margin-inline:auto; }
.s-join__involve::before{ inset-block-start:50%; inset-block-end:auto; inset-inline-end:-170px;
  transform:translateY(-50%); inline-size:min(540px,64vw); block-size:min(540px,64vw); }

/* ===== round-9: hero single left column + complement accent white/orange ===== */
@media (min-width:1025px){
  .hero-slide__content > .u-container.hero-grid{ flex-direction:column; align-items:flex-start; gap:clamp(20px,2.8vh,32px); }
  .hero-col--left, .hero-col--right{ max-inline-size:min(600px,54vw); }
}
.cc-panel--accent{ background:#fff; }
.cc-panel--accent:hover{ background:var(--gold); }
.cc-panel--accent:hover .cc-label, .cc-panel--accent:hover p{ color:#3a2408; }

/* ===== round-9b: TV channel dial -> digital channel readout (was a redundant knob) ===== */
.tv__set .tv__dial{ inline-size:auto; min-inline-size:54px; block-size:52px; border-radius:10px; padding:0 14px;
  display:grid; place-items:center; cursor:pointer;
  background:radial-gradient(circle at 50% 25%, #12271b, #05100b); border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7), inset 0 0 12px rgba(46,204,113,.1), 0 4px 8px rgba(0,0,0,.5);
  transition:transform .25s var(--ease), box-shadow .3s; }
.tv__set .tv__dial:hover{ transform:translateY(-1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.7), 0 0 14px rgba(46,204,113,.4), 0 5px 10px rgba(0,0,0,.5); }
#tvDialNum{ font:700 1.3rem/1 ui-monospace,"SF Mono",monospace; color:#7dff9e; text-shadow:0 0 9px rgba(46,204,113,.7); }

/* ===== round-9c: Initiatives -> horizontal card carousel (shorter cards) ===== */
.s-initiatives__grid{ display:flex; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; gap:var(--space-md); padding-block-end:20px;
  -webkit-overflow-scrolling:touch; }
.s-initiatives__card{ flex:0 0 clamp(280px,82vw,338px); scroll-snap-align:start; }
.s-initiatives__skills{ display:none; }              /* the tall part -> card stays compact */
.s-initiatives__desc{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.s-initiatives__grid::-webkit-scrollbar{ height:8px; }
.s-initiatives__grid::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:99px; }
.s-initiatives__grid::-webkit-scrollbar-thumb:hover{ background:var(--accent-line); }
.s-initiatives__grid::-webkit-scrollbar-track{ background:transparent; }

/* ===== round-10: hero — single unified backdrop (was two per-column boxes) ===== */
.hero-col::before{ display:none !important; }
.hero-grid{ position:relative; z-index:1; }
.hero-grid::before{ content:""; position:absolute; z-index:-1; inset:-24px; border-radius:18px; pointer-events:none;
  background:radial-gradient(125% 130% at 50% 50%, rgba(4,13,24,.66) 0%, rgba(4,13,24,.6) 60%, rgba(4,13,24,.2) 92%, transparent 100%); }

/* ===== round-11: carousel dots/drag + center responsible-path block ===== */
.s-initiatives__dots{ display:flex; justify-content:center; gap:9px; margin-block-start:22px; }
.s-initiatives__dot{ inline-size:9px; block-size:9px; border-radius:50%; padding:0; cursor:pointer;
  background:var(--border-strong); border:none; transition:background .3s var(--ease), transform .3s var(--ease); }
.s-initiatives__dot:hover{ background:var(--gold); }
.s-initiatives__dot.is-active{ background:var(--gold); transform:scale(1.35); }
.s-initiatives__grid{ cursor:grab; }
.s-initiatives__grid.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; user-select:none; }
.s-initiatives__grid.is-dragging img{ pointer-events:none; }
/* center the "A responsible, step-by-step path / Nothing here has started" block */
.s-future__block:has(.s-future__phases) .s-future__block-head{ justify-content:center; text-align:center; }
.s-future__block:has(.s-future__phases) .s-future__phases{ margin-inline:auto; }

/* ===== round-12: remove the full-width hero scrim (text has its own text-width backdrop) ===== */
.hero-slide__scrim{ display:none; }
.hero-scroll-cue{ text-shadow:0 1px 8px rgba(0,0,0,.55); }

/* ===== round-13: accent panel always white -> force dark text (invisible in dark mode) ===== */
.cc-panel--accent .cc-label{ color:#0d2140; }
.cc-panel--accent p{ color:#43536a; }
.cc-panel--accent:hover .cc-label, .cc-panel--accent:hover p{ color:#3a2408; }

/* ===== round-14: hero grid = text width + LEFT-aligned, so the backdrop only covers the text ===== */
@media (min-width:1025px){
  .hero-slide__content > .u-container.hero-grid{ inline-size:fit-content; max-inline-size:min(528px,52vw); margin-inline-start:clamp(40px,5vw,80px); margin-inline-end:auto; padding-inline:0; }
  .hero-col--left, .hero-col--right{ inline-size:100%; }
}

/* ===== round-15: hero eyebrow dot -> gold (was navy/black on the dark backdrop) ===== */
.hero-eyebrow .ripple-dot{ background:var(--gold); }
.hero-eyebrow .ripple-dot::before, .hero-eyebrow .ripple-dot::after{ border-color:var(--gold); }

/* ============ round-16: mobile fixes + flip/confetti (fanned-out) ============ */
/* ---------- Mission / Vision flip cards · tap-to-swap ---------- */
/* Mirrors the hover flip (.flip:hover .flip__inner / :focus-within) so a tap
   on touch / small screens reaches the back face. Additive only. */
.flip.is-flipped .flip__inner{ transform:rotateY(180deg); }

/* At <=600px the base stylesheet disables the 3D flip
   (.flip__inner{ transform:none!important } and .flip__back{ display:none }),
   so mirror it as a flat face-swap instead. */
@media (max-width:600px){
  .flip.is-flipped .flip__front{ display:none; }
  .flip.is-flipped .flip__back{ display:flex; transform:none; }
}
/* =============================================================
   fix-02-confetti.css
   Contact-form success reveal + non-stop confetti (offline).
   Pairs with fix-02-confetti.js. Uses the site's own custom
   properties so it inherits light/dark + DDC accent (green here).
   ============================================================= */

/* The wrap becomes the positioning context so the success card
   can sit exactly on top of the (fading) form card. */
.s-contact__form-wrap{ position:relative; }

/* ---------- Form fade-out ---------- */
.s-contact__form{
  transition:
    opacity .55s var(--ease),
    transform .55s var(--ease),
    filter .55s var(--ease);
  will-change:opacity, transform;
}
.s-contact__form-wrap.is-success .s-contact__form{
  opacity:0;
  transform:translateY(-10px) scale(.97);
  filter:blur(3px);
  pointer-events:none;
}

/* ---------- Success message ---------- */
/* Absolutely overlaid on the wrap; the faded form keeps the card's
   footprint so the section never collapses. Mirrors the form card's
   surface / radius / shadow so it reads as the same panel. */
.s-contact__success{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-sm);
  text-align:center;
  padding:clamp(28px,4vw,44px);
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);

  opacity:0;
  visibility:hidden;
  transform:translateY(18px) scale(.96);
  transition:
    opacity .6s var(--ease) .3s,
    transform .6s var(--ease) .3s,
    visibility 0s linear .9s;
  pointer-events:none;
}
.s-contact__form-wrap.is-success .s-contact__success{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:
    opacity .7s var(--ease) .3s,
    transform .7s var(--ease) .3s,
    visibility 0s;
  pointer-events:auto;
}

/* Checkmark badge */
.s-contact__success-ic{
  inline-size:66px;
  block-size:66px;
  border-radius:var(--radius-pill);
  display:grid;
  place-items:center;
  color:var(--accent);
  background:var(--accent-soft);
  box-shadow:0 0 0 8px color-mix(in srgb, var(--accent-fill) 10%, transparent);
}
.s-contact__form-wrap.is-success .s-contact__success-ic{
  animation:bal-pop .6s var(--ease) .35s both;
}
.s-contact__form-wrap.is-success .s-contact__success-ic svg{
  stroke-dasharray:30;
  stroke-dashoffset:30;
  animation:bal-draw .5s var(--ease) .6s forwards;
}

.s-contact__success-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height:1.3;
  color:var(--text-strong);
  max-inline-size:26ch;
}
.s-contact__success-note{
  margin:0;
  font-size:.82rem;
  line-height:1.6;
  color:var(--text-muted);
  max-inline-size:38ch;
}

/* ---------- Confetti canvas ---------- */
.bal-confetti-canvas{
  position:fixed;
  inset:0;
  inline-size:100%;
  block-size:100%;
  pointer-events:none;
  z-index:9999;
}

/* ---------- Motion / a11y ---------- */
@keyframes bal-pop{
  0%  { transform:scale(.4); opacity:0; }
  60% { transform:scale(1.12); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes bal-draw{ to{ stroke-dashoffset:0; } }

@media (prefers-reduced-motion:reduce){
  /* Keep the reveal, drop the movement (confetti is skipped in JS). */
  .s-contact__form{ transition:opacity .3s linear; }
  .s-contact__form-wrap.is-success .s-contact__form{
    transform:none; filter:none;
  }
  .s-contact__success{ transition:opacity .3s linear; transform:none; }
  .s-contact__form-wrap.is-success .s-contact__success{ transform:none; }
  .s-contact__form-wrap.is-success .s-contact__success-ic,
  .s-contact__form-wrap.is-success .s-contact__success-ic svg{
    animation:none;
  }
  .s-contact__form-wrap.is-success .s-contact__success-ic svg{ stroke-dashoffset:0; }
}
/* =============================================================
   fix-03 — MOBILE responsiveness: Belong gallery + Initiatives carousel
   Additive overrides only. Selectors are scoped with extra specificity
   (section class + element class) so they win over the base rules in
   style.css regardless of the order this file is loaded in.
   Matches existing conventions: CSS custom props + logical properties.
   ============================================================= */

/* -------------------------------------------------------------
   (A) BELONG — community gallery  (.s-belong > .belong-gallery)
   Base: 4-col grid, fixed grid-auto-rows (200px; 150px <560),
   grid-auto-flow:dense, with .bg-tall (row span 2) / .bg-wide
   (col span 2) mosaic tiles.
   Problem on phones: the fixed row heights + the span-2 tiles turn
   .bg-wide into thin, letterboxed full-width strips and the dense
   packing reads as a cramped, uneven mosaic — it never cleanly
   stacks/flows on narrow screens.
   Fix: neutralise the mosaic spans and let uniform, aspect-ratio
   tiles flow, then collapse to a single column on very small phones.
   ------------------------------------------------------------- */
@media (max-width:600px){
  .s-belong .belong-gallery{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:auto;          /* drop fixed 150px rows */
    grid-auto-flow:row;           /* drop dense mosaic packing */
    gap:var(--space-2xs);
  }
  /* even, self-sizing tiles so heights stay consistent */
  .s-belong .belong-gallery .bg-item{ aspect-ratio:1 / 1; block-size:auto; }
  /* remove the wide/tall spans that break the layout on mobile */
  .s-belong .belong-gallery .bg-item.bg-tall{ grid-row:auto; }
  .s-belong .belong-gallery .bg-item.bg-wide{ grid-column:auto; }
}

@media (max-width:400px){
  /* single, comfortably large column — stacks cleanly on phones */
  .s-belong .belong-gallery{
    grid-template-columns:1fr;
    gap:var(--space-xs);
  }
  .s-belong .belong-gallery .bg-item{ aspect-ratio:4 / 3; }
}

/* -------------------------------------------------------------
   (B) INITIATIVES — horizontal card carousel
   (.s-initiatives / .s-initiatives__grid / __card / __dots)
   The section already has overflow:hidden and the grid has
   overflow-x:auto, so the row scrolls inside itself and cannot push
   the page wide. We reinforce that containment and make each card
   near full-viewport-width (with a small peek of the next card to
   signal it scrolls). Dots stay centered.
   ------------------------------------------------------------- */
@media (max-width:600px){
  /* belt-and-suspenders guard against any page-level h-scroll */
  .s-initiatives{ overflow-x:hidden; }

  .s-initiatives .s-initiatives__grid{
    gap:var(--space-sm);          /* tighter than 24px on phones */
    max-inline-size:100%;         /* never wider than its container */
  }

  /* near full-width card; capped so it stays readable on big phones */
  .s-initiatives .s-initiatives__card{
    flex:0 0 86vw;
    max-inline-size:340px;
  }

  /* keep pagination centered and tidy if it ever wraps */
  .s-initiatives .s-initiatives__dots{
    justify-content:center;
    flex-wrap:wrap;
    margin-block-start:var(--space-md);
  }
}

@media (max-width:400px){
  /* a touch tighter gap on the smallest phones */
  .s-initiatives .s-initiatives__grid{ gap:var(--space-xs); }
}
/* ==========================================================================
   fix-04-buttons-dot.css  —  MOBILE-only, additive
   Phones (<=600px). Load AFTER style.css so these rules win.
   No edits to index.html / style.css / script.js.

   Fixes:
   (1) CTA "See the initiatives our learners built"  -> .ddc-closing .btn-primary
   (2) CTA in "Our long-term hope"                   -> .s-future__bridge (.btn-outline)
   (3) Reflection ripple-dot above text on phones    -> .ddc-reflect
   ========================================================================== */

@media (max-width:600px){

  /* -----------------------------------------------------------------------
     (1) + (2)  Long-label CTAs overflow on narrow phones because the base
     .btn rule sets `white-space:nowrap`. Let the label wrap and cap the
     button width so it fits the viewport. Both CTAs sit in centered blocks.
     ----------------------------------------------------------------------- */
  .ddc-closing .btn-primary,
  .s-future__bridge{
    white-space:normal;              /* allow the label to break onto 2 lines */
    max-inline-size:100%;            /* never exceed the container / viewport */
    inline-size:auto;                /* shrink to content, wrap when needed   */
    text-align:center;
    line-height:1.35;                /* readable once wrapped (base is /1)     */
    padding-block:12px;              /* a touch more room for two-line labels  */
    overflow-wrap:break-word;        /* guard against very long unbroken words */
  }

  /* keep the trailing arrow from being squeezed when the text wraps */
  .ddc-closing .btn-primary svg,
  .s-future__bridge svg{ flex-shrink:0; }

  /* -----------------------------------------------------------------------
     (3)  Stack the reflection callout: ripple-dot ABOVE the paragraph.
     Base rule is `display:flex; align-items:center; gap:14px;` (dot at left).
     ----------------------------------------------------------------------- */
  .ddc-reflect{
    flex-direction:column;           /* dot on top, text below */
    align-items:center;
    text-align:center;
    gap:12px;
  }
  .ddc-reflect .ripple-dot{ flex-shrink:0; }   /* preserve dot size when stacked */

}
/* ===== Fix 05 — center footer on mobile (additive) ===== */
@media (max-width:600px){
  /* Center the whole footer block: headings, links, copyright */
  .footer__top{ justify-content:center; align-items:center; text-align:center; }

  /* Brand column: center the logo lockup + description */
  .footer__brand{ max-width:none; margin-inline:auto; text-align:center; }
  .footer__brand > div{ justify-content:center; }

  /* Link columns: center the row of columns and each link list */
  .footer__cols{ justify-content:center; text-align:center; }
  .footer__col{ text-align:center; }
  .footer__col a{ text-align:center; }

  /* Copyright line: stack + center both spans */
  .footer__bottom{ justify-content:center; text-align:center; }
}

/* ===== round-17: Belong gallery images not clickable on mobile (lightbox breaks) ===== */
@media (max-width:700px){ .belong-gallery .bg-item{ pointer-events:none; cursor:default; } }

/* ===== 2026-09-28: founders heading + duo photo removed; the caption band now stands alone, full-bleed ===== */
.s-founders.section{ padding-block:0; }
.s-founders .s-founders__band{ margin-block-start:0; }

/* ===== 2026-09-28: image loading placeholder =====
   While a lazy image downloads, its frame shows a soft shimmer; the photo then fades in.
   Classes are added by script.js (initImageLoading), so without JS images show normally. */
:root{ --shimmer-bg:#E6E8E0; --shimmer-hi:rgba(255,255,255,.9); }
[data-theme="dark"]{ --shimmer-bg:#0E2640; --shimmer-hi:rgba(255,255,255,.07); }
.img-wait{ background-color:var(--shimmer-bg);
  background-image:linear-gradient(100deg, transparent 25%, var(--shimmer-hi, rgba(255,255,255,.85)) 50%, transparent 75%);
  background-size:200% 100%; background-repeat:no-repeat; animation:img-shimmer 1.3s ease-in-out infinite; }
@keyframes img-shimmer{ from{ background-position:150% 0; } to{ background-position:-50% 0; } }
img.is-pending{ opacity:0 !important; }
img.is-arrived:not(.story-img){ animation:img-in .6s ease; }
@keyframes img-in{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .img-wait{ animation:none; } img.is-arrived{ animation:none; } }

/* ===== 2026-09-28: initiative cards can carry two links (e.g. NCAS: register + Instagram) ===== */
.s-initiatives__foot{ flex-wrap:wrap; gap:8px; }
.s-initiatives__reg{ background:var(--gold); color:#3a2408; border-color:var(--gold); }
.s-initiatives__reg:hover{ background:#f3b577; }
.s-initiatives__foot:has(.s-initiatives__reg){ gap:6px; flex-wrap:nowrap; }
.s-initiatives__foot:has(.s-initiatives__reg) .s-initiatives__ig{ padding:9px 13px; white-space:nowrap; }
html[dir="ltr"] .s-initiatives__name-ar[dir="rtl"]{ text-align:left; }
html[dir="rtl"] .s-initiatives__name-ar[dir="rtl"]{ text-align:right; }

/* ===== 2026-09-28: close the empty gap under "Reflection connects the stages" =====
   Stages were full-screen (100vh) with content centred, plus the intro's 128px bottom padding,
   leaving ~300px of blank space. Stages are now content-height and pinned centred (script.js). */
.ddc-intro{ padding-block-end:clamp(40px,4vw,64px); }
@media (min-width:901px){
  .ddc-panel{ min-block-size:0; padding-block:clamp(48px,5vw,72px) !important; }
  .ddc-horizontal{ background:var(--bg-canvas); }
}

/* ===== 2026-09-28: contact form sends via /api/contact ===== */
/* Honeypot: off-screen for humans (and screen readers), bots fill it and get silently dropped. */
.s-contact__hp{ position:absolute !important; inset-inline-start:-10000px; inline-size:1px; block-size:1px; overflow:hidden; }
.s-contact__status.is-error{ color:#b3261e; font-weight:500; }
[data-theme="dark"] .s-contact__status.is-error{ color:#ff8a80; }
.s-contact__submit[aria-busy="true"]{ opacity:.7; cursor:progress; }

/* ===== 2026-10-06: Journey strip held by CSS sticky (script.js) instead of a GSAP pin =====
   The pin switched the strip to position:fixed from JS, a frame behind trackpad scrolling, so the
   stages rode up over the intro as it engaged and twitched on Contribute at release. Sticky is
   applied by the browser itself. Padding follows the window height so the strip fits short screens. */
@media (min-width:901px){
  .is-hscroll .ddc-panel{ padding-block:clamp(24px,6vh,72px) !important; }
}