/* ==========================================================================
   اللجنة التنسيقية لجمعيات الدعوة — Header + Hero
   RTL mirror of the reference composition. Brand colors: #2E1065 / #5B21B6 / #F5F3FF.
   ========================================================================== */

@font-face {
  font-family: "Avenir Arabic";
  src: url("assets/fonts/AvenirArabic-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Avenir Arabic";
  src: url("assets/fonts/avenir-arabic-heavy.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --deep: #2E1065;
  --primary: #5B21B6;
  --pale: #F5F3FF;
  /* 70% pale + 30% primary — the light-purple headline word ("iris" in the reference) */
  --tint: color-mix(in srgb, #F5F3FF 70%, #5B21B6);
  /* Dark atmosphere built from the deep purple */
  --night: color-mix(in srgb, #2E1065 46%, #000);
  --veil: color-mix(in srgb, #2E1065 34%, #000);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --g: 56px;
  --navh: 84px;
  --pad: max(var(--g), calc((100vw - clamp(1280px, 92vw, 1520px)) / 2));
  --font: "Avenir Arabic", sans-serif;
}
@media (max-width: 1099px) { :root { --g: 40px; } }
@media (max-width: 699px)  { :root { --g: 20px; --navh: 72px; } }

/* Section rhythm (home 2): one gap between major sections, panels slightly inset with rounded corners */
:root {
  --section-gap-desktop: 80px;
  --section-gap-tablet: 56px;
  --section-gap-mobile: 40px;
  --section-gap: var(--section-gap-desktop);
  --panel-inset: clamp(10px, 1vw, 16px);
  --panel-r: clamp(24px, 2.6vw, 40px);
}
@media (max-width: 1099px) { :root { --section-gap: var(--section-gap-tablet); } }
@media (max-width: 699px)  { :root { --section-gap: var(--section-gap-mobile); --panel-r: 22px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--night);
  color: var(--pale);
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
button { font: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 3px solid var(--pale); outline-offset: 3px; }

.skip {
  position: fixed; top: -80px; right: 16px; z-index: 1200;
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 18px; border-radius: 999px;
  background: var(--pale); color: var(--deep); font-weight: 900; text-decoration: none;
  transition: top 0.2s;
}
.skip:focus { top: 14px; }

/* --------------------------------------------------------------------------
   Intro curtain (ref: dark front layer + accent back layer lift away)
   -------------------------------------------------------------------------- */
.loader { display: none; }
html.has-loader .loader { display: block; position: fixed; inset: 0; z-index: 1100; cursor: pointer; }
html.has-loader { overflow: hidden; }
.loader-back, .loader-front {
  position: absolute; left: 0; right: 0; top: -2px; height: calc(100% + 4px);
  will-change: transform;
}
.loader-back { background: var(--primary); }
.loader-front { background: var(--night); display: grid; place-items: center; }
.loader-mark { width: clamp(64px, 7vw, 96px); height: auto; opacity: 0; }

/* --------------------------------------------------------------------------
   Buttons (ref: .cth-btn-p / .cth-btn-g)
   -------------------------------------------------------------------------- */
.mag { display: inline-flex; will-change: transform; }

.btn {
  position: relative; display: inline-flex; align-items: center;
  height: 56px; border-radius: 999px;
  font-size: 15px; font-weight: 900; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s, background-color 0.4s, box-shadow 0.4s, color 0.4s;
}
.btn:active { transform: scale(0.965); transition-duration: 0.06s; }
.btn-label { position: relative; z-index: 1; padding-bottom: 2px; }

/* Filled — arrow disc at the reading end (left in Arabic); it floods the pill on hover */
.btn-primary {
  gap: 14px; padding: 0 24px 0 8px;
  background: var(--pale); color: var(--deep);
  overflow: hidden; isolation: isolate;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--night) 70%, transparent);
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--tint);
  clip-path: circle(20px at 28px 50%);
  transition: clip-path 0.6s var(--ease-out);
}
.btn-primary:hover::before, .btn-primary:focus-visible::before { clip-path: circle(130% at 28px 50%); }
.btn-arrow {
  position: relative; z-index: 1; flex: 0 0 auto;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--deep);
}
.btn-arrow svg {
  display: block; width: 18px; height: 18px;
  transform: rotate(45deg);
  transition: transform 0.5s var(--ease-out);
}
.btn-primary:hover .btn-arrow svg, .btn-primary:focus-visible .btn-arrow svg { transform: none; }

.btn-sm { height: 46px; gap: 10px; padding: 0 18px 0 6px; font-size: 14px; }
.btn-sm::before { clip-path: circle(17px at 23px 50%); }
.btn-sm:hover::before, .btn-sm:focus-visible::before { clip-path: circle(130% at 23px 50%); }
.btn-sm .btn-arrow { width: 34px; height: 34px; }
.btn-sm .btn-arrow svg { width: 16px; height: 16px; }

/* Outlined */
.btn-ghost {
  gap: 10px; padding: 0 24px;
  background: color-mix(in srgb, var(--veil) 56%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 52%, transparent);
  color: var(--pale);
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--pale); color: var(--deep);
  box-shadow: inset 0 0 0 1px var(--pale);
}
.lamp {
  position: relative; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tint); transition: background-color 0.4s;
}
.lamp::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid var(--tint); opacity: 0;
  animation: ping 2.6s ease-out infinite;
}
.btn-ghost:hover .lamp, .btn-ghost:focus-visible .lamp { background: var(--primary); }

@keyframes ping {
  0% { opacity: 0.9; transform: scale(0.5); }
  70%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.15; }
}

/* --------------------------------------------------------------------------
   Header (fixed; turns light after scrolling) — logo right, nav centre, CTA left
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--navh); color: var(--pale); pointer-events: none;
}
/* after scrolling: frosted, see-through glass (the page shows through, blurred) */
.site-header::before {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--pale) 58%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--deep) 10%, transparent);
  opacity: 0; transition: opacity 0.35s;
}
.site-header.is-moved::before { opacity: 1; }

.header-in {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 24px;
  height: 100%; padding: 0 var(--pad);
}
.header-in > * { pointer-events: auto; }

.brand { position: relative; flex: 0 0 auto; display: block; width: 74px; }
.brand img { width: 100%; height: auto; transition: opacity 0.35s; }
.brand .brand-dark { position: absolute; inset: 0; opacity: 0; }
.site-header.is-moved .brand .brand-light { opacity: 0; }
.site-header.is-moved .brand .brand-dark { opacity: 1; }

.nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav > ul {
  display: flex; gap: 2px; list-style: none; margin: 0; padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--veil) 52%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 20%, transparent);
  transition: background-color 0.35s, box-shadow 0.35s;
}
.nav > ul > li > a, .nav-tg {
  display: flex; align-items: center; gap: 6px; padding: 9px 15px 11px; border: 0; border-radius: 999px;
  background: none; font-size: 14.5px; font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap; color: var(--pale); cursor: pointer;
  transition: background-color 0.35s, color 0.35s;
}
.nav > ul > li > a:hover, .nav > ul > li > a:focus-visible,
.nav-tg:hover, .nav-tg:focus-visible, .has-sub.is-open .nav-tg { background: var(--pale); color: var(--deep); }
.site-header.is-moved .nav > ul {
  background: color-mix(in srgb, #fff 42%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep) 18%, transparent);
}
.site-header.is-moved .nav > ul > li > a, .site-header.is-moved .nav-tg { color: var(--deep); }
.site-header.is-moved .nav > ul > li > a:hover, .site-header.is-moved .nav > ul > li > a:focus-visible,
.site-header.is-moved .nav-tg:hover, .site-header.is-moved .nav-tg:focus-visible,
.site-header.is-moved .has-sub.is-open .nav-tg { background: var(--deep); color: var(--pale); }
.nav [aria-current="page"] { font-weight: 900; }
/* the current page's link carries a soft plate so it reads as active */
.nav > ul > li > a[aria-current="page"] { background: color-mix(in srgb, var(--pale) 16%, transparent); }
.site-header.is-moved .nav > ul > li > a[aria-current="page"] { background: color-mix(in srgb, var(--deep) 10%, transparent); }
/* an official page that has no route yet: listed (content doc, eight pages) but not linked */
.nav-off {
  display: flex; align-items: center; padding: 9px 15px 11px;
  font-size: 14.5px; font-weight: 500; line-height: 1.2; white-space: nowrap; color: var(--pale); opacity: 0.55; cursor: default;
}
.site-header.is-moved .nav-off { color: var(--deep); }
.sheet-list .nav-off { min-height: 64px; padding: 10px 0; font-size: clamp(28px, 8vw, 46px); font-weight: 900; line-height: 1.3; opacity: 0.4; }
/* eight pages: a tighter pill until the widest screens */
@media (max-width: 1499px) {
  .nav > ul { padding: 4px 6px; gap: 0; }
  .nav > ul > li > a, .nav-off { padding: 9px 11px 11px; font-size: 14px; }
}

/* Dropdown under «الرئيسية» */
.has-sub { position: relative; }
.nav-tg svg { width: 11px; height: 11px; transform: rotate(-90deg); transition: transform 0.35s var(--ease-out); }
.has-sub.is-open .nav-tg svg { transform: rotate(90deg); }
.nav-sub {
  position: absolute; top: calc(100% + 12px); right: -4px; z-index: 5;
  min-width: 200px; margin: 0; padding: 6px; list-style: none;
  border-radius: 20px; background: var(--pale);
  box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--night) 75%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--deep) 12%, transparent);
  opacity: 0; visibility: hidden; translate: 0 -8px;
  transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out), visibility 0s 0.3s;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.has-sub.is-open .nav-sub {
  opacity: 1; visibility: visible; translate: 0 0;
  transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out), visibility 0s;
}
@media (hover: hover) {
  .has-sub:hover .nav-sub {
    opacity: 1; visibility: visible; translate: 0 0;
    transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out), visibility 0s;
  }
}
.nav-sub a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 16px 13px; border-radius: 14px;
  font-size: 14.5px; font-weight: 500; line-height: 1.2; text-decoration: none; color: var(--deep);
  transition: background-color 0.3s, color 0.3s;
}
.nav-sub a:hover, .nav-sub a:focus-visible { background: var(--deep); color: var(--pale); }
.nav-sub a[aria-current="page"]::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary);
}
.nav-sub a[aria-current="page"]:hover::after { background: var(--tint); }

/* Mobile sheet: second-level item */
.sheet-list .sheet-sub a { font-size: clamp(22px, 6vw, 34px); font-weight: 500; padding-inline-start: 0.9em; }

.header-end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.site-header.is-moved .header-end .btn-primary { background: var(--deep); color: var(--pale); }
.site-header.is-moved .header-end .btn-primary .btn-arrow { color: var(--deep); }

.burger {
  position: relative; display: none; flex: 0 0 auto;
  width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--veil) 56%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 52%, transparent);
  color: var(--pale); cursor: pointer; appearance: none;
  transition: background-color 0.35s, color 0.35s;
}
.burger i {
  position: absolute; left: 15px; right: 15px; height: 2px; border-radius: 2px;
  background: currentColor; transition: translate 0.35s, rotate 0.35s;
}
.burger i:first-child { top: 18px; }
.burger i:last-child { top: 26px; }
.burger.is-x i:first-child { translate: 0 4px; rotate: 45deg; }
.burger.is-x i:last-child { translate: 0 -4px; rotate: -45deg; }
.site-header.is-moved .burger { background: var(--pale); color: var(--deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep) 24%, transparent); }

@media (max-width: 1299px) {   /* eight pages need the room: the menu sheet takes over below 1300px */
  .nav { display: none; }
  .burger { display: block; }
}
@media (max-width: 699px) {
  .header-in { gap: 12px; }
  .brand { width: 62px; }
  .burger { width: 44px; height: 44px; }
}
@media (max-width: 379px) {
  .header-end .mag { display: none; }
}

/* Mobile sheet */
.sheet {
  position: fixed; inset: 0; z-index: 950;
  display: flex; flex-direction: column;
  background: var(--night); color: var(--pale);
  overflow: hidden auto; overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: sheet-in 0.4s var(--ease-out) both;
}
.sheet[hidden] { display: none; }
.sheet-top {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--navh); padding: 0 var(--g); flex: 0 0 auto;
}
.sheet-top .burger { display: block; background: var(--pale); color: var(--deep); box-shadow: none; }
.sheet-body { flex: 1 0 auto; padding: 8px var(--g) 24px; }
.sheet-list { list-style: none; margin: 0; padding: 0; }
.sheet-list li {
  border-bottom: 1px solid color-mix(in srgb, var(--pale) 20%, transparent);
  animation: sheet-li 0.55s var(--ease-out) calc(90ms + var(--i) * 40ms) both;
}
.sheet-list a {
  display: flex; align-items: center; min-height: 64px; padding: 10px 0;
  font-size: clamp(28px, 8vw, 46px); font-weight: 900; line-height: 1.3;
  text-decoration: none; color: var(--pale);
}
.sheet-foot { padding: 18px var(--g) 30px; }
.sheet-foot .btn { width: 100%; justify-content: space-between; }
@keyframes sheet-in { from { opacity: 0; translate: 0 -14px; } to { opacity: 1; translate: 0 0; } }
@keyframes sheet-li { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* --------------------------------------------------------------------------
   Hero (ref: .cth)
   -------------------------------------------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  container: hero / inline-size;
  display: flex; flex-direction: column;
  min-height: max(660px, min(100svh, 1100px));
  padding-top: var(--navh);
  background: var(--night); color: var(--pale);
}

.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-placeholder {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 46% 62% at 28% 50%, color-mix(in srgb, var(--primary) 70%, transparent), transparent 72%),
    linear-gradient(180deg, var(--deep), var(--night));
}
.hero-pic {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 46% 60%;
  opacity: 0; transition: opacity 0.6s;
}
.hero-pic.is-loaded { opacity: 1; }
/* Brand grade over the photograph: pushes the sunset into the deep-purple palette */
.hero-tint {
  position: absolute; inset: 0;
  background: var(--deep);
  mix-blend-mode: color; opacity: 0.55;
}
/* Ref scrim, mirrored: dark behind the copy (right), clear over the picture (left) */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(270deg,
      color-mix(in srgb, var(--veil) 86%, transparent) 0,
      color-mix(in srgb, var(--veil) 56%, transparent) 36%,
      color-mix(in srgb, var(--veil) 8%, transparent) 64%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--veil) 56%, transparent) 0,
      transparent 22%, transparent 52%,
      color-mix(in srgb, var(--veil) 86%, transparent) 100%),
    color-mix(in srgb, var(--veil) 22%, transparent);
}

/* Two columns: copy on the RIGHT (start), answer panel on the LEFT (end) */
.hero-body {
  --pb: clamp(28px, 3.1cqw, 46px);
  position: relative; z-index: 4; flex: 1 1 0%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(380px, 35cqw, 560px));
  align-items: end; gap: clamp(32px, 5cqw, 90px);
  padding: 36px var(--pad) var(--pb);
}

.hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  margin: 0 0 clamp(16px, 2cqw, 30px);
  padding: 8px 14px 10px 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--pale) 14%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 18%, transparent);
  font-size: 14.5px; line-height: 1.35; color: var(--pale);
}
.eyebrow i {
  flex: 0 0 auto; width: 7px; height: 7px; margin-top: 2px; border-radius: 50%;
  background: var(--tint); animation: blink 1.6s ease-in-out infinite;
}

/* Arabic is wider than the reference's condensed serif, so the scale is reduced
   to give the two lines the same footprint as "Be the / answer". */
.headline {
  margin: 0; max-width: 100%;
  font-size: clamp(64px, 7.6cqw, 150px);
  line-height: 1.16; color: var(--pale);
}
.hl-mask { display: block; }
.hl-line { display: inline-block; white-space: nowrap; }
.hl-1 { font-weight: 900; }
.hl-2 { font-weight: 500; color: var(--tint); font-size: 1.06em; line-height: 1.08; }
.caret {
  display: inline-block; width: 0.032em; min-width: 4px; height: 0.72em;
  margin-inline-start: 0.08em; vertical-align: -0.02em;
  background: var(--tint);
  animation: blink 1.1s steps(1) infinite;
}

.lead {
  margin: clamp(18px, 1.9cqw, 28px) 0 0; max-width: 500px;
  font-size: 18px; line-height: 1.65; color: var(--pale);
}

.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 2.6cqw, 38px); }

/* Answer panel */
.hero-side { display: flex; flex-direction: column; gap: clamp(22px, 2.6cqw, 40px); min-width: 0; }
.vision {
  margin: 0;
  font-size: clamp(25px, 2.25cqw, 36px); line-height: 1.42;
  color: var(--pale);
  text-shadow: 0 2px 26px color-mix(in srgb, var(--veil) 80%, transparent);
}
.v-line { display: block; }
.w { display: inline-block; }
.vision mark {
  padding: 0 0.26em 0.06em; border-radius: 0.2em;
  background: var(--tint); color: var(--deep); text-shadow: none;
}

.stat { display: flex; flex-direction: column; }
.stat-rule {
  display: block; height: 1px; width: 100%;
  background: color-mix(in srgb, var(--pale) 34%, transparent);
  transform-origin: right center;
}
.stat-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding-top: clamp(16px, 1.8cqw, 24px);
}
.stat-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.stat-ctx { font-size: 13px; line-height: 1.5; color: var(--pale); }
.stat-idx { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.stat-num {
  display: flex; align-items: baseline; gap: 0 0.3em;
  font-size: clamp(46px, 4.5cqw, 72px); line-height: 1.05; color: var(--pale);
}
.num { font-weight: 900; font-variant-numeric: lining-nums tabular-nums; }
.num { flex: 0 0 auto; }
.num-label { flex: 0 1 auto; min-width: 0; font-size: 0.36em; font-weight: 500; line-height: 1.4; max-width: 16em; }

.next {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  background: var(--pale); color: var(--deep); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.35s, transform 0.18s;
}
.next svg { width: 20px; height: 20px; display: block; }
.next:hover, .next:focus-visible { background: var(--tint); }
.next:active { transform: scale(0.93); }

/* Pointer ring (ref: .cth-ring) — hidden until the mouse is over the hero */
.orb {
  position: absolute; left: 0; top: 0; z-index: 20;
  width: 0; height: 0; pointer-events: none;
  opacity: 0; transition: opacity 0.3s; will-change: transform;
}
.orb.is-in { opacity: 1; }
.orb-in {
  position: absolute; left: -56px; top: -56px; width: 112px; height: 112px;
  border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: var(--tint); color: var(--deep);
  transition: transform 0.45s var(--ease-out);
}
.orb-label { font-size: 13.5px; font-weight: 900; line-height: 1.35; transition: opacity 0.25s; }
.orb.is-over .orb-in { transform: scale(0.16); }
.orb.is-over .orb-label { opacity: 0; }
.hero.is-fine, .hero.is-fine a, .hero.is-fine button { cursor: none; }

/* Elements wait for the intro only while JS has marked the page as pending */
html.is-pending [data-anim],
html.is-pending .hero-media { opacity: 0; }

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */
@container hero (max-width: 1199px) {
  .hero-body {
    grid-template-columns: minmax(0, 1fr);
    align-content: end; gap: 34px;
    padding-left: var(--g); padding-right: var(--g);
  }
  .headline { font-size: clamp(64px, 12cqw, 130px); }
  .hero-side { max-width: 560px; }
  .eyebrow { background: color-mix(in srgb, var(--veil) 46%, transparent); }
  .hero-scrim {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--veil) 60%, transparent) 0,
        color-mix(in srgb, var(--veil) 8%, transparent) 20%,
        color-mix(in srgb, var(--veil) 30%, transparent) 46%,
        color-mix(in srgb, var(--veil) 90%, transparent) 100%),
      color-mix(in srgb, var(--veil) 22%, transparent);
  }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@container hero (max-width: 699px) {
  .hero-body { gap: 22px; padding-top: 24px; }
  .eyebrow { padding: 8px 14px 10px; border-radius: 18px; font-size: 14px; }
  .headline { font-size: clamp(50px, 16cqw, 96px); line-height: 1.18; }
  .lead { font-size: 16px; }
  .ctas { width: 100%; flex-direction: column; gap: 10px; margin-top: 22px; }
  .ctas .mag { width: 100%; }
  .ctas .btn { width: 100%; justify-content: space-between; }
  .ctas .btn-ghost { justify-content: center; }
  .hero-side { gap: 16px; }
  .vision { font-size: clamp(21px, 6.2cqw, 27px); line-height: 1.5; }
  .stat-num { font-size: clamp(38px, 11cqw, 52px); }
  .next { width: 46px; height: 46px; }
  .hero-pic { object-position: 42% 50%; }
  .hero-scrim {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--veil) 62%, transparent) 0,
        color-mix(in srgb, var(--veil) 26%, transparent) 16%,
        color-mix(in srgb, var(--veil) 46%, transparent) 46%,
        color-mix(in srgb, var(--veil) 90%, transparent) 100%),
      color-mix(in srgb, var(--veil) 22%, transparent);
  }
}

/* --------------------------------------------------------------------------
   Reduced motion: static, fully visible presentation
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  html.has-loader .loader { display: none; }
  html.is-pending [data-anim], html.is-pending .hero-media { opacity: 1; }
}

/* ==========================================================================
   SHARED — Brand pattern layers
   Uses the original pattern strips from the brand folder. The asset is not a
   seamless tile, so each instance is a single scaled + cropped copy at its
   true proportions.
     .pt-layer--light  purple pattern on light sections
     .pt-layer--dark   white pattern on dark sections
     .pt-layer--image  white pattern over photographs
   Instance size/position via inline custom properties:
     --w (width), --top / --right / --bottom / --left, --o (opacity)
   ========================================================================== */
.pt-layer {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none; user-select: none;
}
.pt {
  position: absolute; display: block;
  width: var(--w, 900px); aspect-ratio: 2400 / 613;
  top: var(--top, auto); right: var(--right, auto); bottom: var(--bottom, auto); left: var(--left, auto);
  background: var(--pt-img) center / 100% 100% no-repeat;
  opacity: var(--o, 0.1);
  /* soften the crop edges so instances feel layered, not pasted */
  -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  -webkit-mask-size: 100% 220%; mask-size: 100% 220%;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.pt-layer--light { --pt-img: url("assets/images/pattern-on-light.png"); }
.pt-layer--dark  { --pt-img: url("assets/images/pattern-on-dark.png"); }
.pt-layer--image { --pt-img: url("assets/images/pattern-on-dark.png"); }

/* Slow drift on a single outer instance per section */
.pt--drift { animation: pt-drift 28s ease-in-out infinite alternate; }
@keyframes pt-drift {
  from { translate: 0 0; }
  to   { translate: -40px 18px; }
}

/* In the hero the layer sits above the photo grade, below the content */
.hero > .pt-layer { z-index: 2; }

@container hero (max-width: 699px) {
  .hero > .pt-layer .pt { width: calc(var(--w, 900px) * 0.55); }
}

/* ==========================================================================
   SECTION — من نحن + المؤشرات (ref: .ctsh)
   ========================================================================== */
.about {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--pale); color: var(--deep);
  container: about / inline-size;
}
.about-wrap {
  position: relative; z-index: 3;
  max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2);
  margin: 0 auto; padding: 112px var(--g);
  display: grid;
  /* RTL grid: column 1 is on the right (text), column 2 on the left (photo, ~40%) */
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(400px, 40%, 600px));
  grid-template-rows: auto 1fr;
  column-gap: clamp(48px, 6.4vw, 112px);
}
.about-head { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; }
.about-body { grid-area: 2 / 1; display: flex; flex-direction: column; min-width: 0; }
.about-fig {
  grid-area: 1 / 2 / 3 / 3; position: relative; margin: 0;
  min-height: 640px; border-radius: 20px; overflow: hidden;
  background: color-mix(in srgb, var(--primary) 12%, var(--pale));
  isolation: isolate;
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--deep) 55%, transparent);
}
.about-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.about-pic {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 47% 50%;
  transition: scale 1.6s var(--ease-out);
}
.about-fig:hover .about-pic { scale: 1.045; }

/* Eyebrow (ref: .ct-eb — dot + label) */
.eb {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--primary);
}
.eb i {
  position: relative; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
}
.eb i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--primary); opacity: 0;
  animation: ping 2.6s ease-out infinite;
}

.about-h {
  margin: 22px 0 0; max-width: 17em;
  font-size: clamp(34px, 3.3vw, 58px); font-weight: 900; line-height: 1.32;
  color: var(--deep); text-wrap: balance;
}
/* Word masks with room for Arabic ascenders, descenders and dots */
.hw { display: inline-block; vertical-align: top; }
.hw-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.1em 0.06em 0.28em; margin: -0.1em -0.06em -0.28em; }
.hw-i { display: inline-block; }
.hl {
  display: inline-block; padding: 0 0.22em 0.06em; border-radius: 0.2em;
  background: var(--tint); color: var(--deep);
}

.about-text {
  margin: clamp(30px, 3.2vw, 48px) 0 0; max-width: 34em;
  font-size: clamp(19px, 1.6vw, 27px); font-weight: 500; line-height: 1.8;
  color: var(--deep); text-wrap: pretty;
}
/* Scroll-lit words (ref: .ctsh.is-scrub) — only when JS has wrapped the words */
.about-text.is-scrub .sw { color: color-mix(in srgb, var(--deep) 42%, var(--pale)); transition: color 0.55s; }
.about-text.is-scrub .sw[data-lit] { color: var(--deep); }
.about-text .caret { background: var(--primary); height: 0.9em; vertical-align: -0.12em; }

.about-cta { margin-top: clamp(26px, 2.6vw, 38px); }
.btn-onlight { background: var(--deep); color: var(--pale); box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--deep) 70%, transparent); }
.btn-onlight::before { background: var(--primary); }
.btn-onlight .btn-arrow { color: var(--pale); }

.about-stats { margin-top: auto; }
.about-rule {
  display: block; height: 1px; margin: clamp(44px, 4.6vw, 72px) 0 26px;
  background: color-mix(in srgb, var(--deep) 26%, transparent);
  transform-origin: right center;
}
.nums {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 2.6vw, 44px); list-style: none; margin: 0; padding: 0;
}
.st { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.st-val {
  font-size: clamp(52px, 4.7vw, 76px); font-weight: 900; line-height: 1;
  color: var(--primary); font-variant-numeric: lining-nums tabular-nums;
}
.st-lab { max-width: 240px; font-size: 15.5px; font-weight: 500; line-height: 1.6; color: color-mix(in srgb, var(--deep) 78%, var(--pale)); }
.about-note {
  margin-top: 22px; padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--deep) 18%, transparent);
  font-size: 13.5px; line-height: 1.5; color: color-mix(in srgb, var(--deep) 70%, var(--pale));
}

/* Hidden only while the section intro is pending (set by JS) */
.about.is-pending [data-a],
.about.is-pending .hw-i { opacity: 0; }

