:root {
  color-scheme: light;
  --teal-900: #0a3236;
  --teal-800: #104a4f;
  --teal-700: #155c62;
  --teal-500: #1f7b82;
  --green-600: #12525C;
  --green-700: #12525C;
  --green-500: #12525C;
  --gold-600: #7a6112;
  --gold-500: #C9A227;
  --cream-50: #FFFFFF;
  --cream-100: #F4F6F7;
  --cream-200: #F4F6F7;
  --cream-400: #dfd7c3;
  --ink-900: #131316;
  --ink-800: #1f1f23;
  --ink-600: #2f2f33;
  --ink-400: #6a6a6f;
  --danger: #a6271d;
  --surface: rgba(251, 250, 246, 0.96);
  /* legacy spacing tokens removed; canonical UAE DS scale below */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-control: 1rem;
  --shadow-md: 0 1rem 2rem rgba(19, 19, 22, 0.12);
  --shadow-lg: 0 1.5rem 3rem rgba(19, 19, 22, 0.16);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.64, 0, 0.78, 0);
  /* ---- UAE Design System: typography ----
     Source: https://designsystem.gov.ae/guidelines/typography
     Body: Noto Kufi Arabic (Arabic) + Roboto (Latin)
     Heading: Alexandria (Arabic) + Inter (Latin)
     Stack must include OS fallbacks per UAE DS guidance. */
  /* Alexandria first. The heading variable below already had it, so headings
     were Alexandria while every paragraph on the site was Noto Kufi -- the
     2026-09-07 decision inverted in the one place it mattered most. */
  --font-ar-body: "Alexandria", "Noto Kufi Arabic", -apple-system, BlinkMacSystemFont, system-ui, "Ubuntu", "Fira Sans", sans-serif;
  --font-ar-heading: "Alexandria", "Noto Kufi Arabic", -apple-system, system-ui, sans-serif;
  --font-en-body: "Roboto", -apple-system, BlinkMacSystemFont, system-ui, "Ubuntu", "Fira Sans", sans-serif;
  --font-en-heading: "Inter", "Roboto", system-ui, sans-serif;
  --font-body: var(--font-ar-body);
  --font-heading: var(--font-ar-heading);

  /* ---- UAE DS type scale (Major Third 1.333 from 16px base) ---- */
  --text-display: 4.75rem;   /* 76px - banner only, extra-light */
  --text-h1: 3.875rem;       /* 62px */
  --text-h2: 3rem;           /* 48px */
  --text-h3: 2.5rem;         /* 40px */
  --text-h4: 2rem;           /* 32px */
  --text-h5: 1.625rem;       /* 26px */
  --text-h6: 1.25rem;        /* 20px */
  --text-3xl: 1.875rem;      /* 30 / lh 36 */
  --text-2xl: 1.5rem;        /* 24 / lh 32 */
  --text-xl: 1.25rem;        /* 20 / lh 28 */
  --text-lg: 1.125rem;       /* 18 / lh 28 */
  --text-base: 1rem;         /* 16 / lh 24 */
  --text-sm: 0.875rem;       /* 14 / lh 20 */
  --text-xs: 0.75rem;        /* 12 / lh 16 */

  /* ---- UAE DS spacing: 2px steps to 16, 4px steps to 48 ---- */
  --space-0-5: 0.125rem; /* 2 */
  --space-1:   0.25rem;  /* 4 */
  --space-1-5: 0.375rem; /* 6 */
  --space-2:   0.5rem;   /* 8 */
  --space-2-5: 0.625rem; /* 10 */
  --space-3:   0.75rem;  /* 12 */
  --space-3-5: 0.875rem; /* 14 */
  --space-4:   1rem;     /* 16 - base */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-7:   1.75rem;  /* 28 */
  --space-8:   2rem;     /* 32 */
  --space-9:   2.25rem;  /* 36 */
  --space-10:  2.5rem;   /* 40 */
  --space-11:  2.75rem;  /* 44 */
  --space-12:  3rem;     /* 48 */
  --space-14:  3.5rem;   /* 56 - proportional */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */
  --space-28:  7rem;     /* 112 */
  --space-32:  8rem;     /* 128 */

  /* ---- UAE DS breakpoints (mobile-first) ---- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* ---- Container widths per UAE DS Tailwind ---- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-max: 1280px;
  --container-margin: 1rem;
  --page-gutter: max(var(--container-margin), calc((100vw - var(--container-max)) / 2));
  --section-y: 6rem;
  font-size: 16px;
}

body.lang-en {
  --font-body: var(--font-en-body);
  --font-heading: var(--font-en-heading);
}

/* ===== UAE DS type utilities ===== */
.text-display { font-family: var(--font-heading); font-weight: 200; font-size: var(--text-display); line-height: 1.05; letter-spacing: 0; }
.text-h1 { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-h1); line-height: 1.1; letter-spacing: 0; }
.text-h2 { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-h2); line-height: 1.15; }
.text-h3 { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h3); line-height: 1.2; }
.text-h4 { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h4); line-height: 1.25; }
.text-h5 { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h5); line-height: 1.3; }
.text-h6 { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h6); line-height: 1.35; }
.text-3xl { font-size: var(--text-3xl); line-height: 2.25rem; }
.text-2xl { font-size: var(--text-2xl); line-height: 2rem; }
.text-xl  { font-size: var(--text-xl);  line-height: 1.75rem; }
.text-lg  { font-size: var(--text-lg);  line-height: 1.75rem; }
.text-base{ font-size: var(--text-base);line-height: 1.5rem; }
.text-sm  { font-size: var(--text-sm);  line-height: 1.25rem; }
.text-xs  { font-size: var(--text-xs);  line-height: 1rem; }
.font-light { font-weight: 300; }
.font-regular { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--cream-100);
  color: var(--ink-800);
  font-family: var(--font-body);
  line-height: 1.5;
  letter-spacing: 0;
  overflow-x: hidden;
}

body.lang-en {
  --font-body: var(--font-en-body);
  --font-heading: var(--font-en-heading);
}

h1,
h2,
h3,
h4,
h5,
h6,
.brand-mark strong,
.section-kicker,
.eyebrow,
.project-type,
.site-menu a,
.primary-button,
.ghost-button,
.text-button,
.command-trigger,
.header-action,
.language-switch button,
.program-tabs button,
.segmented-control button,
.amount-grid button {
  font-family: var(--font-heading);
  letter-spacing: 0;
}

p,
li,
label,
input,
select,
button,
small,
address {
  letter-spacing: 0;
}

body.drawer-open {
  overflow: hidden;
}

body.is-loading {
  overflow: hidden;
}

@media (min-width: 640px) {
  :root {
    --container-margin: 0.625rem;
    --container-max: calc(100vw - (var(--container-margin) * 2));
  }
}

@media (min-width: 768px) {
  :root {
    --container-margin: 0.875rem;
    --container-max: 46.25rem;
  }
}

@media (min-width: 1024px) {
  :root {
    --container-margin: 1.375rem;
    --container-max: 61.25rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --container-margin: 1.25rem;
    --container-max: 77.5rem;
  }
}

@media (min-width: 1536px) {
  :root {
    --container-margin: 1.75rem;
    --container-max: 92.5rem;
  }
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select {
  font: inherit;
  border-radius: var(--radius-control);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.skip-link {
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 2000;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--gold-500);
  color: var(--ink-900);
  transform: translateY(-140%);
  transition: transform 180ms var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  background: var(--teal-900);
  color: var(--cream-50);
  transition: opacity 360ms var(--ease-out), visibility 360ms var(--ease-out);
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* A hidden loader stopped being seen, not being animated: its four spans kept
   running an infinite keyframe for the life of the page. (2026-09-13) */
.site-loader.is-hidden * { animation: none !important; }

.site-loader p {
  margin: 0;
  color: rgba(251, 250, 246, 0.78);
  font-weight: 800;
}

.morph-loader {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
}

.morph-loader span {
  position: absolute;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: var(--radius-sm);
  background: var(--gold-500);
  animation: morph-loader 1.25s var(--ease-out) infinite;
}

.morph-loader span:nth-child(1) {
  inset-block-start: 0;
  inset-inline-start: 0;
}

.morph-loader span:nth-child(2) {
  inset-block-start: 0;
  inset-inline-end: 0;
  animation-delay: 110ms;
}

.morph-loader span:nth-child(3) {
  inset-block-end: 0;
  inset-inline-end: 0;
  animation-delay: 220ms;
}

.morph-loader span:nth-child(4) {
  inset-block-end: 0;
  inset-inline-start: 0;
  animation-delay: 330ms;
}

.site-header {
  position: fixed;
  inset-block-start: 2.25rem;
  inset-inline: 0;
  z-index: 1000;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-6);
  min-height: 5rem;
  padding: var(--space-3) var(--page-gutter);
  color: var(--cream-50);
  transition: background-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out), min-height 240ms var(--ease-out);
}

.hotline-strip {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1010;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: 0 var(--page-gutter);
  background: var(--ink-900);
  color: rgba(251, 250, 246, 0.82);
  font-size: 0.78rem;
}

.hotline-strip b {
  color: var(--gold-500);
}

.site-header.is-scrolled {
  min-height: 4.25rem;
  background: rgba(10, 50, 54, 0.94);
  box-shadow: 0 0.5rem 2rem rgba(10, 50, 54, 0.22);
}

.site-header[data-static-header] {
  min-height: 4.5rem;
  background: rgba(10, 50, 54, 0.96);
  box-shadow: 0 0.65rem 2rem rgba(10, 50, 54, 0.22);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 9rem;
  position: relative;
}

.brand-mark img {
  width: 9rem;
  height: auto;
  filter: drop-shadow(0 0.35rem 0.9rem rgba(0, 0, 0, 0.2));
  display: block;
  transition: opacity 220ms var(--ease-out);
}

.brand-mark .brand-logo--colored {
  opacity: 1;
}

.brand-mark .brand-logo--white {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  opacity: 0;
  pointer-events: none;
}

.site-header.is-scrolled .brand-mark .brand-logo--colored,
.site-header[data-static-header] .brand-mark .brand-logo--colored,
.site-header[data-relief-header] .brand-mark .brand-logo--colored,
.site-header.menu-open .brand-mark .brand-logo--colored {
  opacity: 0;
}

.site-header.is-scrolled .brand-mark .brand-logo--white,
.site-header[data-static-header] .brand-mark .brand-logo--white,
.site-header[data-relief-header] .brand-mark .brand-logo--white,
.site-header.menu-open .brand-mark .brand-logo--white {
  opacity: 1;
}

.site-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.site-menu::-webkit-scrollbar {
  display: none;
}

.site-menu a {
  position: relative;
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: rgba(251, 250, 246, 0.82);
  font-size: 0.875rem;
  white-space: nowrap;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}

.site-menu a:hover,
.site-menu a:focus-visible,
.site-menu a.active,
.site-menu a[aria-current="page"] {
  color: var(--cream-50);
  background: rgba(251, 250, 246, 0.1);
}

.header-action,
.primary-button,
.ghost-button,
.text-button,
.menu-toggle,
.drawer-close,
.command-trigger {
  border: 0;
  cursor: pointer;
}

.header-tools {
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: var(--space-2);
}

.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.18rem;
  border: 1px solid rgba(251, 250, 246, 0.22);
  border-radius: var(--radius-control);
  background: rgba(251, 250, 246, 0.08);
}

.language-switch button {
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 0.85rem;
  background: transparent;
  color: rgba(251, 250, 246, 0.78);
  cursor: pointer;
  font-weight: 900;
}

.language-switch button.active {
  background: var(--cream-50);
  color: var(--teal-900);
}

.header-action,
.primary-button {
  min-height: 3rem;
  border-radius: var(--radius-control);
  background: var(--green-600);
  color: var(--cream-50);
  font-weight: 700;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.command-trigger {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid rgba(251, 250, 246, 0.22);
  border-radius: var(--radius-control);
  background: rgba(251, 250, 246, 0.08);
  color: var(--cream-50);
  font-weight: 800;
  white-space: nowrap;
  transition: background-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}

.command-trigger span,
.prompt-shell kbd {
  min-width: 1.6rem;
  height: 1.6rem;
  display: inline-grid;
  place-items: center;
  border-radius: 0.65rem;
  background: rgba(251, 250, 246, 0.16);
  color: var(--gold-500);
  font-size: 0.78rem;
  font-weight: 900;
}

.command-trigger:hover,
.command-trigger:focus-visible {
  background: rgba(251, 250, 246, 0.16);
  transform: translateY(-1px);
}

.header-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  white-space: nowrap;
}

.bag-count {
  min-width: 1.55rem;
  height: 1.55rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink-900);
  color: var(--cream-50);
  font-size: 0.78rem;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.5rem;
}

.primary-button:hover,
.header-action:hover,
.primary-button:focus-visible,
.header-action:focus-visible {
  background: var(--green-700);
  transform: translateY(-1px);
  box-shadow: 0 0.75rem 1.5rem rgba(18, 82, 92, 0.25);
}

.primary-button:active,
.header-action:active {
  transform: translateY(0) scale(0.98);
}

.ghost-button {
  min-height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.25rem;
  border: 1px solid rgba(251, 250, 246, 0.42);
  border-radius: var(--radius-md);
  color: var(--cream-50);
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.ghost-button:hover,
.ghost-button:focus-visible {
  background: rgba(251, 250, 246, 0.12);
  border-color: rgba(251, 250, 246, 0.7);
}

.menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  gap: 0.28rem;
  padding: 0.7rem;
  border-radius: var(--radius-md);
  background: rgba(251, 250, 246, 0.1);
}

.menu-toggle span:not(.sr-only) {
  display: block;
  width: 1.25rem;
  height: 0.125rem;
  background: var(--cream-50);
}

.hero-section {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: center;
  /* Was 10rem / 7rem, which put 272px of empty space around a hero whose
     content is already 1011px tall — so the hero measured 1362px, 1.51
     screens on a 900px display, and nothing below it was ever glimpsed.
     A visitor who cannot see that the page continues does not scroll. */
  padding: 6rem var(--page-gutter) 4rem;
  background: var(--teal-900);
  color: var(--cream-50);
  overflow: hidden;
}

.hero-carousel,
.hero-media,
.hero-media img,
.hero-shade {
  position: absolute;
  inset: 0;
}

.hero-carousel {
  z-index: 0;
  overflow: hidden;
}

.hero-slide {
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}

.hero-slide.is-active img {
  animation: hero-kenburns 18s var(--ease-out) forwards;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(10, 50, 54, 0.96) 0%, rgba(10, 50, 54, 0.75) 48%, rgba(10, 50, 54, 0.36) 100%),
    linear-gradient(0deg, rgba(10, 50, 54, 0.7), rgba(10, 50, 54, 0.08) 46%, rgba(10, 50, 54, 0.72));
  z-index: 1;
}

.hero-carousel-nav {
  position: absolute;
  inset-inline-start: var(--page-gutter);
  inset-block-end: 9.25rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem;
  border: 1px solid rgba(251, 250, 246, 0.18);
  border-radius: 999px;
  background: rgba(10, 50, 54, 0.48);
  backdrop-filter: blur(12px);
}

.hero-carousel-nav button {
  width: 0.8rem;
  height: 0.8rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(251, 250, 246, 0.48);
  cursor: pointer;
  transition: width 180ms var(--ease-out), background-color 180ms var(--ease-out);
}

.hero-carousel-nav button.active,
.hero-carousel-nav button:focus-visible {
  width: 2.25rem;
  background: var(--gold-500);
}

.ripple-field {
  position: absolute;
  inset-inline-start: 9vw;
  inset-block-end: 15vh;
  width: 18rem;
  height: 18rem;
  z-index: 2;
  pointer-events: none;
}

