/* =====================================================================
   AL MABARRAH v9.1 — Unified Design System
   Loaded AFTER v9-overrides.css; final visual layer.

   Goals (per DOCX 2026-05-24):
   - Single visual language across all sections (no template feel)
   - Photo grammar: show outcome not need (use pattern backgrounds until
     real photos arrive; never gradient + emoji on the same surface)
   - Strong CTA hierarchy with specific copy
   - Values translate into visual primitives: status pills, progress
     bars, last-update stamps, license/payment trust marks
   - Tone discipline: institutional language outside zakat
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Brand */
  --ds-teal-900: #0a2a3d;
  --ds-teal-800: #103a52;
  --ds-teal-700: #15506f;
  --ds-teal-500: #2a7090;
  --ds-teal-100: #d4e2ea;
  --ds-teal-050: #eef3f6;

  --ds-gold-900: #6f5419;
  --ds-gold-700: #8a6516;
  --ds-gold-500: #C9A227;
  --ds-gold-300: #e8cf83;
  --ds-gold-100: #f7eccb;

  --ds-cream-50:  #FFFFFF;
  --ds-cream-100: #f5f1e6;

  --ds-ink-900: #1a2530;
  --ds-ink-700: #324049;
  --ds-ink-500: #5c6b75;
  /* 4.58:1 on white. Was #8a99a4 at 2.93:1, and all four uses of this token
     are text or icons — a hint and a currency suffix on the zakat calculator,
     a timestamp in the audit ledger, a 28px icon on the board page — so it
     failed 1.4.3 and 1.4.11 everywhere it was used. #6c7780 is the lightest
     shade of the same hue that reaches 4.5, chosen so the token stays QUIET
     rather than turning into a second body colour (--ds-ink-500 is 5.50). */
  --ds-ink-300: #6c7780;
  --ds-ink-100: #d8dee3;

  --ds-success: #12525C;
  /* 6.03:1 على الأبيض. كان #9C7B1B بنسبة 3.99 — وهذه سابقة موثّقة في هذا
     المشروع بالرقم نفسه: اللون اختير أصلاً مقابل مسار شريط تقدّم حيث يكفي
     3:1 في 1.4.11، ثم استُخدم كنصّ حيث يطلب 1.4.3 أربعة ونصفاً. ووجدتُه
     اليوم في ثلاثة مواضع كلها نصّ — حالة المتبرع، شارة الحالة، ولوحة الأثر —
     ولا موضع واحد كحشو. فالرمز نفسه هو ما يُصلَح، لا المواضع الثلاثة. */
  --ds-progress: #7c5e24;
  --ds-open: #1e6fb8;

  /* Type */
  --ds-font: "Alexandria", "Noto Kufi Arabic", system-ui, -apple-system, sans-serif;
  --ds-h1: clamp(2rem, 4vw, 3rem);
  --ds-h2: clamp(1.5rem, 2.6vw, 2.1rem);
  --ds-h3: 1.2rem;
  --ds-body: 1rem;
  --ds-meta: 0.86rem;
  --ds-cap: 0.78rem;

  /* Spacing */
  --ds-s1: 4px;
  --ds-s2: 8px;
  --ds-s3: 12px;
  --ds-s4: 16px;
  --ds-s5: 24px;
  --ds-s6: 32px;
  --ds-s7: 48px;
  --ds-s8: 64px;
  --ds-s9: 96px;

  /* Radii */
  --ds-r-sm: 10px;
  --ds-r-md: 18px;
  --ds-r-lg: 24px;
  --ds-r-pill: 999px;

  /* Shadows */
  --ds-sh-1: 0 2px 6px rgba(10, 42, 61, 0.06);
  --ds-sh-2: 0 10px 28px rgba(10, 42, 61, 0.08);
  --ds-sh-3: 0 22px 56px rgba(10, 42, 61, 0.14);

  /* Lines */
  --ds-line: rgba(10, 42, 61, 0.10);
  --ds-line-strong: rgba(10, 42, 61, 0.18);
}

/* ---------- Body baseline ---------- */
body {
  background: var(--ds-cream-50);
  color: var(--ds-ink-900);
}

/* ---------- Page hero: unified treatment, no gradient blob ----------
   Not on a hero that carries its own photograph (2026-09-11). This rule's
   !important background beat the inline background-image on twelve pages —
   about, donate, contact, news, volunteer, faq… — so every one of those
   photographs, commissioned per page, was loaded and never shown. A hero with
   a photo now shows it, under the navy overlay motion-fixes.css draws in
   ::after; a hero without one keeps this navy ground. */
.page-hero:not([style*="background-image"]),
.hero-section {
  background: var(--ds-teal-900) !important;
  background-image:
    radial-gradient(circle at 18% 110%, rgba(212, 175, 55, 0.16), transparent 55%),
    radial-gradient(circle at 84% -10%, rgba(42, 112, 144, 0.42), transparent 55%),
    linear-gradient(180deg, var(--ds-teal-900) 0%, var(--ds-teal-800) 100%) !important;
  position: relative;
  padding-block: clamp(72px, 9vw, 120px) clamp(56px, 7vw, 96px);
  overflow: hidden;
}
.page-hero::before,
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 22px);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.7;
}
.page-hero > *,
.hero-section > * { position: relative; z-index: 2; }

.page-hero h1,
.hero-section h1,
#hero-title {
  font-size: var(--ds-h1);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: #fff;
  margin-block-end: var(--ds-s4);
}
.page-hero .crumb,
.page-hero .crumbs,
.hero-section .crumbs {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--ds-cap);
  letter-spacing: 0.06em;
  margin-block-end: var(--ds-s3);
}
.page-hero p,
.hero-section .hero-copy,
.hero-section p.lead {
  color: rgba(255, 255, 255, 0.86);
  max-width: 720px;
  line-height: 1.85;
  font-size: 1.04rem;
}
.page-hero .eyebrow,
.hero-section .eyebrow {
  color: var(--ds-gold-300);
  font-size: var(--ds-cap);
  letter-spacing: 0.18em;
  text-transform: none;
  font-weight: 700;
}

/* ---------- Brand thesis card on hero ---------- */
.brand-thesis {
  margin-block-start: var(--ds-s5);
  padding: var(--ds-s4) var(--ds-s5);
  border-radius: var(--ds-r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.85;
  backdrop-filter: blur(6px);
}
.brand-thesis .source {
  display: block;
  margin-block-start: var(--ds-s2);
  color: var(--ds-gold-300);
  font-size: var(--ds-cap);
  letter-spacing: 0.04em;
}

/* ---------- Unified card surface (overrides all the scattered ones) ---------- */
.impact-effect-card,
.tcase-card,
.goal-card,
.board-card,
.country-card,
.policy-card,
.surface-card {
  background: #fff !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: var(--ds-r-md) !important;
  box-shadow: var(--ds-sh-1) !important;
  transition: transform 220ms cubic-bezier(.22,.61,.36,1), box-shadow 220ms, border-color 220ms;
}
.impact-effect-card:hover,
.tcase-card:hover,
.goal-card:hover,
.board-card:hover,
.country-card:hover,
.policy-card:hover,
.surface-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ds-sh-2) !important;
  border-color: var(--ds-gold-300) !important;
}

