@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  --font: 'Montserrat', sans-serif;
  --sidenav-w: 260px;
  --header-h: 86px;
  /* Gap that right-anchored overlay/story content keeps from the right edge so
     it clears the sidenav. One knob drives every `right:290px` element:
       • sidenav expanded → 290px   • sidenav collapsed → 100px (see below)
       • Arabic / RTL      → 0       (see arbic.css)                            */
  --sidenav-gutter: 290px;
  --design-w: 100dvw;
  --design-h: 100svh;
  --nav-active: rgba(255, 255, 255, 0.24);
  --nav-inactive: rgba(255, 255, 255, 0.08);
  --nav-hover: rgba(255, 255, 255, 0.14);
  --blur-bg: rgba(0, 0, 0, 0.5);
  --card-bg: rgba(0, 0, 0, 0.4);
  --card-border: rgba(255, 255, 255, 0.3);
  --accent: #c9a84c;
  --text-grey: #8f8f8f;
  --xfade: 900ms;
}

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

html,
body {
  width: 100%;
  height: 100%;
  font-family: var(--font);
  color: #fff;
  overflow: hidden;
  background-color: #000;
}

/* Scale design to viewport */
.page-scaler {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--design-w);
  height: var(--design-h);
  transform-origin: top left;
}

.page-wrapper {
  position: relative;
  width: var(--design-w);
  height: var(--design-h);
  overflow: hidden;
}

/* Background image fill */
.page-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.page-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gradient overlays */
.overlay-dark-left {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

.overlay-dark-lr {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0) 4.688%, rgba(0, 0, 0, 0.7) 58.854%);
  pointer-events: none;
  z-index: 1;
}

.overlay-dark-soft {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.3) 58.854%);
  pointer-events: none;
  z-index: 1;
}

.overlay-dark-full {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;
  z-index: 1;
}

/* Scroll down */
.scroll-down {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-grey);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: color 0.3s ease, opacity 0.5s ease, visibility 0.5s;
}

.scroll-down.visible {
  opacity: 1;
  visibility: visible;
}

.scroll-down .hover-svg {
  display: none;
}

.scroll-down:hover {
  color: #fff;
}

.scroll-down:hover .default-svg {
  display: none;
}

.scroll-down:hover .hover-svg {
  display: block;
}

.scroll-down svg {
  width: 24px;
  height: 24px;
}

/* The cue interaction differs by device: a wheel/scroll on desktop, a swipe on
   touch. Show the wording that matches — "SCROLL DOWN TO CONTINUE" on web,
   "SWIPE TO CONTINUE" on mobile. */
.scroll-down .cue-mobile {
  display: none;
}

@media (max-width: 768px) {
  .scroll-down .cue-desktop {
    display: none;
  }

  .scroll-down .cue-mobile {
    display: inline;
  }
}

.prev_arrow {
  position: absolute;
  bottom: 200px;
  z-index: 10;
  left: 0;
  display: inline-block;
  cursor: pointer;
}

/* Language toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 1001;
}

.lang-toggle-btn {
  background: rgba(143, 143, 143, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.69);
  border-radius: 8px;
  /* min-width (not a fixed width) — "English" is noticeably wider than the
     short Arabic label "عربي" it swaps with, and a fixed width clipped it. */
  min-width: 79px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  gap: 4px;
  cursor: pointer;
}

.lang-toggle-btn img {
  width: 16px;
  height: 16px;
}