.ripple-field span {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(200, 169, 58, 0.36);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  animation: ripple 5.8s var(--ease-out) infinite;
}

.ripple-field span:nth-child(2) {
  animation-delay: 1.5s;
}

.ripple-field span:nth-child(3) {
  animation-delay: 3s;
}

.hero-content,
.hero-quickbar {
  position: relative;
  z-index: 3;
}

.hero-content {
  width: min(100%, 49rem);
  max-width: 49rem;
  /* Centred in the hero's content box. A constrained width with no auto margin
     is placed at the START of its grid cell, and in a right-to-left document
     that is the RIGHT edge -- so on a 1440px screen the hero text sat 39px from
     the right with 617px of empty space beside it, while the quickbar directly
     below it spanned the full gutter. The two read as different layouts on the
     same section. */
  margin-inline: auto;
}

.eyebrow,
.section-kicker,
.project-type {
  margin: 0 0 var(--space-3);
  color: var(--gold-500);
  font-size: 0.86rem;
  font-weight: 700;
}

.section-block .section-kicker,
.project-card .project-type,
.tour-content .project-type {
  color: var(--gold-600);
  letter-spacing: 0;
}

.impact-block .section-kicker,
.donation-block .section-kicker {
  color: var(--gold-500);
}

.hero-content h1 {
  margin: 0;
  max-width: 13ch;
  color: var(--cream-50);
  font-size: clamp(2.5rem, 4vw, 3.875rem);
  line-height: 1.1;
  font-weight: 800;
}

.hero-copy {
  max-width: 46.5625rem;
  margin: var(--space-6) 0 0;
  color: rgba(251, 250, 246, 0.86);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-7);
}

.hero-command-card {
  width: min(42rem, 100%);
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.prompt-shell {
  min-height: 3.6rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(251, 250, 246, 0.22);
  border-radius: var(--radius-control);
  background: rgba(10, 50, 54, 0.72);
  color: rgba(251, 250, 246, 0.84);
  cursor: pointer;
  box-shadow: 0 1rem 2rem rgba(10, 50, 54, 0.2);
  transition: background-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}

.prompt-shell:hover,
.prompt-shell:focus-visible {
  background: rgba(10, 50, 54, 0.88);
  transform: translateY(-1px);
}

.prompt-spark {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--gold-500), var(--cream-50), var(--teal-500), var(--gold-500));
  animation: spin-slow 3.6s linear infinite;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hero-chips button {
  min-height: 2.5rem;
  padding: 0 var(--space-3);
  border: 1px solid rgba(251, 250, 246, 0.2);
  border-radius: var(--radius-control);
  background: rgba(251, 250, 246, 0.1);
  color: var(--cream-50);
  cursor: pointer;
  font-weight: 800;
  transition: background-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}

.hero-chips button:hover,
.hero-chips button:focus-visible,
.hero-chips button.active {
  background: var(--gold-500);
  color: var(--ink-900);
  transform: translateY(-1px);
}

.quick-donation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(251, 250, 246, 0.18);
  border-radius: var(--radius-control);
  background: rgba(10, 50, 54, 0.68);
  color: var(--cream-50);
}

.quick-donation-head span {
  color: rgba(251, 250, 246, 0.75);
  font-size: 0.9rem;
  font-weight: 900;
}

.quick-donation-head strong {
  color: var(--gold-500);
  font-size: 1.25rem;
}

.hero-amounts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.hero-amounts button {
  min-height: 2.7rem;
  border: 1px solid rgba(251, 250, 246, 0.2);
  border-radius: var(--radius-control);
  background: rgba(251, 250, 246, 0.1);
  color: var(--cream-50);
  cursor: pointer;
  font-weight: 900;
}

.hero-amounts button.active,
.hero-amounts button:hover,
.hero-amounts button:focus-visible {
  background: var(--cream-50);
  color: var(--teal-900);
}

.hero-donation-card .text-button {
  justify-self: stretch;
  background: rgba(251, 250, 246, 0.12);
  color: var(--cream-50);
}

.hero-donation-card .text-button:hover,
.hero-donation-card .text-button:focus-visible {
  background: rgba(251, 250, 246, 0.2);
}

.hero-quickbar {
  position: absolute;
  inset-inline: var(--page-gutter);
  inset-block-end: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  background: var(--surface);
  color: var(--ink-800);
  box-shadow: var(--shadow-lg);
}

.hero-quickbar div {
  padding: var(--space-5) var(--space-6);
  border-inline-start: 1px solid rgba(31, 31, 35, 0.08);
}

.hero-quickbar div:first-child {
  border-inline-start: 0;
}

.hero-quickbar span,
.hero-quickbar strong {
  display: block;
}

.hero-quickbar span {
  color: var(--ink-400);
  font-size: 0.86rem;
}

.hero-quickbar strong {
  margin-block-start: var(--space-1);
  color: var(--teal-800);
  font-size: 1.15rem;
}

.activity-strip {
  position: relative;
  display: flex;
  gap: var(--space-8);
  overflow: hidden;
  padding: var(--space-4) 0;
  background: var(--ink-900);
  color: var(--cream-50);
}

.activity-strip::before,
.activity-strip::after {
  content: "";
  position: absolute;
  inset-block: 0;
  z-index: 2;
  width: 7rem;
  pointer-events: none;
}

.activity-strip::before {
  inset-inline-start: 0;
  background: linear-gradient(90deg, var(--ink-900), transparent);
}

.activity-strip::after {
  inset-inline-end: 0;
  background: linear-gradient(270deg, var(--ink-900), transparent);
}

.marquee-track {
  display: flex;
  flex: 0 0 auto;
  gap: var(--space-8);
  min-width: max-content;
  animation: marquee-rtl 28s linear infinite;
}

.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(251, 250, 246, 0.82);
  font-weight: 900;
}

.marquee-track span::before {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--gold-500);
}

.activity-strip:hover .marquee-track {
  animation-play-state: paused;
}

.section-block {
  padding: var(--section-y) var(--page-gutter);
}

.impact-proof-block,
.values-block {
  background: var(--cream-100);
}

.programs-block,
.governance-block {
  background: var(--cream-200);
}

.donation-block {
  background: var(--teal-900);
  color: var(--cream-50);
}

.impact-block {
  background: var(--teal-900);
  color: var(--cream-50);
  overflow: hidden;
}

.school-block,
.gift-block {
  background: var(--cream-100);
}

.service-block,
.faq-block {
  background: var(--cream-50);
}

.contribution-flow-block {
  background: var(--cream-200);
}

.section-heading {
  display: grid;
  grid-template-columns: minmax(14rem, 0.9fr) minmax(18rem, 1.1fr);
  gap: var(--space-6);
  align-items: start;
  margin-block-end: var(--space-9);
}

.section-heading h2,
.donation-copy h2,
.impact-copy h2,
.gift-copy h2 {
  margin: 0;
  color: var(--ink-900);
  font-size: clamp(2rem, 2.8vw, 3rem);
  line-height: 1.2;
  font-weight: 800;
}

.donation-copy h2,
.impact-copy h2 {
  color: var(--cream-50);
}

.section-heading p,
.donation-copy p,
.impact-copy p,
.gift-copy p,
.service-copy p {
  margin: 0;
  max-width: 46.5625rem;
  color: var(--ink-600);
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.donation-copy p,
.impact-copy p {
  color: rgba(251, 250, 246, 0.82);
}

.credential-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.credential-card,
.project-card,
.donation-panel,
.timeline article {
  border: 1px solid rgba(31, 31, 35, 0.1);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 0.75rem 1.5rem rgba(31, 31, 35, 0.06);
}

.credential-card {
  padding: var(--space-7);
}

.credential-card span,
.timeline span {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  background: var(--teal-800);
  color: var(--cream-50);
  font-weight: 800;
}

.credential-card h3,
.timeline h3,
.project-card h3 {
  margin: var(--space-5) 0 var(--space-3);
  color: var(--ink-900);
  font-size: 1.35rem;
  line-height: 1.35;
}

.credential-card p,
.timeline p,
.project-card p {
  margin: 0;
  color: var(--ink-600);
}

.service-layout {
  display: grid;
  grid-template-columns: minmax(20rem, 0.85fr) minmax(22rem, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.service-copy {
  display: grid;
  align-content: center;
  gap: var(--space-5);
}

.service-copy h2 {
  margin: 0;
  color: var(--ink-900);
  font-size: clamp(2rem, 2.8vw, 3rem);
  line-height: 1.2;
}

.quick-command {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid rgba(31, 31, 35, 0.1);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 0.75rem 1.5rem rgba(31, 31, 35, 0.06);
}

.quick-command label {
  color: var(--ink-900);
  font-weight: 900;
}

.quick-search-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
}

.quick-search-row input,
.command-panel input {
  min-height: 3.1rem;
  min-width: 0;
  padding: 0 var(--space-4);
  border: 1px solid rgba(31, 31, 35, 0.14);
  border-radius: var(--radius-md);
  background: var(--cream-50);
  color: var(--ink-900);
}

.quick-search-row button {
  min-height: 3.1rem;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--teal-800);
  color: var(--cream-50);
  cursor: pointer;
  font-weight: 900;
}

.service-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.service-links button {
  min-height: 2.55rem;
  padding: 0 var(--space-3);
  border: 1px solid rgba(31, 31, 35, 0.1);
  border-radius: var(--radius-md);
  background: var(--cream-50);
  color: var(--teal-800);
  cursor: pointer;
  font-weight: 900;
}

.quick-results,
.command-results {
  display: grid;
  gap: var(--space-2);
}

.quick-result,
.command-result {
  width: 100%;
  min-height: 3.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid rgba(31, 31, 35, 0.1);
  border-radius: var(--radius-md);
  background: rgba(251, 250, 246, 0.82);
  color: var(--ink-800);
  cursor: pointer;
  text-align: start;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out);
}

.quick-result:hover,
.quick-result:focus-visible,
.command-result:hover,
.command-result:focus-visible {
  background: rgba(31, 123, 130, 0.1);
  transform: translateY(-1px);
}

.quick-result strong,
.quick-result small,
.command-result strong,
.command-result small {
  display: block;
}

.quick-result small,
.command-result small {
  color: var(--ink-400);
}

.quick-result span,
.command-result span {
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  background: rgba(31, 123, 130, 0.1);
  color: var(--teal-800);
  font-size: 0.78rem;
  font-weight: 900;
}

.service-motion-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.motion-gif {
  min-height: 18rem;
  display: grid;
  align-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid rgba(31, 31, 35, 0.1);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 0.75rem 1.5rem rgba(31, 31, 35, 0.06);
  overflow: hidden;
}

.motion-gif > span {
  width: 2.2rem;
  height: 2.2rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--teal-800);
  color: var(--cream-50);
  font-weight: 900;
}

.motion-gif h3,
.motion-gif p {
  margin: 0;
}

.motion-gif h3 {
  color: var(--ink-900);
  font-size: 1.25rem;
}

.motion-gif p {
  color: var(--ink-600);
  font-size: 0.95rem;
}

.gif-stage {
  height: 5.7rem;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--cream-200);
}

.gif-stage i {
  height: 0.72rem;
  border-radius: 999px;
  background: rgba(31, 123, 130, 0.16);
  transform-origin: right center;
  animation: receipt-lines 1.8s var(--ease-out) infinite;
}

.gif-stage i:nth-child(2) {
  animation-delay: 160ms;
}

.gif-stage i:nth-child(3) {
  animation-delay: 320ms;
}

.box-loader {
  position: relative;
  width: 5.2rem;
  height: 5.2rem;
  margin-inline: auto;
}

.box-loader i {
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--gold-500);
  animation: box-loader 1.4s var(--ease-out) infinite;
}

.box-loader i:nth-child(1) {
  inset-block-start: 0;
  inset-inline-start: 0;
}

.box-loader i:nth-child(2) {
  inset-block-start: 0;
  inset-inline-end: 0;
  animation-delay: 120ms;
}

.box-loader i:nth-child(3) {
  inset-block-end: 0;
  inset-inline-end: 0;
  animation-delay: 240ms;
}

.box-loader i:nth-child(4) {
  inset-block-end: 0;
  inset-inline-start: 0;
  animation-delay: 360ms;
}

.mini-gift-loop {
  position: relative;
  height: 5.7rem;
  border-radius: var(--radius-md);
  background: var(--teal-900);
  overflow: hidden;
}

.mini-gift-loop b {
  position: absolute;
  inset-block-start: 1.1rem;
  width: 4rem;
  height: 3.4rem;
  border-radius: var(--radius-sm);
  background: var(--cream-50);
  box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.18);
  animation: gift-slide 2.4s var(--ease-out) infinite;
}

.mini-gift-loop b::before,
.mini-gift-loop b::after {
  content: "";
  position: absolute;
  background: var(--gold-500);
}

.mini-gift-loop b::before {
  inset-block: 0;
  inset-inline-start: 50%;
  width: 0.38rem;
  transform: translateX(-50%);
}

.mini-gift-loop b::after {
  inset-inline: 0;
  inset-block-start: 50%;
  height: 0.38rem;
  transform: translateY(-50%);
}

.mini-gift-loop b:nth-child(2) {
  animation-delay: 1.2s;
}

.program-tabs {
  display: inline-flex;
  gap: var(--space-2);
  padding: var(--space-2);
  margin-block-end: var(--space-6);
  border-radius: var(--radius-md);
  background: rgba(31, 31, 35, 0.06);
}

.program-tabs button,
.segmented-control button,
.amount-grid button {
  min-height: 2.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-600);
  cursor: pointer;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 160ms var(--ease-out);
}

.program-tabs button {
  padding: 0 var(--space-4);
  font-weight: 700;
}

.program-tabs button.active,
.segmented-control button.active,
.amount-grid button.active {
  background: var(--green-600);
  color: var(--cream-50);
}

.program-tabs button:hover,
.segmented-control button:hover,
.amount-grid button:hover {
  transform: translateY(-1px);
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
}

.project-card {
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), opacity 220ms var(--ease-out);
}

.project-card.is-hidden {
  display: none;
}

.project-card:hover {
  box-shadow: var(--shadow-lg);
}

.project-zakat-pill {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 1;
  background: var(--green-500);
  color: #fff;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-family: "Alexandria", sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  box-shadow: 0 4px 14px -2px rgba(18, 82, 92, 0.55);
}

.project-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.project-card-body {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
}

.project-icon {
  width: 2.35rem;
  height: 2.35rem;
}

.progress-line {
  height: 0.5rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(31, 31, 35, 0.08);
}

.progress-line span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--green-500);
  transition: width 1000ms var(--ease-out);
}

.text-button {
  justify-self: start;
  min-height: 2.5rem;
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(31, 123, 130, 0.1);
  color: var(--teal-800);
  font-weight: 800;
  transition: background-color 180ms var(--ease-out), transform 160ms var(--ease-out);
}

.text-button:hover,
.text-button:focus-visible {
  background: rgba(31, 123, 130, 0.18);
  transform: translateY(-1px);
}

.impact-layout,
.donation-layout {
  display: grid;
  grid-template-columns: minmax(20rem, 0.95fr) minmax(20rem, 0.8fr);
  gap: var(--space-9);
  align-items: center;
}

.impact-layout {
  grid-template-columns: minmax(20rem, 0.76fr) minmax(24rem, 1fr);
}

.impact-copy {
  display: grid;
  gap: var(--space-6);
}

.region-controls,
.gift-options,
.tour-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.region-controls button,
.gift-options button,
.tour-steps button {
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border: 1px solid rgba(251, 250, 246, 0.22);
  border-radius: var(--radius-md);
  background: rgba(251, 250, 246, 0.08);
  color: var(--cream-50);
  cursor: pointer;
  font-weight: 800;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.region-controls button.active,
.region-controls button:hover,
.region-controls button:focus-visible {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--ink-900);
  transform: translateY(-1px);
}