/* Unified card inner anatomy */
.impact-effect-card { padding: var(--ds-s5); display: flex; flex-direction: column; gap: var(--ds-s2); }
.impact-effect-card .iec-title { color: var(--ds-ink-900); font-weight: 800; font-size: 1.06rem; }
.impact-effect-card .iec-desc  { color: var(--ds-ink-700); font-size: 0.94rem; line-height: 1.7; }
.impact-effect-card .iec-cta   { color: var(--ds-gold-700); font-weight: 700; font-size: 0.92rem; margin-block-start: auto; padding-block-start: var(--ds-s2); }

/* Pattern accent strip on each card (replaces emoji once SVG icons are wired) */
.impact-effect-card::before {
  content: "";
  display: block;
  height: 44px;
  width: 44px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 30%, var(--ds-gold-300) 0%, transparent 60%),
    var(--ds-teal-050);
  margin-block-end: var(--ds-s2);
}

/* Override emoji blocks if present */
.impact-effect-card .iec-emoji,
.board-card .b-avatar { display: none; }

/* ---------- Status pill ---------- */
.ds-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ds-r-pill);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.ds-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.ds-status.open      { background: rgba(30, 111, 184, 0.10); color: var(--ds-open); }
.ds-status.progress  { background: rgba(182, 137, 43, 0.12); color: var(--ds-progress); }
.ds-status.completed { background: rgba(18, 82, 92, 0.12);  color: var(--ds-success); }

/* ---------- CTA hierarchy ---------- */
.primary-button,
.btn-primary,
.tcase-cta,
.mb-cta {
  background: var(--ds-gold-500) !important;
  color: var(--ds-teal-900) !important;
  border: 1px solid var(--ds-gold-700) !important;
  font-weight: 800 !important;
  padding: 12px 22px !important;
  border-radius: var(--ds-r-pill) !important;
  box-shadow: 0 8px 20px rgba(182, 137, 43, 0.22) !important;
  letter-spacing: 0.005em;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.primary-button:hover,
.btn-primary:hover,
.tcase-cta:hover,
.mb-cta:hover {
  background: var(--ds-gold-700) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(182, 137, 43, 0.32) !important;
}

.ghost-button,
.btn-secondary,
.btn-ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  font-weight: 700 !important;
  padding: 12px 20px !important;
  border-radius: var(--ds-r-pill) !important;
}
.ghost-button:hover,
.btn-secondary:hover,
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* CTAs on light surfaces */
.v9-section .btn-secondary,
section.page-section .btn-secondary {
  color: var(--ds-teal-900) !important;
  border-color: var(--ds-teal-700) !important;
}

/* ---------- Section rhythm ---------- */
.v9-section {
  padding-block: var(--ds-s8);
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--ds-s5);
}
.v9-section h2 {
  font-size: var(--ds-h2);
  font-weight: 800;
  color: var(--ds-teal-900);
  margin-block-end: var(--ds-s3);
  letter-spacing: -0.005em;
}
.v9-section .lede {
  color: var(--ds-ink-700);
  font-size: 1.05rem;
  line-height: 1.85;
  max-width: 760px;
}
.v9-eyebrow {
  display: inline-block;
  font-size: var(--ds-cap);
  letter-spacing: 0.18em;
  color: var(--ds-gold-700);
  font-weight: 800;
  margin-block-end: var(--ds-s3);
}

/* ---------- Goal card refinement ---------- */
.goal-card {
  padding: var(--ds-s6) var(--ds-s5);
}
.goal-card .g-num {
  font-size: 2.4rem;
  /* 3.15:1 on the card's white. Was var(--ds-gold-300) = #e8cf83 at
     1.53:1 — invisible. These are real text nodes, «1» to «5», at 38px
     and weight 800, so 1.4.3 asks 3:1 for large text.
     Fixed HERE and not in v9-overrides.css, which declares the same
     selector at the same specificity and loads BEFORE this file — so the
     sheet named «overrides» is the one being overridden. Changing it there
     first had no effect at all. */
  color: #b68a35;
  font-weight: 900;
}
.goal-card .g-title { color: var(--ds-teal-900); }
.goal-card .g-body  { color: var(--ds-ink-700); }

/* ---------- Treatment-case card refinement ---------- */
.tcase-card {
  overflow: hidden;
}
.tcase-card .tcase-media {
  background: var(--ds-teal-050) center/cover no-repeat !important;
  position: relative;
}
.tcase-card .tcase-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 28%, rgba(212, 175, 55, 0.36), transparent 55%),
    radial-gradient(circle at 78% 76%, rgba(42, 112, 144, 0.42), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 16px);
}
.tcase-card .tcase-media::after {
  background: var(--ds-teal-900);
  color: #fff;
}
.tcase-card .tcase-body { gap: var(--ds-s3); }
.tcase-card .tcase-title { color: var(--ds-teal-900); }
.tcase-card .tcase-progress {
  background: var(--ds-ink-100) !important;
}
.tcase-card .tcase-progress > span {
  background: linear-gradient(90deg, var(--ds-gold-700), var(--ds-gold-500)) !important;
}

/* ---------- Monthly banner refinement ---------- */
.monthly-banner {
  background:
    radial-gradient(circle at 12% 110%, rgba(212, 175, 55, 0.20), transparent 55%),
    linear-gradient(115deg, var(--ds-teal-800), var(--ds-teal-900)) !important;
  padding: var(--ds-s6) var(--ds-s5) !important;
  border-radius: var(--ds-r-lg) !important;
  box-shadow: var(--ds-sh-3) !important;
  border: 1px solid rgba(212, 175, 55, 0.18);
}
.monthly-banner h3 { color: #fff; font-weight: 800; font-size: 1.3rem; }
.monthly-banner p  { color: rgba(255, 255, 255, 0.85); }
.monthly-banner .mb-cta {
  background: var(--ds-gold-500) !important;
  color: var(--ds-teal-900) !important;
}

/* ---------- Country drill-down refinement ---------- */
.country-grid { gap: var(--ds-s3); }
.country-card {
  padding: var(--ds-s4);
}
.country-card .flag { font-size: 1.8rem; }
.country-card .name { color: var(--ds-teal-900); font-weight: 800; }
.country-card .pcount { color: var(--ds-ink-500); }
.country-card.active {
  border-color: var(--ds-gold-500) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16), var(--ds-sh-2) !important;
}
.country-projects {
  background: #fff;
  border-radius: var(--ds-r-md);
  border: 1px solid var(--ds-line);
  padding: var(--ds-s6) var(--ds-s5) !important;
}
.country-projects h3 {
  color: var(--ds-teal-900);
  margin-block-end: var(--ds-s4);
  font-weight: 800;
}
.country-projects ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--ds-s3);
}
.country-projects li {
  padding: var(--ds-s3) var(--ds-s4);
  background: var(--ds-cream-50);
  border-radius: var(--ds-r-sm);
  border-inline-start: 3px solid var(--ds-gold-500);
  color: var(--ds-ink-700);
}

