/* =========================================================================
   القائمة العربية الموحدة — stylesheet
   Mobile-first. Written with logical properties throughout so the single
   sheet serves both RTL languages (Arabic and Hebrew) without overrides.

   1. Design tokens
   2. Reset and base elements
   3. Primitives (container, section, button, headings, icon tile)
   4. Header and navigation
   5. Hero
   6. Content sections
   7. Footer
   8. Motion and user preferences
   9. Breakpoints (progressive enhancement upward)
   ========================================================================= */

/* ---------- 1. Design tokens --------------------------------------------- */

:root {
  --green-950: #073818;
  --green-900: #0b5625;
  --green-800: #0f7130;
  --green-700: #15963b;
  --green-600: #22a946;
  --green-500: #2fbc55;
  --green-300: #75e68d;
  --green-100: #e3f5e8;
  --green-50: #f3faf5;

  /* Primary call to action. Deep enough that a white label clears WCAG AA
     (4.75:1) yet still reads as a vivid green against the dark hero. */
  --cta: #0e8534;
  --cta-hover: #0b6f2b;

  --ink: #101812;
  --ink-soft: #3c483f;
  /* Muted tones are tuned to clear WCAG AA (4.5:1) on their own backgrounds. */
  --muted: #5b6a60;
  --muted-quiet: #74806f;
  --line: #dbe6de;
  --white: #fff;
  --cream: #f8f6f0;

  --on-dark: rgba(255, 255, 255, .84);
  --on-dark-quiet: rgba(255, 255, 255, .68);
  --on-dark-line: rgba(255, 255, 255, .16);

  /* Fluid type scale: each step interpolates between a mobile and desktop size. */
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1.01rem + 0.28vw, 1.1875rem);
  --text-lg: clamp(1.1875rem, 1.11rem + 0.4vw, 1.375rem);
  --text-xl: clamp(1.3125rem, 1.19rem + 0.63vw, 1.625rem);
  --text-2xl: clamp(1.625rem, 1.3rem + 1.6vw, 2.375rem);
  --text-3xl: clamp(1.875rem, 1.31rem + 2.8vw, 3.5rem);
  --text-hero: clamp(2.125rem, 1.42rem + 3.5vw, 4.5rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-section: clamp(3.75rem, 9vw, 7rem);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 8px 24px rgba(7, 58, 23, .08);
  --shadow-md: 0 18px 45px rgba(4, 53, 20, .12);
  --shadow-lg: 0 32px 70px rgba(4, 53, 20, .16);

  --container: 1180px;
  --gutter: clamp(1rem, 4vw, 1.75rem);
  --header-h: 62px;
  --tap-target: 44px;
  --nav-breakpoint: 1080px; /* Read by script.js — keep in sync with the @media below. */

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --duration-fast: .18s;
  --duration: .28s;

  --font-ar: "Noto Kufi Arabic", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-he: "Noto Sans Hebrew", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font: var(--font-ar);
}

html[lang="he"] {
  --font: var(--font-he);
}

/* ---------- 2. Reset and base elements ---------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--space-md));
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(21, 150, 59, .16);
  overflow-x: hidden; /* Safety net; every section is also individually contained. */
}

/* Long unbroken Arabic/Hebrew strings must never push a card past the viewport. */
h1, h2, h3, p, li, dd, dt, summary, b {
  overflow-wrap: break-word;
}

h1, h2, h3 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

img {
  height: auto;
}

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Single visible focus treatment for every interactive element. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--green-600);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.section-dark :where(a, button):focus-visible,
.impact-section :where(a, button):focus-visible,
.contact-card :where(a, button):focus-visible {
  outline-color: var(--green-300);
}

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

.skip-link {
  position: fixed;
  z-index: 999;
  inset-block-start: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  font-weight: 700;
  color: var(--green-900);
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
}

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

