/* ==========================================================================
   RAAB FOUNDATION — DESIGN SYSTEM "Sabla & Sun" (Zaytoun & Terracotta)
   Identity hues taken straight from the official logo: sage green #698d75
   (olive sabla), apricot #eba653 (sun) and navy #102d44 (wordmark). Fonts: Cairo (ar) / Sora (en).
   (Previous "navy/gold" theme kept as style.classic.css.bak for rollback.)
   ========================================================================== */

:root {
  /* — surfaces — */
  --paper: #ffffff;
  --mist: #f2f6f0;          /* page-alt background */
  --sand: #eaf0e4;          /* soft olive band */
  --line: #d9e2d3;          /* hairlines */
  --line-strong: #c3cfbb;
  --card: #ffffff;          /* cards, inputs, pickers, chips */
  --card-2: #fbfdf8;        /* card gradient bottom */
  --glass: rgba(255, 255, 255, .78);      /* sticky nav capsule */
  --glass-2: rgba(255, 255, 255, .94);    /* scrolled nav */
  --pop: rgba(255, 255, 255, .97);        /* dropdown / drawer / floating cards */
  --pop-solid: #ffffff;                   /* popover arrow (needs no alpha) */
  --ring: #ffffff;                        /* photo border rings on light stages */
  --brand-line: #d3e2d6;                  /* hairline around brand-soft chips */
  --hero-a: #f8faf5;                      /* page-hero gradient top */
  --hero-b: #edf3e9;                      /* page-hero gradient bottom */
  --sand-2: #e2ead8;                      /* .sand gradient bottom */
  --tint-2: #d3e8d6;                      /* icon-tile gradient end */

  /* — brand: exact logo hues (sabla sage + sun apricot + wordmark navy) — */
  --brand: #698d75;         /* primary sage-green (logo leaf) */
  --brand-2: #4e7159;       /* deeper sage (gradients / hover) */
  --brand-soft: #e8f0e9;    /* tint chips */
  --deep: #1c2f25;          /* darkest sage (footer / dark sections) */
  --deep-2: #2a4235;

  /* — accent — */
  --accent: #eba653;        /* apricot (logo sun) */
  --accent-2: #f2bc7d;
  --accent-soft: #fbf1de;
  --accent-strong: #a5611c; /* burnt apricot: accent-as-text on light surfaces */
  --accent-on: #102d44;     /* logo navy: text placed on apricot fills */

  /* — text — */
  --ink: #14231a;
  --ink-2: #405446;
  --muted: #6d7f70;

  /* — legacy aliases used inline in blade views — */
  --navy: var(--deep);
  --shadow: 0 10px 30px rgba(28, 47, 37, .08);
  --shadow-lg: 0 24px 60px rgba(28, 47, 37, .14);

  /* — motion: unified durations + natural easing for all micro-interactions.
     Kept in the 150–220ms band so buttons/controls feel quick and tactile. — */
  --dur-fast: 150ms;   /* tiny state changes (colour, press) */
  --dur: 180ms;        /* default interactive hover / transition */
  --dur-slow: 220ms;   /* slightly larger reveals */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --btn-lift: -2px;    /* the single, subtle hover elevation for buttons */
  --btn-press: .985;   /* the active press scale */

  --r-s: 12px;
  --r-m: 18px;
  --r-l: 26px;
  --r-pill: 999px;

  --maxw: 1180px;
}

/* ============================== BASE ==================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Reserve the scrollbar gutter symmetrically on BOTH edges: a classic scrollbar
   (notably on the left in RTL Windows browsers) would otherwise shift the whole
   page off the viewport's visual center and break brand centering in the header. */
html { scrollbar-gutter: stable both-edges; }
body {
  margin: 0;
  font-family: "Sora", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  /* the off-canvas drawer parked to the reading-end must never extend the
     horizontal scroll area (visible as phantom scroll on LTR phones) */
  overflow-x: clip;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  transition: background-color .35s ease, color .35s ease;
}
html[lang^="ar"] body { font-family: "Cairo", "Segoe UI", system-ui, sans-serif; }

h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; color: var(--ink-2); }
a { color: var(--brand); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--accent-strong); }
img { max-width: 100%; display: block; }
video, iframe, canvas, svg { max-width: 100%; }
ul:not([class]) { padding-inline-start: 1.2rem; color: var(--ink-2); }
ul:not([class]) li { margin-bottom: .5em; }

.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding: 84px 0; }
.section-sm { padding: 44px 0; }
/* Phones: trim the generous desktop rhythm so small screens stay content-first */
@media (max-width: 640px) {
  .container { width: min(100% - 1.75rem, var(--maxw)); }
  .section { padding: 54px 0; }
  .section-sm { padding: 34px 0; }
}
.center { text-align: center; max-width: 720px; margin-inline: auto; }

/* type helpers */
.display {
  font-size: clamp(2.1rem, 5.2vw, 3.6rem);
  font-weight: 900; line-height: 1.15; letter-spacing: -.02em;
  margin: 14px 0 18px;
}
.title { font-size: clamp(1.55rem, 3.4vw, 2.4rem); font-weight: 800; margin-bottom: 12px; }
.lead { font-size: 1.1rem; color: var(--ink-2); max-width: 58ch; }
.small { font-size: .84rem; color: var(--muted); }
.article { max-width: 820px; margin-inline: auto; }
.article p { font-size: 1.02rem; }
.article h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-soft);
  border: 1px solid var(--brand-line); border-radius: var(--r-pill);
  padding: 6px 16px; margin-bottom: 12px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(235, 166, 83, .5); animation: eyebrowDot 2.4s ease-out infinite; }
@keyframes eyebrowDot {
  0% { box-shadow: 0 0 0 0 rgba(235, 166, 83, .5); }
  70% { box-shadow: 0 0 0 8px rgba(235, 166, 83, 0); }
  100% { box-shadow: 0 0 0 0 rgba(235, 166, 83, 0); }
}

/* link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .95rem; color: var(--brand);
  border-bottom: 2px solid var(--brand-soft); padding-bottom: 2px;
  transition: border-color var(--dur) ease, color var(--dur) ease, gap var(--dur) var(--ease-out);
}
.link-arrow:hover { color: var(--accent-strong); border-color: var(--accent-strong); gap: 10px; }

/* notice box */
.notice {
  background: var(--accent-soft); border: 1px solid #f5e3c4; color: #7a4a10;
  border-radius: var(--r-m); padding: 18px 22px; font-weight: 600;
}

/* image placeholder (no fake photos) */
.image-placeholder {
  aspect-ratio: 4 / 3; border-radius: var(--r-l);
  background:
    radial-gradient(36px 36px at 22% 30%, var(--accent-2) 0 55%, transparent 56%),
    radial-gradient(70px 70px at 78% 65%, var(--brand-2) 0 55%, transparent 56%),
    repeating-linear-gradient(-45deg, var(--sand) 0 12px, var(--mist) 12px 24px);
  border: 1px dashed var(--line-strong);
}

.list-clean { list-style: none; padding: 0; margin: 0; }
.list-clean li {
  padding: 10px 0 10px 0; border-bottom: 1px dashed var(--line);
  display: flex; gap: 8px; align-items: baseline; color: var(--ink-2); font-size: .95rem;
}
.list-clean li::before { content: "◆"; color: var(--brand-2); font-size: .7rem; }
.list-clean li:last-child { border-bottom: 0; }

.breadcrumb {
  font-size: .85rem; color: var(--muted); font-weight: 600;
  display: inline-flex; gap: 8px; background: var(--glass);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 16px; margin-bottom: 18px;
}
.breadcrumb a { color: var(--brand); }

.badge {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .02em;
  border-radius: var(--r-pill); padding: 5px 14px;
  background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line);
}
[data-project-status="funding"] .badge { background: var(--accent-soft); color: #8a5216; border-color: #f5e3c4; }
[data-project-status="completed"] .badge { background: #e7eee1; color: #4c5c47; border-color: var(--line-strong); }

/* ============================== BUTTONS ================================= */
/* Unified modern hover: an internal light-sweep (shimmer) crosses the surface,
   the tone deepens softly and the icon reacts. The motion lives INSIDE the
   button (no upward lift); each variant keeps its own colour semantics. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
  border-radius: var(--r-pill); padding: 12px 26px; border: 2px solid transparent;
  transition: background-color var(--dur) ease, background var(--dur) ease,
              color var(--dur) ease, border-color var(--dur) ease,
              box-shadow var(--dur) ease, filter var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  text-decoration: none; white-space: nowrap;
}
/* Sheen layer parked off the leading edge, clipped by overflow + the pill radius.
   z-index:-1 keeps it above the fill but BELOW the label so text is never hidden. */
.btn::before {
  content: ""; position: absolute; z-index: -1; top: -25%; bottom: -25%;
  left: -55%; width: 45%; pointer-events: none; opacity: 0;
  transform: translateX(-40%) skewX(-18deg);
  background: linear-gradient(105deg, transparent, var(--sheen, rgba(255, 255, 255, .38)), transparent);
  transition: opacity .2s ease;
}
/* One-shot sweep on hover / keyboard focus — crosses then rests, never loops. */
.btn:hover::before, .btn:focus-visible::before { opacity: 1; animation: btnSheen .68s var(--ease-out); }
@keyframes btnSheen { 0% { transform: translateX(-40%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }
/* RTL: enter from the right and travel left so the sweep follows reading order. */
[dir="rtl"] .btn::before { left: auto; right: -55%; transform: translateX(40%) skewX(-18deg); }
@keyframes btnSheenRTL { 0% { transform: translateX(40%) skewX(-18deg); } 100% { transform: translateX(-330%) skewX(-18deg); } }
[dir="rtl"] .btn:hover::before, [dir="rtl"] .btn:focus-visible::before { animation-name: btnSheenRTL; }
/* Tone deepens on hover; the variant keeps its own drop-shadow (no reliance on it). */
.btn:hover { filter: brightness(1.04) saturate(1.06); }
/* Tactile press without lifting: a hair of inward scale. */
.btn:active { transform: scale(.975); transition-duration: var(--dur-fast); }
/* Icon reaction: subtle grow by default; directional icons slide forward. */
.btn > i { transition: transform var(--dur) var(--ease-out); }
.btn:hover > i { transform: scale(1.12); }
.btn:hover > i[class*="arrow"], .btn:hover > i[class*="chevron"],
.btn:hover > i[class*="right"], .btn:hover > i[class*="cart"],
.btn:hover > i[class*="download"], .btn:hover > i[class*="sign-out"] { transform: translateX(3px) scale(1.06); }
[dir="rtl"] .btn:hover > i[class*="arrow"], [dir="rtl"] .btn:hover > i[class*="chevron"],
[dir="rtl"] .btn:hover > i[class*="right"], [dir="rtl"] .btn:hover > i[class*="cart"],
[dir="rtl"] .btn:hover > i[class*="download"], [dir="rtl"] .btn:hover > i[class*="sign-out"] { transform: translateX(-3px) scale(1.06); }
/* Clear, brand-hued keyboard ring. */
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* Disabled / in-progress: flat, inert and with no sheen layer at all. */
.btn:disabled, .btn[aria-disabled="true"], .btn.is-loading { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.35); }
.btn:disabled::before, .btn[aria-disabled="true"]::before, .btn.is-loading::before { content: none; }
.btn.is-loading { cursor: progress; }
/* Touch: no hover to lean on, so replay the sweep + tone on press. */
@media (hover: none) {
  .btn:hover { filter: none; }
  .btn:active { filter: brightness(.96); }
  .btn:active::before { opacity: 1; animation: btnSheen .6s var(--ease-out); }
}

.btn-primary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff; box-shadow: 0 10px 24px rgba(105, 141, 117, .28);
}
.btn-primary:hover { color: #fff; box-shadow: 0 16px 30px rgba(105, 141, 117, .4); }

.btn-dark { background: var(--deep); color: #fff; --sheen: rgba(255, 255, 255, .22); }
.btn-dark:hover { background: var(--deep-2); color: #fff; }

.btn-light { background: var(--card); color: var(--ink); box-shadow: var(--shadow); --sheen: rgba(105, 141, 117, .28); }
.btn-light:hover { background: var(--brand-soft); color: var(--brand-2); }

.btn-outline { background: transparent; border-color: var(--line-strong); color: var(--ink); --sheen: rgba(105, 141, 117, .24); }
.btn-outline:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-2); }
.section.dark .btn-outline, .page-hero .btn-outline { border-color: rgba(255,255,255,.45); color: #fff; --sheen: rgba(255,255,255,.4); }
.section.dark .btn-outline:hover, .page-hero .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }

/* ============================== TOPBAR ================================== */
.topbar {
  background: linear-gradient(90deg, var(--deep) 0%, var(--deep-2) 60%, #3a5744 100%);
  color: #cfe0d2; font-size: .82rem;
}
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; flex-wrap: wrap; padding-block: 4px; }
.topbar-links { display: flex; gap: 20px; flex-wrap: wrap; }
.topbar a { color: #eaf3ea; font-weight: 600; }
.topbar a:hover { color: var(--accent-2); }

/* ============ HEADER — floating glass pill with segment menu ============ */
.header { position: sticky; top: 0; z-index: 60; background: transparent; }
.header .container { width: min(100% - 2.2rem, 1280px); }
.nav {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap; margin-block: 10px 6px; min-height: 74px;
  padding: 7px 10px; padding-inline-start: 16px;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 10px 34px rgba(28, 47, 37, .08);
  transition: min-height .45s cubic-bezier(.22, 1, .36, 1), margin .45s ease,
              background .45s ease, box-shadow .45s ease;
}
.header.is-scrolled .nav {
  min-height: 60px; margin-block: 6px 3px;
  background: var(--glass-2);
  /* pinned: frost everything sliding beneath the capsule (no text bleed-through) */
  backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: 0 14px 44px rgba(28, 47, 37, .16);
}

.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); flex-shrink: 0; }
.brand:hover { color: var(--ink); }
.brand-logo {
  height: 46px; width: auto;
  transition: height .45s cubic-bezier(.22, 1, .36, 1), transform .35s cubic-bezier(.22, 1, .36, 1);
}
.brand:hover .brand-logo { transform: scale(1.05) rotate(-2deg); }
.header.is-scrolled .brand-logo { height: 40px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.22; }
.brand-copy strong { font-size: .93rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.brand-copy small { font-size: .66rem; color: var(--muted); font-weight: 600; letter-spacing: .03em; white-space: nowrap; }
/* Mobile-only brand name rows under the logo (revealed in the MOBILE APP LAYER) */
.brand-name { display: none; }

/* Soft hairline separating the brand from the menu */
.nav-divider {
  width: 1px; height: 34px; flex-shrink: 0;
  background: linear-gradient(180deg, transparent, var(--line) 25% 75%, transparent);
}

/* — Menu: segmented track with a white capsule gliding behind items — */
.menu {
  display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: nowrap;
  position: relative; flex: 1 1 auto; min-width: 0;
  background: rgba(242, 246, 240, .9); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px;
}
.menu a, .menu .drop-toggle {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-2); font-weight: 700; font-size: .84rem; line-height: 1.3;
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  padding: 8px 9px; border-radius: 999px; white-space: nowrap;
  transition: color .3s ease, background .3s ease;
}
.menu a i, .menu .drop-toggle i:first-child {
  font-size: .82em; opacity: .6;
  transition: opacity .3s ease, transform .35s cubic-bezier(.175, .885, .32, 1.275), color .3s ease;
}
/* EN labels run longer than AR: keep the compact segment metrics at all desktop widths */
[dir="ltr"] .menu a, [dir="ltr"] .menu .drop-toggle { font-size: .78rem; padding: 8px 6px; gap: 4px; }
.menu a:hover, .menu .drop-toggle:hover { color: var(--brand); }
.menu a:hover i, .menu .drop-toggle:hover i { opacity: 1; transform: translateY(-1.5px) scale(1.12); }
/* No-JS fallback: static soft pill behind the current item (> keeps submenu links on their own styles) */
.menu > a[aria-current="page"], .menu .drop-toggle.is-active,
.dropdown.open .drop-toggle { background: var(--brand-soft); color: var(--brand); }
.menu > a[aria-current="page"] i, .drop-toggle.is-active i, .dropdown.open .drop-toggle i { opacity: 1; color: var(--brand); }
/* With JS: the gliding capsule is the highlight — item backgrounds stay clear */
.menu.js-nav > a[aria-current="page"], .menu.js-nav > a:hover,
.menu.js-nav .drop-toggle.is-active, .menu.js-nav .drop-toggle:hover,
.menu.js-nav .dropdown.open .drop-toggle { background: transparent; color: var(--brand); }
.nav-pill {
  position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; width: 0;
  border-radius: 999px; background: var(--card); opacity: 0; pointer-events: none;
  box-shadow: 0 4px 16px rgba(28, 47, 37, .13), inset 0 0 0 1px rgba(78, 113, 89, .25);
  will-change: transform, width;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), width .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}

.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Language switcher: round button shows the CURRENT language flag only;
   a glass dropdown lists every locale with its circular flag. */
.lang-drop { position: relative; }
.lang-btn {
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mist); border: 1px solid var(--line); color: var(--ink);
  transition: background .3s ease, border-color .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.lang-btn:hover { border-color: var(--deep); transform: translateY(-1.5px); }
.lang-btn .lang-flag { display: block; border-radius: 50%; }
.lang-menu {
  position: absolute; top: calc(100% + 12px); inset-inline-end: 0; z-index: 85;
  min-width: 212px; background: var(--pop);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 8px;
  transform-origin: top center;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.96);
  transition: opacity .25s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility .4s;
}
.lang-menu::before {
  content: ""; position: absolute; top: -7px; inset-inline-end: 14px;
  width: 13px; height: 13px; background: var(--pop-solid);
  border-inline-start: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.lang-drop.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
  color: var(--ink); font-weight: 700; font-size: .9rem; white-space: nowrap;
  transition: background .25s ease, color .25s ease;
}
.lang-item:hover { background: var(--brand-soft); color: var(--brand); }
.lang-item .lang-flag { border-radius: 50%; flex-shrink: 0; }
.lang-item .lang-name { flex: 1; }
.lang-item i { opacity: 0; color: var(--brand); font-size: .82rem; }
.lang-item.is-cur { background: var(--brand-soft); color: var(--brand); }
.lang-item.is-cur i { opacity: 1; }

