/* MBF — Intercom (single family, 5 weights + 5 italics).
   The new font set sent by the CEO on 2026-06-25 — used for both English
   and Arabic content site-wide. */
@font-face {
  font-family: "Intercom";
  src: url("../fonts/Intercom-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Intercom";
  src: url("../fonts/Intercom-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Intercom";
  src: url("../fonts/Intercom-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Intercom";
  src: url("../fonts/Intercom-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Intercom";
  src: url("../fonts/Intercom-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Intercom";
  src: url("../fonts/Intercom-MediumItalic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Intercom";
  src: url("../fonts/Intercom-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Intercom";
  src: url("../fonts/Intercom-SemiBoldItalic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Intercom";
  src: url("../fonts/Intercom-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Intercom";
  src: url("../fonts/Intercom-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Back-compat aliases — let existing `var(--font-regular)` and
   `var(--font-medium)` keep rendering at their visual weights without
   needing `font-weight` overrides across the codebase. */
@font-face {
  font-family: "Intercom Regular";
  src: url("../fonts/Intercom-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Intercom Medium";
  src: url("../fonts/Intercom-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

.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;
}

:root {
  --font-regular: "Intercom Regular", sans-serif;
  --font-medium: "Intercom Medium", sans-serif;
  /* Arabic and English use the exact same Intercom family — no separate
     Arabic typeface. Browsers fall back to a system Arabic font only for
     characters Intercom doesn't include. */
  --font-ar: "Intercom", sans-serif;
  --hero-max: 1440px;
  --nav-pad-x: 80px;
  --nav-pad-y: 16px;
  /* Hero photo native ratio (Figma export) — keeps layout proportional */
  --hero-photo-w: 1440;
  --hero-photo-h: 900;
  --hero-body-h: 700px;
  --white: #ffffff;
  --overlay-from: #1a869a;
  --teal-strip: #00b8c5;
  --forest-strip: #448843;
  --moss-strip: #a8c243;
  /* Pillars extend onto About band (~15–20% of typical card height) */
  --pillar-overlap: clamp(40px, 8vmin, 64px);
  --about-bg: #007b8f;
  --story-btn-bg: #007990;
  /* Story band BG ratio — tweak if you swap image */
  --story-photo-w: 1920;
  --story-photo-h: 960;
  /* Reserve vertical space so headline clears absolutely positioned header */
  --site-header-offset: 118px;
  /* Top-right icon strips on pillars & story cards (Illustrator ~66×90) */
  --accent-pill-w: 52px;
  --accent-pill-h: 68px;
}

/* Match board / footer / slider horizontal gutters (80 → 40 → 24) */
@media (max-width: 900px) {
  :root {
    --nav-pad-x: 40px;
  }
}

/* ── Tablet desktop range (901-1100): tighten the nav so the 7 menu items
   + Arabic pill don't wrap to a second row. Content layout stays desktop. */
@media (min-width: 901px) and (max-width: 1100px) {
  :root { --nav-pad-x: 40px; }
  .nav__logo { width: 150px; }
  .nav__mb-group { width: 140px; height: auto; }
  .nav__right { gap: 10px; }
  .nav__links {
    font-size: 16px;
    line-height: 28px;
    gap: 12px;
  }
}

@media (max-width: 639px) {
  :root {
    --nav-pad-x: 24px;
  }
}

html {
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-regular);
  background: #0c3d45;
  color: var(--white);
  overflow-x: hidden;
  /* Belt-and-braces guard against horizontal scroll bleed from any
     section that briefly extends past the viewport (full-bleed photos,
     story bands, drawer transforms, etc.) */

  /* Full-height flex column so short pages (skeletons, 404, etc.) don't
     show the dark body background below the footer — <main> flex-grows
     to fill the viewport and the footer sits at the bottom. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#main-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* On short pages, let the last section stretch so its own background fills
   the gap between content and footer instead of the body's dark teal
   showing through. Tall pages (home) already overflow → flex-grow is a
   no-op there. */
#main-content > *:last-child {
  flex: 1 0 auto;
}

/* ── Universal Arabic font rule ──────────────────────────────────────────────
   Any element marked lang="ar" gets the Arabic font, regardless of page
   direction. This means Arabic strings rendered inside an English page
   (footer Arabic address, language toggle "العربية", inline AR snippets)
   all look consistent. */
[lang="ar"],
[dir="rtl"] {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

/* Latin fragments explicitly tagged stay in the Latin family even on
   Arabic pages (e.g. the EN address shown in footer when in AR mode). */
body.is-rtl [lang="en"] {
  font-family: "Intercom Regular", system-ui, -apple-system, "Segoe UI", sans-serif;
}

#main-content {
  position: relative;
  z-index: 1;
}

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

/* Full-bleed backgrounds: sized by section, not the generic img shrink rule */
.hero__photo,
.story-band__photo {
  max-width: none;
  height: 100%;
}

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

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-left: var(--nav-pad-x);
  padding-right: var(--nav-pad-x);
  background-color: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}

/* When the page has scrolled past the hero, the header gains a solid-ish
   background so nav links stay legible against light content sections. */
body.is-scrolled .site-header {
  background-color: rgba(12, 61, 69, 0.92);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.site-header__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  padding: var(--nav-pad-y) 0;
  transition: padding 0.25s ease;
}
body.is-scrolled .site-header__inner { padding: 8px 0; }

.hero-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Full viewport, capped so it doesn't balloon on ultra-tall monitors. */
  min-height: 100vh;
  max-height: 900px;
  overflow-x: visible;
  overflow-y: visible;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;  /* Create a stacking context so child z-index values
                  (photos + gradient overlay) stay contained here and
                  never surface above the .hero content (text/pillars). */
  width: 100%;
  height: 100%;
  min-height: 100%;
  pointer-events: none;
}

.hero {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding-left: var(--nav-pad-x);
  padding-right: var(--nav-pad-x);
  min-height: var(--hero-body-h);
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 3;  /* Above photos so it visibly darkens the image */
  pointer-events: none;
  /* Overlay directly on the image — lighter now, just enough for text
     to stay legible while the photo shows through clearly. */
  background: linear-gradient(
    180deg,
    rgba(12, 61, 69, 0.40) 0%,
    rgba(12, 61, 69, 0.15) 50%,
    rgba(12, 61, 69, 0.40) 100%
  );
}

/* Home hero slider — stacked images crossfading via .is-active class. */
.hero-shell--slider .hero__photo {
  opacity: 0;
  z-index: 0;
  transition: opacity 700ms ease-in-out;
}
.hero-shell--slider .hero__photo.is-active {
  opacity: 1;
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  max-width: var(--hero-max);
  width: 100%;
  margin: 0 auto;
  min-height: var(--hero-body-h);
  padding: calc(var(--site-header-offset) + 48px) 0 48px;
}

.nav {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  transition: align-items 0.25s ease;
}
/* Only the SCROLLED (sticky) state re-centers and tightens the row. */
body.is-scrolled .nav { align-items: center; }

.nav__brand {
  flex-shrink: 0;
}

.nav__logo {
  width: 186px;
  height: auto;
  max-width: none;
  flex-shrink: 0;
  transition: width 0.25s ease;
}
body.is-scrolled .nav__logo { width: 132px; }

.nav__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0;
  transition: gap 0.25s ease;
}
body.is-scrolled .nav__right { gap: 8px; }

.nav__top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* LTR: right (above Contact Us); RTL auto-flips to left (above Contact Us in Arabic) */
  width: 100%;
}

.nav__mb-group {
  width: 177px;
  height: 26px;
  display: block;
  flex-shrink: 0;
  transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease;
}
body.is-scrolled .nav__mb-group { width: 130px; height: auto; opacity: 0.8; }

.nav__links {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: flex-end;
  font-family: var(--font-medium);
  font-size: 20px;
  line-height: 35px;
  letter-spacing: 0;
}

/* ── Desktop dropdown for parent items with children ─────────────────────── */
.nav__item--has-children {
  position: relative;
}
.nav__parent-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.nav__chevron {
  display: inline-block;
  transition: transform 0.2s ease;
  flex-shrink: 0;
  opacity: 0.85;
}
.nav__item--has-children:hover .nav__chevron,
.nav__item--open .nav__chevron { transform: rotate(180deg); }

.nav__submenu {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background-color: rgba(12, 61, 69, 0.96);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index: 120;
  font-size: 15px;
  line-height: 1.3;
}
.nav__item--has-children:hover .nav__submenu,
.nav__item--has-children:focus-within .nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__submenu li { list-style: none; }
.nav__submenu a {
  display: block;
  padding: 10px 20px;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* Submenu "Overview" row — visually distinct, sits at top of dropdown
   and links to the parent hub page (e.g. /focus-areas/). */
.nav__submenu-overview a {
  font-family: var(--font-medium, inherit);
  color: #00b8c5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 12px;
}
.nav__submenu-overview-parent {
  opacity: 0.7;
  font-weight: 400;
}
.nav__submenu-overview a:hover {
  background-color: rgba(0, 184, 197, 0.14);
}

.nav__submenu a:hover {
  background-color: rgba(0, 184, 197, 0.20);
  color: #00b8c5;
}

/* RTL: submenu opens flush to the right edge of its parent */
body.is-rtl .nav__submenu { left: auto; right: 0; }

.hero__headline {
  margin: 0;
  padding-top: 0;
  max-width: 21ch;
  font-family: var(--font-medium);
  font-size: clamp(32px, 4vw, 55px);
  line-height: 57.3px;
  letter-spacing: 0;
}

.hero__headline span {
  display: block;
}

.pillars {
  position: relative;
  margin-top: auto;
  margin-bottom: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 40px;
  align-items: stretch;
  padding-top: 48px;
}

.pillar {
  position: relative;
  min-width: 0;
  min-height: 320px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
  color: var(--white);
}

.pillar--teal {
  background: linear-gradient(
    180deg,
    rgb(12, 117, 133) 20%,
    rgb(0, 181, 194) 60%
  );
}

.pillar--forest {
  background: linear-gradient(
    180deg,
    rgb(75, 106, 82) 20%,
    rgb(68, 134, 68) 60%
  );
}

.pillar--moss {
  background: linear-gradient(
    180deg,
    rgb(87, 147, 67) 20%,
    rgb(159, 189, 67) 60%
  );
}

.pillar__accent {
  position: absolute;
  top: 0;
  right: 24px;
  box-sizing: border-box;
  width: var(--accent-pill-w);
  height: var(--accent-pill-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar__accent--teal {
  background-color: #00b8c5;
}

.pillar__accent--forest {
  background-color: #448843;
}

.pillar__accent--moss {
  background-color: #a8c243;
}

.pillar__accent img {
  max-width: none;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.pillar--forest .pillar__accent img {
  width: 32px;
  height: 36px;
}

.pillar--moss .pillar__accent img {
  width: 30px;
  height: 36px;
}

.pillar__title {
  margin: 0;
  width: 100%;
  padding-right: calc(var(--accent-pill-w) + 18px);
  font-family: var(--font-medium);
  font-size: 45px;
  line-height: 45px;
  letter-spacing: 0;
}

.pillar__text {
  margin: 0;
  width: 100%;
  max-width: none;
  font-family: var(--font-regular);
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0;
}

@media (max-width: 1100px) {
  .nav__links {
    justify-content: flex-start;
  }

  .hero__headline {
    max-width: none;
  }
}

@media (max-width: 768px) {
  :root {
    --site-header-offset: 140px;
  }

  .nav {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .pillar {
    max-width: none;
    width: 100%;
  }

  .about__inner {
    flex-direction: column;
  }

  .story-band {
    padding: 48px var(--nav-pad-x);
  }

  .story-band__inner,
  .story-band__inner--lead {
    justify-content: stretch;
  }

  .story-card {
    min-height: 0;
    --story-card-pad-x: 16px;
    --story-card-pad-y: 24px;
  }

  .story-card__accent {
    top: 12px;
    right: 16px;
  }

  .story-card__title {
    padding-right: calc(var(--accent-pill-w) + 22px);
  }

  .story-card__cta {
    width: auto;
    min-width: min(102px, 100%);
    height: auto;
    min-height: 28px;
    padding: 6px 14px;
  }

  .pillar__accent {
    top: 0;
    right: 16px;
  }

  .pillar__title {
    padding-right: calc(var(--accent-pill-w) + 22px);
  }
  .pillar__text {
    padding-right: calc(var(--accent-pill-w) + 20px);
  }
}

/* --- About our Foundation (Figma node 21:876) --- */

.about {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--pillar-overlap));
  background-color: var(--about-bg);
  padding: calc(120px + var(--pillar-overlap)) var(--nav-pad-x) 120px;
}

.about__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 64px;
}

.about__col {
  flex: 1 1 280px;
  min-width: 0;
}

.about__title {
  margin: 0 0 24px;
  font-family: var(--font-medium);
  font-size: 36px;
  line-height: 42px;
  letter-spacing: -0.02em;
  color: var(--white);
}

.about__copy {
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-family: var(--font-regular);
  font-size: 24px;
  line-height: normal;
  letter-spacing: -0.02em;
  color: var(--white);
}

.about__copy p {
  margin: 0;
}

.about__col--pullquote {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about__quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-medium); /* Intercom Medium */
  font-size: 48px;
  line-height: normal;
  letter-spacing: -0.02em;
  color: var(--teal-strip);
}

.about__quote p {
  margin: 0 0 0.35em;
}

.about__quote p:last-child {
  margin-bottom: 0;
}

.about__attribution {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  font-family: var(--font-medium);
  font-size: 32px;
  line-height: normal;
  letter-spacing: -0.02em;
}

.about__name {
  margin: 0;
  color: var(--white);
  text-transform: uppercase;
}

.about__role {
  margin: 0;
  color: var(--teal-strip);
  text-transform: uppercase;
}

/* --- Social Responsibility band (Figma node 25:1872) --- */

.story-band {
  position: relative;
  z-index: 1;
  padding: 80px var(--nav-pad-x);
  overflow: visible;
  /* Enough height so the portrait + blur read like Figma, not a thin strip */
  min-height: max(
    620px,
    calc(100vw * var(--story-photo-h) / var(--story-photo-w)),
    52vw
  );
}

.story-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  pointer-events: none;
}

.story-band__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}

.story-band--environment {
  --story-photo-w: 2400;
  --story-photo-h: 1100;
}

.story-band__photo--environment {
  object-position: 82% center;
}

.story-band__inner {
  position: relative;
  z-index: 1;
  max-width: var(--hero-max);
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.story-band__inner--lead {
  justify-content: flex-start;
}

/* Story overlay cards — photo shows through ~10% */
.story-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 680px;
  min-height: 340px;
  --accent-pill-w: 54px;
  --accent-pill-h: 76px;
  --story-card-pad-x: clamp(20px, 3.5vw, 36px);
  --story-card-pad-y: clamp(18px, 3vw, 28px);
  padding: var(--story-card-pad-y) var(--story-card-pad-x);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
  background: linear-gradient(
    52.53deg,
    rgb(0 181 194 / 0.9) 2.25%,
    rgb(12 117 133 / 0.9) 72.99%
  );
  color: var(--white);
}

.story-card--forest {
  background: linear-gradient(
    52.53deg,
    rgb(65 125 65 / 0.9) 2.25%,
    rgb(74 102 79 / 0.9) 72.99%
  );
}

.story-card__accent {
  position: absolute;
  top: 0;
  right: var(--story-card-pad-x);
  box-sizing: border-box;
  width: var(--accent-pill-w);
  height: var(--accent-pill-h);
  background-color: #00b8c5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-card__accent--forest {
  background-color: #448843;
}

.story-card__accent img {
  max-width: none;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.story-card--forest .story-card__accent img {
  width: 28px;
  height: 30px;
}

/* Economic Empowerment — horizontal forest → lime card + pill (design ref) */
.story-band--economic {
  --story-photo-w: 1600;
  --story-photo-h: 900;
}

.story-band__photo--economic {
  object-position: center center;
}

.story-card--economic {
  background: linear-gradient(
    to top,
    rgb(142 179 77 / 0.92) 0%,
    rgb(107 158 84 / 0.92) 100%
  );
}

.story-card__accent--economic {
  background-color: #a4c639;
}

.story-card--economic .story-card__accent img {
  width: 26px;
  height: 30px;
}

.story-card--economic .story-card__cta {
  background-color: #448843;
  color: #a8c243;
}

.story-card--economic .story-card__cta:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

.story-card__title {
  margin: 0;
  padding-right: calc(var(--accent-pill-w) + 14px);
  font-family: var(--font-medium);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1;
  letter-spacing: 0;
  color: var(--white);
}

.story-card__body {
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex: 1 1 auto;
  padding-right: calc(var(--accent-pill-w) + 14px);
  font-family: var(--font-regular);
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0;
  color: var(--white);
}

.story-card__body p {
  margin: 0;
}

.story-card__cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  margin-top: auto;
  width: 102px;
  max-width: 100%;
  height: 28px;
  padding: 0 8px;
  border-radius: 100px;
  background-color: var(--story-btn-bg);
  font-family: var(--font-medium);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #00B8C5;
  text-transform: uppercase;
  text-decoration: none;
}

.story-card__cta:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

.story-card--forest .story-card__cta {
  background-color: #a8c243;
  color: #448843;
}

.story-card--forest .story-card__cta:hover {
  text-decoration: none;
  filter: brightness(1.08);
}

/* -------- News & Events — Figma 21:915 (#EDEEEE, pills, calendar card) -------- */

.slider-section {
  box-sizing: border-box;
  width: 100%;
  padding: 120px 80px;
  background-color: #edeeee;
}

.slider-section__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--hero-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 64px;
}

.slider-section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.slider-section__title {
  flex: 1 1 0;
  margin: 0;
  font-family: var(--font-medium);
  font-size: 36px;
  line-height: 42px;
  color: #448843;
  word-wrap: break-word;
}

/* News carousel: no side arrows (Figma); viewport + pills only */
.slider--news {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.slider--news:focus-visible {
  outline: 2px solid #448843;
  outline-offset: 4px;
}

.slider__viewport {
  overflow: hidden;
  width: 100%;
  min-width: 0;
}

.slider__track {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  will-change: transform;
}

.slider__slide {
  flex: 0 0 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  .slider__slide {
    flex: 0 0 calc((100% - 24px) / 2);
  }
}

@media (min-width: 1100px) {
  .slider__slide {
    flex: 0 0 calc((100% - 48px) / 3);
  }
}

.slider__dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin: 64px 0 0;
  padding: 0;
}

.slider__dots[hidden] {
  display: none;
}

.slider__dot {
  width: 82px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 100px;
  background-color: #448843;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.slider__dot:hover {
  filter: brightness(1.08);
}

.slider__dot.is-active {
  background-color: #a8c243;
}

.slider__dot:focus-visible {
  outline: 2px solid #448843;
  outline-offset: 3px;
}

/* Cards */
.slider-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: stretch;
  background: #ffffff;
}

.slider-card--calendar {
  align-self: stretch;
  background: transparent;
}

.slider-card__media {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.slider-card__media--news {
  height: 325px;
  background-color: #e4eae4;
}

.slider-card__media--news img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-card__media--calendar {
  height: 327px;
  background-color: #448843;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-card__date {
  position: absolute;
  top: 0;
  right: 0;
  box-sizing: border-box;
  width: 56px;
  margin: 0;
  padding: 13px 6px;
  background-color: #a8c243;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  font-family: var(--font-medium);
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
}

.slider-card__date-line {
  display: block;
}

.slider-card__calendar-stage {
  position: relative;
  width: 202px;
  height: 202px;
  flex-shrink: 0;
}

.slider-card__calendar-svg {
  display: block;
  width: 100%;
  height: auto;
}

.slider-card__cal-num {
  position: absolute;
  font-family: var(--font-medium);
  text-transform: uppercase;
  text-align: center;
  color: #ffffff;
  pointer-events: none;
}

.slider-card__cal-num--pair {
  left: 18px;
  top: 78px;
  width: 80px;
  font-size: 32px;
  line-height: 1.15;
}

/* Sits inside the small box on the right of the calendar SVG.
   Box in the 202×202 viewBox is at (128, 84) with size 52×44 — centre ≈ (154, 106). */
.slider-card__cal-num--one {
  left: 76.2%;
  top: 52.5%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.slider-card__cal-num--one[data-cal-day] {
  /* Auto-shrink slightly when the number grows to 2 digits */
  font-variant-numeric: tabular-nums;
}

.slider-card__body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
}

.slider-card__body--news {
  padding: 24px;
  gap: 16px;
  background: #ffffff;
  justify-content: flex-end;
}

.slider-card__body--calendar {
  padding: 24px;
  gap: 8px;
  background: #a8c243;
  justify-content: flex-end;
}

.slider-card__title {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 28px;
  line-height: normal;
  word-wrap: break-word;
}

.slider-card__title--news {
  color: #448843;
}

.slider-card__title--calendar {
  color: #4d4d51;
}

.slider-card__cta {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 20px;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
  word-wrap: break-word;
}

.slider-card__cta:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.slider-card__cta--news {
  color: #a8c243;
}

.slider-card__cta--calendar {
  color: #006e1c;
}

@media (max-width: 900px) {
  .slider-section {
    padding: 72px 40px 96px;
  }
}

@media (max-width: 639px) {
  .slider-section {
    padding: 48px 24px 64px;
  }

  .slider-section__inner {
    gap: 40px;
  }

  .slider-section__title {
    font-size: 28px;
    line-height: 34px;
  }

  .slider__dots {
    margin-top: 40px;
  }

  .slider__dot {
    width: 56px;
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slider__track {
    transition: none;
  }
}

/* -------- Board of Trustees — Figma ~28:2118 -------- */

.board {
  box-sizing: border-box;
  width: 100%;
  padding: 120px 80px 0;
  background-color: #ffffff;
  color: var(--story-btn-bg);
}

.board__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--hero-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 64px;
}

.board__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.board__title {
  flex: 1 1 0;
  margin: 0;
  font-family: var(--font-medium);
  font-size: 36px;
  line-height: 42px;
  color: #448843;
  word-wrap: break-word;
}

.board__members {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  align-self: stretch;
  gap: 24px;
}

.board-member {
  flex: 1 1 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  min-width: 0;
  height: auto;
}

.board-member__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: center;
}

.board-member__name {
  margin: 0;
  width: 100%;
  font-family: var(--font-medium);
  font-size: 36px;
  line-height: 1.2;
  color: #007990;
  text-transform: uppercase;
  word-wrap: break-word;
}

.board-member__role {
  margin: 0;
  width: 100%;
  font-family: var(--font-medium);
  font-size: 26px;
  line-height: 1.25;
  color: #00b8c5;
  text-transform: uppercase;
  word-wrap: break-word;
}

.board-member__photo {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

.board-member__photo img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
}

@media (max-width: 1100px) {
  .board__members {
    flex-wrap: wrap;
    justify-content: center;
  }

  .board-member {
    flex: 1 1 calc(50% - 12px);
    max-width: 420px;
    height: auto;
  }
}

@media (max-width: 900px) {
  .board {
    padding: 72px 40px 0;
  }

  .board-member__name {
    font-size: 28px;
  }

  .board-member__role {
    font-size: 22px;
  }
}

@media (max-width: 700px) {
  .board__members {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .board-member {
    flex: 1 1 auto;
    max-width: 400px;
    width: 100%;
    min-height: unset;
    height: auto;
  }

  .board-member__photo {
    flex: 0 1 auto;
    max-height: min(520px, 70vh);
  }
}

@media (max-width: 639px) {
  .board {
    padding: 48px 24px 0;
  }

  .board__inner {
    gap: 40px;
  }

  .board__title {
    font-size: 28px;
    line-height: 34px;
  }
}

/* -------- Site footer — teal band (#018080) -------- */

.site-footer {
  box-sizing: border-box;
  width: 100%;
  padding: 80px var(--nav-pad-x);
  background-color: #018080;
  color: #ffffff;
}

.site-footer__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--hero-max);
  margin-inline: auto;
}

.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 48px;
}

.site-footer__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 64px;
  min-width: min(100%, 280px);
  flex: 1 1 auto;
}

.site-footer__brand {
  display: block;
  flex-shrink: 0;
  text-decoration: none;
}

.site-footer__brand:hover {
  text-decoration: none;
  opacity: 0.92;
}

.site-footer__logo {
  display: block;
  /* Same SVG as header — explicit size so global img { max-width:100% } won’t collapse it */
  width: 328px;
  height: auto;
  max-width: none;
  max-height: 150px;
  flex-shrink: 0;
}

.site-footer__addresses {
  max-width: min(423px, 100%);
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}

@media (min-width: 901px) {
  .site-footer__addresses {
    padding-top: 70px;
    max-width: 423px;
  }
}

.site-footer__line {
  margin: 0 0 0.25em;
}

.site-footer__line:last-child {
  margin-bottom: 0;
}

.site-footer__line--ar {
  font-family: var(--font-ar);
}

.site-footer__site-link {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__site-link:hover {
  text-decoration: underline;
}

.site-footer__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  flex-shrink: 0;
}

.site-footer__heading {
  margin: 0;
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00b8c5;
  text-decoration: none;
}

.site-footer__social-link:hover {
  text-decoration: none;
  opacity: 0.88;
}

.site-footer__icon {
  display: block;
  flex-shrink: 0;
}

.site-footer__icon--x {
  width: 28px;
  height: 28px;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  font-family: var(--font-regular);
  font-size: 12px;
  line-height: 24px;
  color: #ffffff;
}

.site-footer__legal a {
  color: #ffffff;
  text-decoration: none;
}

.site-footer__legal a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__copy {
  color: #ffffff;
}

.site-footer__copy strong {
  font-family: var(--font-medium);
}

@media (max-width: 900px) {
  .site-footer {
    padding: 64px var(--nav-pad-x);
  }

  .site-footer__row {
    flex-direction: column;
    align-items: stretch;
  }

  .site-footer__left {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-footer__aside {
    align-items: flex-start;
    justify-content: flex-start;
  }

  .site-footer__legal {
    justify-content: flex-start;
  }

  .site-footer__addresses {
    padding-top: 0;
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 639px) {
  .site-footer {
    padding: 48px var(--nav-pad-x);
  }

  .site-footer__left {
    gap: 40px;
  }

  .site-footer__social {
    gap: 32px;
  }

  .site-footer__logo {
    width: min(328px, 100%);
    max-width: 100%;
    height: auto;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE NAV — hamburger toggle + slide-down drawer
   ───────────────────────────────────────────────────────────────────────────── */

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  z-index: 110;
  -webkit-appearance: none;
  appearance: none;
}

.nav__toggle-bar {
  display: block;
  width: 26px;
  height: 2.5px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

body.nav-open .nav__toggle-bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
body.nav-open .nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
body.nav-open .nav__toggle-bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE DESIGN SYSTEM (≤900px) — consistent rhythm across all sections
   ─────────────────────────────────────────────────────────────────────────────
   Tokens:
     --m-pad-x:        20px   (horizontal padding for sections + cards)
     --m-section-pad:  64px   (vertical padding between sections)
     --m-card-pad:     28px 24px
     --m-gap:          20px   (gap between stacked items)
     --m-h1:           clamp(28px, 7vw, 38px)
     --m-h2:           clamp(24px, 6vw, 32px)
     --m-h3:           clamp(18px, 4.5vw, 22px)
     --m-body:         16px / 1.7
*/

@media (max-width: 900px) {
  :root {
    --nav-pad-x: 20px;
    --site-header-offset: 76px;
  }

  body { font-size: 16px; line-height: 1.6; }

  /* ── HEADER / NAV ─────────────────────────────────────────────────────── */
  .site-header { padding-left: 18px; padding-right: 18px; }
  .site-header__inner { padding: 10px 0; }
  /* When mobile menu is open, force the header to be solid so the drawer
     behind it doesn't bleed through. */
  body.nav-open .site-header {
    background-color: #0c3d45;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  }

  /* Force the row to be: brand on the start, toggle on the end.
     `.nav__right` is the drawer — fixed-positioned, out of row flow. */
  .nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
  }
  .nav__brand {
    margin: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
  }

  .nav__logo { width: 152px; height: auto; }
  .nav__toggle {
    display: flex;
    margin-inline-start: auto; /* Pull hamburger to the far end of the row */
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.08);
    transition: background-color 0.2s ease;
    flex-shrink: 0;
  }
  .nav__toggle:hover,
  body.nav-open .nav__toggle { background-color: rgba(255, 255, 255, 0.18); }

  /* Mobile drawer — fills the entire viewport below the header.
     Sits BEHIND the header (z-index 95 vs header 100), so the morphed-X
     hamburger stays visible on top and works as the close button. */
  .nav__right {
    position: fixed;
    top: var(--site-header-offset);
    left: 0;
    right: 0;
    /* Fill the rest of the viewport — dvh handles iOS chrome shrink */
    height: calc(100vh - var(--site-header-offset));
    height: calc(100dvh - var(--site-header-offset));
    z-index: 95;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 22px 22px 48px;
    background-color: #0c3d45;
    /* Hidden state: slide up + fade so the open animation has motion */
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform 0.3s ease, opacity 0.22s ease, visibility 0.22s ease;
  }
  body.nav-open .nav__right {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  body.nav-open { overflow: hidden; }

  /* MB Group badge — small, centered above the link list. */
  .nav__top-bar {
    justify-content: center;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .nav__mb-group { width: 130px; height: auto; opacity: 0.85; }

  /* Larger, easier-to-tap menu items. */
  .nav__links {
    flex-direction: column;
    gap: 0 !important;
    width: 100%;
    padding: 0;
    margin: 0;
    align-items: stretch;
    font-size: 19px;
    line-height: 1.3;
    text-align: left;
  }
  body.is-rtl .nav__links { text-align: right; }
  .nav__links li {
    padding: 16px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    list-style: none;
  }
  .nav__links li:last-of-type {
    border-bottom: 0;
    padding-bottom: 22px;
  }
  .nav__links a {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
    transition: color 0.18s ease, transform 0.18s ease;
  }
  .nav__links a:hover { color: #00b8c5; transform: translateX(3px); }
  body.is-rtl .nav__links a:hover { transform: translateX(-3px); }

  /* ── Mobile accordion for parent items with children ─────────────────── */
  .nav__item--has-children .nav__parent-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }
  .nav__submenu {
    /* Cancel desktop dropdown styles */
    position: static;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    opacity: 1;
    visibility: hidden;
    transform: none;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease, visibility 0s linear 0.28s, margin 0.28s ease;
    margin: 0;
    font-size: 16px;
  }
  .nav__item--open > .nav__submenu {
    visibility: visible;
    max-height: 600px;
    margin: 8px 0 4px;
    transition: max-height 0.32s ease, visibility 0s;
  }
  .nav__submenu li { border-bottom: 0; padding: 0; }
  .nav__submenu a {
    padding: 12px 6px 12px 22px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    white-space: normal;
  }
  body.is-rtl .nav__submenu a { padding: 12px 22px 12px 6px; }
  .nav__submenu a:hover { color: #00b8c5; background: transparent; transform: none; }

  /* Last item wraps "Contact Us" + language pill, stacked vertically.
     Use a flex column so we can centre ONLY the lang toggle via align-self. */
  .nav__links-last {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  body.is-rtl .nav__links-last { text-align: right; }
  /* Mobile lang toggle — identical pill to the desktop SCROLLED state.
     Selector includes `.nav__links` to outrank the generic `.nav__links a`
     rule above which would otherwise stretch it to full width.
     `align-self: center` centres just this pill while the sibling
     "Contact Us" link keeps its default left/right alignment. */
  .nav__links .nav__lang-toggle {
    position: static;
    transform: none;
    margin: 14px 0 4px;
    display: inline-flex;
    width: auto;
    align-self: center;
    align-items: center;
    padding: 5px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: #ffffff;
    opacity: 0.9;
  }
  .nav__links .nav__lang-toggle[lang="ar"] {
    font-size: 15px;
    padding: 4px 14px 6px;
  }
  .nav__links .nav__lang-toggle:hover {
    background-color: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.6);
    opacity: 1;
  }

  /* ── HERO ─────────────────────────────────────────────────────────────── */
  .hero-shell { min-height: auto; }
  .hero { padding-left: 20px; padding-right: 20px; }
  .hero__inner {
    padding: calc(var(--site-header-offset, 80px) + 32px) 0 56px;
    gap: 32px;
  }
  .hero__headline {
    font-size: clamp(28px, 7vw, 38px);
    line-height: 1.2;
    max-width: 100%;
    text-align: left;
  }
  .hero__headline span { display: block; }

  /* Pillars stack 1-up on mobile */
  .pillars {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 16px;
  }
  .pillar {
    min-height: auto;
    padding: 28px 24px;
  }
  .pillar__title {
    font-size: clamp(20px, 5vw, 24px);
    line-height: 1.25;
  }
  .pillar__text {
    font-size: 15px;
    line-height: 1.65;
  }
  .pillar__accent {
    top: 0;
    right: 20px;
  }
  .pillar__text {
    padding-right: calc(var(--accent-pill-w) + 20px);
  }

  /* ── ABOUT ────────────────────────────────────────────────────────────── */
  .about { padding: 64px 20px; }
  .about__inner {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .about__title {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.25;
    margin-bottom: 16px;
  }
  .about__copy { font-size: 15px; line-height: 1.7; }
  .about__copy p { margin: 0 0 14px; }
  .about__quote { font-size: 16px; line-height: 1.6; }
  .about__name { font-size: 16px; }
  .about__role { font-size: 14px; opacity: 0.85; }

  /* ── STORY BANDS ──────────────────────────────────────────────────────── */
  .story-band { padding: 0; }
  .story-band__inner,
  .story-band__inner--lead {
    padding: 64px 20px;
    justify-content: center;
  }
  .story-card {
    --accent-pill-w: 48px;
    --accent-pill-h: 64px;
    --story-card-pad-x: 22px;
    --story-card-pad-y: 28px;
    min-height: auto;
    width: 100%;
    max-width: 100%;
    padding: 28px 22px;
  }
  .story-card__accent {
    top: 0;
    right: 18px;
  }
  .story-card__title {
    font-size: clamp(22px, 5.5vw, 28px);
    line-height: 1.2;
    padding-right: calc(var(--accent-pill-w) + 18px);
    margin-bottom: 12px;
  }
  .story-card__body {
    padding-right: calc(var(--accent-pill-w) + 18px);
  }
  .story-card__body p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 12px;
  }
  .story-card__cta {
    margin-top: 16px;
    height: auto;
    min-height: 32px;
    padding: 8px 18px;
    font-size: 12px;
  }

  /* ── NEWS SLIDER ──────────────────────────────────────────────────────── */
  .slider-section { padding: 64px 20px; }
  .slider-section__inner { gap: 32px; }
  .slider-section__head { padding: 0; }
  .slider-section__title {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.2;
  }
  .slider__viewport { overflow: hidden; }
  .slider__track { gap: 16px; }
  .slider__slide { min-width: 100%; }
  .slider-card { width: 100%; }
  .slider-card__media img { width: 100%; height: auto; }
  .slider-card__title {
    font-size: 17px;
    line-height: 1.35;
  }
  .slider-card__cta { font-size: 13px; }
  .slider__dots { gap: 8px; padding-top: 8px; justify-content: center; }
  .slider__dot { width: 28px; height: 6px; border-radius: 3px; }

  /* ── BOARD (TRUSTEES) ─────────────────────────────────────────────────── */
  .board { padding: 64px 20px; }
  .board__inner { gap: 40px; }
  .board__title {
    font-size: clamp(24px, 6vw, 32px);
    line-height: 1.2;
    text-align: center;
  }
  .board__members {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .board-member { text-align: center; }
  .board-member__meta { gap: 4px; }
  .board-member__name {
    font-size: clamp(18px, 4.5vw, 22px);
    line-height: 1.3;
  }
  .board-member__role { font-size: 14px; opacity: 0.9; }
  .board-member__photo img {
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  /* ── FOOTER ───────────────────────────────────────────────────────────── */
  .site-footer { padding: 56px 20px; }
  .site-footer__row {
    flex-direction: column;
    gap: 32px;
    align-items: center;
    text-align: center;
  }
  .site-footer__left {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }
  .site-footer__logo { width: 220px; }
  .site-footer__addresses {
    text-align: center;
    padding-top: 0;
    max-width: 100%;
  }
  .site-footer__line { font-size: 14px; line-height: 1.6; }
  .site-footer__aside {
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .site-footer__heading { font-size: 16px; }
  .site-footer__social { gap: 24px; justify-content: center; }
  .site-footer__legal {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
    font-size: 13px;
    text-align: center;
  }
  .site-footer__copy { display: block; width: 100%; margin-top: 4px; }
}

/* ─── EXTRA SMALL (≤500px) — finer adjustments ──────────────────────────── */
@media (max-width: 500px) {
  .site-header { padding-left: 16px; padding-right: 16px; }
  .nav__logo { width: 110px; }
  .nav__mb-group { width: 130px; }

  .hero { padding-left: 16px; padding-right: 16px; }
  .hero__headline { font-size: clamp(24px, 7vw, 32px); }

  .about,
  .slider-section,
  .board,
  .site-footer { padding-left: 16px; padding-right: 16px; }

  .story-band__inner,
  .story-band__inner--lead { padding-left: 16px; padding-right: 16px; }

  .story-card { padding: 24px 18px; }
  .story-card__title { font-size: clamp(20px, 5.5vw, 24px); }

  .pillar { padding: 24px 20px; }

  .site-footer__logo { width: 180px; }
}

/* ─── RTL mobile adjustments ────────────────────────────────────────────── */
@media (max-width: 900px) {
  body.is-rtl .nav__top-bar { justify-content: center; }
  body.is-rtl .nav__links,
  body.is-rtl .nav__links li { text-align: right; }
  body.is-rtl .hero__headline { text-align: right; }
  body.is-rtl .pillar__accent { right: 20px; left: auto; }
  body.is-rtl .story-card__accent { right: 18px; left: auto; }
  body.is-rtl .story-card__title { padding-left: 0; padding-right: calc(var(--accent-pill-w) + 18px); }
  body.is-rtl .about__inner,
  body.is-rtl .site-footer__row,
  body.is-rtl .site-footer__left,
  body.is-rtl .site-footer__aside { text-align: center; }
  body.is-rtl .board-member,
  body.is-rtl .board-member__meta,
  body.is-rtl .board-member__name,
  body.is-rtl .board-member__role { text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Calendar modal — opened from the news-slider "See calendar" card
   ──────────────────────────────────────────────────────────────────────────── */
.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cal-modal[hidden] { display: none; }

.cal-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 61, 69, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

.cal-modal__panel {
  position: relative;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  color: #0c3d45;
  padding: 32px 28px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  animation: cal-modal-in 0.22s ease;
}

@keyframes cal-modal-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.cal-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(12, 61, 69, 0.08);
  color: #0c3d45;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.cal-modal__close:hover { background: rgba(12, 61, 69, 0.16); }
body.is-rtl .cal-modal__close { right: auto; left: 12px; }

.cal-modal__header {
  margin-bottom: 18px;
}
.cal-modal__eyebrow {
  margin: 0 0 4px;
  font-family: var(--font-medium);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00b8c5;
}
.cal-modal__title {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #0c3d45;
}

/* --- Calendar widget inside the modal ------------------------------------ */
.cal-widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cal-widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cal-widget__nav {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(12, 61, 69, 0.18);
  border-radius: 50%;
  color: #0c3d45;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}
.cal-widget__nav:hover {
  background: #00b8c5;
  border-color: #00b8c5;
  color: var(--white);
}
.cal-widget__month {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #0c3d45;
  text-align: center;
  flex: 1;
}

.cal-widget__weekdays,
.cal-widget__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-widget__weekday {
  font-family: var(--font-medium);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6c7e85;
  text-align: center;
  padding: 6px 0;
}
.cal-widget__day {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #0c3d45;
  font-family: var(--font-medium);
  font-size: 14px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cal-widget__day:hover:not(:disabled):not(.cal-widget__day--muted) {
  background: rgba(0, 184, 197, 0.10);
  border-color: rgba(0, 184, 197, 0.35);
}
.cal-widget__day--muted {
  color: #c0cbcf;
  cursor: default;
}
.cal-widget__day--today {
  background: rgba(0, 184, 197, 0.14);
  color: #00b8c5;
}
.cal-widget__day--has-event {
  position: relative;
}
.cal-widget__day--has-event::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #a8c243;
}
.cal-widget__day--has-event.cal-widget__day--selected::after { background-color: #ffffff; }
.cal-widget__day--selected {
  background: #00b8c5 !important;
  border-color: #00b8c5 !important;
  color: var(--white) !important;
}

.cal-widget__hint {
  margin: 8px 0 0;
  font-family: var(--font-regular);
  font-size: 13px;
  color: #6c7e85;
  text-align: center;
  border-top: 1px solid #e2e6e6;
  padding-top: 12px;
}

/* Body scroll lock when modal is open */
body.cal-modal-open { overflow: hidden; }

@media (max-width: 480px) {
  .cal-modal__panel { padding: 28px 18px 22px; }
  .cal-widget__day { height: 38px; font-size: 13px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Scroll-to-top floating button
   ──────────────────────────────────────────────────────────────────────────── */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #00b8c5;
  color: var(--white);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 184, 197, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}
.to-top:hover {
  background-color: #0c7585;
  transform: translateY(8px);
}
body.show-top-btn .to-top {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top svg {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}
body.is-rtl .to-top { right: auto; left: 24px; }

@media (max-width: 639px) {
  .to-top { width: 44px; height: 44px; right: 16px; bottom: 16px; }
  body.is-rtl .to-top { left: 16px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Inner pages (Social / Environment / Economic / News-Events)
   ──────────────────────────────────────────────────────────────────────────── */

/* --- Page hero -------------------------------------------------------------- */
.page-hero {
  position: relative;
  padding: calc(var(--site-header-offset) + 100px) var(--nav-pad-x) 120px;
  background: linear-gradient(140deg, #00b8c5 0%, #0c7585 100%);
  color: var(--white);
  overflow: hidden;
  /* No image → uniform, moderate height (~half viewport). Pages with an
     image override to 100vh via .page-hero--has-bg below. */
  min-height: 55vh;
  max-height: 620px;
}
/* Pages with a photo/slider hero take the full viewport so the image
   feels prominent — same feel as the home hero. */
.page-hero--has-bg {
  min-height: 100vh;
  max-height: 900px;
}
@media (max-width: 640px) {
  .page-hero { min-height: 480px; max-height: 540px; }
  .page-hero--has-bg { min-height: 90vh; max-height: none; }
}
.page-hero--forest { background: linear-gradient(140deg, #4d8a4d 0%, #2f5c3a 100%); }
.page-hero--moss   { background: linear-gradient(140deg, #a8c243 0%, #6b9e54 100%); }
.page-hero--sand   { background: linear-gradient(140deg, #cfa86b 0%, #8a6b3f 100%); }

/* When a bg image is provided, suppress the solid gradient and let the image
   + overlay do the work. */
.page-hero--has-bg { background: #0c3d45; }

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.page-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Full-bleed photo — cover mode with center anchoring. Section is
     tall enough (see .page-hero min-height below) so 3:2 / 16:9 client
     photos show almost fully with only small edge crop. */
  object-fit: cover;
  object-position: center center;
}
.page-hero__gradient {
  position: absolute;
  inset: 0;
  z-index: 3;  /* Above all photos (slider active photo goes up to z:1) */
  pointer-events: none;
  /* Light overlay — subtle tint that keeps text readable while letting
     the photo colours come through. */
  background: linear-gradient(135deg, rgba(0, 130, 145, 0.42) 0%, rgba(12, 61, 69, 0.55) 100%);
}
.page-hero__gradient--forest { background: linear-gradient(135deg, rgba(34, 95, 53, 0.45) 0%, rgba(12, 50, 40, 0.58) 100%); }
.page-hero__gradient--moss   { background: linear-gradient(135deg, rgba(118, 145, 60, 0.45) 0%, rgba(74, 110, 43, 0.58) 100%); }
.page-hero__gradient--sand   { background: linear-gradient(135deg, rgba(180, 142, 89, 0.45) 0%, rgba(108, 80, 50, 0.58) 100%); }

/* Inner-page hero slider — same crossfade behaviour as home. */
.page-hero--slider .page-hero__photo {
  opacity: 0;
  z-index: 0;
  transition: opacity 700ms ease-in-out;
}
.page-hero--slider .page-hero__photo.is-active {
  opacity: 1;
  z-index: 1;
}

/* ═════════════════════════════════════════════════════════════════════
   Hero slider arrows — compact square buttons, subtle dark tint.
   ═════════════════════════════════════════════════════════════════════ */
.mbf-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: rgba(12, 61, 69, 0.55);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  opacity: 0.85;
}
.mbf-hero-arrow:hover {
  background: rgba(0, 184, 197, 0.9);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-50%) scale(1.05);
  opacity: 1;
}
.mbf-hero-arrow:focus-visible {
  outline: 2px solid #a4c639;
  outline-offset: 3px;
  opacity: 1;
}
.mbf-hero-arrow--prev { left: 20px; }
.mbf-hero-arrow--next { right: 20px; }
/* Home arrows sit slightly higher — home hero has pillars near the bottom. */
.mbf-hero-arrow--home { top: 42%; }
.mbf-hero-arrow svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .mbf-hero-arrow { width: 32px; height: 32px; }
  .mbf-hero-arrow svg { width: 14px; height: 14px; }
  .mbf-hero-arrow--prev { left: 10px; }
  .mbf-hero-arrow--next { right: 10px; }
}
/* RTL — swap prev/next sides AND flip the chevron icons so the arrows
   point in the intuitive reading direction (prev = back, next = forward). */
body.is-rtl .mbf-hero-arrow--prev { left: auto; right: 20px; }
body.is-rtl .mbf-hero-arrow--next { right: auto; left: 20px; }
body.is-rtl .mbf-hero-arrow svg { transform: scaleX(-1); }
@media (max-width: 640px) {
  body.is-rtl .mbf-hero-arrow--prev { right: 10px; }
  body.is-rtl .mbf-hero-arrow--next { left: 10px; }
}
/* Static single-image inner-page hero: keep it visible with a subtle
   fade-in on load. */
.page-hero:not(.page-hero--slider) .page-hero__photo {
  animation: mbf-hero-fadein 1.2s ease-out both;
}
@keyframes mbf-hero-fadein {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--hero-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.page-hero__accent {
  width: 56px;
  height: 74px;
  background-color: #00b8c5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.page-hero__accent--forest { background-color: #448843; }
.page-hero__accent--moss   { background-color: #a8c243; }
.page-hero__accent img { width: 28px; height: 28px; object-fit: contain; }

/* --- Compact hero variant (legal, contact, secondary pages) ---------------
   Same theme dark-teal background as the main hero so the white nav stays
   readable, just with reduced height and no full-bleed photo. */
.page-hero--compact {
  min-height: auto;
  padding: calc(var(--site-header-offset) + 56px) var(--nav-pad-x) 72px;
  background: linear-gradient(135deg, #00b8c5 0%, #0c7585 60%, #0c3d45 100%);
  color: var(--white);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.page-hero--compact.page-hero--forest { background: linear-gradient(135deg, #4d8a4d 0%, #2f5c3a 60%, #15463a 100%); }
.page-hero--compact.page-hero--moss   { background: linear-gradient(135deg, #a8c243 0%, #6b9e54 60%, #4a6e2b 100%); }
.page-hero--compact .page-hero__gradient { display: none; }
.page-hero--compact .page-hero__accent {
  width: 44px;
  height: 58px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.page-hero--compact .page-hero__accent img { width: 22px; height: 22px; }
.page-hero--compact .page-hero__eyebrow { opacity: 0.85; }
.page-hero--compact .page-hero__title {
  font-size: clamp(28px, 4vw, 44px);
  color: var(--white);
}
.page-hero--compact .page-hero__lead {
  font-size: clamp(16px, 1.5vw, 18px);
  color: rgba(255, 255, 255, 0.88);
  max-width: 700px;
}

.page-hero__eyebrow {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}

.page-hero__title {
  margin: 0;
  font-family: var(--font-medium);
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 900px;
}

.page-hero__lead {
  margin: 0;
  max-width: 760px;
  font-family: var(--font-regular);
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.5;
  letter-spacing: -0.01em;
}

/* --- Page intro (WP-editor body) ------------------------------------------- */
.page-intro {
  background-color: #f7f7f5;
  padding: 96px var(--nav-pad-x);
  color: #2c4047;
  position: relative;
}
/* Optional dark variants — opt in by adding modifier; default is light */
.page-intro--teal   { background-color: #0c3d45; color: var(--white); }
.page-intro--forest { background-color: #15463a; color: var(--white); }
.page-intro--moss   { background-color: #2c4a23; color: var(--white); }

.page-intro__inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}
.page-intro__inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 4px;
  background-color: #00b8c5;
}
.page-intro--forest .page-intro__inner::before { background-color: #a8c243; }
.page-intro--moss   .page-intro__inner::before { background-color: #fff; }
.page-intro--teal   .page-intro__inner::before { background-color: #a8c243; }

.page-intro__body {
  padding-top: 32px;
  font-family: var(--font-regular);
  font-size: 20px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.page-intro__body p { margin: 0; }
.page-intro__body a { color: #00b8c5; text-decoration: underline; }
.page-intro--teal .page-intro__body a,
.page-intro--forest .page-intro__body a,
.page-intro--moss .page-intro__body a { color: #fff; }
body.is-rtl .page-intro__inner::before { left: auto; right: 0; }

/* --- Stats strip ----------------------------------------------------------- */
.stats-strip {
  background-color: #0c3d45;
  padding: 96px var(--nav-pad-x);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.stats-strip--forest { background-color: #1e3f2c; }
.stats-strip--moss   { background-color: #3b502c; }

/* Subtle decorative accent stripe */
.stats-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #00b8c5 0%, #448843 50%, #a8c243 100%);
}

.stats-strip__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  align-items: stretch;
}
.stats-strip__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 28px 24px;
  position: relative;
}
.stats-strip__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 4px;
  background-color: #00b8c5;
}
.stats-strip--forest .stats-strip__item::before { background-color: #a8c243; }
.stats-strip--moss   .stats-strip__item::before { background-color: #00b8c5; }

.stats-strip__number {
  font-family: var(--font-medium);
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.stats-strip__label {
  font-family: var(--font-regular);
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.78);
}
body.is-rtl .stats-strip__item::before { left: auto; right: 0; }

/* --- Program cards (3-up) — light section + white cards with colored accent  */
.program-section {
  background-color: #f0f3f0;
  padding: 110px var(--nav-pad-x);
  position: relative;
}
.program-section--teal,
.program-section--forest,
.program-section--moss { /* modifier now sets the ACCENT color for cards, not the section bg */
  background-color: #f0f3f0;
}
.program-section--forest { background-color: #eef3ea; }
.program-section--moss   { background-color: #f3f4e8; }

.program-section__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.program-section__heading {
  margin: 0;
  font-family: var(--font-medium);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #0c3d45;
  max-width: 760px;
}

.program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.program-card {
  position: relative;
  padding: 36px 30px 32px;
  background: var(--white);
  color: #2c4047;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 280px;
  box-shadow: 0 4px 16px rgba(12, 61, 69, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid transparent;
}
.program-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #00b8c5;
  transition: height 0.25s ease;
}
.program-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(12, 61, 69, 0.12);
}
.program-card:hover::before { height: 6px; }

.program-card--forest::before { background-color: #448843; }
.program-card--moss::before   { background-color: #a8c243; }

.program-card__icon {
  width: 56px;
  height: 56px;
  background-color: #00b8c5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.program-card--forest .program-card__icon { background-color: #448843; }
.program-card--moss   .program-card__icon { background-color: #a8c243; }
.program-card__icon img { width: 28px; height: 28px; object-fit: contain; filter: brightness(0) invert(1); }

.program-card__title {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #0c3d45;
}
.program-card__body {
  margin: 0;
  font-family: var(--font-regular);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  color: #4b6168;
}

/* --- Final CTA band -------------------------------------------------------- */
.page-cta {
  background: linear-gradient(140deg, #00b8c5 0%, #0c7585 100%);
  padding: 96px var(--nav-pad-x);
  color: var(--white);
}
.page-cta--forest { background: linear-gradient(140deg, #4d8a4d 0%, #2f5c3a 100%); }
.page-cta--moss   { background: linear-gradient(140deg, #a8c243 0%, #6b9e54 100%); }

.page-cta__inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.page-cta__heading {
  margin: 0;
  font-family: var(--font-medium);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.page-cta__body {
  margin: 0;
  font-family: var(--font-regular);
  font-size: 20px;
  line-height: 1.55;
  max-width: 760px;
}
.page-cta__links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.page-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 100px;
  background-color: var(--story-btn-bg);
  color: #00b8c5;
  font-family: var(--font-medium);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.page-cta__btn--forest { background-color: #a8c243; color: #2f5c3a; }
.page-cta__btn--moss   { background-color: #448843; color: #a8c243; }
.page-cta__btn:hover   { filter: brightness(1.08); text-decoration: none; }

/* --- News & Events archive ------------------------------------------------- */
.news-archive {
  background-color: #edeeee;
  padding: 100px var(--nav-pad-x);
  color: #0c3d45;
}
.news-archive__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.news-archive__heading {
  margin: 0;
  font-family: var(--font-medium);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0c3d45;
}
.news-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 32px;
}
.news-archive__card {
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.news-archive__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
}
.news-archive__media {
  position: relative;
  display: block;
  aspect-ratio: 411 / 260;
  overflow: hidden;
}
.news-archive__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-archive__date {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: #00b8c5;
  color: var(--white);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-medium);
  line-height: 1;
}
.news-archive__date-day { font-size: 22px; }
.news-archive__date-month {
  font-size: 11px;
  letter-spacing: 0.12em;
  margin-top: 4px;
}
.news-archive__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.news-archive__title {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #0c3d45;
}
.news-archive__title a { color: inherit; text-decoration: none; }
.news-archive__title a:hover { color: #00b8c5; }
.news-archive__excerpt {
  margin: 0;
  font-family: var(--font-regular);
  font-size: 15px;
  line-height: 1.55;
  color: #4b6168;
  flex: 1;
}
.news-archive__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 100px;
  background-color: var(--story-btn-bg);
  color: #00b8c5;
  font-family: var(--font-medium);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.news-archive__cta:hover { filter: brightness(1.08); }
.news-archive__pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.news-archive__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 100px;
  background-color: var(--white);
  color: #0c3d45;
  font-family: var(--font-medium);
  font-size: 14px;
  text-decoration: none;
}
.news-archive__pagination .page-numbers.current,
.news-archive__pagination .page-numbers:hover {
  background-color: #00b8c5;
  color: var(--white);
}
.news-archive__pagination .page-numbers svg {
  display: block;
  width: 14px;
  height: 14px;
}
.news-archive__empty {
  margin: 0;
  font-family: var(--font-regular);
  font-size: 18px;
  color: #4b6168;
}

/* --- Calendar feature band ------------------------------------------------- */
.calendar-band {
  background-color: #0c3d45;
  padding: 96px var(--nav-pad-x);
  color: var(--white);
}
.calendar-band__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  display: flex;
  gap: 48px;
  align-items: center;
  flex-wrap: wrap;
}
.calendar-band__visual {
  flex: 0 0 160px;
}
.calendar-band__copy {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.calendar-band__title {
  margin: 0;
  font-family: var(--font-medium);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.calendar-band__body {
  margin: 0;
  font-family: var(--font-regular);
  font-size: 18px;
  line-height: 1.5;
  max-width: 540px;
  opacity: 0.9;
}
.calendar-band__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border-radius: 100px;
  background-color: #a8c243;
  color: #2f5c3a;
  font-family: var(--font-medium);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.calendar-band__cta:hover { filter: brightness(1.08); }

/* --- Inner-page mobile tuning --------------------------------------------- */
@media (max-width: 900px) {
  .page-hero,
  .page-intro,
  .stats-strip,
  .program-section,
  .page-cta,
  .news-archive,
  .calendar-band {
    padding-left: 40px;
    padding-right: 40px;
  }
  .page-hero { padding-top: calc(var(--site-header-offset) + 48px); padding-bottom: 64px; }
  .stats-strip__inner { gap: 24px; }
  .program-section,
  .page-cta,
  .news-archive,
  .calendar-band { padding-top: 64px; padding-bottom: 64px; }
  .calendar-band__inner { gap: 24px; }
  .calendar-band__visual { flex: 0 0 100px; }
  .calendar-band__visual svg { width: 100px; height: 100px; }
}

@media (max-width: 639px) {
  .page-hero,
  .page-intro,
  .stats-strip,
  .program-section,
  .page-cta,
  .news-archive,
  .calendar-band {
    padding-left: 24px;
    padding-right: 24px;
  }
  .stats-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .program-grid { grid-template-columns: 1fr; }
  .program-card { min-height: auto; padding: 24px 20px; }
  .news-archive__grid { grid-template-columns: 1fr; gap: 24px; }
  .page-cta__btn { width: 100%; }
  .page-cta__links { width: 100%; flex-direction: column; }
}

/* --- RTL: inner pages -----------------------------------------------------
   Flex columns naturally place flex-start items on the RIGHT in RTL — so we
   do NOT override align-items. We only flip absolutely-positioned elements
   (like the news-card date badge) and ensure text-align follows the body.
   ──────────────────────────────────────────────────────────────────────── */
body.is-rtl .page-hero__inner,
body.is-rtl .program-card,
body.is-rtl .stats-strip__item,
body.is-rtl .news-archive__card,
body.is-rtl .news-archive__body,
body.is-rtl .page-cta__inner,
body.is-rtl .calendar-band__copy { text-align: right; }

body.is-rtl .news-archive__date { left: auto; right: 16px; }
body.is-rtl .program-card__icon { align-self: flex-start; } /* flex-start = right in RTL */
body.is-rtl .news-archive__cta { align-self: flex-start; }   /* flex-start = right in RTL */

/* Calendar band: preserve EN physical layout (visual LEFT, copy RIGHT)
   even in Arabic mode — row-reverse cancels the natural RTL flip. */
body.is-rtl .calendar-band__inner { flex-direction: row-reverse; }

/* ════════════════════════════════════════════════════════════════════════════
   Legal pages (Privacy / Terms)
   ──────────────────────────────────────────────────────────────────────────── */
.page-legal {
  background-color: #f7f7f5;
  padding: 96px var(--nav-pad-x);
  color: #0c3d45;
}
.page-legal__inner {
  max-width: 860px;
  margin: 0 auto;
}
.page-legal__body {
  background-color: var(--white);
  padding: 56px 48px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  font-family: var(--font-regular);
  font-size: 17px;
  line-height: 1.7;
  color: #2c4047;
}
.page-legal__body h2,
.page-legal__body h3 {
  margin: 1.6em 0 0.6em;
  font-family: var(--font-medium);
  color: #0c3d45;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.page-legal__body h2 { font-size: 26px; }
.page-legal__body h3 { font-size: 20px; }
.page-legal__body h2:first-child,
.page-legal__body h3:first-child { margin-top: 0; }
.page-legal__body p { margin: 0 0 1.1em; }
.page-legal__body ul,
.page-legal__body ol { margin: 0 0 1.1em 1.4em; padding: 0; }
.page-legal__body li { margin-bottom: 0.4em; }
.page-legal__body a { color: #00b8c5; text-decoration: underline; }
.page-legal__body a:hover { color: #008c97; }
.page-legal__body strong { font-family: var(--font-medium); color: #0c3d45; }
.page-legal__body em { font-style: italic; }

@media (max-width: 900px) {
  .page-legal { padding: 64px 40px; }
  .page-legal__body { padding: 40px 32px; font-size: 16px; }
}
@media (max-width: 639px) {
  .page-legal { padding: 48px 16px; }
  .page-legal__body { padding: 28px 22px; font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   404 — page not found
   ──────────────────────────────────────────────────────────────────────────── */
.error-404 {
  background-color: #f7f7f5;
  padding: 80px var(--nav-pad-x) 120px;
  color: #0c3d45;
  text-align: center;
}
.error-404__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.error-404__numerals {
  font-family: var(--font-medium);
  font-size: clamp(80px, 18vw, 180px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #00b8c5 0%, #448843 50%, #a8c243 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 8px;
}
.error-404__heading {
  margin: 0;
  font-family: var(--font-medium);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.error-404__body {
  margin: 0;
  font-family: var(--font-regular);
  font-size: 17px;
  line-height: 1.6;
  color: #4b6168;
  max-width: 540px;
}
.error-404__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 16px;
  width: 100%;
  max-width: 560px;
}
.error-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  background-color: var(--white);
  border: 1px solid #e2e6e6;
  color: #0c3d45;
  font-family: var(--font-medium);
  font-size: 15px;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.error-404__btn:hover {
  background-color: #00b8c5;
  border-color: #00b8c5;
  color: var(--white);
  transform: translateY(-2px);
}
.error-404__btn-icon {
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.error-404__btn:hover .error-404__btn-icon { transform: translateX(3px); }
body.is-rtl .error-404__btn:hover .error-404__btn-icon { transform: translateX(-3px); }

@media (max-width: 639px) {
  .error-404 { padding: 56px 24px 80px; }
  .error-404__links { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Contact page
   ──────────────────────────────────────────────────────────────────────────── */
.contact-grid {
  background-color: #edeeee;
  padding: 100px var(--nav-pad-x);
  color: #0c3d45;
}
.contact-grid__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}
.contact-card {
  background-color: var(--white);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.contact-card__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00b8c5;
  color: var(--white);
  border-radius: 50%;
}
.contact-card__title {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #0c3d45;
}
.contact-card__lines {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-card__lines li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.contact-card__label {
  font-family: var(--font-medium);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b6168;
}
.contact-card__line,
.contact-card__lines a {
  margin: 0;
  font-family: var(--font-regular);
  font-size: 17px;
  line-height: 1.5;
  color: #0c3d45;
}
.contact-card__lines a,
.contact-card__line a { color: #00b8c5; text-decoration: none; }
.contact-card__lines a:hover,
.contact-card__line a:hover { text-decoration: underline; }
.contact-card__hours {
  margin: 0;
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 1.5;
  color: #4b6168;
}
.contact-card__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  margin-top: auto;
  border-radius: 100px;
  background-color: var(--story-btn-bg);
  color: #00b8c5;
  font-family: var(--font-medium);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.contact-card__cta:hover { filter: brightness(1.08); }

@media (max-width: 900px) {
  .contact-grid { padding: 64px 40px; }
}
@media (max-width: 639px) {
  .contact-grid { padding: 48px 24px; }
  .contact-grid__inner { grid-template-columns: 1fr; gap: 20px; }
  .contact-card { padding: 28px 24px; }
}

/* --- RTL: legal + contact -------------------------------------------------- */
body.is-rtl .page-legal__body,
body.is-rtl .contact-card { text-align: right; }
body.is-rtl .contact-card__icon { align-self: flex-start; } /* flex-start = right in RTL */
body.is-rtl .contact-card__cta { align-self: flex-start; }

/* ════════════════════════════════════════════════════════════════════════════
   Page feature — image + text split band (like home story-band style)
   ──────────────────────────────────────────────────────────────────────────── */
.page-feature {
  position: relative;
  background-color: var(--about-bg);
  padding: 110px var(--nav-pad-x);
  color: var(--white);
  overflow: hidden;
}
.page-feature--forest { background-color: #1f4b32; }
.page-feature--moss   { background-color: #3f5f24; }

.page-feature__inner {
  position: relative;
  max-width: var(--hero-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

/* Image-position variants — controls source-order placement via CSS grid */
.page-feature--image-right .page-feature__media { grid-column: 2; grid-row: 1; }
.page-feature--image-right .page-feature__copy  { grid-column: 1; grid-row: 1; }
.page-feature--image-left  .page-feature__media { grid-column: 1; grid-row: 1; }
.page-feature--image-left  .page-feature__copy  { grid-column: 2; grid-row: 1; }

.page-feature__media {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  background-color: #0c3d45;
}
.page-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-feature__media-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 70px;
  height: 100px;
  background-color: #00b8c5;
}
.page-feature__media-corner--forest { background-color: #448843; }
.page-feature__media-corner--moss   { background-color: #a8c243; }
.page-feature--image-left .page-feature__media-corner { right: auto; left: 0; }

.page-feature__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.page-feature__eyebrow {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00b8c5;
  opacity: 0.95;
}
.page-feature--forest .page-feature__eyebrow { color: #a8c243; }
.page-feature--moss .page-feature__eyebrow   { color: #fff; opacity: 0.9; }

.page-feature__heading {
  margin: 0;
  font-family: var(--font-medium);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.page-feature__body {
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-family: var(--font-regular);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.9);
}
.page-feature__body p { margin: 0; }

.page-feature__stats {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  gap: clamp(20px, 3vw, 48px);
  flex-wrap: wrap;
}
.page-feature__stats li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 3px solid #00b8c5;
  padding-top: 10px;
  min-width: 110px;
}
.page-feature--forest .page-feature__stats li { border-top-color: #a8c243; }
.page-feature--moss   .page-feature__stats li { border-top-color: #fff; }

.page-feature__stat-number {
  font-family: var(--font-medium);
  font-size: clamp(26px, 2.8vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.page-feature__stat-label {
  font-family: var(--font-regular);
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {
  .page-feature { padding: 72px 40px; }
  .page-feature__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .page-feature--image-right .page-feature__media,
  .page-feature--image-left  .page-feature__media { grid-column: 1; grid-row: 1; }
  .page-feature--image-right .page-feature__copy,
  .page-feature--image-left  .page-feature__copy  { grid-column: 1; grid-row: 2; }
  .page-feature__media-corner { width: 56px; height: 80px; }
}
@media (max-width: 639px) {
  .page-feature { padding: 56px 24px; }
  .page-feature__body { font-size: 16px; }
  .page-feature__stats { gap: 18px; }
  .page-feature__stats li { min-width: 90px; }
}

/* RTL: let CSS Grid mirror the layout naturally — in `direction: rtl` the
   grid columns flip, so image-right becomes visually image-left (image on
   the LEFT, copy on the RIGHT). That matches Arabic reading order: text
   first on the right, supporting visual on the left.
   We do NOT override grid-column here on purpose. */
body.is-rtl .page-feature__copy { text-align: right; }
/* The base align-items: flex-start already lines items to the physical RIGHT
   in RTL (cross axis is mirrored), so no override needed. */

/* Media accent corner: keep it on the OUTER edge of the image — i.e. the
   side facing away from the copy. Because the layout mirrors in RTL we
   have to swap which physical edge that is. */
body.is-rtl .page-feature--image-right .page-feature__media-corner { left: 0; right: auto; }
body.is-rtl .page-feature--image-left  .page-feature__media-corner { right: 0; left: auto; }

/* ════════════════════════════════════════════════════════════════════════════
   Single news article
   ──────────────────────────────────────────────────────────────────────────── */
.news-single { display: block; }

.news-single__hero {
  position: relative;
  padding: calc(var(--site-header-offset) + 80px) var(--nav-pad-x) 80px;
  background: linear-gradient(180deg, rgba(12,61,69,0.55) 0%, rgba(12,61,69,0.85) 100%), #0c3d45;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  color: var(--white);
}
.news-single__hero-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.news-single__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-medium);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.news-single__back:hover { color: var(--white); }
.news-single__back-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.news-single__back:hover .news-single__back-icon { transform: translateX(-2px); }
body.is-rtl .news-single__back:hover .news-single__back-icon { transform: translateX(2px); }
.news-single__eyebrow {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
}
.news-single__title {
  margin: 0;
  font-family: var(--font-medium);
  font-size: clamp(30px, 4.5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.news-single__date {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-regular);
  font-size: 15px;
  opacity: 0.85;
}

.news-single__content {
  background-color: #f7f7f5;
  padding: 80px var(--nav-pad-x);
  color: #2c4047;
}
.news-single__content-inner {
  max-width: 820px;
  margin: 0 auto;
  background-color: var(--white);
  padding: 56px 56px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.news-single__excerpt {
  margin: 0 0 28px;
  padding: 0 0 24px;
  border-bottom: 1px solid #e2e6e6;
  font-family: var(--font-medium);
  font-size: 19px;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: #0c3d45;
}
.news-single__body {
  font-family: var(--font-regular);
  font-size: 17px;
  line-height: 1.75;
  color: #2c4047;
}
.news-single__body p { margin: 0 0 1.1em; }
.news-single__body h2,
.news-single__body h3 {
  margin: 1.6em 0 0.5em;
  font-family: var(--font-medium);
  color: #0c3d45;
  line-height: 1.25;
}
.news-single__body h2 { font-size: 24px; }
.news-single__body h3 { font-size: 20px; }
.news-single__body a { color: #00b8c5; text-decoration: underline; }
.news-single__body ul,
.news-single__body ol { margin: 0 0 1.1em 1.4em; padding: 0; }
.news-single__body img { width: 100%; height: auto; margin: 1.2em 0; }
.news-single__body blockquote {
  margin: 1.4em 0;
  padding: 16px 24px;
  border-left: 4px solid #00b8c5;
  background: rgba(0, 184, 197, 0.06);
  font-family: var(--font-medium);
  color: #0c3d45;
  font-size: 18px;
  line-height: 1.5;
}
body.is-rtl .news-single__body blockquote {
  border-left: 0;
  border-right: 4px solid #00b8c5;
}
.news-single__footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #e2e6e6;
}
.news-single__back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-medium);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #00b8c5;
  text-decoration: none;
}
.news-single__back-btn:hover { color: #008c97; }
.news-single__back-btn .news-single__back-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.news-single__back-btn:hover .news-single__back-icon { transform: translateX(-2px); }
body.is-rtl .news-single__back-btn:hover .news-single__back-icon { transform: translateX(2px); }

/* Related news (re-uses .news-archive__* card styles) */
.news-related {
  background-color: #edeeee;
  padding: 80px var(--nav-pad-x);
  color: #0c3d45;
}
.news-related__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.news-related__heading {
  margin: 0;
  font-family: var(--font-medium);
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #0c3d45;
}
.news-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

@media (max-width: 900px) {
  .news-single__hero { padding-top: calc(var(--site-header-offset) + 48px); padding-bottom: 56px; padding-left: 40px; padding-right: 40px; }
  .news-single__content { padding: 56px 40px; }
  .news-single__content-inner { padding: 40px 32px; }
  .news-related { padding: 56px 40px; }
}
@media (max-width: 639px) {
  .news-single__hero { padding-left: 20px; padding-right: 20px; }
  .news-single__content { padding: 40px 16px; }
  .news-single__content-inner { padding: 28px 22px; }
  .news-single__body { font-size: 16px; }
  .news-related { padding: 48px 24px; }
  .news-related__grid { grid-template-columns: 1fr; gap: 20px; }
}

body.is-rtl .news-single__hero-inner { align-items: flex-start; text-align: right; }
body.is-rtl .news-single__content-inner { text-align: right; }
body.is-rtl .news-single__excerpt { text-align: right; }
body.is-rtl .news-single__body { text-align: right; }

/* ════════════════════════════════════════════════════════════════════════════
   Page milestones (About — Our journey)
   ──────────────────────────────────────────────────────────────────────────── */
.page-milestones {
  background-color: var(--white);
  padding: 100px var(--nav-pad-x);
  color: #0c3d45;
}
.page-milestones__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.page-milestones__heading {
  margin: 0;
  font-family: var(--font-medium);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.page-milestones__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  position: relative;
  counter-reset: milestone;
}
.page-milestones__track::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00b8c5 0%, #448843 50%, #a8c243 100%);
  z-index: 0;
}
.page-milestones__item {
  position: relative;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
}
.page-milestones__item::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: var(--white);
  border: 4px solid #00b8c5;
  border-radius: 50%;
  margin-bottom: 16px;
  box-shadow: 0 0 0 6px var(--white);
}
.page-milestones__item:nth-child(2)::before { border-color: #3a8b6a; }
.page-milestones__item:nth-child(3)::before { border-color: #448843; }
.page-milestones__item:nth-child(4)::before { border-color: #7aa44b; }
.page-milestones__item:nth-child(5)::before { border-color: #a8c243; }
.page-milestones__year {
  font-family: var(--font-medium);
  font-size: 22px;
  letter-spacing: 0.04em;
  color: #00b8c5;
}
.page-milestones__item:nth-child(2) .page-milestones__year { color: #3a8b6a; }
.page-milestones__item:nth-child(3) .page-milestones__year { color: #448843; }
.page-milestones__item:nth-child(4) .page-milestones__year { color: #7aa44b; }
.page-milestones__item:nth-child(5) .page-milestones__year { color: #6b9e54; }
.page-milestones__item-title {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #0c3d45;
}
.page-milestones__item-body {
  margin: 0;
  font-family: var(--font-regular);
  font-size: 14px;
  line-height: 1.55;
  color: #4b6168;
}
@media (max-width: 900px) {
  .page-milestones { padding: 64px 40px; }
  .page-milestones__track::before { display: none; }
  .page-milestones__track {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-left: 32px;
    border-left: 2px solid #cfd4d2;
  }
  .page-milestones__item { padding: 0; }
  .page-milestones__item::before {
    position: absolute;
    left: -40px;
    top: 4px;
    margin: 0;
    box-shadow: 0 0 0 4px var(--white);
  }
}
@media (max-width: 639px) {
  .page-milestones { padding: 56px 24px; }
}
body.is-rtl .page-milestones__track { padding-left: 0; }
@media (max-width: 900px) {
  body.is-rtl .page-milestones__track {
    padding-left: 0;
    padding-right: 32px;
    border-left: 0;
    border-right: 2px solid #cfd4d2;
  }
  body.is-rtl .page-milestones__item::before { left: auto; right: -40px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Founder pull-quote (About page)
   ──────────────────────────────────────────────────────────────────────────── */
.founder-quote {
  background-color: #0c3d45;
  padding: 96px var(--nav-pad-x);
  color: var(--white);
}
.founder-quote__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.founder-quote__text {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--font-medium);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #00b8c5;
}
.founder-quote__text p { margin: 0 0 0.4em; }
.founder-quote__text p:last-child { margin-bottom: 0; }
.founder-quote__attribution {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.founder-quote__name {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 20px;
  text-transform: uppercase;
  color: var(--white);
  letter-spacing: -0.01em;
}
.founder-quote__role {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 16px;
  text-transform: uppercase;
  color: #00b8c5;
  letter-spacing: 0.02em;
}
body.is-rtl .founder-quote__inner,
body.is-rtl .founder-quote__attribution { text-align: right; }
@media (max-width: 900px) {
  .founder-quote { padding: 72px 40px; }
}
@media (max-width: 639px) {
  .founder-quote { padding: 56px 24px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Our Trust — full board grid
   ──────────────────────────────────────────────────────────────────────────── */
.trust-grid {
  background-color: #edeeee;
  padding: 100px var(--nav-pad-x);
  color: #0c3d45;
}
.trust-grid__inner {
  max-width: var(--hero-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.trust-grid__heading {
  margin: 0;
  font-family: var(--font-medium);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0c3d45;
}
.trust-grid__members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 36px;
}
.trust-member {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background-color: var(--white);
  padding: 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
}
.trust-member__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 411 / 560;
  overflow: hidden;
  background-color: #d5d8d8;
}
.trust-member__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trust-member__photo-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(140deg, #c8d2cd 0%, #9eb1a9 100%);
}
.trust-member__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}
.trust-member__name {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #0c3d45;
}
.trust-member__role {
  margin: 0;
  font-family: var(--font-medium);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #448843;
}
.trust-grid__empty {
  margin: 0;
  font-family: var(--font-regular);
  color: #4b6168;
}
body.is-rtl .trust-member,
body.is-rtl .trust-member__meta { text-align: right; }
@media (max-width: 900px) {
  .trust-grid { padding: 72px 40px; }
}
@media (max-width: 639px) {
  .trust-grid { padding: 56px 24px; }
  .trust-grid__members { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Contact map iframe
   ──────────────────────────────────────────────────────────────────────────── */
.contact-map {
  display: block;
  width: 100%;
  background-color: #edeeee;
}
.contact-map__frame {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  filter: grayscale(15%);
}
@media (max-width: 639px) {
  .contact-map__frame { height: 360px; }
}

/* Stats strip — each item has a top border accent.  In RTL we want the
   number/label text right-aligned (already inherited) and the border still
   on top (no change needed). */

/* Page CTA buttons sit in a row — in RTL the row reads right-to-left
   naturally, no override needed. */

/* ── Large viewport height caps ─────────────────────────────────────────
   .hero-shell and .story-band use aspect-ratio driven min-heights
   (calc(100vw * photo-h / photo-w)) so their background photos read
   like the Figma comps at 1440-ish widths. On 2K/4K monitors that
   calc balloons past viewport height, leaving huge empty bands. Cap
   the min-height at large widths so sections stay a comfortable
   screen-tall size and the photo covers via object-fit. */

@media (min-width: 1600px) {
  :root {
    --hero-max:  1560px;
    --nav-pad-x: 96px;
  }
  .hero-shell   { min-height: min(92vh, 900px); }
  .story-band   { min-height: min(80vh, 820px); }
}

@media (min-width: 1920px) {
  :root {
    --hero-max:  1720px;
    --nav-pad-x: 112px;
  }
}

@media (min-width: 2200px) {
  :root {
    --hero-max:  1880px;
    --nav-pad-x: 128px;
  }
  .hero-shell   { min-height: min(85vh, 900px); }
  .story-band   { min-height: min(72vh, 800px); }
}

@media (min-width: 2600px) {
  :root {
    --hero-max:  2200px;
    --nav-pad-x: 144px;
  }
}

@media (min-width: 3000px) {
  :root {
    --hero-max:  2560px;
    --nav-pad-x: 160px;
  }
  .hero-shell   { min-height: min(80vh, 900px); }
  .story-band   { min-height: min(64vh, 760px); }
}

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE POLISH — comprehensive tuning across all device sizes.
   Ordered largest → smallest so specificity + inheritance stay clean.
   ══════════════════════════════════════════════════════════════════════ */

/* Tablet landscape / small laptop (1024-1100px) — reduce hero heights
   slightly so single-image inner heroes don't feel overwhelming. */
@media (min-width: 901px) and (max-width: 1100px) {
  .page-hero--has-bg { min-height: 88vh; max-height: 760px; }
  .page-hero { min-height: 50vh; max-height: 560px; }
}

/* Tablet portrait (768-900px) — hero content sits closer to top edge,
   pillars/cards stack to 2 columns naturally via existing grid rules. */
@media (max-width: 900px) {
  .page-hero {
    padding: calc(var(--site-header-offset) + 72px) var(--nav-pad-x) 72px;
    min-height: 44vh;
    max-height: 520px;
  }
  .page-hero--has-bg { min-height: 78vh; max-height: 680px; }
  .page-hero__title {
    font-size: clamp(26px, 5vw, 42px);
    line-height: 1.2;
  }
  .page-hero__lead {
    font-size: clamp(15px, 2.2vw, 18px);
    line-height: 1.55;
  }
  .hero__headline {
    font-size: clamp(28px, 6vw, 48px);
    line-height: 1.18;
  }
  .mbf-hero-arrow--home { top: 45%; }
}

/* Phone landscape / large phone (640-767px) */
@media (max-width: 767px) {
  .page-hero {
    padding: calc(var(--site-header-offset) + 56px) 20px 56px;
    min-height: 400px;
    max-height: 480px;
  }
  .page-hero--has-bg {
    min-height: 72vh;
    max-height: 620px;
  }
}

/* Phone portrait (up to 640px) — tighten padding + smaller arrows,
   ensure hero content fits without cramping. */
@media (max-width: 640px) {
  .page-hero {
    min-height: 360px;
    max-height: 460px;
    padding-top: calc(var(--site-header-offset) + 40px);
    padding-bottom: 40px;
  }
  .page-hero--has-bg {
    min-height: 68vh;
    max-height: none;
  }
  .page-hero__title {
    font-size: clamp(22px, 6vw, 32px);
  }
  .page-hero__lead {
    font-size: 15px;
    line-height: 1.5;
  }
  .page-hero__eyebrow { font-size: 12px; letter-spacing: 1.5px; }
  .hero__headline { font-size: clamp(24px, 7vw, 36px); }
  .hero__inner { padding-top: calc(var(--site-header-offset) + 40px); }

  /* Home hero on mobile — pillars stack, more breathing room. */
  .pillars { gap: 12px; }
  .pillar { padding: 18px 16px; }
  .pillar__title { font-size: 18px; }
  .pillar__text  { font-size: 13.5px; line-height: 1.45; }

  /* Page cards / CTAs — always single column stack, fluid width. */
  .page-cta__links { flex-direction: column; align-items: stretch; }
  .page-cta__btn   { text-align: center; }
}

/* Small phone (up to 480px) — even tighter, single-column everything. */
@media (max-width: 480px) {
  :root { --nav-pad-x: 16px; }
  .page-hero {
    padding-left: 16px;
    padding-right: 16px;
    min-height: 320px;
    max-height: 420px;
  }
  .page-hero--has-bg { min-height: 62vh; }
  .page-hero__title  { font-size: clamp(20px, 6.5vw, 28px); }
  .hero__headline    { font-size: clamp(22px, 7vw, 32px); }
  .mbf-hero-arrow    { width: 30px; height: 30px; }
  .mbf-hero-arrow svg{ width: 12px; height: 12px; }
}

/* Very small phones (up to 360px) — legacy Android / iPhone SE 1st gen. */
@media (max-width: 360px) {
  .page-hero__title { font-size: 20px; }
  .hero__headline   { font-size: 22px; }
  .page-hero__lead  { font-size: 14px; }
}

/* iOS Safari 100vh bug — mobile browsers include the URL bar in 100vh
   causing content to overflow. Prefer dvh (dynamic viewport height)
   when supported; fall back to vh elsewhere. */
@supports (height: 100dvh) {
  .hero-shell,
  .page-hero--has-bg {
    min-height: 100dvh;
  }
  @media (max-width: 640px) {
    .page-hero--has-bg { min-height: 90dvh; }
  }
}