/* ---------- 3. Primitives ----------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-section);
}

.section-soft {
  background: var(--green-50);
}

.section-dark {
  color: var(--white);
  background: var(--green-950);
}

.section-heading {
  max-width: 42rem;
}

.section-heading.centered {
  margin-inline: auto;
  text-align: center;
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-2xs);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--green-800);
}

.section-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-pill);
}

.section-kicker.light {
  color: var(--green-300);
}

.section-heading h2,
.impact-head h2,
.history-copy h2,
.leader-copy h2,
.contact-copy h2 {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-3xl);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.section-heading > p {
  margin-block-start: var(--space-sm);
  font-size: var(--text-base);
  color: var(--muted);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 52px;
  padding-inline: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 800;
  border-radius: var(--radius-md);
  transition: transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

.button-primary {
  color: var(--white);
  background: var(--cta);
  /* The glow keeps the button separated from the dark hero, where fill-to-
     background contrast alone is only 2.8:1. */
  box-shadow: 0 14px 32px rgba(14, 133, 52, .45);
}

.button-primary:hover {
  background: var(--cta-hover);
}

.button-ghost {
  color: var(--white);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .24);
}

.button-ghost:hover {
  background: rgba(255, 255, 255, .12);
}

.button-light {
  color: var(--green-900);
  background: var(--white);
}

/* Rounded tile that holds a line icon — shared by four different sections. */
.icon-tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--green-100);
  color: var(--green-800);
}

.icon-tile svg {
  width: 24px;
  height: 24px;
}

.icon-tile.on-dark {
  background: var(--white);
}

.card-index {
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--muted-quiet);
}

/* ---------- 4. Header and navigation ------------------------------------ */

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(8, 80, 32, .09);
  padding-block-start: env(safe-area-inset-top);
  transition: box-shadow var(--duration) var(--ease-out),
              background var(--duration) var(--ease-out);
}

.site-header.scrolled {
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 0;
  flex: 0 1 auto;
}

.brand-mark {
  flex: 0 0 auto;
  width: 84px;
  aspect-ratio: 416 / 201; /* Matches the wordmark file, so nothing is cropped. */
  overflow: hidden;
  background: var(--green-700);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.brand-copy strong {
  font-size: var(--text-md);
  white-space: nowrap;
}

.brand-copy small {
  display: none;
  font-size: var(--text-2xs);
  color: var(--muted);
}

.desktop-nav {
  display: none;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.375rem);
}

.desktop-nav a {
  position: relative;
  padding-block: var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 800;
  color: #2e3b32;
  white-space: nowrap;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  background: var(--green-600);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transition: transform var(--duration) var(--ease-out);
}

.desktop-nav a:hover::after,
.desktop-nav a[aria-current="true"]::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--space-3xs);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  padding: 0;
  color: var(--green-900);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.icon-button:hover {
  background: var(--green-50);
  border-color: var(--green-100);
}

/* Hidden on the narrowest screens so the brand lockup is never squeezed;
   Facebook is still reachable from the hero, the contact card and the footer. */
.facebook-mini {
  display: none;
}

.facebook-mini svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  stroke: none;
}

.lang-toggle .lang-current {
  display: none;
  font-size: var(--text-2xs);
  font-weight: 800;
}

.lang-toggle svg {
  width: 20px;
  height: 20px;
}

.menu-toggle {
  color: var(--green-900);
  background: var(--green-100);
  border-color: transparent;
}

.menu-toggle:hover {
  background: var(--green-100);
}

.menu-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 14px;
}

.menu-icon span {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: currentColor;
  border-radius: var(--radius-pill);
  transition: transform var(--duration) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.menu-icon span:nth-child(1) { inset-block-start: 0; }
.menu-icon span:nth-child(2) { inset-block-start: 6px; }
.menu-icon span:nth-child(3) { inset-block-start: 12px; }

/* Hamburger morphs into a close icon so the button's state is visible, not just announced. */
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav {
  position: fixed;
  z-index: 99;
  inset-block-start: calc(var(--header-h) + env(safe-area-inset-top));
  inset-inline: 0;
  max-height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
  overflow-y: auto;
  padding: var(--space-2xs) var(--gutter) var(--space-md);
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  /* Closed state stays out of the tab order and the accessibility tree. */
  visibility: hidden;
  opacity: 0;
  translate: 0 -0.75rem;
  transition: opacity var(--duration) var(--ease-out),
              translate var(--duration) var(--ease-out),
              visibility var(--duration);
}

.mobile-nav[data-open] {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
}

.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding-block: var(--space-2xs);
  font-weight: 700;
  border-bottom: 1px solid #eef2ef;
}