/* ---------- Board card refinement ---------- */
.board-card { padding: var(--ds-s6) var(--ds-s5); }
.board-card .b-avatar {
  display: grid !important;
  place-items: center;
  width: 72px; height: 72px;
  margin-inline: auto;
  border-radius: var(--ds-r-pill);
  background:
    radial-gradient(circle at 35% 30%, var(--ds-gold-300), var(--ds-gold-500) 70%) !important;
  color: var(--ds-teal-900) !important;
  font-weight: 900;
  font-size: 1.3rem;
}
.board-card .b-name { color: var(--ds-teal-900); }

/* ---------- Donor history table refinement ---------- */
.donor-history-table td { background: #fff; }
.donor-history-table .donor-history-status.completed { color: var(--ds-success); }
.donor-history-table .donor-history-status.progress  { color: var(--ds-progress); }
.donor-history-table .donor-history-status.open      { color: var(--ds-open); }

/* ---------- Hotline strip + socials refinement ---------- */
.hotline-strip {
  background: var(--ds-teal-900) !important;
  color: rgba(255,255,255,0.86) !important;
  padding: 10px var(--ds-s5);
  font-size: 0.86rem;
}
.hotline-strip .social-tray a {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
}
.hotline-strip .social-tray a:hover {
  background: var(--ds-gold-500);
  color: var(--ds-teal-900);
}
.hotline-strip .whatsapp-cta {
  background: rgba(37, 211, 102, 0.22);
  color: #25d366;
  border: 1px solid rgba(37, 211, 102, 0.3);
}

/* ---------- Site header refinement ---------- */
.site-menu {
  gap: var(--ds-s4) !important;
}
.site-menu a {
  font-weight: 600;
  font-size: 0.94rem;
  padding: 8px 4px;
  border-radius: var(--ds-r-sm);
  position: relative;
}
.site-menu a.active {
  background: var(--ds-gold-500);
  padding: 8px 14px;
  font-weight: 800;
}

/* ---------- Footer refinement ---------- */
.site-footer {
  background: var(--ds-teal-900) !important;
  color: rgba(255, 255, 255, 0.78);
}
.site-footer h3 { color: var(--ds-gold-300); font-weight: 800; }
.site-footer a  { color: rgba(255, 255, 255, 0.78); }
.site-footer a:hover { color: var(--ds-gold-300); }

/* ---------- Floating WA button: brand-aligned ----------
   This sheet loads AFTER v9-overrides.css despite the name, so the !important
   shadow declared here used to beat the resting shadow written next to the
   button's own layout — the button was restyled as a 56px icon circle and kept
   a 28px pill glow. Matched to it here rather than left to drift; the green
   stays !important because it is WhatsApp's colour and not a theme choice. */
.whatsapp-floating {
  background: #25d366 !important;
  box-shadow: 0 8px 22px rgba(11, 60, 35, 0.28) !important;
}
.whatsapp-floating:hover,
.whatsapp-floating:focus-visible {
  box-shadow: 0 14px 32px rgba(11, 60, 35, 0.38) !important;
}

/* ---------- Verse callout refinement ---------- */
.verse-callout {
  background:
    radial-gradient(circle at 12% 110%, rgba(212, 175, 55, 0.14), transparent 55%),
    linear-gradient(180deg, var(--ds-cream-50), #fff) !important;
  border-inline-start: 4px solid var(--ds-gold-500) !important;
  border-radius: var(--ds-r-md) !important;
  color: var(--ds-teal-900) !important;
  box-shadow: var(--ds-sh-1);
}
.verse-callout .verse-source { color: var(--ds-ink-500) !important; }

/* ---------- Reduced-motion + content-visibility (kept from overrides) ---------- */
@media (prefers-reduced-motion: reduce) {
  .impact-effect-card:hover,
  .tcase-card:hover,
  .goal-card:hover,
  .board-card:hover,
  .country-card:hover,
  .primary-button:hover,
  .btn-primary:hover { transform: none !important; }
}

/* ---------- Small RTL helpers ---------- */
[dir="rtl"] .country-projects li { border-inline-start: 3px solid var(--ds-gold-500); border-inline-end: none; }

/* =====================================================================
   v9.2 — Real-image card system (replaces emoji + pattern accents)
   ===================================================================== */

/* Hide ALL emoji on cards site-wide */
.iec-emoji,
.impact-effect-card .iec-emoji,
.board-card .b-avatar:not(.has-photo) { display: none !important; }

/* Re-arrange impact-effect-card to host a real image at top */
.impact-effect-card {
  padding: 0 !important;
  overflow: hidden;
}
.impact-effect-card::before { display: none !important; } /* kill the pattern strip */

.iec-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  background: var(--ds-teal-050);
  border-bottom: 1px solid var(--ds-line);
  filter: saturate(0.95) contrast(1.02);
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.impact-effect-card:hover .iec-image { transform: scale(1.03); }

.impact-effect-card .iec-body {
  padding: var(--ds-s5) var(--ds-s5) var(--ds-s5);
  display: flex;
  flex-direction: column;
  gap: var(--ds-s2);
  flex: 1 1 auto;
}
.impact-effect-card .iec-title,
.impact-effect-card .iec-desc,
.impact-effect-card .iec-cta { padding: 0; }

/* Treatment-case media: use real image background */
.tcase-card .tcase-media {
  aspect-ratio: 16 / 10;
  background-color: var(--ds-teal-050) !important;
  background-size: cover !important;
  background-position: center !important;
  filter: saturate(0.95);
}
.tcase-card .tcase-media::before { opacity: 0.32; mix-blend-mode: multiply; }

/* Country card: small thumbnail variant */
.country-card { padding: 0 !important; overflow: hidden; }
.country-card .c-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: var(--ds-teal-050);
}
.country-card .c-body { padding: var(--ds-s4); display: flex; flex-direction: column; gap: 4px; }
.country-card .flag { display: none; }
.country-card .c-flag-inline { font-size: 1rem; }

/* Board card / story card: image avatar */
.board-card .b-avatar.has-photo {
  width: 96px;
  height: 96px;
  border-radius: var(--ds-r-pill);
  overflow: hidden;
  margin-inline: auto;
  background: var(--ds-teal-050);
  border: 3px solid var(--ds-gold-300);
}
.board-card .b-avatar.has-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.95);
}