.lang-toggle-btn span {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.sidenav.collapsed .menu-header-content {
  justify-content: center;
}

/* Content area positioning */
.content-area {
  position: absolute;
  top: 0;
  left: 0;
  right: var(--sidenav-w);
  bottom: 0;
  z-index: 5;
}


/* new styles */
.container {
  /* max-width: 1105px; */
  max-width: calc(100% - 500px);
  margin-left: 140px;
  padding-top: 100px;
  position: relative;
  z-index: 10;
}

.large-title {
  /* font-size: 64px; */
  font-size: clamp(24px, 3.4vw, 64px);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 12px;
}

.vision-mission-cards {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.text {
  font-family: Montserrat;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: #fff;
  text-align: justify;
}

.medium-title {
  font-weight: 700;
  font-size: 36px;
  line-height: 100%;
}

.text-dark {
  color: #000;
}

.text-white {
  color: #fff;
}

blockquote.blockquote {
  padding: 30px 0;
  border-top: 1px solid #84163C;
  border-bottom: 1px solid #84163C;
  margin-top: 30px;
}

.blockquote p {
  color: #1C3768;
  font-weight: 400;
  font-size: 22px;
  text-align: justify;
}

blockquote.blockquote.alt {
  border-top: 1px solid #1C3768;
  border-bottom: 1px solid #1C3768;
}

.blockquote.alt p {
  color: #84163C;
  font-weight: 600;
}

.blockquote p em {
  font-weight: 700;
}

.development p.text {
  font-weight: 500;
  font-size: 16px;
  text-align: justify;
  color: #000;
  margin-top: 30px;
  padding-bottom: 30px;
  border-bottom: 7px solid #84163C;
}

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

.scrollable {
  height: 72vh;
  overflow-y: auto;
  padding-right: 30px;
  margin-top: 20px;
}

.scrollable::-webkit-scrollbar {
  width: 6px;
}

.scrollable::-webkit-scrollbar-track {
  background: #0000004D;
  border-radius: 8px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: #00000080;
  border-radius: 8px;
}

.scrollable img {
  margin: 20px 0;
}

.red_text {
  font-family: Montserrat;
  font-weight: 600;
  font-size: 20px;
  color: #B62947;
  vertical-align: middle;
  margin-bottom: 16px;
}

/* ── RTL Styles ─────────────────────────────────────────────────────────── */

[dir="rtl"] .content-area {
  right: auto;
  left: var(--sidenav-w);
}

[dir="rtl"] .container {
  margin-left: calc(var(--sidenav-w) + 80px);
  margin-right: 140px;
}

[dir="rtl"] .scrollable {
  padding-right: 0;
  padding-left: 30px;
}

[dir="rtl"] .overlay-dark-left {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
}

[dir="rtl"] .overlay-dark-lr {
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 4.688%, rgba(0, 0, 0, 0.7) 58.854%);
}

[dir="rtl"] .overlay-dark-soft {
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0.3) 58.854%);
}

[dir="rtl"] .text {
  text-align: justify;
  direction: rtl;
}

[dir="rtl"] .sidenav {
  left: 0;
  right: auto;
}

[dir="rtl"] body.nav-collapsed .content-area {
  margin-right: 0;
  margin-left: 0;
}

[dir="rtl"] .dropdown-header .menu-label {
  text-align: right;
}

[dir="rtl"] .dropdown-body {
  padding-left: 0;
  padding-right: 16px;
}

[dir="rtl"] .data-table th {
  text-align: right;
}

[dir="rtl"] .prev_arrow {
  right: 0;
  left: auto;
}

[dir="rtl"] .thumb-preview {
  left: auto;
  right: 68px;
}

[dir="rtl"] .pill-active {
  padding-right: 22px;
  padding-left: 30px;
}

[dir="rtl"] .pill-active::after {
  left: auto;
  right: 22%;
}

[dir="rtl"] .disbursements-total-wrap {
  text-align: left;
}

[dir="rtl"] .disbursements-header {
  flex-direction: row-reverse;
}

[dir="rtl"] .large-title,
[dir="rtl"] .medium-title,
[dir="rtl"] .page-title {
  text-align: right;
}

[dir="rtl"] .hero-text-wrap {
  left: auto;
  right: 140px;
  text-align: right;
}

[dir="rtl"] .hero-accent-line {
  right: auto;
  left: 0;
  background: linear-gradient(to right, rgba(201, 168, 76, 0.8), transparent);
}