/* — Donate CTA: logo apricot with the wordmark navy on top — */
.nav-actions .btn { padding: 9px 18px; font-size: .87rem; white-space: nowrap; }
.nav-actions .btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #d9882c 100%);
  color: var(--accent-on); box-shadow: 0 10px 26px rgba(235, 166, 83, .35);
}
.nav-actions .btn-primary:hover { color: var(--accent-on); box-shadow: 0 14px 32px rgba(235, 166, 83, .5); }
.nav-actions .btn-primary i { animation: heart-beat 3.2s ease-in-out 1.5s infinite; }
@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  8% { transform: scale(1.28); } 16% { transform: scale(1); }
  24% { transform: scale(1.2); } 32% { transform: scale(1); }
}

/* — Hamburger that morphs into a close mark — */
.mobile-toggle {
  display: none; position: relative;
  background: var(--deep); color: #fff; border: 0;
  width: 46px; height: 46px; border-radius: 14px; font-size: 1.15rem; cursor: pointer;
  transition: background .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.mobile-toggle:active { transform: scale(.94); }
.mobile-toggle .hg {
  position: absolute; inset: 0; display: grid; place-items: center;
  transition: opacity .3s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.mobile-toggle .hg-close { opacity: 0; transform: rotate(-90deg) scale(.55); }
.mobile-toggle.is-active { background: var(--accent); color: var(--accent-on); }
.mobile-toggle.is-active .hg-bars { opacity: 0; transform: rotate(90deg) scale(.55); }
.mobile-toggle.is-active .hg-close { opacity: 1; transform: none; }

/* — Mobile menu: collapsed base (becomes a side drawer ≤1340px) — */
.mobile-menu { display: none; flex-direction: column; gap: 4px; }
.nav-backdrop { display: none; }
.mobile-menu a {
  padding: 13px 14px; border-radius: 14px; color: var(--ink); font-weight: 700;
  border: 1px solid transparent;
}
.mobile-menu a:hover { background: var(--mist); color: var(--brand); }
/* Drawer language switcher (the header language button is hidden on small screens) */
.drawer-langs { display: flex; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.mobile-menu .drawer-langs a { flex: 1; justify-content: center; gap: 7px; padding: 10px 8px; border-radius: 12px; }
.mobile-menu .drawer-langs a { border: 1px solid var(--line); background: var(--mist); font-size: .82rem; font-weight: 800; color: var(--ink); }
.mobile-menu .drawer-langs a:hover { background: var(--deep); border-color: var(--deep); color: #fff; }
.mobile-menu .drawer-langs a img.lang-flag { width: 22px; height: 22px; border-radius: 50%; }
.mobile-menu .drawer-langs a[aria-current] { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.mobile-menu a[aria-current="page"] { background: var(--brand-soft); border-color: var(--line); color: var(--brand); }
.mobile-menu a.drawer-donate {
  background: linear-gradient(135deg, var(--accent) 0%, #d9882c 100%);
  color: var(--accent-on); text-align: center; margin-top: 14px;
  box-shadow: 0 10px 24px rgba(235, 166, 83, .35);
}
@keyframes menuItemIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.drawer-logo { height: 40px; width: auto; }
.drawer-close {
  width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--mist); color: var(--ink);
  font-size: 1.05rem; display: grid; place-items: center;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.drawer-close:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-on); transform: rotate(90deg); }

@media (max-width: 1340px) {
  .menu, .nav-divider { display: none; }
  .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .mobile-menu {
    display: flex; position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 95;
    width: min(360px, 88vw); margin: 0; padding: 16px 18px 26px;
    background: var(--pop);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-inline-start: 1px solid var(--line);
    box-shadow: 24px 0 60px rgba(28, 47, 37, .2);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(103%); visibility: hidden;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), visibility .5s;
  }
  [dir="rtl"] .mobile-menu {
    transform: translateX(-103%);
    border-inline-start: 0; border-inline-end: 1px solid var(--line);
    box-shadow: -24px 0 60px rgba(28, 47, 37, .2);
  }
  .mobile-menu.is-open { transform: translateX(0); visibility: visible; }
  .mobile-menu.is-open a { animation: menuItemIn .5s cubic-bezier(.22, 1, .36, 1) both; }
  .mobile-menu.is-open a:nth-child(3) { animation-delay: .05s; }
  .mobile-menu.is-open a:nth-child(4) { animation-delay: .1s; }
  .mobile-menu.is-open a:nth-child(5) { animation-delay: .15s; }
  .mobile-menu.is-open a:nth-child(6) { animation-delay: .2s; }
  .mobile-menu.is-open a:nth-child(7) { animation-delay: .25s; }
  .mobile-menu.is-open a:nth-child(8) { animation-delay: .3s; }
  .mobile-menu.is-open a:nth-child(9) { animation-delay: .35s; }
  .mobile-menu.is-open a:nth-child(10) { animation-delay: .4s; }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 94;
    background: rgba(28, 47, 37, .5);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  body.nav-locked { overflow: hidden; }
}
/* Tight band (1341–1440px): the segment row needs to breathe or it spills */
@media (min-width: 1341px) and (max-width: 1440px) {
  .nav { gap: 6px; padding-inline-start: 12px; }
  .nav-divider { display: none; }
  .menu a, .menu .drop-toggle { font-size: .78rem; padding: 8px 7px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn { padding: 8px 12px; font-size: .8rem; }
  .lang-btn { width: 40px; height: 40px; }
}
/* EN needs the same breathing room even on wide screens (fixed 1280px container) */
@media (min-width: 1441px) {
  [dir="ltr"] .nav { gap: 6px; padding-inline-start: 12px; }
  [dir="ltr"] .nav-divider { display: none; }
  [dir="ltr"] .nav-actions { gap: 6px; }
  [dir="ltr"] .nav-actions .btn { padding: 8px 12px; font-size: .8rem; }
  [dir="ltr"] .lang-btn { width: 40px; height: 40px; }
}
@media (max-width: 560px) {
  .nav-actions .btn, .nav-actions .lang-drop { display: none; }
  .nav-actions .btn-primary { display: inline-flex; }
  .brand { gap: 7px; }
  .brand-logo { height: 40px; }
  .brand-copy strong { font-size: .84rem; }
  .brand-copy small { font-size: .6rem; }
  .nav { gap: 6px; padding-inline-start: 12px; }
}
@media (max-width: 400px) {
  .brand-copy { display: none; }
}

/* ============================== HOME HERO =============================== */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(720px 380px at 88% -10%, rgba(78, 113, 89, .16), transparent 65%),
    radial-gradient(520px 420px at -8% 108%, rgba(235, 166, 83, .12), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--mist) 100%);
  padding: 78px 0 96px;
}
.hero::before {
  /* Sabla watermark: always on the LEFT of the hero, above the card so it stays fully visible */
  content: ""; position: absolute; left: 30px; top: 110px; z-index: 5;
  width: min(480px, 90vw); aspect-ratio: 150 / 146; pointer-events: none;
  background: rgba(105, 141, 117, .06);
  -webkit-mask: url("../images/hero-sabla.svg") center / contain no-repeat;
  mask: url("../images/hero-sabla.svg") center / contain no-repeat;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center;
  position: relative;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.trustline {
  display: flex; gap: 18px 28px; flex-wrap: wrap; margin-top: 30px;
  font-size: .84rem; font-weight: 700; color: var(--muted);
}
.trustline span { display: inline-flex; align-items: center; gap: 8px; }
.trustline span::before { content: "✔"; color: var(--brand-2); font-size: .8rem; }

.hero-card { position: relative; }
.hero-visual {
  position: relative; border-radius: 34px; overflow: hidden;
  background: linear-gradient(160deg, var(--paper) 0%, var(--mist) 55%, var(--sand) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 5 / 4.4;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-visual::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(180px 180px at 82% 18%, rgba(232, 121, 74, .14), transparent 70%),
    radial-gradient(240px 240px at 15% 80%, rgba(78, 113, 89, .12), transparent 70%),
    repeating-linear-gradient(115deg, rgba(105, 141, 117, .05) 0 2px, transparent 2px 26px);
}
/* --- Official logo on a clean light stage (no green backdrop) --- */
.hero-logo { position: absolute; top: 11%; inset-inline: 0; z-index: 1; display: grid; place-items: center; }
.hero-logo::after {
  content: ""; position: absolute; width: min(280px, 66%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(78, 113, 89, .16), transparent);
}
.hero-logo img { position: relative; z-index: 1; width: min(56%, 300px); height: auto; filter: drop-shadow(0 14px 28px rgba(28, 47, 37, .16)); animation: logo-float 7s ease-in-out infinite; }
@keyframes logo-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.025); } }
/* --- Field photo inside split sections (Who-we-are) --- */
.split-photo {
  position: relative; margin: 0; aspect-ratio: 4 / 3;
  border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg), 16px 16px 0 -8px rgba(235, 166, 83, .16);
}
[dir="rtl"] .split-photo { box-shadow: var(--shadow-lg), -16px 16px 0 -8px rgba(235, 166, 83, .16); }
.split-photo img { width: 100%; height: 100%; display: block; object-fit: cover; animation: kenburns 18s ease-in-out infinite alternate; }
.split-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(28, 47, 37, .38));
}
.sp-shine {
  position: absolute; top: 0; left: -60%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg); animation: photo-shine 6.5s ease-in-out 2s infinite;
}
@keyframes kenburns { from { transform: scale(1) translateY(0); } to { transform: scale(1.08) translateY(-2.5%); } }
@keyframes photo-shine { 0%, 55% { left: -60%; } 80%, 100% { left: 130%; } }
.hero-art-note {
  position: relative; z-index: 2; margin: 18px;
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
  background: var(--pop); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 18px;
  box-shadow: 0 14px 34px rgba(28, 47, 37, .12);
}
.hero-art-note strong { color: var(--ink); font-size: 1rem; }
.hero-art-note small { grid-column: 2; color: var(--muted); font-weight: 600; }
.art-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 54px 0 66px; }
}

