/* giving-doors.css — «أبواب العطاء».
 *
 * Loaded LAST on index.html, and that placement is the point: this repository
 * has nine stylesheets and v9-design-system.css declares the shared card
 * surface with !important. A rule written here in a `.gdoor` namespace never
 * meets those selectors, so nothing needs !important to win and nothing this
 * file does can reach another section's cards.
 *
 * Every colour is a --ds- token from v9-design-system.css, so the section
 * follows the identity rather than restating it. The fallbacks after each
 * token are the same values, present only for the case where this sheet
 * arrives before the token sheet.
 */

.gdoors {
  padding-block: clamp(56px, 7vw, 96px);
  padding-inline: var(--ds-s5, 24px);
  background: var(--ds-cream-50, #fff);
}

/* 1240px gave five 222px columns, too narrow once the description sat at the
   16px base. 1360px puts each card at ~262px, which is where a two-to-three
   word Arabic line stops breaking awkwardly. */
.gdoors__inner { max-width: 1360px; margin-inline: auto; }

/* ---------- The section header, shared ----------
 *
 * Used by «أبواب العطاء» AND by «تبرع حسب الأثر» directly below it. One class,
 * not a copy: the two sections opened differently on the same screen — one
 * centred under a gold rule, the other left-aligned under an eyebrow — and a
 * reader who learns from the first how a section begins here should not find
 * the second contradicting it. Copying the rules across would have fixed
 * today and guaranteed the next drift.
 *
 * The compound selectors are deliberate. .v9-section h2 in
 * v9-design-system.css is (0,1,1) and would beat a bare .mb-head__title at
 * (0,1,0); written as a descendant of .mb-head it is (0,2,0) and wins without
 * !important. Measured, not assumed — the impact section carries .v9-section.
 */
/* .mb-head, its title, gold rule and lead now live in theme.css (2026-09-11),
   which every public page loads — the component is no longer homepage-only. */

/* The grid, and why the column count is written out instead of auto-fit.
 *
 * auto-fit with a minmax floor was the first attempt and it was measured to
 * fail: at an 800px viewport it resolved to four columns, leaving the fifth
 * card alone on its own row against three empty slots. A row of one under a
 * row of four reads as a mistake, not as a layout.
 *
 * Five items break well as 5, as 3+2 and as 2+2+1, and badly as 4+1 — so the
 * counts that produce those are named here and the 4-column band is simply
 * never entered. The cost is stated rather than hidden: the association can
 * add a sixth door from the panel, and a sixth lands as 5+1 at the widest
 * size. Five is what ships; if the list grows past five this rule is the one
 * to revisit. */
/* Nine doors since 2026-09-13 (decision of Mohamed Fahim): the official
 * catalogue's eight programmes plus «الصدقات». Nine is three rows of three, so
 * the grid is 3 columns from the desktop down to the tablet — no orphan card
 * at any width above the phone, where the odd-last rule below takes over. */
.gdoors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
}

@media (max-width: 1099px) {
  .gdoors__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 759px) {
  .gdoors__grid { grid-template-columns: repeat(2, 1fr); }
}

.gdoor {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ds-line, rgba(10, 42, 61, 0.10));
  border-radius: var(--ds-r-md, 18px);
  box-shadow: var(--ds-sh-1, 0 2px 6px rgba(10, 42, 61, 0.06));
  overflow: hidden;
  transition: transform 220ms cubic-bezier(.22, .61, .36, 1),
              box-shadow 220ms cubic-bezier(.22, .61, .36, 1),
              border-color 220ms;
}

.gdoor:hover,
.gdoor:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--ds-sh-2, 0 10px 28px rgba(10, 42, 61, 0.08));
  border-color: var(--ds-gold-300, #e8cf83);
}

.gdoor__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ds-teal-050, #eef3f6);
}

.gdoor__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
}

.gdoor:hover .gdoor__img { transform: scale(1.045); }

/* WITHDRAWN 10 Sep 2026, by request: «أبواب العطاء» shows no kind labels.
   display:none and not a markup edit, deliberately. The badge is emitted from
   TWO places — the static markup in index.html and giving-doors.js's template
   — and giving-doors.js decides whether to repaint by comparing its own
   rendered HTML against what is already in the grid. Removing the span from
   one side makes those two strings differ, the guard stops matching, the grid
   repaints from the JSON, and the badges come back. That exact trap cost this
   section its entrance animation once already; the comment in giving-doors.js
   records it. One CSS declaration keeps both sides byte-identical.
   display:none also takes it out of the accessibility tree, so it is gone for
   a screen reader too rather than announced but invisible.
   The `badge` field stays in data/giving-doors.json and the panel still edits
   it, so bringing the labels back is deleting the line below and nothing else.

   The rest of the block is kept for that reason. It reads: the badge sat on
   the photograph, so it carried its own opaque ground rather than trusting
   whatever pixels were underneath. */
.gdoor__badge {
  display: none;
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.6;
  color: #fff;
  background: var(--ds-teal-900, #0a2a3d);
  box-shadow: 0 2px 8px rgba(10, 42, 61, 0.28);
}

.gdoor__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s2, 8px);
  padding: var(--ds-s5, 24px) var(--ds-s4, 16px) var(--ds-s4, 16px);
  flex: 1 1 auto;
  text-align: center;
}

/* THE ONE PLACE THIS FILE USES !important, AND WHY.
 *
 * MEASURED, not assumed: aegov-dls.css declares
 *
 *     main h3 { font-size: 2rem !important }   @media (min-width: 1280px)
 *
 * — a PAGE-heading scale applied to every h3 in main. On a card 222px wide it
 * rendered the title at 32px above a 14.4px description: the two lines of one
 * card differing by more than 2x, and the neighbouring «ما الأثر…» cards
 * sitting at 18px a screen below. That is the inconsistency being fixed.
 *
 * That sibling section escapes the rule only because its titles are <span
 * class="iec-title">, not headings. Copying that trick would fix the size and
 * cost the semantics: a card title IS a heading, and a screen-reader user
 * navigating this page by headings should find five donation doors.
 *
 * So the element stays an <h3> and the declaration is overridden. !important
 * is required because !important is what it is competing with — specificity
 * alone cannot beat it, at any weight.
 *
 * The numbers are the sibling section's own, measured on the same page:
 * title 18px / 700, description 16px. Not chosen — matched. 16px and not the
 * 14.4px this file first shipped, because aegov-dls.css deliberately raises
 * card body text to the 16px base, and undercutting that here would reproduce
 * the defect that rule exists to prevent. */
.gdoors .gdoor .gdoor__title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  color: var(--ds-ink-900, #1a2530);
  margin: 0;
  text-wrap: balance;
}

.gdoors .gdoor .gdoor__desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ds-ink-700, #324049);
  margin: 0;
}