.mobile-nav a:last-child {
  border-bottom: 0;
}

.mobile-nav a[aria-current="true"] {
  color: var(--green-800);
}

.nav-backdrop {
  position: fixed;
  z-index: 98;
  inset: 0;
  background: rgba(6, 33, 15, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration) var(--ease-out), visibility var(--duration);
}

.nav-backdrop[data-open] {
  opacity: 1;
  visibility: visible;
}

/* ---------- 5. Hero ----------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  /* Every descendant sits on the dark green gradient, so the whole section
     inherits white rather than the near-black body colour. */
  color: var(--white);
  padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-section);
  background:
    radial-gradient(circle at 77% 27%, rgba(47, 188, 85, .3), transparent 34%),
    radial-gradient(circle at 13% 83%, rgba(34, 169, 70, .13), transparent 31%),
    linear-gradient(145deg, var(--green-950), #052d14 80%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .09;
  background-image:
    linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, black, transparent 95%);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

.hero-copy {
  max-width: 44rem;
  text-align: center;
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  margin: 0;
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-2xs);
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-pill);
}

.eyebrow span {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: #64e37d;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(100, 227, 125, .12);
}

.hero h1 {
  margin: var(--space-md) 0 var(--space-sm);
  font-size: var(--text-hero);
  line-height: 1.14;
  letter-spacing: -.03em;
}

.hero-lead {
  margin: 0;
  font-size: var(--text-md);
  color: var(--on-dark-quiet);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-block-start: var(--space-lg);
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding-block-start: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.hero-stats dt {
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.1;
}

.hero-stats dd {
  margin: var(--space-3xs) 0 0;
  font-size: var(--text-2xs);
  line-height: 1.4;
  color: var(--on-dark-quiet);
}

/* Orbits and logo share one centred grid cell, so they stay concentric without
   direction-sensitive transforms and are sized in % rather than fixed px —
   which is what used to push the hero past the viewport on small screens. */
.hero-visual {
  position: relative;
  display: grid;
  grid-template-areas: "stage";
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  max-height: 32rem;
}

.visual-orbit {
  grid-area: stage;
  width: min(92%, 33rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
}

.orbit-two {
  width: min(68%, 24.5rem);
  border-style: dashed;
  animation: orbit-spin 28s linear infinite;
}

.logo-stage {
  position: relative;
  z-index: 2;
  grid-area: stage;
  width: min(72%, 26.25rem);
  rotate: -2deg;
}

.logo-stage img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .38);
}

.logo-stage::after {
  content: "";
  position: absolute;
  inset: 12px -14px -16px 12px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 26px;
}

.logo-glow {
  position: absolute;
  inset: 14%;
  z-index: -1;
  background: rgba(61, 214, 95, .45);
  filter: blur(72px);
}

.floating-label {
  position: absolute;
  z-index: 3;
  margin: 0;
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-2xs);
  font-weight: 800;
  background: rgba(5, 48, 18, .72);
  backdrop-filter: blur(12px);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .2);
}

.label-top {
  inset-block-start: 12%;
  inset-inline-start: 2%;
}

.label-bottom {
  inset-block-end: 12%;
  inset-inline-end: 2%;
}

.hero-bottom-line {
  position: absolute;
  inset: auto 0 0;
  height: 5px;
  background: linear-gradient(90deg, transparent, var(--green-500), transparent);
  opacity: .7;
}

@keyframes orbit-spin {
  to { rotate: 360deg; }
}

/* ---------- 6. Content sections ----------------------------------------- */

/* About */
.intro-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

.intro-copy {
  max-width: 45rem;
  font-size: var(--text-md);
  color: var(--ink-soft);
}

.intro-copy > p:first-child {
  margin-block-start: 0;
}

.quote-card {
  position: relative;
  margin: var(--space-lg) 0 0;
  padding: var(--space-md);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-lg);
}