/* ============================== STATS =================================== */
/* Cards straddle the hero/section seam at their vertical center */
.stats { margin-top: -86px; position: relative; z-index: 5; }
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
  padding: 20px 22px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 14px;
  border-inline-start: 4px solid var(--accent);
}
.stat strong {
  font-size: 1.5rem; font-weight: 900; color: var(--brand);
  font-family: "Sora", sans-serif;
}
.stat span { font-weight: 700; color: var(--ink-2); font-size: .92rem; }

/* ============================== SECTIONS ================================ */
.soft { background: var(--mist); }
.sand { background: linear-gradient(180deg, var(--sand) 0%, var(--sand-2) 100%); }
.dark {
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(78, 113, 89, .25), transparent 60%),
    linear-gradient(150deg, var(--deep) 0%, var(--deep-2) 100%);
  color: #dfe9dc;
}
.dark h1, .dark h2, .dark h3 { color: #fff; }
.dark p, .dark .lead { color: #c4d4c2; }
.dark .eyebrow { background: rgba(255, 255, 255, .1); color: #b5e2c2; border-color: rgba(255, 255, 255, .18); }
.dark .link-arrow { color: #9fd3ae; border-color: rgba(255, 255, 255, .2); }
.dark .link-arrow:hover { color: var(--accent-2); border-color: var(--accent-2); }

/* Donor cards on the dark section: readable dark text on the white card */
.section.dark .card { border-color: rgba(255, 255, 255, .55); }
.section.dark .card h3 { color: var(--ink); }
.section.dark .card p { color: var(--brand); }

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: 34px; flex-wrap: wrap;
}

/* split: text + media (minmax(0,…) lets the track shrink below a long word so
   wider scripts (tr) never push the column past the viewport on phones) */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.split > * { min-width: 0; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); gap: 30px; } }

/* ============================== CARDS =================================== */
.cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 24px;
}
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 26px; box-shadow: 0 4px 16px rgba(28, 47, 37, .05);
  display: flex; flex-direction: column; gap: 8px;
}
.card .icon {
  width: 54px; height: 54px; border-radius: 16px; font-size: 1.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); border: 1px solid var(--brand-line); margin-bottom: 8px;
  color: var(--brand);
}
.card p { flex: 1; }

/* Donor "لنصنع أثرًا أكبر معًا" cards: a professional list — icon and title share
   a horizontal header row, the blurb spans the full card width beneath so a
   secondary line like "فرق قريبة من المجتمعات والاحتياجات." stays on ONE line. */
.donor-cards { grid-template-columns: 1fr; gap: 14px; }
.donor-cards .card {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  grid-template-areas: "icon title" "body body"; align-items: center;
  padding: 16px 20px; text-align: start;
}
.donor-cards .card .icon { grid-area: icon; align-self: center; margin: 0; }
.donor-cards .card h3 { grid-area: title; align-self: center; margin: 0; }
.donor-cards .card p { grid-area: body; margin: 0; flex: none; font-size: .9rem; }

/* project card */
.project-card { padding: 0; overflow: hidden; gap: 0; }
.project-media {
  position: relative; aspect-ratio: 16 / 10; background: var(--mist); overflow: hidden;
}
.project-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(28, 47, 37, .34));
  opacity: .75; transition: opacity .5s ease;
}
.project-card:hover .project-media::after { opacity: 1; }
.project-media .badge { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; backdrop-filter: blur(6px); }
.project-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; font-weight: 700; color: var(--muted); }
.meta span { display: inline-flex; align-items: center; gap: 5px; }
.meta span::before { content: "•"; color: var(--accent); }

/* — News card: media frame per item, mirrors the project card look — */
.news-card { padding: 0; overflow: hidden; gap: 0; }
.news-media {
  position: relative; aspect-ratio: 16 / 10; background: var(--mist); overflow: hidden;
}
.news-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.news-card:hover .news-media img { transform: scale(1.06); }
.news-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(28, 47, 37, .34));
  opacity: .75; transition: opacity .5s ease;
}
.news-card:hover .news-media::after { opacity: 1; }
.news-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--brand); font-size: 2rem; opacity: .55;
  background: repeating-linear-gradient(135deg, var(--brand-soft) 0 14px, var(--sand) 14px 28px);
}
.news-date {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .72rem; font-weight: 800; color: #fff;
  background: rgba(28, 47, 37, .5); border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-pill); padding: 5px 12px; backdrop-filter: blur(6px);
}
.news-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-body h3 { font-size: 1.06rem; }
.news-body p { flex: 1; }
/* Pin "read more" links to the same bottom line across cards of different text lengths */
.news-body .link-arrow, .project-body .link-arrow { margin-top: auto; }

/* ============================== STEPS (From Need to Impact) ============= */
.process-lead { max-width: 620px; margin: 12px auto 0; color: var(--muted); font-size: 1rem; }
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 24px; counter-reset: step; position: relative; margin-top: 36px;
}
.step {
  /* The green→terracotta top band is the card's own background layer: element
     backgrounds are clipped by the border-radius, so it can never escape the frame
     (same look as the KPI cards) while the card stays unclipped for the connector. */
  background:
    linear-gradient(90deg, var(--brand), var(--accent)) no-repeat top / 100% 5px,
    linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 26px 20px 22px; position: relative;
  box-shadow: 0 6px 22px rgba(28, 47, 37, .05);
}
/* Keep full transitions + lift alive alongside the scroll-reveal (.rise/.in). */
.steps .step {
  transition: transform .5s cubic-bezier(.175, .885, .32, 1.275),
              box-shadow .35s ease, border-color .35s ease, opacity .6s ease;
}
.steps .step:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(28, 47, 37, .14);
  border-color: rgba(78, 113, 89, .42);
}
/* Top accent glow: on hover a brighter 6px band fades in over the base band.
   The pseudo fills the whole card with the inherited radius, so only its own
   background layer (clipped by that radius) paints the band — it can never
   overhang the card's rounded contour at any size. */
.step::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-2), var(--accent-2)) no-repeat top / 100% 6px;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.steps .step:hover::before { opacity: 1; }
.step-top, .step h3, .step p { position: relative; z-index: 1; }
.step-top { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.step-num {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%; color: #fff; font-size: 1rem; font-weight: 900;
  background: linear-gradient(140deg, var(--brand-2), var(--brand));
  box-shadow: 0 8px 18px rgba(105, 141, 117, .3);
  transition: transform .5s cubic-bezier(.175, .885, .32, 1.275), box-shadow .35s ease;
}
.step-num::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px dashed rgba(105, 141, 117, .24); transition: border-color .4s ease, inset .4s ease;
}
.step-ic {
  margin-inline-start: auto; font-size: 1.4rem; color: var(--brand); opacity: .5;
  transition: color .35s ease, opacity .35s ease,
              transform .5s cubic-bezier(.175, .885, .32, 1.275);
}
.steps .step:hover .step-num { transform: scale(1.08) rotate(-8deg); box-shadow: 0 12px 26px rgba(105, 141, 117, .44); }
.steps .step:hover .step-num::after { border-color: rgba(235, 166, 83, .5); }
.steps .step:hover .step-ic { color: var(--accent); opacity: 1; transform: scale(1.16) rotate(6deg); }
.step h3 { font-size: 1.06rem; font-weight: 800; color: var(--ink); }
.step p { font-size: .88rem; color: var(--muted); margin: 0; line-height: 1.65; }
/* Relay connector: a soft line with a glowing dot travelling to the next step.
   Rendered as a .step-connector span between cards (the card itself clips overflow
   for the top bar). The dot fades out before looping so motion never feels stamped. */
@media (min-width: 1000px) {
  .step-connector {
    position: absolute; top: 44px; inset-inline-start: calc(100% + 2px);
    width: 20px; height: 9px; border-radius: 999px; z-index: 2; pointer-events: none;
    background:
      radial-gradient(circle closest-side, var(--accent-2), rgba(232, 121, 74, 0)) no-repeat 0 50% / 8px 8px,
      linear-gradient(to right, rgba(105, 141, 117, .38), rgba(235, 166, 83, .3)) no-repeat 0 50% / 100% 2px;
    animation: connectorTravel 2.9s cubic-bezier(.45, .05, .55, .95) infinite;
  }
  /* Staggered launch: the dots glide one after another along the journey */
  .steps .step:nth-child(2) .step-connector { animation-delay: .45s; }
  .steps .step:nth-child(3) .step-connector { animation-delay: .9s; }
  .steps .step:nth-child(4) .step-connector { animation-delay: 1.35s; }
  [dir="rtl"] .step-connector {
    animation-direction: reverse;
    background:
      radial-gradient(circle closest-side, var(--accent-2), rgba(232, 121, 74, 0)) no-repeat 0 50% / 8px 8px,
      linear-gradient(to left, rgba(105, 141, 117, .38), rgba(235, 166, 83, .3)) no-repeat 0 50% / 100% 2px;
  }
}
@keyframes connectorTravel {
  0%   { background-position: 0 50%, 0 50%; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { background-position: 14px 50%, 0 50%; opacity: 0; }
}

/* ============================== PAGE HERO =============================== */
/* Light editorial band: soft mist canvas, dot-grid texture, accent rail, photo arch */
.page-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(rgba(105, 141, 117, .09) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--hero-a) 0%, var(--hero-b) 100%);
  border-bottom: 1px solid var(--line);
  padding: 44px 0 50px;
}
.ph-flex {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(28px, 5vw, 64px); min-height: 216px;
}
.ph-text { position: relative; padding-inline-start: 22px; }
/* Vertical gradient rail on the text edge — the editorial signature */
.ph-text::before {
  content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0; width: 4px; border-radius: 999px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
}
/* Breadcrumb — bare typographic trail, no pill */
.page-hero .breadcrumb {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 12px;
  background: none; border: 0; padding: 0;
  color: var(--muted); font-size: .82rem; font-weight: 700;
}
.page-hero .breadcrumb a { color: var(--brand); display: inline-flex; align-items: center; gap: 7px; }
.page-hero .breadcrumb a:hover { color: var(--accent-strong); }
.page-hero .breadcrumb a i { font-size: .9em; }
.page-hero .breadcrumb .ph-sep { opacity: .5; }
.page-hero .breadcrumb strong { color: var(--ink); font-weight: 800; }
/* Title — deep green, no underline bar */
.page-hero h1.title {
  color: var(--ink); font-size: clamp(1.65rem, 3.4vw, 2.45rem); font-weight: 900;
  max-width: 30ch; margin-bottom: 0; line-height: 1.22; letter-spacing: -.01em;
}
.page-hero .lead { color: var(--ink-2); max-width: 58ch; margin-top: 10px; font-size: .98rem; }
/* Photo arch with floating brand badge */
.ph-arch { position: relative; flex: none; }
.ph-arch picture { display: block; }
.ph-arch img {
  display: block; width: 190px; height: 216px; object-fit: cover;
  border-radius: 110px 110px 22px 22px; border: 5px solid var(--ring);
  box-shadow: 0 18px 44px rgba(28, 47, 37, .18);
}
.ph-badge {
  position: absolute; bottom: 16px; inset-inline-end: -13px;
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 1.05rem;
  border: 2px solid var(--ring); box-shadow: 0 10px 24px rgba(28, 47, 37, .28);
  animation: ctaChipFloat 7s ease-in-out infinite;
}
/* Staggered entrance */
.page-hero .breadcrumb, .page-hero h1.title, .page-hero .lead { animation: phRise .7s cubic-bezier(.22, 1, .36, 1) both; }
.page-hero h1.title { animation-delay: .08s; }
.page-hero .lead { animation-delay: .16s; }
.ph-arch { animation: phArch .8s cubic-bezier(.22, 1, .36, 1) both .12s; }
@keyframes phRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes phArch {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 900px) {
  .ph-arch { display: none; }
  .ph-flex { min-height: 0; }
}
@media (max-width: 700px) {
  .page-hero { padding: 32px 0 36px; }
  .ph-text { padding-inline-start: 16px; }
}

/* ============================== ABOUT PAGE ============================== */
.about-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.about-trust .pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px;
  border-radius: var(--r-pill); background: var(--brand-soft); border: 1px solid var(--brand-line);
  color: var(--brand); font-size: .82rem; font-weight: 800;
}
.about-trust .pill::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
}