.globe-panel {
  position: relative;
  min-height: 33rem;
  display: grid;
  align-items: end;
  padding: var(--space-5);
  border: 1px solid rgba(251, 250, 246, 0.18);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 62% 32%, rgba(200, 169, 58, 0.18), transparent 28rem),
    rgba(251, 250, 246, 0.06);
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

#impact-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.globe-fallback {
  position: absolute;
  inset: 3rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(251, 250, 246, 0.24), transparent 0.42rem),
    radial-gradient(circle at 62% 44%, rgba(200, 169, 58, 0.24), transparent 0.5rem),
    radial-gradient(circle at 48% 62%, rgba(251, 250, 246, 0.18), transparent 0.44rem),
    radial-gradient(circle at 50% 50%, rgba(31, 123, 130, 0.95), rgba(10, 50, 54, 0.75));
  box-shadow: inset -2rem -2rem 3rem rgba(10, 50, 54, 0.42), 0 1.5rem 3rem rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.globe-fallback::before {
  content: "";
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background-image:
    linear-gradient(rgba(251, 250, 246, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 250, 246, 0.1) 1px, transparent 1px);
  background-size: 2rem 2rem;
  mask-image: radial-gradient(circle, #000 64%, transparent 66%);
  animation: fallback-drift 9s linear infinite;
}

.fallback-orbit {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(200, 169, 58, 0.3);
  border-radius: 50%;
  transform: rotate(26deg) scaleY(0.42);
}

.fallback-orbit:nth-child(2) {
  transform: rotate(-18deg) scaleY(0.55);
}

.fallback-marker {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  min-width: 0;
  min-height: 0;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(251, 250, 246, 0.42);
  border-radius: 999px;
  background: rgba(10, 50, 54, 0.8);
  color: var(--cream-50);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 900;
  transform: translate(50%, -50%);
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.fallback-marker.active,
.fallback-marker:hover,
.fallback-marker:focus-visible {
  background: var(--gold-500);
  color: var(--ink-900);
  transform: translate(50%, -50%) scale(1.06);
}

.impact-card {
  position: relative;
  z-index: 2;
  max-width: 22rem;
  padding: var(--space-5);
  border: 1px solid rgba(251, 250, 246, 0.22);
  border-radius: var(--radius-md);
  background: rgba(10, 50, 54, 0.82);
  color: var(--cream-50);
}

.impact-card p,
.impact-card h3,
.impact-card span {
  display: block;
  margin: 0;
}

.impact-card p {
  color: var(--gold-500);
  font-weight: 800;
}

.impact-card h3 {
  margin-block: var(--space-2);
  font-size: 1.35rem;
  line-height: 1.35;
}

.impact-card span {
  color: rgba(251, 250, 246, 0.78);
}

.school-tour {
  display: grid;
  grid-template-columns: minmax(20rem, 1fr) minmax(18rem, 0.75fr);
  gap: var(--space-6);
  align-items: stretch;
}

.tour-visual,
.tour-content,
.gift-preview,
.gift-copy {
  border: 1px solid rgba(31, 31, 35, 0.1);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 0.75rem 1.5rem rgba(31, 31, 35, 0.06);
}

.tour-visual {
  position: relative;
  min-height: 32rem;
  overflow: hidden;
}

.tour-visual img {
  width: 100%;
  height: 100%;
  min-height: 32rem;
  object-fit: cover;
  transition: opacity 260ms var(--ease-out), transform 520ms var(--ease-out);
}

.tour-visual.is-switching img {
  opacity: 0.28;
  transform: scale(1.04);
}

.hotspot {
  position: absolute;
  width: 2.85rem;
  height: 2.85rem;
  display: grid;
  place-items: center;
  border: 2px solid rgba(251, 250, 246, 0.88);
  border-radius: 50%;
  background: var(--teal-800);
  color: var(--cream-50);
  cursor: pointer;
  font-weight: 900;
  box-shadow: 0 0.8rem 1.4rem rgba(10, 50, 54, 0.28);
  transition: transform 180ms var(--ease-out), background-color 180ms var(--ease-out);
}

.hotspot.active,
.hotspot:hover,
.hotspot:focus-visible {
  background: var(--gold-500);
  color: var(--ink-900);
  transform: scale(1.08);
}

.hotspot-a {
  inset-inline-end: 18%;
  inset-block-start: 24%;
}

.hotspot-b {
  inset-inline-start: 34%;
  inset-block-start: 18%;
}

.hotspot-c {
  inset-inline-end: 44%;
  inset-block-end: 28%;
}

.hotspot-d {
  inset-inline-start: 18%;
  inset-block-end: 18%;
}

.tour-content {
  display: grid;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-7);
}

.tour-content h3 {
  margin: 0;
  color: var(--ink-900);
  font-size: 2rem;
  line-height: 1.25;
}

.tour-content > p:not(.project-type) {
  margin: 0;
  color: var(--ink-600);
}

.tour-steps button {
  border-color: rgba(31, 31, 35, 0.1);
  background: rgba(31, 31, 35, 0.06);
  color: var(--ink-700, var(--ink-800));
}

.tour-steps button.active,
.tour-steps button:hover,
.tour-steps button:focus-visible {
  background: var(--teal-800);
  color: var(--cream-50);
  transform: translateY(-1px);
}

.check-list {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  margin: var(--space-7) 0 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-inline-start: 2rem;
  color: var(--ink-800);
}

.donation-block .check-list li,
.impact-block .check-list li {
  color: rgba(251, 250, 246, 0.9);
}

.check-list li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  width: 1.35rem;
  height: 1.35rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--gold-500);
  color: var(--ink-900);
  font-size: 0.82rem;
  font-weight: 900;
}

.zakat-mini {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-7);
  padding: var(--space-5);
  border: 1px solid rgba(251, 250, 246, 0.18);
  border-radius: var(--radius-md);
  background: rgba(251, 250, 246, 0.08);
}

.zakat-mini h3,
.zakat-mini p {
  margin: 0;
}

.zakat-mini h3 {
  color: var(--cream-50);
}

.zakat-mini label {
  color: rgba(251, 250, 246, 0.8);
  font-weight: 800;
}

.zakat-mini input {
  min-height: 2.85rem;
  padding: 0 var(--space-3);
  border: 1px solid rgba(251, 250, 246, 0.18);
  border-radius: var(--radius-md);
  background: rgba(251, 250, 246, 0.94);
  color: var(--ink-900);
}

.zakat-mini p {
  color: var(--gold-500);
  font-weight: 900;
}

.surface-card .zakat-mini {
  margin-block-start: 0;
  border-color: rgba(18, 82, 92, 0.18);
  background: rgba(18, 82, 92, 0.06);
}

.surface-card .zakat-mini h3,
.surface-card .zakat-mini label {
  color: var(--ink-900);
}

.surface-card .zakat-mini p {
  color: var(--green-700);
}

.surface-card .zakat-mini input {
  border-color: rgba(31, 31, 35, 0.16);
  background: var(--cream-50);
}

.donation-panel {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-7);
  color: var(--ink-800);
}

.donation-panel fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.donation-panel legend,
.donation-panel label {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--ink-900);
  font-weight: 800;
}

.donation-panel select {
  width: 100%;
  min-height: 3rem;
  padding: 0 var(--space-4);
  border: 1px solid rgba(31, 31, 35, 0.16);
  border-radius: var(--radius-md);
  background: var(--cream-50);
  color: var(--ink-900);
}

.segmented-control,
.amount-grid {
  display: grid;
  gap: var(--space-2);
}

.segmented-control {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: rgba(31, 31, 35, 0.06);
}

.amount-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.amount-grid button {
  border: 1px solid rgba(31, 31, 35, 0.12);
  background: var(--cream-50);
  font-weight: 800;
}

.amount-grid button.active {
  border-color: var(--green-600);
  box-shadow: inset 0 0 0 2px var(--green-600), 0 0.45rem 1rem rgba(18, 82, 92, 0.18);
}

.guidance-note {
  padding: var(--space-4);
  border: 1px solid rgba(176, 149, 52, 0.32);
  border-radius: var(--radius-md);
  background: #fbf5de;
  color: var(--ink-800);
  font-size: 0.95rem;
}

.full-width {
  width: 100%;
}

.gift-layout {
  display: grid;
  grid-template-columns: minmax(20rem, 0.82fr) minmax(20rem, 1fr);
  gap: var(--space-9);
  align-items: center;
}

.gift-copy {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-7);
}

.gift-options button {
  border-color: rgba(31, 31, 35, 0.1);
  background: rgba(31, 31, 35, 0.06);
  color: var(--ink-800);
}

.gift-options button.active,
.gift-options button:hover,
.gift-options button:focus-visible {
  background: var(--teal-800);
  color: var(--cream-50);
}

.gift-copy label {
  display: block;
  margin-block-end: calc(var(--space-5) * -1);
  color: var(--ink-900);
  font-weight: 800;
}

.gift-copy input {
  min-height: 3rem;
  padding: 0 var(--space-4);
  border: 1px solid rgba(31, 31, 35, 0.16);
  border-radius: var(--radius-md);
  background: var(--cream-50);
  color: var(--ink-900);
}

.gift-preview {
  min-height: 31rem;
  display: grid;
  place-items: center;
  padding: var(--space-7);
  background:
    radial-gradient(circle at 18% 20%, rgba(200, 169, 58, 0.16), transparent 18rem),
    var(--cream-200);
  perspective: 1200px;
}

.gift-card-art {
  width: min(25rem, 100%);
  min-height: 22rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-8);
  border: 1px solid rgba(31, 31, 35, 0.12);
  border-radius: var(--radius-md);
  background:
    linear-gradient(145deg, rgba(251, 250, 246, 0.96), rgba(244, 241, 234, 0.9)),
    var(--cream-50);
  box-shadow: var(--shadow-lg);
  text-align: center;
  transform: rotateY(-6deg) rotateX(3deg);
  transition: transform 320ms var(--ease-out), background-color 240ms var(--ease-out);
}

.gift-card-art.is-changing {
  transform: rotateY(0) rotateX(0) scale(0.98);
}

.gift-card-art span {
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
  background: var(--teal-800);
  color: var(--cream-50);
  font-size: 0.85rem;
  font-weight: 900;
}

.gift-card-art h3,
.gift-card-art p {
  margin: 0;
}

.gift-card-art h3 {
  color: var(--ink-900);
  font-size: 2rem;
  line-height: 1.2;
}

.gift-card-art p {
  color: var(--ink-600);
}

.values-orbit {
  position: relative;
  width: min(36rem, 88vw);
  aspect-ratio: 1;
  margin: 0 auto;
  border: 1px solid rgba(31, 123, 130, 0.22);
  border-radius: 50%;
}

.orbit-core {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 10.5rem;
  height: 10.5rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
}

.orbit-core img {
  width: 5.75rem;
  height: auto;
}

.values-orbit > span {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8rem;
  min-height: 2.6rem;
  display: inline-grid;
  place-items: center;
  padding: 0 var(--space-3);
  border-radius: 999px;
  background: var(--teal-800);
  color: var(--cream-50);
  font-size: 0.88rem;
  font-weight: 800;
  text-align: center;
  transform:
    translate(-50%, -50%)
    rotate(calc(var(--i) * 45deg))
    translateY(-16rem)
    rotate(calc(var(--i) * -45deg));
  animation: value-breathe 4s var(--ease-out) infinite;
  animation-delay: calc(var(--i) * 120ms);
}

.timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.timeline article {
  padding: var(--space-7);
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.flow-steps article {
  position: relative;
  min-height: 13rem;
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid rgba(31, 31, 35, 0.1);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.flow-steps article::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 0.3rem;
  background: rgba(31, 123, 130, 0.16);
}

.flow-steps article.active::after {
  background: var(--gold-500);
  animation: flow-progress 2.6s var(--ease-out) infinite;
}

.flow-steps span {
  width: 2.3rem;
  height: 2.3rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--teal-800);
  color: var(--cream-50);
  font-weight: 900;
}

.flow-steps h3,
.flow-steps p {
  margin: 0;
}

.flow-steps h3 {
  color: var(--ink-900);
  font-size: 1.22rem;
}

.flow-steps p {
  color: var(--ink-600);
}

.accordion {
  display: grid;
  max-width: 58rem;
  margin-inline: auto;
  border-block-start: 1px solid rgba(31, 31, 35, 0.1);
}

.accordion article {
  border-block-end: 1px solid rgba(31, 31, 35, 0.1);
}

.accordion button {
  width: 100%;
  min-height: 5rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border: 0;
  background: transparent;
  color: var(--ink-900);
  cursor: pointer;
  text-align: start;
  font-size: 1.25rem;
  font-weight: 900;
}

.accordion button span {
  width: 2.5rem;
  height: 2.5rem;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ink-900);
  color: var(--cream-50);
  font-size: 0.86rem;
}

.accordion button b {
  width: 2rem;
  height: 2rem;
  display: inline-grid;
  place-items: center;
  color: var(--ink-400);
  font-size: 1.4rem;
  font-weight: 400;
}

.accordion article p {
  max-height: 0;
  margin: 0;
  padding-inline-start: calc(2.5rem + var(--space-5));
  overflow: hidden;
  color: var(--ink-600);
  transition: max-height 280ms var(--ease-out), padding-bottom 280ms var(--ease-out);
}

.accordion article.active p {
  max-height: 8rem;
  padding-bottom: var(--space-5);
}

.service-lanes-block {
  background: var(--cream-200);
}

.service-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.beam-card {
  position: relative;
  min-height: 18rem;
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid rgba(31, 31, 35, 0.1);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 0.75rem 1.5rem rgba(31, 31, 35, 0.06);
}

.beam-card::before {
  content: "";
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg, transparent, rgba(200, 169, 58, 0.6), transparent 32%);
  animation: border-beam-spin 7s linear infinite;
}

.beam-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-md) - 1px);
  background: var(--surface);
}

.beam-card > * {
  position: relative;
  z-index: 1;
}

.beam-card span {
  color: var(--gold-600);
  font-size: 0.86rem;
  font-weight: 900;
}

.beam-card h3,
.beam-card p {
  margin: 0;
}

.beam-card h3 {
  color: var(--ink-900);
  font-size: 1.55rem;
  line-height: 1.3;
}

.beam-card p {
  color: var(--ink-600);
}

.beam-card button {
  justify-self: start;
  min-height: 2.7rem;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--teal-800);
  color: var(--cream-50);
  cursor: pointer;
  font-weight: 900;
}

.donation-drawer {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: end center;
  padding: var(--space-4);
  background: rgba(10, 50, 54, 0);
  pointer-events: none;
  transition: background-color 240ms var(--ease-out);
}

.donation-drawer[hidden] {
  display: none;
}

.donation-drawer.is-open {
  background: rgba(10, 50, 54, 0.72);
  pointer-events: auto;
}

.drawer-panel {
  position: relative;
  width: min(34rem, 100%);
  padding: var(--space-7);
  border-radius: var(--radius-md);
  background: var(--cream-50);
  box-shadow: var(--shadow-lg);
  transform: translateY(2rem);
  opacity: 0;
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
}

.donation-drawer.is-open .drawer-panel {
  transform: translateY(0);
  opacity: 1;
}

.drawer-close {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: rgba(31, 31, 35, 0.08);
  color: var(--ink-900);
  font-size: 1.4rem;
  line-height: 1;
}

.drawer-panel h2 {
  margin: 0 0 var(--space-5);
  color: var(--ink-900);
}

.drawer-panel dl {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
}