.quote-card p {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--green-900);
}

.quote-mark {
  position: absolute;
  inset-block-start: -.5rem;
  inset-inline-start: var(--space-sm);
  font-size: 4rem;
  line-height: 1;
  color: var(--green-600);
  opacity: .3;
}

/* Impact */
.impact-section {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(125deg, rgba(255, 255, 255, .04), transparent 36%),
    linear-gradient(145deg, #0f7731, #083b1b);
}

.impact-section::before {
  content: "";
  position: absolute;
  inset: -270px auto auto -120px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
}

.impact-head {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-md);
  align-items: end;
}

.impact-head p {
  margin: 0;
  font-size: var(--text-base);
  color: var(--on-dark-quiet);
}

.impact-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
}

.impact-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-md);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-lg);
  transition: transform var(--duration) var(--ease-out),
              background var(--duration) var(--ease-out);
}

.impact-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, .12);
}

.impact-card::after {
  content: "";
  position: absolute;
  inset: auto -65px -65px auto;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
}

.impact-card .card-index {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
  color: rgba(255, 255, 255, .5);
}

.impact-card h3 {
  margin: var(--space-md) 0 var(--space-2xs);
  font-size: var(--text-lg);
}

.impact-card p {
  margin: 0;
  color: var(--on-dark-quiet);
}

/* Principles */
.principles-grid {
  display: grid;
  gap: var(--space-sm);
  margin-block-start: var(--space-xl);
}

.principle-card {
  position: relative;
  overflow: hidden;
  padding: var(--space-md);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease-out);
}

.principle-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.principle-card::after {
  content: "";
  position: absolute;
  inset: auto -65px -65px auto;
  width: 160px;
  height: 160px;
  border: 1px solid var(--green-100);
  border-radius: 50%;
}

.principle-card .card-index {
  position: absolute;
  inset-block-start: var(--space-md);
  inset-inline-end: var(--space-md);
}

.principle-card h3 {
  margin: var(--space-md) 0 var(--space-2xs);
  font-size: var(--text-lg);
}

.principle-card p {
  margin: 0;
  color: var(--muted);
}

/* Priorities */
.split-heading {
  display: grid;
  gap: var(--space-sm);
  max-width: none;
  align-items: end;
}

.split-heading p {
  margin: 0;
}

.priority-list {
  margin-block-start: var(--space-xl);
  border-top: 1px solid var(--line);
}

.priority-row {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--line);
  align-items: start;
}

/* Hover fill is painted by a pseudo-element so the row never reflows. */
.priority-row::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--space-sm) * -1);
  z-index: -1;
  background: var(--green-50);
  border-radius: var(--radius-md);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.priority-row:hover::before {
  opacity: 1;
}

/* Stacked layout: icon leads the row, index sits at the opposite edge. */
.priority-number {
  grid-column: 2;
  justify-self: end;
  align-self: center;
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--muted-quiet);
}

.priority-icon {
  grid-column: 1;
  grid-row: 1;
}

.priority-copy {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--space-3xs);
}

.priority-copy h3 {
  margin: 0;
  font-size: var(--text-lg);
}

.priority-copy p {
  margin: 0;
  max-width: 42rem;
  color: var(--muted);
}

/* History */
.history-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--green-950), #052f15);
}

.history-section::after {
  content: "";
  position: absolute;
  inset: -250px -170px auto auto;
  width: 620px;
  height: 620px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 50%;
}

.history-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-xl);
}

.history-copy p {
  font-size: var(--text-base);
  color: var(--on-dark-quiet);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--tap-target);
  font-weight: 700;
  color: var(--green-300);
}

.text-link svg {
  width: 18px;
  height: 18px;
}

.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 39px;
  width: 1px;
  background: rgba(255, 255, 255, .15);
}

.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: var(--space-sm);
  padding-block-end: var(--space-lg);
}

.timeline li:last-child {
  padding-block-end: 0;
}

.timeline-year {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 78px;
  height: 40px;
  font-size: var(--text-sm);
  font-weight: 800;
  background: #0c4c1f;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-pill);
}