/* Vision & mission — top accent band as a background layer (auto-clipped by the radius) */
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 42px; }
.vm-card {
  background:
    linear-gradient(90deg, var(--brand), var(--accent)) no-repeat top / 100% 5px,
    linear-gradient(180deg, var(--card), var(--card-2));
  padding: 30px 28px;
  transition: transform .5s cubic-bezier(.175, .885, .32, 1.275), box-shadow .35s ease, border-color .35s ease;
}
.vm-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 47, 37, .13); border-color: rgba(78, 113, 89, .42); }
.vm-card h3 { font-size: 1.18rem; }
.vm-card p { font-size: .98rem; line-height: 1.8; }

/* Values */
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 42px; }
.value-card {
  position: relative; align-items: center; text-align: center; padding: 30px 20px 26px;
  transition: transform .5s cubic-bezier(.175, .885, .32, 1.275), box-shadow .35s ease, border-color .35s ease;
}
.value-card:hover { transform: translateY(-8px); box-shadow: 0 22px 46px rgba(28, 47, 37, .13); border-color: rgba(78, 113, 89, .42); }
.value-card .v-num {
  position: absolute; top: 12px; inset-inline-end: 16px;
  font-size: 1.5rem; font-weight: 900; color: rgba(28, 47, 37, .08); letter-spacing: .02em;
}
.value-card h3 { font-size: 1rem; }

/* Explore cards */
.explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 42px; }
.explore-card {
  color: inherit; text-decoration: none; padding: 26px 22px;
  transition: transform .5s cubic-bezier(.175, .885, .32, 1.275), box-shadow .35s ease, border-color .35s ease;
}
.explore-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 47, 37, .13); border-color: rgba(78, 113, 89, .42); }
.explore-card h3 { font-size: 1.05rem; }
.explore-card p { font-size: .9rem; color: var(--muted); }
.explore-card .go { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 800; color: var(--brand); transition: color .25s ease; }
.explore-card:hover .go { color: var(--accent); }

/* About stats — same card language, icon tile, and fonts as the other sections */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 42px; }
.about-stat {
  align-items: center; text-align: center; padding: 30px 22px;
  transition: transform .5s cubic-bezier(.175, .885, .32, 1.275), box-shadow .35s ease, border-color .35s ease;
}
.about-stat:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(28, 47, 37, .13); border-color: rgba(78, 113, 89, .42); }
.about-stat strong {
  display: block; font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 900;
  color: var(--brand); line-height: 1.25; margin-top: 2px;
}
.about-stat strong.soon {
  font-size: 1rem; font-weight: 800; color: var(--muted); font-family: inherit;
  background: var(--mist); border: 1px dashed var(--line-strong); border-radius: var(--r-pill); padding: 6px 18px;
}
.about-stat .s-label { display: block; font-weight: 800; color: var(--ink); font-size: 1rem; margin-top: 6px; }
.about-stat small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.65; margin-top: 6px; }
.stats-more { display: flex; justify-content: center; margin-top: 32px; }

@media (max-width: 1000px) { .values-grid, .explore-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .vm-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .values-grid, .explore-grid { grid-template-columns: 1fr; } }

/* ============================== KPI / IMPACT ============================ */
/* The Impact page reuses the .stats-grid / .about-stat card language from About. */
.impact-note { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 34px; }

/* ============================== LOGOS =================================== */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.logo-box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
  min-height: 84px; display: flex; align-items: center; justify-content: center;
  padding: 14px 18px; font-weight: 800; font-size: .84rem; color: var(--muted);
  text-align: center; transition: border-color .18s, color .18s;
}
.logo-box:hover { border-color: var(--brand); color: var(--brand); }

/* ============================== PARTNERS ================================ */
/* Generic: split-photo orbited by liquid-glass chips (Partners, Home & About field photos) */
.glass-orbit { position: relative; margin: 0; }
/* Liquid-glass chips: translucent, backdrop-blurred over the photo, with a wet inner highlight */
.glass-orbit .float-chip {
  width: 48px; height: 48px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .72);
  backdrop-filter: blur(11px) saturate(1.7); -webkit-backdrop-filter: blur(11px) saturate(1.7);
  box-shadow: 0 10px 26px rgba(28, 47, 37, .2), inset 0 1px 1px rgba(255, 255, 255, .95), inset 0 -7px 14px rgba(255, 255, 255, .3);
}
.glass-orbit .float-chip::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(120% 92% at 30% 16%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 48%);
  mix-blend-mode: screen;
}
.glass-orbit .float-chip i { font-size: 1.15rem; }
.pc-1 { top: -16px; inset-inline-end: -14px; animation-delay: 0s; }
/* extra specificity: the base .float-chip rule lives later in this file and would win otherwise */
.glass-orbit .pc-2 { bottom: 14%; inset-inline-start: -18px; animation-delay: 1.2s; color: var(--accent); }
.pc-3 { top: 40%; inset-inline-end: -16px; animation-delay: 2.3s; }
.glass-orbit .pc-4 { bottom: -14px; inset-inline-start: 16%; animation-delay: 3.1s; color: var(--accent); }
@media (max-width: 640px) { .glass-orbit .float-chip { display: none; } }
.center + .logos { margin-top: 42px; }
.check-list { list-style: none; margin: 18px 0 26px; padding: 0; display: grid; gap: 12px; }
.check-list li { display: flex; align-items: center; gap: 11px; font-weight: 700; color: var(--ink); }
.check-list li::before {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .7rem;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand); border: 1px solid var(--brand-line);
}