[dir="rtl"] .statistics_types {
  padding-left: 290px !important;
  padding-right: 140px;
}

[dir="rtl"] .disbursements-side-card {
  float: unset;
  max-width: 45%;
}

[dir="rtl"] .disbursements-side-card.europe {
  float: right;
  max-width: 45%;
}

[dir="rtl"] .mena-sector-link:hover {
  transform: translateX(10px);
}

.home-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0.1) 100%);
}

[dir="rtl"] .home-overlay {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0.1) 100%);
}


.mena-color {
  color: #00948B;
}

.mena-bg {
  background-color: #00948B;
}

.asia-color {
  color: #84C300;
}

.asia-bg {
  background-color: #84C300;
}

.europe-color {
  color: #B60000;
}

.europe-bg {
  background-color: #B60000;
}

.africa-color {
  color: #FFAA00;
}

.africa-bg {
  background-color: #FFAA00;
}

.america-color {
  color: #940C44;
}

.america-bg {
  background-color: #940C44;
}


.blur {
  backdrop-filter: blur(5px);
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.white_to_right {
  background: linear-gradient(to left, rgb(255 255 255 / 80%) 0%, rgba(0, 0, 0, 0.4) 100%);
  position: absolute;
  inset: 0;
}

/* right-aligned story column (matches thematic-*-story.php). Scoped to .tsec
   so the 40% beats responsive.css's later `.container` max-width rule. */
.tsec .story_container {
  max-width: 40%;
  right: var(--sidenav-gutter);
  position: absolute;
}

/* ── Our Partners section (white; one panel shown at a time, scroll steps) ── */
.sec.partners-sec {
  background: #fff;
}

.partners-sec .container.partners {
  padding-top: 90px;
}

.partners-title {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1.15;
  margin-bottom: 6px;
}

/* only the active panel is visible */
.partners-sec .ppanel {
  display: none;
}

.partners-sec .ppanel.active {
  display: block;
  animation: fadeIn 0.4s ease-out;
}

/* Mobile-only consolidated International panel: hidden on desktop. The 3
   .intl-desktop-only panels are hidden on mobile (responsive.css) so each
   viewport shows exactly one version. */
.partners-sec .ppanel.intl-mobile-only,
.partners-sec .ppanel.intl-mobile-only.active {
  display: none;
}

.align_end {
  display: flex;
  justify-content: end;
}

.align_start {
  display: flex;
  justify-content: start;
}

img.chairman {
  width: 500px;
  height: auto;
  position: absolute;
  bottom: 0;
}

.container.flagship_container.aos-init.aos-animate {
  transform: translateY(-50%) translateZ(0);
}

[dir="rtl"] .disbursements-side-card.asia {
  float: unset;
  max-width: 500px;
}

.director {
  position: absolute;
  width: auto;
  height: 690px;
  bottom: 0;
}


.chairman-title {
  font-size: 34px;
  color: #000 !important;
  flex-shrink: 0;
  margin-bottom: 30px;
}

/* ── Chairman / Director sections ── */
.chairman-container {
  margin-left: 430px;
  margin-right: 330px;
  height: 86vh;
  display: flex;
  flex-direction: column;
}

.chairman-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chairman-scroll-area {
  flex: 1;
  overflow-y: auto;
  padding-right: 20px;
  scrollbar-width: thin;
  scrollbar-color: #00968a #e6e6e6;
}

.chairman-scroll-area::-webkit-scrollbar {
  width: 8px;
}

.chairman-scroll-area::-webkit-scrollbar-track {
  background: #ececec;
  border-radius: 8px;
}

.chairman-scroll-area::-webkit-scrollbar-thumb {
  background: #00968a;
  border-radius: 8px;
}

.chairman-scroll-area::-webkit-scrollbar-thumb:hover {
  background: #0c7d73;
}

.chairman-text {
  color: #000 !important;
  font-size: 16px !important;
}

.chairman-signature {
  padding-top: 20px;
  padding-bottom: 20px;
  color: #000;
  position: relative;
}

.chairman-signature b {
  display: block;
  font-size: 18px;
  margin-bottom: 4px;
}

.chairman-signature span {
  display: block;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
}

/* White background on section level so the .bgs fade layer is covered instantly */
.sec[data-nav="chairman"],
.sec[data-nav="director"] {
  background: #fff;
}

.centered-container {
  width: calc(100% - 580px);
  margin: 0 auto;
  padding-top: 100px;
  position: relative;
  z-index: 10;
}

.core_card img {
  width: 40px;
  height: 40px;
  margin-bottom: 15px;
}

.core_card h2 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin: 10px 0;
}