@container about (max-width: 1099px) {
  .about-wrap {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    row-gap: 40px; padding-top: 88px; padding-bottom: 88px;
  }
  .about-head, .about-fig, .about-body { grid-area: auto / 1; }
  .about-fig { min-height: 0; aspect-ratio: 16 / 11; }
  .about-text { margin-top: 0; font-size: clamp(19px, 3vw, 24px); }
}
@container about (max-width: 699px) {
  .about-wrap { row-gap: 28px; padding-top: 64px; padding-bottom: 64px; }
  .about-h { margin-top: 16px; font-size: clamp(28px, 8.2vw, 36px); line-height: 1.38; }
  .about-fig { aspect-ratio: 4 / 5; border-radius: 16px; }
  .about-pic { object-position: 46% 50%; }
  .about-text { font-size: 18px; line-height: 1.85; }
  .about-cta .mag, .about-cta .btn { width: 100%; justify-content: space-between; }
  .about-rule { margin: 36px 0 0; }
  .nums { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .st {
    flex-direction: row; align-items: center; gap: 18px; padding: 18px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--deep) 14%, transparent);
  }
  .st-val { flex: 0 0 auto; min-width: 1.6em; font-size: clamp(44px, 13vw, 54px); }
  .st-lab { max-width: none; font-size: 15px; }
  .about .pt { width: calc(var(--w, 900px) * 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .about.is-pending [data-a], .about.is-pending .hw-i { opacity: 1; }
  .about-pic { transition: none; }
}

/* ==========================================================================
   SECTION — هويتنا الاستراتيجية: رؤيتنا ورسالتنا (ref: Millwright .mwpr)
   Base = readable vertical presentation (mobile, reduced motion, no JS).
   .vmx.is-pin → sticky full-screen stage, mirrored for Arabic: fixed intro on the RIGHT, panels on the
   LEFT that travel rightwards with vertical scroll (the next panel enters from the left, the rail fills
   from right to left).
   ========================================================================== */
.vmx {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, var(--deep), var(--night) 60%);
  color: var(--pale);
  --e-io: cubic-bezier(0.76, 0, 0.24, 1);
}
.vmx-stage { position: relative; overflow: hidden; container-type: inline-size; }
.vmx .pt-layer { z-index: 1; }

.eb--dark { color: var(--tint); }
.eb--dark i, .eb--dark i::after { background: var(--tint); box-shadow: 0 0 0 1.5px var(--tint); }
.eb--dark i::after { background: none; }

/* Intro */
.vmx-intro { position: relative; z-index: 3; }
.vmx-intro-in {
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2.6vh, 28px);
  padding: 96px var(--g) 56px;
}
.vmx-h { margin: 0; font-size: clamp(52px, 6.2vw, 112px); font-weight: 900; line-height: 1.18; color: var(--pale); }
.vmx-lead { max-width: 22em; font-size: clamp(18px, 1.45vw, 23px); font-weight: 500; line-height: 1.7; color: color-mix(in srgb, var(--pale) 78%, var(--tint)); }
.vmx-cta { margin-top: 6px; }

/* Panels */
.vmx-view { position: relative; z-index: 2; }
.vmx-track { list-style: none; margin: 0; padding: 0 var(--g) 72px; display: grid; gap: 20px; }
.vmx-slide {
  position: relative; display: flex; align-items: flex-end;
  min-height: 560px; overflow: hidden; border-radius: 22px;
  padding: 0 clamp(24px, 3.2vw, 56px) clamp(32px, 4vw, 56px);
  background: var(--deep);
}
.vmx-pic {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  will-change: transform;
}
/* ref .mwpr-veil: deep fade from the bottom + light fade from the top, in brand purple */
.vmx-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--night) 96%, transparent) 0,
      color-mix(in srgb, var(--night) 88%, transparent) 30%,
      color-mix(in srgb, var(--deep) 66%, transparent) 50%,
      color-mix(in srgb, var(--deep) 22%, transparent) 72%,
      transparent 88%),
    linear-gradient(180deg, color-mix(in srgb, var(--night) 62%, transparent) 0, transparent 26%),
    color-mix(in srgb, var(--deep) 26%, transparent);
}
/* ref .mwpr-shade: inactive panels sit in shadow */
.vmx-shade { position: absolute; inset: 0; background: var(--night); opacity: 0; pointer-events: none; }
.vmx-slide-pt { position: absolute; inset: 0; z-index: 1; }

/* Oversized outlined number (ref .mwpr-big) */
.vmx-big {
  position: absolute; z-index: 2; left: clamp(22px, 2.8vw, 48px); top: clamp(28px, 4vw, 56px);
  font-size: clamp(140px, 17vw, 300px); font-weight: 900; line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--pale) 78%, transparent);
  direction: ltr; pointer-events: none; user-select: none; will-change: transform;
}
.vmx-txt { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; max-width: 640px; margin-inline-start: 0; }
.vmx-meta {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  color: var(--pale); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 34%, transparent);
  font-variant-numeric: tabular-nums;
}
.vmx-meta b { font-weight: 900; color: var(--tint); }
.vmx-sh { margin: 18px 0 0; font-size: clamp(44px, 4.4vw, 78px); font-weight: 900; line-height: 1.2; color: var(--pale); }
.vmx-p {
  margin-top: 14px; max-width: 34em;
  font-size: clamp(18px, 1.45vw, 23px); font-weight: 500; line-height: 1.8; color: var(--pale); text-wrap: pretty;
}

/* Rail (ref .mwpr-rail) — hidden in the stacked presentation */
.vmx-rail { display: none; }

/* ---------- Pinned horizontal mode ---------- */
.vmx.is-pin .vmx-stage { position: sticky; top: 0; height: 100vh; min-height: 640px; }
.vmx.is-pin .vmx-intro {
  position: absolute; top: 0; bottom: 0; right: 0; width: 39cqw;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.vmx.is-pin .vmx-intro-in { padding: 120px var(--g) clamp(150px, 21vh, 200px) clamp(36px, 3.6vw, 64px); }
/* RTL view + RTL flex track: panel 01 sits at the right edge, the others line up to its left */
.vmx.is-pin .vmx-view { position: absolute; top: 0; bottom: 0; left: 0; right: 39cqw; overflow: hidden; direction: rtl; }
.vmx.is-pin .vmx-track {
  direction: rtl; display: flex; width: max-content; height: 100%; padding: 0; gap: 0;
  will-change: transform;
}
.vmx.is-pin .vmx-slide {
  direction: rtl; flex: 0 0 auto; width: 61cqw; height: 100%; min-height: 0; border-radius: 0;
  padding: 0 clamp(28px, 3.2vw, 56px) clamp(150px, 21vh, 200px);
  border-right: 1px solid color-mix(in srgb, var(--pale) 18%, transparent);
}
.vmx.is-pin .vmx-big { top: clamp(104px, 13vh, 128px); }

.vmx.is-pin .vmx-rail {
  display: flex; justify-content: space-between; direction: rtl;
  position: absolute; z-index: 4; bottom: 0; left: 0; right: 39cqw;
  padding: 0 clamp(28px, 3.2vw, 56px) clamp(14px, 2.6vh, 26px) var(--g);
}
.vmx-rail::before {
  content: ""; position: absolute; inset: -56px 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, color-mix(in srgb, var(--night) 96%, transparent) 0, color-mix(in srgb, var(--night) 88%, transparent) 62%, transparent 100%);
}
.vmx-line {
  position: absolute; top: 0; right: clamp(28px, 3.2vw, 56px); left: var(--g); height: 2px;
  background: color-mix(in srgb, var(--pale) 22%, transparent); overflow: hidden;
}
/* fills from the right (reading start) */
.vmx-fill { position: absolute; inset: 0; background: var(--tint); transform-origin: 100% 50%; transform: scaleX(0); will-change: transform; }
.vmx-stop {
  position: relative; direction: rtl;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-height: 72px; padding: 18px 0 8px; border-radius: 6px;
  text-decoration: none; color: color-mix(in srgb, var(--pale) 55%, transparent);
  transition: color 0.35s;
}
.vmx-stop:last-of-type { align-items: flex-end; }
/* square markers sitting on the line */
.vmx-stop::before {
  content: ""; position: absolute; top: -3px; width: 8px; height: 8px;
  background: var(--night); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pale) 55%, transparent);
  transition: background-color 0.35s, box-shadow 0.35s;
}
/* (the rail's first child is the line span, so stops are matched by type) — start = right, end = left */
.vmx-stop:first-of-type::before { inset-inline-start: 0; }
.vmx-stop:last-of-type::before { inset-inline-end: 0; }
.vmx-stop:hover, .vmx-stop.is-on, .vmx-stop.is-done { color: var(--pale); }
.vmx-stop.is-done::before { background: var(--pale); box-shadow: inset 0 0 0 2px var(--pale); }
.vmx-stop.is-on::before { background: var(--tint); box-shadow: inset 0 0 0 2px var(--tint), 0 0 0 4px color-mix(in srgb, var(--tint) 25%, transparent); }
.vmx-day {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px;
  font-size: 12.5px; font-weight: 900; line-height: 1; letter-spacing: 0.08em;
  transition: background-color 0.35s, color 0.35s;
}
.vmx-stop.is-on .vmx-day { background: var(--tint); color: var(--deep); }
.vmx-nm { font-size: 16px; font-weight: 900; line-height: 1.3; }
/* Rails with more than two stops: the middle markers sit at each stop's centre */
.vmx-stop:not(:first-of-type):not(:last-of-type) { align-items: center; }
.vmx-stop:not(:first-of-type):not(:last-of-type)::before { left: calc(50% - 4px); }

/* ---------- Services variant (ماذا نقدم لجمعيتك؟ — four slides) ---------- */
.vmx--svc { background: linear-gradient(180deg, var(--deep), var(--night) 70%); }
.vmx--svc .vmx-h { font-size: clamp(46px, 4.9vw, 92px); line-height: 1.22; }
.vmx--svc .vmx-sh { font-size: clamp(34px, 3.3vw, 60px); line-height: 1.3; max-width: 13em; text-wrap: balance; }
.vmx--svc .vmx-p { max-width: 30em; }
/* Branded visual for slides without an approved photograph: emblem + pattern on the brand purples */
.vmx-brand {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 70% 30%, color-mix(in srgb, var(--primary) 85%, transparent), transparent 70%),
    linear-gradient(160deg, var(--primary), var(--deep) 70%);
  will-change: transform;
}
.vmx-brand .pt-layer { z-index: 0; }
.vmx-brand-mark {
  position: absolute; top: 10%; right: -6%; width: min(46%, 560px); height: auto; max-width: none;
  opacity: 0.16;
}
/* Heading words (mask rise, ref .mwpr-ti) */
.vmx-h .hw-m { padding: 0.1em 0.06em 0.3em; margin: -0.1em -0.06em -0.3em; }

.vmx.is-pending [data-vmx-in], .vmx.is-pending .vmx-h .hw-i { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .vmx.is-pending [data-vmx-in], .vmx.is-pending .vmx-h .hw-i { opacity: 1; }
}

/* ==========================================================================
   SECTION — أدوارنا الرئيسية (ref: GrowthLab "Our Process" cards)
   Base = static grid. .roles.is-pin → sticky stage; cards 2–3 rise from
   below the viewport into their slots as the visitor scrolls.
   ========================================================================== */
.roles {
  position: relative; isolation: isolate;
  background: color-mix(in srgb, var(--pale) 45%, #fff);
  color: var(--deep);
  container: roles / inline-size;
}
.roles-stage { position: relative; overflow: hidden; }
.roles-wrap {
  position: relative; z-index: 3;
  max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2);
  margin: 0 auto; padding: 120px var(--g);
}
.roles-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  margin-bottom: clamp(36px, 4vw, 64px);
}
.roles-h {
  margin: 0; font-size: clamp(44px, 5.4vw, 92px); font-weight: 900; line-height: 1.15; color: var(--deep);
}
.roles-sub {
  max-width: 30em; padding-bottom: 0.6em;
  font-size: clamp(16px, 1.25vw, 20px); font-weight: 500; line-height: 1.75;
  color: color-mix(in srgb, var(--deep) 62%, var(--pale));
}

.roles-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 26px);
}
.rcard { position: relative; min-width: 0; will-change: transform; }
.rcard-in {
  position: relative; height: clamp(440px, 58svh, 620px);
  border-radius: 24px; overflow: hidden; isolation: isolate;
  background: var(--primary); color: #fff;
  box-shadow: 0 30px 60px -38px color-mix(in srgb, var(--deep) 70%, transparent);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
/* Purple duotone treatment: greyscale photo, primary multiply, deep fade for the text */
.rcard-img {
  position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  filter: grayscale(1) contrast(1.12) brightness(1.02);
  transition: transform 1.2s var(--ease-out);
}
.rcard-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 38%, color-mix(in srgb, var(--deep) 86%, transparent) 100%),
    linear-gradient(0deg, var(--primary), var(--primary));
  background-blend-mode: normal, normal;
  mix-blend-mode: multiply; opacity: 0.92;
  transition: opacity 0.6s var(--ease-out);
}
.rcard-in::after { /* soft brand glow so the duotone isn't flat */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 30% 10%, color-mix(in srgb, var(--tint) 30%, transparent), transparent 70%);
  mix-blend-mode: screen;
}
.rcard-num {
  position: absolute; z-index: 2; top: clamp(22px, 2.4vw, 36px); left: clamp(22px, 2.4vw, 36px);
  font-size: clamp(84px, 7.6vw, 140px); font-weight: 900; line-height: 1;
  color: #fff; font-variant-numeric: lining-nums; direction: ltr;
  text-shadow: 0 10px 40px color-mix(in srgb, var(--deep) 40%, transparent);
}
.rcard-txt {
  position: absolute; z-index: 2; right: clamp(22px, 2.4vw, 36px); left: clamp(22px, 2.4vw, 36px); bottom: clamp(24px, 2.6vw, 38px);
}
.rcard-t { margin: 0; font-size: clamp(30px, 2.6vw, 44px); font-weight: 900; line-height: 1.3; color: #fff; }
.rcard-s { margin-top: 8px; font-size: clamp(16px, 1.2vw, 20px); font-weight: 500; line-height: 1.6; color: color-mix(in srgb, #fff 88%, var(--tint)); }

@media (hover: hover) {
  .rcard-in:hover { transform: translateY(-8px); box-shadow: 0 40px 70px -36px color-mix(in srgb, var(--deep) 80%, transparent); }
  .rcard-in:hover .rcard-img { transform: scale(1.05) translateY(-2%); }
  .rcard-in:hover .rcard-tint { opacity: 1; }
}

/* Pinned stage (desktop, motion allowed) */
.roles.is-pin { height: 240svh; }
.roles.is-pin .roles-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.roles.is-pin .roles-wrap { width: 100%; padding-top: calc(var(--navh) * 0.6); padding-bottom: 0; }
.roles.is-pin .rcard-in { height: min(56svh, 600px); }

.roles.is-pending [data-r-in], .roles.is-pending [data-r-card] { opacity: 0; }

/* Tablet: 2 + 1 */
@container roles (max-width: 1099px) {
  .roles-wrap { padding-top: 96px; padding-bottom: 96px; }
  .roles-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .roles-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rcard:last-child { grid-column: 1 / -1; }
  .rcard:last-child .rcard-in { height: 380px; }
}
/* Mobile: stacked */
@container roles (max-width: 699px) {
  .roles-wrap { padding-top: 72px; padding-bottom: 72px; }
  .roles-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rcard-in, .rcard:last-child .rcard-in { height: 420px; }
  .rcard-num { font-size: 96px; }
  .roles .pt { width: calc(var(--w, 900px) * 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .roles.is-pending [data-r-in], .roles.is-pending [data-r-card] { opacity: 1; }
  .rcard-in, .rcard-img, .rcard-tint { transition: none; }
}

/* Homepage hero photo: keep the handshake in view, left of the copy */
.hero--photo .hero-pic { object-position: 42% 46%; }
@container hero (max-width: 699px) { .hero--photo .hero-pic { object-position: 47% 50%; } }

/* ==========================================================================
   HOME — Hero brand composition (no photograph)
   The official X / LinkedIn header language: brand purple, the committee
   pattern across the field, and the emblem as an oversized cropped mark.
   ========================================================================== */
.hero--brand .hero-placeholder {
  background:
    radial-gradient(ellipse 55% 70% at 22% 38%, color-mix(in srgb, var(--primary) 92%, transparent), transparent 72%),
    radial-gradient(ellipse 50% 50% at 90% 100%, color-mix(in srgb, var(--primary) 40%, transparent), transparent 70%),
    linear-gradient(180deg, var(--deep), var(--night));
}
.hero-mark {
  position: absolute; top: 50%; left: clamp(-220px, -9vw, -80px);
  width: min(62vw, 880px); height: auto; max-width: none;
  translate: 0 -54%; opacity: 0.13;
}
.hero--brand .hero-scrim {
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--veil) 52%, transparent) 0, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--veil) 40%, transparent) 0, transparent 24%, transparent 60%, color-mix(in srgb, var(--veil) 72%, transparent) 100%);
}
@container hero (max-width: 1199px) {
  .hero-mark { top: 32%; left: auto; right: -24%; width: min(110vw, 760px); }
  .hero--brand .hero-scrim {
    background: linear-gradient(180deg, color-mix(in srgb, var(--veil) 40%, transparent) 0, transparent 30%, color-mix(in srgb, var(--veil) 78%, transparent) 100%);
  }
}

/* ==========================================================================
   SHARED — section wrapper and headings on the new blocks
   ========================================================================== */
.sec-wrap {
  position: relative; z-index: 3;
  max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2);
  margin: 0 auto; padding: 120px var(--g);
}
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  margin-bottom: clamp(36px, 4vw, 64px);
}
.sec-h { margin: 0; font-size: clamp(42px, 5vw, 86px); font-weight: 900; line-height: 1.15; }
@media (max-width: 1099px) { .sec-wrap { padding-top: 96px; padding-bottom: 96px; } }
@media (max-width: 699px) {
  .sec-wrap { padding-top: 72px; padding-bottom: 72px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .sec-head .mag, .sec-head .btn { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   SECTION — اللجنة بالأرقام (ref: Citeable .cten — values read from its live CSS)
   Editorial copy column + a tall photo tile with an overlapping caption card, mirrored for Arabic:
   heading and three figures on the RIGHT, photo with the 389 card on the LEFT. Not pinned.
   ========================================================================== */
.cnt { position: relative; color: var(--deep); --c-hair: color-mix(in srgb, var(--primary) 22%, var(--pale)); }
.cnt-card {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--panel-r, 32px); background: var(--pale);
}
.cnt-in {
  position: relative; z-index: 3;
  max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); margin: 0 auto;
  padding: clamp(48px, 4.4vw, 72px) clamp(24px, 5vw, 96px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(400px, 44%, 640px));
  gap: clamp(40px, 5.6vw, 104px); align-items: stretch;
}

/* Copy column (first = right) */
.cnt-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cnt-eb { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--primary); }
.cnt-eb i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.cnt-eb i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--primary); opacity: 0; animation: ping 2.6s ease-out infinite; }
.cnt-h { margin: 18px 0 0; font-size: clamp(38px, 4vw, 66px); font-weight: 900; line-height: 1.2; color: var(--deep); }
.cnt-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.06em 0.2em; margin: -0.06em -0.06em -0.2em; }
.cnt-hi { display: inline-block; }

/* three figures, stacked editorially with thin rules (ref .cten-list) */
.cnt-list { width: 100%; margin: auto 0 0; padding-top: clamp(28px, 2.8vw, 44px); }
.cnt-row {
  position: relative; display: flex; align-items: baseline; gap: clamp(16px, 1.8vw, 28px);
  padding: clamp(14px, 1.3vw, 20px) 0;
  transition: translate 0.45s var(--ease-out);
}
.cnt-line { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--c-hair); transform-origin: right center; }
.cnt-val {
  display: grid; flex: 0 0 auto; min-width: 2.3ch; margin: 0;
  font-size: clamp(58px, 5.5vw, 92px); font-weight: 900; line-height: 0.95;
  color: var(--primary); font-variant-numeric: lining-nums tabular-nums;
  transition: color 0.4s;
}
.cnt-ghost, .cnt-live { grid-area: 1 / 1; }
.cnt-ghost { visibility: hidden; }
.cnt-lab { margin: 0; font-size: clamp(18px, 1.4vw, 22px); font-weight: 500; line-height: 1.5; color: var(--deep); }
@media (hover: hover) {
  .cnt-row:hover { translate: -4px 0; }
  .cnt-row:hover .cnt-val { color: var(--deep); }
}

/* Photo tile (ref .cten-tile) with the overlapping caption card (ref .cten-cap) */
.cnt-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(440px, 36vw, 560px); margin: 0; padding: 14px;
  border-radius: 20px; overflow: hidden; isolation: isolate; background: var(--deep);
}
.cnt-pic {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 54% 30%;
}
/* subtle purple grade, deeper towards the bottom where the card sits */
.cnt-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--deep) 18%, transparent) 0, color-mix(in srgb, var(--deep) 8%, transparent) 40%, color-mix(in srgb, var(--deep) 72%, transparent) 100%),
    color-mix(in srgb, var(--primary) 14%, transparent);
  mix-blend-mode: multiply;
}
.cnt-tile-pt { z-index: 1; }
.cnt-cap {
  position: relative; z-index: 2; margin: 0;
  padding: 22px 24px 24px; border-radius: 14px;
  background: color-mix(in srgb, #fff 92%, var(--pale));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent), 0 18px 40px -24px color-mix(in srgb, var(--deep) 60%, transparent);
}
.cnt-val--main { font-size: clamp(72px, 7vw, 128px); line-height: 0.92; color: var(--deep); }
.cnt-lab--main { margin-top: 10px; font-size: clamp(18px, 1.35vw, 21px); color: color-mix(in srgb, var(--deep) 84%, #fff); }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Hidden only while the entrance is pending (set by JS) */
.cnt.is-pending [data-c] { opacity: 0; }

/* Tablet: stacked (heading → photo card → figures), photo keeps a landscape frame */
@media (max-width: 1099px) {
  .cnt-in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cnt-copy { display: contents; }
  .cnt-eb { order: 1; }
  .cnt-h { order: 2; margin-top: -18px; }
  .cnt-tile { order: 3; min-height: 0; aspect-ratio: 16 / 11; }
  .cnt-list { order: 4; margin-top: -8px; padding-top: 0; }
  .cnt-cap { max-width: 460px; }
}
@media (max-width: 699px) {
  .cnt-in { gap: 28px; padding: 48px 20px; }
  .cnt-h { margin-top: -10px; font-size: clamp(34px, 10vw, 44px); }
  .cnt-tile { aspect-ratio: 4 / 5; padding: 10px; border-radius: 16px; }
  .cnt-pic { object-position: 56% 30%; }
  .cnt-cap { padding: 16px 18px 18px; border-radius: 12px; }
  .cnt-val--main { font-size: clamp(60px, 18vw, 80px); }
  .cnt-val { font-size: clamp(50px, 14vw, 64px); }
  .cnt-lab { font-size: 17px; }
  .cnt .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .cnt.is-pending [data-c] { opacity: 1; }
  .cnt-row, .cnt-val { transition: none; }
}

/* ==========================================================================
   SECTION — آخر الأخبار
   ========================================================================== */
/* Card architecture follows the Citeable services cards (8px inset 4:3 image, meta row, title).
   Colours are brand-derived: lavender section, white cards with a lavender hairline and a restrained shadow. */
.news {
  position: relative; isolation: isolate; overflow: hidden;
  background: #E9E2F9; color: var(--deep);
  --n-plate: #FFFFFF;
  --n-hair: #D4C1EE;
  --n-hair2: color-mix(in srgb, var(--primary) 55%, transparent);
  --n-shadow: 0 10px 28px rgba(46, 16, 101, 0.07);
  --n-muted: color-mix(in srgb, var(--deep) 78%, #fff);
  --n-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* compact inside: the separation from neighbours comes from --section-gap, not from this padding */
.news .sec-wrap {
  max-width: 1680px;
  padding: clamp(48px, 7vh, 72px) clamp(20px, 6vw, 112px) clamp(56px, 8vh, 80px);
}

/* Heading (ref: Citeable — label, display title with one highlighted word, lead + pill opposite) */
.news-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  align-items: end; gap: 28px clamp(40px, 6vw, 104px);
  margin-bottom: clamp(36px, 4vw, 56px);
}
.news-head-a { min-width: 0; }
.news-eb {
  display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.02em; color: var(--primary);
}
.news-eb i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.news-h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.06em 0.2em; margin: 0;
  font-size: clamp(36px, 3.6vw, 58px); font-weight: 900; line-height: 1.3; color: var(--deep);
}
/* Whole-word masks with room for Arabic ascenders and descenders */
.news-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.04em 0.2em; margin: -0.06em -0.04em -0.2em; }
.news-w { display: inline-block; }
.news-hl { position: relative; display: inline-block; padding: 0.02em 0.22em 0.08em; color: #2E1065; }
.news-hl-bg {
  position: absolute; inset: 0; z-index: -1; border-radius: 15px;
  background: #CBB4F3;
  transform-origin: right center;
}
.news-hl .news-m { position: relative; }
/* LEFT block: description and button sit against the left edge of the content area (= the cards grid's left edge) */
.news-head-b { display: flex; flex-direction: column; align-items: flex-end; justify-self: end; gap: 22px; }
.news-lead { font-size: 17px; line-height: 1.6; color: var(--n-muted); }

/* Pill (ref: .ctsv-btn — plate pill with hairline, accent disc that floods on hover) */
.btn-soft { background: var(--n-plate, #F7F8FC); color: var(--deep); box-shadow: inset 0 0 0 1px var(--n-hair, rgba(46, 16, 101, 0.13)); }
.btn-soft::before { background: color-mix(in srgb, var(--primary) 24%, var(--pale)); }

/* Cards — three per row; RTL grid, so card 01 sits on the right */
.news-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  list-style: none; margin: 0; padding: 0;
}
.news-item { display: flex; min-width: 0; }
.ncard {
  display: flex; flex-direction: column; width: 100%;
  padding: 8px; border-radius: 22px; background: var(--n-plate); color: var(--deep);
  box-shadow: inset 0 0 0 1px var(--n-hair), var(--n-shadow);
  transition: box-shadow 0.5s var(--n-ease), background-color 0.5s var(--n-ease), translate 0.5s var(--n-ease);
}
/* 4:3 like the reference, capped by viewport height so the titles stay on screen on shorter desktops */
.ncard-media {
  position: relative; display: block; overflow: hidden; isolation: isolate; flex: 0 0 auto;
  aspect-ratio: 4 / 3; max-height: max(220px, 33vh); width: 100%;
  border-radius: 14px; background: var(--deep);
}
.ncard-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  transition: scale 1.3s var(--n-ease); user-select: none;
}
/* Branded visuals for items without an approved photograph */
.ncard-media--brand { background: radial-gradient(ellipse 70% 80% at 30% 20%, var(--primary), var(--deep) 80%); }
.ncard-media--light { background: radial-gradient(ellipse 80% 90% at 70% 20%, #fff, var(--pale) 55%, color-mix(in srgb, var(--primary) 16%, var(--pale))); }
.ncard-media--brand .pt-layer { z-index: 0; }
.ncard-mark { inset: 50% auto auto 50%; width: 30%; height: auto; translate: -50% -50%; object-fit: contain; }

.ncard-body { display: flex; flex-direction: column; flex: 1 1 0%; padding: 20px 16px 14px; }
.ncard-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0;
  font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--n-muted);
}
.ncard-meta b { font-weight: 900; letter-spacing: 0.1em; color: var(--primary); }
.ncard-t {
  margin: 14px 0 0; font-size: clamp(21px, 1.7vw, 29px); font-weight: 900; line-height: 1.45;
  color: var(--deep); text-wrap: pretty; transition: color 0.5s var(--n-ease);
}

/* Bottom row (ref .ctsv-go): label + round arrow pinned to the card's bottom edge */
.ncard-go {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 22px;
  font-size: 14.5px; font-weight: 900; line-height: 1; color: var(--deep);
}
.ncard-go i {
  display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  color: var(--deep); box-shadow: inset 0 0 0 1px var(--n-hair2);
  transition: background-color 0.4s, box-shadow 0.4s;
}
/* the supplied chevron points to the reading end; tilted 45° at rest, straight on hover (ref: rotate(-45deg) → none, mirrored) */
.ncard-go svg { display: block; width: 16px; height: 16px; transform: rotate(45deg); transition: transform 0.5s var(--n-ease); }

/* Active state (ref .ctsv-card:hover / .is-on): firmer hairline + long soft shadow, image eases to 1.05 over 1.3s,
   arrow disc fills and straightens (no text over the image) */
.ncard:hover, .ncard.is-on {
  background: var(--pale);
  box-shadow: inset 0 0 0 1px var(--n-hair2), 0 24px 48px -28px color-mix(in srgb, var(--deep) 40%, transparent);
}
.ncard.is-on .ncard-img { scale: 1.05; }
.ncard:hover .ncard-go i, .ncard.is-on .ncard-go i { background: var(--tint); box-shadow: inset 0 0 0 1px var(--tint); }
.ncard:hover .ncard-go svg, .ncard.is-on .ncard-go svg { transform: none; }

/* Hidden only while the entrance is pending (set by JS) */
.news.is-pending [data-n] { opacity: 0; }

/* Tablet (ref .is-t): heading stacks, two columns, the third card centred on its own row */
@media (max-width: 1099px) {
  .news .sec-wrap { padding-top: 64px; padding-bottom: 64px; }
  .news-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; }
  .news-head-b { max-width: 560px; align-items: flex-start; justify-self: stretch; }
  .news-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .news-item:last-child { grid-column: 1 / -1; justify-self: center; width: calc((100% - 16px) / 2); }
  .ncard-media { max-height: none; }
}
/* Mobile (ref .is-p): one column, 16:10 image */
@media (max-width: 699px) {
  .news .sec-wrap { padding-top: 48px; padding-bottom: 48px; }
  .news-h { font-size: clamp(34px, 10vw, 42px); }
  .news-lead { font-size: 16px; }
  .news-head-b .mag, .news-head-b .btn { width: 100%; justify-content: space-between; }
  .news-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .news-item:last-child { width: auto; justify-self: stretch; }
  .ncard { border-radius: 18px; }
  .ncard-media { aspect-ratio: 16 / 10; border-radius: 11px; }
  .ncard-body { padding: 18px 10px 10px; }
  .ncard-t { font-size: 22px; }
  .news .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .news.is-pending [data-n] { opacity: 1; }
  .ncard, .ncard-img, .ncard-go i, .ncard-go svg { transition: none !important; }
  .ncard.is-on .ncard-img { scale: 1; }
}

/* ==========================================================================
   SECTION — العضوية (ref: Citeable .ctct — values read from its live CSS)
   Photo under a deep-purple veil; mirrored for Arabic: editorial copy on the RIGHT, glass form card on the LEFT.
   ========================================================================== */
.mbr {
  --m-veil: color-mix(in srgb, var(--night) 86%, #000);
  --m-iris: var(--tint);
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--night); color: var(--pale);
}
.mbr-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mbr-pic {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block;
  object-fit: cover; object-position: 50% 42%;
  /* the source photo is a bright white room; pulled down to a night-like key so the glass card reads as glass */
  filter: brightness(0.62) contrast(1.12) saturate(1.1);
  scale: 1.05; transition: scale 2.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mbr.is-on .mbr-pic { scale: 1; }
/* brand grade over the photograph, then the reference veil, mirrored (dark on the copy side = right, top and bottom) */
.mbr-tint { position: absolute; inset: 0; background: var(--deep); mix-blend-mode: color; opacity: 0.7; }
.mbr-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--m-veil) 62%, transparent) 0, color-mix(in srgb, var(--m-veil) 44%, transparent) 44%, color-mix(in srgb, var(--m-veil) 6%, transparent) 78%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--m-veil) 70%, transparent) 0, color-mix(in srgb, var(--m-veil) 10%, transparent) 30%, color-mix(in srgb, var(--m-veil) 16%, transparent) 60%, color-mix(in srgb, var(--m-veil) 72%, transparent) 100%),
    color-mix(in srgb, var(--m-veil) 40%, transparent);
}
.mbr > .pt-layer { z-index: 1; }