/* THE BUTTON IS THE SITE'S BUTTON, NOT A NEW ONE.
 *
 * The first version of this section styled its own call to action — teal fill,
 * white text, 10px radius, 15.2px at weight 700. It looked fine on its own and
 * it was wrong: measured against the hero directly above it, the site's primary
 * button is gold #C9A227 with navy #0A2A3D text, an 8px radius, 48px tall, 16px
 * at weight 500. Two different primary buttons a screen apart is not a theme.
 *
 * So the markup carries `primary-button full-width` and this rule set touches
 * only what a card needs and a button does not know about: where it sits in the
 * card, and the arrow. Every colour, size and hover state comes from
 * aegov-dls.css, which means a future change to the site's button reaches this
 * section on its own instead of leaving it behind.
 *
 * margin-block-start:auto is the one thing that matters here — it pins the
 * button to the bottom of the card so all five line up on one baseline however
 * long the descriptions run. */
.gdoor__cta.primary-button {
  margin-block-start: auto;
  gap: 8px;
}

/* The giving icon (2026-09-13): an open hand offering a heart, before the word,
   where an arrow after it used to say only "go". Mirrored so the hand comes in
   from the button's outer edge and offers the heart toward the text. On hover
   the heart lifts off the palm, which is the one motion that means giving. */
.gdoor__give {
  inline-size: 1.25em;
  block-size: 1.25em;
  flex: 0 0 auto;
  transform: scaleX(-1);
  overflow: visible;
}
.gdoor__heart {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 240ms cubic-bezier(.22, .61, .36, 1);
}
.gdoor:hover .gdoor__heart,
.gdoor__cta:focus-visible .gdoor__heart { transform: translateY(-2.5px) scale(1.06); }

/* TWO DOORS TO A ROW ON A PHONE (محمد فهيم 2026-09-11). It was one: five
   full-width cards measured 2,164px at 375. Two columns keep the 759px rule
   above all the way down, and the card compacts to a ~160px column: a
   squarer photo, a tighter body, 16px title, 14px description, a shorter
   button. Five does not divide by two, so the last door takes the whole row
   (the :nth-child(odd) guard keeps that true if the list becomes six), with
   a wider photo so it is not twice as tall as its neighbours. */
@media (max-width: 759px) {
  .gdoors__grid .gdoor:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .gdoors__grid .gdoor:last-child:nth-child(odd) .gdoor__img { aspect-ratio: 16 / 7; }
}
@media (max-width: 560px) {
  .gdoors__grid { gap: 12px; }
  .gdoor__img { aspect-ratio: 4 / 3; }
  .gdoor__body {
    gap: 6px;
    padding: 12px 10px 12px;
    text-align: start;
  }
  .gdoors .gdoor .gdoor__title {
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }
  .gdoors .gdoor .gdoor__desc {
    font-size: 0.875rem;
    line-height: 1.6;
  }
  .gdoor__cta.primary-button {
    min-height: 2.5rem;
    padding-inline: 8px;
    font-size: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gdoor,
  .gdoor__img,
  .gdoor__cta,
  .gdoor__heart { transition: none !important; }
  .gdoor:hover,
  .gdoor:focus-within { transform: none; }
  .gdoor:hover .gdoor__img { transform: none; }
  .gdoor:hover .gdoor__heart,
  .gdoor__cta:focus-visible .gdoor__heart { transform: none; }
}

/* MOTION: the five cards arrive in sequence, not as a slab.
 *
 * .reveal is the site's own entrance — opacity and a 14px rise over 520ms,
 * added by v9-overrides.js when the section scrolls into view. All five cards
 * carry it, so all five were arriving on the same frame: one block appearing
 * at once, which reads as a page redraw rather than as content arriving.
 *
 * A 70ms step is the whole change. Small enough that the row still feels like
 * one gesture — the last card starts 280ms after the first, while the first is
 * still moving — and large enough for the eye to follow the sequence right to
 * left, which is the reading direction here. Longer steps make a visitor wait
 * for the section to finish assembling itself.
 *
 * The delay is on the card and not on a wrapper because .reveal already owns
 * the transition; adding a delay is the least this can do and still be a
 * stagger. */
.gdoors__grid .gdoor.reveal { transition-delay: 0ms; }
.gdoors__grid .gdoor.reveal:nth-child(2) { transition-delay: 70ms; }
.gdoors__grid .gdoor.reveal:nth-child(3) { transition-delay: 140ms; }
.gdoors__grid .gdoor.reveal:nth-child(4) { transition-delay: 210ms; }
.gdoors__grid .gdoor.reveal:nth-child(5) { transition-delay: 280ms; }

/* The delay must go with the motion. A visitor who asked for reduced motion
   and still waited 280ms for a card to appear would have been given the wait
   without the reason for it. */
@media (prefers-reduced-motion: reduce) {
  .gdoors__grid .gdoor.reveal { transition-delay: 0ms !important; }
}

/* Hover is a pointer idiom. On a touch screen :hover latches on tap and the
   card stays lifted after the finger leaves, so the lift and the zoom are
   given only to devices that can actually hover. */
@media (hover: none) {
  .gdoor:hover { transform: none; box-shadow: var(--ds-sh-1, 0 2px 6px rgba(10, 42, 61, 0.06)); }
  .gdoor:hover .gdoor__img { transform: none; }
  .gdoor:hover .gdoor__heart { transform: none; }
}

/* =====================================================================
   أهداف الجمعية الاستراتيجية
   =====================================================================
 *
 * Four goals, each a link. <a> and not a <div> with a click handler: a real
 * link opens in a new tab on middle-click, copies its address, is reachable by
 * keyboard with no code, and tells assistive technology what it is. Every one
 * of those is something a scripted "clickable card" has to reimplement and
 * usually does not.
 *
 * The reference for this section is a screen of flat teal tiles. The colour is
 * kept because it is the identity's own teal, but the treatment is the site's:
 * the same 18px radius, the same shadow scale, and the same 220ms lift the
 * cards above it use. A section that borrows only a colour reads as a
 * transplant from another site.
 */

.mb-goals {
  padding-block: clamp(56px, 7vw, 92px);
  padding-inline: var(--ds-s5, 24px);
  background: var(--ds-cream-50, #fff);
  /* The header is sticky. Without this, an anchor jump to #strategic-goals
     parks the heading underneath it. */
  scroll-margin-block-start: 96px;
}

.mb-goals__inner { max-width: 1360px; margin-inline: auto; }

/* .mb-head__kicker (the pill above a section heading) lives in theme.css. */

.mb-goals__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 26px);
  align-items: stretch;
}

@media (max-width: 1099px) { .mb-goals__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .mb-goals__grid { grid-template-columns: 1fr; } }