.core_card p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
}


.graph-container {
  background: #fff;
  border-radius: 24px;
  padding: 60px 40px 100px;
  margin-top: 30px;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bars-wrapper {
  display: flex;
  justify-content: space-around;
  height: 400px;
  position: relative;
  z-index: 2;
  border-bottom: 2px solid #1D1D1D;
  padding: 40px 20px 0;
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 8%;
  position: relative;
  height: 100%;
  justify-content: flex-end;
}

.bar-val {
  font-size: 16px;
  font-weight: 700;
  color: #84163C;
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.5s ease;
  flex-shrink: 0;
}

.bar-rect-container {
  width: 100%;
  flex: 1;
  /* Take up remaining height */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bar-rect {
  background: #84163C;
  width: 100%;
  border-radius: 12px 12px 0 0;
  height: 0;
  transition: height 1.2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

.bar-name {
  position: absolute;
  top: calc(100% + 15px);
  font-size: 14px;
  font-weight: 600;
  color: #1D1D1D;
  text-align: center;
}

.bar-group.animated .bar-val {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 1024px) {
  .graph-container {
    padding: 40px 20px 120px;
    min-height: auto;
  }

  .bars-wrapper {
    height: 300px;
  }

  .bar-name {
    font-size: 12px;
    transform: rotate(-45deg);
    transform-origin: top center;
    margin-top: 10px;
  }

  .bar-val {
    font-size: 14px;
  }
}

@media screen and (max-width: 600px) {
  .bars-wrapper {
    height: 250px;
    gap: 5px;
  }

  .bar-rect {
    border-radius: 6px 6px 0 0;
  }

  .bar-group {
    width: 9%;
  }
}

.for_mobile_screen {
  display: none;
}

.chairman_mobile {
  text-align: center;
  margin-bottom: 20px;
}

.chairman_mobile h5 {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
  color: black;
}

.chairman_mobile p {
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  color: black;
}

.nav-close-mobile {
  display: none;
}

/* ── Scroll-section engine (crossfading backgrounds + snap deck) ── */
.bgs {
  /* Absolute (not fixed) inside the non-scrolling, overflow-hidden <body> —
     same pattern as the category overlay's .tbgs. A position:fixed layer is
     repainted every scroll frame on mobile (and jumps as the address bar
     animates), which shows up as a blink; absolute avoids that. The body
     never scrolls (the .deck scrolls internally) so this stays put visually. */
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  transition: opacity var(--xfade) ease;
  will-change: opacity;
}

/* the active background always sits on top so it fades IN over the
   outgoing one — otherwise reverse-scrolling (high→low DOM index) leaves
   the section you came from on top, showing the wrong background */
.bg.is-active {
  opacity: 1;
  z-index: 1;
}

.deck {
  position: relative;
  z-index: 2;
  height: 100svh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: none;
}

.deck::-webkit-scrollbar {
  display: none;
}

/* ── Category sub-deck overlay (slides in from right on the X axis) ── */
.thematic-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.thematic-overlay.open {
  transform: translateX(0);
}

/* background crossfade layer — static within the sliding panel (doesn't
   scroll with the content), so the bg crossfades in place while the content
   scroll-snaps over it, exactly like the deck's .bgs. Content never fades. */
.tbgs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* opaque base so the deck behind never shows through while the two
     .tbg layers crossfade (both are momentarily semi-transparent) */
  background: #000;
}

/* hide the main deck (category list) while the overlay is open so it can't
   bleed through during the background crossfade */
html.overlay-open .deck {
  visibility: hidden;
}

/* the content scroller: snaps vertically over the static background layer
   (same pattern as the deck — JS scrollTo + mandatory snap to settle) */
.tscroll {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: none;
}

.tscroll::-webkit-scrollbar {
  display: none;
}

.tbg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  transition: opacity var(--xfade) ease;
  will-change: opacity;
}

.tbg.is-active {
  opacity: 1;
  z-index: 1;
}

/* Every story slide's background photo is softly blurred (matching the
   reference design) — the first .tbg in each overlay is always the overview
   (left crisp), every one after it is a story slide. scale(1.05) avoids the
   blur sampling past the element's edge and leaving a thin unblurred rim. */
.thematic-overlay .tbg:nth-child(n+2) {
  filter: blur(6px);
  transform: scale(1.05);
}

/* content slides vertically with scroll-snap (like the deck sections) */
.tsec {
  position: relative;
  z-index: 2;
  height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.tsec .prev_arrow {
  z-index: 10;
}

.sec {
  position: relative;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}

/* Disbursements is a click-only drill-in (skipped in the linear scroll), but it
   still physically sits between QFFD Statistics and Our Partners in the deck, so
   scrolling between those two glides past it and flashes its content. Hide it
   unless it's the section actually being viewed — `.is-active` is set the moment
   you click into it, and cleared the moment you leave, so it only ever shows on
   purpose. (visibility, not display, so its scroll slot/offset is preserved.) */
section.sec[data-nav="statistics-disbursements"] {
  visibility: hidden;
}

section.sec[data-nav="statistics-disbursements"].is-active {
  visibility: visible;
}

/* ── Fixed header & logo (scroll-section build overrides absolute from components.css) ── */
.header-toolbar {
  position: fixed;
  pointer-events: none;
  z-index: 300;
}

.header-logo {
  pointer-events: auto;
}

/* ── Fixed sidenav (overrides absolute from components.css) ── */
.sidenav {
  position: fixed;
  transition: transform 0.3s ease;
  z-index: 300;
}

/* ── Mobile hamburger bar ── */
.mobile-bar {
  position: fixed;
  top: 0;
  right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 300;
}

/* ── Scroll cue above overlays ── */
#scrollCue {
  z-index: 300;
}

/* ── Hero section ── */
.hero-text-wrap {
  position: absolute;
  right: 310px;
  bottom: 190px;
  text-align: right;
  z-index: 10;
}

.hero-title {
  font-size: clamp(30px, 3.1vw, 52px);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.15;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.hero-subtitle {
  font-size: clamp(22px, 2.3vw, 40px);
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.04em;
}

/* ── Vision & Mission ── */
.vm-card {
  width: 515px;
  max-width: calc(100vw - 360px);
}

/* ── About section ── */
.about-card-wrapper {
  background: transparent;
  border-radius: 24px;
}

.about-card {
  background: #0000004d;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 4px 24px #0000004d;
  max-height: 64vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.about-text {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-align: justify;
  line-height: 1.75;
  margin-bottom: 22px;
  font-family: Montserrat;
}

.about-text-last {
  margin-bottom: 0;
}

/* ── Strategic objectives ── */
.core_max {
  max-width: 50%;
}

.core_max .glass-card {
  margin-bottom: 10px;
}


/* ── Fixed scroll-down cue ── */
.scroll-down {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
}

/* sidenav collapsed → more horizontal room, so narrow the gutter for every
   right-anchored element that reads `right: var(--sidenav-gutter)`. */
@media (min-width: 769px) {
  body.nav-collapsed {
    --sidenav-gutter: 100px;
  }
}

/* CORE VALUES — .centered-container is `margin: 0 auto` so it centers in the
   full viewport. When the sidenav is expanded (260px vs collapsed 60px, a
   200px delta) the content ends up squeezed against the menu. Shift the
   container 100px away from the menu so it stays visually centered in the
   space not covered by the sidenav. Sidenav is on the right in LTR and on
   the left in RTL, so the shift direction flips. */
@media (min-width: 769px) {
  body:not(.nav-collapsed) section[data-nav="core"] .centered-container {
    margin-left: 190px;
    margin-right: 390px;
    transition: margin 0.3s ease;
  }

  [dir="rtl"] body:not(.nav-collapsed) section[data-nav="core"] .centered-container {
    margin-left: 390px;
    margin-right: 190px;
  }
}

/* ── Thematic story slide (one story per slide) ──
   Plain text/image directly over the background photo — same bare look as
   every other slide on the site (overview, etc.), no card chrome. Slides
   zigzag: odd-numbered stories sit on the right (clear of the sidenav),
   even-numbered stories sit on the left, matching the reference design.
   compound selector (not just .story-deck-container) — responsive.css has
   several plain `.container { max-width: ... }` rules inside media queries
   that load after this file; same specificity means later wins by source
   order, so a single class here isn't enough to reliably override them. */
.container.story-deck-container {
  position: absolute;
  max-width: 40%;
  transition: right .3s ease, left .3s ease;
}

.container.story-deck-container--right {
  right: var(--sidenav-gutter);
}

.container.story-deck-container--left {
  left: 140px;
}

.story-card img {
  width: 100%;
}

/* Story text (.text-dark #000, .blockquote navy, .blockquote.alt maroon) is
   all dark-on-light by design, so it needs a light backdrop — a soft white
   wash behind the text side, fading out toward the untouched side of the
   (already-blurred) photo, mirroring the story card's own left/right zigzag.
   A subtle shadow adds a touch of lift where the wash is thin near the edge. */
.story-card h2,
.story-card blockquote p,
.story-card p.text {
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
}

.story-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.story-scrim--right {
  background: linear-gradient(to left, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0) 100%);
}

.story-scrim--left {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0) 100%);
}