.mbr-wrap {
  position: relative; z-index: 2;
  max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); margin: 0 auto;
  /* equal space above and below the form card */
  padding: clamp(88px, 7.6vw, 136px) var(--g);
}
/* RTL grid: copy in the first column (right), form card in the second (left); both centred vertically */
.mbr-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(420px, 37%, 560px));
  gap: clamp(40px, 6vw, 112px); align-items: center;
}

/* the copy block hugs the right edge, mirroring the reference's left-aligned copy */
.mbr-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; min-width: 0; justify-self: start; width: 100%; max-width: 760px; }
.mbr-eb { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--pale); }
.mbr-dot { position: relative; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--m-iris); }
.mbr-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--m-iris); opacity: 0; animation: ping 2.6s ease-out infinite; }
.mbr-h { margin: 0; font-size: clamp(44px, 4.8vw, 86px); font-weight: 900; line-height: 1.22; color: var(--pale); }
/* each line is a mask; the line rises as one piece (Arabic shaping stays intact) */
.mbr-l { display: block; overflow: hidden; padding: 0.06em 0.06em 0.18em; margin: -0.06em -0.06em -0.18em; }
.mbr-i { display: inline-block; }
.mbr-h mark {
  display: inline; padding: 0 0.22em 0.06em; border-radius: 0.2em;
  background: var(--m-iris); color: var(--deep);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.mbr-lead { max-width: 31em; font-size: clamp(18px, 1.3vw, 21px); line-height: 1.75; color: var(--pale); }

/* Form card (ref .ctct-form): frosted dark glass — the photo shows through, blurred, with a faint top sheen */
.mbr-form {
  display: grid; gap: 30px; margin: 0; min-width: 0;
  padding: clamp(24px, 2.4vw, 36px); border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pale) 7%, transparent), transparent 42%),
    color-mix(in srgb, var(--m-veil) 62%, transparent);
  -webkit-backdrop-filter: blur(26px) saturate(1.3); backdrop-filter: blur(26px) saturate(1.3);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 22%, transparent), 0 30px 80px -40px #000;
}
.mbr-set { display: grid; gap: 13px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mbr-set > legend.mbr-lbl { margin-bottom: 13px; }   /* a legend is not a grid item: give it the same 13px as the other label */
.mbr-lbl { display: flex; align-items: center; gap: 9px; padding: 0; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--pale); }
.mbr-lbl b { font-weight: 900; letter-spacing: 0.06em; color: var(--m-iris); }
.mbr-lbl span { color: color-mix(in srgb, var(--pale) 55%, transparent); }
.mbr-field {
  box-sizing: border-box; display: block; width: 100%; height: 66px; margin: 0;
  padding: 0 22px 3px; border: 0; border-radius: 18px;
  font: 900 clamp(20px, 1.6vw, 24px)/1.2 var(--font); color: var(--pale); caret-color: var(--m-iris);
  background: color-mix(in srgb, var(--pale) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 38%, transparent);
  appearance: none; transition: background-color 0.3s, box-shadow 0.3s;
}
.mbr-field::placeholder { font-weight: 500; color: color-mix(in srgb, var(--pale) 72%, transparent); opacity: 1; }
.mbr-field:hover { background: color-mix(in srgb, var(--pale) 13%, transparent); }
.mbr-field:focus { outline: none; background: color-mix(in srgb, var(--pale) 13%, transparent); box-shadow: inset 0 0 0 2px var(--m-iris); }
.mbr-field:-webkit-autofill { -webkit-text-fill-color: var(--pale); transition: background-color 99999s; }

/* Category pills (ref .ctct-chip): real radios, a check disc grows in when selected */
.mbr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mbr-chip {
  position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px;
  border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer;
  color: var(--pale); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 40%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.mbr-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mbr-chip i {
  display: grid; place-items: center; flex: 0 0 auto; width: 0; height: 18px; border-radius: 50%; overflow: hidden;
  background: var(--pale); color: var(--primary);
  transition: width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mbr-chip i svg { width: 12px; height: 12px; flex: 0 0 auto; }
@media (hover: hover) {
  .mbr-chip:hover { background: color-mix(in srgb, var(--pale) 12%, transparent); box-shadow: inset 0 0 0 1px var(--pale); }
}
.mbr-chip:has(input:checked), .mbr-chip:has(input:checked):hover {
  background: var(--primary); color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-iris) 70%, transparent);
}
.mbr-chip:has(input:checked) i { width: 18px; margin-inline-end: 9px; }
.mbr-chip:has(input:focus-visible) { outline: 3px solid var(--pale); outline-offset: 2px; }

/* Actions (ref .ctct-go) */
.mbr-go { display: grid; gap: 18px; padding-top: 30px; border-top: 1px solid color-mix(in srgb, var(--pale) 24%, transparent); }
.mbr-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.mbr-btn {
  position: relative; box-sizing: border-box; display: inline-flex; align-items: center;
  height: 56px; margin: 0; border: 0; border-radius: 999px; background: none;
  font: 900 15px/1 var(--font); text-decoration: none; white-space: nowrap; cursor: pointer;
  appearance: none; -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s, background-color 0.4s, box-shadow 0.4s, color 0.4s;
}
.mbr-btn:active { transform: scale(0.965); transition-duration: 0.06s; }
/* when the two labels can't share a row, each button fills it instead of leaving a ragged edge */
.mbr-btns .mbr-btn { flex: 1 1 auto; }
.mbr-btn-p { justify-content: space-between; }
.mbr-btn-g { justify-content: center; }
.mbr-btn-l { position: relative; z-index: 1; padding-bottom: 2px; }
/* primary: pale pill, lavender disc at the reading end that floods on hover */
.mbr-btn-p { gap: 14px; padding: 0 24px 0 8px; background: var(--pale); color: var(--deep); overflow: hidden; isolation: isolate; }
.mbr-btn-p::before {
  content: ""; position: absolute; inset: 0; z-index: 0; background: var(--m-iris);
  clip-path: circle(20px at 28px 50%); transition: clip-path 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mbr-btn-p:hover::before, .mbr-btn-p:focus-visible::before { clip-path: circle(130% at 28px 50%); }
.mbr-btn-a { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; color: var(--deep); }
.mbr-btn-a svg { display: block; width: 16px; height: 16px; transform: rotate(45deg); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.mbr-btn-p:hover .mbr-btn-a svg, .mbr-btn-p:focus-visible .mbr-btn-a svg { transform: none; }
/* secondary: outlined */
.mbr-btn-g { gap: 10px; padding: 0 24px; color: var(--pale); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 52%, transparent); }
.mbr-btn-g:hover, .mbr-btn-g:focus-visible { background: var(--pale); color: var(--deep); box-shadow: inset 0 0 0 1px var(--pale); }
.mbr-lamp { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--m-iris); transition: background-color 0.4s; }
.mbr-btn-g:hover .mbr-lamp, .mbr-btn-g:focus-visible .mbr-lamp { background: var(--primary); }
.mbr-btn:focus-visible { outline: 3px solid var(--pale); outline-offset: 3px; }
.mbr-proof { font-size: 14.5px; line-height: 1.6; color: color-mix(in srgb, var(--pale) 86%, transparent); }

/* Hidden only while the entrance is pending (set by JS) */
.mbr.is-pending [data-m] { opacity: 0; }

/* Tablet (ref .is-t): stacked, form up to 640px */
@media (max-width: 1099px) {
  .mbr-wrap { padding-top: 88px; padding-bottom: 88px; }
  .mbr-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; min-height: 0; direction: rtl; }
  .mbr-form { max-width: 640px; }
  .mbr-veil {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--m-veil) 72%, transparent) 0, color-mix(in srgb, var(--m-veil) 30%, transparent) 34%, color-mix(in srgb, var(--m-veil) 34%, transparent) 62%, color-mix(in srgb, var(--m-veil) 80%, transparent) 100%),
      color-mix(in srgb, var(--m-veil) 62%, transparent);
  }
  .mbr-copy { max-width: none; }
}
/* Mobile (ref .is-p) */
@media (max-width: 699px) {
  .mbr-wrap { padding-top: 64px; padding-bottom: 64px; }
  .mbr-grid { gap: 36px; }
  .mbr-copy { gap: 20px; }
  .mbr-h { font-size: clamp(38px, 11vw, 52px); }
  .mbr-lead { font-size: 17px; }
  .mbr-form { gap: 24px; padding: 18px; border-radius: 22px; }
  .mbr-field { height: 60px; padding: 0 18px 3px; border-radius: 16px; font-size: 20px; }
  .mbr-chip { padding: 0 15px; font-size: 14.5px; }
  .mbr-go { padding-top: 22px; }
  .mbr-btns { flex-direction: column; }
  .mbr-btn { width: 100%; }
  .mbr-btn-p { justify-content: space-between; }
  .mbr-btn-g { justify-content: center; }
  .mbr .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .mbr.is-pending [data-m] { opacity: 1; }
  .mbr-pic { scale: 1 !important; transition: none !important; }
  .mbr-chip, .mbr-chip i, .mbr-btn, .mbr-btn-p::before, .mbr-btn-a svg, .mbr-field { transition: none !important; }
}

/* ==========================================================================
   SECTION — شركاؤنا (ref: trendstudio.framer.website logo ticker, light version)
   Two rows of equal logo cards (264×150, radius 20, gap 15 as in the reference) that glide in opposite
   directions with faded edges. Without JS or with reduced motion: a static centred grid.
   ========================================================================== */
.prt {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--pale); color: var(--deep);
  padding: clamp(88px, 8vw, 128px) 0 clamp(96px, 9vw, 140px);
  --p-card-w: 264px; --p-card-h: 150px; --p-gap: 15px;
  --p-hair: color-mix(in srgb, var(--primary) 14%, transparent);
}
.prt-head { position: relative; z-index: 3; text-align: center; padding: 0 var(--g); margin-bottom: clamp(44px, 5vw, 72px); }
.prt-h { margin: 0; font-size: clamp(40px, 4.4vw, 76px); font-weight: 900; line-height: 1.2; color: var(--deep); }
.prt-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.06em 0.2em; margin: -0.06em -0.06em -0.2em; }
.prt-i { display: inline-block; }

/* Logos awaiting approval stay hidden unless the section is in development preview */
.prt:not([data-preview="true"]) .prt-card[data-approved="pending"] { display: none; }

.prt-rows { position: relative; z-index: 3; display: grid; gap: var(--p-gap); }
.prt-row { overflow: hidden; }
.prt-track {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--p-gap);
  margin: 0; padding: 0 var(--g); list-style: none;
}
.prt-card {
  position: relative; flex: 0 0 auto; width: var(--p-card-w); height: var(--p-card-h);
  display: flex; align-items: center; justify-content: center; padding: 26px 34px; border-radius: 20px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--p-hair);
  transition: translate 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), background-color 0.45s;
}
/* fit inside the padded box without cropping or stretching: wide logos meet the width, tall ones the height */
.prt-card img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
@media (hover: hover) {
  .prt-card:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 34%, transparent), 0 18px 34px -24px color-mix(in srgb, var(--deep) 45%, transparent); }
}

/* Ticker mode (set by JS): single-line rows, edges fade out like the reference */
.prt.is-ticker .prt-row:not([data-static]) {
  direction: ltr; /* the overflowing track must start at the row's left edge for the loop maths */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.prt.is-ticker .prt-row:not([data-static]) .prt-track { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 0; direction: ltr; will-change: transform; }

.prt.is-pending [data-p] { opacity: 0; }

@media (max-width: 699px) {
  .prt { --p-card-w: 190px; --p-card-h: 112px; --p-gap: 12px; }
  .prt-card { padding: 18px 22px; border-radius: 16px; }
  .prt .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .prt.is-pending [data-p] { opacity: 1; }
  .prt-card { transition: none; }
}

/* About page variant (.prt--groups): the homepage colours, cards, ticker and entrance, with the content document's two
   lists each under a small heading — «شراكات رسمية» as one static centred row ([data-static]), «شركاء النجاح» as the
   homepage's two gliding rows. */
.prt--groups .prt-rows { gap: clamp(48px, 5vw, 76px); }
/* a grid item must not grow to its ticker track's max-content width (the homepage rows clip with overflow: hidden) */
.prt-group { display: grid; gap: var(--p-gap); min-width: 0; }
.prt-row[data-static] { overflow: visible; }
.prt-gh {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 0 0 clamp(6px, 1vw, 14px); padding: 0 var(--g);
  font-size: clamp(22px, 1.9vw, 30px); font-weight: 900; line-height: 1.4; color: var(--deep);
}
.prt-gh::before, .prt-gh::after { content: ""; width: clamp(28px, 4vw, 64px); height: 1px; background: color-mix(in srgb, var(--primary) 30%, transparent); }

/* ==========================================================================
   FOOTER (ref: Citeable .ctft — values read from its live CSS), mirrored for Arabic:
   CTA block on the RIGHT, four link columns on the LEFT. Near-black purple base, a hidden photo layer
   (middle crop under a heavy veil), soft purple glow and the original pattern at low opacity.
   ========================================================================== */
.ftr {
  --f-base: #0B0714;
  --f-iris: #C4B5FD;
  --f-hair: color-mix(in srgb, var(--pale) 16%, transparent);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--f-base); color: var(--pale);
}
.ftr-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* the photo is lit in the middle and fades to the dark base at both sides */
.ftr-pic {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 38%;
  filter: saturate(0.85) brightness(0.85);
  opacity: 0.45;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%, #000 68%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 32%, #000 68%, transparent 100%);
}
.ftr-veil {
  position: absolute; inset: 0;
  background:
    /* side darkening (strongest at the edges, clear in the middle) */
    linear-gradient(90deg, var(--f-base) 0, color-mix(in srgb, var(--f-base) 55%, transparent) 26%, transparent 50%, color-mix(in srgb, var(--f-base) 55%, transparent) 74%, var(--f-base) 100%),
    /* brand grade + top/bottom falloff so the columns and bottom bar stay readable */
    linear-gradient(180deg, color-mix(in srgb, var(--f-base) 30%, transparent) 0, color-mix(in srgb, var(--deep) 22%, transparent) 45%, color-mix(in srgb, var(--f-base) 82%, transparent) 100%),
    radial-gradient(ellipse 50% 60% at 82% 18%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 70%);
}
.ftr > .pt-layer { z-index: 1; }

.ftr-wrap {
  position: relative; z-index: 2;
  max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); margin: 0 auto;
  padding: clamp(96px, 8vw, 136px) var(--g) 34px;
}
.ftr-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr);
  gap: clamp(40px, 6vw, 112px); align-items: start;
}

/* CTA (first column = right) */
.ftr-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 520px; }
.ftr-eb { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--f-iris); }
.ftr-eb i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--f-iris); }
.ftr-eb i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--f-iris); opacity: 0; animation: ping 2.6s ease-out infinite; }
.ftr-h { margin: 0; font-size: clamp(38px, 3.6vw, 60px); font-weight: 900; line-height: 1.3; color: var(--pale); text-wrap: balance; }
.ftr-h mark {
  display: inline-block; padding: 0 0.2em 0.06em; border-radius: 0.18em;
  background: var(--f-iris); color: var(--deep);
}
.ftr-lead { max-width: 30em; font-size: 17px; line-height: 1.85; color: color-mix(in srgb, var(--pale) 78%, transparent); }
.ftr-note { font-size: 14px; line-height: 1.6; color: color-mix(in srgb, var(--pale) 62%, transparent); }

/* Button (ref .ctft-btn): pale pill, lavender disc at the reading end that floods on hover */
.ftr-btn {
  position: relative; display: inline-flex; align-items: center; gap: 14px; height: 56px; max-width: 100%;
  margin-top: 6px; padding: 0 24px 0 8px; border-radius: 999px;
  background: var(--pale); color: var(--deep);
  font-size: 15px; font-weight: 900; line-height: 1; text-decoration: none; white-space: nowrap;
  overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s;
}
.ftr-btn:active { transform: scale(0.965); }
.ftr-btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0; background: var(--f-iris);
  clip-path: circle(20px at 28px 50%); transition: clip-path 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ftr-btn:hover::before, .ftr-btn:focus-visible::before { clip-path: circle(130% at 28px 50%); }
.ftr-btn-l { position: relative; z-index: 1; padding-bottom: 2px; }
.ftr-btn-a { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; color: var(--deep); }
.ftr-btn-a svg { display: block; width: 16px; height: 16px; transform: rotate(45deg); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ftr-btn:hover .ftr-btn-a svg, .ftr-btn:focus-visible .ftr-btn-a svg { transform: none; }
.ftr-btn:focus-visible { outline: 3px solid var(--pale); outline-offset: 3px; }

/* Columns (ref .ctft-cols) */
.ftr-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px clamp(20px, 2.4vw, 44px); padding-top: 8px; }
.ftr-ct { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 13.5px; font-weight: 900; line-height: 1.4; color: var(--pale); }
.ftr-ct b { font-weight: 900; letter-spacing: 0.06em; color: var(--f-iris); }
.ftr-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ftr-col a {
  display: inline-block; max-width: 100%; padding: 5px 0;
  font-size: 16.5px; line-height: 1.45; text-decoration: none; color: var(--pale); overflow-wrap: anywhere;
  background: linear-gradient(var(--f-iris), var(--f-iris)) 100% calc(100% - 3px) / 0 1px no-repeat;
  transition: background-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s;
}
.ftr-col a:hover, .ftr-col a:focus-visible { background-size: 100% 1px; color: var(--f-iris); }
.ftr-social { display: flex !important; gap: 10px !important; margin-top: 18px !important; }
.ftr-social a {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%;
  background: none; box-shadow: inset 0 0 0 1px var(--f-hair);
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s, translate 0.35s var(--ease-out);
}
.ftr-social a:hover, .ftr-social a:focus-visible { background: var(--f-iris); color: var(--deep); box-shadow: inset 0 0 0 1px var(--f-iris); translate: 0 -2px; }
.ftr-social svg { width: 17px; height: 17px; }

/* Bottom bar (ref .ctft-base) */
.ftr-base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 32px;
  margin-top: clamp(64px, 6.4vw, 104px); padding-top: 22px; border-top: 1px solid var(--f-hair);
  font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--pale) 72%, transparent);
}
.ftr-legal { display: inline-flex; align-items: center; gap: 12px; }
.ftr-legal img { width: 22px; height: 22px; opacity: 0.9; }

.ftr.is-pending [data-f] { opacity: 0; }

@media (max-width: 1199px) {
  .ftr-top { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .ftr-cta { max-width: 640px; }
}
@media (max-width: 799px) {
  .ftr-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; }
}
@media (max-width: 599px) {
  .ftr-wrap { padding-top: 80px; }
  .ftr-h { font-size: clamp(32px, 9vw, 40px); }
  .ftr-lead { font-size: 16px; }
  .ftr-btn { width: 100%; justify-content: space-between; }
  .ftr-col a { font-size: 16px; padding: 7px 0; }
  .ftr-base { flex-direction: column; align-items: flex-start; }
  .ftr .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .ftr.is-pending [data-f] { opacity: 1; }
  .ftr-btn::before, .ftr-btn-a svg, .ftr-col a, .ftr-social a { transition: none !important; }
}

/* ==========================================================================
   ABOUT PAGE — hero (ref: Citeable services hero .pg-top — values read from its live CSS) + غايتنا
   Photo under a deep-purple veil; mirrored for Arabic: copy on the RIGHT (darkest side),
   the «2023م» fact on the LEFT where the photo opens up.
   ========================================================================== */
.ahero {
  --a-veil: color-mix(in srgb, var(--night) 86%, #000);
  position: relative; isolation: isolate; overflow: hidden; container: ahero / inline-size;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(520px, 68svh, 720px);
  background: var(--night); color: var(--pale);
}
.ahero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ahero-pic {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 40% 42%;
  filter: brightness(0.92) saturate(1.05);
}
.ahero-tint { position: absolute; inset: 0; background: var(--deep); mix-blend-mode: color; opacity: 0.6; }
/* ref .pg-veil, mirrored (270deg): dark behind the copy, opening towards the left; dark top and bottom */
.ahero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--a-veil) 88%, transparent) 0, color-mix(in srgb, var(--a-veil) 66%, transparent) 40%, color-mix(in srgb, var(--a-veil) 16%, transparent) 72%, color-mix(in srgb, var(--a-veil) 6%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--a-veil) 62%, transparent) 0, color-mix(in srgb, var(--a-veil) 6%, transparent) 26%, color-mix(in srgb, var(--a-veil) 20%, transparent) 50%, color-mix(in srgb, var(--a-veil) 92%, transparent) 100%),
    color-mix(in srgb, var(--a-veil) 30%, transparent);
}
.ahero > .pt-layer { z-index: 2; }