.goal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-s4, 16px);
  padding: clamp(26px, 3vw, 36px) var(--ds-s5, 24px);
  border-radius: var(--ds-r-md, 18px);
  background: var(--ds-teal-700, #15506f);
  color: #fff;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--ds-sh-1, 0 2px 6px rgba(10, 42, 61, 0.06));
  transition: transform 220ms cubic-bezier(.22, .61, .36, 1),
              box-shadow 220ms cubic-bezier(.22, .61, .36, 1),
              background-color 220ms;
  position: relative;
  overflow: hidden;
}

.goal:hover,
.goal:focus-visible {
  transform: translateY(-4px);
  background: var(--ds-teal-900, #0a2a3d);
  box-shadow: var(--ds-sh-2, 0 10px 28px rgba(10, 42, 61, 0.08));
  color: #fff;
}

.goal:focus-visible { outline-offset: 3px; }

/* A gold hairline that draws in along the bottom edge on hover. It is the only
   new gesture in the section, and it grows from the reading edge: on an RTL
   page that is the right, the side the eye starts on. */
.goal::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: 3px;
  inline-size: 0;
  background: var(--ds-gold-500, #C9A227);
  transition: inline-size 320ms cubic-bezier(.22, .61, .36, 1);
}
.goal:hover::after,
.goal:focus-visible::after { inline-size: 100%; }

.goal__icon {
  display: grid;
  place-items: center;
  inline-size: 62px;
  block-size: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  flex: 0 0 auto;
  transition: transform 320ms cubic-bezier(.22, .61, .36, 1),
              background-color 220ms;
}
.goal__icon svg { inline-size: 30px; block-size: 30px; }
.goal:hover .goal__icon { transform: scale(1.06); background: rgba(255, 255, 255, 0.16); }

.goal__text {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.85;
  color: #fff;
  /* The reference justifies this text. Justifying Arabic without a
     hyphenation engine stretches the spacing into rivers of white, which is
     what makes those tiles hard to read. Centred keeps the block symmetrical
     without tearing the lines apart. */
  text-wrap: balance;
}

.goal__more {
  margin-block-start: auto;
  padding-block-start: var(--ds-s2, 8px);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ds-gold-300, #e8cf83);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.goal__arrow { transition: transform 200ms cubic-bezier(.22, .61, .36, 1); }
.goal:hover .goal__arrow { transform: translateX(-4px); }

/* =====================================================================
   Section divider
   =====================================================================
 *
 * The home page runs several full-width sections on near-identical grounds,
 * and where two meet the seam is invisible: the reader cannot tell whether a
 * new subject has started or the last one is still going.
 *
 * A hairline that fades out at both ends, with the identity's gold lozenge at
 * its centre. Fading rather than a full-width border, because a hard rule edge
 * to edge cuts the page in two; this marks a join without becoming a feature
 * of its own.
 *
 * aria-hidden sits on the element in the markup: a screen-reader user
 * separates sections by their headings, and a decorative line announced as
 * anything at all is noise.
 */
/* .mb-divider itself lives in theme.css (2026-09-11), so any page can use it. */

/* Anchored navigation between the home sections. Without a scroll margin, a
   jump to #giving-doors or #give-by-impact leaves the heading under the sticky
   header and the visitor lands looking at cards with no title above them. */
#giving-doors,
#give-by-impact,
#media { scroll-margin-block-start: 96px; }

@media (prefers-reduced-motion: reduce) {
  .goal,
  .goal::after,
  .goal__icon,
  .goal__arrow { transition: none !important; }
  .goal:hover,
  .goal:focus-visible { transform: none; }
  .goal:hover .goal__icon { transform: none; }
  .goal:hover .goal__arrow { transform: none; }
}

/* Hover is a pointer idiom; on touch it latches after the tap and the card
   stays lifted with a gold rule under it long after the finger has gone. */
@media (hover: none) {
  .goal:hover { transform: none; }
  .goal:hover .goal__icon { transform: none; }
  .goal:hover::after { inline-size: 0; }
}

/* =====================================================================
   بطاقات الأهداف — التدرّج
   =====================================================================
 *
 * The tiles were a single flat teal. A gradient is asked for, and the
 * direction it runs is the whole decision here rather than a taste one:
 *
 *   160deg, light at the top, DARKEST at the bottom.
 *
 * Because the gold «اعرف المزيد» sits at the bottom of the card. On the flat
 * #15506f it measured 5.68:1 — a pass, but the narrowest number in the
 * section. Running the gradient the other way would have put the palest teal
 * exactly under the palest text and pushed it toward the floor. This way the
 * gold lands on #0a2a3d and the white body text keeps the lighter half.
 *
 * The lightest stop is #15506f, the colour the card already was, so nothing
 * measured before this change can have got worse.
 */
.goal {
  background: linear-gradient(160deg,
    var(--ds-teal-700, #15506f) 0%,
    #103f57 52%,
    var(--ds-teal-900, #0a2a3d) 100%) !important;
  /* A 1px inner highlight along the top edge. It is what separates a gradient
     panel from a flat one at a glance — the same detail the DLS puts on its
     solid buttons. */
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12),
              var(--ds-sh-1, 0 2px 6px rgba(10, 42, 61, 0.06));
}

/* The hover state is a SECOND gradient cross-faded on top, not a change to the
   first one. Animating a background is a paint on every frame; animating the
   opacity of a layer that is already there stays on the compositor and costs
   nothing while it runs. */
.goal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201, 162, 39, 0.20) 0%, transparent 62%),
    linear-gradient(160deg, #17597c 0%, #0d3549 60%, #071f2e 100%);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}
.goal:hover::before,
.goal:focus-visible::before { opacity: 1; }

/* Everything the reader looks at has to sit above that layer. */
.goal__icon,
.goal__text,
.goal__more { position: relative; z-index: 1; }

.goal:hover,
.goal:focus-visible {
  /* The gradient is on ::before now, so the element's own background must not
     also change or the two fight during the fade. */
  background: linear-gradient(160deg,
    var(--ds-teal-700, #15506f) 0%,
    #103f57 52%,
    var(--ds-teal-900, #0a2a3d) 100%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14),
              var(--ds-sh-2, 0 10px 28px rgba(10, 42, 61, 0.08));
}

/* The icon badge picks up a soft ring on hover instead of only scaling — a
   scale on its own reads as the whole card zooming, which it is not. */
.goal__icon {
  box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
  transition: transform 320ms cubic-bezier(.22, .61, .36, 1),
              background-color 220ms,
              box-shadow 320ms cubic-bezier(.22, .61, .36, 1);
}
.goal:hover .goal__icon,
.goal:focus-visible .goal__icon {
  box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.16);
  border-color: rgba(232, 207, 131, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .goal::before,
  .goal__icon { transition: none !important; }
}
@media (hover: none) {
  .goal:hover::before { opacity: 0; }
  .goal:hover .goal__icon { box-shadow: none; }
}

/* =====================================================================
   إيقاع خلفيات الصفحة الرئيسية
   =====================================================================
 *
 * MEASURED BEFORE CHANGING ANYTHING. In document order the page ran:
 *
 *   hero(image) · white · white · white · white · white · #f4f6f7 ·
 *   image · #f8fafc · #f4f6f7 · #f4f6f7 · white · white
 *
 * Two separate problems, and neither is "not enough colour":
 *
 *   FIVE white sections in a row. Nothing marks where one subject ends and
 *   the next begins, so the eye reads 4,700px of page as one surface.
 *
 *   THREE near-identical tints in a row, in TWO different values — #f8fafc
 *   and #f4f6f7 differ by about one percent of luminance. A reader cannot see
 *   that as a decision; it reads as a mistake, which is what it was.
 *
 * The fix is a rhythm, not variety. ONE tint, the identity's own background
 * #F4F6F7 (CLAUDE.md, decided 2026-08-10), alternating with white so no two
 * tinted sections ever touch and no white run is longer than one section.
 * #f8fafc is retired: a second almost-white is a second answer to a question
 * that already had one.
 *
 * The two image-backed sections (the hero and the impact map) are left alone.
 * They are already the strongest breaks on the page, and the alternation
 * resumes after each of them rather than counting them as a colour.
 *
 * Written with #id selectors and !important because the existing grounds come
 * from .section-block variants in three older stylesheets, several of which
 * load after this one. The alternative was editing four sheets to say one
 * thing, which is how the two tint values happened in the first place.
 */
/* RECOMPUTED A SECOND TIME, not patched, when «المركز الإعلامي» moved from
   the foot of the page to right after «ما الأثر الذي تريد أن تتركه؟». The
   same lesson as the first recompute: dropping a section into the middle of
   an alternation flips everything after it, and only the fixed point stays —
   .activity-strip, forced to the tint by its own rule regardless of this list.

   Sequence measured in the browser after the move, image sections skipped
   as before rather than counted:

     hero(image) · white · tint · white · tint · white · tint · white ·
     tint(forced) · white · image · tint · white · tint · white

   No two tints touch, and the forced activity-strip tint lands where plain
   alternation would have placed one anyway — confirmed, not assumed. */
/* RECOMPUTED A THIRD TIME, when the ticker left this stretch for the hero's
   foot (10 Sep 2026). It had been the tint between «الاستدامة الشهرية» and
   «أثرنا الميداني»; with it gone those two came out both white and touching.
   Measured, not deduced — and then measured again, which is the part worth
   recording.
   The first attempt flipped #impact-proof alone and claimed the two tints it
   left on either side of #impact-map «do not touch, an image band is between
   them». The check written to this file's own convention — image sections
   skipped rather than counted, exactly as the two earlier recomputes state —
   reported impact-proof + donate as a collision. The convention is older than
   my exception and has held twice, so the exception went and the alternation
   was carried through to the end of the page: five sections flip, not one.
   Sequence measured after, images skipped as before:

     hero(image) · dark(ticker) · white · tint · white · tint · white · tint ·
     white · tint · image · white · tint · white · tint

   Zero adjacent same grounds. */
#strategic-goals,
#give-by-impact,
#active-campaigns,
#impact-proof,
.contribution-flow-block,
.faq-block { background: var(--ds-bg-tint, #f4f6f7) !important; }

#giving-doors,
#scope-of-work,
#media,
#monthly-giving,
#donate,
#gift-cards { background: #fff !important; }

/* The activity strip is 58px of ticker with no id, and it carried a THIRD
   almost-white, #eef3f6. Folded into the one tint so it reads as the foot of
   the section above it rather than as a colour of its own. Found on the second
   survey and not the first: the first was run at a narrow viewport and missed
   six sections, four of which are hidden and two of which are this and the
   FAQ. A partial survey is how a fourth value gets added next time. */
.activity-strip { background: var(--ds-bg-tint, #f4f6f7) !important; }

/* The dot separators, darkened.
   styles.css draws them with --gold-500 #C9A227, which was chosen when this
   strip was near-black. On the pale ground it has had since v9 they measured
   2.23:1 — decorative, so no criterion applies to them, but they are the only
   thing separating one item from the next and they were reading as a smudge.
   --gold-600 #7D6217 measures 5.39:1 on the same ground.
   Scoped to this strip: the same --gold-500 dot is correct wherever it still
   sits on a dark ground, and nothing here should reach those. */
.activity-strip .marquee-track span::before {
  background: var(--gold-600, #7D6217);
}

/* The ticker moved here — directly under the hero, above «أبواب العطاء» — and
   KEEPS ITS OWN LIGHT DESIGN. It was briefly given the hero's near-black
   ground so it would read as the hero's closing edge; that was my
   recommendation, it was not approved, and the association's answer was that
   the band came out too dark. Reverted: the strip is the pale band it has been
   since v9, only in a different place. The tint rule above is all it needs. */

/* One token for the one tint, so the next section that needs it does not
   invent a third almost-white. */
:root { --ds-bg-tint: #F4F6F7; }

/* =====================================================================
   بطاقات الأهداف — الأيقونة
   =====================================================================
 *
 * The icon was a white stroke inside a circle filled with translucent white,
 * on a teal card whose body text is also white. Three whites at three opacities
 * in one 62px badge: the symbol had nothing to separate it from the sentence
 * under it, and the badge edge dissolved into its own fill.
 *
 * The icon is now GOLD and the badge is glass. Gold is the identity's accent
 * and it is the only other colour on the card, so the eye reads icon, then
 * heading, then the gold link at the bottom — a path, rather than three things
 * of equal weight.
 *
 * Measured: #e8cf83 against the gradient's LIGHTEST stop #15506f is 5.68:1.
 * The icons are aria-hidden decoration and the text carries every meaning, so
 * WCAG 1.4.11 does not bind here — but a symbol nobody can make out is a
 * wasted 62px whether a rule requires it or not.
 */
.goal__icon {
  /* Glass, not flat translucency: a directional wash reads as a lit surface,
     which is what makes the badge sit ON the card instead of being a hole
     punched in it. */
  background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.17) 0%,
    rgba(255, 255, 255, 0.04) 100%) !important;
  border: 1px solid rgba(232, 207, 131, 0.34) !important;
}

.goal__icon svg {
  /* stroke="currentColor" is on the element, so colour is all this needs. */
  color: var(--ds-gold-300, #e8cf83);
  stroke-width: 1.75;
  transition: color 260ms cubic-bezier(.22, .61, .36, 1);
}

/* THE HOVER STATE IS AN INVERSION, NOT A BRIGHTENING.
 *
 * Making the gold a little more gold is the obvious move and it is invisible —
 * a reader cannot tell a 10% shift from nothing happening. Filling the badge
 * with solid gold and dropping the icon to the identity navy is unmistakable
 * at a glance, and it is the same pairing as the site's primary button, so the
 * card is speaking the theme's own language when it answers.
 *
 * Measured: #0a2a3d on #C9A227 is 6.15:1 — the identical pair the DLS uses on
 * every gold button on this site. */
.goal:hover .goal__icon,
.goal:focus-visible .goal__icon {
  background: linear-gradient(145deg,
    var(--ds-gold-300, #e8cf83) 0%,
    var(--ds-gold-500, #C9A227) 100%) !important;
  border-color: var(--ds-gold-300, #e8cf83) !important;
  box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.18),
              0 6px 16px rgba(10, 42, 61, 0.28);
}
.goal:hover .goal__icon svg,
.goal:focus-visible .goal__icon svg { color: var(--ds-teal-900, #0a2a3d); }

@media (prefers-reduced-motion: reduce) {
  .goal__icon svg { transition: none !important; }
}
@media (hover: none) {
  /* On touch the inversion would latch after the tap and stay inverted, so the
     resting look is the only look there. */
  .goal:hover .goal__icon {
    background: linear-gradient(145deg,
      rgba(255, 255, 255, 0.17) 0%,
      rgba(255, 255, 255, 0.04) 100%) !important;
    border-color: rgba(232, 207, 131, 0.34) !important;
    box-shadow: none;
  }
  .goal:hover .goal__icon svg { color: var(--ds-gold-300, #e8cf83); }
}

/* =====================================================================
   نطاق عمل الجمعية
   =====================================================================
 *
 * A dark panel on a light ground: the one section on this page that inverts,
 * which is what makes it read as a statement rather than another list. It sits
 * between the goals and the impact cards, so the inversion also does the work
 * a divider does elsewhere — the eye cannot miss where this begins.
 *
 * The reference is a wide teal panel with the copy on the reading edge and a
 * gold pill on the far side. That structure is kept. What is not kept is a
 * bespoke button: the call to action is the site's own .primary-button, gold
 * with navy text at 6.15:1, the same control as the hero and the donation
 * cards. A banner that invents its own button is a banner from another site.
 */

.mb-scope {
  padding-block: clamp(40px, 5vw, 72px);
  padding-inline: var(--ds-s5, 24px);
  scroll-margin-block-start: 96px;
}

.mb-scope__inner { max-width: 1360px; margin-inline: auto; }

.mb-scope__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--ds-r-lg, 24px);
  padding: clamp(30px, 4vw, 54px) clamp(24px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  /* 135deg so the light corner is the one the reading eye enters from on an
     RTL page — the top right — and the panel darkens away from the text. */
  background: linear-gradient(135deg,
    #10405a 0%,
    var(--ds-teal-900, #0a2a3d) 58%,
    #071e2b 100%);
  /* The hairline is not decoration. A dark panel on a near-white ground has no
     edge of its own; a 1px gold line at 22% gives it one without turning into
     a frame. */
  box-shadow: inset 0 1px rgba(232, 207, 131, 0.22),
              var(--ds-sh-3, 0 22px 56px rgba(10, 42, 61, 0.14));
}

@media (max-width: 899px) {
  .mb-scope__panel {
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 32px);
  }
}

/* The contour pattern, at the opacity where it reads as paper texture and not
   as a picture. Above 0.10 it starts competing with the sentence over it. */
.mb-scope__contours {
  position: absolute;
  inset-block-end: -12%;
  inset-inline-start: -6%;
  inline-size: 62%;
  block-size: 150%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom left;
  opacity: 0.085;
  pointer-events: none;
}

.mb-scope__body { position: relative; z-index: 1; }

/* Size comes from the one heading scale in theme.css (26/30/36), like every
   other section title; this rule held it at 33.6px and weight 800 — a
   weight Alexandria is not shipped in, so the browser faked it. */
.mb-scope__title {
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

/* The association's own name, directly under the heading. Gold, because it is
   the identity and not a subtitle — and at 700 rather than 800 so it supports
   the line above instead of arguing with it. */
.mb-scope__name {
  margin: 0 0 var(--ds-s4, 16px);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ds-gold-300, #e8cf83);
}

.mb-scope__text,
.mb-scope__pledge {
  margin: 0;
  font-size: 1rem;
  line-height: 1.95;
  max-width: 68ch;
  color: rgba(255, 255, 255, 0.86);
}

/* The pledge is the sentence the association would want remembered, so it gets
   the one piece of structure in the panel: a gold rule on the reading edge and
   a slightly brighter ink. Not italics — Alexandria has no true italic and the
   browser would synthesise a slant across Arabic, which shears the letterforms. */
.mb-scope__pledge {
  margin-block-start: var(--ds-s4, 16px);
  padding-inline-start: var(--ds-s4, 16px);
  border-inline-start: 3px solid var(--ds-gold-500, #C9A227);
  color: #fff;
  font-weight: 500;
}

.mb-scope__action {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
}
@media (max-width: 899px) {
  .mb-scope__action { justify-content: stretch; }
  .mb-scope__cta.primary-button { inline-size: 100%; }
}

.mb-scope__cta.primary-button {
  gap: 10px;
  white-space: nowrap;
  /* A gold button on a dark panel needs a little lift to stop looking pasted
     on; the ring is the panel's own gold at low alpha, not a new colour. */
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.2),
              0 6px 20px rgba(0, 0, 0, 0.28);
}

.mb-scope__arrow {
  transition: transform 200ms cubic-bezier(.22, .61, .36, 1);
  font-size: 1.05em;
  line-height: 1;
}
.mb-scope__cta:hover .mb-scope__arrow,
.mb-scope__cta:focus-visible .mb-scope__arrow { transform: translateX(-4px); }

@media (prefers-reduced-motion: reduce) {
  .mb-scope__arrow { transition: none !important; }
  .mb-scope__cta:hover .mb-scope__arrow { transform: none; }
}

/* =====================================================================
   المركز الإعلامي
   =====================================================================
 *
 * The reference (Al Ihsan) arranges its media tiles on a staggered baseline —
 * each card sits a little higher or lower than its neighbour — which is what
 * stops a row of photographs reading as a contact sheet. That arrangement is
 * adopted. What is not adopted is the content: four streams across fifteen
 * slides, against one real news story and one photo set here.
 *
 * So the layout has to look deliberate at THREE tiles, not merely survive
 * them. The lead takes two columns and the other two stack beside it, which
 * gives the row a subject instead of three equal thirds with a gap.
 */

.mb-media {
  padding-block: clamp(56px, 7vw, 92px);
  padding-inline: var(--ds-s5, 24px);
  scroll-margin-block-start: 96px;
}

.mb-media__inner { max-width: 1360px; margin-inline: auto; }

/* Heading on the reading edge, the archive link on the far side — the
   reference's own arrangement, and it earns its place: the link is where the
   eye lands after finishing the row, not before starting it. */
.mb-media__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ds-s5, 24px);
  flex-wrap: wrap;
  margin-block-end: clamp(24px, 3vw, 40px);
}

/* Size from theme.css's heading scale, as .mb-scope__title above. */
.mb-media__title {
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--ds-ink-900, #1a2530);
  margin: 0;
  letter-spacing: -0.01em;
}

.mb-media__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ds-teal-700, #15506f);
  text-decoration: none;
  padding-block: 8px;
  border-block-end: 2px solid transparent;
  transition: color 200ms, border-color 200ms;
}
.mb-media__all:hover,
.mb-media__all:focus-visible {
  color: var(--ds-teal-900, #0a2a3d);
  border-block-end-color: var(--ds-gold-500, #C9A227);
}
.mb-media__arrow { transition: transform 200ms cubic-bezier(.22, .61, .36, 1); }
.mb-media__all:hover .mb-media__arrow { transform: translate(-3px, -3px); }

/* ---------- the grid ---------- */
.mb-media__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-template-areas:
    "lead photo"
    "lead quote";
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}
.mtile--lead  { grid-area: lead; }
.mtile--photo { grid-area: photo; }
.mtile--quote { grid-area: quote; }

@media (max-width: 899px) {
  .mb-media__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "lead" "photo" "quote";
  }
}

/* ---------- a tile ---------- */
.mtile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--ds-r-md, 18px);
  background: #fff;
  border: 1px solid var(--ds-line, rgba(10, 42, 61, 0.10));
  box-shadow: var(--ds-sh-1, 0 2px 6px rgba(10, 42, 61, 0.06));
  text-decoration: none;
  color: inherit;
  margin: 0;
  transition: transform 220ms cubic-bezier(.22, .61, .36, 1),
              box-shadow 220ms cubic-bezier(.22, .61, .36, 1),
              border-color 220ms;
}
a.mtile:hover,
a.mtile:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--ds-sh-2, 0 10px 28px rgba(10, 42, 61, 0.08));
  border-color: var(--ds-gold-300, #e8cf83);
}
a.mtile:focus-visible { outline-offset: 3px; }

.mtile__media {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--ds-teal-050, #eef3f6);
}
.mtile__img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  transition: transform 460ms cubic-bezier(.22, .61, .36, 1);
}
a.mtile:hover .mtile__img { transform: scale(1.04); }

/* The lead photograph is the largest image in the section, so it carries a
   scrim: the badge and nothing else sits on it, and a badge over an unknown
   crop needs its own ground rather than the photograph's luck. */
.mtile--lead .mtile__img { aspect-ratio: 16 / 10; }

/* ---------- the badge ---------- */
.mtile__badge {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.7;
  color: #fff;
  background: var(--ds-teal-900, #0a2a3d);
  box-shadow: 0 2px 10px rgba(10, 42, 61, 0.3);
}
/* The gold badge is for the photo set, so the two picture tiles are told
   apart at a glance rather than by reading. Navy on gold, the site's own
   pair at 6.15:1 — never white on gold, which is 2.1. */
.mtile__badge--photo {
  background: var(--ds-gold-500, #C9A227);
  color: var(--ds-teal-900, #0a2a3d);
}

.mtile__body {
  display: flex;
  flex-direction: column;
  gap: var(--ds-s2, 8px);
  padding: var(--ds-s5, 24px) var(--ds-s5, 24px) var(--ds-s4, 16px);
  flex: 1 1 auto;
}

.mtile__date {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ds-ink-500, #5c6b75);
  letter-spacing: 0.02em;
}

/* 1.125rem and !important for the same reason the donation cards need it:
   aegov-dls.css sets `main h3` to 2rem with !important above 1280px, a page
   heading scale on a card title. */
.mtile .mtile__title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  color: var(--ds-ink-900, #1a2530);
  margin: 0;
  text-wrap: balance;
}
.mtile--lead .mtile__title { font-size: 1.28rem !important; }

.mtile__desc {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ds-ink-700, #324049);
  margin: 0;
}

.mtile__cta {
  margin-block-start: auto;
  padding-block-start: var(--ds-s3, 12px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ds-gold-700, #8a6516);
}
.mtile__arrow { transition: transform 200ms cubic-bezier(.22, .61, .36, 1); }
a.mtile:hover .mtile__arrow { transform: translateX(-4px); }

/* ---------- the quote tile ----------
 * A dark tile among light ones, because a quotation is not a card of the same
 * kind as the two beside it and should not pretend to be. It is also the one
 * tile that is not a link — nothing to click through to, so nothing behaves
 * as though there is. */
.mtile--quote {
  background: linear-gradient(150deg,
    var(--ds-teal-700, #15506f) 0%,
    var(--ds-teal-900, #0a2a3d) 100%);
  border-color: transparent;
  padding: clamp(22px, 2.6vw, 30px);
  justify-content: center;
  gap: var(--ds-s3, 12px);
}
.mtile--quote .mtile__badge {
  position: static;
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(232, 207, 131, 0.34);
  color: var(--ds-gold-300, #e8cf83);
}
.mtile--quote blockquote {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 500;
  line-height: 1.9;
  color: #fff;
  /* No quotation glyph drawn in CSS: a decorative « would be read out by a
     screen reader as part of the sentence, and <blockquote> already says what
     this is. */
}
.mtile--quote figcaption {
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--ds-gold-300, #e8cf83);
  font-weight: 600;
}

/* ---------- the three destinations ---------- */
.mb-media__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-s3, 12px);
  margin-block-start: clamp(20px, 2.5vw, 30px);
}
.mlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--ds-cream-50, #fff);
  border: 1px solid var(--ds-line, rgba(10, 42, 61, 0.10));
  color: var(--ds-teal-900, #0a2a3d);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  /* 44px minimum touch target: 11 + 11 padding plus a 22px line box clears it,
     and min-height states it rather than leaving it to the font. */
  min-block-size: 44px;
  transition: background-color 200ms, border-color 200ms, transform 200ms;
}
.mlink:hover,
.mlink:focus-visible {
  background: var(--ds-teal-050, #eef3f6);
  border-color: var(--ds-gold-300, #e8cf83);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .mtile, .mtile__img, .mtile__arrow, .mlink,
  .mb-media__all, .mb-media__arrow { transition: none !important; }
  a.mtile:hover, .mlink:hover { transform: none; }
  a.mtile:hover .mtile__img { transform: none; }
  a.mtile:hover .mtile__arrow { transform: none; }
  .mb-media__all:hover .mb-media__arrow { transform: none; }
}

@media (hover: none) {
  a.mtile:hover { transform: none; }
  a.mtile:hover .mtile__img { transform: none; }
  .mlink:hover { transform: none; }
}

/* =====================================================================
   إيقاع الخلفيات — أُعيد حسابه مرةً أخرى
   =====================================================================
 * «المركز الإعلامي» انتقل من أسفل الصفحة إلى ما تحت قسم الأثر، فقلب التبادل
 * بعده كلّه. يُعاد الحساب لا يُرقَّع الجار — والقسم عديم المعرّف
 * (contribution-flow) هو النقطة الثابتة التي يُرتَّب حولها الباقي.
 *
 * الترتيب المرئي الآن:
 *   هيرو(صورة) · أبيض · ملوَّن · أبيض · ملوَّن · أبيض · ملوَّن · أبيض ·
 *   ملوَّن · أبيض · صورة · أبيض · ملوَّن · أبيض · ملوَّن · أبيض
 */

/* =====================================================================
   الأرضية الكاملة العرض
   =====================================================================
 * .v9-section يحمل max-width على القسم نفسه، فخلفية القسم — المضبوطة عبر
 * إيقاع الأقسام أعلاه — كانت تُرسم داخل 1180px لا عبر عرض الشاشة، بينما كل
 * قسم آخر بُني اليوم يفصل الحاوية (__inner) عن القسم الحامل للخلفية.
 *
 * .v9-section صنفٌ مشترك تستعمله صفحات أخرى (donate.html وغيرها)، فلا يُعدَّل
 * أصله — يُضاف صنفٌ جديد لهذين القسمين تحديداً، بلا max-width على القسم، مع
 * غلافٍ داخلي يحمل القيد القديم نفسه فلا يتغيّر عرض المحتوى، فقط الخلفية. */
.mb-fullbleed {
  padding-block: var(--ds-s8, 64px);
}
.mb-fullbleed__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--ds-s5, 24px);
}

/* «ما الأثر الذي تريد أن تتركه؟» ON A PHONE: a strip you swipe, not a
   column you scroll (محمد فهيم 2026-09-11 — this section only; «أبواب
   العطاء» stays a column by his decision).
   Eight cards one under another measured 2,907px at 375px, three and a half
   screens of the same card shape. As a strip the section is one card tall.
   Each card takes 80% of the width, so the next one shows at the edge — the
   cue that there is more, without an arrow or a label to explain it — and
   the strip snaps card by card. It runs edge to edge (the negative margin
   undoes the container's padding) so cards slide off the screen, not off an
   invisible wall 24px in. The cards are links, so a keyboard user tabbing
   through moves the strip with them. */
/* «أهداف الجمعية الاستراتيجية» takes the same strip (محمد فهيم 2026-09-11):
   four goals one under another measured 1,259px at 375. Both strips move on
   their own from home-carousel.js, and draw their dots below. */
@media (max-width: 640px) {
  #strategic-goals .mb-goals__grid,
  #give-by-impact .impact-effect-grid {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--ds-s5, 24px));
    padding: 6px var(--ds-s5, 24px) 18px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--ds-s5, 24px);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #strategic-goals .mb-goals__grid::-webkit-scrollbar,
  #give-by-impact .impact-effect-grid::-webkit-scrollbar { display: none; }
  #strategic-goals .goal,
  #give-by-impact .impact-effect-card {
    flex: 0 0 80%;
    max-width: 19rem;
    scroll-snap-align: start;
  }
  /* The reveal-on-scroll watches the page's vertical scroll; a card that
     starts off to the side of the strip would wait for a scroll that never
     comes. In a strip every card is shown as it is. */
  #strategic-goals .goal.reveal,
  #give-by-impact .impact-effect-card.reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* The dots under each strip, built by home-carousel.js. Each is a 24px
   button (the WCAG 2.5.8 minimum) drawing a 7px dot; the current card's dot
   stretches into a teal bar. Teal, not gold: gold on this page's light
   grounds is 2.2:1, under the 3:1 a control's state indicator needs, and
   teal is 8.8:1. Hidden above 640px, where the sections are grids again. */
.mb-dots { display: none; }
@media (max-width: 640px) {
  .mb-dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-block-start: 2px;
  }
  .mb-dots__dot {
    display: grid;
    place-items: center;
    inline-size: 24px;
    block-size: 24px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mb-dots__dot::before {
    content: "";
    inline-size: 7px;
    block-size: 7px;
    border-radius: 999px;
    background: rgba(10, 42, 61, 0.24);
    transition: inline-size 280ms cubic-bezier(.22, .61, .36, 1), background-color 280ms ease;
  }
  .mb-dots__dot[aria-current="true"]::before {
    inline-size: 20px;
    background: var(--brand-teal, #12525C);
  }
  .mb-dots__dot:focus-visible {
    outline: 3px solid var(--brand-gold, #C9A227);
    outline-offset: 0;
    border-radius: 999px;
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .mb-dots__dot::before { transition: none; }
}

/* =====================================================================
   توحيد ترويسة الأقسام — الأقسام الفاتحة المتبقّية
   =====================================================================
 * أربعة أقسام كانت تستعمل نمطاً أقدم (.section-kicker + .section-heading
 * الشبكي بعمودين، أو أنماطاً مضمَّنة inline)، مختلفاً بصرياً عن .mb-head
 * المستعمل في خمسة أقسام أخرى اليوم. تُعاد كتابتها بترميم .mb-head نفسه
 * (kicker حبّة، عنوان بخط ذهبي تحته، ووصف تحته)، فيتطابق الشكل لا يُحاكى.
 *
 * gift-cards استثناء بنائي: الكِكر والعنوان يقعان داخل عمود .gift-copy
 * الذي يحوي أيضاً أزرار المناسبات بعده — فـ.mb-head هنا يلتف حول الترويسة
 * وحدها ويترك الأزرار كما هي، بلا توسيط قسري عليها. */
/* .mb-head already carries text-align:center and its own margin globally
   (declared once, used by nine sections now) — nothing to add here except the
   one real exception: inside .gift-copy the header sits above a row of
   occasion buttons in a narrower column, and the default 44px gap read as too
   much air before them. */
#gift-cards .gift-copy .mb-head { margin-block-end: var(--ds-s5, 24px); }

/* ============================================================================
   T-91 — «الزكاة» as its own band, not a door in the group.
   ==========================================================================

   Decision, محمد فهيم 2026-09-10: a standalone prominent card rather than a
   sixth door, because zakat is an obligation with channels defined in
   religious law and a calculator of its own, and separating it serves
   governance.

   DARK AND FULL-BLEED, and that choice does work beyond looking distinct: the
   homepage runs a white/tint alternation recomputed by hand in the block
   above, and inserting an ordinary section into it flips the ground of every
   section after it — that recompute has been done three times already. A band
   whose ground is a gradient is skipped by the alternation exactly as the hero
   and the image sections are, so this section costs no fourth recompute. It
   also means no gold-dot divider on either side, the rule this page already
   follows next to every dark section; the divider that used to sit here was
   removed with the insertion.

   Colours are the identity's own: navy #0A2A3D into teal #12525C, with gold as
   the single fill on the one action this band exists for.
   ========================================================================== */
.zk-band {
  padding-block: clamp(44px, 5.5vw, 76px);
  padding-inline: var(--ds-s5, 24px);
  background: linear-gradient(120deg, #0A2A3D 0%, #12525C 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* A single soft gold bloom toward the starting edge. Decorative, so it is
   drawn on the section itself rather than as an element a screen reader would
   then have to be told to ignore. */
.zk-band::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline-start: -8%;
  width: 42rem;
  height: 42rem;
  background: radial-gradient(circle, rgba(201, 162, 39, 0.16), rgba(201, 162, 39, 0) 62%);
  pointer-events: none;
}
.zk-band__inner {
  position: relative;
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 860px) {
  .zk-band__inner { grid-template-columns: 1fr; gap: 28px; }
}

.zk-band__kicker {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(201, 162, 39, 0.18);
  border: 1px solid rgba(201, 162, 39, 0.45);
  color: #EFD583;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.zk-band__title {
  margin: 14px 0 0;
  font-size: clamp(1.45rem, 2.5vw, 2.05rem);
  font-weight: 700 !important;   /* aegov-dls.css asserts main h2 at 700 */
  line-height: 1.5;
  color: #fff;
}
.zk-band__lead {
  margin: 12px 0 0;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.86);
}
.zk-band__facts {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
}
.zk-band__facts li { display: grid; gap: 2px; }
.zk-band__facts b {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold-400, #DFBE55);
  font-variant-numeric: tabular-nums;
}
.zk-band__facts span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.72); }

.zk-band__actions { display: grid; gap: 12px; justify-items: stretch; }
.zk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.4rem;
  border-radius: 0.6rem;
  font-family: 'Alexandria', 'Noto Kufi Arabic', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
/* One gold fill in this band, on the action the section exists for. */
.zk-btn--gold {
  background: linear-gradient(135deg, #C9A227, #E3C15A);
  color: #0A2A3D;
  box-shadow: 0 8px 20px rgba(201, 162, 39, 0.3);
}
.zk-btn--gold:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(201, 162, 39, 0.4); }
.zk-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}
.zk-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }
.zk-btn:focus-visible,
.zk-band__more:focus-visible {
  outline: 3px solid var(--gold-400, #DFBE55);
  outline-offset: 3px;
}
.zk-band__more {
  justify-self: center;
  padding: 4px 2px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  border-block-end: 1px solid rgba(255, 255, 255, 0.28);
}
.zk-band__more:hover { color: #fff; border-block-end-color: var(--gold-400, #DFBE55); }

/* ============================================================================
   «شركاؤنا» — a moving logo strip.
   ==========================================================================

   Last section of the page, above the footer, which is where a logo wall
   belongs: it is credibility for someone who has already read the case.

   WHITE, and that is the rhythm arithmetic rather than a preference. The
   white/tint alternation ends on the FAQ's tint, so a white band appended
   after it continues the sequence and nothing above it moves — no fourth
   recompute of the list further up this file.

   TWO TRACKS, the second aria-hidden, which is how the ticker at the top of
   this page already loops without a seam. The duplicate exists so that when
   the first track has scrolled its full width the second is already in place;
   translating the pair by exactly -50% therefore returns to the starting
   frame. Any other percentage jumps.

   MOTION IS PAUSED ON HOVER AND ON FOCUS-WITHIN. Hover alone is not enough:
   a keyboard user tabbing through a moving strip cannot read what they have
   landed on, and :focus-within is the difference between a strip that is
   decorative and one that is usable.
   ========================================================================== */
.pt-band {
  padding-block: clamp(44px, 5.5vw, 72px);
  background: #fff;
  overflow: hidden;
}
.pt-band .mb-head { padding-inline: var(--ds-s5, 24px); }

.pt-marquee {
  position: relative;
  display: flex;
  width: 100%;
  overflow: hidden;
  /* The edges fade into the band's own ground so chips enter and leave
     instead of being clipped mid-letter. Masked rather than painted, so the
     gradient does not have to be kept in step with the background. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.pt-track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  margin: 0;
  padding: 0 clamp(7px, 0.8vw, 13px);
  list-style: none;
  min-width: max-content;
  animation: pt-marquee 42s linear infinite;
  will-change: transform;
}
.pt-marquee:hover .pt-track,
.pt-marquee:focus-within .pt-track { animation-play-state: paused; }

@keyframes pt-marquee {
  from { transform: translateX(0); }
  /* RTL: the tracks sit right-to-left, so a POSITIVE translation moves them
     toward the start edge. The sign is the one thing that is different from a
     left-to-right marquee, and getting it wrong runs the strip backwards. */
  to   { transform: translateX(50%); }
}

.pt-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 5.25rem;
  min-width: clamp(11rem, 15vw, 14.5rem);
  padding: 0 clamp(16px, 1.6vw, 26px);
  background: #fff;
  border: 1px solid rgba(10, 42, 61, 0.1);
  border-radius: var(--ds-r-md, 18px);
  box-shadow: 0 2px 6px rgba(10, 42, 61, 0.05);
  transition: transform 220ms cubic-bezier(.22, .61, .36, 1),
              box-shadow 220ms cubic-bezier(.22, .61, .36, 1),
              border-color 220ms ease;
}
.pt-chip:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(10, 42, 61, 0.1);
  border-color: rgba(201, 162, 39, 0.55);
}
/* The size comes from each <img>'s width/height, not from here: the eight
   logos run from 1:1 to 6:1, so one shared height would let ADIB fill the chip
   and shrink UAE AID to a stamp. The markup gives every logo the same visual
   area instead (see the note above #partners in index.html).

   FULL COLOUR AT REST, not the greyscale logo-wall convention this rule was
   first written for. These are a federal ministry, an emirate's departments
   and a national aid agency, and two of the marks carry the state emblem and
   the flag — shown in grey they read as withdrawn or unofficial. And a hover
   reveal gives nothing on a phone, where most visitors will see this strip. */
.pt-chip__logo {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 220ms ease;
}
.pt-chip:hover .pt-chip__logo { opacity: 1; }

/* A visitor who asked for less motion gets a strip that does not move — and
   can still reach every partner, because the row becomes scrollable instead of
   being frozen with half the list off-screen. The duplicate track goes: it is
   only there to make the loop seamless, and there is no loop now. */
@media (prefers-reduced-motion: reduce) {
  .pt-marquee {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .pt-marquee::-webkit-scrollbar { display: none; }
  .pt-track { animation: none; }
  .pt-track[aria-hidden="true"] { display: none; }
}

@media (max-width: 640px) {
  .pt-chip { min-height: 4.5rem; min-width: 10rem; }
  .pt-track { animation-duration: 34s; }
}