/* Hero background: when an image is provided as data-hero-image, paint it */
.page-hero[data-hero-image] {
  background-image:
    linear-gradient(0deg, rgba(10, 42, 61, 0.86), rgba(10, 42, 61, 0.6)),
    var(--page-hero-bg, none) !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Caption row on cards (status pill area) */
.iec-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-s2);
  font-size: var(--ds-cap);
  color: var(--ds-ink-500);
  margin-block-start: var(--ds-s2);
}
.iec-meta .ds-status { font-size: 0.74rem; padding: 3px 8px; }

/* =====================================================================
   v9.3 — Hotline-strip compaction (fixes "two headers" overlap)
   ===================================================================== */

.hotline-strip {
  padding: 6px var(--ds-s5) !important;
  font-size: 0.78rem !important;
  min-height: 34px;
  line-height: 1.4;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: var(--ds-s5) !important;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hotline-strip::-webkit-scrollbar { display: none; }
.hotline-strip > span:not([data-v9-socials]) {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.86;
}
.hotline-strip > span:not([data-v9-socials])::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ds-gold-500);
  margin-inline-end: 4px;
  flex: 0 0 4px;
}
.hotline-strip > span:not([data-v9-socials]):first-of-type::before { display: none; }
.hotline-strip b {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.hotline-strip [data-v9-socials] {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ds-s2);
  flex: 0 0 auto;
}
.hotline-strip .whatsapp-cta {
  padding: 3px 10px !important;
  font-size: 0.78rem;
}
.hotline-strip .social-tray a {
  width: 24px !important;
  height: 24px !important;
  font-size: 0.7rem;
}

/* On narrow screens, hide the wordy license text but keep socials + phones */
@media (max-width: 720px) {
  .hotline-strip > span:not([data-v9-socials]):nth-of-type(3) { display: none; }
  .hotline-strip { font-size: 0.74rem !important; }
}
@media (max-width: 520px) {
  .hotline-strip > span:not([data-v9-socials]):nth-of-type(2) { display: none; }
  .hotline-strip .whatsapp-cta span,
  .hotline-strip .whatsapp-cta { padding: 3px 8px !important; }
}

/* Site header gets its own clear separation from strip */

/* Some pages have TWO header markups stacked (legacy from v3.5-codex).
   Hide any duplicate <header data-header> that immediately follows another
   <header data-static-header>. */
header.site-header[data-static-header] + header.site-header { display: none; }
header.site-header + header.site-header { display: none; }

/* =====================================================================
   v9.4 — Impeccable visual repair pass
   Scope: make all sections visible, repair donation mobile flow,
   remove duplicate floating CTAs, harden RTL layout, and calm the footer.
   ===================================================================== */

/* Do not let animation setup hide whole sections. Motion should enhance,
   not make the page look empty during full-page capture or slow JS. */