.timeline h3 {
  margin: var(--space-3xs) 0 var(--space-3xs);
  font-size: var(--text-md);
}

.timeline p {
  margin: 0;
  color: var(--on-dark-quiet);
}

/* Leadership */
.leadership-section {
  background: var(--cream);
}

.leadership-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

.leader-visual {
  overflow: hidden;
  max-width: 26rem;
  margin-inline: auto;
  background: var(--green-700);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.leader-visual img {
  width: 100%;
  aspect-ratio: 634 / 818;
  object-fit: cover;
  object-position: center top; /* Keeps the face in frame at every crop. */
}

.leader-role {
  margin: var(--space-2xs) 0 var(--space-sm);
  font-weight: 800;
  color: var(--green-800);
}

.leader-copy > p:not(.leader-role) {
  max-width: 42rem;
  font-size: var(--text-base);
  color: var(--muted);
}

.leader-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: var(--space-md);
}

.leader-points span {
  padding: var(--space-3xs) var(--space-xs);
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--green-900);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

/* FAQ */
.faq-grid {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}

.accordion details {
  overflow: hidden;
  margin-block-end: var(--space-2xs);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--tap-target);
  padding: var(--space-xs) var(--space-md);
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion-icon {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  background: var(--green-100);
  border-radius: 50%;
}

.accordion-icon::before,
.accordion-icon::after {
  content: "";
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 8px;
  width: 10px;
  height: 2px;
  background: var(--green-800);
  transition: transform var(--duration-fast) var(--ease-out);
}

.accordion-icon::after {
  transform: rotate(90deg);
}

.accordion details[open] .accordion-icon::after {
  transform: rotate(0);
}

.accordion details p {
  margin: 0;
  padding: 0 var(--space-md) var(--space-md);
  color: var(--muted);
}

/* Contact */
.contact-section {
  padding-block: 0 var(--space-xl);
  background: linear-gradient(to bottom, var(--green-50) 45%, var(--white) 45%);
}

.contact-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: var(--space-lg);
  align-items: center;
  padding: var(--space-lg) var(--space-md);
  color: var(--white);
  background: linear-gradient(135deg, var(--green-800), var(--green-950));
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: -170px auto auto -130px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
}

.contact-copy {
  position: relative;
  z-index: 1;
}

.contact-copy h2 {
  font-size: var(--text-2xl);
}

.contact-copy p {
  max-width: 38rem;
  color: var(--on-dark-quiet);
}

.contact-actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-2xs);
}

.contact-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 60px;
  padding: var(--space-2xs) var(--space-sm);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) var(--ease-out);
}

.contact-link:hover {
  background: rgba(255, 255, 255, .13);
}

.contact-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, .1);
  border-radius: var(--radius-sm);
}

.contact-icon svg {
  width: 20px;
  height: 20px;
}

.contact-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-text small {
  font-size: var(--text-2xs);
  color: var(--on-dark-quiet);
}

/* The value carries dir="ltr" so digits read correctly; align it back to the
   container's start edge so it lines up under its label. */
.contact-text b {
  align-self: start;
  font-size: var(--text-sm);
}

/* ---------- 7. Footer --------------------------------------------------- */

.site-footer {
  padding-block: var(--space-md) calc(var(--space-lg) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  gap: var(--space-md);
  align-items: start;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.footer-brand .brand-mark {
  width: 84px;
}

.footer-brand strong {
  font-size: var(--text-md);
}

.footer-brand p {
  margin: 2px 0 0;
  font-size: var(--text-2xs);
  color: var(--muted);
}

.footer-note p {
  margin: 0;
  font-size: var(--text-2xs);
  color: var(--muted);
}

.source-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin-block-start: var(--space-2xs);
}

.source-links a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  font-size: var(--text-2xs);
  font-weight: 800;
  color: var(--green-800);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-2xs);
  color: var(--muted);
}

.footer-meta p {
  margin: 0;
}

.back-top {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  min-height: var(--tap-target);
  font-weight: 800;
  color: var(--green-800);
}

.back-top svg {
  width: 16px;
  height: 16px;
}