.drawer-panel dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid rgba(31, 31, 35, 0.08);
}

.drawer-panel dt {
  color: var(--ink-400);
}

.drawer-panel dd {
  margin: 0;
  color: var(--ink-900);
  font-weight: 800;
}

.drawer-note {
  margin: 0 0 var(--space-5);
  color: var(--ink-600);
}

.receipt-preview {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  margin-block-end: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(18, 82, 92, 0.1);
  color: var(--ink-900);
}

.receipt-preview[hidden] {
  display: none;
}

.receipt-preview strong,
.receipt-preview small {
  display: block;
}

.receipt-preview small {
  color: var(--ink-600);
}

.receipt-loader {
  grid-row: span 2;
  display: flex;
  gap: 0.25rem;
}

.receipt-loader span {
  width: 0.45rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--green-500);
  animation: receipt-bars 800ms var(--ease-out) infinite;
}

.receipt-loader span:nth-child(2) {
  animation-delay: 120ms;
}

.receipt-loader span:nth-child(3) {
  animation-delay: 240ms;
}

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 1700;
  display: grid;
  place-items: start center;
  padding: 7rem var(--space-4) var(--space-4);
  background: rgba(10, 50, 54, 0);
  pointer-events: none;
  transition: background-color 220ms var(--ease-out);
}

.command-palette[hidden] {
  display: none;
}

.command-palette.is-open {
  background: rgba(10, 50, 54, 0.7);
  pointer-events: auto;
}

.command-panel {
  position: relative;
  width: min(44rem, 100%);
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--cream-50);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1rem);
  opacity: 0;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}

.command-palette.is-open .command-panel {
  transform: translateY(0);
  opacity: 1;
}

.command-panel h2 {
  margin: 0;
  color: var(--ink-900);
  font-size: 1.55rem;
}

.action-dock {
  position: fixed;
  inset-inline: 50% auto;
  inset-block-end: var(--space-4);
  z-index: 980;
  display: none;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid rgba(251, 250, 246, 0.18);
  border-radius: var(--radius-md);
  background: rgba(10, 50, 54, 0.94);
  color: var(--cream-50);
  box-shadow: var(--shadow-lg);
  transform: translateX(50%);
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.action-dock button,
.action-dock a {
  min-width: 4rem;
  min-height: 2.65rem;
  display: inline-grid;
  place-items: center;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 900;
}

.action-dock button:hover,
.action-dock button:focus-visible,
.action-dock a:hover,
.action-dock a:focus-visible {
  background: var(--gold-500);
  color: var(--ink-900);
}

.tech-monitor.monitor-has-destination .action-dock {
  opacity: 0;
  pointer-events: none;
  transform: translateX(50%) translateY(1rem);
}

.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 2300;
  pointer-events: none;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  inset-block-start: -1rem;
  width: 0.75rem;
  height: 0.32rem;
  border-radius: 0.35rem;
  background: var(--gold-500);
  animation: confetti-fall 2.8s var(--ease-out) forwards;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) minmax(16rem, 0.7fr);
  gap: var(--space-8);
  padding: var(--space-11) var(--page-gutter);
  background: var(--ink-900);
  color: var(--cream-50);
}

.site-footer img {
  width: 9rem;
  height: auto;
  margin-block-end: var(--space-4);
}

.site-footer p {
  max-width: 44rem;
  margin: 0;
  color: rgba(251, 250, 246, 0.72);
}

.site-footer address {
  display: grid;
  align-content: center;
  gap: var(--space-3);
  font-style: normal;
  color: rgba(251, 250, 246, 0.78);
}

.route-curtain {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: center;
  background: var(--teal-900);
  color: var(--gold-500);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out), visibility 0s linear 260ms;
}

.route-curtain.is-active {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out), visibility 0s;
}

.route-curtain span {
  font-weight: 900;
}

.reveal {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.pop {
  animation: pop 220ms var(--ease-out);
}

@keyframes hero-kenburns {
  from {
    transform: scale(1.08);
  }
  to {
    transform: scale(1.02);
  }
}

@keyframes ripple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
  }
  20% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.6);
  }
}

@keyframes value-breathe {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(31, 123, 130, 0);
  }
  50% {
    box-shadow: 0 0.75rem 1.6rem rgba(31, 123, 130, 0.22);
  }
}

@keyframes pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.035);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes morph-loader {
  0%,
  100% {
    transform: scale(1);
    border-radius: var(--radius-sm);
  }
  50% {
    transform: scale(0.72) rotate(45deg);
    border-radius: 50%;
  }
}

@keyframes spin-slow {
  to {
    transform: rotate(1turn);
  }
}

@keyframes shimmer-pass {
  to {
    inset-inline-start: 100%;
  }
}

@keyframes receipt-lines {
  0% {
    transform: scaleX(0.18);
    background: rgba(31, 123, 130, 0.16);
  }
  50% {
    transform: scaleX(1);
    background: rgba(31, 123, 130, 0.42);
  }
  100% {
    transform: scaleX(0.72);
    background: rgba(31, 123, 130, 0.16);
  }
}

@keyframes box-loader {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(0.35rem, -0.35rem) scale(0.78);
  }
}

@keyframes gift-slide {
  0% {
    inset-inline-start: -4.5rem;
    transform: rotate(-8deg);
    opacity: 0;
  }
  20%,
  70% {
    opacity: 1;
  }
  45% {
    inset-inline-start: calc(50% - 2rem);
    transform: rotate(0);
  }
  100% {
    inset-inline-start: 100%;
    transform: rotate(8deg);
    opacity: 0;
  }
}

@keyframes flow-progress {
  0% {
    transform: scaleX(0.2);
    transform-origin: right center;
  }
  50% {
    transform: scaleX(1);
    transform-origin: right center;
  }
  51% {
    transform-origin: left center;
  }
  100% {
    transform: scaleX(0.2);
    transform-origin: left center;
  }
}

@keyframes receipt-bars {
  0%,
  100% {
    transform: scaleY(0.45);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes fallback-drift {
  to {
    background-position: 4rem 0, 4rem 0;
  }
}

@keyframes marquee-rtl {
  to {
    transform: translateX(100%);
  }
}

@keyframes border-beam-spin {
  to {
    transform: rotate(1turn);
  }
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(520deg);
    opacity: 0;
  }
}

@media (max-width: 1180px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .credential-grid,
  .timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .impact-layout,
  .school-tour,
  .gift-layout,
  .service-layout {
    grid-template-columns: 1fr;
  }

  .service-motion-grid,
  .flow-steps,
  .service-lanes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .site-header {
    inset-block-start: 0;
    grid-template-columns: auto auto auto;
    gap: var(--space-3);
    padding: var(--space-3) var(--page-gutter);
  }

  .hotline-strip {
    display: none;
  }

  .menu-toggle {
    display: grid;
  }

  .site-menu {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline: var(--space-4);
    z-index: 1200;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: rgba(10, 50, 54, 0.98);
    box-shadow: var(--shadow-lg);
    transform: translateY(-0.5rem);
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out);
  }

  .site-header.menu-open .site-menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-menu a {
    justify-content: center;
    min-height: 3rem;
    border: 1px solid rgba(251, 250, 246, 0.1);
    background: rgba(251, 250, 246, 0.04);
  }

  .header-action {
    padding: 0 var(--space-3);
  }

  .command-trigger {
    display: none;
  }

  .hero-section {
    min-height: 96vh;
    padding: 7rem var(--page-gutter) 8rem;
  }

  .hero-content h1 {
    font-size: 3rem;
  }

  .hero-copy {
    font-size: 1.05rem;
  }

  .hero-quickbar {
    position: relative;
    inset: auto;
    width: 100%;
    margin-block-start: var(--space-8);
    grid-template-columns: 1fr;
  }

  .hero-quickbar div {
    padding: var(--space-4);
    border-inline-start: 0;
    border-block-start: 1px solid rgba(31, 31, 35, 0.08);
  }

  .hero-quickbar div:first-child {
    border-block-start: 0;
  }

  .section-heading,
  .impact-layout,
  .donation-layout,
  .school-tour,
  .gift-layout,
  .service-layout,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .section-heading h2,
  .donation-copy h2,
  .impact-copy h2,
  .gift-copy h2,
  .service-copy h2 {
    font-size: 2rem;
  }

  .action-dock {
    display: inline-flex;
  }

  .globe-panel {
    min-height: 27rem;
  }

  .values-orbit {
    width: min(30rem, 92vw);
  }

  .values-orbit > span {
    width: 6.9rem;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--i) * 45deg))
      translateY(-13.3rem)
      rotate(calc(var(--i) * -45deg));
  }
}

@media (max-width: 680px) {
  .brand-mark {
    min-width: auto;
  }

  .brand-mark small {
    display: none;
  }

  .header-action {
    min-height: 2.5rem;
    min-width: 2.5rem;
    padding: 0 var(--space-2);
    font-size: 0.75rem;
  }

  .header-action b {
    display: none;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .hero-actions,
  .program-tabs {
    width: 100%;
  }

  .hero-carousel-nav {
    inset-inline-start: var(--page-gutter);
    inset-block-end: 6.25rem;
  }

  .hero-actions > *,
  .program-tabs button {
    flex: 1 1 auto;
  }

  .credential-grid,
  .project-grid,
  .timeline,
  .service-motion-grid,
  .flow-steps,
  .service-lanes {
    grid-template-columns: 1fr;
  }

  .section-block {
    padding: 4rem var(--page-gutter);
  }

  .program-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .segmented-control,
  .amount-grid,
  .quick-search-row {
    grid-template-columns: 1fr;
  }

  .prompt-shell {
    grid-template-columns: auto 1fr;
  }

  .prompt-shell kbd {
    display: none;
  }

  .accordion button {
    gap: var(--space-3);
    font-size: 1rem;
  }

  .accordion article p {
    padding-inline-start: 0;
  }

  .values-orbit {
    display: grid;
    gap: var(--space-3);
    width: 100%;
    aspect-ratio: auto;
    border: 0;
  }

  .orbit-core,
  .values-orbit > span {
    position: static;
    width: 100%;
    min-height: 3rem;
    transform: none;
    border-radius: var(--radius-md);
  }

  .orbit-core {
    height: auto;
    padding: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .hero-slide {
    transition: none;
  }
}

/* ========================================================================
   Sub-page chrome (about/zakat/donate/impact/news/etc.)
   ======================================================================== */

.page-hero {
  position: relative;
  /* UAE DS spacing: 96 / 32 / 64 (proportional past 48) */
  padding: var(--space-32) var(--space-8) var(--space-16);
  background:
    linear-gradient(140deg, rgba(10, 42, 42, 0.88) 0%, rgba(28, 102, 88, 0.76) 58%, rgba(18, 82, 92, 0.82) 100%),
    var(--page-hero-image, url("assets/variant_a_bg_pro.webp")) center / cover no-repeat;
  color: var(--cream-50);
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(340px, 44vh, 520px);
  display: grid;
  align-items: end;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(200, 169, 58, 0.18), transparent 60%),
    radial-gradient(700px 400px at 80% 100%, rgba(18, 82, 92, 0.20), transparent 60%),
    linear-gradient(0deg, rgba(8, 26, 28, 0.45), rgba(8, 26, 28, 0.06));
  z-index: -1;
}

.page-hero .page-hero-inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  display: grid;
  gap: var(--space-4);
}

.page-hero .eyebrow {
  color: var(--gold-500);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: var(--text-xs);
  font-family: var(--font-heading);
  letter-spacing: 0;
}

/* UAE DS H2 (mobile) -> H1 (lg+) per major-third scale */
.page-hero h1 {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: 1.15;
  font-weight: 700;
  margin: 0;
  color: var(--cream-50);
  letter-spacing: 0;
}
@media (min-width: 768px) {
  .page-hero h1 { font-size: var(--text-h2); }
}
@media (min-width: 1280px) {
  .page-hero h1 { font-size: var(--text-h1); }
}

.page-hero p.lead {
  font-size: var(--text-lg);
  max-width: 680px;
  line-height: 1.75rem;
  color: rgba(251, 250, 246, 0.86);
  margin: 0;
}

.page-hero .crumbs {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: rgba(251, 250, 246, 0.7);
  flex-wrap: wrap;
}

.page-hero .crumbs a {
  color: var(--gold-500);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.page-section {
  padding: var(--space-20) var(--space-8);
  background: var(--cream-100);
}

.globe-fallback-panel {
  position: absolute;
  inset: auto 1.25rem 1.25rem 1.25rem;
  display: grid;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(251, 250, 246, 0.2);
  border-radius: 0.8rem;
  background: rgba(5, 28, 30, 0.72);
  color: var(--cream-50);
  backdrop-filter: blur(12px);
}

.globe-fallback-panel strong {
  font-family: var(--font-heading);
  color: var(--gold-500);
}

.globe-fallback-panel span {
  font-size: var(--text-sm);
  color: rgba(251, 250, 246, 0.82);
}
@media (min-width: 768px) {
  .page-section { padding: var(--space-24) var(--space-8); }
}

.page-section.alt {
  background: var(--cream-50);
}

.page-section .section-inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  display: grid;
  gap: var(--space-8);
}

/* UAE DS heading scale: H4 mobile -> H3 md -> H2 lg */
.page-section h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 var(--space-4);
  line-height: 1.2;
  letter-spacing: 0;
}
@media (min-width: 768px) { .page-section h2 { font-size: var(--text-h3); } }
@media (min-width: 1024px) { .page-section h2 { font-size: var(--text-h2); } }

.page-section h3 {
  font-family: var(--font-heading);
  font-size: var(--text-h6);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 var(--space-3);
  line-height: 1.3;
}
@media (min-width: 768px) { .page-section h3 { font-size: var(--text-h5); } }
@media (min-width: 1024px) { .page-section h3 { font-size: var(--text-h4); } }

.page-section p {
  /* UAE DS spec: text-base = 1rem / line-height 1.5rem (24px) */
  font-size: var(--text-base);
  color: var(--ink-600);
  line-height: 1.5rem;
}

.page-section .eyebrow {
  color: var(--gold-600) !important;
  letter-spacing: 0 !important;
}

.page-section .donation-copy h2,
.page-section .impact-copy h2,
.page-section .gift-copy h2 {
  color: var(--ink-900);
}

.page-section .donation-copy p,
.page-section .impact-copy p,
.page-section .gift-copy p {
  color: var(--ink-600);
}
/* Slightly looser for long Arabic paragraphs at md+ for readability */
@media (min-width: 768px) {
  .page-section p { line-height: 1.625rem; }
}

/* UAE DS responsive grids: mobile-first; breakpoints sm 640 / md 768 / lg 1024 */
.page-grid-2 { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
.page-grid-3 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
.page-grid-4 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .page-grid-2 { grid-template-columns: 1fr 1fr; }
  .page-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .page-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .page-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.policy-card,
.surface-card,
.contact-card,
.report-row {
  background: var(--cream-50);
  border: 1px solid rgba(19, 19, 22, 0.08);
  border-radius: 1.25rem;
  padding: var(--space-8); /* 32px - UAE DS spacing */
  box-shadow: var(--shadow-md);
  display: grid;
  gap: var(--space-3);
}

.policy-card .icon-pill {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--teal-900);
  color: var(--gold-500);
  font-weight: 800;
  font-size: 1rem;
}

.report-row {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.report-row .meta {
  font-size: 0.85rem;
  color: var(--ink-600);
}

.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* UAE DS spacing 14/24 */
  padding: var(--space-3-5) var(--space-6);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-base);
  line-height: 1.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
  text-decoration: none;
}

.btn-primary {
  background: var(--green-600);
  color: var(--cream-50);
}

.btn-primary:hover { transform: translateY(-2px); background: var(--green-700); }