.ahero-in {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: 32px clamp(32px, 5cqw, 96px); align-items: end;
  padding: calc(var(--navh) + 44px) var(--pad) clamp(34px, 3.6cqw, 56px);
}
.ahero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; max-width: 1040px; }
.ahero-ask {
  display: inline-flex; align-items: center; max-width: 100%; margin: 0;
  padding: 9px 14px 9px 18px; border-radius: 999px;
  background: color-mix(in srgb, var(--pale) 14%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 18%, transparent);
}
.ahero-ask b { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--pale); }
.ahero-ask i { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #C4B5FD; animation: blink 1.6s ease-in-out infinite; }

.ahero-h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.06em 0.24em; margin: 0;
  font-size: clamp(60px, 6.9cqw, 118px); font-weight: 900; line-height: 1.18; color: #F5F3FF;
}
.ahero .hl-mask.ahero-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.04em 0.16em; margin: -0.04em -0.04em -0.16em; }
.ahero .hl-line { display: inline-block; white-space: nowrap; }
/* «اللجنة» on a lavender plate */
.ahero-hl { position: relative; padding: 0.02em 0.24em 0.12em !important; margin: 0 !important; color: #2E1065; }
.ahero-hl-bg { position: absolute; inset: 0; z-index: 0; border-radius: 0.16em; background: #C4B5FD; transform-origin: right center; }
.ahero-hl .hl-line { position: relative; z-index: 1; }

.ahero-lead { max-width: 34em; font-size: 19px; line-height: 1.75; color: var(--pale); }
.ahero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

/* Side fact (ref .pg-facts) */
.ahero-side { display: grid; gap: 22px; justify-items: end; min-width: 0; padding-bottom: 4px; }
.ahero-facts {
  display: flex; gap: 16px 56px; margin: 0; padding-top: 20px;
  border-top: 1px solid color-mix(in srgb, var(--pale) 34%, transparent);
}
.ahero-facts dt {
  font-size: clamp(40px, 4cqw, 64px); font-weight: 900; line-height: 1; white-space: nowrap;
  font-variant-numeric: lining-nums; color: var(--pale);
  text-shadow: 0 2px 26px color-mix(in srgb, var(--a-veil) 80%, transparent);
}
.ahero-facts dd { margin: 10px 0 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: #C4B5FD; }

@container ahero (max-width: 1199px) {
  .ahero-in { grid-template-columns: minmax(0, 1fr); padding-left: var(--g); padding-right: var(--g); }
  .ahero-side { justify-items: start; }
  .ahero-h { font-size: clamp(56px, 9cqw, 96px); }
  .ahero-ask { background: color-mix(in srgb, var(--a-veil) 46%, transparent); }
  .ahero-veil {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--a-veil) 66%, transparent) 0, color-mix(in srgb, var(--a-veil) 46%, transparent) 22%, color-mix(in srgb, var(--a-veil) 50%, transparent) 48%, color-mix(in srgb, var(--a-veil) 94%, transparent) 100%),
      color-mix(in srgb, var(--a-veil) 30%, transparent);
  }
}
@container ahero (max-width: 699px) {
  .ahero-in { padding-top: calc(var(--navh) + 28px); padding-bottom: 28px; }
  .ahero-copy { gap: 16px; }
  .ahero-h { font-size: clamp(44px, 13cqw, 68px); }
  .ahero-lead { font-size: 16.5px; }
  .ahero-ask { padding: 9px 14px; border-radius: 18px; }
  .ahero-btns { width: 100%; }
  .ahero-btns .mag, .ahero-btns .btn { width: 100%; justify-content: space-between; }
  .ahero-pic { object-position: 46% 40%; }
  .ahero > .pt-layer .pt { width: calc(var(--w, 900px) * 0.55); }
}
@media (max-width: 699px) { .ahero { min-height: clamp(460px, 64svh, 600px); } }
@media (prefers-reduced-motion: reduce) { .ahero-ask i { animation: none; } }

.purpose {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--night), var(--deep));
  color: var(--pale); text-align: center;
}
.purpose .sec-wrap { padding-top: clamp(110px, 14vw, 180px); padding-bottom: clamp(90px, 10vw, 140px); display: flex; flex-direction: column; align-items: center; }
.purpose-mark { width: 64px; height: auto; margin-bottom: 26px; }
.purpose-q {
  margin: 26px 0 0; max-width: 15em;
  font-size: clamp(40px, 5.2vw, 96px); font-weight: 900; line-height: 1.32; color: var(--pale); text-wrap: balance;
}
.purpose-q .hw-m { padding: 0.1em 0.06em 0.3em; margin: -0.1em -0.06em -0.3em; }
.purpose.is-pending [data-purpose-in], .purpose.is-pending .hw-i { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cnt.is-pending [data-c], .purpose.is-pending [data-purpose-in], .purpose.is-pending .hw-i { opacity: 1; }
}

/* ==========================================================================
   ABOUT PAGE — الغاية والرؤية والرسالة (static band)
   RTL grid: purpose on the RIGHT, Vision card in the CENTRE, Mission card on the LEFT.
   Card numbers reuse the Services slider's oversized outlined style (.vmx-big): hollow, thin lavender stroke.
   ========================================================================== */
.pvm {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, var(--deep), var(--night) 70%); color: var(--pale);
}
.pvm-in {
  position: relative; z-index: 3;
  max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); margin: 0 auto;
  padding: clamp(88px, 8vw, 128px) var(--g);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: clamp(18px, 1.8vw, 28px); align-items: stretch;
}
.pvm-purpose { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 18px; padding: 0 0 clamp(8px, 1vw, 16px) clamp(8px, 1.6vw, 28px); }
.pvm-h { margin: 0; font-size: clamp(48px, 4.6vw, 84px); font-weight: 900; line-height: 1.15; color: var(--pale); }
.pvm-text { max-width: 14em; font-size: clamp(22px, 1.9vw, 32px); font-weight: 900; line-height: 1.55; color: color-mix(in srgb, var(--pale) 86%, var(--tint)); }

.pvm-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(460px, 40vw, 600px); padding: clamp(24px, 2.4vw, 40px);
  border-radius: 22px; background: var(--deep);
  container-type: inline-size;
}
.pvm-pic {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
/* same veil as the slider panels: deep fade from the bottom (text), light fade from the top (number) */
.pvm-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(0deg,
      color-mix(in srgb, var(--night) 96%, transparent) 0,
      color-mix(in srgb, var(--night) 86%, transparent) 30%,
      color-mix(in srgb, var(--deep) 62%, transparent) 52%,
      color-mix(in srgb, var(--deep) 22%, transparent) 74%,
      transparent 90%),
    linear-gradient(180deg, color-mix(in srgb, var(--night) 58%, transparent) 0, transparent 28%),
    color-mix(in srgb, var(--deep) 26%, transparent);
}
/* Oversized outlined number (as .vmx-big), scaled to the card so it never spills into its neighbour */
.pvm-big {
  position: absolute; z-index: 2; left: clamp(20px, 7cqw, 44px); top: clamp(20px, 6cqw, 40px);
  font-size: clamp(96px, 38cqw, 220px); font-weight: 900; line-height: 0.8;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--pale) 78%, transparent);
  direction: ltr; pointer-events: none; user-select: none;
}
.pvm-txt { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; }
.pvm-sh { margin: 0; font-size: clamp(34px, 3.2vw, 56px); font-weight: 900; line-height: 1.2; color: var(--pale); }
.pvm-p { margin-top: 12px; max-width: 30em; font-size: clamp(17px, 1.3vw, 21px); font-weight: 500; line-height: 1.8; color: var(--pale); text-wrap: pretty; }

.pvm.is-pending [data-pv] { opacity: 0; }

/* Tablet: purpose across the top, the two cards side by side */
@media (max-width: 1099px) {
  .pvm-in { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 88px; padding-bottom: 88px; }
  .pvm-purpose { grid-column: 1 / -1; padding: 0 0 12px; }
  .pvm-card { min-height: 460px; }
}
/* Mobile: purpose, vision, mission stacked */
@media (max-width: 699px) {
  .pvm-in { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 64px; padding-bottom: 64px; }
  .pvm-h { font-size: clamp(40px, 12vw, 52px); }
  .pvm-text { font-size: 22px; }
  .pvm-card { min-height: 440px; border-radius: 18px; padding: 22px; }
  .pvm-big { font-size: clamp(110px, 44cqw, 170px); }
  .pvm .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (prefers-reduced-motion: reduce) { .pvm.is-pending [data-pv] { opacity: 1; } }

/* ==========================================================================
   ABOUT PAGE — قيمنا (ref: Recut «How It Works» — values read from its live page)
   Centred heading over five white step cards (ref: radius 20px, 9px inset, oversized number at ~10% ink,
   minimal icon, bottom panel holding the title). RTL: card 01 on the RIGHT; each card sits one --v-step
   lower than the previous. Equal heights: every card carries --v-step × 4 of vertical margin in total
   (top = i steps, bottom = 4 − i), so the stretched grid row gives all five the same box.
   .is-pin (set by script.js, wide screens with motion) = the «أدوارنا» sticky stage: card 01 rises with the
   heading and cards 02–05 travel up from below the viewport into their slots with scroll.
   ========================================================================== */
.vals {
  --v-line: color-mix(in srgb, var(--primary) 14%, var(--pale));
  --v-num: color-mix(in srgb, var(--primary) 12%, #fff);
  --v-step: clamp(18px, 2vw, 30px);
  position: relative; isolation: isolate;
  background: var(--pale); color: var(--deep);
}
.vals-stage { position: relative; overflow: hidden; }
.vals-wrap {
  position: relative; z-index: 3;
  max-width: calc(1560px + var(--g) * 2); margin: 0 auto;
  padding: clamp(88px, 8vw, 128px) var(--g) clamp(120px, 11vw, 176px);
}

.vals-head { position: relative; isolation: isolate; text-align: center; margin-bottom: clamp(40px, 4.4vw, 72px); }
.vals-pt {
  position: absolute; z-index: -1; top: 50%; left: 50%;
  width: min(820px, 130%); aspect-ratio: 2400 / 613; translate: -50% -50%;
  background: url("assets/images/pattern-on-light.png") center / 100% 100% no-repeat; opacity: 0.1;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
  -webkit-mask-size: 100% 240%; mask-size: 100% 240%;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  pointer-events: none;
}
.vals-h { margin: 0; font-size: clamp(64px, 7vw, 124px); font-weight: 900; line-height: 1.12; color: var(--deep); }

.vals-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 24px);
}
.val:nth-child(2) { --i: 1; }
.val:nth-child(3) { --i: 2; }
.val:nth-child(4) { --i: 3; }
.val:nth-child(5) { --i: 4; }
.val {
  --i: 0;
  display: flex; min-width: 0; will-change: transform;
  margin-top: calc(var(--i) * var(--v-step));
  margin-bottom: calc((4 - var(--i)) * var(--v-step));
}
.val-in {
  position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px;
  min-height: clamp(300px, 22vw, 340px); padding: 9px; border-radius: 22px;
  background: #fff; border: 1px solid var(--v-line);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--deep) 6%, transparent),
    0 18px 40px -28px color-mix(in srgb, var(--deep) 38%, transparent);
  transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
/* top: icon at the start (right), the oversized faded number at the end (left) */
.val-top {
  flex: 1 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  min-height: clamp(104px, 7.6vw, 132px); padding: 12px 12px 0;
}
.val-ico {
  flex: none; width: clamp(30px, 2.3vw, 38px); aspect-ratio: 1; margin-top: 4px;
  background: var(--primary);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  transition: transform 0.5s var(--ease-out);
}
.val-num {
  font-size: clamp(76px, 6.6vw, 116px); font-weight: 900; line-height: 0.82; letter-spacing: -0.03em;
  color: var(--v-num); font-variant-numeric: lining-nums; user-select: none;
  transition: color 0.5s var(--ease-out);
}
/* bottom panel (ref: the accent title plate) — kept light so the description stays readable */
.val-foot {
  position: relative; overflow: hidden;
  padding: 16px 16px 22px; border-radius: 15px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 4%, #fff), color-mix(in srgb, var(--primary) 9%, var(--pale)));
}
.val-foot::after {
  content: ""; position: absolute; right: 16px; bottom: 0;
  width: 44px; height: 4px; border-radius: 4px 4px 0 0; background: var(--primary);
  transition: width 0.6s var(--ease-out);
}
.val-t { margin: 0; font-size: clamp(24px, 2vw, 34px); font-weight: 900; line-height: 1.3; color: var(--deep); }
.val-p {
  margin-top: 6px; font-size: clamp(15px, 1.05vw, 17px); font-weight: 500; line-height: 1.7;
  color: color-mix(in srgb, var(--deep) 76%, var(--pale)); text-wrap: pretty;
}

@media (hover: hover) and (pointer: fine) {
  .val-in:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--primary) 42%, var(--pale));
    box-shadow:
      0 1px 2px color-mix(in srgb, var(--deep) 8%, transparent),
      0 24px 46px -28px color-mix(in srgb, var(--deep) 46%, transparent);
  }
  .val-in:hover .val-ico { transform: translateY(-2px) scale(1.06); }
  .val-in:hover .val-num { color: color-mix(in srgb, var(--primary) 17%, #fff); }
  .val-in:hover .val-foot::after { width: 76px; }
}

/* Pinned stage (wide screens, motion allowed) */
.vals.is-pin { height: 280svh; padding-bottom: clamp(72px, 7vw, 128px); } /* lavender breathing room after the pinned stage, before «أهدافنا» */
.vals.is-pin .vals-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.vals.is-pin .vals-wrap { width: 100%; padding-top: calc(var(--navh) * 0.6); padding-bottom: 0; }
.vals.is-pin .vals-h { font-size: clamp(64px, min(7vw, 12svh), 124px); }
.vals.is-pin .vals-head { margin-bottom: clamp(32px, 5svh, 64px); }

.vals.is-pending [data-v-in], .vals.is-pending [data-v-card] { opacity: 0; }

/* Tablet: three on the first row, two centred underneath; no steps */
@media (max-width: 1199px) {
  .vals { --v-step: 0px; }
  .vals-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .val { grid-column: span 2; }
  .val:nth-child(4) { grid-column: 2 / 4; }
  .val:nth-child(5) { grid-column: 4 / 6; }
  .val-in { min-height: 264px; }
}
/* Large phones: two columns, the last card across both */
@media (max-width: 699px) {
  .vals-wrap { padding-top: 64px; padding-bottom: 96px; }
  .vals-h { font-size: clamp(52px, 15vw, 72px); }
  .vals-head { margin-bottom: 32px; }
  .vals-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .val, .val:nth-child(4), .val:nth-child(5) { grid-column: auto; }
  .val:nth-child(5) { grid-column: 1 / -1; }
  .val-in { min-height: 0; gap: 12px; border-radius: 20px; }
  .val-top { min-height: 76px; padding: 10px 10px 0; }
  .val-num { font-size: 64px; }
  .val-foot { padding: 14px 14px 20px; border-radius: 13px; }
  .val-foot::after { right: 14px; }
  .val-t { font-size: 24px; }
  .val-p { font-size: 15px; }
  .vals .pt { width: calc(var(--w, 900px) * 0.5); }
}
/* Phones: one column */
@media (max-width: 559px) {
  .vals-list { grid-template-columns: minmax(0, 1fr); }
  .val:nth-child(5) { grid-column: auto; }
  .val-top { min-height: 64px; }
  .val-num { font-size: 60px; }
}

/* ==========================================================================
   ABOUT PAGE — أهدافنا
   Deliberately calmer than «قيمنا» (lavender, expressive, stepped cards): an off-white band, no pattern layer
   (only a faint mark behind the heading), and a clean stack of horizontal numbered cards.
   RTL: sticky heading column on the RIGHT, cards on the LEFT. Each card reads, right to left:
   icon in a purple tile → the goal statement → a clear number behind a thin divider.
   script.js reveals the cards one after another as they enter; without JS / with reduced motion they are simply shown.
   ========================================================================== */
.gls {
  --gl-line: color-mix(in srgb, var(--primary) 16%, #fff);
  position: relative; isolation: isolate; overflow: clip;
  background: #FCFBFF; color: var(--deep);
}
.gls-in {
  position: relative; z-index: 3;
  max-width: calc(1240px + var(--g) * 2); margin: 0 auto;
  padding: clamp(120px, 10vw, 176px) var(--g) clamp(104px, 8vw, 136px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, clamp(560px, 58%, 720px));
  column-gap: clamp(40px, 6vw, 110px); align-items: start;
}

/* ---- heading column (sticky) ---- */
.gls-side { align-self: stretch; }
.gls-sticky { position: sticky; top: calc(var(--navh) + 40px); padding-top: 10px; isolation: isolate; }
.gls-pt {
  position: absolute; z-index: -1; top: -14%; right: -18%;
  width: min(620px, 150%); aspect-ratio: 2400 / 613;
  background: url("assets/images/pattern-on-light.png") center / 100% 100% no-repeat; opacity: 0.06;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  -webkit-mask-size: 100% 260%; mask-size: 100% 260%;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  pointer-events: none;
}
.gls-h {
  margin: 0; padding-bottom: 0.08em;
  font-size: clamp(72px, 7.6vw, 136px); font-weight: 900; line-height: 1.12;
  background: linear-gradient(180deg, var(--deep) 45%, var(--primary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- numbered cards ---- */
.gls-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.gl { position: relative; }
.gl-card {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: clamp(18px, 1.8vw, 28px);
  padding: clamp(20px, 1.8vw, 26px) clamp(20px, 2vw, 30px);
  border-radius: 18px; background: #fff; border: 1px solid var(--gl-line);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--deep) 5%, transparent);
  transition: transform 0.5s var(--ease-out), border-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.gl-txt { display: contents; }
.gl-art { order: -1; display: grid; place-items: center; }
.gl-ico {
  display: grid; place-items: center;
  width: clamp(56px, 4.4vw, 68px); aspect-ratio: 1; border-radius: 16px;
  background: linear-gradient(150deg, var(--primary), var(--deep));
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--deep) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / 0.18);
  transition: transform 0.5s var(--ease-out);
}
.gl-ico img { width: 52%; height: auto; }
.gl-text { margin: 0; font-size: clamp(19px, 1.45vw, 24px); font-weight: 900; line-height: 1.6; color: var(--deep); text-wrap: pretty; }
.gl-num {
  order: 2; align-self: stretch; display: flex; align-items: center;
  padding-inline-start: clamp(18px, 1.8vw, 28px); border-inline-start: 1px solid var(--gl-line);
  font-size: clamp(34px, 2.8vw, 46px); font-weight: 900; line-height: 1; letter-spacing: -0.01em;
  color: var(--primary); font-variant-numeric: lining-nums tabular-nums;
}

@media (hover: hover) and (pointer: fine) {
  .gl-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--primary) 45%, #fff);
    box-shadow: 0 18px 36px -24px color-mix(in srgb, var(--deep) 40%, transparent);
  }
  .gl-card:hover .gl-ico { transform: scale(1.06); }
}

/* Tablet */
@media (max-width: 1099px) {
  .gls-in { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.4fr); column-gap: 36px; }
}
/* Below 900px: heading above, cards full width, nothing sticky */
@media (max-width: 899px) {
  .gls-in { grid-template-columns: minmax(0, 1fr); row-gap: 36px; padding-top: 104px; }
  .gls-sticky { position: relative; top: auto; padding-top: 0; }
  .gls-pt { right: -30%; width: min(560px, 120%); }
}
/* Phones: icon tile + number on top, the statement underneath */
@media (max-width: 699px) {
  .gls-in { padding-top: 80px; padding-bottom: 72px; row-gap: 28px; }
  .gls-h { font-size: clamp(56px, 17vw, 76px); }
  .gls-list { gap: 12px; }
  .gl-card { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: 16px; }
  .gl-art { grid-area: 1 / 1; }
  .gl-num { grid-area: 1 / 2; justify-self: end; padding: 0; border: 0; font-size: 34px; }
  .gl-text { grid-area: 2 / 1 / 3 / 3; font-size: clamp(18px, 5vw, 21px); }
  .gl-ico { width: 52px; border-radius: 14px; }
}

/* ==========================================================================
   ABOUT PAGE — مجلس الإدارة: typography-led leadership directory (no photographs)
   Dark purple band. Heading: «مجلس» in white, «الإدارة» on the lavender plate used across the site.
   Two featured cards (RTL: chairman on the RIGHT, vice chairman on the LEFT) on a slightly lighter purple, each with an
   oversized translucent number at the far (left) edge and the name as the main element; an oversized cropped pattern
   sits behind them. Then the eight members as transparent editorial rows — small number, name, role, hairline —
   in two columns of four (column-first: 03–06 on the right, 07–10 on the left); one column on phones.
   script.js reveals heading → cards → rows; without JS / with reduced motion everything is simply shown.
   ========================================================================== */
.bd {
  --bd-iris: #C4B5FD;
  --bd-card: color-mix(in srgb, var(--deep) 84%, var(--primary));
  --bd-hair: color-mix(in srgb, var(--pale) 14%, transparent);
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(60% 50% at 100% 0%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 70%),
    radial-gradient(55% 45% at 0% 100%, color-mix(in srgb, #000 30%, transparent), transparent 70%),
    var(--deep);
  color: var(--pale);
}
.bd-wrap {
  position: relative; z-index: 3;
  max-width: calc(1360px + var(--g) * 2); margin: 0 auto;
  padding: clamp(104px, 10vw, 156px) var(--g) clamp(96px, 9vw, 140px);
}

/* ---- heading ---- */
.bd-top { margin-bottom: clamp(40px, 4.4vw, 64px); }
.bd-h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.06em 0.22em; margin: 0;
  font-size: clamp(48px, 5.4vw, 92px); font-weight: 900; line-height: 1.25; color: #fff;
}
.bd-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.04em 0.2em; margin: -0.06em -0.04em -0.2em; }
.bd-w { display: inline-block; }
.bd-hl { position: relative; display: inline-block; padding: 0.02em 0.22em 0.08em; color: var(--deep); }
.bd-hl-bg { position: absolute; inset: 0; z-index: -1; border-radius: 0.26em; background: var(--bd-iris); transform-origin: right center; }
.bd-hl .bd-m { position: relative; }

/* ---- featured cards ---- */
.bd-lead { position: relative; isolation: isolate; }
.bd-lead-pt { inset: -60px calc(-1 * var(--g)); z-index: -1; }
.bd-leads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); margin: 0; padding: 0; list-style: none; }
.bd-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(280px, 24vw, 360px); padding: clamp(28px, 3vw, 48px);
  border-radius: clamp(22px, 2vw, 30px);
  background: var(--bd-card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 10%, transparent);
  container-type: inline-size;
  transition: translate 0.5s var(--ease-out), background-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
/* a small cut of the original pattern in the far corner */
.bd-card::after {
  content: ""; position: absolute; z-index: -1; left: -18%; bottom: -26%; width: 72%; aspect-ratio: 2400 / 613;
  background: url("assets/images/pattern-on-dark.png") center / 100% 100% no-repeat; opacity: 0.08;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
  pointer-events: none;
}
.bd-big {
  position: absolute; z-index: -1; left: clamp(20px, 5cqw, 44px); top: clamp(10px, 3cqw, 26px);
  font-size: clamp(120px, 34cqw, 240px); font-weight: 900; line-height: 0.82; letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--bd-iris) 10%, transparent); user-select: none;
  transition: color 0.5s var(--ease-out);
}
.bd-name { margin: 0; max-width: 16em; font-size: clamp(28px, 2.6vw, 44px); font-weight: 900; line-height: 1.35; color: #fff; text-wrap: balance; }
.bd-role { margin: 12px 0 0; font-size: clamp(17px, 1.3vw, 20px); font-weight: 500; line-height: 1.5; color: var(--bd-iris); }

/* ---- member rows ---- */
.bd-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column;
  column-gap: clamp(40px, 6vw, 120px); margin: clamp(48px, 5vw, 80px) 0 0; padding: 0; list-style: none;
}
.bd-row { position: relative; display: flex; align-items: baseline; gap: clamp(16px, 1.6vw, 24px); padding: clamp(20px, 1.8vw, 26px) 4px; }
.bd-row::before {
  content: ""; position: absolute; inset: 4px -14px; z-index: -1; border-radius: 12px;
  background: color-mix(in srgb, var(--pale) 4%, transparent); opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.bd-n {
  flex: none; min-width: 2.2em; font-size: 15px; font-weight: 900; letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--bd-iris) 80%, transparent); font-variant-numeric: tabular-nums;
}
.bd-id { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; flex: 1 1 auto; min-width: 0; transition: translate 0.45s var(--ease-out); }
.bd-rn { margin: 0; font-size: clamp(20px, 1.6vw, 26px); font-weight: 900; line-height: 1.45; color: var(--pale); transition: color 0.4s var(--ease-out); }
.bd-rr { margin: 0; font-size: 15px; font-weight: 500; color: color-mix(in srgb, var(--bd-iris) 78%, transparent); }
.bd-line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--bd-hair);
  transform-origin: right center; transition: background-color 0.4s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .bd-card:hover {
    translate: 0 -4px;
    background: color-mix(in srgb, var(--deep) 76%, var(--primary));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bd-iris) 30%, transparent);
  }
  .bd-card:hover .bd-big { color: color-mix(in srgb, var(--bd-iris) 17%, transparent); }
  .bd-row:hover::before { opacity: 1; }
  .bd-row:hover .bd-rn { color: #fff; }
  .bd-row:hover .bd-id { translate: -6px 0; }   /* a step forward in the reading direction */
  .bd-row:hover .bd-line { background: color-mix(in srgb, var(--bd-iris) 46%, transparent); }
}

.bd.is-pending [data-b], .bd.is-pending [data-b-card], .bd.is-pending [data-b-row] { opacity: 0; }

/* Tablet: narrower cards, the names wrap as needed */
@media (max-width: 1099px) {
  .bd-card { min-height: 280px; }
  .bd-name { font-size: clamp(26px, 3.2vw, 34px); }
}
/* Below 800px: cards stacked, members as one list */
@media (max-width: 799px) {
  .bd-leads { grid-template-columns: minmax(0, 1fr); }
  .bd-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 699px) {
  .bd-wrap { padding-top: 80px; padding-bottom: 72px; }
  .bd-h { font-size: clamp(42px, 12vw, 56px); }
  .bd-card { min-height: 220px; padding: 24px; border-radius: 20px; }
  .bd-big { font-size: clamp(96px, 32cqw, 140px); }
  .bd-name { font-size: 26px; }
  .bd-role { font-size: 16px; }
  .bd-list { margin-top: 36px; }
  .bd-row { padding: 18px 2px; }
  .bd-rn { font-size: 20px; }
  .bd .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .bd.is-pending [data-b], .bd.is-pending [data-b-card], .bd.is-pending [data-b-row] { opacity: 1; }
  .bd-card, .bd-big, .bd-id, .bd-rn, .bd-line, .bd-row::before { transition: none; }
}

/* ==========================================================================
   ABOUT PAGE — ممثلونا في المناطق (ref: Reachwise «Everyone is a crowd» .rwin — values read from its live CSS)
   Light lavender band after the dark «مجلس الإدارة»; inside it ONE large dark-purple rounded panel that holds
   everything. Desktop / tablet: a grid whose first (= RIGHT) column carries heading + description at the top and the
   number 13 + label + CTA at the bottom; the <canvas> fills the whole panel behind it (dots drift under the text,
   softened by a fade as in ref .rwin-ratio::before) and script.js keeps the 13 clusters in the LEFT / centre area.
   Phones: heading → description → 13 → network → CTA, stacked.
   Region hotspots: a plain list of chips without JS; with JS (.is-live) round buttons over the clusters whose tag
   shows on hover, focus or tap.
   ========================================================================== */