.reveal,
[data-reveal],
[data-mb-reveal],
.mb-auto-reveal .page-hero-inner,
.mb-auto-reveal .surface-card,
.mb-auto-reveal .policy-card,
.mb-auto-reveal .project-card,
.mb-auto-reveal .program-card,
.mb-auto-reveal .news-card,
.mb-auto-reveal .contact-card,
.mb-auto-reveal .cta-band > * {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Full-page static captures and slower devices were leaving large blank
   bands because offscreen sections used content-visibility placeholders. */
.section-block,
.v9-section {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

.section-block {
  padding-block: clamp(64px, 7vw, 96px) !important;
}

.hero-section {
  min-height: auto !important;
  align-items: start !important;
  /* Was clamp(84px,8vw,120px) top and clamp(64px,7vw,96px) bottom: 115px and
     96px at 1440. With hero content already 1011px tall the section measured
     1362px -- 1.51 screens -- so nothing below the hero was ever glimpsed and
     a visitor had no reason to scroll. This !important is the declaration that
     actually wins: an edit to the padding in styles.css changed nothing, which
     is how it was found. */
  padding-block: clamp(64px, 5vw, 88px) clamp(48px, 4vw, 64px) !important;
}

.hero-carousel,
.hero-media,
.hero-media img,
.hero-shade,
.ripple-field {
  position: absolute !important;
}

.hero-carousel,
.hero-media,
.hero-media img,
.hero-shade {
  inset: 0 !important;
}

.hero-quickbar {
  position: relative !important;
  inset: auto !important;
  width: min(1180px, 100%) !important;
  justify-self: center;
  margin-block-start: clamp(28px, 4vw, 48px) !important;
  border-radius: 16px !important;
}

@media (max-width: 760px) {
  .hero-quickbar {
    grid-template-columns: 1fr !important;
  }
  .hero-quickbar div {
    padding: 14px 18px !important;
  }
}

/* Media cards should not reserve their raw 900px image attributes while lazy
   images wait to load. */
.project-card > img,
.news-card > img {
  display: block;
  width: 100%;
  height: clamp(170px, 16vw, 230px) !important;
  aspect-ratio: auto !important;
  object-fit: cover;
  background: var(--ds-cream-200);
}

.impact-effect-card .iec-image {
  display: block;
  width: 100%;
  height: clamp(140px, 13vw, 188px) !important;
  object-fit: cover;
  background: linear-gradient(135deg, #e8eff0, #f7f4ea);
}

.project-grid {
  align-items: stretch;
}

.project-card {
  display: flex;
  flex-direction: column;
}

.project-card-body {
  flex: 1;
  align-content: start;
}

@media (prefers-reduced-motion: no-preference) {
  .impact-effect-card,
  .tcase-card,
  .goal-card,
  .board-card,
  .country-card,
  .policy-card,
  .surface-card,
  .project-card,
  .news-card,
  .contact-card {
    animation: v9-rise-in 520ms cubic-bezier(.22,.61,.36,1) both;
    animation-delay: calc(min(var(--mb-row-index, 0), 4) * 60ms);
  }
  .primary-button,
  .btn-primary,
  .dv2-submit,
  .mb-cta,
  .tcase-cta {
    transition:
      transform 180ms cubic-bezier(.34,1.56,.64,1),
      background-color 180ms ease,
      box-shadow 180ms ease !important;
  }
  .primary-button:active,
  .btn-primary:active,
  .dv2-submit:active,
  .mb-cta:active,
  .tcase-cta:active {
    transform: translateY(1px) scale(0.99) !important;
  }
}

@keyframes v9-rise-in {
  from { opacity: 0.001; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Header: one clean row on desktop, one clean panel on tablet/mobile. */
.site-header {
  min-width: 0;
  align-items: center;
  min-height: 4.5rem !important;
  padding-block: 0.625rem !important;
}
/* THE HORIZONTAL LOCKUP (محمد فهيم 2026-09-11): mark on the right, the
   Arabic and English names beside it — assets/brand/logo-horizontal.webp,
   3.885:1. The stacked logo it replaces put the name under the mark at 84px
   wide, where the Arabic line measured 9px tall and could not be read.
   The box is sized from one height, --brand-h, and the file's own ratio, so
   each breakpoint (and the scrolled bar in header-services.css) changes one
   number and the width follows. */
.site-header {
  --brand-ratio: 3.885;
  --brand-h: 3rem;
}
.site-header .brand-mark {
  flex: 0 0 auto;
  display: inline-grid !important;
  place-items: center !important;
  width: calc(var(--brand-h) * var(--brand-ratio)) !important;
  min-width: calc(var(--brand-h) * var(--brand-ratio)) !important;
  height: var(--brand-h) !important;
  min-height: var(--brand-h) !important;
  overflow: visible !important;
  position: relative !important;
}
.site-header .brand-mark img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}
/* Header bar is white now (10 Sep 2026 redesign, header-v2.css) — the
   colored mark is the one that's visible against it. This rule used
   !important and loads after header-v2.css and styles.css both, so it was
   the actual final authority on logo colour; two other same-property edits
   in those files had no effect until this one changed. */
.site-header .brand-mark .brand-logo--colored {
  opacity: 1 !important;
}
.site-header .brand-mark .brand-logo--white {
  opacity: 0 !important;
}
.site-header .site-menu {
  min-width: 0;
  gap: clamp(8px, 1vw, 16px) !important;
}
.site-header .site-menu a {
  white-space: nowrap;
}
@media (min-width: 1281px) {
  .site-header .site-menu {
    overflow: visible !important;
  }
  .site-header .site-menu a {
    font-size: clamp(0.78rem, 0.82vw, 0.92rem);
    padding-inline: clamp(6px, 0.8vw, 12px);
  }
}
@media (max-width: 1280px) {
  .hotline-strip {
    display: none !important;
  }
  .site-header,
  header.site-header,
  header.site-header[data-header],
  header.site-header[data-static-header],
  header.site-header[data-relief-header] {
    inset-block-start: 0 !important;
  }
  .site-header:not(.is-menu-open):not(.menu-open) .site-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .site-header.is-menu-open .site-menu,
  .site-header.menu-open .site-menu {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  .site-header .site-menu {
    /* 4.5rem, not 4.25rem: header-v2.css's .site-header min-height moved to
       4.5rem with the 10 Sep 2026 logo enlargement; this was left behind and
       would have sat the panel 4px into the header's own bottom edge. */
    inset-block-start: calc(4.5rem + env(safe-area-inset-top)) !important;
    max-height: min(72vh, 34rem);
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  .site-header .site-menu a {
    justify-content: flex-start;
    min-height: 44px;
  }
  .site-header { --brand-h: 2.75rem; }
}
@media (max-width: 640px) {
  .site-header { --brand-h: 2.5rem; }
}
@media (max-width: 360px) {
  .site-header { --brand-h: 2.2rem; }
}

/* Hotline strip should never push content sideways. */
.hotline-strip {
  max-width: 100vw;
  justify-content: flex-start !important;
}
.hotline-strip > span {
  flex: 0 0 auto;
}

/* Donation page: the form is the product. It must own the first mobile screen. */
.donation-layout {
  min-width: 0;
}
.donation-layout > *,
.impact-layout > *,
.gift-layout > *,
.service-layout > *,
.page-section > *,
.section-inner {
  min-width: 0;
}
.dv2-form {
  max-width: 100%;
}
.dv2-pills {
  border-radius: var(--ds-r-md);
}
.dv2-pills button {
  min-width: min(100%, 7rem);
}
.dv2-select,
.dv2-grid-2 input,
.dv2-input-wrap input {
  min-width: 0;
}

@media (max-width: 900px) {
  .donation-layout,
  .donation-layout[style] {
    grid-template-columns: 1fr !important;
    gap: var(--ds-s5) !important;
    align-items: stretch !important;
  }
  .donation-layout .dv2-form {
    order: -1;
  }
  .donation-copy {
    padding: var(--ds-s5);
    border-radius: var(--ds-r-md);
    background: #fff;
    border: 1px solid var(--ds-line);
    box-shadow: var(--ds-sh-1);
  }
  .donation-copy h2 {
    color: var(--ds-teal-900) !important;
  }
  .donation-copy p,
  .donation-copy li {
    color: var(--ds-ink-700) !important;
  }
  .dv2-pills,
  .dv2-amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 520px) {
  .page-section,
  .v9-section {
    padding-inline: 16px !important;
  }
  .dv2-form {
    padding: 18px 14px;
    border-radius: 18px;
  }
  .dv2-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--ds-cream-100);
    border-radius: 16px;
    padding: 6px;
  }
  .dv2-pills button {
    min-width: 0;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 12px;
    white-space: normal;
    line-height: 1.35;
  }
  .dv2-amounts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .dv2-submit {
    min-height: 52px;
    border-radius: 16px;
  }
}

/* A BACKSTOP, no longer the fix.
   Nothing builds .mb-floating-wa any more — the call that created it was
   removed from motion.min.js, because a node built and styled on every
   page load only to be hidden here is work the page was doing for
   nothing. The rule stays so that if the builder is ever restored, a
   second green circle does not appear on top of the real button before
   anyone notices. .whatsapp-floating in v9-overrides.js is the one. */
.mb-floating-wa {
  display: none !important;
}
.whatsapp-floating {
  z-index: 80;
  inset-inline-end: 18px;
  inset-block-end: max(18px, calc(env(safe-area-inset-bottom) + 14px));
}
body:has(.action-dock) .whatsapp-floating {
  inset-block-end: max(86px, calc(env(safe-area-inset-bottom) + 78px));
}
body:has(.dv2-form) .whatsapp-floating,
body:has(.zv2-form) .whatsapp-floating,
body:has(.donation-panel) .whatsapp-floating,
body:has(.audit-shell) .whatsapp-floating {
  display: none !important;
}
/* Shown at every width now (محمد فهيم 2026-09-11). It was hidden below
   900px — so the phone visitor, the one most likely to message rather than
   call, had no way to. Its size scales with the viewport in v9-overrides.css. */

/* Bottom action dock: compact, readable, never overlapping page controls. */
.action-dock {
  z-index: 75;
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  scrollbar-width: none;
  transform: none !important;
}
.action-dock::-webkit-scrollbar { display: none; }
.action-dock a,
.action-dock button {
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .action-dock {
    inset-inline: 12px !important;
    inset-block-end: max(12px, env(safe-area-inset-bottom)) !important;
    justify-content: space-between;
  }
  .action-dock a,
  .action-dock button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 10px !important;
  }
}

/* Tables become deliberate scrollers instead of pushing the page off-axis. */
.donor-history-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}
.donor-history-table thead,
.donor-history-table tbody,
.donor-history-table tr {
  min-width: 720px;
}

/* Live monitor: keep track controls readable and avoid nested interactive
   target collisions around the destination cards. */
.track-rail {
  grid-template-columns: repeat(4, minmax(104px, 1fr)) !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.track-rail::-webkit-scrollbar { display: none; }
.portal-track-card.is-compact {
  min-width: 104px;
  white-space: normal;
}
.portal-track-card.is-compact h3 {
  overflow-wrap: anywhere;
}
.destination-button .destination-case-note {
  display: block;
  margin-top: 0.3rem;
  color: var(--ds-gold-500);
  font-size: 0.72rem;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .tech-monitor .section-block {
    padding-inline: 16px !important;
  }
  .monitor-tabs {
    justify-content: flex-start !important;
    gap: 6px;
    overflow-x: visible;
    direction: rtl;
    padding-inline: 16px !important;
  }
  .monitor-tabs a {
    direction: rtl;
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 8px;
    font-size: 13px;
  }
  .globe-stage-card,
  .globe-stage-topline,
  .globe-stage,
  .globe-status-row,
  .destination-list {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .globe-stage-card {
    padding: 16px !important;
    margin-inline: 0 !important;
  }
  .globe-stage-topline {
    position: static !important;
    inset: auto !important;
    align-items: stretch !important;
  }
  .globe-stage-topline > span,
  .globe-stage-topline > button,
  .globe-hint,
  .globe-status-row small {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .track-rail {
    width: 100%;
    grid-template-columns: repeat(4, minmax(96px, 1fr)) !important;
  }
  .globe-stage {
    min-height: 20rem !important;
  }
  .globe-webgl {
    width: 100% !important;
    max-width: 100% !important;
  }
  .destination-list {
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  .globe-stage-topline {
    align-items: stretch !important;
    flex-direction: column;
    position: static !important;
  }
  .globe-stage-topline > button {
    width: 100%;
  }
}

.faq-item:not([open]) .faq-body {
  display: none !important;
}

.legal-shell .legal-foot span {
  min-width: 0;
}
.legal-shell .legal-foot span:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.legal-shell .legal-foot a {
  margin-left: 0 !important;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .legal-header {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 12px;
  }
  .legal-header nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
  }
  .legal-header nav a {
    margin: 0 !important;
  }
}

/* Activity marquee is decorative. Keep it clipped inside its band. */
.activity-strip {
  overflow: hidden !important;
  contain: paint;
}
.activity-strip .marquee-track,
.activity-strip .marquee-track span {
  max-width: none;
}

/* Footer polish: remove list clutter, tighten columns, preserve scanability. */
.mabarrah-footer {
  overflow: hidden;
}
.mabarrah-footer .mb-footer-grid {
  align-items: start;
}
.mabarrah-footer ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.mabarrah-footer li {
  margin: 0 !important;
}
.mabarrah-footer .mb-footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mabarrah-footer .mb-footer-col:not(.mb-footer-about) a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.72);
  flex: 0 0 auto;
}
.mabarrah-footer .mb-footer-social a::before,
.mabarrah-footer .mb-footer-legal a::before,
.mabarrah-footer .mb-footer-contact a::before {
  content: none !important;
}
.mb-news-row {
  min-width: 0;
}
.mb-news-row input {
  min-width: 0;
}
@media (max-width: 640px) {
  .mb-news-row {
    flex-direction: column;
  }
  .mabarrah-footer .mb-footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Unified form feedback for contact, aid and volunteer flows. */
.form-status,
[data-status] {
  display: block;
  min-height: 1.4em;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
}
.form-status.is-success,
[data-status].is-success {
  color: var(--ds-success, #12525C) !important;
  font-weight: 800;
}
.form-status.is-error,
[data-status].is-error {
  color: #a23535 !important;
  font-weight: 800;
}

.uaepass-button.is-disabled,
.uaepass-button[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.68;
  filter: grayscale(0.25);
}

/* ===== iOS/mobile render-memory hardening (2026-06-04) =====
   Fixes Safari "A problem repeatedly occurred" tab crash caused by GPU/compositing
   memory exhaustion (backdrop-filter + cross-document view transitions + many
   infinite animations). JS heap was tiny (2MB) — the crash is in the render layer. */

/* Cross-document view transitions snapshot the whole page on every navigation —
   heavy/unstable on iOS Safari. Disable (progressive enhancement only). */
@view-transition { navigation: none; }

@media (max-width: 820px) {
  /* backdrop-filter is the single biggest iOS Safari memory crasher. Drop it on
     phones; the affected surfaces use near-opaque backgrounds so legibility holds. */
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Stop continuous GPU compositing from purely decorative infinite animations. */
  .hero-section::before, .page-hero::before, .audit-head::before,
  .mb-leaf-ornament, .mb-scroll-progress, [class*="sheen"], [class*="shimmer"] {
    animation: none !important;
  }
  /* Keep the scrolled header readable without the blur. */
  .site-header.mb-header-scrolled { background-color: rgba(10,42,61,0.98) !important; }
}

/* ============================================================================
   LIGHT GROUND — the last two dark bands on the homepage.
   ==========================================================================

   Measured at 1256x782 before this: the homepage painted 12801 units of light
   background against 5160 of dark, a ratio of 2.5 : 1. alihsan.ae, measured
   with the same script at the same viewport, is 35.3 : 1. Both sites use
   almost the same palette — their gold #C79207 to our #C9A227, their grey
   #737373 to our #5c6b75 — so the difference was never the colours. It was
   how much area the dark ones cover.

   Three bands carried it. .mbn--abyss, 2387px and the tallest section on the
   page, is handled in mabarrah-nocturne.css by .mbn--daylight. These are the
   other two, both homepage-only (grep: index.html and nothing else), so
   neither change can reach another page.

   Left dark ON PURPOSE, because a light theme is not an absence of dark:
     · the hero, 1266px  — an inline background on #home
     · the donate CTA strip, 289px — a gradient that should stand out
   Those two carry the identity. What they must not do is share the page with
   three more dark bands, which is what turned a navy accent into the site's
   ground colour.

   Appended here because this is the LAST stylesheet the pages load, and on
   this site load order and !important decide the winner rather than the file
   that reads like the owner of the rule. That has caught this project out
   before: hero padding was edited in styles.css while a
   `padding-block: … !important` here was what the browser actually used. */

/* Was: background var(--teal-900) #0d3228 with white text, 859px tall. */
.impact-block {
  background: linear-gradient(180deg, #ffffff 0%, #eef3f6 100%);
  color: var(--ds-ink-900, #1a2530);
}
.impact-block h2,
.impact-block h3 { color: var(--ds-teal-900, #0a2a3d); }
/* The dark theme muted text with translucent cream, which on white leaves
   grey-on-white at about 1.5:1 and is unreadable. --ds-ink-500 is 5.50:1. */
.impact-block p,
.impact-block li,
.impact-block .muted,
.impact-block small { color: var(--ds-ink-500, #5c6b75); }
.impact-block [class*="card"],
.impact-block [class*="panel"],
.impact-block [class*="tile"] {
  background: #ffffff;
  border: 1px solid rgba(10, 42, 61, 0.12);
  box-shadow: 0 1px 2px rgba(10, 42, 61, 0.04), 0 8px 24px -16px rgba(10, 42, 61, 0.14);
}

/* Was: background var(--ink-900) #131316 with white text — a 56px near-black
   band across the page, which for its height was doing more to darken the page
   than any section on it. Kept as a distinct strip by its rules, not by being
   the only black thing on a white page. */
.activity-strip {
  background: #eef3f6;
  color: var(--ds-ink-700, #324049);
  border-block: 1px solid rgba(10, 42, 61, 0.10);
}
/* The edge fades are cut from the strip's own colour: left as the old
   near-black they would print two dark smudges on a pale strip. */
.activity-strip::before { background: linear-gradient(90deg, #eef3f6, rgba(238, 243, 246, 0)); }
.activity-strip::after  { background: linear-gradient(270deg, #eef3f6, rgba(238, 243, 246, 0)); }
.activity-strip a { color: var(--ds-teal-700, #15506f); }
/* The strip's items are coloured by `.marquee-track span` in styles.css with
   rgba(251,250,246,.82) — cream, for the near-black ground this strip used to
   have. Lightening the ground without this left cream on #eef3f6 at 1.07:1:
   twenty items of invisible text, which my own contrast sweep caught before
   the commit. The lesson is the one already recorded for this repo — change a
   ground and the text on it in the same edit, then MEASURE, because the
   declaration that owns the colour is rarely in the file you just touched. */
.activity-strip .marquee-track span { color: var(--ds-ink-700, #324049); }
.activity-strip .marquee-track span b,
.activity-strip .marquee-track span strong { color: var(--ds-teal-900, #0a2a3d); }

/* `hidden` must win.
   The UA stylesheet gives [hidden] display:none, but ANY author rule setting
   display beats it — and this site sets display on .section-block, .v9-section
   and a dozen grid containers. So a section marked hidden would still render.
   Declared here because this is the last stylesheet the pages load. */
[hidden] { display: none !important; }

/* ============================================================================
   THE HERO, ON A LIGHT GROUND.
   ==========================================================================

   The last dark band on the homepage, and the largest: 1339px, and after the
   page was trimmed it was 2656 of the 2656 units of dark ground left on the
   live site — the whole remainder, hero plus footer.

   EVERY SURFACE BELOW WAS ENUMERATED FROM THE LIVE PAGE, NOT GUESSED

   The hero holds about twenty coloured surfaces, and the ones that mattered
   were the translucent whites: rgba(255,255,255,.05) on the thesis card,
   rgba(251,250,246,.1) on the inactive chips, rgba(251,250,246,.12) on the
   text button, rgba(10,50,54,.68) on the quick-donation head. Each of those
   is invisible on white if left alone, and each carries white text, which is
   how a hero becomes a blank rectangle. That is why this was not attempted
   under a same-day deadline earlier and is being done deliberately now.

   The background and `color: white` are set INLINE on #home, so the two
   declarations that beat them carry !important. Nothing else here needs it.

   The logo mark was checked off its own pixels before trusting it on white:
   assets/brand/logo-mark.png, 678x592, mean luminance 104/255 and not one
   pixel above 225. It is a coloured mark, not a white knock-out, so it does
   not need swapping. A white-on-white logo would have been the first thing
   anyone saw.

   Contrast, computed and not assumed, against the #f7fafb–#eef3f6 ground:
     #0a2a3d  headings and the h1        14.5:1
     #324049  hero copy                   9.0:1
     #12525C  eyebrow, ghost button       8.6:1
     #5c6b75  the quiet meta line         5.4:1
     #8a6516  gold as TEXT                5.2:1
   The CTA keeps #C9A227 as a FILL with #0a2a3d on it (11.3:1). That gold as
   TEXT measures 2.42:1 and is never used as text here. */

#home.hero-section {
  background:
    radial-gradient(120% 90% at 50% 4%, rgba(18, 82, 92,.07), transparent 55%),
    radial-gradient(90% 120% at 50% 122%, rgba(18,82,92,.08), transparent 60%),
    linear-gradient(165deg, #ffffff 0%, #f7fafb 55%, #eef3f6 100%) !important;
  color: var(--ds-ink-700, #324049) !important;
  border-block-end: 1px solid rgba(10, 42, 61, .10);
}

/* screen lightens; on white it lightens to white and the texture disappears.
   multiply is the light-ground equivalent, at a much lower opacity because a
   dark line on white is far louder than a pale line on near-black. */
#home .mbn__contours { mix-blend-mode: multiply; opacity: .12; }

#home .hero-content { color: var(--ds-ink-700, #324049); }
#home #hero-title,
#home h1 { color: var(--ds-teal-900, #0a2a3d); }
#home .eyebrow { color: var(--ds-teal-700, #12525C); }
#home .hero-copy { color: var(--ds-ink-700, #324049); }
#home .hero-actions { color: var(--ds-ink-700, #324049); }

/* The gold CTA already carried navy text, so it works unchanged on either
   ground — the one surface in the hero that needed nothing. */
#home .ghost-button {
  background: #ffffff;
  color: var(--ds-teal-700, #12525C);
  border-color: rgba(18, 82, 92, .38);
}
#home .ghost-button:hover {
  background: var(--ds-teal-050, #eef3f6);
  border-color: var(--ds-teal-700, #12525C);
}

/* Was rgba(255,255,255,.05) on rgba(255,255,255,.14) — a card defined by being
   slightly lighter than a dark ground. On white that is nothing at all, so it
   is defined by an edge and a shadow instead. */
#home .brand-thesis {
  background: #ffffff;
  border: 1px solid rgba(10, 42, 61, .12);
  color: var(--ds-ink-700, #324049);
  box-shadow: 0 1px 2px rgba(10, 42, 61, .04), 0 10px 30px -20px rgba(10, 42, 61, .16);
}
#home .brand-thesis .source { color: var(--ds-ink-500, #5c6b75); }

#home .hero-command-card,
#home .hero-donation-card { color: var(--ds-ink-700, #324049); }
/* THE RADIUS, which this rule gave the card a surface without.
   Measured across the page before touching it: .gdoor 18px, the partner chips
   18px, every button and the card's own header 8px — and this card 0px, the
   one square edge on the homepage. So it takes the CARD radius, 18px
   (--ds-r-md), not the control radius: it is a card holding controls, and
   matching the 8px of the buttons inside it would have flattened that
   difference instead of fixing the inconsistency.

   AND A STATE, because the flat rest-shadow was the other half of why this
   card read as a slab. Not a hover lift: .gdoor lifts because the whole card
   is a link, and this one is a form — lifting a form under the cursor moves
   the target the visitor is reaching for. So the shadow deepens on hover, and
   :focus-within does the same and warms the border to teal, which is the one
   moment the card should say the visitor is working inside it. Both are
   composited properties only, so neither costs a frame.

   overflow:hidden so the gold rule below follows the corners. The inner
   controls sit 18-24px inside the padding, so no focus ring is clipped by it. */
#home .hero-donation-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(10, 42, 61, .12);
  border-radius: var(--ds-r-md, 18px);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 42, 61, .04), 0 18px 46px -26px rgba(10, 42, 61, .20);
  transition: box-shadow 260ms cubic-bezier(.22, .61, .36, 1), border-color 260ms ease;
}
/* A 3px gold rule across the top edge. The same accent that marks a section
   opening elsewhere on this page, used here to mark the one surface a visitor
   can give from — and it is drawn, not bordered, so it does not enter the box
   model and shift the card's own 1px edge. */
#home .hero-donation-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ds-gold-500, #C9A227), #E3C15A 55%, rgba(201, 162, 39, .35));
  pointer-events: none;
}
#home .hero-donation-card:hover {
  box-shadow: 0 2px 6px rgba(10, 42, 61, .06), 0 26px 60px -30px rgba(10, 42, 61, .26);
}
#home .hero-donation-card:focus-within {
  border-color: rgba(18, 82, 92, .55);
  box-shadow: 0 2px 6px rgba(10, 42, 61, .06), 0 26px 60px -30px rgba(10, 42, 61, .26);
}
@media (prefers-reduced-motion: reduce) {
  #home .hero-donation-card { transition: none; }
}
/* Was rgba(10,50,54,.68), a dark tinted header inside a dark card. */
#home .quick-donation-head {
  background: var(--ds-teal-050, #eef3f6);
  border-color: rgba(10, 42, 61, .10);
  color: var(--ds-teal-900, #0a2a3d);
}
#home .quick-donation-head span { color: var(--ds-ink-500, #5c6b75); }

#home .hero-chips,
#home .hero-amounts { color: var(--ds-ink-700, #324049); }
/* The unselected chips and amounts were white text on rgba(251,250,246,.1):
   1.05:1 the moment the ground turns white. The selected ones keep the gold
   fill with near-black text and are left alone. */
#home .hero-chips button:not(.active),
#home .hero-amounts button:not(.active) {
  background: #ffffff;
  color: var(--ds-ink-700, #324049);
  border-color: rgba(10, 42, 61, .16);
}
#home .hero-chips button:not(.active):hover,
#home .hero-amounts button:not(.active):hover {
  background: var(--ds-teal-050, #eef3f6);
  border-color: var(--ds-teal-700, #12525C);
  color: var(--ds-teal-900, #0a2a3d);
}
#home .text-button {
  background: var(--ds-teal-050, #eef3f6);
  color: var(--ds-teal-700, #12525C);
}
#home .text-button:hover {
  background: #e2ebf0;
  color: var(--ds-teal-900, #0a2a3d);
}

/* The quickbar was ALREADY light — #1f1f23 on rgba(251,250,246,.96) — so on a
   pale hero it stopped reading as a distinct surface. Given an edge so it is
   still a bar and not a smudge. */
#home .hero-quickbar {
  background: #ffffff;
  border: 1px solid rgba(10, 42, 61, .12);
  box-shadow: 0 1px 2px rgba(10, 42, 61, .04), 0 10px 30px -22px rgba(10, 42, 61, .16);
}

/* Any remaining descendant still asking for white or near-white text. A hero
   this layered will have one, and on white it is invisible rather than merely
   wrong — so it is caught by selector instead of by hoping the list above was
   exhaustive. The contrast sweep is what confirms it worked. */
#home [style*="color: white"],
#home [style*="color:#fff"],
#home [style*="color: #fff"] { color: var(--ds-ink-700, #324049) !important; }

/* Two surfaces the block above did not win, found by the contrast sweep rather
   than by reading the CSS — which is the only reason they were found at all.

   1. `.ghost-button` measured 1.00:1, white on white. Earlier in THIS file,
      `.ghost-button, .btn-secondary, .btn-ghost` sets color to white with
      !important. `#home .ghost-button` is more specific but carries no
      !important, and !important beats specificity — so the more specific rule
      lost. This is the third time on this site that editing the declaration
      which reads like the owner changed nothing.

   2. `.quick-donation-head strong` — the amount — is `var(--gold-500)`
      #C9A227, which measured 2.16:1 as TEXT on the pale tint and needs 3.
      Moved to #8a6516, the readable gold at about 4.9:1 on this ground, so the
      gold signal survives and the number can be read. The same #C9A227 stays
      as a FILL on the CTA with navy on it, where it is correct. */
#home .ghost-button { color: var(--ds-teal-700, #12525C) !important; }
#home .ghost-button:hover { color: var(--ds-teal-900, #0a2a3d) !important; }
#home .quick-donation-head strong { color: #8a6516; }

/* Three elements the earlier .impact-block lightening missed.
   When that section stopped being #0d3228, its region buttons and its card
   captions kept the cream they were given for a dark ground:

     button «آسيا» «الإمارات»   #ffffff  on a #fff-to-#eef3f6 gradient  1.00:1
     .impact-card span          rgba(251,250,246,.78) on #ffffff        1.03:1

   Found by a contrast sweep after the design-system work, not by looking —
   they are literally invisible, so there was nothing to see. The colour is
   owned by `.region-controls button` and `.impact-card span` in styles.css,
   neither of which is a file the section change touched.

   Worth recording about the sweep itself: it reads backgroundColor only and is
   blind to gradients, so it also flagged .monthly-banner and the donate strip
   as white-on-white. Both sit on OPAQUE gradients —
   linear-gradient(115deg, #103a52, #0a2a3d) and
   linear-gradient(135deg, #0f4459, #1a5f7a) — where white is correct. Checked
   before changing anything, because "fixing" those would have made two
   correct headings unreadable. */
.impact-block .region-controls button {
  color: var(--ds-ink-700, #324049);
  background: #ffffff;
  border-color: rgba(10, 42, 61, .16);
}
.impact-block .region-controls button:hover {
  color: var(--ds-teal-900, #0a2a3d);
  border-color: var(--ds-teal-700, #15506f);
  background: var(--ds-teal-050, #eef3f6);
}
.impact-block .region-controls button[aria-pressed="true"],
.impact-block .region-controls button.active {
  background: var(--ds-teal-700, #15506f);
  color: #ffffff;
  border-color: var(--ds-teal-700, #15506f);
}
.impact-block .impact-card span { color: var(--ds-ink-500, #5c6b75); }