.btn-ghost {
  background: transparent;
  border-color: rgba(19, 19, 22, 0.16);
  color: var(--ink-900);
}

.btn-ghost:hover { background: rgba(19, 19, 22, 0.06); }

.cta-band .btn-ghost {
  border-color: rgba(251, 250, 246, 0.32);
  color: var(--cream-50);
}

.cta-band .btn-ghost:hover {
  background: rgba(251, 250, 246, 0.12);
}

.split-bar {
  display: grid;
  gap: var(--space-3);
}

.split-bar .row {
  display: grid;
  gap: var(--space-2);
}

.split-bar .row .label {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
  color: var(--ink-800);
}

.split-bar .row .label strong {
  font-size: 1.2rem;
  color: var(--ink-900);
}

.split-bar .row .track {
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(19, 19, 22, 0.06);
  overflow: hidden;
}

.split-bar .row .track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-500), var(--green-600));
}

.asnaf-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.asnaf-card {
  background: var(--cream-50);
  border: 1px solid rgba(19, 19, 22, 0.08);
  border-radius: 1rem;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.asnaf-card span.num {
  font-weight: 800;
  color: var(--gold-600);
  font-size: 0.85rem;
  letter-spacing: 0;
}

.contact-card .channel {
  font-weight: 700;
  color: var(--ink-900);
}

.contact-card .value {
  font-family: ui-monospace, "SFMono-Regular", monospace;
  font-size: 0.95rem;
  color: var(--teal-700);
  direction: ltr;
  text-align: start;
}

.success-block {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6rem var(--space-7);
  min-height: 60vh;
  background: var(--cream-100);
}

.success-block .check {
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  background: var(--green-600);
  color: var(--cream-50);
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  margin: 0 auto var(--space-5);
}

.news-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.news-card {
  background: var(--cream-50);
  border-radius: 1.25rem;
  overflow: hidden;
  display: grid;
  border: 1px solid rgba(19, 19, 22, 0.08);
  transition: transform 200ms var(--ease-out);
}

.news-card:hover { transform: translateY(-3px); }

.news-card img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.news-card .body {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-2);
}

.news-card .meta { font-size: 0.78rem; color: var(--ink-600); letter-spacing: 0; }

.form-stack {
  display: grid;
  gap: var(--space-4);
}

.form-stack label {
  font-weight: 600;
  color: var(--ink-800);
  font-size: 0.95rem;
}

.form-stack input,
.form-stack select,
.form-stack textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-control);
  border: 1px solid rgba(19, 19, 22, 0.16);
  background: var(--cream-50);
  color: var(--ink-900);
  font-family: inherit;
}

.form-stack textarea { min-height: 8rem; resize: vertical; }

.cta-band {
  padding: var(--space-16) var(--space-8); /* 64 / 32 */
  background: var(--ink-900);
  color: var(--cream-50);
  text-align: center;
}

.cta-band h2 { color: var(--cream-50); }
.cta-band p { color: rgba(251, 250, 246, 0.72); }

.cta-band .row {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* ===== Live Monitor Web App ===== */
.monitor-page {
  --monitor-accent: var(--gold-500);
  background:
    linear-gradient(180deg, rgba(10, 50, 54, 0.06), transparent 36rem),
    var(--cream-100);
}

.monitor-header .header-action {
  background: rgba(251, 250, 246, 0.12);
  color: var(--cream-50);
}

.monitor-hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 0.58fr);
  align-items: end;
  gap: var(--space-8);
  padding: 11rem var(--page-gutter) var(--space-10);
  overflow: hidden;
  background: var(--teal-900);
  color: var(--cream-50);
}

.monitor-hero-media,
.monitor-hero-media img,
.monitor-hero-shade,
.monitor-grid-glow {
  position: absolute;
  inset: 0;
}

.monitor-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
  opacity: 0.72;
}

.monitor-hero-shade {
  background:
    linear-gradient(90deg, rgba(10, 50, 54, 0.92), rgba(10, 50, 54, 0.62) 46%, rgba(10, 50, 54, 0.2)),
    linear-gradient(0deg, rgba(10, 50, 54, 0.88), transparent 54%);
}

.monitor-grid-glow {
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(251, 250, 246, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 250, 246, 0.1) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
}

.monitor-hero-content,
.live-console {
  position: relative;
  z-index: 2;
}

.monitor-hero-content {
  max-width: 48rem;
  display: grid;
  gap: var(--space-5);
}

.monitor-hero-content h1 {
  margin: 0;
  color: var(--cream-50);
  font-size: clamp(3rem, 7vw, 6.9rem);
  line-height: 1.02;
}

.monitor-hero-content p {
  max-width: 42rem;
  margin: 0;
  color: rgba(251, 250, 246, 0.82);
  font-size: var(--text-lg);
}

.monitor-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.live-console {
  align-self: end;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-5);
  border: 1px solid rgba(251, 250, 246, 0.18);
  border-radius: var(--radius-md);
  background: rgba(251, 250, 246, 0.12);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.console-topline,
.case-progress-row,
.case-action-row,
.wallet-bars > div > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.console-topline small {
  color: rgba(251, 250, 246, 0.68);
}

.live-dot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 999px;
  background: #E3C15A;
  box-shadow: 0 0 0 0.45rem rgba(227, 193, 90, 0.12);
}

.console-metrics {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, 1fr);
}

.console-metrics article {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: rgba(251, 250, 246, 0.12);
}

.console-metrics span {
  color: rgba(251, 250, 246, 0.68);
  font-size: var(--text-xs);
}

.console-metrics b {
  font-size: var(--text-2xl);
  color: var(--cream-50);
}

.signal-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: var(--space-2);
  height: 4.5rem;
}

.signal-bars span {
  border-radius: 999px 999px var(--radius-sm) var(--radius-sm);
  background: linear-gradient(180deg, var(--gold-500), rgba(251, 250, 246, 0.25));
  animation: monitor-signal 1.45s var(--ease-out) infinite;
}

.signal-bars span:nth-child(1) { height: 36%; animation-delay: 60ms; }
.signal-bars span:nth-child(2) { height: 72%; animation-delay: 120ms; }
.signal-bars span:nth-child(3) { height: 48%; animation-delay: 180ms; }
.signal-bars span:nth-child(4) { height: 86%; animation-delay: 240ms; }
.signal-bars span:nth-child(5) { height: 58%; animation-delay: 300ms; }

.monitor-tabs {
  position: sticky;
  top: 5rem;
  z-index: 740;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--page-gutter);
  background: rgba(248, 246, 240, 0.88);
  border-block-end: 1px solid rgba(19, 19, 22, 0.08);
  backdrop-filter: blur(16px);
}

.monitor-tabs a,
.radar-filters button,
.shipment-button,
.triage-types button {
  border: 1px solid rgba(19, 19, 22, 0.08);
  border-radius: var(--radius-md);
  background: var(--cream-50);
  color: var(--ink-900);
  text-decoration: none;
}

.monitor-tabs a {
  min-height: 2.7rem;
  display: inline-grid;
  place-items: center;
  padding: 0 var(--space-4);
  font-weight: 800;
}

.monitor-tabs a:hover,
.monitor-tabs a:focus-visible {
  background: var(--teal-800);
  color: var(--cream-50);
}

.monitor-radar-layout,
.monitor-tracking-grid,
.wallet-layout,
.aid-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(22rem, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.radar-filters,
.triage-types {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.radar-filters button,
.triage-types button {
  min-height: 4.5rem;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-1);
  text-align: start;
  cursor: pointer;
}

.radar-filters button.active,
.triage-types button:hover,
.triage-types button:focus-visible {
  border-color: rgba(31, 123, 130, 0.28);
  background: rgba(31, 123, 130, 0.09);
}

.radar-filters b {
  color: var(--gold-600);
}

.radar-stage {
  position: relative;
  min-height: 37rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(19, 19, 22, 0.08);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(10, 50, 54, 0.96), rgba(16, 74, 79, 0.88)),
    var(--teal-900);
  overflow: hidden;
  color: var(--cream-50);
}

.radar-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.92;
}

.radar-webgl {
  width: 100%;
  height: 100%;
  display: block;
}

.radar-rings {
  position: absolute;
  inset: var(--space-8);
  z-index: 1;
  display: grid;
  place-items: center;
}

.radar-rings > span {
  position: absolute;
  border: 1px solid rgba(251, 250, 246, 0.18);
  border-radius: 999px;
}

.radar-rings > span:nth-child(1) { width: 92%; height: 92%; }
.radar-rings > span:nth-child(2) { width: 66%; height: 66%; }
.radar-rings > span:nth-child(3) { width: 38%; height: 38%; }

.radar-sweep {
  position: absolute;
  width: 50%;
  height: 2px;
  inset-inline-start: 50%;
  top: 50%;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--monitor-accent), transparent);
  animation: radar-sweep 4.8s linear infinite;
}

.radar-pin {
  position: absolute;
  width: 1.35rem;
  height: 1.35rem;
  border: 2px solid rgba(251, 250, 246, 0.9);
  border-radius: 999px;
  background: var(--monitor-accent);
  cursor: pointer;
  box-shadow: 0 0 0 0.5rem rgba(251, 250, 246, 0.08);
}

.radar-pin.is-active {
  transform: scale(1.28);
  box-shadow: 0 0 0 0.8rem rgba(200, 169, 58, 0.16);
}

.pin-food { top: 22%; right: 31%; }
.pin-water { top: 55%; left: 20%; }
.pin-shelter { bottom: 22%; right: 20%; }
.pin-medical { top: 35%; left: 37%; }
.pin-housing { bottom: 29%; left: 31%; }

.radar-readout {
  position: relative;
  z-index: 2;
  width: min(26rem, calc(100% - var(--space-8)));
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid rgba(251, 250, 246, 0.2);
  border-radius: var(--radius-md);
  background: rgba(251, 250, 246, 0.12);
  backdrop-filter: blur(14px);
}

.radar-readout h3,
.shipment-detail h3,
.monitor-case-body h3,
.wallet-card-app h2,
.impact-drawer-panel h2 {
  margin: 0;
  color: inherit;
}

.radar-readout p,
.shipment-detail p,
.monitor-case-body p,
.wallet-card-app p {
  margin: 0;
}

.radar-readout dl,
.shipment-detail dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin: 0;
}

.radar-readout div,
.shipment-detail dl > div {
  display: grid;
  gap: var(--space-1);
}

.radar-readout dt,
.shipment-detail dt {
  color: rgba(251, 250, 246, 0.62);
  font-size: var(--text-xs);
}

.radar-readout dd,
.shipment-detail dd {
  margin: 0;
  font-weight: 900;
}

.monitor-case-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.monitor-case-card,
.wallet-card-app,
.impact-steps article,
.aid-panel,
.shipment-detail {
  border: 1px solid rgba(19, 19, 22, 0.08);
  border-radius: var(--radius-md);
  background: var(--cream-50);
  box-shadow: 0 1rem 2rem rgba(19, 19, 22, 0.08);
}

.monitor-case-card {
  overflow: hidden;
  display: grid;
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}

.monitor-case-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.monitor-case-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.monitor-case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.monitor-case-media span {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  background: rgba(10, 50, 54, 0.86);
  color: var(--cream-50);
  font-size: var(--text-xs);
  font-weight: 900;
}

.monitor-case-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
}

.monitor-case-body h3 {
  color: var(--ink-900);
  line-height: 1.35;
}

.monitor-case-body p,
.wallet-card-app p,
.impact-steps p,
.aid-result {
  color: var(--ink-600);
}

.case-progress-row {
  align-items: start;
  color: var(--ink-600);
  font-size: var(--text-xs);
}

.case-progress-row b {
  display: block;
  color: var(--ink-900);
  font-size: var(--text-sm);
}

.monitor-progress {
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(19, 19, 22, 0.08);
  overflow: hidden;
}

.monitor-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal-500), var(--gold-500));
}

.case-supply-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.case-supply-list small {
  padding: var(--space-2) var(--space-3);
  border-radius: 999px;
  background: rgba(31, 123, 130, 0.08);
  color: var(--teal-800);
  font-weight: 800;
}

.case-action-row button,
.shipment-button {
  min-height: 2.8rem;
  padding: 0 var(--space-4);
  cursor: pointer;
  font-weight: 900;
}

.case-action-row button:first-child {
  border: 0;
  border-radius: var(--radius-md);
  background: var(--green-600);
  color: var(--cream-50);
}

.case-action-row button:last-child {
  border: 1px solid rgba(19, 19, 22, 0.12);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--ink-900);
}

.shipment-list {
  display: grid;
  gap: var(--space-3);
}

.shipment-button {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  text-align: start;
}

.shipment-button span {
  color: var(--gold-600);
  font-weight: 900;
}

.shipment-button small {
  color: var(--ink-600);
}

.shipment-button.is-active {
  background: var(--teal-800);
  color: var(--cream-50);
}

.shipment-button.is-active span,
.shipment-button.is-active small {
  color: rgba(251, 250, 246, 0.76);
}

.shipment-detail {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
  color: var(--ink-900);
}

.shipment-detail dt {
  color: var(--ink-400);
}

.monitor-route {
  margin-top: 0;
}

.wallet-layout {
  align-items: stretch;
}

.wallet-card-app {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6);
}

.wallet-bars {
  display: grid;
  gap: var(--space-4);
}

.wallet-bars > div {
  display: grid;
  gap: var(--space-2);
}

.wallet-bars span {
  color: var(--ink-600);
}

.wallet-bars b {
  color: var(--ink-900);
}

.impact-steps {
  display: grid;
  gap: var(--space-4);
}

.impact-steps article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  padding: var(--space-5);
}

.impact-steps article > span {
  width: 2.8rem;
  height: 2.8rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(19, 19, 22, 0.08);
  color: var(--ink-900);
  font-weight: 900;
}

.impact-steps article.is-active > span {
  background: var(--teal-800);
  color: var(--cream-50);
}

.impact-steps h3,
.impact-steps p {
  margin: 0;
}

.aid-panel {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
}

.aid-panel label {
  display: grid;
  gap: var(--space-2);
  color: var(--ink-800);
  font-weight: 800;
}

.aid-panel input,
.aid-panel select {
  width: 100%;
  min-height: 3.2rem;
  padding: 0 var(--space-4);
  border: 1px solid rgba(19, 19, 22, 0.14);
  border-radius: var(--radius-md);
  background: var(--cream-100);
  color: var(--ink-900);
}

.aid-result {
  display: grid;
  gap: var(--space-2);
  min-height: 6rem;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(18, 82, 92, 0.1);
}

.aid-result strong {
  color: var(--green-700);
}

.triage-types button span {
  color: var(--ink-600);
  font-size: var(--text-sm);
}

.impact-drawer {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: grid;
  place-items: end center;
  padding: var(--space-4);
  background: rgba(10, 50, 54, 0);
  pointer-events: none;
  transition: background-color 240ms var(--ease-out);
}

.impact-drawer[hidden] {
  display: none;
}

.impact-drawer.is-open {
  background: rgba(10, 50, 54, 0.72);
  pointer-events: auto;
}

.impact-drawer-panel {
  position: relative;
  width: min(34rem, 100%);
  display: grid;
  gap: var(--space-5);
  padding: var(--space-7);
  border-radius: var(--radius-md);
  background: var(--cream-50);
  box-shadow: var(--shadow-lg);
  transform: translateY(2rem);
  opacity: 0;
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
}

.impact-drawer.is-open .impact-drawer-panel {
  transform: translateY(0);
  opacity: 1;
}

.drawer-impact-summary {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: rgba(31, 123, 130, 0.08);
  color: var(--ink-600);
}

.drawer-impact-summary strong {
  color: var(--ink-900);
}