.anim_line  {
  position: absolute;
  z-index: 1;
}

/* Line offsets scale with viewport width. Reference: 1536px wide (1vw = 15.36px),
   so each value is exact at 1536 and scales fluidly across ~1280–1920 (clamped
   outside that range). To widen the range, adjust the min/max px bounds. */

.vision-line,
.education-line {
  right: clamp(250px, 19.53vw, 375px);
}

.economic-line {
  top: clamp(54.17px, 4.23vw, 81.25px);
  left: 0;
}

.thematic-line {
  bottom: clamp(-125px, -6.51vw, -83.33px);
  left: clamp(208.33px, 16.28vw, 312.5px);
}

.relief-line {
  left: clamp(-112.5px, -5.86vw, -75px);
  top: clamp(43.33px, 3.39vw, 65px);
}

.climate-line {
  left: clamp(-81.25px, -4.23vw, -54.17px);
  top: clamp(63.33px, 4.95vw, 95px);
}

.food-line {
  bottom: clamp(-50px, -2.6vw, -33.33px);
  right: clamp(325px, 25.39vw, 487.5px);
}

.flagship-line {
  left: 0;
  top: clamp(75px, 5.86vw, 112.5px);
}

.statistics-line {
  top: 38%;
}

.anim_line.health-line {
  left: 0;
}