.rps { position: relative; isolation: isolate; overflow: clip; background: var(--pale); color: var(--deep); }
.rps-wrap {
  position: relative; z-index: 3;
  max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); margin: 0 auto;
  padding: clamp(104px, 9vw, 150px) var(--g) clamp(96px, 8vw, 132px);
}

/* ---- the dark panel ---- */
.rps-panel {
  --rp-pad: clamp(32px, 3.4vw, 60px);
  --rp-ink: color-mix(in srgb, var(--deep) 36%, #05010D);
  --rp-col: min(440px, 34%);
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, var(--rp-col)) minmax(0, 1fr); grid-template-rows: auto 1fr auto auto;
  min-height: clamp(600px, 48vw, 720px); padding: var(--rp-pad);
  border-radius: clamp(24px, 2.2vw, 34px);
  background:
    radial-gradient(90% 90% at 34% 50%, color-mix(in srgb, var(--deep) 86%, var(--primary)) 0, var(--deep) 34%, var(--rp-ink) 82%);
  color: var(--pale);
  box-shadow: 0 50px 90px -60px color-mix(in srgb, var(--deep) 80%, transparent);
}
/* fade under the text column so the drifting dots never compete with it */
.rps-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(270deg, var(--rp-ink) 0, color-mix(in srgb, var(--rp-ink) 86%, transparent) 24%, transparent 46%);
}
.rps-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 10%, transparent);
}
.rps-edge { z-index: 0; }
.rps-field { position: absolute; inset: 0; z-index: 1; }
.rps-cv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: pan-y; }