@keyframes monitor-signal {
  0%, 100% { transform: scaleY(0.72); opacity: 0.58; }
  50% { transform: scaleY(1); opacity: 1; }
}

@keyframes radar-sweep {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .signal-bars span,
  .radar-sweep,
  .ambient-field span,
  .tech-monitor::before,
  .tech-monitor::after,
  .tech-monitor .monitor-grid-glow,
  .tech-monitor .section-block::before,
  .globe-control-panel::after,
  .globe-stage-card::after,
  .destination-summary::after,
  .opportunity-card::after,
  .project-list-item::before,
  .portal-track-card::after,
  .destination-button::after,
  .globe-stage::before,
  .opportunity-card::before,
  .xp-meter span,
  .tech-monitor .opportunity-card .monitor-progress span::after,
  .project-list-progress span::after,
  .stage-loader span::before {
    animation: none;
  }
}

/* ===== Tech HUD Variant ===== */
.site-menu a[href="live-monitor.html"] {
  position: relative;
  border: 1px solid rgba(200, 169, 58, 0.28);
  background: rgba(200, 169, 58, 0.12);
  color: var(--cream-50);
}

.site-menu a[href="live-monitor.html"]::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--gold-500);
  box-shadow: 0 0 1rem rgba(200, 169, 58, 0.8);
}

.tech-monitor {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(55, 225, 214, 0.14), transparent 20rem),
    radial-gradient(circle at 84% 20%, rgba(200, 169, 58, 0.16), transparent 22rem),
    linear-gradient(180deg, #041316, #081f23 48rem, #071619);
  color: rgba(251, 250, 246, 0.88);
}

.ambient-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.95;
}

.hotline-strip,
.site-header,
.tech-monitor main,
.action-dock,
.impact-drawer {
  position: relative;
  z-index: 1;
}

.ambient-field span {
  position: absolute;
  width: 56rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(55, 225, 214, 0.62), rgba(200, 169, 58, 0.28), transparent);
  opacity: 0.72;
  filter: drop-shadow(0 0 0.8rem rgba(55, 225, 214, 0.42));
  transform: rotate(-14deg);
  animation: ambient-line-pass 9s linear infinite;
}

.ambient-field span:nth-child(1) {
  inset-block-start: 15%;
  inset-inline-start: -22rem;
}

.ambient-field span:nth-child(2) {
  inset-block-start: 37%;
  inset-inline-start: -30rem;
  animation-delay: -4s;
  animation-duration: 16s;
}

.ambient-field span:nth-child(3) {
  inset-block-start: 62%;
  inset-inline-start: -18rem;
  animation-delay: -8s;
  animation-duration: 14s;
}

.ambient-field span:nth-child(4) {
  inset-block-start: 82%;
  inset-inline-start: -28rem;
  animation-delay: -11s;
  animation-duration: 18s;
}

@keyframes ambient-line-pass {
  from {
    translate: -8vw 0;
    opacity: 0;
  }

  12% {
    opacity: 0.44;
  }

  72% {
    opacity: 0.3;
  }

  to {
    translate: 128vw 0;
    opacity: 0;
  }
}

@supports selector(html:has(body)) {
  html:has(body.tech-monitor) {
    background: #071619;
  }
}

.tech-monitor::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(251, 250, 246, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 250, 246, 0.04) 1px, transparent 1px);
  background-size: 2.25rem 2.25rem;
  mask-image: linear-gradient(180deg, #000, transparent 82%);
  animation: monitor-grid-drift 20s linear infinite;
}

.tech-monitor::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2400;
  pointer-events: none;
  opacity: 0.12;
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(251, 250, 246, 0.28) 6px);
  mix-blend-mode: screen;
  animation: monitor-scan-pulse 5.5s ease-in-out infinite;
}

@keyframes monitor-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 2.25rem 2.25rem, 2.25rem 2.25rem; }
}

@keyframes monitor-scan-pulse {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 0.16; }
}

.tech-monitor .hotline-strip {
  background: #020b0d;
  color: rgba(251, 250, 246, 0.78);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0;
}

.tech-monitor .site-header {
  border-block-end: 1px solid rgba(55, 225, 214, 0.16);
  background: rgba(2, 11, 13, 0.66);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.tech-monitor .site-header.is-scrolled {
  background: rgba(2, 11, 13, 0.9);
}

.tech-monitor .site-menu a {
  color: rgba(251, 250, 246, 0.78);
}

.tech-monitor .site-menu a:hover,
.tech-monitor .site-menu a:focus-visible {
  color: var(--cream-50);
  background: rgba(55, 225, 214, 0.12);
}

.tech-monitor .monitor-hero {
  min-height: 96vh;
  background:
    radial-gradient(circle at 50% 50%, rgba(55, 225, 214, 0.1), transparent 24rem),
    #041316;
}

.tech-monitor .monitor-hero::before,
.tech-monitor .monitor-hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 7rem;
  height: 7rem;
  pointer-events: none;
}

.tech-monitor .monitor-hero::before {
  inset-block-start: 8.6rem;
  inset-inline-start: var(--page-gutter);
  border-block-start: 2px solid rgba(55, 225, 214, 0.72);
  border-inline-start: 2px solid rgba(55, 225, 214, 0.72);
}

.tech-monitor .monitor-hero::after {
  inset-block-end: var(--space-8);
  inset-inline-end: var(--page-gutter);
  border-block-end: 2px solid rgba(200, 169, 58, 0.8);
  border-inline-end: 2px solid rgba(200, 169, 58, 0.8);
}

.tech-monitor .monitor-hero-media img {
  opacity: 0.45;
  filter: saturate(0.75) contrast(1.15) brightness(0.7);
}

.tech-monitor .monitor-hero-shade {
  background:
    linear-gradient(90deg, rgba(2, 11, 13, 0.96), rgba(4, 19, 22, 0.72) 48%, rgba(4, 19, 22, 0.34)),
    radial-gradient(circle at 75% 48%, rgba(55, 225, 214, 0.16), transparent 20rem);
}

.tech-monitor .monitor-grid-glow {
  opacity: 0.7;
  background-image:
    linear-gradient(rgba(55, 225, 214, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 225, 214, 0.13) 1px, transparent 1px);
  background-size: 3rem 3rem;
  animation: monitor-grid-drift 16s linear infinite;
}

.hud-status-row,
.keyboard-hints,
.hero-hud-stack,
.xp-console {
  position: relative;
  z-index: 2;
}

.hud-status-row,
.keyboard-hints {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hud-status-row span,
.keyboard-hints span {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid rgba(55, 225, 214, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(2, 11, 13, 0.52);
  color: rgba(251, 250, 246, 0.76);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--text-xs);
}

.keyboard-hints kbd,
.mission-card kbd {
  min-width: 1.65rem;
  height: 1.65rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(55, 225, 214, 0.16);
  color: #E3C15A;
  font: 800 0.78rem ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.tech-button {
  clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 0.9rem, 100% 100%, 0.9rem 100%, 0 calc(100% - 0.9rem));
  border-radius: var(--radius-sm);
}

.tech-monitor .ghost-button.tech-button {
  background: rgba(2, 11, 13, 0.64);
  border-color: rgba(55, 225, 214, 0.32);
  color: var(--cream-50);
}

.hero-hud-stack {
  display: grid;
  gap: var(--space-4);
}

.tech-monitor .live-console,
.xp-console,
.mission-card,
.tech-monitor .radar-stage,
.tech-monitor .monitor-case-card,
.tech-monitor .wallet-card-app,
.tech-monitor .impact-steps article,
.tech-monitor .aid-panel,
.tech-monitor .shipment-detail,
.tech-monitor .shipment-button {
  border-color: rgba(55, 225, 214, 0.16);
  background:
    linear-gradient(135deg, rgba(9, 37, 42, 0.92), rgba(2, 11, 13, 0.92)),
    #071619;
  color: rgba(251, 250, 246, 0.88);
  box-shadow:
    0 1.5rem 3rem rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(251, 250, 246, 0.035);
}

.tech-monitor .live-console,
.xp-console,
.mission-card {
  clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 1rem, 100% 100%, 1rem 100%, 0 calc(100% - 1rem));
}

.xp-console {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid rgba(55, 225, 214, 0.18);
}

.xp-console > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.xp-console span {
  color: rgba(251, 250, 246, 0.66);
}

.xp-console b {
  color: #E3C15A;
}

.xp-console small {
  color: rgba(251, 250, 246, 0.58);
}

.xp-meter {
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(251, 250, 246, 0.08);
  overflow: hidden;
}

.xp-meter span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #37e1d6, var(--gold-500), #f05b4f);
  box-shadow: 0 0 1.2rem rgba(55, 225, 214, 0.48);
  transition: width 260ms var(--ease-out);
  animation: meter-breathe 2.8s ease-in-out infinite;
}

@keyframes meter-breathe {
  0%, 100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.35);
  }
}

.tech-monitor .section-block {
  position: relative;
  overflow: hidden;
  background: transparent;
  color: rgba(251, 250, 246, 0.86);
}

.tech-monitor .section-block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(55, 225, 214, 0.08) 43%, transparent 44% 100%),
    linear-gradient(60deg, transparent 0 58%, color-mix(in srgb, var(--monitor-accent) 8%, transparent) 59%, transparent 60% 100%);
  background-size: 34rem 34rem, 42rem 42rem;
  opacity: 0.55;
  animation: section-signal-drift 18s linear infinite;
}

@keyframes section-signal-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 34rem 0, -42rem 0; }
}

.tech-monitor .section-heading h2,
.tech-monitor .monitor-case-body h3,
.tech-monitor .wallet-card-app h2,
.tech-monitor .impact-steps h3,
.tech-monitor .shipment-detail h3 {
  color: var(--cream-50);
}

.tech-monitor .section-heading p,
.tech-monitor .monitor-case-body p,
.tech-monitor .wallet-card-app p,
.tech-monitor .impact-steps p,
.tech-monitor .aid-result,
.tech-monitor .shipment-button small {
  color: rgba(251, 250, 246, 0.64);
}

.tech-monitor .monitor-tabs {
  top: 5rem;
  background: rgba(2, 11, 13, 0.86);
  border-block-color: rgba(55, 225, 214, 0.16);
}

.tech-monitor .monitor-tabs a,
.tech-monitor .radar-filters button,
.tech-monitor .triage-types button {
  border-color: rgba(55, 225, 214, 0.16);
  background: rgba(9, 37, 42, 0.86);
  color: rgba(251, 250, 246, 0.8);
}

.tech-monitor .monitor-tabs a:hover,
.tech-monitor .monitor-tabs a:focus-visible,
.tech-monitor .radar-filters button.active,
.tech-monitor .triage-types button:hover,
.tech-monitor .triage-types button:focus-visible {
  background: rgba(55, 225, 214, 0.14);
  color: var(--cream-50);
  border-color: rgba(55, 225, 214, 0.42);
  box-shadow: 0 0 1.4rem rgba(55, 225, 214, 0.12);
}

.mission-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.mission-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.mission-card {
  min-height: 14rem;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: start;
  cursor: pointer;
  overflow: hidden;
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.mission-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-inline-start: 0.35rem solid var(--mission-color);
  opacity: 0.9;
}

.mission-card::after {
  content: "";
  position: absolute;
  inset: auto var(--space-5) var(--space-4) var(--space-5);
  height: 2px;
  background: linear-gradient(90deg, var(--mission-color), transparent);
  opacity: 0.7;
}

.mission-card:hover,
.mission-card:focus-visible,
.mission-card.is-active {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--mission-color) 70%, white 10%);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.3), 0 0 1.8rem color-mix(in srgb, var(--mission-color) 28%, transparent);
}

.mission-card span,
.mission-card small {
  color: rgba(251, 250, 246, 0.58);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.mission-card h3,
.mission-card p,
.mission-card small {
  grid-column: 1 / -1;
  margin: 0;
}

.mission-card h3 {
  color: var(--cream-50);
  font-size: var(--text-xl);
}

.mission-card p {
  color: rgba(251, 250, 246, 0.66);
}

.tech-monitor .radar-stage {
  background:
    radial-gradient(circle at 50% 50%, rgba(55, 225, 214, 0.16), transparent 14rem),
    linear-gradient(135deg, rgba(9, 37, 42, 0.98), rgba(2, 11, 13, 0.98));
}

.tech-monitor .radar-rings > span {
  border-color: rgba(55, 225, 214, 0.2);
  box-shadow: inset 0 0 1.8rem rgba(55, 225, 214, 0.06);
}

.tech-monitor .radar-readout {
  background: rgba(2, 11, 13, 0.68);
  border-color: rgba(55, 225, 214, 0.22);
}

.tech-monitor .monitor-case-card {
  clip-path: polygon(0 0, calc(100% - 0.85rem) 0, 100% 0.85rem, 100% 100%, 0 100%);
}

.tech-monitor .monitor-case-media {
  border-block-end: 1px solid rgba(55, 225, 214, 0.16);
}

.tech-monitor .monitor-case-media img {
  filter: saturate(0.92) contrast(1.08) brightness(0.82);
}

.tech-monitor .monitor-case-media span {
  background: rgba(2, 11, 13, 0.84);
  border: 1px solid rgba(55, 225, 214, 0.22);
}

.tech-monitor .case-supply-list small,
.tech-monitor .shipment-button span {
  background: rgba(55, 225, 214, 0.08);
  color: #E3C15A;
}

.tech-monitor .case-action-row button:first-child {
  background: linear-gradient(90deg, var(--monitor-accent, var(--green-600)), #37e1d6);
  color: #031113;
}

.tech-monitor .case-action-row button:last-child {
  border-color: rgba(251, 250, 246, 0.18);
  color: var(--cream-50);
}

.tech-monitor .shipment-button.is-active {
  background: rgba(55, 225, 214, 0.14);
  border-color: rgba(55, 225, 214, 0.42);
}

.tech-monitor .shipment-detail dt,
.tech-monitor .radar-readout dt,
.tech-monitor .wallet-bars span,
.tech-monitor .triage-types button span {
  color: rgba(251, 250, 246, 0.58);
}

.tech-monitor .shipment-detail dd,
.tech-monitor .wallet-bars b {
  color: var(--cream-50);
}

.tech-monitor .aid-panel input,
.tech-monitor .aid-panel select {
  border-color: rgba(55, 225, 214, 0.18);
  background: rgba(2, 11, 13, 0.72);
  color: var(--cream-50);
}

.tech-monitor .aid-result {
  background: rgba(55, 225, 214, 0.1);
  border: 1px solid rgba(55, 225, 214, 0.18);
}

.tech-monitor .aid-result strong {
  color: #E3C15A;
}

.tech-monitor .impact-drawer-panel {
  background: #061b1f;
  color: var(--cream-50);
  border: 1px solid rgba(55, 225, 214, 0.22);
}

.tech-monitor .drawer-impact-summary {
  background: rgba(55, 225, 214, 0.09);
  color: rgba(251, 250, 246, 0.66);
}

.tech-monitor .drawer-impact-summary strong {
  color: var(--cream-50);
}

.globe-experience-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  align-items: stretch;
}

[data-experience-shell]:not(.has-track) .globe-stage-card,
.tech-monitor:not(.monitor-has-destination) .opportunity-block {
  display: none;
}

[data-experience-shell].has-track .globe-control-panel {
  display: none;
}

.globe-control-panel,
.globe-stage-card,
.destination-summary,
.opportunity-card {
  position: relative;
  border: 1px solid rgba(55, 225, 214, 0.16);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(9, 37, 42, 0.92), rgba(2, 11, 13, 0.92)),
    #071619;
  color: rgba(251, 250, 246, 0.88);
  box-shadow:
    0 1.5rem 3rem rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(251, 250, 246, 0.035);
}