/* ============================== CONTACT ================================= */
/* Two-column layout: polished form card + direct channel rows */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px; align-items: start; }
.contact-card { padding: clamp(22px, 3.4vw, 34px); border-radius: var(--r-l); }
.contact-card .title { margin-top: 6px; }
.contact-sub { margin: 10px 0 22px; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-side .title { font-size: 1.35rem; margin-top: 6px; }
.chan-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.chan {
  display: flex; align-items: center; gap: 13px; padding: 13px 15px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, border-color .2s ease;
}
.chan-ic {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center;
  font-size: 1.12rem; color: var(--brand); background: var(--brand-soft); border: 1px solid var(--brand-line);
  transition: background .2s ease, color .2s ease;
}
.chan-txt { display: grid; gap: 1px; min-width: 0; }
.chan-txt small { color: var(--muted); font-weight: 700; }
.chan-txt strong { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-go { margin-inline-start: auto; color: var(--muted); font-size: .8rem; transition: color .2s ease; }
a.chan:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }
a.chan:hover .chan-ic { background: var(--brand); color: #fff; }
a.chan:hover .chan-go { color: var(--brand); }
.chan--static { cursor: default; }
.chan-note { margin-top: 16px; color: var(--muted); font-size: .85rem; }
/* Social platform cards — same brand colors as the footer tiles, light-mode treatment */
.contact-social { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-top: 36px; }
.social-card {
  --sc: var(--brand); --sct: #fff;
  min-width: 0;
  display: flex; align-items: center; gap: 12px; padding: 15px 18px; color: var(--ink); font-weight: 800;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.social-card i { font-size: 1.45rem; width: 30px; text-align: center; color: var(--sc); transition: color .2s ease; }
.social-card span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.social-card:hover { transform: translateY(-4px); background: var(--sc); color: var(--sct); border-color: transparent; box-shadow: var(--shadow-lg); }
.social-card:hover i { color: var(--sct); }
.social-card.s-ig { --sc: #dd2a7b; }
.social-card.s-ig:hover { background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af); }
.social-card.s-tk:hover { border-color: #25f4ee; box-shadow: 0 0 18px rgba(37, 244, 238, .45); }
/* Brand colors live in classes (not inline styles) so dark mode can invert them */
.social-card.s-fb { --sc: #1877f2; }
.social-card.s-x, .social-card.s-th { --sc: #111111; }
.social-card.s-yt { --sc: #ff0000; }
.social-card.s-tk { --sc: #010101; }
.social-card.s-li { --sc: #0a66c2; }
@media (max-width: 980px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-pair { grid-template-columns: 1fr; } .contact-social { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px) { .contact-social { grid-template-columns: 1fr; } }

/* ============================== CTA ===================================== */
.cta {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  background:
    radial-gradient(420px 220px at 90% 10%, rgba(255, 255, 255, .07), transparent 60%),
    linear-gradient(120deg, var(--accent) 0%, #d9882c 100%);
  color: var(--accent-on); border-radius: 32px; padding: 22px 40px;
  box-shadow: 0 18px 40px rgba(235, 166, 83, .26);
  /* clip the decorative light sweep to the rounded card so it can never widen
     the page's horizontal scroll area on phones */
  overflow: hidden;
}
.cta h2 { color: var(--accent-on); }
.cta .lead { color: #2c4054; }
.cta .eyebrow { background: rgba(16, 45, 68, .10); border-color: rgba(16, 45, 68, .25); color: var(--accent-on); }
.cta .eyebrow::before { background: var(--accent-on); }

/* — CTA: animated light sweep + dedicated icons — */
.cta .cta-copy { position: relative; z-index: 2; max-width: 620px; }
.cta .cta-shine {
  position: absolute; top: -60%; bottom: -60%; left: -35%; width: 22%; z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent);
  transform: skewX(-18deg); filter: blur(10px); pointer-events: none;
  animation: ctaSweep 7.5s cubic-bezier(.6, .05, .3, 1) infinite;
}
@keyframes ctaSweep {
  0% { left: -35%; opacity: 0; }
  12% { opacity: .5; }
  60% { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}
.cta .cta-chip {
  position: absolute; z-index: 1; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 13px; font-size: 1.05rem; color: #fff;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(4px); pointer-events: none;
  animation: ctaChipFloat 7s ease-in-out infinite;
}
/* Seedling lowered a little; the hand is now a featured flying chip near the actions */
.cta .cc-1 { top: 26px; inset-inline-end: 108px; }
.cta .cc-2 { bottom: 16px; inset-inline-end: 46px; width: 34px; height: 34px; font-size: .85rem; animation-delay: 1.4s; }
.cta .cc-3 {
  top: 24px; inset-inline-end: 30px; width: 34px; height: 34px; border-radius: 13px; font-size: .85rem;
  background: linear-gradient(140deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .12));
  border-color: rgba(255, 255, 255, .42); box-shadow: 0 10px 24px rgba(28, 47, 37, .2);
  animation-delay: .6s;
}
@keyframes ctaChipFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); opacity: .85; }
  50% { transform: translateY(-12px) rotate(4deg); opacity: 1; }
}
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta .btn-outline { border-color: rgba(255, 255, 255, .7); color: #fff; }
.cta .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, .12); color: #fff; }

/* ============================== CONTENT GRID ============================ */
.content-grid { display: grid; grid-template-columns: 1.6fr .9fr; gap: 44px; align-items: start; }
.sidebar {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 26px; box-shadow: var(--shadow); position: sticky; top: 96px;
}
.sidebar h3 { padding-bottom: 10px; border-bottom: 2px solid var(--brand-soft); }
@media (max-width: 900px) { .content-grid { grid-template-columns: 1fr; } .sidebar { position: static; } }

/* ============================== FILTERS / CHIPS ========================= */
.filterbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.chip {
  border: 1.5px solid var(--line-strong); background: var(--card); color: var(--ink-2);
  border-radius: var(--r-pill); padding: 8px 20px; font-weight: 700; font-size: .88rem;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); display: inline-block;
}
.chip:active { transform: scale(.97); }
a.chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Custom picker dropdown — same glass-panel language as the navbar submenu */
.picker { position: relative; }
.picker-btn {
  width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--card); border: 1.5px solid var(--line-strong); border-radius: 14px;
  padding: 10px 13px; font: inherit; font-weight: 700; font-size: .92rem; color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.picker-btn:hover, .picker.open .picker-btn { border-color: rgba(78, 113, 89, .5); box-shadow: 0 0 0 4px rgba(78, 113, 89, .09); }
.picker-btn .chev { margin-inline-start: auto; color: var(--muted); font-size: .78rem; transition: transform .3s ease; }
.picker.open .picker-btn .chev { transform: rotate(180deg); }
.picker-ic {
  width: 28px; height: 28px; border-radius: 9px; flex-shrink: 0; display: inline-grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: .82rem;
}
.picker-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-list {
  position: absolute; top: calc(100% + 8px); inset-inline: 0; z-index: 70;
  background: var(--pop); max-width: 100%;
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 8px;
  max-height: 320px; overflow-y: auto; transform-origin: top center;
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.97);
  transition: opacity .25s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility .4s;
}
.picker.open .picker-list { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.picker-opt {
  width: 100%; display: flex; align-items: center; gap: 10px; text-align: start; cursor: pointer;
  background: none; border: 0; padding: 8px 10px; border-radius: 12px;
  font: inherit; font-weight: 700; font-size: .9rem; color: var(--ink-2);
  transition: background .22s ease, color .22s ease;
}
.picker-opt:hover { background: var(--mist); color: var(--brand); }
.picker-opt:hover .picker-ic { transform: scale(1.1); }
.picker-opt .picker-ic { transition: transform .3s cubic-bezier(.175, .885, .32, 1.275); }
.picker-opt.is-sel { background: var(--brand-soft); color: var(--brand); }
.picker-opt .tick { margin-inline-start: auto; font-size: .78rem; color: var(--brand); opacity: 0; transition: opacity .2s ease; }
.picker-opt.is-sel .tick { opacity: 1; }

/* ============================== FORMS =================================== */
.form { display: flex; flex-direction: column; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-weight: 700; font-size: .88rem; color: var(--ink); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line-strong); border-radius: var(--r-s);
  padding: 12px 16px; transition: border-color .16s, box-shadow .16s;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(105, 141, 117, .12);
}

/* Projects filter row: search + sector + submit perfectly parallel */
.filter-form {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px;
  align-items: end; margin-bottom: 24px;
}
.filter-form .field { margin-bottom: 0; }
.filter-form .field input, .filter-form .picker-btn, .filter-form .filter-submit { height: 48px; }
.filter-form--search { grid-template-columns: 1fr auto; }
.search-wrap { position: relative; }
.search-wrap i {
  position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .9rem; pointer-events: none; transition: color .22s ease;
}
.search-wrap:focus-within i { color: var(--brand); }
.search-wrap input { padding-inline-start: 42px; }
.filter-submit { display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; }
.filter-submit i { font-size: .85rem; }
@media (max-width: 700px) {
  .filter-form { grid-template-columns: 1fr; }
  .filter-form .filter-submit { width: 100%; }
}

/* ============================== FOOTER ================================== */
/* Minimal modern: flat deep canvas, uppercase micro-labels, bare links, hairlines. */
.footer {
  background: var(--deep);
  color: rgba(255, 255, 255, .62); margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.footer-grid {
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.25fr; gap: 48px;
  padding: 72px 0 56px;
}
.footer h4 {
  color: rgba(255, 255, 255, .38); font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .16em; margin-bottom: 20px;
}

/* Brand column */
.footer .brand { display: flex; align-items: center; gap: 14px; }
.footer .brand-logo { height: 56px; width: auto; background: none; padding: 0; }
.footer .brand-copy strong { color: #fff; font-size: .98rem; font-weight: 800; line-height: 1.45; }
.footer-about { margin-top: 18px; font-size: .9rem; line-height: 1.85; max-width: 36ch; color: rgba(255, 255, 255, .5); }
.footer-tagline { display: block; margin-top: 16px; color: var(--accent-2); font-weight: 800; font-size: .95rem; }

/* Social tiles — glass squircles that light up in brand colors */
.footer-follow { margin-top: 26px; }
.follow-label {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255, 255, 255, .38); margin-bottom: 12px;
}
.footer .socials { display: flex; flex-wrap: wrap; gap: 10px; }
.footer .socials a {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; padding: 0;
  font-size: 1.08rem; color: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), background .2s ease, color .2s ease, border-color .2s ease;
}
.footer .socials a:hover { color: #fff; transform: translateY(-3px); }
.footer .socials a.s-fb:hover { background: #1877f2; border-color: #1877f2; }
.footer .socials a.s-ig:hover { background: linear-gradient(45deg, #f58529, #dd2a7b 55%, #8134af); border-color: transparent; }
.footer .socials a.s-x:hover { background: #f5f5f5; border-color: #f5f5f5; color: #111; }
.footer .socials a.s-th:hover { background: #e8e4de; border-color: #e8e4de; color: #111; }
.footer .socials a.s-yt:hover { background: #ff0000; border-color: #ff0000; }
.footer .socials a.s-tk:hover { background: #010101; border-color: #25f4ee; color: #fff; box-shadow: 0 0 14px rgba(37, 244, 238, .35); }
.footer .socials a.s-li:hover { background: #0a66c2; border-color: #0a66c2; }

/* Link lists — icon + color-only hover */
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.f-links { display: flex; flex-direction: column; gap: 3px; }
.f-links a {
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(255, 255, 255, .62); padding: 6px 0; font-size: .9rem; font-weight: 600;
  transition: color .2s ease;
}
.f-links a:hover { color: #fff; }
.f-links a i { width: 18px; text-align: center; font-size: .92em; color: rgba(255, 255, 255, .38); transition: color .2s ease; }
.f-links a:hover i { color: var(--accent-2); }
.footer-contact span[dir="ltr"] { unicode-bidi: isolate; }

/* Contact icon chips */
.footer-contact .c-chip {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: .95rem; color: rgba(255, 255, 255, .65);
  background: rgba(78, 113, 89, .14); border: 1px solid rgba(255, 255, 255, .08);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.footer-contact .c-chip i { width: auto; color: inherit; }
.footer-contact a:hover .c-chip { background: var(--brand); border-color: var(--brand-2); color: #fff; transform: translateY(-2px); }

/* Bottom bar */
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, .07); padding: 24px 0 30px;
  font-size: .82rem; color: rgba(255, 255, 255, .35);
}
.foot-bar-links { display: inline-flex; align-items: center; gap: 22px; }
.foot-bar-links > a { color: rgba(255, 255, 255, .5); font-weight: 600; transition: color .2s ease; }
.foot-bar-links > a:hover { color: #fff; }
.foot-bar-links .to-top {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .55); font-size: .85rem;
  transition: color .2s ease, border-color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.foot-bar-links .to-top:hover { color: #fff; border-color: rgba(255, 255, 255, .45); transform: translateY(-3px); }
/* Staff admin entry link — deliberately subtle against the other footer links */
.foot-bar-links .admin-link { display: inline-flex; align-items: center; gap: 7px; opacity: .75; }
.foot-bar-links .admin-link i { font-size: .78rem; }
.foot-bar-links .admin-link:hover { opacity: 1; }

@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 28px; padding: 56px 0 44px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* Phone only: strip the footer down to the "تابعنا" follow block — hide the logo,
   about text, tagline and the quick-links / partners / contact columns. The
   bottom copyright bar stays (separate utility row, not part of the link list). */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand > .brand,
  .footer-about,
  .footer-tagline,
  .footer-grid > .footer-col { display: none; }
  .footer-brand { grid-column: auto; }
  .footer-grid { padding: 44px 0 30px; }
  .footer-follow { margin-top: 0; text-align: center; }
  /* Centre the social row so the left and right side margins are equal (the
     start-aligned row otherwise leaves all leftover space on one edge). */
  .footer .socials { justify-content: center; }
  /* Bottom bar (copyright + privacy + admin + to-top): centre and stack so it
     lines up with the centred follow block above. */
  .footer-bottom { flex-direction: column; align-items: center; gap: 12px; text-align: center; }
}

/* ============================== WA FLOAT ================================ */
.wa-float {
  position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #1fae54; color: #fff !important; font-weight: 900; font-size: .8rem;
  box-shadow: 0 12px 28px rgba(31, 174, 84, .4);
  animation: wa-pulse 2.6s infinite;
}
.wa-float:hover { transform: scale(1.08); }
@keyframes wa-pulse {
  0% { box-shadow: 0 12px 28px rgba(31, 174, 84, .4), 0 0 0 0 rgba(31, 174, 84, .45); }
  70% { box-shadow: 0 12px 28px rgba(31, 174, 84, .4), 0 0 0 16px rgba(31, 174, 84, 0); }
  100% { box-shadow: 0 12px 28px rgba(31, 174, 84, .4), 0 0 0 0 rgba(31, 174, 84, 0); }
}

/* ============================== SCROLL REVEAL =========================== */
/* Gentle whole-page entrance on every normal (non-AJAX) navigation. */
main { animation: pageIn .5s ease-out both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.rise { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  .wa-float { animation: none; }
  main { animation: none; }
  html { scroll-behavior: auto; }
  /* donate disc stays static but keeps its raised halo */
  .tabbar .tab-donate .fab-btn, .tabbar .tab-donate .fab-btn i { animation: none; }
}

/* ============================== UTILITIES =============================== */
::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ============================== ICONS & NAV UPGRADE ===================== */
.btn i, .link-arrow i, .lang-item i, .menu a i, .mobile-menu a i,
.topbar a i, .topbar span i, .footer a i, .stat i, .contact-meta i { font-display: swap; }

/* Item visuals live in the header section; only chevrons and the glass submenu remain here. */
.menu a, .menu .drop-toggle {
  display: inline-flex; align-items: center; gap: 6px;
}
.drop-toggle .chev { font-size: .68em; color: var(--muted); opacity: 1; transition: transform .4s cubic-bezier(.22, 1, .36, 1), color .2s ease; }
.dropdown:hover .drop-toggle .chev, .dropdown.open .drop-toggle .chev { transform: rotate(180deg); color: var(--brand); }

.dropdown { position: relative; }
.submenu {
  position: absolute; top: calc(100% + 16px); inset-inline-start: 0; z-index: 80;
  min-width: 250px; background: var(--pop);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--line);
  border-radius: 20px; box-shadow: var(--shadow-lg); padding: 10px;
  transform-origin: top center;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.96);
  transition: opacity .28s ease, transform .45s cubic-bezier(.22, 1, .36, 1), visibility .45s;
}
.submenu::before {
  content: ""; position: absolute; top: -7px; inset-inline-start: 26px;
  width: 13px; height: 13px; background: var(--pop-solid);
  border-inline-start: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.dropdown:hover .submenu, .dropdown.open .submenu, .dropdown:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.submenu a {
  display: flex; align-items: center; gap: 12px; padding: 9px 11px;
  border-radius: 14px; color: var(--ink-2); font-weight: 700; font-size: .9rem;
  transition: background .25s ease, color .25s ease;
}
.submenu a i {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  display: inline-grid; place-items: center;
  background: var(--brand-soft); color: var(--brand); font-size: .95rem;
  transition: transform .35s cubic-bezier(.175, .885, .32, 1.275), background .25s ease, color .25s ease;
}
.submenu a:hover { background: var(--mist); color: var(--brand); }
.submenu a:hover i { background: var(--brand); color: #fff; transform: scale(1.08); }
.submenu a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
@media (hover: none) { .dropdown:hover .submenu { opacity: 0; visibility: hidden; } }

.mobile-menu a { display: flex; align-items: center; gap: 12px; }
.mobile-menu a i:first-child {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: inline-grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
  transition: background .25s ease, color .25s ease;
}
.mobile-menu a:hover i:first-child { background: var(--brand); color: #fff; }
.mobile-menu a:last-child { justify-content: center; }
.mobile-menu a.drawer-donate i:first-child { background: rgba(255, 255, 255, .18); color: #fff; }

.topbar-inner > span, .topbar-links a { display: inline-flex; align-items: center; gap: 7px; }

/* stat icons */
.stat { align-items: center; }
.stat .s-ic {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-soft), var(--tint-2));
  color: var(--brand); font-size: 1.15rem;
}

/* meta icons replace the old dot */
.meta span::before { content: none; }
.meta span i { color: var(--brand-2); font-size: .85rem; }

/* FAQ accordion */
.faq-item { padding: 0; gap: 0; cursor: default; }
.faq-item summary {
  display: flex; align-items: center; gap: 14px; padding: 20px 24px; cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; flex: 1; font-size: 1.02rem; }
.faq-item .fq-ic {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand);
}
.faq-item .chev { color: var(--muted); font-size: .8rem; transition: transform .25s ease; }
.faq-item[open] .chev { transform: rotate(180deg); color: var(--accent); }
.faq-item p { padding: 0 24px 22px 78px; margin: 0; }
[dir="rtl"] .faq-item p { padding: 0 78px 22px 24px; }
@media (max-width: 640px) {
  .faq-item p, [dir="rtl"] .faq-item p { padding-inline: 24px; }
}

/* ============================== SUPPORT FLOAT ===========================
   Circular icon-only twin of the WhatsApp float: same geometry, pulse ring
   and hover scale — logo apricot with navy mark keeps it the "support" side. */
.support-float {
  position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 65;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, #d9882c 100%);
  color: var(--accent-on) !important;
  box-shadow: 0 12px 28px rgba(235, 166, 83, .4);
  animation: sf-in .65s cubic-bezier(.22, 1, .36, 1) .8s both, sf-pulse 2.6s infinite 1.6s;
  transition: transform .2s ease;
}
.support-float:hover { color: var(--accent-on); transform: scale(1.08); }
.support-float .sf-icon { display: inline-flex; }
.support-float .sf-icon i { font-size: 1.4rem; animation: sf-beat 2.4s ease-in-out infinite; }
@keyframes sf-in { from { opacity: 0; transform: translateY(70px); } to { opacity: 1; transform: none; } }
@keyframes sf-pulse {
  0% { box-shadow: 0 12px 28px rgba(235, 166, 83, .4), 0 0 0 0 rgba(235, 166, 83, .45); }
  70% { box-shadow: 0 12px 28px rgba(235, 166, 83, .4), 0 0 0 16px rgba(235, 166, 83, 0); }
  100% { box-shadow: 0 12px 28px rgba(235, 166, 83, .4), 0 0 0 0 rgba(235, 166, 83, 0); }
}
@keyframes sf-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.22); } 24% { transform: scale(1); } 36% { transform: scale(1.15); } 48% { transform: scale(1); } }

/* ============================ DONATE CHANNELS CARD ====================== */
.dcard {
  background: var(--card); border: 1px solid var(--line); border-radius: 26px;
  box-shadow: var(--shadow-lg); padding: 22px;
}
.dcard-head { display: flex; gap: 14px; align-items: flex-start; min-height: 70px; }
.dcard-ic {
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft); color: var(--brand); font-size: 1.35rem;
}
.dcard-head h3 { margin: 0 0 4px; font-size: 1.15rem; color: var(--ink); }
.dcard-head p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.channels { display: grid; gap: 10px; margin-top: 18px; margin-bottom: 12px; }
.channel {
  position: relative; overflow: hidden; z-index: 0;
  display: flex; align-items: center; gap: 12px;
  min-height: 74px; padding: 13px 16px; border-radius: 18px;
  color: #fff !important; text-decoration: none;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .25s ease;
}
/* Hover: lifted card + diagonal light sweep across the whole button */
.channel::before {
  content: ""; position: absolute; top: -12%; bottom: -12%; inset-inline-start: -55%;
  width: 42%; transform: skewX(-18deg);
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .32), transparent);
  transition: inset-inline-start .6s cubic-bezier(.22, 1, .36, 1);
}
.channel:hover::before { inset-inline-start: 130%; }
.channel:hover { transform: translateY(-3px) scale(1.015); }
.ch-ic {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18); font-size: 1.15rem;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.channel:hover .ch-ic { transform: scale(1.1) rotate(-4deg); }
.ch-txt { flex: 1; display: grid; gap: 2px; }
.ch-txt strong { font-size: .95rem; font-weight: 800; }
.ch-txt small { font-size: .75rem; opacity: .85; font-weight: 600; }
.ch-ext { font-size: .8rem; opacity: .75; transition: transform .25s ease, opacity .25s ease; }
.channel:hover .ch-ext { opacity: 1; transform: translateY(-2px); }
/* GoFundMe brand palette (gofundme.com): emerald green CTA on white */
.ch-gfm { background: linear-gradient(135deg, #00b067 0%, #008a50 100%); box-shadow: 0 12px 26px rgba(0, 176, 103, .32); }
.ch-gfm:hover { box-shadow: 0 16px 32px rgba(0, 176, 103, .45); }
/* GoFundMe badge: fluorescent mint tile with the deep-green mark on top */
.ch-gfm .ch-ic { background: #ccf5a3; }
.ch-logo { display: block; width: 26px; height: auto; }
.ch-wa { background: linear-gradient(135deg, #25c05a 0%, #17923f 100%); box-shadow: 0 12px 26px rgba(31, 174, 84, .3); }
.ch-wa:hover { box-shadow: 0 16px 32px rgba(31, 174, 84, .4); }
.ch-mail { background: var(--card); color: var(--ink) !important; border: 2px solid var(--line-strong); box-shadow: var(--shadow); padding: 11px 14px; }
.ch-mail .ch-ic { background: var(--brand-soft); color: var(--brand); }
.ch-mail .ch-txt small { color: var(--muted); opacity: 1; }
.ch-mail::before { background: linear-gradient(105deg, transparent, rgba(0, 176, 103, .12), transparent); }
.ch-mail:hover { border-color: var(--brand); color: var(--brand) !important; }
.dcard-note {
  display: flex; align-items: center; gap: 8px; margin: auto 0 0;
  font-size: .78rem; font-weight: 700; color: var(--brand);
  background: var(--brand-soft); border-radius: 12px; padding: 9px 12px;
}

/* ====================== PAYMENT METHODS (PALESTINE) ==================== */
/* Two dcards side by side (channels first = right in RTL); rows reuse the channel style */
.donate-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch;
  margin-bottom: 38px;
}
/* Equal-height cards: the card fills its column and the note sticks to the bottom */
.dcol { display: flex; }
.dcol .dcard { flex: 1; display: flex; flex-direction: column; }
@media (max-width: 980px) { .donate-cols { grid-template-columns: 1fr; } }
/* Brand-gradient rows; logo tiles tuned per logo so each mark stays readable */
.ch-bop { background: linear-gradient(135deg, #c22a7a 0%, #8e1257 100%); box-shadow: 0 12px 26px rgba(178, 25, 107, .3); }
.ch-palpay { background: linear-gradient(135deg, #7a3ec4 0%, #3d1657 100%); box-shadow: 0 12px 26px rgba(90, 40, 160, .32); }
.ch-jawwal { background: linear-gradient(135deg, #8cc63f 0%, #4e9a1f 100%); box-shadow: 0 12px 26px rgba(90, 150, 40, .3); }
.ch-bop:hover { box-shadow: 0 16px 32px rgba(178, 25, 107, .42); }
.ch-palpay:hover { box-shadow: 0 16px 32px rgba(90, 40, 160, .44); }
.ch-jawwal:hover { box-shadow: 0 16px 32px rgba(90, 150, 40, .42); }
/* Icon-in-tile like the donation channels: glyph-only SVGs on brand tiles,
   Jawwal uses its square app icon as the tile itself */
.ch-paylogo { display: block; width: 26px; height: 26px; object-fit: contain; }
.ch-bop .ch-ic { background: #a91e68; }            /* white BOP glyph on deep magenta (slightly lighter for clarity) */
.ch-palpay .ch-ic { background: #fff; }             /* colorful PalPay glyph on white */
.ch-appic { background: transparent; overflow: hidden; }
.ch-appic .ch-paylogo { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

/* reduced motion kills float + nav micro-animations too */
@media (prefers-reduced-motion: reduce) {
  .support-float, .support-float .sf-icon i { animation: none; }
  .nav-actions .btn-primary i { animation: none; }
  .header, .nav, .brand-logo, .menu a, .menu .drop-toggle, .menu a i, .menu .drop-toggle i { transition: none; }
  .nav-pill, .lang-btn, .lang-menu, .lang-item, .submenu, .submenu a, .submenu a i, .drop-toggle .chev { transition: none; }
  .mobile-toggle, .mobile-toggle .hg, .mobile-menu, .mobile-menu a i:first-child,
  .nav-backdrop, .drawer-close { transition: none; }
  .mobile-menu.is-open, .mobile-menu.is-open a { animation: none; }
  .steps .step, .step::before, .step-num, .step-num::after, .step-ic { transition: none; }
  .step-connector { animation: none; }
}

/* ====================== MOTION PACK (inspired by khaima-gaza) ============ */
/* --- Hero: subtle grid texture + staggered entrance cascade --- */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='grid' width='100' height='100' patternUnits='userSpaceOnUse'><path d='M 100 0 L 0 0 0 100' fill='none' stroke='rgba(105,141,117,0.045)' stroke-width='1'/></pattern></defs><rect width='100%25' height='100%25' fill='url(%23grid)'/></svg>");
}
.hero-grid { z-index: 1; }
.hero .eyebrow  { animation: riseIn .7s ease-out both; }
.hero .display  { animation: riseIn .8s ease-out .12s both; }
.hero .lead     { animation: riseIn .8s ease-out .26s both; }
.hero-actions   { animation: riseIn .8s ease-out .40s both; }
.hero .trustline{ animation: riseIn .8s ease-out .54s both; }
.hero-card      { animation: artIn .9s ease-out .2s both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes artIn  { from { opacity: 0; transform: translateY(-22px) scale(.97); } to { opacity: 1; transform: none; } }

/* --- Floating icon chips around the hero art --- */
.hero-floating { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.float-chip {
  position: absolute; width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--brand);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(28, 47, 37, .16);
  opacity: .96; animation: floatChip 4.6s ease-in-out infinite;
}
.float-chip i { font-size: 1.3rem; }
.fc-1 { top: 10%; inset-inline-end: 9%;  animation-delay: 0s; }
.fc-2 { top: 26%; inset-inline-start: 7%; animation-delay: 1.15s; color: var(--accent); }
.fc-3 { bottom: 43%; inset-inline-end: 13%; animation-delay: 2.3s; }
.fc-4 { bottom: 34%; inset-inline-start: 12%; animation-delay: 3.2s; color: var(--accent); }
@keyframes floatChip { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-20px) rotate(10deg); } }
/* Decorative chips are hidden on small screens (short panel ⇒ they would overlap the note card) */
@media (max-width: 640px) { .hero-floating { display: none; } }

/* --- Art dot pulse ring --- */
.art-dot { animation: dotPulse 2.4s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 5px var(--accent-soft); }
  50% { box-shadow: 0 0 0 12px rgba(235, 166, 83, .12); }
}

/* --- Stats: gently bouncing icons (staggered) --- */
.stat .s-ic { animation: gentleBounce 2.8s ease-in-out infinite; }
.stats-grid .stat:nth-child(2) .s-ic { animation-delay: .35s; }
.stats-grid .stat:nth-child(3) .s-ic { animation-delay: .7s; }
.stats-grid .stat:nth-child(4) .s-ic { animation-delay: 1.05s; }
@keyframes gentleBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* --- Keep infinite float animations alive after scroll ---------------------
   Chromium can drop an element's compositor layer once the page is scrolled,
   which freezes its transform-based keyframes (they only run until first
   scroll). Promoting each decorative floater to its own GPU layer via
   will-change forces it to repaint on every frame, so the motion is continuous
   — most notably on the backdrop-filter chips that were otherwise static. --- */
.float-chip, .stat .s-ic, .hero-logo img, .cta-chip,
.support-float .sf-icon i, .split-photo img { will-change: transform; }

/* --- Cards: springy lift + gradient accent line + icon reaction --- */
.card {
  position: relative; overflow: hidden;
  transition: transform .4s cubic-bezier(.175, .885, .32, 1.275), box-shadow .35s ease, border-color .35s ease;
}
.card::before {
  content: ""; position: absolute; top: 0; inset-inline: 0; height: 4px; z-index: 3;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--accent));
  transform: scaleX(0); transform-origin: left; transition: transform .5s ease;
}
[dir="rtl"] .card::before { transform-origin: right; }
.card:hover { transform: translateY(-9px) scale(1.012); box-shadow: 0 20px 48px rgba(28, 47, 37, .15); border-color: var(--brand-2); }
.card:hover::before { transform: scaleX(1); }
.card .icon { transition: transform .45s cubic-bezier(.175, .885, .32, 1.275), background .3s, border-color .3s, color .3s; }
.card .icon i { transition: color .3s; }
.card:hover .icon { transform: scale(1.1) rotate(-8deg); background: var(--brand); border-color: var(--brand); color: #fff; }
.card:hover .icon i { color: #fff; }

/* project card media zoom */
.project-media img { transform: scale(1.02); transition: transform .7s cubic-bezier(.25, .46, .45, .94), filter .5s ease; }
.project-card:hover .project-media img { transform: scale(1.12); filter: saturate(1.08) brightness(1.03); }

/* --- Fully clickable cards (stretched link) --------------------------------
   The card's single primary link gets an invisible ::after that is sized to the
   whole card (the card is the nearest positioned ancestor). Clicking the image,
   title, text or any empty area therefore activates that one link. Keeps a valid
   single <a> (no nested anchors), native keyboard focus and correct destination.
   Any independent control inside a card must lift above this overlay with
   position: relative; z-index: 5 to keep its own behaviour. */
.card .link-arrow.is-stretched { color: var(--brand); }
.card .link-arrow.is-stretched::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: auto;
}
.card:has(.link-arrow.is-stretched) { cursor: pointer; }
/* the whole card is the hit-area, so drop the small inline focus ring and show it on the card instead */
.card .link-arrow.is-stretched:focus-visible { outline: none; }
.card:focus-within { border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft), var(--shadow); }
/* gentle, on-brand response of the title while the card is hovered / focused */
.card:has(.link-arrow.is-stretched):hover h3,
.card:has(.link-arrow.is-stretched):focus-within h3 { color: var(--brand-2); }

/* Buttons rely on the shared subtle lift in the BUTTONS block above — the old
   expanding "gloss circle" shine (scale(0)→scale(2.6) over .55s) was removed as
   too flashy and conflicting with the calm, quick hover/press language. */

/* --- Section blobs: slow drifting radial lights --- */
.section.dark, .cta { position: relative; overflow: hidden; }
.section.dark::before, .section.dark::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
  animation: blobFloat 18s ease-in-out infinite;
}
.section.dark::before {
  width: 480px; height: 480px; top: -35%; inset-inline-end: -8%;
  background: radial-gradient(circle, rgba(78, 113, 89, .22), transparent 70%);
}
.section.dark::after {
  width: 380px; height: 380px; bottom: -25%; inset-inline-start: -5%;
  background: radial-gradient(circle, rgba(232, 121, 74, .14), transparent 70%);
  animation-duration: 14s; animation-direction: reverse;
}
.section.dark > .container { position: relative; z-index: 1; }
.cta::before {
  content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%;
  top: -130px; inset-inline-start: -70px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
  animation: blobFloat 16s ease-in-out infinite;
}
.cta > * { position: relative; z-index: 1; }
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(30px, -30px) rotate(180deg); }
}

/* --- Impact KPI icons: soft pulse ring --- */
.kpi .kpi-ic { animation: iconPulse 3s ease-in-out infinite; }
@keyframes iconPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(105, 141, 117, .16); }
  50% { box-shadow: 0 0 0 14px rgba(105, 141, 117, 0); }
}

/* --- Section titles: gradient underline drawn in on reveal --- */
.section-head .title::after, .center .title::after {
  content: ""; display: block; width: 84px; height: 4px; border-radius: 99px; margin-top: 10px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform: scaleX(0); transform-origin: left; transition: transform .7s ease .25s;
}
[dir="rtl"] .section-head .title::after, [dir="rtl"] .center .title::after { transform-origin: right; }
.center .title::after { margin-inline: auto; }
.title.in::after { transform: scaleX(1); }

/* --- Reduced motion for the whole pack --- */
@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow, .hero .display, .hero .lead, .hero-actions, .hero .trustline, .hero-card,
  .float-chip, .art-dot, .stat .s-ic, .kpi .kpi-ic, .section.dark::before, .section.dark::after, .cta::before,
  .cta-shine, .cta-chip,
  .page-hero .breadcrumb, .page-hero h1.title, .page-hero .lead, .ph-arch, .ph-badge,
  .split-photo img, .sp-shine, .hero-logo img, .eyebrow::before {
    animation: none;
  }
  .card, .card .icon, .project-media img, .news-media img, .section-head .title::after, .center .title::after {
    transition: none;
  }
  .title::after { transform: scaleX(1); }
  /* Buttons & interactive controls: keep the colour/tone change, drop the movement */
  .btn, .btn > i, .chip, .link-arrow, .lang-btn, .menu a i, .menu .drop-toggle i { transition: none; }
  .btn::before { content: none; }  /* remove the light-sweep (it is pure motion) */
  .btn:hover, .btn:active, .btn:hover > i, .lang-btn:hover, .chip:active { transform: none; }
}

/* ============================== THEME TOGGLE ============================ */
/* Circular moon/sun button in the navbar: both icons stacked in one grid cell, crossfading */
.theme-toggle {
  width: 40px; height: 40px; flex: none; border-radius: 50%; cursor: pointer;
  display: inline-grid; place-items: center;
  background: var(--card); border: 1px solid var(--line-strong); color: var(--ink-2); font-size: .95rem;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1.5px) rotate(-14deg); }
.theme-toggle i { grid-area: 1 / 1; transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
html[data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
html[data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: none; }

/* ============================== DARK MODE =============================== */
/* html[data-theme] is set before first paint by an inline script in the layout head
   (saved choice > OS preference). Identity: the navy of the logo wordmark RAAB
   (#112c45) lifted into a readable blue scale, with the logo gold (#eba653) as a
   secondary rim. Light mode is untouched — every rule below is scoped to
   html[data-theme="dark"]. */
html[data-theme="dark"] {
  color-scheme: dark;
  /* surfaces — deep navy scale derived from #112c45 */
  --paper: #0a1220;
  --mist: #0d1728;
  --sand: #111e33;
  --line: #1f3350;
  --line-strong: #2e486e;
  --card: #122036;
  --card-2: #0f1b2f;
  --glass: rgba(10, 18, 32, .8);
  --glass-2: rgba(8, 14, 26, .95);
  --pop: rgba(15, 26, 44, .98);
  --pop-solid: #0f1a2c;
  --ring: #122036;
  --brand-line: #2c4767;
  --hero-a: #0c1626;
  --hero-b: #111f36;
  --sand-2: #0e1a2c;
  --tint-2: #1d3a63;
  /* brand: logo sage lifted to a legible tint for text/fills on dark */
  --brand: #9dbfa8;
  --brand-2: #b6d0bd;
  --brand-soft: #182c47;
  --deep: #081120;
  --deep-2: #0d1a30;
  /* logo gold — secondary rim/accent only */
  --gold: #eba653;
  /* apricot accent keeps its warm functional role (donate CTA, notices) */
  --accent: #eba653;
  --accent-2: #f2bc7d;
  --accent-soft: #2d1b10;
  --accent-strong: #eba653;  /* on navy surfaces apricot itself is legible as text */
  --accent-on: #102d44;
  /* text */
  --ink: #e8eef7;
  --ink-2: #c2cfdf;
  --muted: #8ba0bc;
  --shadow: 0 10px 30px rgba(3, 8, 16, .5);
  --shadow-lg: 0 24px 60px rgba(3, 8, 16, .62);
}
/* Near-black controls flip to light ink-on-paper pills for contrast */
html[data-theme="dark"] .btn-dark { background: #e4ecf6; color: #0a1626; --sheen: rgba(16, 45, 68, .18); }
html[data-theme="dark"] .btn-dark:hover { background: #ffffff; color: #0a1626; }
html[data-theme="dark"] .lang-btn:hover { background: #dbe6f2; border-color: #dbe6f2; color: #0a1626; }
html[data-theme="dark"] .mobile-toggle { background: #dbe6f2; color: #0a1626; }
html[data-theme="dark"] .mobile-toggle.is-active { background: var(--accent); color: var(--accent-on); }
/* Topbar: green tail replaced by a deep navy, text shifted to a cool grey-blue */
html[data-theme="dark"] .topbar { background: linear-gradient(90deg, var(--deep) 0%, var(--deep-2) 60%, #16305c 100%); color: #c9d6e8; }
html[data-theme="dark"] .topbar a { color: #eaf1f8; }
/* Nav capsule: smoked navy with the logo gold rim instead of a white one */
html[data-theme="dark"] .nav-pill {
  background: #14263f;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(235, 166, 83, .5);
}
/* Menu track: the hardcoded light segment bar becomes deep navy glass */
html[data-theme="dark"] .menu { background: rgba(6, 11, 20, .62); border-color: var(--line); }
/* Focus/hover rings that were hardcoded green */
html[data-theme="dark"] .btn-primary { color: #0a1626; box-shadow: 0 10px 24px rgba(35, 78, 130, .4); }
html[data-theme="dark"] .btn-primary:hover { color: #0a1626; box-shadow: 0 14px 30px rgba(35, 78, 130, .5); }
html[data-theme="dark"] .chip.active { color: #0a1626; }
html[data-theme="dark"] .steps .step:hover { border-color: rgba(157, 191, 168, .45); }
html[data-theme="dark"] .step-num { color: #0a1626; box-shadow: 0 8px 18px rgba(35, 78, 130, .4); }
html[data-theme="dark"] .steps .step:hover .step-num { box-shadow: 0 12px 26px rgba(35, 78, 130, .5); }
html[data-theme="dark"] .step-num::after { border-color: rgba(157, 191, 168, .3); }
html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field select:focus, html[data-theme="dark"] .field textarea:focus { box-shadow: 0 0 0 4px rgba(157, 191, 168, .18); }
html[data-theme="dark"] .picker-btn:hover, html[data-theme="dark"] .picker.open .picker-btn { border-color: rgba(157, 191, 168, .55); box-shadow: 0 0 0 4px rgba(157, 191, 168, .12); }
html[data-theme="dark"] ::selection { background: var(--brand); color: #0a1626; }
/* Animated step connectors: navy→terracotta instead of green→terracotta */
html[data-theme="dark"] .step-connector {
  background:
    radial-gradient(circle closest-side, var(--accent-2), rgba(232, 121, 74, 0)) no-repeat 0 50% / 8px 8px,
    linear-gradient(to right, rgba(157, 191, 168, .5), rgba(235, 166, 83, .35)) no-repeat 0 50% / 100% 2px;
}
html[data-theme="dark"][dir="rtl"] .step-connector {
  background:
    radial-gradient(circle closest-side, var(--accent-2), rgba(232, 121, 74, 0)) no-repeat 0 50% / 8px 8px,
    linear-gradient(to left, rgba(157, 191, 168, .5), rgba(235, 166, 83, .35)) no-repeat 0 50% / 100% 2px;
}
/* White marks on the now-light navy fills flip to dark navy ink */
html[data-theme="dark"] .ph-badge { color: #0a1626; }
html[data-theme="dark"] .submenu a:hover i { color: #0a1626; }
html[data-theme="dark"] .mobile-menu a:hover i:first-child { color: #0a1626; }
html[data-theme="dark"] a.chan:hover .chan-ic { color: #0a1626; }
html[data-theme="dark"] .card:hover .icon, html[data-theme="dark"] .card:hover .icon i { color: #0a1626; }
html[data-theme="dark"] .footer-contact a:hover .c-chip { color: #0a1626; }
/* Hero glows and decorative rings: navy light, warm accent kept */
html[data-theme="dark"] .hero {
  background:
    radial-gradient(720px 380px at 88% -10%, rgba(58, 108, 178, .18), transparent 65%),
    radial-gradient(520px 420px at -8% 108%, rgba(235, 166, 83, .12), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--mist) 100%);
}
html[data-theme="dark"] .hero::before { background: rgba(157, 191, 168, .09); }
html[data-theme="dark"] .hero-visual::before {
  background:
    radial-gradient(180px 180px at 82% 18%, rgba(232, 121, 74, .14), transparent 70%),
    radial-gradient(240px 240px at 15% 80%, rgba(58, 108, 178, .16), transparent 70%),
    repeating-linear-gradient(115deg, rgba(157, 191, 168, .06) 0 2px, transparent 2px 26px);
}
html[data-theme="dark"] .hero-logo::after { background: radial-gradient(closest-side, rgba(58, 108, 178, .18), transparent); }
html[data-theme="dark"] .page-hero { background-image: radial-gradient(rgba(157, 191, 168, .16) 1px, transparent 1.4px), linear-gradient(180deg, var(--hero-a) 0%, var(--hero-b) 100%); }
/* Liquid-glass chips over photos: smoky dark navy glass, subtler gloss */
html[data-theme="dark"] .glass-orbit .float-chip {
  background: rgba(8, 14, 26, .55); border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .22), inset 0 -7px 14px rgba(255, 255, 255, .05);
}
html[data-theme="dark"] .glass-orbit .float-chip::before {
  background: radial-gradient(120% 92% at 30% 16%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 48%);
}
html[data-theme="dark"] .float-chip { background: var(--card); border-color: var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
/* Partner logos are usually dark artwork: keep their plate light so they stay readable */
html[data-theme="dark"] .logo-box { background: #eef2f7; color: #33414f; border-color: var(--line); }
html[data-theme="dark"] .logo-box:hover { border-color: var(--brand); color: #22364e; }
/* Dark-on-dark brand marks (X / Threads / TikTok) flip to light ink */
html[data-theme="dark"] .social-card.s-x, html[data-theme="dark"] .social-card.s-th, html[data-theme="dark"] .social-card.s-tk { --sc: #dbe6f2; --sct: #0a1626; }
html[data-theme="dark"] .social-card.s-x:hover, html[data-theme="dark"] .social-card.s-th:hover, html[data-theme="dark"] .social-card.s-tk:hover { border-color: rgba(255, 255, 255, .25); }
/* Terracotta notice/badges stay readable: dark tint + warm text */
html[data-theme="dark"] .notice { background: #2d1b10; border-color: #5a3620; color: #f2b98c; }
html[data-theme="dark"] [data-project-status="funding"] .badge { background: #2d1b10; color: #f2b98c; border-color: #5a3620; }
/* Completed-status badge: navy chip look on dark cards */
html[data-theme="dark"] [data-project-status="completed"] .badge { background: #16263f; color: #b9cde4; border-color: var(--brand-line); }
/* Donate CTA and support pill are terracotta — white text stays correct */
html[data-theme="dark"] .nav-actions .btn-primary, html[data-theme="dark"] .nav-actions .btn-primary:hover { color: #fff; }
/* The "dark" showcase section: navy glow instead of the green one, cool text scale */
html[data-theme="dark"] .dark {
  background:
    radial-gradient(600px 300px at 90% 0%, rgba(58, 108, 178, .22), transparent 60%),
    linear-gradient(150deg, var(--deep) 0%, var(--deep-2) 100%);
  color: #d7e2f0;
}
html[data-theme="dark"] .dark p, html[data-theme="dark"] .dark .lead { color: #b4c5da; }
html[data-theme="dark"] .dark .eyebrow { color: #a8c8ea; }
html[data-theme="dark"] .section.dark .card { border-color: var(--line); }
html[data-theme="dark"] .section.dark::before { background: radial-gradient(circle, rgba(58, 108, 178, .2), transparent 70%); }
/* Footer contact chips: navy tint */
html[data-theme="dark"] .footer-contact .c-chip { background: rgba(157, 191, 168, .14); }
/* KPI pulse ring (About page): navy halo instead of the green keyframe */
@keyframes iconPulseNavy {
  0%, 100% { box-shadow: 0 0 0 0 rgba(157, 191, 168, .2); }
  50% { box-shadow: 0 0 0 14px rgba(157, 191, 168, 0); }
}
html[data-theme="dark"] .kpi .kpi-ic { animation-name: iconPulseNavy; }
/* Big field photos glow against dark surfaces — soften them slightly */
html[data-theme="dark"] .split-photo img, html[data-theme="dark"] .news-media img,
html[data-theme="dark"] .project-media img, html[data-theme="dark"] .ph-arch img { filter: brightness(.86) saturate(.97); }
/* Mint link-arrow on the navy showcase section → light steel blue */
html[data-theme="dark"] .dark .link-arrow { color: #a8c8ea; }
/* Hero grid texture is a baked-in green data-URI: restate it in navy for dark */
html[data-theme="dark"] .hero::after {
  background: url("data:image/svg+xml,<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='grid' width='100' height='100' patternUnits='userSpaceOnUse'><path d='M 100 0 L 0 0 0 100' fill='none' stroke='rgba(111,155,203,0.06)' stroke-width='1'/></pattern></defs><rect width='100%25' height='100%25' fill='url(%23grid)'/></svg>");
}

/* ========================= MOBILE APP LAYER ===============================
   Phone-first navigation & touch layer: fixed bottom tab bar with a raised
   donate action (≤900px), safe-area padding, 2-up stat cards, swipeable
   filter chips, stacked action buttons and larger tap targets. Layouts
   above 900px are untouched.
   ========================================================================== */
.tabbar { display: none; }

@media (max-width: 900px) {
  /* keep content clear of the fixed bar + iPhone home indicator / notch */
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }

  .tabbar {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 96;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--pop); border-top: 1px solid var(--line);
    box-shadow: 0 -10px 30px rgba(28, 47, 37, .1);
    padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
  }
  .tabbar .tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 56px; padding: 6px 2px; border: 0; border-radius: 16px; background: none;
    color: var(--muted); font: inherit; font-size: .68rem; font-weight: 700;
    text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, background-color .18s ease;
  }
  .tabbar .tab-ic { display: grid; place-items: center; width: 44px; height: 30px; border-radius: var(--r-pill);
    transition: background-color .22s ease, transform .22s cubic-bezier(.22, 1, .36, 1); }
  .tabbar .tab-ic i { font-size: 1.14rem; line-height: 1; }
  .tabbar .tab-lb { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar .tab[aria-current="page"] { color: var(--brand); }
  .tabbar .tab[aria-current="page"] .tab-ic { background: var(--brand-soft); transform: translateY(-1px); }
  /* active dot under the icon pill, mirrors the desktop nav magic line */
  .tabbar .tab[aria-current="page"]::after {
    content: ""; position: absolute; bottom: 7px; left: 50%; width: 4px; height: 4px;
    border-radius: 50%; background: var(--brand); translate: -50% 0;
  }
  .tabbar .tab-donate { color: var(--accent-strong); }
  .tabbar .tab-donate[aria-current="page"] { color: var(--accent-strong); }
  .tabbar .tab-donate[aria-current="page"]::after { display: none; }
  .tabbar .tab-donate .fab-btn {
    width: 50px; height: 50px; border-radius: 50%; margin-top: -22px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent) 0%, #d9882c 100%); color: var(--accent-on);
    border: 3px solid var(--pop); box-shadow: 0 8px 20px rgba(235, 166, 83, .4);
    font-size: 1.12rem; transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
    animation: fabBeat 1.9s cubic-bezier(.22, 1, .36, 1) infinite;
  }
  /* living heartbeat: double thump + a warm halo breathing around the donate disc */
  @keyframes fabBeat {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(235, 166, 83, .35), 0 8px 20px rgba(235, 166, 83, .4); }
    14% { transform: scale(1.11); box-shadow: 0 0 0 7px rgba(235, 166, 83, .12), 0 8px 20px rgba(235, 166, 83, .45); }
    28% { transform: scale(1); }
    42% { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(235, 166, 83, .07), 0 8px 20px rgba(235, 166, 83, .45); }
    56% { transform: scale(1); box-shadow: 0 0 0 16px rgba(235, 166, 83, 0), 0 8px 20px rgba(235, 166, 83, .4); }
  }
  .tabbar .tab-donate .fab-btn i { animation: fabHeart 1.9s ease-in-out infinite; }
  @keyframes fabHeart { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.2); } 28% { transform: scale(1); } 42% { transform: scale(1.14); } 56% { transform: scale(1); } }
  .tabbar .tab-donate[aria-current="page"] .fab-btn { box-shadow: 0 0 0 4px var(--accent-soft), 0 8px 20px rgba(235, 166, 83, .45); }

  /* the tab bar replaces the header hamburger on phones */
  .mobile-toggle { display: none; }

  /* Phone header: drop the announcement strip and the redundant top actions,
     then center the logo with the org name (AR + EN) beneath it */
  .topbar { display: none; }
  .nav-actions .theme-toggle { display: none; }
  /* the top donate CTA is redundant here: the tab bar carries its beating disc */
  .nav-actions .btn-primary { display: none; }
  .nav { position: relative; margin-block: 8px 5px; }
  /* Pinned on scroll: the frost lives on a gradient-masked layer behind the capsule —
     strongest at the top, it melts away a little below the pill, so content never
     ends in a hard cut line. The capsule itself stays near-opaque. Scroll-only. */
  .header { top: 0; padding-top: 6px; }
  /* At rest the layer carries NOTHING but a 0 opacity — no background, no mask,
     and especially no backdrop-filter (a compositor hairline appears at its edge
     even at opacity 0). All frost properties arrive only while scrolling. */
  .header::before { content: ""; position: absolute; z-index: 0; inset: 0 0 -34px; opacity: 0; transition: opacity .35s ease; }
  /* on the way back to top: hold the frost while the layer fades out, drop it only
     once fully invisible (delay) so its edge never shows as a hairline mid-transition */
  .header:not(.is-scrolled)::before {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    transition: opacity .35s ease, backdrop-filter 0s .35s, -webkit-backdrop-filter 0s .35s;
  }
  .header.is-scrolled::before {
    opacity: 1;
    background: color-mix(in srgb, var(--paper) 72%, transparent);
    backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0, 0, 0, .5) 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0, 0, 0, .5) 82%, transparent 100%);
  }
  .header.is-scrolled .nav {
    background: var(--pop);
    backdrop-filter: blur(30px) saturate(1.7); -webkit-backdrop-filter: blur(30px) saturate(1.7);
  }
  .nav-divider { display: none; }
  /* One centered row: logo at the reading-start (right in RTL) with both name
     lines beside it; the whole group sits on the screen's center axis and the
     text auto-scales so logo + text always fit edge to edge */
  .brand {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: max-content; /* never shrink-to-fit against the nav edge — logo + text keep their true width */
    flex-direction: row; align-items: center; gap: 8px; max-width: none;
  }
  html[dir="rtl"] .brand { transform: translateX(-50%); }
  .brand:hover .brand-logo { transform: none; }
  .brand-logo { height: 40px; width: auto; flex-shrink: 0; }
  .header.is-scrolled .brand-logo { height: 36px; }
  .brand-name { display: flex; flex-direction: column; align-items: center; line-height: 1.25; text-align: center; }
  .brand-name strong { font-size: min(.735rem, 3.15vw); font-weight: 800; color: var(--ink); white-space: nowrap; }
  .brand-name small { font-size: min(.56rem, 2.4vw); color: var(--muted); font-weight: 700; letter-spacing: .02em; white-space: nowrap; }

  /* drawer and backdrop must cover the tab bar when open (no dead strip at the bottom) */
  .mobile-menu { z-index: 101; }
  .nav-backdrop { z-index: 100; }

  /* raise the corner floats above the bar; give the drawer safe-area room */
  .wa-float, .support-float { bottom: calc(96px + env(safe-area-inset-bottom)); width: 48px; height: 48px; }
  .mobile-menu { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }

  /* Theme switch row inside the drawer, sitting above the language chips */
  .drawer-theme {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 10px 2px 4px; padding: 12px 16px; border-radius: var(--r-m);
    background: var(--mist); border: 1px solid var(--line);
  }
  .drawer-theme .dt-label { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); font-size: .95rem; }
  .drawer-theme .dt-label i { color: var(--brand); }
  .drawer-theme .dt-switch {
    position: relative; width: 52px; height: 30px; flex-shrink: 0; border: 0; border-radius: var(--r-pill);
    background: var(--line-strong); cursor: pointer; transition: background-color .25s ease;
  }
  .drawer-theme .dt-switch .dt-knob {
    position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 6px rgba(28, 47, 37, .3); transition: translate .28s cubic-bezier(.22, 1, .36, 1);
  }
  /* ON = dark mode: knob glides to the far edge via logical flip */
  .drawer-theme .dt-switch[aria-checked="true"] { background: var(--brand); }
  .drawer-theme .dt-switch[aria-checked="true"] .dt-knob { translate: 22px 0; }
  html[dir="rtl"] .drawer-theme .dt-switch[aria-checked="true"] .dt-knob { translate: -22px 0; }
  html[dir="rtl"] .drawer-theme .dt-switch .dt-knob { right: 3px; }
  html[data-theme="dark"] .drawer-theme { background: var(--deep-2); border-color: var(--line); }
}

/* Phone type rhythm: trim the headings a notch so long titles (e.g. the hero
   "معًا نرأب الألم ونصنع الأمل") sit comfortably, and ease the secondary text a
   step down for tighter phone reading. Relative reductions inside the phone
   breakpoint only — tablet/desktop type scale is untouched. */
@media (max-width: 640px) {
  .display { font-size: clamp(1.8rem, 6.6vw, 2.7rem); }
  .title, h2 { font-size: clamp(1.32rem, 5.6vw, 1.8rem); }
  .lead { font-size: 1rem; }
  .card p { font-size: .95rem; }
  .donor-cards .card p { font-size: .82rem; }
  .article p { font-size: .98rem; }
  .small { font-size: .8rem; }
}

/* Phone content rhythm: 2 stat cards per row, swipeable filter chips */
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat { padding: 16px 14px; gap: 10px; }
  .stat strong { font-size: 1.28rem; }
  .stat span { font-size: .84rem; }
  /* Filter chips: keep ALL of them on a single row on phones (الكل / قيد التنفيذ
     …) without any chip leaving the screen — they shrink (fluid font + padding)
     to fit the narrowest width instead of wrapping or scrolling off-edge. */
  .filterbar { flex-wrap: nowrap; justify-content: center; gap: 4px; margin-bottom: 18px; }
  .filterbar .chip {
    flex: 0 1 auto; min-width: 0; white-space: nowrap;
    padding: 6px clamp(3px, 1.4vw, 12px);
    font-size: clamp(.52rem, 2.2vw, .8rem);
  }

  /* Home sectors ("نعمل حيث تكون الحاجة"): two columns of stacked cards on
     phones (3 over 3) instead of one tall single column — sized so title +
     blurb stay legible and no long word breaks the viewport. */
  .sectors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sectors-grid .card { padding: 16px 14px; gap: 6px; border-radius: var(--r-m); }
  .sectors-grid .card .icon { width: 44px; height: 44px; border-radius: 13px; font-size: 1.2rem; margin-bottom: 4px; }
  .sectors-grid .card h3 { font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere; }
  .sectors-grid .card p { font-size: .76rem; line-height: 1.4; overflow-wrap: anywhere; }

  /* Action buttons: labels wrap to readable lines inside each button rather
     than being shrunk to micro-text; the icons stay visible on every width. */
  .hero-actions, .cta-actions { flex-wrap: nowrap; gap: 8px; }
  .hero-actions .btn, .cta-actions .btn {
    flex: 1 1 0; min-width: 0;
    align-items: center; justify-content: center; text-align: center;
    white-space: normal; overflow-wrap: anywhere; line-height: 1.3;
    padding: 10px 8px; font-size: .82rem; gap: 6px;
  }
  .cta-actions .btn { font-size: .88rem; }
  /* Home hero actions: the primary "support" button stands alone on its own
     row, the two secondary buttons share the row beneath. All three carry the
     same height so the primary reads as the width of the pair below it — a
     tidy, balanced stack instead of three cramped columns. */
  .hero .hero-actions { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 8px; }
  .hero .hero-actions .btn { min-width: 0; min-height: 48px; }
  .hero .hero-actions .btn:first-child { grid-column: 1 / -1; }
  /* Trust badges: the three checks share one row, labels wrap if needed */
  .hero .trustline { flex-wrap: nowrap; gap: 8px; margin-top: 22px; font-size: .74rem; }
  .trustline span { flex: 1 1 0; min-width: 0; justify-content: center; text-align: center; gap: 5px; white-space: normal; overflow-wrap: anywhere; }
  .trustline span::before { font-size: .7rem; }
  /* CTA card on phones: a centred hero-style card. The floating icon chips sit
     in a top decorative band (left / centre / right). The container's 28px
     row-gap is zeroed and the lead's trailing margin dropped so the support /
     contact buttons ride right under the copy (no big void), and the card is
     trimmed to a snug height. Chips are nudged down a touch. */
  .cta { padding: 50px 18px 18px; text-align: center; gap: 0; }
  .cta .cta-chip { width: 28px; height: 28px; font-size: .8rem; }
  .cta .cc-1 { top: 26px; inset-inline-start: 16px; inset-inline-end: auto; }
  .cta .cc-3 { top: 26px; inset-inline-end: 16px; inset-inline-start: auto; }
  .cta .cc-2 { bottom: auto; top: 16px; inset-inline-start: auto; inset-inline-end: auto; left: 50%; margin-left: -13px; width: 26px; height: 26px; }
  /* A standalone button placed directly in a split copy column (e.g. "learn
     more") isn't in an actions row — cap it and let a long label wrap so wider
     scripts never push the column past the viewport */
  .split > div > .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; }
  /* Phone reading order inside the CTA card: title first, buttons last */
  .cta .cta-copy { order: 1; flex: 1 1 100%; }
  .cta .cta-copy .lead { margin-bottom: 0; }
  .cta .cta-actions { order: 2; width: 100%; margin-top: 16px; }
}

/* Very small phones: single-column stats so numbers never wrap awkwardly */
@media (max-width: 380px) {
  .stats-grid { grid-template-columns: 1fr; }
  /* The home "principles" are four short text tiles — keep them 2×2 so they
     don't collapse into one long stacked column on narrow phones. Each tile
     turns vertical (icon above, label below) so a long word never overflows
     the tight half-width column. */
  .stats .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats .stat { flex-direction: column; text-align: center; gap: 8px; padding: 16px 12px; }
  .stats .stat span { min-width: 0; overflow-wrap: anywhere; }
}

/* Coarse pointers: comfortable 44px+ targets and no iOS focus-zoom */
@media (pointer: coarse) {
  .chip { padding: 10px 20px; }
  .field input, .field select, .field textarea { font-size: 1rem; }
  .lang-item { padding: 12px 16px; }
  .picker-opt { padding: 12px 16px; }
  .mobile-menu .drawer-langs a { padding: 12px 14px; }
  .footer .socials a { min-width: 44px; min-height: 44px; }
  .mobile-toggle { min-width: 44px; min-height: 44px; }
}

/* Touch feedback: brief press states (hover is unavailable on phones) */
@media (hover: none) {
  .card:active, .stat:active, .channel:active, .about-stat:active { transform: scale(.985); }
  .tabbar .tab:active .tab-ic { transform: scale(.86); }
  .tabbar .tab-donate:active .fab-btn { transform: scale(.92); }
}