/* ---------- 8. Motion and user preferences ------------------------------ */

/* Reveal-on-scroll only engages once script.js has confirmed it is running,
   so the page is fully readable if JavaScript never loads. */
.js .reveal {
  opacity: 0;
  translate: 0 1.25rem;
  transition: opacity .7s var(--ease-out), translate .7s var(--ease-out);
}

.js .reveal.visible {
  opacity: 1;
  translate: 0 0;
}

/* Set by the inline head script only while an initial language swap is pending. */
html[data-i18n-pending] body {
  visibility: hidden;
}

/* "Continue reading" chevrons must point along the reading direction. Both site
   languages are right-to-left, so the glyph is mirrored unconditionally.
   External-link arrows are deliberately left alone. */
.icon-forward {
  scale: -1 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .js .reveal {
    opacity: 1;
    translate: none;
  }
}

/* ---------- 9. Breakpoints ---------------------------------------------- */

/* Large phone: room for the long brand name and a two-up card grid. */
@media (min-width: 30rem) {
  :root {
    --header-h: 68px;
  }

  .brand-mark {
    width: 92px;
  }

  .brand-copy small {
    display: block;
  }

  .facebook-mini {
    display: inline-flex;
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .lang-toggle {
    padding-inline: var(--space-xs);
    border-radius: var(--radius-pill);
  }

  .lang-toggle .lang-current {
    display: inline;
  }
}

/* Tablet portrait. */
@media (min-width: 40rem) {
  :root {
    --header-h: 74px;
  }

  .principles-grid,
  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .quote-card {
    padding: var(--space-lg);
  }

  .priority-row {
    grid-template-columns: 44px 52px 1fr;
    gap: var(--space-md);
  }

  /* Wide enough for one row: index, icon and copy sit side by side. */
  .priority-number {
    grid-column: 1;
    justify-self: start;
    align-self: start;
    padding-block-start: var(--space-sm);
  }

  .priority-icon {
    grid-column: 2;
  }

  .priority-copy {
    grid-column: 3;
    grid-row: 1;
  }

  .timeline li {
    grid-template-columns: 96px 1fr;
    gap: var(--space-md);
  }

  .timeline::before {
    inset-inline-start: 39px;
  }

  .contact-card {
    padding: var(--space-xl);
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .footer-meta {
    grid-column: 1 / -1;
    padding-block-start: var(--space-sm);
    border-top: 1px solid var(--line);
  }
}

/* Tablet landscape and small laptops: two-column editorial layouts. */
@media (min-width: 56rem) {
  .intro-grid,
  .history-grid,
  .faq-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2.5rem, 6vw, 5.5rem);
  }

  .leadership-grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }

  .impact-head,
  .split-heading {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }

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

  .impact-card,
  .principle-card {
    padding: var(--space-lg);
  }

  .impact-card h3,
  .principle-card h3 {
    margin-block-start: var(--space-xl);
  }

  .contact-card {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 3.75rem);
  }

  .footer-grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  }

  .footer-meta {
    grid-column: 1 / -1;
  }
}

/* Desktop: real navigation replaces the hamburger, hero becomes side by side.
   Keep this width in sync with --nav-breakpoint. */
@media (min-width: 67.5rem) {
  :root {
    --header-h: 82px;
  }

  .desktop-nav {
    display: flex;
  }

  .menu-toggle {
    display: none;
  }

  .brand {
    gap: var(--space-xs);
  }

  .brand-mark {
    width: 100px;
  }

  .hero {
    padding-block-start: calc(var(--header-h) + var(--space-section));
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }

  .hero-copy {
    margin-inline: 0;
    text-align: start;
  }

  .hero-actions,
  .hero-stats {
    justify-content: flex-start;
  }

  .hero-stats {
    display: flex;
    gap: clamp(1.25rem, 3vw, 2rem);
  }

  .hero-stats div {
    min-width: 7rem;
  }

  .hero-visual {
    max-height: 38rem;
  }

  .principles-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 80rem) {
  .hero-stats dt {
    font-size: var(--text-2xl);
  }
}