/* ── Connector-line entrance ──────────────────────────────────────────────
   js/anim-lines.js inlines each .anim_line <img> as <svg class="anim-line-svg
   wipe-*"> and toggles `.in` when its section/overlay is active. The shape
   wipes in via clip-path (and replays on revisit). */
.anim-line-svg {
  display: block;
  /* Each SVG ships with fixed px width/height attributes from the Figma export,
     so by default it sits at its intrinsic pixel size (e.g. 1114×662) regardless
     of viewport. height:auto + a per-line vw-based width below makes the line
     scale fluidly with the screen instead. */
  height: auto;
}

/* ── Decorative connector-line sizes (desktop) ──
   Each line's intrinsic size was authored against a ~1536px design width. We
   switch to vw so the line tracks viewport width, with rem-based clamp() floors
   and ceilings to keep proportions sensible on narrow / ultra-wide screens.
   Vision is calibrated so at 1536px the curve renders ~213×600 — its design
   height on a typical laptop — and every other line scales by the same factor.
   Mobile uses pre-sized -mobile.svg variants (swapped by js/anim-lines.js), so
   it keeps its own intrinsic sizing — these rules apply on tablet/desktop. */
@media (min-width: 769px) {
  .vision-line .anim-line-svg     { width: clamp(11rem, 13.9vw, 16.75rem); }
  .education-line .anim-line-svg  { width: clamp(2.25rem, 3.255vw, 3.125rem); }
  .thematic-line .anim-line-svg   { width: clamp(2.25rem, 3.255vw, 3.125rem); }
  .food-line .anim-line-svg       { width: clamp(2.25rem, 3.255vw, 3.125rem); }
  .relief-line .anim-line-svg     { width: clamp(50rem, 72.5vw, 69.6rem); }
  .climate-line .anim-line-svg    { width: clamp(52rem, 75.33vw, 72.3rem); }
  .economic-line .anim-line-svg   { width: clamp(24rem, 34.9vw, 33.5rem); }
  .flagship-line .anim-line-svg   { width: clamp(31rem, 44.86vw, 43rem); }
  .statistics-line .anim-line-svg { width: clamp(28rem, 40.69vw, 39rem); }
  .health-line .anim-line-svg     { width: clamp(23rem, 33.9vw, 32.6rem); }
}