/* ---- text column (RIGHT) ---- */
.rps-head, .rps-stat, .rps-cta { position: relative; z-index: 3; grid-column: 1; }
.rps-head { grid-row: 1; }
.rps-stat { grid-row: 3; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.rps-cta { grid-row: 4; margin-top: clamp(24px, 2.4vw, 36px); }
.rps-h { margin: 0; font-size: clamp(40px, 3.7vw, 66px); font-weight: 900; line-height: 1.3; color: var(--pale); }
/* «المناطق» on the lavender plate used across the site (.ahero-hl / .news-hl) */
.rps-hl { position: relative; z-index: 0; display: inline-block; padding: 0.02em 0.22em 0.1em; color: var(--deep); }
.rps-hl::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0.16em; background: #C4B5FD; }
.rps-text {
  margin: 18px 0 0; max-width: 26em; font-size: clamp(17px, 1.2vw, 19px); font-weight: 500; line-height: 1.85;
  color: color-mix(in srgb, var(--pale) 84%, transparent); text-wrap: pretty;
}
.rps-n { margin: 0; font-size: clamp(110px, 9vw, 170px); font-weight: 900; line-height: 0.82; letter-spacing: -0.03em; }
.rps-v { color: #C4B5FD; font-variant-numeric: lining-nums tabular-nums; }
.rps-t { margin: 0; font-size: clamp(24px, 2vw, 32px); font-weight: 900; line-height: 1.3; color: var(--pale); }

/* ---- region hotspots ---- */
.rps-spots {
  position: absolute; left: var(--rp-pad); bottom: var(--rp-pad); right: calc(var(--rp-col) + var(--rp-pad) * 2);
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;
}
.rps-spot { display: block; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rps-tag {
  display: inline-block; padding: 6px 13px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--pale) 12%, transparent); color: var(--pale);
  font-size: 13px; font-weight: 900; line-height: 1.4; white-space: nowrap;
}
.rps.is-live .rps-spots { inset: 0; display: block; }
.rps.is-live .rps-spot {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  width: var(--hit, 48px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
}
.rps.is-live .rps-spot:focus-visible { outline: 2px solid #C4B5FD; outline-offset: 3px; }
/* ref .rwin-tag: a small accent pill floating over the cluster */
.rps.is-live .rps-tag {
  position: absolute; left: 50%; bottom: calc(100% + 2px);
  translate: -50% 6px; opacity: 0;
  background: #C4B5FD; color: var(--deep);
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.6);
  pointer-events: none;
}
/* fade only once the hotspots are in place, so the chips never fade out on load */
.rps.is-ready .rps-tag { transition: opacity 0.3s var(--ease-out), translate 0.4s var(--ease-out); }
.rps.is-live .rps-spot.is-down .rps-tag { bottom: auto; top: calc(100% + 2px); translate: -50% -6px; }
.rps.is-live .rps-spot.is-on .rps-tag,
.rps.is-live .rps-spot:focus-visible .rps-tag { opacity: 1; translate: -50% 0; }

/* Tablet: wider text column, slightly shorter panel */
@media (max-width: 1099px) {
  .rps-panel { --rp-col: 42%; min-height: 620px; }
  .rps-panel::before { background: linear-gradient(270deg, var(--rp-ink) 0, color-mix(in srgb, var(--rp-ink) 86%, transparent) 30%, transparent 54%); }
  .rps-n { font-size: 120px; }
}
/* Phones: heading → description → 13 → network → CTA */
@media (max-width: 699px) {
  .rps-wrap { padding-top: 80px; padding-bottom: 72px; }
  .rps-panel { --rp-pad: 22px; display: flex; flex-direction: column; min-height: 0; border-radius: 22px; }
  .rps-panel::before { display: none; }
  .rps-h { font-size: clamp(36px, 10.4vw, 46px); }
  .rps-text { font-size: 17px; }
  .rps-stat { margin-top: 28px; gap: 4px; }
  .rps-n { font-size: 96px; }
  .rps-t { font-size: 24px; }
  .rps-field { position: relative; inset: auto; z-index: 1; height: min(440px, 118vw); margin: 10px calc(-1 * var(--rp-pad)) 0; flex: 0 0 auto; }
  .rps-spots { right: var(--rp-pad); }
  .rps-cta { margin-top: 8px; }
  .rps .pt { width: calc(var(--w, 900px) * 0.5); }
}

/* ==========================================================================
   CONTACT PAGE — hero (.ahero--contact) + «أرسل رسالتك» (.cf)
   Hero (ref: Metony contact banner): the About hero component, a little shorter (≈60svh) and without the side fact.
   Contact section, on a pale lavender band. RTL: a white form sheet on the RIGHT (≈65%) and a deep-purple contact
   panel on the LEFT (≈35%). Form = label-inside field tiles that light up on focus, the six official subjects as
   pills, the privacy line and a dark send pill. Panel = the three official channels, then a link to the regional
   representatives. Without JS everything is shown; script.js adds a soft entrance.
   ========================================================================== */
.ahero--contact { min-height: clamp(460px, 60svh, 620px); }
.ahero--contact .ahero-pic { object-position: 50% 38%; }

/* the header CTA marks the contact page as the current page */
.btn-primary[aria-current="page"]::before { clip-path: circle(130% at 28px 50%); }
.btn-sm[aria-current="page"]::before { clip-path: circle(130% at 23px 50%); }
.btn-primary[aria-current="page"] .btn-arrow svg { transform: none; }

.cf {
  --cf-hair: color-mix(in srgb, var(--primary) 14%, transparent);
  --cf-r: clamp(24px, 2.4vw, 34px);
  position: relative; isolation: isolate; overflow: clip;
  background: var(--pale); color: var(--deep);
}
.cf-wrap {
  position: relative; z-index: 3;
  max-width: calc(1360px + var(--g) * 2); margin: 0 auto;
  padding: clamp(88px, 8vw, 128px) var(--g) clamp(96px, 9vw, 140px);
  display: grid; grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
  gap: clamp(16px, 1.6vw, 24px); align-items: stretch;
}

/* ---- form sheet ---- */
.cf-form {
  min-width: 0; padding: clamp(28px, 3.4vw, 56px); border-radius: var(--cf-r);
  background: #fff;
  box-shadow: 0 0 0 1px var(--cf-hair), 0 40px 80px -60px color-mix(in srgb, var(--deep) 45%, transparent);
}
.cf-head { margin-bottom: clamp(26px, 2.6vw, 38px); }
.cf-h { margin: 0; font-size: clamp(40px, 3.8vw, 64px); font-weight: 900; line-height: 1.25; color: var(--deep); }
/* «رسالتك» on the lavender plate used across the site */
.cf-hl { position: relative; z-index: 0; display: inline-block; padding: 0.02em 0.22em 0.08em; }
.cf-hl::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0.2em; background: #C4B5FD; }

.cf-lbl { display: block; padding: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: color-mix(in srgb, var(--deep) 66%, #fff); }
.cf-lbl b { margin-inline-start: 3px; font-weight: 900; color: var(--primary); }

/* subjects: real radios as pills */
.cf-topics { margin: 0 0 clamp(22px, 2vw, 30px); padding: 0; border: 0; min-width: 0; }
.cf-topics .cf-lbl { margin-bottom: 12px; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px; border-radius: 26px; transition: box-shadow 0.3s; }
.cf-chip {
  position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px;
  border-radius: 999px; font-size: 15px; font-weight: 500; line-height: 1.2; cursor: pointer;
  color: var(--deep); background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.cf-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.cf-chip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (hover: hover) { .cf-chip:hover { background: var(--pale); box-shadow: inset 0 0 0 1px var(--primary); } }
.cf-chip:has(input:checked), .cf-chip:has(input:checked):hover { background: var(--deep); color: var(--pale); font-weight: 900; box-shadow: none; }

/* fields: label inside a soft tile; the whole tile lights up on focus */
.cf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cf-field {
  position: relative; display: grid; gap: 4px; min-width: 0; padding: 14px 18px 10px; border-radius: 16px; cursor: text;
  background: color-mix(in srgb, var(--pale) 70%, #fff);
  box-shadow: inset 0 0 0 1px var(--cf-hair);
  transition: background-color 0.3s, box-shadow 0.3s;
}
.cf-field--wide { grid-column: 1 / -1; }
@media (hover: hover) { .cf-field:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 34%, transparent); } }
.cf-field:focus-within {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 5px color-mix(in srgb, var(--primary) 10%, transparent);
}
.cf-in {
  box-sizing: border-box; display: block; width: 100%; min-height: 34px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; outline: none;
  font: 900 18px/1.6 var(--font); color: var(--deep); caret-color: var(--primary);
  appearance: none;
}
.cf-in[dir="ltr"] { text-align: right; }
textarea.cf-in { min-height: 132px; resize: vertical; }
.cf-in:-webkit-autofill { -webkit-text-fill-color: var(--deep); transition: background-color 99999s; }
select.cf-in { cursor: pointer; padding-inline-end: 28px; }
.cf-field--select::after {
  content: ""; position: absolute; left: 22px; bottom: 22px; width: 9px; height: 9px;
  border: solid var(--primary); border-width: 0 0 2px 2px; rotate: -45deg; pointer-events: none;
}
/* after a submit attempt, empty required tiles and the subject group are marked */
.cf-form.is-tried .cf-field:has(:invalid) { background: color-mix(in srgb, #C4B5FD 22%, #fff); box-shadow: inset 0 0 0 2px var(--primary); }
.cf-form.is-tried .cf-field:has(:invalid) .cf-lbl { color: var(--primary); font-weight: 900; }
.cf-form.is-tried .cf-topics:has(input:invalid) .cf-chips { box-shadow: 0 0 0 2px var(--primary); }
.cf-form.is-tried .cf-topics:has(input:invalid) .cf-lbl { color: var(--primary); font-weight: 900; }

.cf-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: clamp(24px, 2.4vw, 34px); }
.cf-note { margin: 0; max-width: 30em; font-size: 14px; font-weight: 500; line-height: 1.8; color: color-mix(in srgb, var(--deep) 64%, #fff); }
.cf-send {
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 16px;
  height: 60px; padding: 0 30px 0 8px; border: 0; border-radius: 999px; cursor: pointer;
  font: 900 17px/1 var(--font); color: var(--pale); background: var(--deep);
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--deep) 80%, transparent);
  transition: transform 0.18s, background-color 0.4s;
}
.cf-send::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--primary);
  clip-path: circle(22px at 30px 50%); transition: clip-path 0.6s var(--ease-out);
}
.cf-send-l { padding-bottom: 2px; }
.cf-send-a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #C4B5FD; color: var(--deep); }
.cf-send-a svg { width: 18px; height: 18px; rotate: 45deg; transition: rotate 0.5s var(--ease-out); }
.cf-send:hover::before, .cf-send:focus-visible::before { clip-path: circle(140% at 30px 50%); }
.cf-send:hover .cf-send-a svg, .cf-send:focus-visible .cf-send-a svg { rotate: 0deg; }
.cf-send:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.cf-send:active { transform: scale(0.97); }

/* ---- contact panel ---- */
.cf-info {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; gap: clamp(20px, 2vw, 28px);
  padding: clamp(28px, 3vw, 48px); border-radius: var(--cf-r);
  background:
    radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 70%),
    var(--deep);
  color: var(--pale);
}
.cf-info > .pt-layer { z-index: -1; }
.cf-info-h { margin: 0; font-size: clamp(26px, 2vw, 34px); font-weight: 900; line-height: 1.3; color: #fff; }
.cf-list { display: grid; margin: 0; padding: 0; list-style: none; }
.cf-item {
  display: flex; align-items: center; gap: 16px; padding: 18px 0; color: inherit; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--pale) 14%, transparent);
}
.cf-list li:first-child .cf-item { border-top: 1px solid color-mix(in srgb, var(--pale) 14%, transparent); }
.cf-ico {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  background: color-mix(in srgb, var(--pale) 10%, transparent); color: #C4B5FD;
  transition: background-color 0.35s, color 0.35s;
}
.cf-ico::before {
  content: ""; width: 48%; aspect-ratio: 1; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.cf-ico--x::before { content: none; }
.cf-ico--x svg { width: 20px; height: 20px; }
.cf-it { display: grid; gap: 2px; min-width: 0; }
.cf-k { font-size: 13px; font-weight: 500; color: color-mix(in srgb, #C4B5FD 80%, transparent); }
.cf-v { font-size: clamp(17px, 1.3vw, 20px); font-weight: 900; color: var(--pale); text-align: right; overflow-wrap: anywhere; transition: color 0.35s; }
@media (hover: hover) {
  .cf-item:hover .cf-ico, .cf-reps:hover .cf-ico { background: #C4B5FD; color: var(--deep); }
  .cf-item:hover .cf-v { color: #C4B5FD; }
}
.cf-item:focus-visible, .cf-reps:focus-visible { outline: 2px solid #C4B5FD; outline-offset: 4px; border-radius: 12px; }

.cf-reps {
  margin-top: auto; display: flex; align-items: flex-start; gap: 16px; padding: 20px;
  border-radius: 20px; color: inherit; text-decoration: none;
  background: color-mix(in srgb, var(--pale) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 12%, transparent);
  transition: background-color 0.35s;
}
.cf-reps .cf-ico { width: 46px; height: 46px; border-radius: 14px; }
.cf-reps .cf-it { flex: 1 1 auto; }
.cf-reps-h { font-size: 18px; font-weight: 900; color: #fff; }
.cf-reps-p { font-size: 14.5px; font-weight: 500; line-height: 1.8; color: color-mix(in srgb, var(--pale) 76%, transparent); }
.cf-reps-a { flex: none; align-self: center; display: grid; place-items: center; width: 34px; height: 34px; color: #C4B5FD; }
.cf-reps-a svg { width: 16px; height: 16px; rotate: 45deg; transition: rotate 0.5s var(--ease-out); }
@media (hover: hover) {
  .cf-reps:hover { background: color-mix(in srgb, var(--pale) 11%, transparent); }
  .cf-reps:hover .cf-reps-a svg { rotate: 0deg; }
}

.cf.is-pending [data-c] { opacity: 0; }

/* Tablet: form above, panel below */
@media (max-width: 1099px) {
  .cf-wrap { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: one column of fields */
@media (max-width: 699px) {
  .cf-wrap { padding-top: 56px; padding-bottom: 72px; }
  .cf-form, .cf-info { padding: 24px 20px; border-radius: 22px; }
  .cf-h { font-size: clamp(36px, 10vw, 44px); }
  .cf-grid { grid-template-columns: minmax(0, 1fr); }
  .cf-chip { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
  .cf-foot { flex-direction: column-reverse; align-items: stretch; }
  .cf-send { justify-content: space-between; }
  .cf .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .cf.is-pending [data-c] { opacity: 1; }
  .cf-chip, .cf-field, .cf-send, .cf-send::before, .cf-send-a svg, .cf-ico, .cf-v, .cf-reps, .cf-reps-a svg { transition: none; }
}

/* ==========================================================================
   PROGRAMS PAGE — hero (ref: Tutorwell «.twh» — values read from its live CSS and code), mirrored for Arabic.
   Full-bleed photo (ref: scale 1.1 → 1.02 over 2.4s, drifts 90px with the first screen of scroll) under a pale
   lavender wash — ref 90° stops 0 / 94% at 38% / 62% at 52% / clear at 68%, here from the RIGHT (270°). Copy on the
   RIGHT. Deck (ref): cards clamp(170px, 12.5vw, 210px) wide, 26px overlap, rotated in 6° steps, the middle one
   raised 18px; white print with 10px padding, radius 16px, image radius 10px, soft long shadow; hover straightens
   (rotate 0) and lifts 30px (.6s cubic-bezier(.2,.8,.2,1)). Placed bottom LEFT. No buttons (brief).
   Phones (ref .is-ph): heading → line → the photo as a framed image → the cards as a swipe row.
   ========================================================================== */
.twh {
  --ex: 0;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(620px, 84svh, 900px);   /* compact: the content sets the rest */
  background: var(--pale); color: var(--deep);
}
.twh-media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
/* the image runs 30% wider than the hero and starts 30% off the left edge, so the photo's centre (the two signatories)
   sits near 35% of the width — in the clear part, away from the wash behind the copy */
.twh-media img {
  position: absolute; top: 0; left: -30%; display: block; width: 130%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 38%;
  scale: 1.02; translate: 0 calc(var(--ex) * 90px);
  transition: scale 2.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.twh.is-pending .twh-media img { scale: 1.1; }
.twh-wash {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(270deg, var(--pale) 0%, color-mix(in srgb, var(--pale) 94%, transparent) 38%, color-mix(in srgb, var(--pale) 62%, transparent) 52%, transparent 68%),
    linear-gradient(0deg, color-mix(in srgb, var(--deep) 16%, transparent) 0%, transparent 34%),
    color-mix(in srgb, var(--primary) 6%, transparent);
}
.twh > .pt-layer { z-index: -1; }

.twh-in {
  position: relative; z-index: 3; display: grid; align-items: center;
  max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); min-height: inherit; margin: 0 auto;
  padding: calc(var(--navh) + 40px) var(--g) 56px;
  translate: 0 calc(var(--ex) * -120px);
}
.twh-copy { max-width: min(760px, 50vw); padding-bottom: clamp(96px, 12vh, 160px); }
.twh-h {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.05em; margin: 0;
  font-size: clamp(64px, 6vw, 108px); font-weight: 900; line-height: 1.14; color: var(--deep);
}
.twh-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.05em 0.2em; margin: -0.06em -0.05em -0.2em; }
.twh-w { display: inline-block; }
.twh-hl { position: relative; z-index: 0; display: inline-block; padding: 0.02em 0.24em 0.1em; color: var(--deep); }
.twh-hl-bg { position: absolute; inset: 0; z-index: -1; border-radius: 0.2em; background: #C4B5FD; transform-origin: right center; }
.twh-hl .twh-m { position: relative; }
.twh-sub {
  max-width: 30em; margin: clamp(20px, 2.2vw, 28px) 0 0;
  font-size: clamp(17px, 1.3vw, 20px); font-weight: 500; line-height: 1.8; color: color-mix(in srgb, var(--deep) 84%, var(--pale));
}

/* ---- the three photo prints (bottom LEFT) ---- */
.twh-deck {
  position: absolute; left: max(var(--g), calc((100% - clamp(1280px, 92vw, 1520px)) / 2)); bottom: 48px;
  display: flex; align-items: flex-end; margin: 0; padding: 0; list-style: none;
}
.twh-card {
  position: relative; flex: 0 0 auto; display: flex; flex-direction: column;
  width: clamp(176px, 13vw, 220px); padding: 10px 10px 14px; border-radius: 16px; background: #fff;
  box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--deep) 60%, transparent), 0 2px 0 color-mix(in srgb, var(--deep) 6%, transparent);
  rotate: calc((1 - var(--i)) * 6deg);   /* ref (i − 1) × 6°, mirrored */
  transition: rotate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), z-index 0s 0.3s;
}
.twh-card + .twh-card { margin-right: -26px; }
.twh-card:nth-child(2) { translate: 0 -18px; }
.twh-card--wide { width: clamp(196px, 14.4vw, 246px); }   /* the longest official name stays whole */
.twh-cimg { display: block; aspect-ratio: 1 / 1.02; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--primary) 12%, var(--pale)); }
.twh-cimg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: scale 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.twh-subj { display: block; margin: 12px 4px 0; font-size: clamp(17px, 1.25vw, 20px); font-weight: 900; line-height: 1.4; color: var(--deep); }
.twh-slot { display: flex; align-items: center; gap: 7px; margin: 6px 4px 0; font-size: 13px; font-weight: 500; color: color-mix(in srgb, var(--deep) 62%, #fff); }
.twh-slot i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.twh-slot b { font-weight: 900; color: var(--primary); }
@media (hover: hover) and (pointer: fine) {
  .twh-card:hover { rotate: 0deg; translate: 0 -30px; z-index: 3; transition-delay: 0s; }
  .twh-card:hover .twh-cimg img { scale: 1.06; }
}

.twh.is-pending [data-tw] { opacity: 0; }

/* Tablet: the wash covers more of the photo, smaller prints */
@media (max-width: 1199px) {
  .twh-wash { background: linear-gradient(270deg, var(--pale) 0%, color-mix(in srgb, var(--pale) 90%, transparent) 48%, color-mix(in srgb, var(--pale) 30%, transparent) 72%, transparent 90%), color-mix(in srgb, var(--primary) 6%, transparent); }
  .twh-copy { max-width: min(600px, 62vw); }
  .twh-h { font-size: clamp(52px, 6.4vw, 76px); }
  .twh-deck { bottom: 32px; }
  .twh-card { width: 156px; }
  .twh-card--wide { width: 176px; }
  .twh-subj { font-size: 16px; }
}
/* Phones (ref .is-ph): heading → line → framed photo → swipeable prints */
@media (max-width: 699px) {
  .twh { display: flex; flex-direction: column; min-height: 0; padding: calc(var(--navh) + 28px) 20px 36px; }
  .twh-in { display: contents; }
  .twh-copy { order: 1; max-width: none; padding: 0; }
  .twh-h { font-size: clamp(42px, 12vw, 56px); }
  .twh-sub { font-size: 17px; }
  .twh-media { order: 2; position: relative; inset: auto; z-index: 0; margin-top: 28px; aspect-ratio: 4 / 3.3; border-radius: 18px; }
  .twh-media img { position: static; width: 100%; translate: none; object-position: 50% 40%; }
  .twh-wash { display: none; }
  .twh-deck {
    order: 3; position: relative; left: auto; bottom: auto; gap: 14px; margin: -48px -20px 0; padding: 8px 20px 12px;
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory;
  }
  .twh-deck::-webkit-scrollbar { display: none; }
  .twh-card, .twh-card--wide { width: calc(50% - 7px); rotate: calc((1 - var(--i)) * 2deg); scroll-snap-align: start; }
  .twh-card + .twh-card { margin-right: 0; }
  .twh-card:nth-child(2) { translate: none; }
  .twh .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .twh.is-pending [data-tw] { opacity: 1; }
  .twh-media img { scale: 1.02 !important; translate: none !important; transition: none; }
  .twh-card, .twh-cimg img { transition: none; }
}

/* ==========================================================================
   PROGRAMS PAGE — six program cards (client-approved design)
   Pale lavender band; heading on the RIGHT, the official line on the LEFT; a 3 × 2 RTL grid of compact white cards:
   rounded picture on top (badge on its left corner, icon disc on its right corner), title, the official description,
   then the official figure on a hairline at the foot (cards stretch per row, so the feet line up).
   Pictures: client-approved illustrative photos (.prg-photo) under a light purple grade; the brand-composition variants
   (.prg-pic--a … --f) remain as a fallback for a card without a photo.
   ========================================================================== */
/* page rhythm (programs page): pale hero → richer lavender programs band (rounded top, one --section-gap below the
   hero, on the pale page canvas) → dark workshops → pale upcoming */
.page-programs main { background: var(--pale); }
.prg {
  --pg-hair: color-mix(in srgb, var(--primary) 16%, transparent);
  --pg-muted: color-mix(in srgb, var(--deep) 68%, #fff);
  position: relative; isolation: isolate; overflow: clip;
  margin-top: var(--section-gap); border-radius: var(--panel-r) var(--panel-r) 0 0;
  background: #E6D9F7; color: var(--deep);
}
.prg-wrap {
  position: relative; z-index: 3;
  max-width: calc(1240px + var(--g) * 2); margin: 0 auto;
  padding: clamp(88px, 8vw, 128px) var(--g) clamp(96px, 9vw, 140px);
}
.prg-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: end;
  gap: 18px clamp(32px, 5vw, 80px); margin-bottom: clamp(32px, 3.4vw, 48px);
}
.prg-h { margin: 0; font-size: clamp(40px, 3.9vw, 64px); font-weight: 900; line-height: 1.25; color: var(--deep); }
.prg-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.04em 0.2em; margin: -0.06em -0.04em -0.2em; }
.prg-w { display: inline-block; }
.prg-lead { margin: 0; max-width: 27em; padding-bottom: 0.5em; font-size: clamp(16px, 1.15vw, 18px); font-weight: 500; line-height: 1.8; color: var(--pg-muted); }

/* ---- cards ---- */
.prg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 1.8vw, 24px); margin: 0; padding: 0; list-style: none; }
.prg-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: 10px 10px 18px; border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 1px var(--pg-hair), 0 18px 40px -30px color-mix(in srgb, var(--deep) 40%, transparent);
  transition: translate 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

/* picture: brand composition */
.prg-pic {
  --a: var(--deep); --b: var(--primary); --pat: url("assets/images/pattern-on-dark.png"); --po: 0.32;
  --ex: 108%; --ey: 120%; --er: 0deg; --eo: 0.16; --em: url("assets/images/symbol-white-lg.png");
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(148px, 12.4vw, 176px); border-radius: 15px;
}
.prg-art {
  position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 85% 0%, var(--b) 0, var(--a) 72%);
  transition: scale 0.8s var(--ease-out);
}
.prg-art::before {   /* the original pattern, a wide strip across the lower half */
  content: ""; position: absolute; inset: 34% -20% -30%;
  background: var(--pat) center / 100% auto no-repeat; opacity: var(--po);
}
.prg-art::after {    /* a large crop of the original emblem */
  content: ""; position: absolute; width: 74%; aspect-ratio: 1; left: var(--ex); top: var(--ey); translate: -50% -50%;
  background: var(--em) center / contain no-repeat; opacity: var(--eo); rotate: var(--er);
}
/* photos (client-approved, illustrative): cover the picture, a light purple grade + a darker top so the badge and icon read */
.prg-photo { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.prg-pic:has(.prg-photo)::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--deep) 46%, transparent) 0, transparent 38%),
    color-mix(in srgb, var(--deep) 14%, transparent);
}
.prg-pic--a { --a: var(--deep); --b: var(--primary); --ex: 12%; --ey: 30%; }
.prg-pic--b { --a: var(--primary); --b: color-mix(in srgb, var(--primary) 55%, #C4B5FD); --ex: 92%; --ey: 78%; --er: 45deg; --eo: 0.2; }
.prg-pic--c { --a: #C4B5FD; --b: var(--pale); --pat: url("assets/images/pattern-on-light.png"); --po: 0.5; --em: url("assets/images/symbol-color-lg.png"); --ex: 16%; --ey: 74%; --eo: 0.14; }
.prg-pic--d { --a: color-mix(in srgb, var(--deep) 55%, #05010D); --b: var(--deep); --ex: 86%; --ey: 22%; --eo: 0.14; }
.prg-pic--e { --a: color-mix(in srgb, var(--primary) 70%, var(--deep)); --b: color-mix(in srgb, var(--primary) 40%, #C4B5FD); --ex: 40%; --ey: 112%; --er: 45deg; }
.prg-pic--f { --a: color-mix(in srgb, #C4B5FD 70%, var(--primary)); --b: #DDD6FE; --pat: url("assets/images/pattern-on-light.png"); --po: 0.45; --em: url("assets/images/symbol-color-lg.png"); --ex: 88%; --ey: 34%; --eo: 0.16; }

/* status badge (picture's left corner) and icon disc (right corner) */
.prg-badge {
  position: absolute; z-index: 2; top: 22px; left: 22px;
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 2px; border-radius: 999px;
  font-size: 12.5px; font-weight: 900; line-height: 1; color: var(--deep); background: #fff;
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--deep) 60%, transparent);
}
.prg-badge--live { color: var(--pale); background: var(--deep); }
.prg-badge--live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #C4B5FD;
  animation: blink 1.6s ease-in-out infinite;
}
.prg-ico {
  position: absolute; z-index: 2; top: 20px; right: 20px;
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--pale); color: var(--primary);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--deep) 60%, transparent);
  transition: background-color 0.4s, color 0.4s, scale 0.5s var(--ease-out);
}
.prg-ico::before {
  content: ""; width: 54%; aspect-ratio: 1; background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}

.prg-t { margin: 18px 8px 0; font-size: clamp(18px, 1.4vw, 21px); font-weight: 900; line-height: 1.5; color: var(--deep); transition: color 0.4s; }
.prg-p { margin: 8px 8px 0; font-size: 14.5px; font-weight: 500; line-height: 1.85; color: var(--pg-muted); }
.prg-stat {
  display: flex; align-items: baseline; gap: 6px; margin: auto 8px 0; padding-top: 14px;
  border-top: 1px solid var(--pg-hair);
  font-size: 14px; font-weight: 500; color: var(--pg-muted);
}
.prg-card .prg-p { margin-bottom: 16px; }
.prg-stat b { font-size: 19px; font-weight: 900; line-height: 1; color: var(--primary); font-variant-numeric: lining-nums; }

@media (hover: hover) and (pointer: fine) {
  .prg-card:hover {
    translate: 0 -4px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 34%, transparent), 0 26px 46px -30px color-mix(in srgb, var(--deep) 48%, transparent);
  }
  .prg-card:hover .prg-art { scale: 1.05; }
  .prg-card:hover .prg-ico { background: var(--primary); color: #fff; scale: 1.06; }
  .prg-card:hover .prg-t { color: var(--primary); }
}

.prg.is-pending [data-pg] { opacity: 0; }

@media (max-width: 1099px) {
  .prg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prg-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .prg-wrap { padding-top: 64px; padding-bottom: 72px; }
  .prg-h { font-size: clamp(34px, 9.6vw, 42px); }
  .prg-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .prg-pic { height: 168px; }
  .prg .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .prg.is-pending [data-pg] { opacity: 1; }
  .prg-card, .prg-art, .prg-ico, .prg-t { transition: none; }
  .prg-badge--live::before { animation: none; }
}

/* ==========================================================================
   PROGRAMS PAGE — ورش العمل: stacked scroll cards (ref: BRACKET «Five ways to get there.», BkTreatments — read from its
   live code). Dark purple band. Heading with «العمل» on the lavender plate and a big «01 / 03» counter (ref: 40px
   number + small «/ 05 · SCROLL»). Cards (ref): radius 34px, 1px pale hairline, a shadow cast upwards, picture under
   a 180° gradient (light at the top, near-solid at the foot) and a side gradient behind the text — mirrored here, so
   it is darker on the RIGHT where the title sits; a chip on the top corner; title + text at the foot (ref grid 1.1fr / .9fr).
   Default (no JS, phones, reduced motion): the three cards one under another.
   Deck mode (.is-deck, script.js): a 300svh track with a sticky 100svh stage; each next card rises from below onto
   the stack while the earlier ones step back behind it (top edges showing); script.js moves them with the scroll.
   ========================================================================== */
.wks {
  --wk-bg: #1B0D38;
  --wk-ink: color-mix(in srgb, var(--wk-bg) 80%, #000);
  position: relative; isolation: isolate;
  background: var(--wk-bg); color: var(--pale);
}
.wks-stage { position: relative; overflow: hidden; }
.wks > .wks-stage > .pt-layer { z-index: 0; }
.wks-in {
  position: relative; z-index: 2;
  max-width: calc(1248px + var(--g) * 2); margin: 0 auto;
  padding: clamp(88px, 8vw, 128px) var(--g) clamp(96px, 9vw, 140px);
}

/* ---- heading + counter ---- */
.wks-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: clamp(24px, 2.4vw, 34px); }
.wks-h {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.06em 0.22em; margin: 0;
  font-size: clamp(48px, 5.4vw, 84px); font-weight: 900; line-height: 1.2; color: #fff;
}
.wks-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.04em 0.2em; margin: -0.06em -0.04em -0.2em; }
.wks-w { display: inline-block; }
.wks-hl { position: relative; z-index: 0; display: inline-block; padding: 0.02em 0.22em 0.08em; color: var(--deep); }
.wks-hl-bg { position: absolute; inset: 0; z-index: -1; border-radius: 0.24em; background: #C4B5FD; transform-origin: right center; }
.wks-hl .wks-m { position: relative; }
.wks-count { display: none; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: 13px; font-weight: 500; letter-spacing: 0.16em; color: color-mix(in srgb, var(--pale) 70%, transparent); direction: ltr; }
.wks-count b { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: 0; color: #C4B5FD; font-variant-numeric: tabular-nums lining-nums; }

/* ---- cards ---- */
.wks-deck { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.wks-card {
  position: relative; isolation: isolate; overflow: hidden; min-height: 460px;
  border-radius: clamp(24px, 2.4vw, 34px); background: var(--deep);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 18%, transparent), 0 -18px 34px rgb(0 0 0 / 0.42);
  transform-origin: 50% 0%;
}
/* picture: a client-approved photo (.wks-pic), lightly brightened; .wks-art (brand visual) is the fallback */
.wks-art, .wks-pic {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  transform: scale(1.08); transform-origin: 50% 50%;
}
.wks-pic { filter: brightness(1.06) contrast(1.06) saturate(1.08); }   /* a touch clearer, still restrained */
.wks-art { background: radial-gradient(90% 120% at var(--gx, 22%) var(--gy, 18%), var(--g1), var(--g2) 46%, var(--deep) 100%); }
.wks-art::before {   /* the original pattern across the upper half */
  content: ""; position: absolute; inset: -6% -10% 40%;
  background: url("assets/images/pattern-on-dark.png") center / 120% auto no-repeat; opacity: 0.3;
}
.wks-art::after {    /* the original emblem, very large, cropped by the card */
  content: ""; position: absolute; width: 74%; aspect-ratio: 1; left: var(--ex, 18%); top: var(--ey, 36%); translate: -50% -50%;
  background: url("assets/images/symbol-white-lg.png") center / contain no-repeat; opacity: 0.12; rotate: var(--er, 0deg);
}
.wks-art--a { --g1: color-mix(in srgb, #C4B5FD 70%, var(--primary)); --g2: var(--primary); --gx: 18%; --gy: 14%; --ex: 16%; --ey: 30%; }
.wks-art--b { --g1: color-mix(in srgb, var(--primary) 70%, #C4B5FD); --g2: color-mix(in srgb, var(--primary) 70%, var(--deep)); --gx: 50%; --gy: 0%; --ex: 54%; --ey: 18%; --er: 45deg; }
.wks-art--c { --g1: #C4B5FD; --g2: color-mix(in srgb, var(--primary) 85%, var(--deep)); --gx: 80%; --gy: 20%; --ex: 26%; --ey: 62%; }
/* lighter treatment: the photo stays clear in its upper and middle parts; only the foot, where the text sits, deepens
   (a vertical fade + a soft local scrim behind the text). A very light purple wash keeps the photos in the brand mood. */
.wks-shade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(80% 58% at 50% 100%, color-mix(in srgb, var(--wk-ink) 38%, transparent) 0%, transparent 78%),
    linear-gradient(180deg, transparent 0%, transparent 42%, color-mix(in srgb, var(--wk-ink) 34%, transparent) 64%, color-mix(in srgb, var(--wk-ink) 74%, transparent) 88%, color-mix(in srgb, var(--wk-ink) 86%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--deep) 8%, transparent), color-mix(in srgb, var(--deep) 8%, transparent));
}
.wks-dim { position: absolute; inset: 0; z-index: 4; background: var(--wk-ink); opacity: 0; pointer-events: none; }

.wks-chip {
  position: absolute; z-index: 3; top: clamp(18px, 2.4vw, 32px); right: clamp(20px, 2.8vw, 40px);
  padding: 8px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 900; letter-spacing: 0.18em; color: var(--pale);
  background: color-mix(in srgb, var(--wk-ink) 45%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pale) 14%, transparent);
}
.wks-low {
  position: absolute; z-index: 3; left: clamp(20px, 2.8vw, 40px); right: clamp(20px, 2.8vw, 40px); bottom: clamp(22px, 2.6vw, 36px);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 18px 40px; align-items: end;
}
.wks-t { margin: 0; font-size: clamp(38px, 4.6vw, 76px); font-weight: 900; line-height: 1.18; color: #fff; text-wrap: balance; text-shadow: 0 2px 26px color-mix(in srgb, var(--wk-ink) 55%, transparent); }
.wks-p { margin: 0 0 0.4em; max-width: 30em; font-size: clamp(16px, 1.25vw, 19px); font-weight: 500; line-height: 1.75; color: color-mix(in srgb, var(--pale) 92%, transparent); text-shadow: 0 1px 14px color-mix(in srgb, var(--wk-ink) 70%, transparent); }
[data-wk-txt] { transition: opacity 0.25s ease, visibility 0s linear 0s; }

/* ---- deck mode (wide screens with motion; script.js) ---- */
.wks.is-deck { height: 300svh; }
.wks.is-deck .wks-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.wks.is-deck .wks-in { width: 100%; padding-top: calc(var(--navh) * 0.55); padding-bottom: 0; }
.wks.is-deck .wks-h { font-size: clamp(48px, min(5.4vw, 9svh), 84px); }
.wks.is-deck .wks-count { display: flex; }
.wks.is-deck .wks-deck { display: block; position: relative; height: min(62svh, 600px); margin-top: 40px; }   /* room for the edges behind */
.wks.is-deck .wks-card { position: absolute; inset: 0; min-height: 0; will-change: transform; }

.wks.is-pending [data-wk] { opacity: 0; }

@media (max-width: 899px) {
  .wks-card { min-height: 440px; }
}
@media (max-width: 699px) {
  .wks-in { padding-top: 64px; padding-bottom: 72px; }
  .wks-h { font-size: clamp(42px, 12vw, 54px); }
  .wks-card { min-height: 420px; border-radius: 22px; }
  .wks-low { grid-template-columns: minmax(0, 1fr); }
  .wks-t { font-size: clamp(32px, 9vw, 40px); }
  .wks-p { font-size: 16px; }
  .wks .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .wks.is-pending [data-wk] { opacity: 1; }
  [data-wk-txt] { transition: none; }
}

/* ==========================================================================
   PROGRAMS PAGE — قادمًا (visual language of «قيمنا» on the About page, adapted)
   Light lavender band after the dark workshops. Heading on the RIGHT with one shared status pill. Five white cards
   in RTL order, each one --u-step lower than the previous (as .val); every card carries --u-step × n of vertical
   margin in total (top = i steps, bottom = n − i), so the stretched row gives all of them the same height.
   Cards are wider and shorter than .val: no icon, no text block — an accent bar, the oversized faded number and the
   full initiative name at the foot. ≥1360px: five in a row; 900–1359px: three + two (centred); phones: one column.
   ========================================================================== */
.upc {
  --u-line: color-mix(in srgb, var(--primary) 14%, var(--pale));
  --u-num: color-mix(in srgb, var(--primary) 11%, #fff);
  --u-step: clamp(18px, 1.7vw, 26px);
  position: relative; isolation: isolate; overflow: clip;
  background: var(--pale); color: var(--deep);
}
.upc-wrap {
  position: relative; z-index: 3;
  max-width: calc(1560px + var(--g) * 2); margin: 0 auto;
  padding: clamp(104px, 9vw, 150px) var(--g) clamp(104px, 9vw, 150px);
}
.upc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-bottom: clamp(40px, 4.2vw, 64px); }
.upc-h { margin: 0; font-size: clamp(56px, 6vw, 108px); font-weight: 900; line-height: 1.2; color: var(--deep); }
.upc-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.04em 0.2em; margin: -0.06em -0.04em -0.2em; }
.upc-w { display: inline-block; }
.upc-status {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 9px 16px 10px; border-radius: 999px;
  font-size: 14.5px; font-weight: 900; line-height: 1.3; color: var(--deep);
  background: #fff; box-shadow: inset 0 0 0 1px var(--u-line), 0 10px 24px -18px color-mix(in srgb, var(--deep) 50%, transparent);
}
.upc-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: blink 1.6s ease-in-out infinite; }

/* ---- cards ---- */
.upc-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.3vw, 20px); margin: 0; padding: 0; list-style: none; }
.upc-card { --i: 0; --n: 4; }
.upc-card:nth-child(2) { --i: 1; }
.upc-card:nth-child(3) { --i: 2; }
.upc-card:nth-child(4) { --i: 3; }
.upc-card:nth-child(5) { --i: 4; }
.upc-card {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr;
  grid-template-areas: "mark num" "t t"; gap: 24px 12px;
  min-height: clamp(250px, 19vw, 300px); padding: clamp(20px, 1.8vw, 28px);
  margin-top: calc(var(--i) * var(--u-step)); margin-bottom: calc((var(--n) - var(--i)) * var(--u-step));
  border-radius: 22px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--u-line), 0 18px 40px -30px color-mix(in srgb, var(--deep) 36%, transparent);
  transition: translate 0.5s var(--ease-out), background-color 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
/* a small cut of the original pattern in the lower far corner */
.upc-card::after {
  content: ""; position: absolute; z-index: -1; left: -30%; bottom: -14%; width: 90%; aspect-ratio: 2400 / 613;
  background: url("assets/images/pattern-on-light.png") center / 100% 100% no-repeat; opacity: 0.1;
  -webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
  pointer-events: none;
}
.upc-mark { grid-area: mark; align-self: start; justify-self: start; width: 34px; height: 4px; margin-top: 12px; border-radius: 4px; background: var(--primary); transition: width 0.6s var(--ease-out); }
.upc-num {
  grid-area: num; font-size: clamp(64px, 5.2vw, 96px); font-weight: 900; line-height: 0.82; letter-spacing: -0.03em;
  color: var(--u-num); font-variant-numeric: lining-nums; user-select: none; transition: color 0.5s var(--ease-out);
}
.upc-t { grid-area: t; align-self: end; margin: 0; font-size: clamp(19px, 1.35vw, 23px); font-weight: 900; line-height: 1.6; color: var(--deep); text-wrap: pretty; }

@media (hover: hover) and (pointer: fine) {
  .upc-card:hover {
    translate: 0 -5px;
    background: color-mix(in srgb, var(--pale) 45%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 38%, var(--pale)), 0 24px 46px -30px color-mix(in srgb, var(--deep) 46%, transparent);
  }
  .upc-card:hover .upc-num { color: color-mix(in srgb, var(--primary) 20%, #fff); }
  .upc-card:hover .upc-mark { width: 58px; }
}

.upc.is-pending [data-up] { opacity: 0; }

/* Standard desktop / tablet: three + two, centred, a gentler step */
@media (max-width: 1359px) {
  .upc-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .upc-card { grid-column: span 2; --n: 2; }
  .upc-card:nth-child(4) { grid-column: 2 / 4; --i: 1; }
  .upc-card:nth-child(5) { grid-column: 4 / 6; --i: 2; }
}
/* Phones: one column, no steps */
@media (max-width: 699px) {
  .upc { --u-step: 0px; }
  .upc-wrap { padding-top: 72px; padding-bottom: 80px; }
  .upc-h { font-size: clamp(48px, 14vw, 64px); }
  .upc-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .upc-card, .upc-card:nth-child(4), .upc-card:nth-child(5) { grid-column: auto; }
  .upc-card { min-height: 0; gap: 18px 12px; border-radius: 20px; }
  .upc-num { font-size: 60px; }
  .upc .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (prefers-reduced-motion: reduce) {
  .upc.is-pending [data-up] { opacity: 1; }
  .upc-status i { animation: none; }
  .upc-card, .upc-num, .upc-mark { transition: none; }
}

/* ==========================================================================
   HOME — section rhythm
   White canvas; Roles → Services → Numbers → News → Membership → Partners are separated by one gap
   (--section-gap) and the coloured / dark ones sit as slightly inset, rounded panels.
   Services is pinned with position: sticky, so it clips with overflow: clip (overflow: hidden would make it
   the sticky element's scroll container and break the pin).
   ========================================================================== */
.page-home main { background: #fff; padding-bottom: var(--section-gap); }
.page-home main > section + section:not(.roles) { margin-top: var(--section-gap); }
.page-home .vmx--svc,
.page-home .news,
.page-home .mbr,
.page-home .prt { margin-inline: var(--panel-inset); border-radius: var(--panel-r); }
.page-home .vmx--svc { overflow: clip; }
/* the numbers card already is a rounded panel; it now sits on the white canvas with the same inset */
.page-home .cnt { padding: 0 var(--panel-inset); background: transparent; }

/* ==========================================================================
   MEMBERSHIP PAGE — hero + directory (ref: Hydrowell hero — values read from its live CSS), mirrored for Arabic.
   Full-bleed photo under a paper-coloured wash: ref 90° solid 0% → 61% at 32% → clear at 67%, here from the RIGHT
   (270°) and a little denser behind the copy (the photo is bright). Oversized heading (ref 72px at 1024px,
   line-height 1.1). Two frosted cards over the photo (ref: white 72%, blur 16px, radius 24px, 0 24px 80px shadow +
   inset 0 2px 20px white glow) and a frosted directory strip over the photo's lower edge (ref: white 72%, blur 12px).
   Copy on the RIGHT, photo and cards on the LEFT. No buttons.
   ========================================================================== */
.page-membership main { background: var(--pale); }
.mbh {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--pale); color: var(--deep);
}
.mbh-media { position: absolute; inset: 0 0 0 -18%; z-index: -3; overflow: hidden; }   /* wider than the hero: the people sit further LEFT, clear of the copy */
.mbh-media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 26% 12%; scale: 1.02; }   /* the faces sit lower, clear of the upper card */
.mbh-wash {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 84%, var(--pale) 100%),
    linear-gradient(270deg, var(--pale) 0%, color-mix(in srgb, var(--pale) 92%, transparent) 28%, color-mix(in srgb, var(--pale) 55%, transparent) 42%, transparent 58%),
    color-mix(in srgb, var(--primary) 3%, transparent);   /* solid behind the copy, the photo clear from the centre on (ref: clear at 67%) */
}
.mbh > .pt-layer { z-index: -1; }
.mbh-in {
  position: relative; z-index: 3; flex: none; display: flex; align-items: center;
  width: 100%; max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); min-height: clamp(600px, 84svh, 760px); margin: 0 auto;
  padding: calc(var(--navh) + 32px) var(--g) 56px;
}
.mbh-copy { position: relative; z-index: 2; max-width: min(640px, 46%); }
.mbh-h {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.06em; margin: 0;
  font-size: clamp(58px, 5.2vw, 88px); font-weight: 900; line-height: 1.12; color: var(--deep);
}
.mbh-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.06em 0.2em; margin: -0.06em -0.06em -0.2em; }
.mbh-w { display: inline-block; }
.mbh-hl { position: relative; z-index: 0; display: inline-block; padding: 0.02em 0.2em 0.08em; color: var(--deep); }
.mbh-hl-bg { position: absolute; inset: 0; z-index: -1; border-radius: 0.18em; background: #C4B5FD; transform-origin: right center; }
.mbh-hl .mbh-m { position: relative; }
.mbh-sub {
  max-width: 540px; margin: clamp(24px, 2vw, 30px) 0 0;
  font-size: clamp(17px, 1.3vw, 20px); font-weight: 500; line-height: 1.8; color: color-mix(in srgb, var(--deep) 84%, var(--pale));
}

/* ---- «العضوية بالأرقام»: two frosted cards over the photo (ref: testimonial card top-centre, list card lower side) ---- */
.mbh-stats { position: absolute; inset: 0; pointer-events: none; }
.mbh-card {
  position: absolute; pointer-events: auto;
  padding: 18px 20px; border-radius: 20px;
  background: color-mix(in srgb, #fff 70%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 16%, transparent), inset 0 2px 16px color-mix(in srgb, #fff 70%, transparent), 0 18px 44px -26px color-mix(in srgb, var(--deep) 40%, transparent);
  color: var(--deep);
}
.mbh-card--lead { left: 35%; top: calc(var(--navh) + 20px); width: clamp(190px, 14vw, 222px); }
.mbh-card--list { left: var(--g); bottom: 64px; width: clamp(206px, 15.5vw, 240px); padding: 16px 18px 14px; }
.mbh-eb { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; font-weight: 900; line-height: 1.3; color: var(--primary); }
.mbh-eb i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.mbh-big { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--deep) 12%, transparent); }
.mbh-big b { font-size: clamp(40px, 3.2vw, 54px); font-weight: 900; line-height: 1; color: var(--deep); }
.mbh-big span { white-space: nowrap; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: color-mix(in srgb, var(--deep) 74%, #fff); }
.mbh-rows { margin: 0; padding: 0; list-style: none; }
.mbh-rows li { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.mbh-rows li + li { border-top: 1px solid color-mix(in srgb, var(--deep) 12%, transparent); }
.mbh-rows li:first-child { padding-top: 0; }
.mbh-rows b {
  flex: none; display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 6px; border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 12%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent);
  font-size: 17px; font-weight: 900; line-height: 1; color: var(--primary);
}
.mbh-rows span { font-size: 14.5px; font-weight: 900; line-height: 1.35; color: var(--deep); }
.mbh-upd { margin: 2px 0 0; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--deep) 12%, transparent); font-size: 11.5px; font-weight: 500; color: color-mix(in srgb, var(--deep) 60%, #fff); }
.mbh.is-pending [data-mh], .mbh.is-pending .mbh-media img { opacity: 0; }

/* ---- دليل الجمعيات الدعوية: a frosted strip over the photo's lower edge ---- */
.dir { position: relative; z-index: 4; width: 100%; padding-bottom: clamp(40px, 4vw, 64px); }
.dir-wrap { max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); margin: 0 auto; padding: 0 var(--g); }
.dir-panel {
  display: grid; grid-template-columns: minmax(240px, 0.7fr) 2.3fr; align-items: center; gap: 18px clamp(28px, 3vw, 48px);
  padding: clamp(22px, 2vw, 30px) clamp(24px, 2.4vw, 36px);
  border-radius: 22px;
  background: color-mix(in srgb, color-mix(in srgb, #fff 80%, var(--pale)) 60%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: inset 0 2px 20px color-mix(in srgb, #fff 60%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 72%, transparent), 0 2px 36px -12px color-mix(in srgb, var(--deep) 24%, transparent);
}
.dir-h { margin: 0; font-size: clamp(22px, 1.8vw, 30px); font-weight: 900; line-height: 1.3; color: var(--deep); }
.dir-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.04em 0.16em; margin: -0.04em -0.04em -0.16em; }
.dir-m > span { display: inline-block; }
.dir-p { margin: 6px 0 0; font-size: clamp(14px, 1vw, 15.5px); font-weight: 500; line-height: 1.75; color: color-mix(in srgb, var(--deep) 78%, var(--pale)); }
.dir-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.dir-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dir-lbl { font-size: 13.5px; font-weight: 900; line-height: 1.3; color: var(--deep); }
.dir-ctl { position: relative; display: block; }
.dir-ic {
  position: absolute; top: 50%; right: 18px; width: 20px; height: 20px; translate: 0 -50%; pointer-events: none;
  background: var(--primary);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
  transition: background-color 0.3s;
}
.dir-in {
  display: block; width: 100%; height: 52px; margin: 0; padding: 0 50px 2px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent); border-radius: 16px;
  background: #fff; color: var(--deep); font: inherit; font-size: 16px; font-weight: 500;
  appearance: none; -webkit-appearance: none; outline: none;
  box-shadow: 0 6px 18px -12px color-mix(in srgb, var(--deep) 30%, transparent);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.dir-in::-webkit-search-cancel-button { -webkit-appearance: none; }
.dir-in:hover { border-color: color-mix(in srgb, var(--primary) 42%, transparent); }
.dir-in:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent); }
.dir-field:focus-within .dir-ic { background: var(--deep); }
select.dir-in { padding-left: 46px; cursor: pointer; }
.dir-field--select .dir-ctl::after {
  content: ""; position: absolute; top: 50%; left: 20px; width: 8px; height: 8px; pointer-events: none;
  border: solid var(--deep); border-width: 0 0 2px 2px; rotate: -45deg; translate: 0 -70%;
}
/* matches (only when approved records are present) */
.dir-results { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; }
.dir-results[hidden] { display: none; }
.dir-res { padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent); }
.dir-res b { display: block; font-size: 17px; font-weight: 900; line-height: 1.45; color: var(--deep); }
.dir-res span { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--deep) 66%, #fff); }
.dir.is-pending [data-d] { opacity: 0; }

/* Smaller desktops: the panel heading sits above the fields */
@media (max-width: 1199px) {
  .mbh-wash { background: linear-gradient(180deg, transparent 0%, transparent 84%, var(--pale) 100%), linear-gradient(270deg, var(--pale) 0%, color-mix(in srgb, var(--pale) 90%, transparent) 36%, color-mix(in srgb, var(--pale) 45%, transparent) 54%, transparent 72%), color-mix(in srgb, var(--primary) 3%, transparent); }
  .mbh-copy { max-width: min(560px, 52%); }
  .mbh-h { font-size: clamp(50px, 6vw, 68px); }
  .dir-panel { grid-template-columns: 1fr; align-items: stretch; }
  /* the two cards stack in one compact column on the photo side */
  .mbh-stats { inset: calc(var(--navh) + 24px) auto auto var(--g); display: flex; flex-direction: column; gap: 12px; width: 210px; }
  .mbh-card, .mbh-card--lead, .mbh-card--list { position: relative; left: auto; top: auto; bottom: auto; width: auto; padding: 14px 16px; }
  .mbh-big b { font-size: 40px; }
}
/* Portrait tablets and phones: copy → the two cards → the photo → the frosted panel over the photo's lower part */
@media (max-width: 1023px) {
  .mbh { min-height: 0; }
  .mbh-in { display: block; flex: none; min-height: 0; padding: calc(var(--navh) + 48px) var(--g) 0; }
  .mbh-copy { max-width: 640px; }
  .mbh-wash { display: none; }
  .mbh-media { position: relative; inset: auto; z-index: 0; order: 2; height: clamp(420px, 68vw, 620px); margin-top: -44px; }
  .mbh-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--pale) 0%, transparent 16%, transparent 100%), color-mix(in srgb, var(--primary) 6%, transparent); }
  .mbh-media img { object-position: 52% 40%; }
  .mbh-stats { position: relative; inset: auto; z-index: 2; display: grid; width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px; margin-top: 32px; }
  .mbh-card, .mbh-card--lead, .mbh-card--list { position: relative; left: auto; top: auto; bottom: auto; width: auto; }
  .dir { order: 3; margin-top: calc(clamp(420px, 68vw, 620px) * -0.42); }
}
@media (max-width: 699px) {
  .mbh-in { padding: calc(var(--navh) + 28px) 20px 0; }
  .mbh-copy { max-width: none; }
  .mbh-h { font-size: clamp(42px, 12vw, 54px); }
  .mbh-sub { font-size: 17px; }
  .mbh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
  .mbh-big { flex-direction: column; align-items: flex-start; gap: 4px; }
  .mbh-card { padding: 16px 14px; border-radius: 20px; }
  .mbh-card--list { padding: 14px 14px 12px; }
  .mbh-big { margin-top: 10px; padding-top: 10px; }
  .mbh-big b { font-size: 46px; }
  .mbh-big span { font-size: 14px; }
  .mbh-eb { font-size: 12.5px; }
  .mbh-rows li { gap: 8px; padding: 9px 0; }
  .mbh-rows b { min-width: 40px; height: 40px; padding: 0 5px; font-size: 16px; border-radius: 11px; }
  .mbh-rows span { font-size: 13.5px; white-space: nowrap; }
  .mbh-upd { font-size: 11.5px; padding-top: 9px; }
  .mbh-media { height: 440px; }
  .dir { margin-top: -150px; }
  .dir-wrap { padding: 0 16px; }
  .dir-panel { padding: 24px 18px 22px; border-radius: 22px; }
  .dir-form { grid-template-columns: 1fr; gap: 16px; }
  .dir-in { height: 56px; }
  .mbh .pt { width: calc(var(--w, 900px) * 0.5); }
}
@media (max-width: 359px) {
  .mbh-stats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mbh.is-pending [data-mh], .mbh.is-pending .mbh-media img, .dir.is-pending [data-d] { opacity: 1; }
  .dir-in, .dir-ic { transition: none; }
}