.globe-control-panel::after,
.globe-stage-card::after,
.destination-summary::after,
.opportunity-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--monitor-accent) 22%, transparent), transparent) 0 0 / 220% 1px no-repeat,
    linear-gradient(180deg, transparent, rgba(55, 225, 214, 0.18), transparent) 100% 0 / 1px 220% no-repeat;
  opacity: 0.68;
  animation: panel-current 5.6s linear infinite;
}

@keyframes panel-current {
  from {
    background-position: -120% 0, 100% -120%;
  }

  to {
    background-position: 220% 0, 100% 220%;
  }
}

.globe-control-panel,
.globe-stage-card,
.destination-summary,
.opportunity-card {
  padding: var(--space-5);
}

.portal-track-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.portal-track-card {
  position: relative;
  min-height: 8.8rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid rgba(55, 225, 214, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(2, 11, 13, 0.42);
  color: rgba(251, 250, 246, 0.86);
  text-align: start;
  cursor: pointer;
  overflow: hidden;
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.portal-track-card::after,
.destination-button::after {
  content: "";
  position: absolute;
  inset: auto var(--space-4) var(--space-3) var(--space-4);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--track-color, var(--monitor-accent)), transparent);
  opacity: 0.34;
  transform-origin: center;
  animation: control-pulse 2.9s ease-in-out infinite;
}

@keyframes control-pulse {
  0%, 100% {
    scale: 0.58 1;
    opacity: 0.18;
  }

  50% {
    scale: 1 1;
    opacity: 0.62;
  }
}

.portal-track-card::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0.32rem;
  background: var(--track-color);
}

.portal-track-card:hover,
.portal-track-card:focus-visible,
.portal-track-card.is-active {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--track-color) 70%, white 10%);
  box-shadow: 0 0 1.6rem color-mix(in srgb, var(--track-color) 24%, transparent);
}

.portal-track-card span,
.portal-track-card small {
  color: rgba(251, 250, 246, 0.58);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.portal-track-card kbd {
  min-width: 1.65rem;
  height: 1.65rem;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--track-color) 22%, transparent);
  color: var(--cream-50);
  font: 800 0.78rem ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.portal-track-card h3,
.portal-track-card p,
.portal-track-card small {
  grid-column: 1 / -1;
  margin: 0;
}

.portal-track-card h3 {
  color: var(--cream-50);
}

.portal-track-card p {
  color: rgba(251, 250, 246, 0.66);
  line-height: 1.8;
}

.portal-track-card.is-compact {
  min-height: 3.2rem;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 0 var(--space-3);
}

.portal-track-card.is-compact::before {
  width: 0.22rem;
}

.portal-track-card.is-compact span {
  display: none;
}

.portal-track-card.is-compact h3 {
  grid-column: auto;
  font-size: var(--text-sm);
}

.portal-track-card.is-compact kbd {
  min-width: 1.45rem;
  height: 1.45rem;
  font-size: 0.68rem;
}

.globe-stage-card {
  display: grid;
  gap: var(--space-4);
  min-height: 45rem;
  scroll-margin-top: 6.8rem;
}

.globe-stage-topline {
  position: sticky;
  top: 5.4rem;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid rgba(55, 225, 214, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(2, 11, 13, 0.9);
  backdrop-filter: blur(14px);
  color: rgba(251, 250, 246, 0.68);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.track-rail {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}

.globe-stage-topline button,
.globe-back-button {
  min-height: 2.35rem;
  padding: 0 var(--space-3);
  border: 1px solid rgba(55, 225, 214, 0.22);
  border-radius: var(--radius-sm);
  background: rgba(55, 225, 214, 0.1);
  color: var(--cream-50);
  cursor: pointer;
}

.globe-back-button[hidden] {
  display: none;
}

.globe-stage {
  position: relative;
  min-height: 30rem;
  border: 1px solid rgba(55, 225, 214, 0.16);
  border-radius: var(--radius-md);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--monitor-accent) 16%, transparent), transparent 15rem),
    linear-gradient(135deg, rgba(2, 11, 13, 0.96), rgba(9, 37, 42, 0.96));
  overflow: hidden;
}

[data-experience-shell].is-zooming .globe-stage {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--monitor-accent) 35%, transparent),
    0 0 4rem color-mix(in srgb, var(--monitor-accent) 22%, transparent);
}

.globe-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(55, 225, 214, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 225, 214, 0.08) 1px, transparent 1px);
  background-size: 2.4rem 2.4rem;
  opacity: 0.58;
  pointer-events: none;
  animation: globe-grid-pulse 4.6s ease-in-out infinite;
}

@keyframes globe-grid-pulse {
  0%, 100% {
    opacity: 0.34;
  }

  50% {
    opacity: 0.68;
  }
}

.stage-loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: var(--space-3);
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(2, 11, 13, 0.1), rgba(2, 11, 13, 0.58)),
    repeating-linear-gradient(90deg, transparent 0 1.2rem, rgba(55, 225, 214, 0.08) 1.25rem 1.32rem);
  transition: opacity 160ms var(--ease-out);
}

.stage-loader span {
  width: min(68%, 24rem);
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(251, 250, 246, 0.1);
  overflow: hidden;
}

.stage-loader span::before {
  content: "";
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--monitor-accent), #37e1d6);
  animation: loader-scan 1.1s ease-in-out infinite;
}

.stage-loader b {
  color: color-mix(in srgb, var(--monitor-accent) 70%, white 24%);
  font: 800 0.8rem ui-monospace, "SFMono-Regular", Menlo, monospace;
}

[data-experience-shell].is-loading-globe .stage-loader {
  opacity: 1;
}

@keyframes loader-scan {
  0% { transform: translateX(150%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(-150%); }
}

.zoom-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  color: var(--cream-50);
  text-align: center;
  transition: opacity 180ms var(--ease-out);
}

.zoom-overlay::before,
.zoom-overlay::after {
  content: "";
  position: absolute;
  width: min(56vw, 22rem);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--monitor-accent) 65%, white 8%);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.58);
}

.zoom-overlay::after {
  width: min(72vw, 30rem);
  animation-delay: 140ms;
}

.zoom-overlay span,
.zoom-overlay b {
  position: relative;
  z-index: 1;
  display: block;
  text-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.7);
}

.zoom-overlay span {
  color: color-mix(in srgb, var(--monitor-accent) 72%, white 24%);
  font: 800 0.74rem ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.zoom-overlay b {
  margin-top: var(--space-2);
  font-size: clamp(1.4rem, 4vw, 2.9rem);
}

[data-experience-shell].is-zooming .zoom-overlay {
  opacity: 1;
}

[data-experience-shell].is-zooming .zoom-overlay::before,
[data-experience-shell].is-zooming .zoom-overlay::after {
  animation: globe-zoom-ring 900ms var(--ease-out) both;
}

@keyframes globe-zoom-ring {
  0% {
    opacity: 0;
    transform: scale(0.58);
  }

  25% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

.globe-webgl {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}

.globe-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.globe-status-row small {
  color: color-mix(in srgb, var(--monitor-accent) 72%, white 20%);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  white-space: nowrap;
}

.globe-hint {
  margin: 0;
  color: rgba(251, 250, 246, 0.62);
}

.destination-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.destination-button {
  position: relative;
  min-height: 7rem;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid rgba(55, 225, 214, 0.16);
  border-radius: var(--radius-sm);
  background: rgba(2, 11, 13, 0.48);
  color: rgba(251, 250, 246, 0.86);
  text-align: start;
  cursor: pointer;
  overflow: hidden;
}

.destination-button:hover,
.destination-button:focus-visible,
.destination-button.is-active {
  border-color: color-mix(in srgb, var(--monitor-accent) 70%, white 10%);
  background: color-mix(in srgb, var(--monitor-accent) 14%, rgba(2, 11, 13, 0.7));
}

.destination-button span,
.destination-button small {
  color: rgba(251, 250, 246, 0.58);
}

.destination-button b {
  color: var(--cream-50);
  font-size: var(--text-lg);
}

.opportunity-layout {
  display: grid;
  grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.destination-summary {
  position: sticky;
  top: 8rem;
  display: grid;
  gap: var(--space-4);
}

.destination-summary h2,
.opportunity-card h3 {
  margin: 0;
  color: var(--cream-50);
}

.destination-summary dl {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.destination-summary div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid rgba(55, 225, 214, 0.14);
  border-radius: var(--radius-sm);
  background: rgba(55, 225, 214, 0.08);
}

.destination-summary dt {
  color: rgba(251, 250, 246, 0.56);
  font-size: var(--text-xs);
}

.destination-summary dd {
  margin: 0;
  color: var(--cream-50);
  font-weight: 800;
}

.opportunity-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.project-list-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(8rem, 0.22fr) minmax(9rem, 0.24fr);
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) 0;
  border-block-end: 1px solid rgba(55, 225, 214, 0.16);
  color: rgba(251, 250, 246, 0.86);
  overflow: hidden;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out), background 180ms var(--ease-out);
}

.project-list-item:first-child {
  border-block-start: 1px solid rgba(55, 225, 214, 0.16);
}

.project-list-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.project-list-item:hover,
.project-list-item:focus-within {
  background: color-mix(in srgb, var(--monitor-accent) 8%, transparent);
}

.project-list-item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0.24rem;
  background:
    linear-gradient(180deg, transparent, var(--monitor-accent), transparent);
  opacity: 0.78;
  animation: list-current 2.8s ease-in-out infinite;
}

@keyframes list-current {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.9; }
}

.project-index {
  min-width: 2.2rem;
  height: 2.2rem;
  display: inline-grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--monitor-accent) 54%, transparent);
  border-radius: var(--radius-sm);
  color: color-mix(in srgb, var(--monitor-accent) 72%, white 20%);
  background: color-mix(in srgb, var(--monitor-accent) 12%, transparent);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.project-list-main {
  display: grid;
  gap: var(--space-1);
}

.project-list-main p,
.project-list-main span {
  margin: 0;
  color: rgba(251, 250, 246, 0.55);
}

.project-list-main p {
  font-size: var(--text-xs);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}

.project-list-main h3 {
  margin: 0;
  color: var(--cream-50);
  font-size: var(--text-xl);
}

.project-list-main span {
  line-height: 1.65;
}

.project-list-meta {
  display: grid;
  gap: var(--space-2);
  color: rgba(251, 250, 246, 0.58);
  font-size: var(--text-xs);
}

.project-list-meta span,
.project-list-meta b {
  display: block;
  color: var(--cream-50);
}

.project-list-progress {
  grid-column: 2 / 4;
  height: 0.45rem;
  border-radius: 999px;
  background: rgba(251, 250, 246, 0.08);
  overflow: hidden;
}

.project-list-progress span {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width 760ms var(--ease-out);
}

.project-list-progress span::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: 4rem;
  inset-inline-start: -4rem;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  animation: progress-sweep 2.4s ease-in-out infinite;
}

.project-list-actions {
  grid-row: 1 / 3;
  grid-column: 4;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.project-list-actions button,
.project-list-actions a {
  min-height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  text-align: center;
  text-decoration: none;
  line-height: 1.35;
  font-weight: 900;
  cursor: pointer;
}

.project-list-actions button {
  border: 0;
  background: linear-gradient(90deg, var(--monitor-accent), #37e1d6);
  color: #031113;
}

.project-list-actions a {
  border: 1px solid rgba(251, 250, 246, 0.18);
  color: var(--cream-50);
}

@keyframes progress-sweep {
  to {
    inset-inline-start: 100%;
  }
}

.opportunity-card p {
  margin: 0;
  color: rgba(251, 250, 246, 0.64);
}

@media (max-width: 1100px) {
  .mission-layout,
  .mission-board,
  .globe-experience-layout,
  .opportunity-layout {
    grid-template-columns: 1fr;
  }

  .portal-track-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .destination-summary {
    position: static;
  }

  .opportunity-grid {
    grid-template-columns: 1fr;
  }

  .project-list-item {
    grid-template-columns: auto minmax(0, 1fr) minmax(7rem, 0.22fr);
  }

  .project-list-progress {
    grid-column: 2 / 4;
  }

  .project-list-actions {
    grid-column: 2 / 4;
    grid-row: auto;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .tech-monitor .monitor-hero::before,
  .tech-monitor .monitor-hero::after {
    width: 4.5rem;
    height: 4.5rem;
  }

  .hud-status-row span,
  .keyboard-hints span {
    font-size: 0.68rem;
  }

  .mission-card {
    min-height: 12rem;
  }

  .globe-stage-card {
    min-height: auto;
    padding: var(--space-4);
  }

  .globe-stage {
    min-height: 24rem;
  }

  .portal-track-grid {
    grid-template-columns: 1fr;
  }

  .track-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .globe-stage-topline {
    align-items: stretch;
    flex-direction: column;
    top: 4.8rem;
  }

  .destination-list,
  .opportunity-grid {
    grid-template-columns: 1fr;
  }

  .globe-status-row {
    align-items: start;
    flex-direction: column;
  }

  .project-list-item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4) 0;
  }

  .project-list-meta,
  .project-list-progress,
  .project-list-actions {
    grid-column: 2;
  }

  .project-list-meta,
  .project-list-actions {
    grid-template-columns: 1fr 1fr;
  }

  .project-list-actions button,
  .project-list-actions a {
    min-height: 3.15rem;
  }

  .project-list-main h3 {
    font-size: var(--text-lg);
  }

  .destination-summary {
    gap: var(--space-3);
  }

  .destination-summary h2 {
    font-size: var(--text-2xl);
    line-height: 1.35;
  }

  .destination-summary dl {
    grid-template-columns: 1fr 1fr;
  }

  .destination-summary div {
    padding: var(--space-3);
  }

  .destination-summary dd {
    font-size: var(--text-sm);
    line-height: 1.6;
  }

  .tech-monitor .opportunity-block {
    padding-bottom: 10rem;
  }

  .tech-monitor .monitor-aid-block {
    padding-bottom: 9rem;
  }
}

@media (max-width: 1100px) {
  .monitor-hero,
  .monitor-radar-layout,
  .monitor-tracking-grid,
  .wallet-layout,
  .aid-layout {
    grid-template-columns: 1fr;
  }

  .monitor-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-console {
    width: min(100%, 42rem);
  }
}

@media (max-width: 767px) {
  .monitor-hero {
    min-height: auto;
    padding: 9rem var(--space-5) var(--space-8);
  }

  .monitor-hero-content h1 {
    font-size: 3.2rem;
  }

  .console-metrics,
  .monitor-case-grid,
  .radar-readout dl,
  .shipment-detail dl,
  .radar-filters,
  .triage-types {
    grid-template-columns: 1fr;
  }

  .monitor-tabs {
    justify-content: start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--space-5);
  }

  .monitor-tabs a {
    scroll-snap-align: start;
    white-space: nowrap;
  }

  .radar-stage {
    min-height: 31rem;
  }

  .case-action-row {
    display: grid;
  }

  .monitor-dock {
    display: inline-flex;
  }
}

@media (max-width: 767px) {
  /* mobile-first override per UAE DS */
  .page-hero { padding: 9rem var(--space-5) var(--space-12); }
  .page-section { padding: var(--space-16) var(--space-5); }
  .cta-band { padding: var(--space-12) var(--space-5); }
}




/* ========================================================================
   MOBILE & ANIMATION DYNAMIC OPTIMIZATIONS (V3.5 CODEX)
   ======================================================================== */

/* 1. Prevent Horizontal Overflow globally */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  /* overscroll-behavior intentionally left as default (auto) — locking it
     to 'none' here clashed with the root-scroller pattern and caused the
     touchpad wiggle. */
}