.anim-line-svg.wipe-down  { clip-path: inset(0 0 100% 0); }
.anim-line-svg.wipe-right { clip-path: inset(0 100% 0 0); }

.anim-line-svg.in.wipe-down  { animation: anim-line-down 1.2s cubic-bezier(.65, 0, .35, 1) forwards; }
.anim-line-svg.in.wipe-right { animation: anim-line-right 1.2s cubic-bezier(.65, 0, .35, 1) forwards; }

@keyframes anim-line-down  { to { clip-path: inset(0 0 0 0); } }
@keyframes anim-line-right { to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  .anim-line-svg {
    clip-path: none !important;
    animation: none !important;
  }
}

/* Mobile decorative-line layout. The -mobile.svg variants are pre-sized for
   narrow viewports (anim-lines.js swaps the src), so no scaling is needed —
   we just re-anchor each line so it sits at a sensible mobile edge. */
@media (max-width: 768px) {
  .anim_line {
    /* Sit behind the slide's text/cards. Static-positioned mobile containers
       lose their desktop z-index, so the line would otherwise stack on top. */
    z-index: 0;
  }

  /* Re-anchor each line: desktop offsets are tuned for >1280px viewports. */
  .anim_line.education-line { right: 30px; }
  .anim_line.food-line      { left: 20px; right: auto; top: unset;}
  .anim_line.thematic-line  { left: 30px; }
  .anim_line.relief-line    { left: 0; }
  .anim_line.health-line { top: 55px; }

  /* Vision line on mobile: pin to bottom-30%/left-0 and isolate the section
     so z-index:-1 keeps it strictly behind the (statically positioned)
     vision/mission cards without re-positioning them. */
  section[data-nav="vision"] { isolation: isolate; }
  .anim_line.vision-line {
    bottom: 30%;
    left: 0;
    right: auto;
    z-index: -1;
  }
}