/* ==========================================================================
   MEMBERSHIP PAGE — مزايا العضوية (ref: Recut «Why Choose Recut?» — values read from its live CSS), mirrored.
   Centred heading; two cards side by side as an equal pair (client request: same width, same height, same
   padding, four lines each); on wide screens script.js slides them together and tilts them ±2° (ref), radius ≈ 20px, card heading 28px, list lines 18px / 1.6 with a round check
   before each. Calm white card on the RIGHT; the featured card on the LEFT: deep purple, the committee pattern at
   low opacity, a yellow accent (title marker + checks) only. Hover lifts a card slightly. Phones: stacked.
   ========================================================================== */
.mbn { --sun: #F5C542; position: relative; isolation: isolate; overflow: clip; padding: calc(var(--section-gap) * 0.7) 0 var(--section-gap); }
.mbn > .pt-layer { z-index: -1; }
.mbn-wrap { max-width: calc(1240px + var(--g) * 2); margin: 0 auto; padding: 0 var(--g); }
.mbn-h { margin: 0 0 clamp(40px, 4.4vw, 72px); text-align: center; font-size: clamp(40px, 4.2vw, 72px); font-weight: 900; line-height: 1.25; color: var(--deep); }
.mbn-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.06em 0.16em; margin: -0.04em -0.06em -0.16em; }
.mbn-m > span { display: inline-block; }