/* 2. Fluid Mobile Scaling for Containers */
@media (max-width: 768px) {
  .monitor-hero-content {
    padding: 1.5rem !important;
  }
  .globe-stage {
    min-height: 24rem !important;
  }
  .project-list-item {
    flex-direction: column;
    align-items: flex-start;
  }
  .project-list-item .project-list-actions {
    width: 100%;
    margin-top: 1rem;
    justify-content: stretch;
  }
  .project-list-item .project-list-actions button,
  .project-list-item .project-list-actions a {
    flex: 1;
    text-align: center;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hud-status-row, .console-metrics {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  /* Better touch targets for specific buttons found in audit */
  .need-cta, 
  .dest-drawer-link, 
  .cinematic-trigger,
  .brand-mark,
  button[data-reset-track] {
    min-height: 48px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Ensure the destination drawer does not cause horizontal scroll when closed */
  .dest-drawer {
    max-width: 100vw;
  }
  .dest-drawer-panel {
    max-width: 90vw; /* ensure it fits on screen when open */
  }

  /* Boost touch targets for main tracks */
  button, a, select, input {
    touch-action: manipulation;
  }
  .track-rail button {
    min-height: 48px; 
  }
}

/* 3. Reveal: one definition lives in v9-overrides.css (520ms, 14px), which
   loads after this sheet and was already the one the browser applied. The
   copy that stood here was removed on 2026-09-13. */

/* Ensure smooth modal/drawer interactions without jumping */
body.drawer-open {
  overflow: hidden;
}

/* ─── Crisis cards (2026-05-22 launch content) ─── */
.crisis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-block-end:28px}
@media (max-width:760px){.crisis-grid{grid-template-columns:1fr}}
.crisis-card{background:#fff;border:1px solid rgba(15,68,89,.10);border-radius:14px;padding:26px;position:relative;box-shadow:0 6px 28px -20px rgba(15,68,89,.25);direction:rtl;text-align:right;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.crisis-card:hover{transform:translateY(-2px);box-shadow:0 18px 44px -24px rgba(15,68,89,.32)}
.crisis-card::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:4px;background:linear-gradient(180deg,#12525C,#C9A227);border-radius:14px 0 0 14px}
.crisis-card__head{margin-block-end:18px}
.crisis-card__tag{display:inline-block;font-family:"Alexandria","Noto Kufi Arabic",sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.16em;color:#C9A227;text-transform:uppercase;margin-block-end:8px}
.crisis-card__head h2{font-family:"Alexandria","Noto Kufi Arabic",sans-serif;font-size:1.25rem;font-weight:700;color:#0F4459;line-height:1.3}
.crisis-card__meta{display:grid;grid-template-columns:1fr;gap:10px;margin-block-end:22px;padding-block-end:18px;border-block-end:1px dashed rgba(15,68,89,.14)}
.crisis-card__meta > div{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.crisis-card__meta dt{font-family:"Alexandria","Noto Kufi Arabic",sans-serif;font-weight:700;font-size:.78rem;color:#5A6872;letter-spacing:.06em;white-space:nowrap}
.crisis-card__meta dd{font-family:"Alexandria",sans-serif;font-weight:400;font-size:.92rem;color:#0A2A3D;line-height:1.55}
.crisis-card__meta dd b{font-family:"Alexandria","Noto Kufi Arabic",sans-serif;font-weight:700;color:#12525C}
.crisis-card__cta{display:inline-flex;align-items:center;gap:6px;background:#0F4459;color:#fff;font-family:"Alexandria","Noto Kufi Arabic",sans-serif;font-weight:700;font-size:.92rem;padding:10px 18px;border-radius:8px;text-decoration:none;transition:background .2s}
.crisis-card__cta:hover{background:#12525C}
.crisis-footnote{margin-block-start:28px;font-family:"Alexandria",sans-serif;font-size:.85rem;color:#5A6872;line-height:1.7;max-width:72ch;direction:rtl;text-align:right}

/* ─── Sharia committee block (zakat page) ─── */
.sharia-block{background:linear-gradient(180deg,#FBF7EC,#fff);border:1px solid rgba(201,167,74,.32);border-radius:14px;padding:32px;margin-block:32px;direction:rtl;text-align:right;position:relative;overflow:hidden}
.sharia-block::before{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:4px;background:#C9A227}
.sharia-block__tag{display:inline-block;font-family:"Alexandria","Noto Kufi Arabic",sans-serif;font-weight:700;font-size:.74rem;letter-spacing:.18em;color:#C9A227;text-transform:uppercase;margin-block-end:10px}
.sharia-block h2{font-family:"Alexandria","Noto Kufi Arabic",sans-serif;font-size:1.5rem;font-weight:700;color:#0F4459;margin-block-end:10px}
.sharia-block > p{font-family:"Alexandria",sans-serif;font-size:1.02rem;line-height:1.75;color:#0A2A3D;margin-block-end:20px;max-width:72ch}
.sharia-pledges{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-block-end:8px}
.sharia-pledges > div{background:#fff;border:1px solid rgba(15,68,89,.08);border-radius:10px;padding:18px;position:relative}
.sharia-pledges > div::before{content:"·";position:absolute;inset-block-start:14px;inset-inline-end:14px;color:#C9A227;font-weight:700;font-size:1.2rem}
.sharia-pledges h3{font-family:"Alexandria","Noto Kufi Arabic",sans-serif;font-size:1rem;font-weight:700;color:#1A5F7A;margin-block-end:6px;padding-inline-end:22px}
.sharia-pledges p{font-family:"Alexandria",sans-serif;font-size:.86rem;line-height:1.6;color:#0A2A3D}

/* ─── Scroll safety net (2026-05-22 r6) ────────────────────────────
   Single root scroller pattern: html owns scroll, body stays static.
   Eliminates the nested scroll-containers that caused the touchpad
   wiggle on r4/r5. */
html {
  overflow-y: auto !important;
  overflow-x: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: auto;
}
body {
  overflow-y: visible !important;
  overflow-x: hidden !important;
  min-height: 100vh;
  overscroll-behavior: auto;
}
body.is-loading {
  overflow-y: visible !important;
}
/* Inner scrollers that were trapping wheel events — let the page own scroll. */
.ledger-list,
.partner-list,
.audit-card,
.audit-grid {
  max-height: none !important;
  overflow-y: visible !important;
}

/* ─── Zakat result high-contrast badge (2026-05-22 r4) ─── */
.zakat-mini p[data-zakat-result] {
  display: block;
  margin-block-start: 12px;
  padding: 14px 20px;
  background: linear-gradient(135deg, #12525C, #0A2A3D);
  color: #FFFEF9 !important;
  font-family: "Alexandria", "Noto Kufi Arabic", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.12rem;
  text-align: right;
  border-radius: 10px;
  border: 0;
  box-shadow: 0 8px 24px -12px rgba(18, 82, 92, 0.55);
  letter-spacing: 0.005em;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.zakat-mini p[data-zakat-result]:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 32px -14px rgba(18, 82, 92, 0.65);
}

/* ─── Emil Kowalski-style motion (spring easing, gentle stagger) ─── */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --spring-fast: cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-soft: cubic-bezier(0.16, 1.11, 0.3, 1.02);
    --ease-quint: cubic-bezier(0.83, 0, 0.17, 1);
  }
  /* Card / surface hover lift */
  .surface-card,
  .project-card,
  .news-card,
  .contact-card,
  .program-card,
  .crisis-card,
  .sharia-pledges > div {
    transition: transform 420ms var(--spring-soft),
                box-shadow 420ms var(--spring-soft),
                border-color 320ms ease-out;
  }
  .surface-card:hover,
  .project-card:hover,
  .news-card:hover,
  .contact-card:hover,
  .program-card:hover,
  .crisis-card:hover {
    transform: translateY(-3px);
  }
  /* Button micro-press */
  .btn-primary,
  .header-action,
  .crisis-card__cta {
    transition: transform 180ms var(--spring-fast),
                background-color 220ms ease-out,
                box-shadow 220ms ease-out;
  }
  .btn-primary:active,
  .header-action:active,
  .crisis-card__cta:active {
    transform: translateY(1px) scale(0.985);
  }
  /* Hero photo subtle parallax-feel */
  .page-header img,
  .hero-section img {
    will-change: transform;
    transition: transform 1200ms var(--spring-soft);
  }
  .page-header:hover img,
  .hero-section:hover img {
    transform: scale(1.012);
  }
  /* Action dock chips */
  .action-dock a {
    transition: transform 240ms var(--spring-fast),
                background-color 220ms ease-out;
  }
  .action-dock a:hover {
    transform: translateY(-1.5px);
  }
}

/* ─── 2026-05-22 r5: Gemini-audit fixes ─── */

/* Crisis cards: ensure text legibility (Gemini fix #3) — already on white but reinforce edge */
.crisis-card { background: #FFFEF9 !important; }

/* Audit page stat cards: more whitespace + separators (Gemini fix #4) */
.audit-summary {
  gap: 22px !important;
  margin-block-end: 40px !important;
}
.audit-stat {
  padding: 28px 22px !important;
  border: 1px solid rgba(15, 68, 89, 0.10);
  border-radius: 12px;
  background: #FFFEF9;
}
.audit-grid { gap: 32px !important; }
.audit-card {
  padding: 28px !important;
  border-radius: 12px;
  background: #FFFEF9 !important;
  border: 1px solid rgba(15, 68, 89, 0.08);
}

/* About / page-header hero text: ensure shadow + tighter scrim (Gemini fix #5) */
.page-header h1,
.page-header p {
  text-shadow: 0 2px 14px rgba(10, 42, 61, 0.45);
}
.page-header__shade {
  background: linear-gradient(180deg, rgba(15,68,89,0.15) 0%, rgba(15,68,89,0.55) 60%, rgba(15,68,89,0.85) 100%) !important;
}

/* Donate page primary CTA bigger (Gemini fix #6) */
.donation-panel .btn-primary,
.donate .btn-primary {
  font-size: 1.05rem !important;
  padding-block: 14px !important;
  padding-inline: 28px !important;
  min-height: 52px;
}

/* ─── Donation paths image-led grid (r5) ─── */
.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-block-start: 8px;
}
.path-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  color: #FFFEF9;
  text-decoration: none;
  background-color: #0F4459;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 28px -16px rgba(15, 68, 89, 0.4);
  direction: rtl;
  text-align: right;
}
.path-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 68, 89, 0.18) 0%, rgba(15, 68, 89, 0.62) 55%, rgba(15, 68, 89, 0.95) 100%);
  z-index: 0;
}
.path-card > * { position: relative; z-index: 1; }
.path-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -20px rgba(15, 68, 89, 0.5);
}
.path-card__tag {
  display: inline-block;
  font-family: "Alexandria", "Noto Kufi Arabic", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: #C9A227;
  text-transform: uppercase;
  margin-block-end: 8px;
}
.path-card h3 {
  font-family: "Alexandria", "Noto Kufi Arabic", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  color: #FFFEF9;
  margin-block-end: 6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.path-card p {
  font-family: "Alexandria", "Noto Kufi Arabic", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.92rem;
  color: rgba(255, 254, 249, 0.92);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 600px) {
  .path-grid { grid-template-columns: 1fr; }
}

/* ─── Live-monitor opening case cards (r7) ─── */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
  margin-block-start: 32px;
}
.case-card {
  background: #FFFEF9;
  border: 1px solid rgba(15, 68, 89, 0.08);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 24px -16px rgba(15, 68, 89, 0.22);
  transition: transform 420ms cubic-bezier(0.16, 1.11, 0.3, 1.02),
              box-shadow 420ms cubic-bezier(0.16, 1.11, 0.3, 1.02);
}
.case-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px rgba(15, 68, 89, 0.32);
}
.case-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.case-card__body {
  padding: 20px 22px 22px;
  direction: rtl;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.case-card__tag {
  font-family: "Alexandria", "Noto Kufi Arabic", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  /* #7c5e24 = 5.97:1 على أرضية البطاقة #fffef9. كان #c9a227 بنسبة 2.40 —
     وهذه القاعدة موثّقة في aegov-dls.css: «الذهبي عند 400 وأقل حشوٌ لا نصّ،
     و600 وما فوق آمن للنصّ». وللمشروع سابقة في هذا بالتحديد: #9C7B1B اختير
     مقابل مسار شريط تقدّم حيث يكفي 3:1 ثم استُخدم كنصّ فقاس 3.99. */
  color: #7c5e24;
  text-transform: uppercase;
}
.case-card__body h3 {
  font-family: "Alexandria", "Noto Kufi Arabic", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: #0F4459;
  margin: 0;
}
.case-card__body p {
  font-family: "Alexandria", "Noto Kufi Arabic", system-ui, sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: #0A2A3D;
  line-height: 1.65;
  margin: 0;
}
.case-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block-start: 12px;
  margin-block-start: auto;
  border-block-start: 1px dashed rgba(15, 68, 89, 0.14);
}
.case-card__row span {
  font-size: 0.78rem;
  color: #5A6872;
  font-family: "Alexandria", "Noto Kufi Arabic", sans-serif;
  font-weight: 700;
}
.case-card__row b {
  font-family: "Alexandria", "Noto Kufi Arabic", sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: #12525C;
}
.case-card__cta {
  display: inline-block;
  margin-block-start: 8px;
  font-family: "Alexandria", "Noto Kufi Arabic", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: #0F4459;
  text-decoration: none;
  padding-block: 4px;
  border-block-end: 2px solid #C9A227;
  align-self: flex-end;
  transition: color 200ms ease-out, border-color 200ms ease-out;
}
.case-card__cta:hover {
  color: #12525C;
  border-color: #12525C;
}

/* ─── Volunteer track image-cards (r7) ─── */
.policy-card.vol-track {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.policy-card.vol-track img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.policy-card.vol-track h3,
.policy-card.vol-track p {
  padding-inline: 22px;
}
.policy-card.vol-track h3 { padding-block-start: 18px; }
.policy-card.vol-track p  { padding-block-end: 22px; }

/* ─── iOS safe-area handling (r10 → r11, 2026-05-22) ─── */
/* The page now uses viewport-fit=cover, so we need to manually pad/place
   anything that touches the top notch or the bottom home-indicator. */

/* Top chrome — extend into the top safe area so there's no see-through gap */
.hotline-strip {
  padding-top: max(8px, env(safe-area-inset-top));
}
/* When there is no hotline-strip above, the header itself sits at the top */
body > .site-header:first-of-type,
body > header.site-header:first-of-type {
  padding-top: env(safe-area-inset-top);
}
/* Fixed sticky header variant */
.site-header[data-static-header] {
  padding-top: max(0px, env(safe-area-inset-top));
}

/* Mobile sticky donate CTA — lift it above iOS home-indicator AND the action-dock */
@media (max-width: 640px) {
  .mb-sticky-cta {
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
  }
}

/* Action dock — sit above the home-indicator on iOS */
.action-dock {
  inset-block-end: max(var(--space-4, 16px), env(safe-area-inset-bottom)) !important;
}

/* Whatsapp floating button */
.mb-floating-wa {
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 12px)) !important;
}
@media (max-width: 640px) {
  .mb-floating-wa {
    bottom: max(78px, calc(env(safe-area-inset-bottom) + 70px)) !important;
  }
}

/* Footer — respect bottom safe area */
.mabarrah-footer {
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

/* Side insets — respect left/right safe areas on landscape iPhones */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
/* But not for full-bleed elements (heroes, footer background) */
.page-hero,
.hero-section,
.audit-head,
.mabarrah-footer,
.hotline-strip,
.site-header {
  margin-left: calc(-1 * env(safe-area-inset-left));
  margin-right: calc(-1 * env(safe-area-inset-right));
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}