/* an equal pair: same width, same height (stretch), same padding, upright, aligned top and bottom */
.mbn-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: clamp(20px, 2vw, 28px); }
.mbn-card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(30px, 3.2vw, 52px);
  border-radius: 24px;
  transition: translate 0.6s var(--ease-out);
}
.mbn-card--base {
  background: #fff; color: var(--deep);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 14%, transparent), 0 2px 4px color-mix(in srgb, var(--deep) 6%, transparent);
}
.mbn-card--plus {
  background: var(--deep); color: #fff;
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--deep) 70%, transparent);
}
.mbn-card--plus > .pt-layer { z-index: -1; }
@media (hover: hover) and (pointer: fine) {
  .mbn-card:hover { translate: 0 -6px; }
}
.mbn-ct { position: relative; margin: 0 0 clamp(28px, 2.6vw, 40px); padding-bottom: 16px; font-size: clamp(26px, 2.2vw, 36px); font-weight: 900; line-height: 1.3; }
.mbn-ct::after { content: ""; position: absolute; right: 0; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--primary) 30%, transparent); }
.mbn-card--plus .mbn-ct::after { background: var(--sun); }
.mbn-badge {
  display: inline-flex; align-items: center; padding: 5px 14px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--sun) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sun) 70%, transparent);
  font-size: 0.5em; font-weight: 900; line-height: 1.3; color: var(--sun);
}
.mbn-list { display: grid; gap: clamp(14px, 1.4vw, 20px); margin: 0; padding: 0; list-style: none; }
.mbn-list li { display: flex; align-items: flex-start; gap: 14px; font-size: clamp(17px, 1.3vw, 20px); font-weight: 500; line-height: 1.65; }
.mbn-ck { flex: none; width: 28px; height: 28px; margin-top: 0.12em; }
.mbn-card--base .mbn-ck { color: var(--primary); --ck-ink: #fff; }
.mbn-card--base .mbn-list li { color: color-mix(in srgb, var(--deep) 88%, #fff); }
.mbn-card--plus .mbn-ck { color: var(--sun); --ck-ink: var(--deep); }
.mbn-card--plus .mbn-list li { color: color-mix(in srgb, #fff 90%, var(--deep)); }
.mbn-list li + li { padding-top: clamp(14px, 1.4vw, 20px); }
.mbn-card--base .mbn-list li + li { border-top: 1px solid color-mix(in srgb, var(--deep) 10%, transparent); }
.mbn-card--plus .mbn-list li + li { border-top: 1px solid color-mix(in srgb, #fff 12%, transparent); }
.mbn.is-pending [data-mb] { opacity: 0; }

@media (max-width: 1023px) {
  .mbn-cards { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 699px) {
  .mbn-h { font-size: clamp(36px, 10.5vw, 46px); }
  .mbn-card { padding: 26px 20px; border-radius: 22px; }
  .mbn-ct { font-size: 26px; }
  .mbn-list li { font-size: 17px; gap: 12px; }
  .mbn-ck { width: 26px; height: 26px; }
  .mbn .pt { width: calc(var(--w, 900px) * 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .mbn.is-pending [data-mb] { opacity: 1; }
  .mbn-card { transition: none; }
}

/* ==========================================================================
   MEMBERSHIP PAGE — الانضمام (ref: Metony CTA card — values read from its live CSS), mirrored for Arabic.
   One large dark card (ref radius 40px, 80px block padding): heading + line + the one button on the RIGHT;
   overlapping rounded panels (ref radius 20px, ≈ 287 × 385 at a 949px card) on the LEFT, tilted the opposite ways
   (ref ≈ 13° / 4°) and cut by the card's lower edge. Panels carry the committee's own material: the pattern on
   primary purple, the original emblem on lavender, the committee photograph. Deep-purple card with darker depth.
   ========================================================================== */
.mbj { position: relative; padding: 0 0 var(--section-gap); }
.mbj-wrap { max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); margin: 0 auto; padding: 0 var(--g); }
.mbj-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(440px, 36vw, 560px);
  padding: clamp(64px, 6.4vw, 96px) clamp(36px, 5vw, 88px);
  border-radius: clamp(28px, 2.8vw, 40px);
  background:
    radial-gradient(60% 90% at 22% 112%, color-mix(in srgb, var(--primary) 62%, transparent) 0%, transparent 70%),
    radial-gradient(55% 75% at 100% 0%, color-mix(in srgb, var(--primary) 26%, transparent) 0%, transparent 72%),
    linear-gradient(160deg, var(--deep) 0%, color-mix(in srgb, var(--deep) 72%, #000) 100%);
  color: #fff;
}
.mbj-card > .pt-layer { z-index: -1; }
.mbj-copy { position: relative; z-index: 3; max-width: min(620px, 46%); }
.mbj-h { margin: 0; font-size: clamp(64px, 6.4vw, 116px); font-weight: 900; line-height: 1.15; color: #fff; }
.mbj-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.06em 0.18em; margin: -0.04em -0.06em -0.18em; }
.mbj-m > span { display: inline-block; }
.mbj-p { max-width: 24em; margin: clamp(16px, 1.6vw, 24px) 0 0; font-size: clamp(18px, 1.45vw, 22px); font-weight: 500; line-height: 1.8; color: #C4B5FD; }
.mbj-cta { margin-top: clamp(28px, 2.8vw, 40px); }
.mbj-cta .btn-primary { box-shadow: 0 18px 40px -18px color-mix(in srgb, #000 80%, transparent); }

/* ---- the layered panels (LEFT) ---- */
.mbj-art { position: absolute; z-index: 1; inset: 0 auto 0 0; width: 54%; pointer-events: none; }
.mbj-pn {
  position: absolute; display: block;
  width: clamp(210px, 20vw, 320px); aspect-ratio: 287 / 385;
  rotate: var(--r, 0deg);
}
.mbj-pn-in {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  border-radius: clamp(16px, 1.5vw, 22px);
  box-shadow: 0 34px 70px -24px color-mix(in srgb, #000 70%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
.mbj-pn img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* back: the brand pattern on primary purple (ref back card, tilted towards the copy) */
.mbj-pn--pt { left: 55%; top: 36%; --r: 13deg; z-index: 1; }
.mbj-pn--pt .mbj-pn-in { background: linear-gradient(165deg, color-mix(in srgb, var(--primary) 92%, #fff) 0%, var(--primary) 45%, color-mix(in srgb, var(--primary) 55%, var(--deep)) 100%); }
.mbj-pn--pt .pt-layer { z-index: 0; }
/* middle: the original emblem on lavender */
.mbj-pn--mark { left: 32%; top: 19%; --r: -7deg; z-index: 2; }
.mbj-pn--mark .mbj-pn-in { display: grid; place-items: center; background: linear-gradient(160deg, var(--pale) 0%, #C4B5FD 100%); }
.mbj-pn--mark img { width: 58%; height: auto; object-fit: contain; }
/* front: the committee photograph */
.mbj-pn--photo { left: 4%; top: 37%; --r: -3deg; z-index: 3; }
.mbj-pn--photo img { object-position: 52% 40%; }
.mbj-pn--photo .mbj-pn-in::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--deep) 45%, transparent) 100%), color-mix(in srgb, var(--primary) 10%, transparent); }
.mbj.is-pending [data-mj] { opacity: 0; }

/* Tablet: smaller, tighter panels; the copy keeps its own half */
@media (max-width: 1199px) {
  .mbj-copy { max-width: 50%; }
  .mbj-art { width: 50%; }
  .mbj-pn { width: clamp(170px, 20vw, 230px); }
  .mbj-pn--pt { left: 46%; }
  .mbj-pn--mark { left: 24%; }
  .mbj-pn--photo { left: 2%; }
}
/* Portrait tablets and phones: heading → line → button → the panels below, cut by the card edge */
@media (max-width: 899px) {
  .mbj-card { flex-direction: column; align-items: stretch; min-height: 0; padding: 48px 28px 0; }
  .mbj-copy { max-width: none; }
  .mbj-art { position: relative; inset: auto; width: auto; height: clamp(250px, 52vw, 380px); margin: 32px -28px 0; }
  .mbj-pn { width: clamp(150px, 32vw, 230px); }
  .mbj-pn--photo { left: auto; right: 8%; top: 18%; }
  .mbj-pn--mark { left: 34%; top: 8%; }
  .mbj-pn--pt { left: 6%; top: 22%; --r: -13deg; }
}
@media (max-width: 699px) {
  .mbj-wrap { padding: 0 16px; }
  .mbj-card { padding: 40px 22px 0; border-radius: 26px; }
  .mbj-h { font-size: clamp(48px, 14vw, 64px); }
  .mbj-p { font-size: 17px; }
  .mbj-art { margin: 28px -22px 0; }
  .mbj-cta .btn { max-width: 100%; }
  .mbj .pt { width: calc(var(--w, 900px) * 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .mbj.is-pending [data-mj] { opacity: 1; }
}

/* ==========================================================================
   MEMBERSHIP PAGE — أسئلة شائعة (ref: Florin FAQ «Questions, settled.» — values read from its live CSS), mirrored.
   Heading block on the RIGHT (sticky while the list scrolls), accordion on the LEFT. Rows: 18px 22px padding,
   number chip 34 × 28 (radius 9), question ≈ 23px, toggle 44 × 44 (radius 15) — its upright stroke folds away and it
   turns 180° when open. Open row = dark tile (radius 26px, 6px block margin, 0 30px 60px −36px shadow); the answer
   opens by grid rows over 0.6s, its text fading in after 0.14s. Hairlines between closed rows only.
   Lavender band with rounded top corners (as the programs panel), the committee pattern at low opacity.
   ========================================================================== */
.mbq {
  position: relative; isolation: isolate; overflow: clip;
  padding: var(--section-gap) 0;
  border-radius: var(--panel-r) var(--panel-r) 0 0;
  background: #EBE5F6;
}
.mbq > .pt-layer { z-index: -1; }
.mbq-wrap {
  display: grid; grid-template-columns: minmax(300px, 0.85fr) 1.45fr; align-items: start; gap: 40px clamp(48px, 6vw, 120px);
  max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); margin: 0 auto; padding: 0 var(--g);
}
.mbq-head { position: sticky; top: calc(var(--navh) + 32px); }
.mbq-eb { display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(18px, 1.8vw, 26px); font-size: 14px; font-weight: 900; line-height: 1.3; color: var(--primary); }
.mbq-eb i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.mbq-h { display: flex; flex-direction: column; align-items: flex-start; gap: 0.06em; margin: 0; font-size: clamp(42px, 4.2vw, 72px); font-weight: 900; line-height: 1.16; color: var(--deep); }
.mbq-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.22em; }
.mbq-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.06em 0.2em; margin: -0.06em -0.06em -0.2em; }
.mbq-w { display: inline-block; }
.mbq-hl { position: relative; z-index: 0; display: inline-block; padding: 0.02em 0.2em 0.08em; }
.mbq-hl-bg { position: absolute; inset: 0; z-index: -1; border-radius: 0.18em; background: #C4B5FD; transform-origin: right center; }
.mbq-hl .mbq-m { position: relative; }
.mbq-p { max-width: 30em; margin: clamp(20px, 2vw, 28px) 0 0; font-size: clamp(17px, 1.3vw, 19px); font-weight: 500; line-height: 1.8; color: color-mix(in srgb, var(--deep) 76%, var(--pale)); }

/* ---- accordion ---- */
.mbq-list { margin: 0; padding: 0; list-style: none; }
.mbq-tile {
  position: relative; border-radius: 26px; color: var(--deep);
  transition: background-color 0.5s var(--ease-out), color 0.4s, margin 0.5s var(--ease-out), box-shadow 0.5s;
}
.mbq-item + .mbq-item .mbq-tile::before {
  content: ""; position: absolute; top: 0; right: 22px; left: 22px; height: 1px;
  background: color-mix(in srgb, var(--deep) 14%, transparent); transition: opacity 0.4s;
}
.mbq-item.is-open .mbq-tile::before, .mbq-item.is-open + .mbq-item .mbq-tile::before { opacity: 0; }
.mbq-item.is-open .mbq-tile {
  margin: 6px 0; background: var(--deep); color: #fff;
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--deep) 75%, transparent);
}
.mbq-item.is-open:first-child .mbq-tile { margin-top: 0; }
.mbq-hd { margin: 0; font: inherit; }
.mbq-q {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 clamp(18px, 2vw, 30px);
  width: 100%; min-height: 86px; margin: 0; padding: 18px 22px;
  border: 0; border-radius: 26px; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mbq-q:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.mbq-item.is-open .mbq-q:focus-visible { outline-color: #C4B5FD; }
.mbq-n {
  display: grid; place-items: center; min-width: 34px; height: 28px; padding: 0 9px; border-radius: 9px;
  font-size: 12.5px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep) 24%, transparent);
  transition: background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.mbq-qt { font-size: clamp(19px, 1.6vw, 24px); font-weight: 900; line-height: 1.4; transition: translate 0.5s var(--ease-out); }
.mbq-x {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--deep) 24%, transparent);
  transition: background-color 0.35s, color 0.35s, box-shadow 0.35s, rotate 0.5s var(--ease-out);
}
.mbq-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; overflow: visible; }
.mbq-x-v { transform-box: fill-box; transform-origin: center; transition: transform 0.45s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .mbq-q:hover .mbq-qt { translate: -4px 0; }
  .mbq-item:not(.is-open) .mbq-q:hover .mbq-x { background: color-mix(in srgb, var(--deep) 7%, transparent); }
}
.mbq-item.is-open .mbq-n, .mbq-item.is-open .mbq-x { background: #C4B5FD; color: var(--deep); box-shadow: none; }
.mbq-item.is-open .mbq-x { rotate: 180deg; }
.mbq-item.is-open .mbq-x-v { transform: scaleY(0); }

.mbq-a {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 0.6s var(--ease-out), visibility 0s linear 0.6s;
}
.mbq-item.is-open .mbq-a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.6s var(--ease-out), visibility 0s; }
.mbq-ai { min-height: 0; overflow: hidden; }
.mbq-ab {
  /* the answer starts under the question text: row padding + number chip + gap */
  padding: 2px calc(22px + 34px + clamp(18px, 2vw, 30px)) 30px 78px;
  opacity: 0; translate: 0 8px;
  transition: opacity 0.25s, translate 0.5s var(--ease-out);
}
.mbq-item.is-open .mbq-ab { opacity: 1; translate: 0 0; transition: opacity 0.6s 0.14s, translate 0.7s var(--ease-out) 0.14s; }
.mbq-at { max-width: 36em; margin: 0; font-size: clamp(16.5px, 1.25vw, 18px); font-weight: 500; line-height: 1.8; color: color-mix(in srgb, #fff 86%, #C4B5FD); }
.mbq.is-pending [data-mq] { opacity: 0; }

@media (max-width: 1023px) {
  .mbq-wrap { grid-template-columns: 1fr; }
  .mbq-head { position: static; max-width: 640px; }
}
@media (max-width: 699px) {
  .mbq { border-radius: 22px 22px 0 0; }
  .mbq-wrap { padding: 0 16px; gap: 32px; }
  .mbq-h { font-size: clamp(36px, 10.5vw, 46px); }
  .mbq-p { font-size: 16.5px; }
  .mbq-tile, .mbq-q { border-radius: 20px; }
  .mbq-q { gap: 0 12px; min-height: 74px; padding: 14px 14px; }
  .mbq-qt { font-size: 18px; }
  .mbq-x { width: 40px; height: 40px; border-radius: 13px; }
  .mbq-item + .mbq-item .mbq-tile::before { right: 14px; left: 14px; }
  .mbq-ab { padding: 0 calc(14px + 34px + 12px) 22px 14px; }
  .mbq .pt { width: calc(var(--w, 900px) * 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .mbq.is-pending [data-mq] { opacity: 1; }
  .mbq-tile, .mbq-n, .mbq-qt, .mbq-x, .mbq-x-v, .mbq-a, .mbq-ab { transition: none !important; }
}

/* ==========================================================================
   MEDIA CENTRE PAGE — hero (ref: Mailman hero — values read from its live CSS and code), brand version.
   A dark field of tall media tiles in five columns (ref tiles 194 × 225 at 1024px, 10px gaps, radius 10px; alternate
   columns lower), faded out at top and bottom (ref mask: clear → solid at 51% → clear); a radial veil behind the
   centred copy (ref 50% 60% at 50% 47%: solid → 85% at 49% → 78% at 79%); two soft beams from the top corners
   (ref ellipses 38% × 75%, white 15% → here lavender, turned ±23°). Tiles are image slots (see media.html).
   ========================================================================== */
.page-media main { background: var(--pale); }
.mdh {
  --mdh-bg: #1B0D38;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  min-height: clamp(680px, 100svh, 980px);
  padding: calc(var(--navh) + 48px) var(--g) calc(var(--panel-r) + clamp(72px, 9vh, 112px));
  background: linear-gradient(180deg, var(--mdh-bg) 0%, color-mix(in srgb, var(--mdh-bg) 86%, #000) 100%);
  color: #fff; text-align: center;
}
.mdh-field {
  position: absolute; inset: 0; z-index: -3; overflow: hidden;
  -webkit-mask: linear-gradient(0deg, transparent 0%, #000 51%, transparent 100%);
          mask: linear-gradient(0deg, transparent 0%, #000 51%, transparent 100%);
}
.mdh-cols {
  --gap: clamp(8px, 0.9vw, 14px);
  position: absolute; inset: -10% -1.5% auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap);
}
.mdh-col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.mdh-col--low { margin-top: 62%; }   /* ref: alternate columns sit about half a tile lower */
.mdh-tile {
  position: relative; display: block; overflow: hidden; aspect-ratio: 194 / 225; border-radius: clamp(10px, 0.9vw, 14px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #C4B5FD 10%, transparent);
}
.mdh-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
/* brand fills until the pictures arrive: deep surface, primary, lavender wash, pattern */
.mdh-tile--a { background: linear-gradient(160deg, #3D2380 0%, #2A1661 100%); }
.mdh-tile--p { background: linear-gradient(165deg, color-mix(in srgb, var(--primary) 88%, #fff) 0%, var(--primary) 40%, color-mix(in srgb, var(--primary) 55%, var(--mdh-bg)) 100%); }
.mdh-tile--l { background: linear-gradient(160deg, color-mix(in srgb, #C4B5FD 46%, transparent) 0%, color-mix(in srgb, #C4B5FD 20%, transparent) 100%); }
.mdh-tile--b { background: linear-gradient(160deg, #331C6E 0%, #22114C 100%); }
.mdh-tile--b::before {
  content: ""; position: absolute; inset: -20% -60%;
  background: url("assets/images/pattern-on-dark.png") center / cover no-repeat; opacity: 0.22;
}
.mdh-veil {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(46% 42% at 50% 50%, color-mix(in srgb, var(--mdh-bg) 94%, #000) 0%, color-mix(in srgb, var(--mdh-bg) 82%, transparent) 50%, color-mix(in srgb, var(--mdh-bg) 52%, transparent) 80%, color-mix(in srgb, var(--mdh-bg) 30%, transparent) 100%);   /* dark behind the copy, the tiles readable around it */
}
.mdh-beam {
  position: absolute; top: -25%; z-index: -1; width: 38%; height: 75%; border-radius: 999px; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, #C4B5FD 18%, transparent) 0%, transparent 100%);
}
.mdh-beam--r { right: 2%; rotate: 23deg; }
.mdh-beam--l { left: 2%; rotate: -23deg; }

.mdh-in { position: relative; z-index: 2; width: 100%; max-width: 980px; }
.mdh-h {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.08em 0.28em; margin: 0;
  font-size: clamp(60px, 6.6vw, 120px); font-weight: 900; line-height: 1.15; color: #fff;
}
.mdh-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.06em 0.2em; margin: -0.06em -0.06em -0.2em; }
.mdh-w { display: inline-block; }
.mdh-hl { position: relative; z-index: 0; display: inline-block; padding: 0.02em 0.2em 0.18em; color: var(--deep); }   /* room for the descender of «ي» */
.mdh-hl-bg { position: absolute; inset: 0; z-index: -1; border-radius: 0.18em; background: #C4B5FD; transform-origin: right center; }
.mdh-hl .mdh-m { position: relative; }
.mdh-sub {
  max-width: 44em; margin: clamp(26px, 2.6vw, 38px) auto 0;
  font-size: clamp(17px, 1.35vw, 21px); font-weight: 500; line-height: 1.85; color: color-mix(in srgb, #fff 80%, #C4B5FD);
}
.mdh.is-pending [data-md] { opacity: 0; }

/* the light news panel rises over the hero's lower edge with rounded corners */
.page-media .news { z-index: 1; margin-top: calc(var(--panel-r) * -1); border-radius: var(--panel-r) var(--panel-r) 0 0; }

@media (max-width: 1023px) {
  .mdh-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); inset: -6% -3% auto; }
  .mdh-col:nth-child(5) { display: none; }
  .mdh-beam { width: 52%; }
}
@media (max-width: 699px) {
  .mdh { min-height: clamp(560px, 86svh, 720px); padding: calc(var(--navh) + 32px) 20px calc(var(--panel-r) + 64px); }
  .mdh-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); inset: -4% -8% auto; }
  .mdh-col:nth-child(4) { display: none; }
  .mdh-h { font-size: clamp(46px, 13vw, 60px); }
  .mdh-sub { font-size: 16.5px; }
  .mdh-beam { width: 70%; height: 55%; }
}
@media (prefers-reduced-motion: reduce) {
  .mdh.is-pending [data-md] { opacity: 1; }
}

/* ==========================================================================
   MEDIA CENTRE PAGE — نبذة للإعلام: one wide dark-purple banner on the news section's lavender ground.
   Text on the RIGHT (≈60%), a thin lavender divider, the committee logo on the LEFT (≈40%) over a soft lavender
   glow and the original pattern. Darkest on the right behind the text, warmer purple light towards the logo.
   ========================================================================== */
.mdb { position: relative; background: #E9E2F9; padding: 0 0 var(--section-gap); }
.mdb-wrap { max-width: 1680px; margin: 0 auto; padding: 0 clamp(20px, 6vw, 112px); }
.mdb-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.5fr) 1px minmax(0, 1fr); align-items: center;
  gap: 0 clamp(32px, 4.4vw, 72px);
  min-height: clamp(240px, 21vw, 320px);
  padding: clamp(36px, 3.6vw, 56px) clamp(32px, 4.6vw, 80px);
  border-radius: clamp(24px, 2.2vw, 32px);
  background:
    radial-gradient(55% 110% at 12% 50%, color-mix(in srgb, var(--primary) 55%, transparent) 0%, transparent 70%),
    linear-gradient(270deg, #1B0D38 0%, var(--deep) 58%, color-mix(in srgb, var(--deep) 70%, var(--primary)) 100%);
  color: #fff;
  box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--deep) 70%, transparent);
}
.mdb-card > .pt-layer { z-index: -1; }
.mdb-copy { min-width: 0; }
.mdb-h { margin: 0; font-size: clamp(30px, 2.6vw, 44px); font-weight: 900; line-height: 1.3; color: #fff; }
.mdb-p { max-width: 34em; margin: clamp(14px, 1.4vw, 20px) 0 0; font-size: clamp(17px, 1.3vw, 20px); font-weight: 500; line-height: 1.9; color: color-mix(in srgb, #fff 78%, #C4B5FD); }
.mdb-rule { align-self: center; width: 1px; height: clamp(120px, 62%, 200px); background: linear-gradient(180deg, transparent, color-mix(in srgb, #C4B5FD 45%, transparent) 20%, color-mix(in srgb, #C4B5FD 45%, transparent) 80%, transparent); transform-origin: center; }
.mdb-art { position: relative; display: grid; place-items: center; min-height: 180px; }
.mdb-art::before {   /* soft lavender light behind the logo */
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 120%; aspect-ratio: 1.4; translate: -50% -50%; z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, #C4B5FD 26%, transparent), transparent);
}
.mdb-logo { display: block; width: clamp(150px, 12.5vw, 210px); height: auto; }
.mdb.is-pending [data-mb2] { opacity: 0; }

@media (max-width: 899px) {
  .mdb-card { grid-template-columns: 1fr; gap: 28px; padding: 36px 28px 32px; }
  .mdb-rule { justify-self: start; width: 64px; height: 1px; background: color-mix(in srgb, #C4B5FD 45%, transparent); }
  .mdb-art { min-height: 150px; }
  .mdb-logo { width: 150px; }
}
@media (max-width: 699px) {
  .mdb-wrap { padding: 0 16px; }
  .mdb-card { padding: 30px 22px 28px; border-radius: 22px; }
  .mdb-h { font-size: 28px; }
  .mdb-p { font-size: 16.5px; }
  .mdb .pt { width: calc(var(--w, 900px) * 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .mdb.is-pending [data-mb2] { opacity: 1; }
}

/* ==========================================================================
   SERVICES PAGE (الخدمات والفرص)
   Hero = a dark photo hero with a fixed heading and five changing background photos (.svh).
   ========================================================================== */
.page-services main { background: var(--pale); }

/* ---- Hero (ref: Millwright «.mwh» — values read from its live CSS), mirrored for Arabic ----
   Full-bleed photos stacked; the incoming one (.is-on) is wiped in over the previous (.is-prev): clip-path from the
   LEFT edge for «next» (ref: from the right), 1.05s cubic-bezier(.7,0,.2,1), a glowing lavender edge riding the wipe;
   the photo then settles 1.07 → 1 over 6.5s; a new photo every 5s, on its own (no controls — client request).
   Scrim: dark behind the copy on the RIGHT, clear towards the left, darker at top and bottom (ref values). Heading and
   line are fixed. */
.svh {
  --veil: color-mix(in srgb, #1B0D38 88%, #000);
  --w: cubic-bezier(0.7, 0, 0.2, 1);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: max(680px, min(100svh, 1040px));
  background: #1B0D38; color: #fff;
}
.svh-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.svh-ph { position: absolute; inset: 0; visibility: hidden; }
.svh-ph.is-prev { visibility: visible; z-index: 1; }
.svh-ph.is-on { visibility: visible; z-index: 2; animation: svh-wf 1.05s var(--w) both; }
.svh-media[data-dir="-1"] .svh-ph.is-on { animation-name: svh-wb; }
.svh-pic { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.svh-ph.is-on .svh-pic { animation: svh-settle 6.5s cubic-bezier(0.2, 0.6, 0.2, 1) both; }
.svh.is-first .svh-ph.is-on { animation: none; }
.svh.is-first .svh-ph.is-on .svh-pic { animation: svh-in 2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.svh-edge {
  position: absolute; top: 0; bottom: 0; z-index: 3; width: 3px; margin-left: -1.5px; opacity: 0;
  background: #C4B5FD; box-shadow: 0 0 28px 2px color-mix(in srgb, #C4B5FD 70%, transparent);
}
.svh-edge.is-run { animation: svh-ef 1.05s var(--w) both; }
.svh-media[data-dir="-1"] .svh-edge.is-run { animation-name: svh-eb; }
.svh-scrim {
  position: absolute; inset: 0; z-index: 4;
  background:
    linear-gradient(270deg, color-mix(in srgb, var(--veil) 86%, transparent) 0, color-mix(in srgb, var(--veil) 56%, transparent) 30%, color-mix(in srgb, var(--veil) 4%, transparent) 58%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--veil) 62%, transparent) 0, transparent 20%, transparent 56%, color-mix(in srgb, var(--veil) 92%, transparent) 100%),
    color-mix(in srgb, var(--veil) 12%, transparent);
}
@keyframes svh-wf { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes svh-wb { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes svh-ef { 0% { left: 0; opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes svh-eb { 0% { left: 100%; opacity: 1; } 88% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@keyframes svh-settle { from { scale: 1.07; } to { scale: 1; } }
@keyframes svh-in { from { opacity: 0.5; scale: 1.07; } to { opacity: 1; scale: 1; } }
@keyframes svh-up { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
.svh > .pt-layer { z-index: -1; }

.svh-body { position: relative; z-index: 5; width: 100%; max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); margin: 0 auto; padding: calc(var(--navh) + 40px) var(--g) clamp(56px, 7vw, 104px); }
.svh-copy { max-width: min(760px, 56%); }
.svh-h { display: flex; flex-direction: column; align-items: flex-start; gap: 0.04em; margin: 0; font-size: clamp(60px, 6.6vw, 116px); font-weight: 900; line-height: 1.12; color: #fff; animation: svh-up 1.1s 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.svh-hl { display: inline-block; padding: 0.02em 0.2em 0.12em; border-radius: 0.18em; background: #C4B5FD; color: var(--deep); }
.svh-sub { max-width: 34em; margin: clamp(20px, 2vw, 28px) 0 0; font-size: clamp(17px, 1.35vw, 21px); font-weight: 500; line-height: 1.85; color: color-mix(in srgb, #fff 90%, #C4B5FD); text-shadow: 0 1px 20px color-mix(in srgb, var(--veil) 80%, transparent); animation: svh-up 1.1s 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@media (max-width: 1199px) {
  .svh-copy { max-width: min(640px, 78%); }
  .svh-scrim { background: linear-gradient(180deg, color-mix(in srgb, var(--veil) 66%, transparent) 0, color-mix(in srgb, var(--veil) 46%, transparent) 16%, color-mix(in srgb, var(--veil) 60%, transparent) 46%, color-mix(in srgb, var(--veil) 94%, transparent) 100%), color-mix(in srgb, var(--veil) 12%, transparent); }
}
@media (max-width: 699px) {
  .svh { min-height: max(620px, min(100svh, 820px)); }
  .svh-body { padding: calc(var(--navh) + 28px) 20px 48px; }
  .svh-copy { max-width: none; }
  .svh-h { font-size: clamp(46px, 13.5vw, 62px); }
  .svh-sub { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .svh-ph, .svh-pic, .svh-edge, .svh-h, .svh-sub { animation: none !important; }
}

/* ---- الخدمات المتاحة (ref: Tutorwell .twd — values read from its live CSS and code), mirrored for Arabic ----
   Section n × 70vh + 70vh tall with a sticky 100svh stage (wide screens, motion allowed: .is-live). Copy on the
   RIGHT, the deck on the LEFT. A print's depth --d (0 = top) sets its place: 14px towards the LEFT and 12px up per
   step, turned −2.2° per step, 3.5% smaller per step (all capped at 3); passed prints fly off (40% across, −120vh,
   16°, fading). Transitions as the ref: .9s cubic-bezier(.6,−.05,.2,1) (scale .9s ease-out, opacity .6s). */
.svd { position: relative; isolation: isolate; overflow: clip; background: #EBE5F6; color: var(--deep); }
.svd > .pt-layer { z-index: -1; }
.svd.is-live { height: calc(var(--n) * 70vh + 70vh); }
.svd-stage {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 40px clamp(28px, 4vw, 72px);
  width: 100%; max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); margin: 0 auto;
  padding: var(--section-gap) var(--g);
}
.svd.is-live .svd-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; padding: calc(var(--navh) + 16px) var(--g) clamp(40px, 6vh, 72px); }
.svd-copy { max-width: 560px; }
.svd-h { display: flex; flex-direction: column; align-items: flex-start; gap: 0.06em; margin: 0; font-size: clamp(48px, 5vw, 88px); font-weight: 900; line-height: 1.15; color: var(--deep); }
.svd-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.06em 0.06em 0.2em; margin: -0.06em -0.06em -0.2em; }
.svd-w { display: inline-block; }
.svd-hl { position: relative; z-index: 0; display: inline-block; padding: 0.02em 0.2em 0.12em; }
.svd-hl-bg { position: absolute; inset: 0; z-index: -1; border-radius: 0.18em; background: #C4B5FD; transform-origin: right center; }
.svd-hl .svd-m { position: relative; }
/* progress chips (ref .twd-met: 46px, .35 → 1, current ringed, passed ticked) */
.svd-met { display: none; gap: 8px; margin: clamp(26px, 2.6vw, 36px) 0 0; padding: 0; list-style: none; }
.svd.is-live .svd-met { display: flex; }
.svd-met li {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: #fff; font-size: 13px; font-weight: 900; color: var(--deep);
  opacity: 0.35; outline: 2px solid transparent; outline-offset: 2px; transition: opacity 0.4s, outline-color 0.4s, background-color 0.4s, color 0.4s;
}
.svd-met li.is-met { opacity: 1; background: var(--deep); color: #fff; }
.svd-met li.is-cur { opacity: 1; outline-color: var(--deep); }

.svd-deck { display: grid; gap: 20px; }
.svd-card {
  position: relative; display: flex; flex-direction: column; padding: 12px; border-radius: 20px; background: #fff; color: var(--deep);
  box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--deep) 55%, transparent), 0 1px 0 color-mix(in srgb, var(--deep) 8%, transparent);
}
.svd-img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; background: color-mix(in srgb, var(--primary) 14%, var(--pale)); }
.svd-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.svd-st {   /* status (ref .twd-rate, mirrored to the top-left) */
  position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 8px; border-radius: 999px; background: color-mix(in srgb, var(--pale) 92%, transparent);
  font-size: 13px; font-weight: 900; line-height: 1; color: var(--deep);
}
.svd-st i { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.svd-txt { padding: 16px 8px 6px; }
.svd-n { margin: 0; font-size: 12.5px; font-weight: 900; letter-spacing: 0.08em; text-align: right; color: color-mix(in srgb, var(--deep) 55%, #fff); }
.svd-t { margin: 6px 0 0; font-size: clamp(24px, 2vw, 32px); font-weight: 900; line-height: 1.3; color: var(--deep); }
.svd-d { margin: 8px 0 0; font-size: clamp(15.5px, 1.1vw, 17px); font-weight: 500; line-height: 1.75; color: color-mix(in srgb, var(--deep) 72%, #fff); }

.svd.is-live .svd-deck { position: relative; display: grid; place-items: center; height: min(76vh, 700px); }
.svd.is-live .svd-card {
  position: absolute; width: min(100%, 470px); height: 100%; max-height: 660px;
  translate: calc(min(var(--d), 3) * -14px) calc(min(var(--d), 3) * -12px);
  rotate: calc(min(var(--d), 3) * -2.2deg);
  scale: calc(1 - min(var(--d), 3) * 0.035);
  transition: translate 0.9s cubic-bezier(0.6, -0.05, 0.2, 1), rotate 0.9s cubic-bezier(0.6, -0.05, 0.2, 1), scale 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, box-shadow 0.6s;
}
.svd.is-live .svd-img { aspect-ratio: auto; flex: 1 1 0%; min-height: 0; }
.svd.is-live .svd-card.is-gone {
  translate: 40% -120vh; rotate: 16deg; opacity: 0;
  box-shadow: 0 80px 90px -40px color-mix(in srgb, var(--deep) 70%, transparent);
}

/* ---- قيد الدراسة والتطوير: one dark rounded container on the lavender page, centred heading + short lavender rule,
   two equal white horizontal cards (text + status on the RIGHT, photo ≈42% on the LEFT) ---- */
.svx { position: relative; background: #EBE5F6; padding: clamp(8px, 2vw, 24px) 0 clamp(16px, 3vw, 40px); }
.svx-wrap { max-width: calc(clamp(1280px, 92vw, 1520px) + var(--g) * 2); margin: 0 auto; padding: 0 var(--g); }
.svx-box {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(48px, 4.4vw, 68px) clamp(28px, 4vw, 60px);
  border-radius: clamp(24px, 2.2vw, 32px);
  background:
    radial-gradient(55% 90% at 85% 0%, color-mix(in srgb, var(--primary) 38%, transparent), transparent 70%),
    linear-gradient(160deg, var(--deep) 0%, color-mix(in srgb, var(--deep) 70%, #1B0D38) 100%);
  color: #fff;
}
.svx-box > .pt-layer { z-index: -1; }
.svx-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.svx-h { margin: 0; font-size: clamp(32px, 3vw, 52px); font-weight: 900; line-height: 1.3; color: #fff; }
.svx-m { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.06em 0.18em; margin: -0.04em -0.06em -0.18em; }
.svx-m > span { display: inline-block; }
.svx-rule { display: block; width: 56px; height: 4px; margin-top: 16px; border-radius: 4px; background: #C4B5FD; transform-origin: center; }
.svx-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px); margin: clamp(32px, 3.4vw, 48px) 0 0; padding: 0; list-style: none; }
.svx-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 42%; align-items: stretch; gap: 0 clamp(16px, 1.6vw, 24px);
  min-height: clamp(200px, 15vw, 240px); padding: 12px;
  border-radius: 18px; background: #fff; color: var(--deep);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #C4B5FD 60%, transparent), 0 18px 40px -30px #000;
  transition: translate 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.svx-txt { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: clamp(12px, 1.4vw, 20px) clamp(10px, 1.2vw, 16px); }
.svx-st {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 8px; border-radius: 999px; background: #E9DDFB;
  font-size: 12.5px; font-weight: 900; line-height: 1; color: var(--deep);
}
.svx-st i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--primary); }   /* hollow: not available yet */
.svx-t { margin: 16px 0 0; font-size: clamp(21px, 1.7vw, 28px); font-weight: 900; line-height: 1.35; }
.svx-d { margin: 8px 0 0; font-size: clamp(15px, 1.05vw, 16.5px); font-weight: 500; line-height: 1.75; color: color-mix(in srgb, var(--deep) 70%, #fff); }
.svx-img { position: relative; overflow: hidden; min-height: 176px; border-radius: 12px; background: color-mix(in srgb, var(--primary) 14%, var(--pale)); }
.svx-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: scale 0.8s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .svx-card:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px #C4B5FD, 0 24px 48px -30px #000; }
  .svx-card:hover .svx-img img { scale: 1.03; }
}

/* ---- كيف تطلب خدمة؟ — three process cards under a numbered timeline (client reference), light and mirrored:
   step 01 on the RIGHT; a lavender track from the first marker to the far (left) end, the purple fill growing
   RIGHT → LEFT with the scroll (script.js); a marker lights and its card rises as the fill reaches it.
   Compact: heading, markers, cards and the button fit one desktop screen (1366×768 under the fixed header).
   Cards: white → faint lavender gradient, fine lavender border, soft purple-tinted shadow, inner top highlight.
   Default state = everything shown (no script / reduced motion); .is-live hides what has not been reached yet. ---- */
.svs {
  position: relative; isolation: isolate; overflow: clip; padding: clamp(36px, 3.2vw, 48px) 0 clamp(32px, 3vw, 44px);
  background: radial-gradient(70% 90% at 50% 0%, #fff 0%, transparent 70%), var(--pale); color: var(--deep);
}
.svs > .pt-layer { z-index: -1; }
.svs-wrap { max-width: calc(1240px + var(--g) * 2); margin: 0 auto; padding: 0 var(--g); }
.svs-h { margin: 0; text-align: center; font-size: clamp(34px, 3vw, 46px); font-weight: 900; line-height: 1.3; color: var(--deep); }
.svs-flow { position: relative; margin-top: clamp(28px, 2.6vw, 40px); }
.svs-track {   /* from the centre of marker 01 to the far end, fading out like the reference line */
  --x0: calc(18px + 23px);
  position: absolute; top: 23px; right: var(--x0); left: 0; height: 2px; translate: 0 -50%;
  background: linear-gradient(270deg, #D8C9EF 0%, #D8C9EF 82%, transparent 100%);
}
.svs-fill { position: absolute; inset: 0; background: linear-gradient(270deg, var(--primary) 0%, var(--primary) 84%, transparent 100%); transform-origin: right center; }
.svs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(20px, 1.7vw, 24px); margin: 0; padding: 0; list-style: none; }
.svs-step { display: flex; flex-direction: column; min-width: 0; }
.svs-n {   /* deep-purple marker with a soft lavender ring once lit */
  position: relative; z-index: 1; display: grid; place-items: center; align-self: flex-start; margin-right: 18px;   /* physical: the chip itself is dir="ltr" */
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 2px #D8C9EF, 0 0 0 6px var(--pale);
  font-size: 14.5px; font-weight: 900; color: color-mix(in srgb, var(--deep) 55%, #fff);
  transition: background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.svs-step.is-on .svs-n, .svs:not(.is-live) .svs-n { background: var(--deep); color: #fff; box-shadow: 0 0 0 5px #E4D8F5, 0 0 0 9px var(--pale); }
.svs-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 auto; gap: clamp(18px, 1.6vw, 24px);
  min-height: clamp(220px, 17.5vw, 262px); margin-top: clamp(20px, 1.6vw, 24px);
  padding: clamp(24px, 2.2vw, 32px); border-radius: 22px; text-align: center;
  background: linear-gradient(145deg, #FFFFFF 0%, #F6F1FF 100%);
  box-shadow: inset 0 0 0 1px rgba(91, 33, 182, 0.15), inset 0 1px 0 #fff, 0 18px 40px -26px rgba(46, 16, 101, 0.22);
  transition: translate 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out), opacity 0.7s var(--ease-out), scale 0.7s var(--ease-out);
}
.svs-ic {
  position: relative; display: block; flex: none; width: clamp(76px, 6vw, 92px); aspect-ratio: 1; border-radius: 22px;
  background: linear-gradient(145deg, #F1EAFE, #E8DDFB); box-shadow: inset 0 0 0 1px rgba(91, 33, 182, 0.12);
  transition: translate 0.5s var(--ease-out), background 0.4s;
}
.svs-ic::after {
  content: ""; position: absolute; inset: 26%; background: var(--primary);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.svs-t { max-width: 16em; margin: 0; font-size: clamp(18px, 1.45vw, 22px); font-weight: 900; line-height: 1.6; color: var(--deep); }
@media (hover: hover) and (pointer: fine) {
  .svs-card:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgba(91, 33, 182, 0.32), inset 0 1px 0 #fff, 0 24px 48px -26px rgba(46, 16, 101, 0.3); }
  .svs-card:hover .svs-ic { translate: 0 -2px; background: linear-gradient(145deg, #EDE3FE, #E0D2FA); }
}
.svs-cta { display: flex; justify-content: center; margin-top: clamp(28px, 2.4vw, 36px); transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out); }
/* live: what the line has not reached yet waits below */
.svs.is-live .svs-step:not(.is-on) .svs-card { opacity: 0; translate: 0 30px; scale: 0.97; }
.svs.is-live:not(.is-done) .svs-cta { opacity: 0; translate: 0 20px; }
.svs.is-pending [data-ss="h"] { opacity: 0; }
.svx.is-pending [data-sx], .svd.is-pending [data-sv] { opacity: 0; }

@media (max-width: 1099px) {
  .svd-stage { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .svd-h { font-size: clamp(42px, 5.4vw, 64px); }
}
@media (max-width: 899px) {
  .svd-stage { grid-template-columns: 1fr; }
  .svd-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svx-list { grid-template-columns: 1fr; }
  .svx-card { min-height: 200px; }
}
@media (max-width: 699px) {
  .svd-deck { grid-template-columns: 1fr; }
  .svd-stage { padding: 72px 16px; }
  .svd-h { font-size: clamp(40px, 11.5vw, 52px); }
  .svx-wrap, .svs-wrap { padding: 0 16px; }
  .svs-h { font-size: clamp(34px, 10vw, 44px); }
  .svx-h { font-size: clamp(28px, 8vw, 36px); }
  .svx-box { padding: 40px 16px 18px; border-radius: 22px; }
  .svx-card { grid-template-columns: 1fr; gap: 0; }
  .svx-img { order: -1; min-height: 0; aspect-ratio: 16 / 9; }   /* phones: photo on top, text below */
  /* phones: the line runs down the right side, each marker beside its card */
  .svs-steps { grid-template-columns: 1fr; gap: 20px; }
  .svs-step { flex-direction: row; align-items: flex-start; gap: 14px; }
  .svs-n { flex: none; margin: 0; width: 44px; height: 44px; }
  .svs-step.is-on .svs-n, .svs:not(.is-live) .svs-n { box-shadow: 0 0 0 4px #E4D8F5, 0 0 0 7px var(--pale); }
  .svs-track { top: 22px; bottom: 0; right: 22px; left: auto; width: 2px; height: auto; translate: 50% 0; background: linear-gradient(180deg, #D8C9EF 0%, #D8C9EF 85%, transparent 100%); }
  .svs-fill { background: linear-gradient(180deg, var(--primary) 0%, var(--primary) 85%, transparent 100%); transform-origin: center top; }
  .svs-card { margin-top: 0; min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 20px 18px; text-align: right; }
  .svs-ic { flex: none; width: 64px; border-radius: 18px; }
  .svs-t { margin: 0; font-size: 18px; }
  .svd .pt, .svx .pt, .svs .pt { width: calc(var(--w, 900px) * 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .svx.is-pending [data-sx], .svs.is-pending [data-ss], .svd.is-pending [data-sv] { opacity: 1; }
  .svs-card, .svs-cta, .svs-n { transition: none; }
  .svd-card, .svd-met li { transition: none !important; }
}

/* News cards now open their item page: the arrow row is the link and stretches over the whole card */
.ncard { position: relative; }
a.ncard-go { text-decoration: none; }
a.ncard-go::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 22px; }
a.ncard-go:focus-visible { outline: none; }
a.ncard-go:focus-visible::after { box-shadow: 0 0 0 3px var(--primary); }

/* ==========================================================================
   NEWS ITEM PAGES (news-01 … news-07.html) — content doc §7: «لكل خبر صفحة مختصرة: العنوان، التاريخ، فقرة أو
   فقرتان، صورة». A calm reading page in the site's language: crumb, index + date, headline, picture, text, the
   «جميع الأخبار» button and the previous / next items.
   ========================================================================== */
.page-news main { background: var(--pale); }
.nws { position: relative; isolation: isolate; overflow: clip; padding: calc(var(--navh) + clamp(40px, 5vw, 72px)) 0 var(--section-gap); color: var(--deep); }
.nws > .pt-layer { z-index: -1; }
.nws-wrap { max-width: calc(920px + var(--g) * 2); margin: 0 auto; padding: 0 var(--g); }
.nws-crumb { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--deep) 60%, #fff); }
.nws-crumb a { color: var(--primary); font-weight: 900; text-decoration: none; }
.nws-crumb a:hover { text-decoration: underline; }
.nws-meta { display: flex; align-items: center; gap: 14px; margin: clamp(22px, 2.4vw, 32px) 0 0; font-size: 14.5px; font-weight: 500; color: color-mix(in srgb, var(--deep) 66%, #fff); }
.nws-meta b { display: grid; place-items: center; min-width: 40px; height: 30px; padding: 0 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #E4D8F5; font-weight: 900; letter-spacing: 0.06em; color: var(--primary); }
.nws-h { margin: 14px 0 0; font-size: clamp(30px, 3.4vw, 52px); font-weight: 900; line-height: 1.35; color: var(--deep); text-wrap: balance; }
.nws-fig {
  position: relative; overflow: hidden; isolation: isolate; margin: clamp(28px, 3vw, 40px) 0 0; aspect-ratio: 16 / 9;
  border-radius: clamp(18px, 2vw, 28px); background: var(--deep);
}
.nws-fig > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.nws-fig.ncard-media--brand .pt-layer { z-index: 0; }
.nws-fig > .nws-mark { inset: 50% auto auto 50%; width: 22%; height: auto; translate: -50% -50%; object-fit: contain; z-index: 1; }
.nws-body { margin-top: clamp(28px, 3vw, 40px); }
.nws-body p { margin: 0 0 1em; font-size: clamp(18px, 1.4vw, 21px); font-weight: 500; line-height: 1.95; color: color-mix(in srgb, var(--deep) 86%, #fff); }
.nws-foot { display: grid; gap: 28px; margin-top: clamp(32px, 3.4vw, 48px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid #E4D8F5; }
.nws-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nws-pg {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 18px; background: #fff;
  box-shadow: inset 0 0 0 1px #E4D8F5; text-decoration: none; color: var(--deep);
  transition: box-shadow 0.4s, translate 0.4s var(--ease-out);
}
.nws-pg--next { text-align: left; }
.nws-pg small { font-size: 13px; font-weight: 900; color: var(--primary); }
.nws-pg span { font-size: 16px; font-weight: 900; line-height: 1.5; }
.nws-pg:hover { translate: 0 -3px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, #E4D8F5); }
@media (max-width: 699px) {
  .nws-wrap { padding: 0 16px; }
  .nws-pager { grid-template-columns: 1fr; }
  .nws-pg--next { text-align: right; }
}