/* ================================================================
   LOCAL OVERRIDES — RDMS Rwanda homepage skin
   Webflow IX2/IX3 fetches its animation config from Webflow's API
   using the site domain; that call fails on localhost, leaving
   elements frozen in their CSS "initial" states.

   Strategy: script.js adds w-mod-ix + w-mod-ix3 IMMEDIATELY,
   deactivating all Webflow IX CSS rules. GSAP then uses gsap.set()
   to set animation start states and animates from there.
   ================================================================ */

/* Smooth-scroll on nav anchor clicks. Honors prefers-reduced-motion
   automatically (browsers fall back to instant when set). */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* ---------------------------------------------------------------
   0. RDMS LOGO + BRAND TEXT — 70px square logo with two-line
      "Dento-Medical Society Rwanda / (RDMS)" beside it in both
      the navbar (white text on dark hero) and the footer (dark
      text on light page bg).
   --------------------------------------------------------------- */
.logo,
.image-3 {
  width: 70px !important;
  height: 70px !important; /* lock square so border-radius:50% renders a true circle */
  max-width: 70px !important;
  padding: 0 !important;
  display: block !important;
  flex: 0 0 70px !important;
  border-radius: 50% !important;
  background-color: transparent !important; /* no white box behind the transparent logo */
  object-fit: cover !important;
}

/* Navbar brand: switch from column to row so logo + text sit side-by-side.
   width:auto + justify-content:flex-start prevent Webflow's narrow-viewport
   rule (.brand { width:110px; justify-content:center }) from pushing the
   logo off-screen. */
.brand {
  flex-flow: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  gap: 12px !important;
}

/* Footer brand link: same row layout */
.footer-brand-link {
  display: flex !important;
  flex-flow: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  gap: 12px !important;
  text-decoration: none !important;
}

/* Two-line text block */
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap;
}

.brand-name {
  font-family: 'Google Sans Flex', 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brand-acronym {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.85;
  margin-top: 2px;
}

/* Navbar variant — white text on dark hero video */
.brand .brand-name,
.brand .brand-acronym {
  color: #fff;
}

/* Footer variant — dark text on light page bg */
.footer-brand-text .brand-name,
.footer-brand-text .brand-acronym {
  color: #1a1a1a;
}

/* ---------------------------------------------------------------
   1. BUTTON ARROW WRAPPERS
      Webflow IX animates the arrow wrappers; keep them visible.
   --------------------------------------------------------------- */
.button-3_arrow-wrapper-2.white {
  display: flex !important;
}
.button-3_arrow-wrapper-2 {
  display: flex !important;
}

/* ---------------------------------------------------------------
   2. GET IN TOUCH OVERLAY position + glassmorphism styles
   --------------------------------------------------------------- */
.get-in-touch-overlay {
  position: fixed !important;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  display: none;
  flex-direction: column;
  gap: 21px;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background-color: rgba(255, 255, 255, 0.7);
  border-left: 1px solid #fff;
  padding: 60px;
  width: 45vw;
  overflow-y: auto;
}
/* ---------------------------------------------------------------
   2b. HERO VIDEO — fills the clip-path container
   --------------------------------------------------------------- */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  /* Rwanda-tinted dark wash (#0d241c = very dark forest green) instead of
     pure black — keeps the video legible for white text but hints at the
     brand identity rather than reading as a generic dark overlay. */
  background: linear-gradient(
    135deg,
    rgba(13, 36, 28, 0.55) 0%,
    rgba(13, 36, 28, 0.30) 45%,
    rgba(13, 36, 28, 0.20) 100%
  );
  pointer-events: none;
}
/* ---------------------------------------------------------------
   2c. TEXT CALLOUT SECTION — use hero video-poster.jpg as static bg
   --------------------------------------------------------------- */
.image-6.dev.homepage {
  background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
                    url("assets/img/hero-bg-rwanda-vivid.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ---------------------------------------------------------------
   2d. FOOTER CIRCLE VIDEO — fills the circle-color element
   --------------------------------------------------------------- */
.circle-color {
  position: relative;
  overflow: hidden;
}

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


/* ---------------------------------------------------------------
   4a. ABOUT CONTAINER (mobile) — let it grow with content.
      Webflow locks .about-container.mobile to height:70vh below 768px
      and .about-container to 70vh below 480px. The new RDMS dental
      copy is longer than that, so content overflows the container
      and bleeds into the next section (light grey bg) where the
      white text becomes invisible. We unlock the height so the
      container grows naturally and the fixed video bg stays behind
      it the whole time.
   --------------------------------------------------------------- */
@media (max-width: 991px) {
  .about-container,
  .about-container.mobile {
    height: auto !important;
    min-height: 70vh !important;
    padding-top: 40px !important;
    padding-bottom: 60px !important;
    /* Dark backplate: white text was unreadable in patches over the
       warmer zones of the live hero gradient. */
    background-color: rgba(0, 0, 0, 0.40) !important;
  }
}

/* Desktop teaser sits in a much shorter content block (h2 + paragraph
   + button) than the legacy long-form copy that .about-container was
   sized for. Relax the 100vh lock so the section hugs the content. */
@media (min-width: 992px) {
  .about-container.about-teaser {
    height: auto !important;
    min-height: 60vh !important;
  }
}

/* ---------------------------------------------------------------
   4b. MOBILE HERO BACKGROUND — let the video play.
      Webflow's default mobile rule ".background-video-container
      { display: none }" was hiding the hero video on phones; we
      override it so the Rwanda video plays on mobile too
      (autoplay+muted+playsinline is supported on modern iOS/Android).
      If autoplay is blocked (iOS low-power mode, cellular, etc.),
      the <video> element's native poster="..." attribute renders a
      still image automatically — no separate fallback needed.
   --------------------------------------------------------------- */
@media (max-width: 991px) {
  .background-video-container {
    display: block !important;
  }
  /* Webflow also hides the inner .background-video element at the
     <479px breakpoint (line 6758 in webflow.css). Un-hide it too —
     :not(.footer) leaves any footer variant alone. */
  .background-video:not(.footer) {
    display: block !important;
  }
}

/* ---------------------------------------------------------------
   4c. MOBILE BRAND TEXT — scale down + handle narrow viewports.
      On phones the long "Dento-Medical Society Rwanda" name can
      crowd the navbar. We shrink it on small screens and collapse
      to just "RDMS" on very narrow screens so it always fits.
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  .brand,
  .footer-brand-link {
    gap: 8px !important;
  }
  .brand-name {
    font-size: 11px !important;
    letter-spacing: 0;
  }
  /* Footer acronym stays at 11px for readability — the navbar acronym
     gets bumped to 13px below by the .brand-scoped rule. */
  .brand-acronym {
    font-size: 11px !important;
  }
}

/* Hide wordmark in NAVBAR below tablet width — the wordmark + nav links
   no longer fit on one row below ~600px and the navbar wraps to two rows,
   wasting ~70px above the fold. Footer wordmark stays visible (plenty of
   room there and footer benefits from the full org name). */
@media (max-width: 767px) {
  .brand .brand-name {
    display: none !important;
  }
  .brand .brand-acronym {
    font-size: 13px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
  }
}

/* ---------------------------------------------------------------
   4d. MOBILE LOGO — slightly smaller so it pairs with the
      smaller brand text (and recovers nav real-estate).
   --------------------------------------------------------------- */
@media (max-width: 600px) {
  .logo,
  .image-3 {
    width: 50px !important;
    height: 50px !important; /* keep square for border-radius:50% circle */
    max-width: 50px !important;
    flex: 0 0 50px !important;
  }
}

/* ---------------------------------------------------------------
   5. BUTTON-3 "Get in touch" nav button — visible on desktop only.
      Webflow hides this button below 992px and shows the
      .nav-link-2.mobile text link instead. We force it visible only
      at desktop sizes so we don't end up with two duplicate
      "Get in touch" controls in the mobile navbar.
   --------------------------------------------------------------- */
@media (min-width: 992px) {
  .button-3.footer.top.nav {
    opacity: 1 !important;
    display: flex !important;
  }
}

/* ---------------------------------------------------------------
   6. COLUMN SCROLL CONTENT LAYOUT FIX
      Content-wrapper floats left while images occupy right.
   --------------------------------------------------------------- */
.column-scroll-content-wrapper {
  position: relative !important;
  z-index: 3 !important;
}

/* ---------------------------------------------------------------
   6b. SPONSOR TECH SECTION — hero-style video bg + white text.
      Phase 2 in script.js fans the 3 images into the right ~50 %
      of the viewport, leaving the left ~50 % clear for the text
      panel (which is already 50vw wide via webflow.css). The video
      shows through the cleared left half as the section background.
   --------------------------------------------------------------- */
.sponsor-your-city {
  background-color: #1a3d2c !important;  /* deep forest green fallback (Rwanda flag green tone) while video loads */
}

.sponsor-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

/* Three Pillars headline — Option C: Inter Display 900, no shadow,
   cream color, retired italic-second-clause tic. Overrides Webflow's
   stock title rules. */
.column-scroll-content-title {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif !important;
  font-variation-settings: 'opsz' 32;
  font-style: normal !important;
  font-weight: 900 !important;
  font-size: clamp(32px, 4.4vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
  color: #f6f3ec !important;
  text-shadow: none !important;
  text-wrap: balance;
}

/* White text + light line-breakers ONLY on desktop, where the bg is
   the dark Rwanda video. On mobile, Webflow paints the section in
   light grey, so we let the default dark text color through. */
@media (min-width: 992px) {
  .column-scroll-content-text,
  .column-scroll-content-text strong,
  .column-scroll-content-text .bold-text-4 {
    color: #f6f3ec !important;
  }

  .line-breaker {
    background-color: rgba(255, 255, 255, 0.35) !important;
  }
}

/* ---------------------------------------------------------------
   9. COLUMN SCROLL DESKTOP — triptych three-panel reveal
      Webflow IX sets the inner to width:100vw via inline style.
      Items are 33.33vw each → they tile as perfect thirds across
      the full viewport width (3 × 33.33vw = 100vw).
      The content wrapper (z-index 3, transparent bg) overlays the
      left two-thirds so text floats above the images — matching the
      reference site exactly.
      We only need overflow:hidden (already in webflow.css) and
      the inner's border-radius for the panel look; NO width
      overrides — Webflow IX's inline 100vw must win.
   --------------------------------------------------------------- */
@media (min-width: 992px) {
  /* Clip the image panel when it slides right (Phase 2 X-shift). */
  .column-scroll-sticky {
    overflow: hidden;
  }
  .column-scroll-sticky-inner {
    /* Normally Webflow IX sets this to 100vw inline, but we removed
       data-w-id from the wrapper to stop IX fighting our GSAP.
       Replicate the same 100vw explicitly here so items tile as thirds. */
    width: 100vw !important;
    overflow: hidden;
    border-radius: 20px;
  }
}

/* ---------------------------------------------------------------
   10. FOOTER BUTTON initial transform reset
   --------------------------------------------------------------- */
html.w-mod-js [data-w-id="8bda5446-33b5-878e-7c09-3e2a8d9ef3d2"] {
  transform: none !important;
}


/* Hero section transparent — let the fixed background-video-container
   (hero-bg-rwanda.mp4) bleed through. Webflow's webflow.css sets
   background-color: var(--grey-5) on .hero AND on the inner
   .background-video div AND on the body — all of those sat opaque
   on top of the fixed video and hid it. Strip every grey opaque
   layer between the viewer and the video. */
.hero,
.hero.layout-b {
  background-color: transparent !important;
  background: transparent !important;
}

/* The inner .background-video div had background-color: var(--grey-5)
   from webflow.css line 2467. That's the surface immediately wrapping
   the <video class="hero-bg-video">. Strip it. */
.background-video,
.background-video:not(.footer) {
  background-color: transparent !important;
  /* Defensive: kill any clip-path that creeps back from cached JS or
     legacy inline styles. The original Webflow template clipped the
     video to a pill — we want it fully visible at all times. */
  clip-path: none !important;
  -webkit-clip-path: none !important;
  animation: none !important;
}

/* Body grey bg also shows through wherever .hero is transparent.
   Tint body to deep forest green instead of grey so any sliver that
   peeks reads as Rwanda-tone, not generic dark grey. */
body.body-2 {
  background-color: #0d241c !important;
}

/* Defensive: bypass the IX3 visibility-hidden rule on the hero video
   container. Webflow's inline style hides .background-video-container
   until the page adds .w-mod-ix3 to <html>; if that class never makes
   it (any JS error, slow load, etc.) the video stays invisible. Force
   visible regardless. */
.background-video-container {
  visibility: visible !important;
}

/* Dark wash REMOVED per user request — show the Rwanda flag-colors
   video at full saturation. (Trade-off: white hero text legibility
   drops on bright video frames; mitigated by adding text-shadow on
   the hero copy below.) */
.hero-video-overlay {
  display: none !important;
}



/* ================================================================
   12. MOBILE OPTIMIZATION PASS (audit 2026-04-29)
   Findings at 360 / 390 / 768 viewports — fixes for image cropping,
   text contrast, vertical-space waste, tap targets, and polish.
   ================================================================ */

/* 12a. Doctor photos in sponsor section — Webflow sets
   .column-scroll-item { aspect-ratio: 3/2 } on mobile, but source
   images are portrait (~3:4). object-fit: cover then guillotines the
   tops and bottoms of faces, leaving an eye-mouth strip. Override to
   3:4 to match source aspect; add object-position: center top so any
   residual crop favors the face over the chin. */
@media (max-width: 991px) {
  .column-scroll-item {
    aspect-ratio: 3 / 4 !important;
  }
  .column-scroll-image {
    object-position: center top !important;
  }
}


/* 12c. Footer link tap targets — .link-3 (About / Events / Linkedin)
   render at 20px tall, well below Apple HIG (44pt) and Material (48dp)
   touch-target minimums. Pad to ~44px hit area. */
@media (max-width: 991px) {
  .footer-div .link-3 {
    padding: 12px 0 !important;
    display: block;
  }
}



/* ---------------------------------------------------------------
   OVER-VIDEO TEXT TOKENS — used by Leadership + Mentors which sit
   transparent over the fixed hero video. Neutrals tinted toward the
   cream-paper hue (chroma 0.008–0.012) per DESIGN.md "never #fff" rule.
   Halo gives legibility on busy moving footage without dimming the video.
   --------------------------------------------------------------- */
:root {
  --ov-cream-pure:  oklch(98% 0.008 85);    /* primary heads + body emphasis */
  --ov-cream-soft:  oklch(94% 0.010 85);    /* supporting copy */
  --ov-cream-muted: oklch(82% 0.012 85);    /* meta / discipline */
  --ov-cream-low:   oklch(70% 0.012 85);    /* small print */
  --ov-gold:        #f5d28a;                /* designation accent (DESIGN.md token) */
  /* Per directive: heading accents unified on gold across the site.
     Token name kept as --ov-green for backward compatibility; value now points to gold. */
  --ov-green:       var(--ov-gold);
  --ov-green-true:  #6cd97f;                /* original green — kept for any future interactive use */
  --ov-halo:
    0 1px 2px rgba(8, 14, 10, 0.55),
    0 2px 10px rgba(8, 14, 10, 0.30);
  --ov-halo-soft:
    0 1px 1px rgba(8, 14, 10, 0.40),
    0 1px 6px rgba(8, 14, 10, 0.20);
}

/* ---------------------------------------------------------------
   LEADERSHIP — homepage section between about teaser and 3-col scroll.
   Dark palette to bridge the surrounding dark sections. Featured
   CEO card on top + 4-up team grid below. Subtle uniform grayscale
   filter on portraits harmonises mismatched source photos.
   --------------------------------------------------------------- */

.leadership {
  position: relative;
  z-index: 2;
  isolation: isolate;
  /* Transparent — fixed hero video plays through. Cards carry their own
     glassmorphic shelf for legibility. Section header gets text-shadow. */
  background: transparent;
  color: var(--ov-cream-pure);
  padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 36px);
  text-align: left;
}

.leadership__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.leadership__eyebrow {
  font-family: 'Google Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ov-green);
  font-weight: 600;
  margin: 0 0 14px;
  text-shadow: var(--ov-halo-soft);
}

.leadership__title {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(48px, 6.4vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ov-cream-pure);
  margin: 0 0 14px;
  max-width: 780px;
  text-shadow: var(--ov-halo);
}

.leadership__subtitle {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.55;
  color: var(--ov-cream-soft);
  margin: 0 0 48px;
  max-width: 680px;
  text-shadow: var(--ov-halo-soft);
}

/* Featured CEO card: liquid glass with chromatic edge — accepted from
   $impeccable live, V2. Backdrop-blur 40px + saturate(160%) over the
   fixed hero video, with a subtle Rwanda-flag chromatic refraction
   (sky-blue radial at top-left, field-green radial at bottom-right)
   to anchor the brand inside the glass surface. Single intentional
   one-off; the DESIGN.md "no glassmorphism as decoration" ban still
   stands for new surfaces. */
.leadership__featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(32px, 5vw, 56px);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: rgba(246, 243, 236, 0.05);
  backdrop-filter: blur(40px) saturate(160%) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(160%) brightness(1.05);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 30px 70px -16px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}
.leadership__featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 10%, rgba(0, 161, 222, 0.32) 0%, transparent 35%),
    radial-gradient(circle at 88% 90%, rgba(31, 107, 58, 0.34) 0%, transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.18) 100%);
  mix-blend-mode: overlay;
}
.leadership__featured > .leadership__featured-photo,
.leadership__featured > .leadership__featured-content {
  position: relative;
  z-index: 1;
}

.leadership__featured-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 12px;
  filter: grayscale(0.15) saturate(0.92);
  transition:
    transform 320ms ease-out,
    filter 320ms ease-out,
    box-shadow 320ms ease-out;
  will-change: transform;
}

/* Hover the photo itself → photo lifts (no scale); bio text stays still */
.leadership__featured-photo:hover {
  transform: translateY(-10px);
  filter: grayscale(0) saturate(1);
  box-shadow:
    0 0 0 1px rgba(88, 204, 111, 0.5),
    0 14px 32px rgba(0, 0, 0, 0.4),
    0 0 44px rgba(88, 204, 111, 0.32);
}

.leadership__featured-content {
  min-width: 0;
}

.leadership__role {
  font-family: 'Google Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ov-gold);
  font-weight: 600;
  margin: 0 0 10px;
  text-shadow: var(--ov-halo-soft);
}

.leadership__featured-name {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--ov-cream-pure);
  margin: 0 0 8px;
  text-shadow: var(--ov-halo);
}

.leadership__featured-meta {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.5;
  color: var(--ov-cream-muted);
  font-weight: 500;
  margin: 0 0 18px;
  text-shadow: var(--ov-halo-soft);
}

.leadership__featured-meta strong {
  color: var(--ov-cream-pure);
  font-weight: 600;
}

.leadership__featured-bio {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
  color: var(--ov-cream-soft);
  margin: 0;
  max-width: 640px;
  text-shadow: var(--ov-halo-soft);
}

/* Team grid: 4-up at desktop, 2-up at tablet, single column at mobile */
.leadership__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
}

/* Team-grid cards: same liquid glass + chromatic refraction as the
   CEO featured card above, scaled down for the smaller card area.
   Single intentional one-off pattern across the leadership section. */
.leadership__card {
  position: relative;
  padding: 18px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  background: rgba(246, 243, 236, 0.05);
  backdrop-filter: blur(40px) saturate(160%) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(160%) brightness(1.05);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 24px 56px -14px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}
.leadership__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 10%, rgba(0, 161, 222, 0.32) 0%, transparent 35%),
    radial-gradient(circle at 88% 90%, rgba(31, 107, 58, 0.34) 0%, transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.18) 100%);
  mix-blend-mode: overlay;
}
.leadership__card > .leadership__card-photo,
.leadership__card > .leadership__card-name,
.leadership__card > .leadership__card-role,
.leadership__card > .leadership__card-discipline {
  position: relative;
  z-index: 1;
}

.leadership__card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: 10px;
  margin-bottom: 14px;
  filter: grayscale(0.15) saturate(0.92);
  transition:
    transform 320ms ease-out,
    filter 320ms ease-out,
    box-shadow 320ms ease-out;
  will-change: transform;
}

/* Hover the photo itself → photo lifts (no scale); name/role text stay still */
.leadership__card-photo:hover {
  transform: translateY(-10px);
  filter: grayscale(0) saturate(1);
  box-shadow:
    0 0 0 1px rgba(88, 204, 111, 0.5),
    0 14px 32px rgba(0, 0, 0, 0.4),
    0 0 44px rgba(88, 204, 111, 0.32);
}

/* Reduced motion — disable transforms/transitions on Leadership hover */
@media (prefers-reduced-motion: reduce) {
  .leadership__card,
  .leadership__card-photo,
  .leadership__featured-photo {
    transition: none !important;
  }
  .leadership__card:hover,
  .leadership__featured-photo:hover {
    transform: none !important;
  }
}

.leadership__card-name {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(19px, 1.5vw, 22px);
  font-weight: 600;
  color: var(--ov-cream-pure);
  margin: 0 0 6px;
  line-height: 1.2;
  text-shadow: var(--ov-halo-soft);
}

.leadership__card-role {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(14px, 1.05vw, 16px);
  color: var(--ov-gold);
  font-weight: 600;
  margin: 0 0 2px;
  line-height: 1.4;
  text-shadow: var(--ov-halo-soft);
}

.leadership__card-discipline {
  font-family: 'Google Sans', sans-serif;
  font-size: clamp(12px, 0.9vw, 14px);
  color: var(--ov-cream-pure);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.4;
  text-shadow: var(--ov-halo-soft);
}

@media (max-width: 991px) {
  .leadership__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .leadership__featured {
    grid-template-columns: 1fr;
  }
  .leadership__featured-photo {
    max-width: 320px;
    aspect-ratio: 1 / 1;
  }
  .leadership__grid {
    grid-template-columns: 1fr;
  }
}


/* ===============================================================
   STICKY GLASSMORPHIC NAVBAR
   The navbar lives inside the hero section in markup, but we pull it
   out of the section's flow with position:fixed so it stays pinned
   to the top of the viewport across all sections.
   =============================================================== */

/* Floating pill navbar — full identity surface ($impeccable craft,
   brief confirmed). Brand block (logo + 2-line stack) on the left,
   nav links in the middle, "Write to RDMS" CTA on the right.
   Adaptive theme: dark glass over dark sections (hero, footer, etc),
   cream glass over cream sections (About, Services, Projects, etc).
   Theme is set by JS via [data-nav-theme="dark|light"] on the navbar. */

.navbar.w-nav {
  position: fixed !important;
  top: 18px;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: auto !important;
  max-width: 1040px;
  z-index: 9999;
  isolation: isolate;
  /* Default theme = dark. JS may swap to light on cream sections. */
  background: rgba(15, 15, 18, 0.65) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  padding: 0;
  overflow: hidden;
}

/* Light theme — instant swap, no transition (anti-goal D). */
.navbar.w-nav[data-nav-theme="light"] {
  background: rgba(246, 243, 236, 0.85) !important;
  border-color: rgba(31, 107, 58, 0.22);
  box-shadow: 0 8px 32px rgba(10, 10, 10, 0.18);
}

/* Inner container — flex row, no wrap, internal padding. */
.navbar.w-nav .container-2 {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 16px;
  padding: 8px 8px 8px 16px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Brand block: logo + 2-line stack visible on the floating pill.
   At narrower viewports the credibility line + wordmark drop out
   per the progressive-disclosure budget below. */
.navbar.w-nav .brand {
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}
.navbar.w-nav .brand .brand-text {
  display: flex !important;
  flex-direction: column;
  gap: 1px;
  line-height: 1.15;
  white-space: nowrap;
}
.navbar.w-nav .brand .brand-name {
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  color: #f6f3ec !important;
}
.navbar.w-nav .brand .brand-credibility {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(246, 243, 236, 0.55);
  text-transform: none;
}
.navbar.w-nav[data-nav-theme="light"] .brand .brand-name {
  color: #0a0a0a !important;
}
.navbar.w-nav[data-nav-theme="light"] .brand .brand-credibility {
  color: rgba(10, 10, 10, 0.55);
}
.navbar.w-nav .brand .logo {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  flex: 0 0 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background-color: transparent !important;
}

/* Nav menu — flex row, no wrap, tight gap. */
.navbar.w-nav .nav-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 2px;
  padding: 0;
  width: auto !important;
}

/* All nav links uniform: pill chips. Color tokens differ per theme. */
.navbar.w-nav .nav-link,
.navbar.w-nav .nav-link-2 {
  padding: 8px 12px !important;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: 999px;
  transition: background-color 200ms ease-out, color 200ms ease-out;
  text-decoration: none;
  color: rgba(246, 243, 236, 0.82) !important;
}
.navbar.w-nav[data-nav-theme="light"] .nav-link,
.navbar.w-nav[data-nav-theme="light"] .nav-link-2 {
  color: rgba(10, 10, 10, 0.78) !important;
}

.navbar.w-nav .nav-link:hover,
.navbar.w-nav .nav-link-2:hover {
  background-color: rgba(246, 243, 236, 0.12);
  color: #f6f3ec !important;
}
.navbar.w-nav[data-nav-theme="light"] .nav-link:hover,
.navbar.w-nav[data-nav-theme="light"] .nav-link-2:hover {
  background-color: rgba(10, 10, 10, 0.06);
  color: #0a0a0a !important;
}

/* Active link — same cooperative-green pill-tint in both themes
   (Q7=A). The single accent works on both surfaces. */
.navbar.w-nav .nav-link[data-active="true"] {
  background-color: rgba(88, 204, 111, 0.22);
  color: #f6f3ec !important;
}
.navbar.w-nav[data-nav-theme="light"] .nav-link[data-active="true"] {
  color: #1f6b3a !important;
  background-color: rgba(88, 204, 111, 0.18);
}

/* Focus-visible: 2px field-green-deep outline + 3px offset. */
.navbar.w-nav .nav-link:focus-visible,
.navbar.w-nav .brand:focus-visible,
.navbar.w-nav .navbar__cta:focus-visible {
  outline: 2px solid #1f6b3a;
  outline-offset: 3px;
}

/* "Write to RDMS" CTA — solid pill button, rightmost edge. */
.navbar.w-nav .navbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  margin-left: 4px;
  background: #58cc6f;
  color: #0a0a0a;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 200ms ease-out, transform 200ms ease-out;
  flex: 0 0 auto;
}
.navbar.w-nav .navbar__cta:hover {
  background: #1f6b3a;
  color: #f6f3ec;
  transform: translateY(-1px);
}

/* Progressive disclosure (anti-goal A: no crowded pill). */
@media (max-width: 1099px) {
  .navbar.w-nav .brand .brand-credibility {
    display: none;
  }
}
@media (max-width: 899px) {
  .navbar.w-nav {
    max-width: 880px;
  }
  .navbar.w-nav .brand .brand-text {
    display: none !important;
  }
  .navbar.w-nav .container-2 {
    padding: 6px 8px 6px 12px !important;
    gap: 10px;
  }
  .navbar.w-nav .nav-link,
  .navbar.w-nav .nav-link-2 {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
  .navbar.w-nav .navbar__cta {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ===============================================================
   COLLAPSE-ON-SCROLL NAVBAR
   Vanilla port of the framer-motion pattern: scroll DOWN past 150px
   collapses the full-width nav into a small floating circle (showing
   just a hamburger icon); scroll UP 80px from the collapse point or
   click the circle expands it back. Spring-like easing via cubic-bezier.
   =============================================================== */

/* Spring-ish transition applied to the expanded → collapsed and back. */
.navbar.w-nav {
  transition:
    width 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
    max-width 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
    height 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
    left 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-radius 400ms ease-out,
    top 500ms ease-out;
}

.navbar.w-nav .container-2 {
  transition: opacity 220ms ease-out;
}

/* Hamburger icon — sits centered behind the navbar content; only visible
   when the navbar collapses. */
.navbar-collapsed-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  color: #fff;
  transition: opacity 200ms ease-out;
}
.navbar-collapsed-icon svg {
  width: 24px;
  height: 24px;
}

/* Collapsed state — small floating circle at top-center.
   Forces dark glass regardless of section theme so the collapse and
   theme-swap behaviors don't fire at the same scroll moment
   (anti-goal D, staggered feedback). */
.navbar.w-nav.is-collapsed,
.navbar.w-nav.is-collapsed[data-nav-theme="light"] {
  width: 56px !important;
  max-width: 56px !important;
  height: 56px;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  border-radius: 50%;
  top: 18px;
  cursor: pointer;
  border-bottom: none;
  background: rgba(15, 15, 18, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}
.navbar.w-nav.is-collapsed .navbar-collapsed-icon {
  color: #fff;
}
.navbar.w-nav.is-collapsed:hover {
  transform: translateX(-50%) scale(1.08);
}
.navbar.w-nav.is-collapsed:active {
  transform: translateX(-50%) scale(0.95);
}

/* Hide brand + nav-menu when collapsed (fast fade). */
.navbar.w-nav.is-collapsed .container-2 {
  opacity: 0;
  pointer-events: none;
}

/* Show hamburger when collapsed (delayed fade-in so it appears as the
   nav finishes shrinking, mirroring the framer-motion stagger). */
.navbar.w-nav.is-collapsed .navbar-collapsed-icon {
  opacity: 1;
  transition: opacity 280ms ease-out 200ms;
}

/* Reduced motion — disable transitions. */
@media (prefers-reduced-motion: reduce) {
  .navbar.w-nav,
  .navbar.w-nav .container-2,
  .navbar-collapsed-icon {
    transition: none !important;
  }
  .navbar.w-nav.is-collapsed:hover,
  .navbar.w-nav.is-collapsed:active {
    transform: translateX(-50%) !important;
  }
}

/* Don't apply collapse on small viewports — Webflow's mobile pattern
   handles narrow screens already. */
@media (max-width: 991px) {
  .navbar.w-nav.is-collapsed {
    width: 100% !important;
    max-width: none !important;
    height: auto;
    left: 0 !important;
    right: 0 !important;
    transform: none;
    border-radius: 0;
    top: 0;
    cursor: auto;
  }
  .navbar.w-nav.is-collapsed .container-2 {
    opacity: 1;
    pointer-events: auto;
  }
  .navbar.w-nav.is-collapsed .navbar-collapsed-icon {
    opacity: 0;
  }
}



/* ===============================================================
   RESEARCH ACADEMY ($impeccable craft, brief confirmed).
   Was: dark band w/ glass card 3x2 grid + Chronicles photo CTA.
   Now: cream editorial publication — header / standfirst / featured
   lesson (magazine spread) / 5 dated roll rows / Drenched-green
   Chronicles band as a visually distinct subscribe surface.
   Donor-first reading experience: program officer scanning for
   "RDMS publishes substantive research, named professionals,
   monthly cadence." Anchors: The Africa Report magazine index,
   Adi Magazine, The Atlantic feature index. Committed green
   palette per Q7=B.
   =============================================================== */

.academy {
  position: relative;
  overflow: hidden;
  color: #2a2a2a;
  text-align: left;
  padding: clamp(120px, 14vw, 180px) clamp(20px, 4vw, 36px) 0;
  /* Fallback dark color in case video fails to load. */
  background-color: #0a1814;
}

/* Rwanda flag-colors video — same source as hero, page-level
   rhyming. Sits at the section edges around the cream-tint paper
   card; vignette dims it. */
.academy__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
}
.academy__bg-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(10, 24, 20, 0) 0%,
      rgba(10, 24, 20, 0.35) 55%,
      rgba(10, 24, 20, 0.7) 100%);
}

/* Tricolor letterhead — Rwanda flag stripes at the section top. */
/* ===============================================================
   SECTION FLAG BAR — reusable Rwanda tricolor strip placed between
   major content sections. Same proportions as the Academy top bar:
   sky-blue 6px / sun-yellow 4px / field-green 4px = 14px total.
   Place a <div class="section-flag-bar"> after each section's
   closing tag to act as a visual separator.
   =============================================================== */
.section-flag-bar {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: none;
}
.section-flag-bar__stripe {
  display: block;
  width: 100%;
}
.section-flag-bar__stripe--blue   { height: 6px; background: #00a1de; }
.section-flag-bar__stripe--yellow { height: 4px; background: #fad201; }
.section-flag-bar__stripe--green  { height: 4px; background: #20603d; }


/* Cream-tint paper card — slightly darker than Contact's cream-paper
   so the two video-backed sections differentiate. The academy carries
   long-form lessons; cream-tint #ece6d6 gives the publication a
   parchment-like weight without leaving the warm zone. */
.academy__inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto clamp(64px, 8vw, 96px);
  background: #ece6d6;
  padding: clamp(48px, 6vw, 80px) clamp(28px, 5vw, 64px);
  border-radius: 2px;
  box-shadow:
    0 24px 60px -16px rgba(10, 24, 20, 0.55),
    0 8px 24px -8px rgba(10, 24, 20, 0.4);
}

/* — Section header ----------------------------------------------- */

.academy__header {
  margin: 0 0 clamp(32px, 4vw, 48px);
}

.academy__eyebrow {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1f6b3a;
  font-weight: 600;
  margin: 0 0 18px;
  text-shadow: none;
}
.academy__eyebrow-num {
  color: rgba(31, 107, 58, 0.55);
  font-weight: 500;
  margin-left: 6px;
}

.academy__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: #0a0a0a;
  margin: 0 0 22px;
  max-width: 18ch;
  text-shadow: none;
}
.academy__title-accent {
  /* Academy interior is cream — gold on cream fails contrast.
     Keep field-green-deep here per DESIGN.md One Green Discipline. */
  color: #1f6b3a;
  font-style: italic;
}

.academy__lead {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: #2a2a2a;
  margin: 0;
  max-width: 62ch;
  text-shadow: none;
}

/* — About the Research Academy standfirst ------------------------ */

.academy__standfirst {
  margin: 0 0 clamp(64px, 8vw, 96px);
  padding: clamp(20px, 2.4vw, 28px) 0 0;
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  max-width: 60ch;
}

.academy__standfirst-eyebrow {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4a4a4a;
  font-weight: 500;
  margin: 0 0 10px;
}

.academy__standfirst-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  font-style: italic;
  color: #2a2a2a;
  margin: 0;
}

/* — Featured lesson (magazine spread) ---------------------------- */

.academy-feature {
  margin: 0 0 clamp(56px, 7vw, 80px);
  padding: 0 0 clamp(40px, 5vw, 56px);
  border-bottom: 2px solid #0a0a0a;
}

.academy-feature__link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 200ms ease-out;
}
.academy-feature__link:hover {
  opacity: 0.92;
}
.academy-feature__link:hover .academy-feature__title-accent {
  text-decoration: underline;
  text-decoration-color: #58cc6f;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.academy-feature__link:focus-visible {
  outline: 2px solid #58cc6f;
  outline-offset: 6px;
  border-radius: 2px;
}

.academy-feature__category {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1f6b3a;
  font-weight: 600;
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.academy-feature__methodology {
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #4a4a4a;
  font-size: 13px;
}

.academy-feature__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: #0a0a0a;
  margin: 0 0 20px;
  max-width: 22ch;
  text-shadow: none;
}
.academy-feature__title-accent {
  color: #1f6b3a;
}

.academy-feature__desc {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.65;
  color: #2a2a2a;
  margin: 0 0 28px;
  max-width: 62ch;
}

.academy-feature__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: baseline;
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  padding: 16px 0 0;
  font-family: 'Google Sans', system-ui, sans-serif;
}
.academy-feature__byline {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1f6b3a;
  font-weight: 600;
  margin: 0;
}
.academy-feature__date {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 14px;
  color: #4a4a4a;
  margin: 0;
}

/* — Lessons roll (5 dated rows) ---------------------------------- */

.academy-roll {
  list-style: none;
  margin: 0;
  padding: 0;
}
.academy-roll > li + li {
  border-top: 1px solid rgba(10, 10, 10, 0.1);
}

.academy-row__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: clamp(20px, 3vw, 32px);
  padding: clamp(22px, 2.8vw, 30px) 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 200ms ease-out;
  position: relative;
}
.academy-row__link:hover {
  opacity: 0.94;
}
.academy-row__link:hover .academy-row__title {
  color: #0a0a0a;
}
.academy-row__link:hover .academy-row__chevron {
  transform: translateX(4px);
  color: #58cc6f;
}
.academy-row__link:focus-visible {
  outline: 2px solid #58cc6f;
  outline-offset: 4px;
  border-radius: 2px;
}

.academy-row__head {
  grid-column: 1;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a4a4a;
  font-weight: 500;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.academy-row__date {
  color: #1f6b3a;
  font-weight: 600;
}
.academy-row__sep {
  color: rgba(10, 10, 10, 0.3);
}
.academy-row__category {
  color: #4a4a4a;
}

.academy-row__title {
  grid-column: 1;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.25;
  font-weight: 400;
  color: #2a2a2a;
  margin: 0 0 8px;
  max-width: 52ch;
  transition: color 200ms ease-out;
}

.academy-row__desc {
  grid-column: 1;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #4a4a4a;
  margin: 0 0 10px;
  max-width: 62ch;
}

.academy-row__byline,
.academy-row__methodology {
  grid-column: 1;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1f6b3a;
  font-weight: 600;
  margin: 0;
}
.academy-row__methodology {
  font-family: Georgia, serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 400;
  color: #4a4a4a;
}

.academy-row__chevron {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 22px;
  color: rgba(10, 10, 10, 0.3);
  transition: transform 200ms ease-out, color 200ms ease-out;
  user-select: none;
}

@media (max-width: 600px) {
  .academy-row__link {
    grid-template-columns: 1fr;
  }
  .academy-row__chevron {
    grid-column: 1;
    grid-row: auto;
    align-self: flex-start;
    margin-top: 6px;
  }
}

/* — Chronicles band (Drenched cooperative-green) ----------------- */

.chronicles-band {
  position: relative;
  z-index: 2;
  background: #58cc6f;
  color: #0a2a18;
  padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 36px);
  text-align: left;
  border-top: 8px solid #0a0a0a;
}

.chronicles-band__inner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}

.chronicles-band__copy {
  min-width: 0;
  max-width: 56ch;
}

.chronicles-band__eyebrow {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(10, 42, 24, 0.7);
  font-weight: 600;
  margin: 0 0 14px;
}

.chronicles-band__heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #0a2a18;
  margin: 0 0 14px;
  max-width: 18ch;
}

.chronicles-band__text {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: #0a2a18;
  margin: 0;
  max-width: 56ch;
}

.chronicles-band__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 4px;
  background: #0a0a0a;
  color: #f6f3ec;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background 200ms ease-out, transform 200ms ease-out;
  white-space: nowrap;
  align-self: end;
  margin-bottom: 4px;
}
.chronicles-band__btn:hover {
  background: #1f6b3a;
  transform: translateY(-1px);
}
.chronicles-band__btn:focus-visible {
  outline: 2px solid #f6f3ec;
  outline-offset: 3px;
}
.chronicles-band__btn .arrow {
  display: inline-block;
  transition: transform 200ms ease-out;
}
.chronicles-band__btn:hover .arrow {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .chronicles-band__inner {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .chronicles-band__btn {
    margin-bottom: 0;
    margin-top: 8px;
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .academy-feature__link,
  .academy-row__link,
  .academy-row__chevron,
  .chronicles-band__btn,
  .chronicles-band__btn .arrow {
    transition: none !important;
  }
  /* Hide the looping flag video for users who prefer no motion.
     Section keeps the dark vignette + tricolor stripes — Rwandan
     identity is preserved without the moving image. */
  .academy__bg-video {
    display: none !important;
  }
}

/* ===============================================================
   CONTACT SECTION ($impeccable craft, brief confirmed).
   Was: 2-col grid w/ Rwanda-flag info card + glassmorphic 6-field
   form submitting via mailto.
   Now: Letter from Huye — single-column institutional letter on
   cream paper, signed by Igisubizo Jimmy Confiance. Inline form
   removed; all "Send Message" actions route to existing get-in-
   touch overlay (already a11y-compliant after P0 harden).
   Restrained palette: field-green-deep accent only; cooperative-
   green absent here so the page rhythm calms after the Drenched-
   green Chronicles band. Anchors: foundation cover letter,
   Wellcome Trust founder note, museum-trustee correspondence.
   =============================================================== */

.contact {
  position: relative;
  overflow: hidden;
  color: #2a2a2a;
  text-align: left;
  padding: clamp(120px, 14vw, 180px) clamp(20px, 4vw, 36px) clamp(96px, 12vw, 160px);
  /* Fallback dark color in case the video fails to load. The video
     element below paints over this when it's playing. */
  background-color: #0a1814;
}

/* Rwanda flag-colors video — page-level rhyming with hero. Full
   visibility; the vignette below it provides edge dimming. */
.contact__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  pointer-events: none;
}

/* Dark vignette around the paper card so the video reads as ambient
   color, not a competing surface. Radial gradient — center stays
   visible, edges dim toward near-black. Sits over the video. */
.contact__bg-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(10, 24, 20, 0) 0%,
      rgba(10, 24, 20, 0.35) 55%,
      rgba(10, 24, 20, 0.7) 100%);
}

/* Tricolor letterhead — three thin Rwanda flag color rules running
   full-bleed across the very top of the section. Marks this as
   official Rwandan stationery at the page close. */
.contact__flag-stripes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.contact__stripe {
  display: block;
  width: 100%;
}
.contact__stripe--blue {
  height: 6px;
  background: #00a1de;
}
.contact__stripe--yellow {
  height: 4px;
  background: #fad201;
}
.contact__stripe--green {
  height: 4px;
  background: #20603d;
}

/* Cream paper card — letter sits opaque on top of the dimmed video.
   Generous padding so the letter feels like a real piece of stationery. */
.contact__inner {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  background: #f6f3ec;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px);
  border-radius: 2px;
  box-shadow:
    0 24px 60px -16px rgba(10, 24, 20, 0.55),
    0 8px 24px -8px rgba(10, 24, 20, 0.4);
}

/* — Section header --------------------------------------------- */

.contact__eyebrow {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1f6b3a;
  font-weight: 600;
  margin: 0 0 18px;
  text-shadow: none;
}
.contact__eyebrow-num {
  color: rgba(31, 107, 58, 0.55);
  font-weight: 500;
  margin-left: 6px;
}

.contact__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.014em;
  font-weight: 400;
  color: #0a0a0a;
  margin: 0 0 clamp(32px, 4vw, 48px);
  max-width: 18ch;
  text-shadow: none;
}

/* — Letter body -------------------------------------------------- */

.contact__letter {
  margin: 0 0 clamp(28px, 3vw, 36px);
  max-width: 60ch;
}
.contact__letter p {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.7;
  color: #2a2a2a;
  margin: 0 0 18px;
}
.contact__letter p:last-child {
  margin-bottom: 0;
}
.contact__letter a {
  color: #1f6b3a;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness 200ms ease-out;
}
.contact__letter a:hover {
  text-decoration-thickness: 2px;
}
.contact__letter a:focus-visible {
  outline: 2px solid #1f6b3a;
  outline-offset: 2px;
  border-radius: 2px;
}

/* — Signature ---------------------------------------------------- */

.contact__signature {
  margin: 0 0 clamp(36px, 4vw, 48px);
  padding: clamp(20px, 2vw, 24px) 0 0;
  border-top: 1px solid rgba(10, 10, 10, 0.12);
  max-width: 60ch;
}
.contact__signature-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  color: #1f6b3a;
  margin: 0 0 6px;
}
.contact__signature-role {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a4a4a;
  font-weight: 500;
  margin: 0;
}

/* — Write-to-RDMS CTA (opens get-in-touch overlay) -------------- */

.contact__write-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-radius: 4px;
  background: #1f6b3a;
  color: #f6f3ec;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 200ms ease-out, transform 200ms ease-out;
  margin: 0 0 clamp(64px, 8vw, 96px);
}
.contact__write-btn:hover {
  background: #0a0a0a;
  transform: translateY(-1px);
}
.contact__write-btn:focus-visible {
  outline: 2px solid #1f6b3a;
  outline-offset: 3px;
}
.contact__write-btn .arrow {
  display: inline-block;
  transition: transform 200ms ease-out;
}
.contact__write-btn:hover .arrow {
  transform: translateX(3px);
}

/* — Contact methods stack (ranked: email > phone > social > footnote) --- */

.contact__methods {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 60ch;
}
.contact__methods > li {
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-top: 1px solid rgba(10, 10, 10, 0.1);
}
.contact__methods > li:first-child {
  padding-top: 0;
  border-top: none;
}

.contact__method-label {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4a4a4a;
  font-weight: 500;
  margin: 0 0 8px;
  display: block;
}

/* Email — top tier, largest type */
.contact__method--email .contact__method-value {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.4;
  color: #0a0a0a;
}
.contact__method--email a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 10, 10, 0.2);
  transition: border-color 200ms ease-out;
}
.contact__method--email a:hover {
  border-bottom-color: #1f6b3a;
}
.contact__method--email a:focus-visible {
  outline: 2px solid #1f6b3a;
  outline-offset: 3px;
  border-radius: 2px;
}
.contact__method--email a + br + a {
  /* second email gets slightly muted */
  color: #2a2a2a;
}

/* Phone — second tier */
.contact__method--phone .contact__method-value {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(18px, 2vw, 22px);
  color: #0a0a0a;
}
.contact__method--phone a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 10, 10, 0.2);
  transition: border-color 200ms ease-out;
}
.contact__method--phone a:hover {
  border-bottom-color: #1f6b3a;
}
.contact__method--phone a:focus-visible {
  outline: 2px solid #1f6b3a;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Social — third tier, icon row */
.contact__method--social .contact__socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.contact__social {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(10, 10, 10, 0.15);
  color: #2a2a2a;
  text-decoration: none;
  transition: border-color 200ms ease-out, color 200ms ease-out, background 200ms ease-out;
}
.contact__social:hover {
  border-color: #1f6b3a;
  color: #1f6b3a;
  background: rgba(31, 107, 58, 0.06);
}
.contact__social:focus-visible {
  outline: 2px solid #1f6b3a;
  outline-offset: 3px;
}
.contact__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Footnote — fourth tier, smallest type */
.contact__method--footnote .contact__method-value {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #4a4a4a;
}

@media (max-width: 600px) {
  .contact__title {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact__write-btn,
  .contact__write-btn .arrow,
  .contact__social,
  .contact__letter a,
  .contact__method--email a,
  .contact__method--phone a {
    transition: none !important;
  }
  /* Hide the looping flag video for users who prefer no motion.
     Section keeps the dark vignette + tricolor stripes — Rwandan
     identity is preserved without the moving image. */
  .contact__bg-video {
    display: none !important;
  }
}

/* ===============================================================
   FOOTER (rebuilt — replaces the legacy Webflow .footer-div)
   Brand + tagline up top, 3 columns (Navigation / Programs / Contact),
   copyright + "Made for Rwanda" bottom strip.
   =============================================================== */

/* ===============================================================
   FOOTER ($impeccable craft, brief confirmed).
   Was: 3-column nav + brand + circle vignette + emoji "Made for Rwanda".
   Now: trust + closure masthead. Brand stamp + tagline + 7 partner
   logos in monochromatic-white + hairline + copyright + tricolor
   "Made in Rwanda" mark. Sun-setting Rwanda flag-colors circle
   video bleeds off bottom-right. Restrained on dark per Q6=B.
   Anchors: The Lancet masthead, Wellcome Trust footer colophon,
   foundation annual-report endpaper.
   =============================================================== */

.site-footer {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  background: #0a0a0a;
  color: #e8e4d8;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 4vw, 36px) clamp(24px, 3vw, 36px);
}

.site-footer__inner {
  position: relative;
  z-index: 5 !important;
  max-width: 1200px;
  margin: 0 auto;
}

/* — Brand stamp ------------------------------------------------- */

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  margin: 0 0 18px;
  transition: opacity 200ms ease-out;
}
.site-footer__brand:hover {
  opacity: 0.85;
}
.site-footer__brand:focus-visible {
  outline: 2px solid #1f6b3a;
  outline-offset: 4px;
  border-radius: 2px;
}
/* Cream-paper coin holding the RDMS mark — accepted from $impeccable
   live, V2 (cream coin backplate). Reads as an institutional seal
   stamped on the dark band-dark footer. Size 72px baked from the
   accepted parameter value. */
.site-footer__brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 50%;
  background: #f6f3ec;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.site-footer__brand-logo > img {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
  border-radius: 0;
}
.site-footer__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}
.site-footer__brand-name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 400;
  color: #f6f3ec;
  letter-spacing: -0.005em;
}
.site-footer__brand-acronym {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 228, 216, 0.55);
}

.site-footer__tagline {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  font-style: italic;
  color: rgba(232, 228, 216, 0.72);
  margin: 0 0 clamp(36px, 4.5vw, 56px);
  max-width: 60ch;
}

/* — Partner logos band — monochromatic white treatment ---------- */

.site-footer__partners {
  margin: 0 0 clamp(28px, 3.5vw, 40px);
}
.site-footer__partners-label {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 228, 216, 0.5);
  font-weight: 500;
  margin: 0 0 24px;
}
.site-footer__partners-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 3vw, 44px);
}
.site-footer__partners-list > li {
  display: flex;
  align-items: center;
}
.site-footer__partner {
  display: block;
  opacity: 0.7;
  transition: opacity 200ms ease-out;
}
.site-footer__partner:hover {
  opacity: 1;
}
.site-footer__partner:focus-visible {
  outline: 2px solid #1f6b3a;
  outline-offset: 6px;
  border-radius: 2px;
}
/* Monochromatic white treatment normalizes mismatched JPEG logos.
   invert flips dark-on-white to light-on-dark; grayscale removes
   any color noise; brightness + contrast tune for legibility. */
.site-footer__partner-img {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: invert(1) grayscale(1) brightness(1.4) contrast(1.15);
  -webkit-filter: invert(1) grayscale(1) brightness(1.4) contrast(1.15);
}

/* — Hairline divider ------------------------------------------- */

.site-footer__rule {
  border: 0;
  height: 1px;
  background: rgba(31, 107, 58, 0.4);
  margin: 0 0 24px;
}

/* — Bottom strip ----------------------------------------------- */

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 12px;
  color: rgba(232, 228, 216, 0.55);
}
.site-footer__copyright {
  margin: 0;
}
.site-footer__made {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.04em;
}
.site-footer__made-text {
  color: rgba(232, 228, 216, 0.55);
}
/* Tricolor mark replaces the 🇷🇼 emoji per audit P2. Three
   horizontal hairlines stacked, sky-blue / yellow / green. */
.site-footer__made-mark {
  display: inline-flex;
  flex-direction: column;
  width: 20px;
  height: 12px;
  border-radius: 1px;
  overflow: hidden;
}
.site-footer__made-stripe {
  display: block;
  flex: 1;
  width: 100%;
}
.site-footer__made-stripe--blue {
  background: #00a1de;
}
.site-footer__made-stripe--yellow {
  background: #fad201;
}
.site-footer__made-stripe--green {
  background: #20603d;
}

/* — Made-in-Rwanda inline coin (variant 6) ---------------------- */
/* 36px circular video tucked next to the "Made in Rwanda" text in
   the footer's bottom strip. Replaces the prior 3-bar tricolor
   stripe mark. Same Rwanda flag-colors source as the hero, just
   miniaturized. Tiny enough that the GPU-compositor + circle bug
   that broke the corner-bleed circle doesn't recur (small surface,
   no clip-path needed since border-radius alone clips a 36px square
   cleanly). */

.site-footer__made-coin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 50%;
  overflow: hidden;
  background: #0a2a18;  /* dark fallback if video fails */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.45);
  vertical-align: middle;
}
.site-footer__made-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

@media (max-width: 768px) {
  .site-footer__bottom {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__brand,
  .site-footer__partner {
    transition: none !important;
  }
}

/* ===============================================================
   PHOTO BACKDROPS + LIVELY EFFECTS
   - Section-level photo backdrops with dark overlays for: Services,
     Projects (header band only), Research Academy CTA, Contact (left
     info column), About Story (small sidebar inset).
   - Ken Burns idle pan/zoom on Vision Banner + Mission Quote photos.
   - Reveal-on-scroll utility: opacity 0 → 1 + scale 0.96 → 1 when the
     element enters the viewport (IntersectionObserver in script.js).
   =============================================================== */

/* Reveal-on-scroll utility */
.reveal-photo {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}
.reveal-photo.is-visible {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-photo,
  .reveal-photo.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Ken Burns — slow infinite pan/zoom on the Vision + Mission photos.
   Targets BOTH /about (cream page) and homepage (transparent). */
@keyframes kenBurns {
  0%   { transform: scale(1.02) translate(0, 0); }
  50%  { transform: scale(1.08) translate(-1.5%, -1%); }
  100% { transform: scale(1.02) translate(0, 0); }
}
.about-vision__img,
.about-mission__img {
  animation: kenBurns 22s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .about-vision__img,
  .about-mission__img {
    animation: none;
  }
}


/* ===============================================================
   MOBILE NAV (<=768px) — hamburger toggle + slide-from-right overlay
   =============================================================== */

/* Hamburger button — hidden on desktop, shown on mobile */
.navbar-mobile-toggle {
  display: none;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 200ms ease;
}
.navbar-mobile-toggle:hover,
.navbar-mobile-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}
.navbar-mobile-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
}

@media (max-width: 768px) {
  /* Hide inline nav-menu on mobile */
  .navbar.w-nav .nav-menu {
    display: none !important;
  }
  /* Hide the "Write to RDMS" CTA on mobile — same path as inline nav,
     it lives inside the slide-from-right overlay where the user can
     reach it via the hamburger. */
  .navbar.w-nav .navbar__cta {
    display: none !important;
  }
  /* Show hamburger toggle */
  .navbar.w-nav .navbar-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Compact pill on mobile — sized to logo + hamburger */
  .navbar.w-nav {
    max-width: calc(100% - 24px);
  }
  /* The collapse-on-scroll-down state is desktop-only; on mobile the
     pill stays compact at all scroll positions. (Existing media query
     in this file already disables .is-collapsed below 991px.) */
}

/* Backdrop dim layer (sits above page content, below mobile menu) */
.mobile-menu__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 280ms ease-out;
}
.mobile-menu__backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* The menu panel itself — fixed, slides from right */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 92vw);
  background: rgba(13, 18, 26, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  z-index: 10000;
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  padding: 18px 22px 22px;
  pointer-events: none;
  visibility: hidden;
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
}
.mobile-menu.is-open {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}

.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu__brand {
  font-family: 'Google Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}

.mobile-menu__close {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  padding: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 200ms ease;
}
.mobile-menu__close:hover {
  background: rgba(255, 255, 255, 0.08);
}
.mobile-menu__close svg {
  width: 22px;
  height: 22px;
  display: block;
}

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  margin-bottom: 18px;
}

.mobile-menu__link {
  display: block;
  padding: 14px 14px;
  border-radius: 10px;
  font-family: 'Google Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: background-color 180ms ease;
}
.mobile-menu__link:hover,
.mobile-menu__link:active,
.mobile-menu__link:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.mobile-menu__socials {
  display: flex;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu__social {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.mobile-menu__social:hover {
  background: rgba(88, 204, 111, 0.18);
  border-color: rgba(88, 204, 111, 0.5);
  color: #fff;
}
.mobile-menu__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Reduced motion — skip the slide */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu {
    transition: none;
  }
  .mobile-menu__backdrop {
    transition: none;
  }
}

/* Hide the menu panel + backdrop entirely above mobile breakpoint */
@media (min-width: 769px) {
  .mobile-menu,
  .mobile-menu__backdrop {
    display: none !important;
  }
}


/* ===============================================================
   PATH A — STRIP ALL DARK CARD/PANEL BACKPLATES
   Removes background fill, backdrop blur, and shadow from every
   dark glass card site-wide so the fixed Rwanda flag-colors video
   shows through. Borders preserved as thin outlines so card shapes
   stay readable. Photo-backed CTA bands keep their photos. Utility
   surfaces (navbar, mobile menu, get-in-touch overlay, skip-link)
   keep their backplates — they need legibility on any video frame.
   =============================================================== */
/* (Path A strip list now empty for the leadership section — both
   featured and team-grid cards carry the liquid glass treatment.) */

/* ===============================================================
   OPTION A — STRIP DARK OVERLAYS ON PHOTO-BACKED BANDS
   Six photo-backed sections each layer a dark gradient overlay on
   top of their photo (the "wash" that makes them read as black
   despite having a real photo behind). Hiding the overlay element
   reveals the photo underneath. The Services CTA band has no
   separate overlay element — it paints the gradient on the section
   itself, so we override that section's background directly.
   =============================================================== */
/* (was: contact info-bg-overlay strip — info card removed in Letter craft) */

/* ===============================================================
   THREE PILLARS — single-line horizontal pillars (V2, accepted via $impeccable live)
   Each pillar collapses to one row: Kinyarwanda · num · label · description.
   3 rows total instead of 3 multi-element blocks. Maximum vertical fit
   so all 3 pillars + section header align with the locked IX cross-fade
   timing on the right-side sticky photos. Reads like a press-log line.

   Right-side content of the locked Webflow IX 3-column scroll.
   Each pillar is a whole-block clickable link to a downstream
   section: Mbere → #services, Kabiri → #research-academy,
   Gatatu → #contact. Color: Restrained — single mint-on-dark accent.
   =============================================================== */

/* Section header — Option C: Inter Display 900/600, no shadows.
   Italic-green-second-clause tic retired: accent is color-only. */
.three-pillars__eyebrow {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ov-gold);
  text-shadow: var(--ov-halo-soft);
  font-weight: 700;
  margin: 0 0 clamp(8px, 1.2vw, 14px);
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  align-items: center;
}
.three-pillars__eyebrow-num {
  color: var(--ov-cream-low);
  font-weight: 500;
}

/* Headline accent — color-only on Inter Display 900 to match headline weight. */
.three-pillars__title-accent {
  font-family: inherit;
  font-style: normal;
  font-weight: 900;
  color: var(--ov-gold);
  letter-spacing: inherit;
}

.three-pillars__lead {
  margin: 0 !important;
  max-width: 52ch;
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(17px, 1.25vw, 20px) !important;
  line-height: 1.55 !important;
  font-weight: 600;
  color: var(--ov-cream-soft);
  text-shadow: var(--ov-halo-soft);
  text-align: left !important;
}

.three-pillars__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 48ch;
}

.three-pillars__list > li {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.three-pillars__list > li:first-child {
  border-top: 1px solid rgba(169, 224, 182, 0.5);
}
.three-pillars__list > li:last-child .three-pillars__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Single-line horizontal pillar entry: ordinal | label + description.
   Whole block is the click target. Subtle background tint on hover. */
.three-pillars__item {
  display: grid;
  grid-template-columns: minmax(70px, auto) 1fr;
  gap: 16px;
  align-items: baseline;
  padding: clamp(14px, 2vw, 22px) 0;
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition: background-color 220ms ease-out;
}
.three-pillars__item:hover,
.three-pillars__item:focus-visible {
  background-color: rgba(169, 224, 182, 0.05);
}
.three-pillars__item:focus-visible {
  outline: 2px dashed #a9e0b6;
  outline-offset: 6px;
}

.three-pillars__rw {
  display: inline-block;
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-variation-settings: 'opsz' 32;
  font-style: normal;
  font-weight: 900;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #a9e0b6;
  margin: 0;
  text-align: left;
}

.v2-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.three-pillars__label {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f6f3ec;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  text-align: left;
}
.three-pillars__num   { color: var(--ov-gold); font-weight: 900; }
.three-pillars__sep   { color: var(--ov-cream-low); }
.three-pillars__title { color: var(--ov-cream-pure); text-shadow: var(--ov-halo); }

.three-pillars__desc {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  font-weight: 600;
  color: var(--ov-cream-soft);
  text-shadow: var(--ov-halo-soft);
  margin: 0;
  max-width: 42ch;
  text-align: left;
}

@media (max-width: 768px) {
  .three-pillars__item {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .three-pillars__rw {
    font-size: clamp(28px, 7vw, 36px);
  }
}

/* MOBILE COLOR OVERRIDE — Webflow paints the column-scroll section
   with a light-grey bg below 992px (desktop has the dark Rwanda
   video). Cream/white text is invisible on light grey, so flip
   body copy to ink-black and shift mint accents to field-green-deep
   for stronger contrast on the light surface. */
@media (max-width: 991px) {
  .column-scroll-content-title,
  .three-pillars__lead,
  .three-pillars__label,
  .three-pillars__title,
  .three-pillars__desc {
    color: #0a0a0a !important;
  }
  .three-pillars__eyebrow,
  .three-pillars__rw,
  .three-pillars__title-accent,
  .three-pillars__num {
    color: #1f6b3a !important;
  }
  .three-pillars__eyebrow-num,
  .three-pillars__sep {
    color: rgba(10, 10, 10, 0.45) !important;
  }
  .three-pillars__list > li {
    border-top-color: rgba(10, 10, 10, 0.18) !important;
  }
  .three-pillars__list > li:first-child {
    border-top-color: rgba(31, 107, 58, 0.5) !important;
  }
  .three-pillars__list > li:last-child .three-pillars__item {
    border-bottom-color: rgba(10, 10, 10, 0.18) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .three-pillars__item {
    transition: none !important;
  }
}

/* ===============================================================
   THREE PILLARS — object-position per pillar image
   The three pillar photos (care/knowledge/advocacy) are portrait
   768x1376 with the focal subjects at different vertical positions.
   Tune object-position so faces and key subjects stay in frame at
   any panel aspect ratio.
   =============================================================== */
.column-scroll-image._1 {  /* care.jpg — child being examined; face upper-middle */
  object-position: center 35%;
}
.column-scroll-image._2 {  /* knowledge.jpg — banner top, people reading at table */
  object-position: center center;
}
.column-scroll-image._3 {  /* advocacy.jpg — meeting around table, faces center-frame */
  object-position: center 40%;
}

/* ===============================================================
   HERO — editorial type-led + field photo, video atmosphere
   Brief: $impeccable craft Hero (confirmed)
     - Color: Committed (cooperative-green carries 30-50%)
     - Composition: type left ~60%, field photo right ~40%
     - Anchor: Rwandan government brief x serious medical journal
     - Trust: identity, service summary, audiences, founded date,
       RDB code, HQ location all visible above fold
     - Locked: hero-bg-rwanda.mp4 atmosphere (do NOT touch)
   =============================================================== */

/* Hero zone: keep transparent so the locked fixed bg-video plays
   through. Section padding accounts for navbar pill clearance.
   IMPORTANT: webflow.css sets .hero { height: 100vh } (fixed height,
   not min-height). With overflow: hidden that clips any content
   that exceeds 100vh — kills the CTAs + credibility row when the
   text column grows tall. Override height: auto so the section
   grows with content while still at least 100vh. */
.hero,
.hero.layout-b {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  z-index: 2;
  isolation: isolate;
  height: auto !important;
  min-height: 100vh;
  padding: 0;
  overflow: visible;
}

/* Container: 2-column asymmetric grid on desktop. The data-w-id
   gsap.set(opacity:0, scale:0.75) entrance still animates the
   whole container in once on load.
   Grid placement is EXPLICIT (not auto-flow) because Webflow's
   vendor cascade was reordering the children at certain
   viewports — text was landing in column 2 and the photo in
   column 1. Locking grid-column on each child makes the layout
   deterministic regardless of vendor CSS. */
.hero.layout-b .hero-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.85fr) !important;
  gap: clamp(28px, 4vw, 56px) !important;
  max-width: 1320px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: clamp(96px, 11vh, 132px) clamp(20px, 4vw, 48px) clamp(32px, 4vh, 56px) !important;
  align-items: start;
  min-height: 100vh;
  direction: ltr !important;
}

/* ───────────────────────── LEFT: type column ─────────────────── */

.hero__type {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 64ch;
  position: relative;
  z-index: 2;
  text-align: left;
  /* Lock to grid column 1 (LEFT) per memory rule:
     "Hero composition: text left, photo right". */
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.hero__type > * {
  text-align: left;
}
.hero__eyebrow,
.hero__headline,
.hero__lead,
.hero__credibility,
.hero__cred-item dt,
.hero__cred-item dd {
  text-align: left;
}

/* Eyebrow: institutional ID strip. NOT a pill. Uppercase tracking
   on a hairline rule — gov-brief / medical-journal vocabulary. */
/* Hero typography matched to Our Story (about-origin) discipline:
   Georgia display headline, Montserrat/Google-Sans-Flex body, no
   text-shadows. Readability comes from font weight + size alone. */
.hero__eyebrow {
  font-family: 'Google Sans', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ov-cream-soft);
  text-shadow: var(--ov-halo-soft);
  margin: 0 0 clamp(14px, 2.2vw, 22px);
  padding: 0 0 clamp(10px, 1.4vw, 14px);
  border-bottom: 1px solid rgba(246, 243, 236, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  align-items: center;
}
.hero__eyebrow-sep {
  color: var(--ov-gold);
  font-weight: 700;
}

/* Display headline: Georgia editorial, matches Our Story title.
   Cooperative-green italic Georgia inline accent on "Rwanda". */
.hero__headline {
  font-family: Georgia, 'Times New Roman', serif;
  /* Sizes tuned so the longest phrase ("and public health for")
     fits on a single line inside the hero type column at every
     viewport. Smaller than about-origin because hero phrases are
     longer; about-origin uses 1-3-word lines. */
  font-size: clamp(36px, 6vw, 52px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #f6f3ec;
  margin: 0 0 clamp(16px, 2.2vw, 24px);
}
@media (min-width: 768px)  { .hero__headline { font-size: clamp(44px, 5.4vw, 60px); } }
@media (min-width: 1024px) { .hero__headline { font-size: clamp(52px, 5vw, 72px); } }
.hero__headline-accent {
  color: var(--ov-gold);
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.025em;
}
/* Each title-line is exactly one row. nowrap defeats internal
   word-wrapping so the markup's 3 spans = 3 visible lines, no
   matter how much each phrase costs in width. */
.hero__title-line {
  display: block;
  white-space: nowrap;
}

/* Lead: matches Our Story body — Montserrat/Google-Sans-Flex weight 600. */
.hero__lead {
  font-family: 'Montserrat', 'Google Sans Flex', 'Google Sans', system-ui, sans-serif;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.7;
  font-weight: 600;
  color: var(--ov-cream-pure);
  text-shadow: var(--ov-halo-soft);
  margin: 0 0 clamp(20px, 2.8vw, 32px);
  max-width: 56ch;
}
@media (min-width: 768px)  { .hero__lead { font-size: clamp(18px, 1.35vw, 21px); } }
@media (min-width: 1024px) { .hero__lead { font-size: clamp(19px, 1.4vw, 22px); } }

/* CTA pair: ONE dominant green pill + ONE quiet text-link. */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(8px, 1.5vw, 18px) clamp(14px, 2.5vw, 28px);
  margin: 0 0 clamp(24px, 3vw, 40px);
}

.hero__cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: #58cc6f;
  color: #0a1a10;
  font-family: 'Google Sans', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(10, 26, 16, 0.15);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(88, 204, 111, 0);
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 200ms ease-out;
}
.hero__cta-primary:hover,
.hero__cta-primary:focus-visible {
  transform: translateY(-2px);
  background: #6ad580;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(88, 204, 111, 0.25);
}
.hero__cta-primary:focus-visible {
  outline: 2px solid #a9e0b6;
  outline-offset: 4px;
}
.hero__cta-arrow {
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__cta-primary:hover .hero__cta-arrow {
  transform: translateX(4px);
}

/* Secondary: quiet text-link, no pill. */
.hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Google Sans', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  transition: color 200ms ease-out, border-color 200ms ease-out;
  text-shadow: none;
}
.hero__cta-secondary:hover {
  color: #a9e0b6;
  border-bottom-color: #a9e0b6;
}
.hero__cta-secondary:focus-visible {
  outline: 2px solid #58cc6f;
  outline-offset: 4px;
  border-bottom-color: transparent;
}
.hero__cta-chev {
  display: inline-block;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__cta-secondary:hover .hero__cta-chev {
  transform: translateX(4px);
}

/* (Tertiary "Apply for membership" link removed per user request.) */

/* Credibility row: government-brief register. dt/dd as paired
   institutional facts. NOT stats-with-icons. */
.hero__credibility {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  column-gap: clamp(24px, 3.5vw, 44px);
  row-gap: 0;
  margin: 0;
  padding: clamp(14px, 1.8vw, 20px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: max-content;
}
.hero__cred-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__cred-item dt {
  font-family: 'Google Sans', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ov-cream-muted);
  margin: 0;
  text-shadow: var(--ov-halo-soft);
}
.hero__cred-item dd {
  font-family: 'Google Sans', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--ov-cream-pure);
  margin: 0;
  text-shadow: var(--ov-halo-soft);
}
.hero__cred-meta {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ov-cream-soft);
  letter-spacing: 0.01em;
  margin-top: 2px;
  text-shadow: var(--ov-halo-soft);
}

/* ────────────────────── RIGHT: field photo ──────────────────── */

.hero__photo {
  position: relative;
  margin: 0;
  height: clamp(340px, 60vh, 560px);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  z-index: 1;
  /* Lock to grid column 2 (RIGHT) per memory rule:
     "Hero composition: text left, photo right". */
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0;
}
.hero__photo img,
.hero__photo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Source is landscape; the white-coated subject sits
     center-left. Bias the crop slightly left so subject stays in
     frame in this portrait-shape container. */
  object-position: 35% center;
  filter: contrast(1.02) saturate(0.96);
}

/* ─────────────────────── RESPONSIVE ────────────────────────── */

@media (max-width: 991px) {
  .hero.layout-b .hero-container {
    grid-template-columns: 1fr !important;
    gap: clamp(28px, 4vw, 40px) !important;
    padding-top: clamp(100px, 14vh, 140px) !important;
    padding-bottom: clamp(40px, 6vh, 60px) !important;
    align-items: start;
  }
  /* On stacked single-column layout, photo above type. */
  .hero__photo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: clamp(280px, 40vh, 360px);
  }
  .hero__type {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  .hero__credibility {
    grid-template-columns: 1fr 1fr;
    row-gap: 14px;
  }
}

@media (max-width: 600px) {
  .hero__credibility {
    grid-template-columns: 1fr;
  }
  .hero__photo {
    height: clamp(240px, 36vh, 320px);
  }
}

/* ─────────────────── REDUCED MOTION ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .hero__cta-primary,
  .hero__cta-secondary,
  .hero__cta-arrow,
  .hero__cta-chev {
    transition: none !important;
  }
  .hero__cta-primary:hover,
  .hero__cta-primary:focus-visible {
    transform: none !important;
  }
}

/* ===============================================================
   ABOUT — 3 consolidated sections per design brief
   ($impeccable craft about-section, confirmed)

   Per-section composition + color voice for scroll rhythm:
     Section 1 .about-origin    — Restrained, text-left photo-right
     Section 2 .about-manifesto — Drenched, type-dominant pull-quote
     Section 3 .about-credo     — Committed, type-only manifesto

   Anchor: NYT Magazine / The Atlantic editorial.
   Locked photos preserved: bg-story.jpg in S1, about-mission.png
   thin-band in S2, about-vision.png unused (still on disk).
   =============================================================== */

/* ─────────────────── 1. ORIGIN & IDENTITY ───────────────────── */
/* Heavy bold sans (Montserrat 900 / Google Sans Flex 700 fallback)
   over the global hero video. No background image, no scrim, no
   text-shadow — readability comes from font weight + size alone.
   Per user spec: "RDMS" in cream, matching the rest of the headline. */

.about-origin {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  /* Tightened gap from hero (sample B): margin-top: 0; padding-top
     clamp 56-96 (was 120-200 + margin clamp 48-96). Cuts ~150-220px
     of empty space between hero credibility row and "Our Story". */
  margin-top: 0;
  padding: clamp(56px, 7vh, 96px) clamp(20px, 4vw, 56px) clamp(80px, 11vh, 140px);
  color: #f6f3ec;
  text-align: left;
}

.about-origin__inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vh, 64px);
  text-align: left;
}

/* Masthead deck across the top. */
.about-origin__deck {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 20px);
  align-items: center;
  font-family: 'Google Sans', 'Google Sans Flex', 'Montserrat', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(246, 243, 236, 0.85);
}
.about-origin__deck-mark {
  color: #58cc6f;
  font-weight: 700;
}
.about-origin__deck-rule {
  flex: 1;
  height: 1px;
  min-width: 24px;
  background: rgba(246, 243, 236, 0.32);
}

/* FeaturedSpotlight — vanilla port. Two-column flex composition,
   text-left + framed-image-right. All hover animations are pure
   CSS (no JS state). 3-line title with stagger, animated label
   line, image scale + frame outline + 4 corner accents + "01"
   index number. */
.about-origin__spotlight {
  display: flex;
  flex-direction: column-reverse;
  gap: clamp(40px, 6vw, 64px);
  align-items: flex-start;
  cursor: default;
}
@media (min-width: 768px) {
  .about-origin__spotlight {
    flex-direction: row;
    gap: clamp(48px, 6vw, 80px);
    align-items: stretch;
  }
}
@media (min-width: 1024px) {
  .about-origin__spotlight { gap: clamp(64px, 7vw, 96px); }
}

/* ─── Left: Text Block ─────────────────────────────────────────── */
.about-origin__type {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  max-width: 480px;
  align-items: flex-start;
  text-align: left;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .about-origin__type {
    width: 440px;
    max-width: 440px;
    padding: 20px 0;
  }
}
@media (min-width: 1024px) {
  .about-origin__type {
    width: 520px;
    max-width: 520px;
    padding: 32px 0;
  }
}

/* "Our Story" label with animated line */
.about-origin__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .about-origin__label { gap: 16px; margin-bottom: 32px; }
}
.about-origin__label-line {
  display: block;
  height: 1px;
  width: 32px;
  background: #f6f3ec;
  transition: width 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.about-origin__label-text {
  font-family: 'Montserrat', 'Google Sans Flex', 'Google Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: #f6f3ec;
  transition: letter-spacing 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
  .about-origin__label-text { font-size: 14px; }
}
@media (min-width: 1024px) {
  .about-origin__label-text { font-size: 15px; }
}

/* 3-line title with stagger */
.about-origin__headline {
  position: relative;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: #f6f3ec;
  margin: 0;
  text-align: inherit;
}
.about-origin__title-line {
  display: block;
  font-size: clamp(48px, 7vw, 72px);
  line-height: 1.02;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px)  { .about-origin__title-line { font-size: clamp(64px, 7vw, 88px); } }
@media (min-width: 1024px) { .about-origin__title-line { font-size: clamp(80px, 7.5vw, 112px); } }

/* Body — bigger, heavier, full cream (clear at all states) */
.about-origin__body {
  font-family: 'Montserrat', 'Google Sans Flex', 'Google Sans', system-ui, sans-serif;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.7;
  font-weight: 600;
  color: #f6f3ec;
  margin: clamp(36px, 5vw, 56px) 0 0;
  max-width: 480px;
  text-align: inherit;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px)  {
  .about-origin__body { font-size: clamp(18px, 1.35vw, 21px); max-width: 440px; }
}
@media (min-width: 1024px) {
  .about-origin__body { font-size: clamp(19px, 1.4vw, 22px); max-width: 520px; }
}
.about-origin__body p { margin: 0 0 14px; text-align: inherit; }
.about-origin__body p:last-child { margin-bottom: 0; }

/* ─── Right: Image Block ──────────────────────────────────────── */
.about-origin__media {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.about-origin__media-frame {
  position: absolute;
  inset: -12px;
  border: 1px solid transparent;
  pointer-events: none;
  transition:
    border-color 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
  .about-origin__media-frame { inset: -16px; }
}

/* Image container — desktop: fills the remaining width after the
   text column, height stretches to match the text column via
   `align-items: stretch` on the spotlight flex parent. Mobile:
   keeps a 2:3 aspect since there's no adjacent text column. */
.about-origin__media-imgbox {
  position: relative;
  width: clamp(260px, 78vw, 360px);
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
@media (min-width: 768px) {
  .about-origin__media-imgbox {
    width: 100%;
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 480px;
  }
}
@media (min-width: 1024px) {
  .about-origin__media-imgbox {
    min-height: 560px;
  }
}

.about-origin__media-shadow {
  position: absolute;
  inset: -4px;
  pointer-events: none;
  transition: box-shadow 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-origin__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-origin__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 4 corner accents — top-left vert/horiz, bottom-right vert/horiz */
.about-origin__corner {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  opacity: 0;
  transition:
    opacity 500ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}
.about-origin__corner--tl-v { top: 8px; left: 8px; width: 1px; height: 20px; transform: scaleY(0); transform-origin: top; transition-delay: 50ms; }
.about-origin__corner--tl-h { top: 8px; left: 8px; width: 20px; height: 1px; transform: scaleX(0); transform-origin: left; transition-delay: 100ms; }
.about-origin__corner--br-v { bottom: 8px; right: 8px; width: 1px; height: 20px; transform: scaleY(0); transform-origin: bottom; transition-delay: 150ms; }
.about-origin__corner--br-h { bottom: 8px; right: 8px; width: 20px; height: 1px; transform: scaleX(0); transform-origin: right; transition-delay: 200ms; }
@media (min-width: 768px) {
  .about-origin__corner--tl-v, .about-origin__corner--tl-h { top: 12px; left: 12px; }
  .about-origin__corner--br-v, .about-origin__corner--br-h { bottom: 12px; right: 12px; }
  .about-origin__corner--tl-v, .about-origin__corner--br-v { height: 24px; }
  .about-origin__corner--tl-h, .about-origin__corner--br-h { width: 24px; }
}

/* "01" index number */
.about-origin__index {
  position: absolute;
  bottom: -28px;
  right: 0;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 12px;
  font-weight: 500;
  color: rgba(246, 243, 236, 0.7);
  opacity: 0.4;
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 768px) {
  .about-origin__index { bottom: -32px; font-size: 14px; }
}

/* ─── HOVER STATE — 12 transitions on .about-origin__spotlight:hover ── */
.about-origin__spotlight:hover .about-origin__label-line { width: 48px; }
.about-origin__spotlight:hover .about-origin__label-text { letter-spacing: 0.3em; }
.about-origin__spotlight:hover .about-origin__title-line--2 { transform: translateX(12px); }
.about-origin__spotlight:hover .about-origin__body { transform: translateY(-4px); }
.about-origin__spotlight:hover .about-origin__media { transform: translate(4px, -4px); }
.about-origin__spotlight:hover .about-origin__media-frame {
  border-color: rgba(246, 243, 236, 0.18);
  transform: scale(1.01);
}
.about-origin__spotlight:hover .about-origin__media-shadow {
  box-shadow: 0 24px 64px rgba(246, 243, 236, 0.10);
}
.about-origin__spotlight:hover .about-origin__photo-img { transform: scale(1.03); }
.about-origin__spotlight:hover .about-origin__media-overlay { opacity: 1; }
.about-origin__spotlight:hover .about-origin__corner { opacity: 1; }
.about-origin__spotlight:hover .about-origin__corner--tl-v,
.about-origin__spotlight:hover .about-origin__corner--br-v { transform: scaleY(1); }
.about-origin__spotlight:hover .about-origin__corner--tl-h,
.about-origin__spotlight:hover .about-origin__corner--br-h { transform: scaleX(1); }
.about-origin__spotlight:hover .about-origin__index {
  opacity: 1;
  transform: translateY(12px);
}

/* ─────────────────── 2. MISSION MANIFESTO ───────────────────── */
/* Drenched: full-width dark teal-navy band. Photo as thin top band
   fades into the section bg. Massive italic Georgia pull-quote
   dominates ~70% of viewport, flush-left. Loudest typographic
   moment on the homepage. */

.about-manifesto {
  position: relative;
  z-index: 2;
  isolation: isolate;
  /* Drenched: dark teal-navy band, draws eye, frames the quote */
  background:
    linear-gradient(180deg, #0a2540 0%, #0d3550 50%, #0a2540 100%) !important;
  padding: 0;
  color: #f5faf6;
  text-align: left;
  overflow: hidden;
}

.about-manifesto__photo-band {
  position: relative;
  width: 100%;
  height: clamp(180px, 25vh, 280px);
  overflow: hidden;
  filter: brightness(0.65) contrast(1.05) saturate(0.8);
}

.about-manifesto__photo-band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.about-manifesto__photo-band::after {
  /* fade photo band into the dark section so they read as one */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60%;
  background: linear-gradient(180deg, rgba(10, 37, 64, 0) 0%, rgba(10, 37, 64, 1) 100%);
  pointer-events: none;
}

.about-manifesto__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 96px) clamp(20px, 4vw, 48px) clamp(72px, 11vw, 120px);
  text-align: left;
}

.about-manifesto__eyebrow {
  font-family: 'Google Sans', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ov-cream-muted);
  text-shadow: var(--ov-halo-soft);
  margin: 0 0 clamp(28px, 4vw, 40px);
  text-align: left;
}

.about-manifesto__quote {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: #f5faf6;
  margin: 0 0 clamp(28px, 4vw, 40px);
  max-width: 32ch;
  text-align: left;
  text-wrap: balance;
}

.about-manifesto__quote-mark {
  color: #58cc6f;
  font-style: normal;
  font-weight: 600;
  font-size: 1.1em;
  line-height: 0;
  vertical-align: -0.05em;
  margin: 0 0.04em;
}

.about-manifesto__attribution {
  font-family: 'Google Sans', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  margin: 0;
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: max-content;
  text-align: left;
}

/* ─────────────────── 3. VALUES (CREDO) ──────────────────────── */
/* Horizontal carousel on cream paper. Newsprint masthead deck +
   "What we stand for." headline + "About RDMS ↗" link sit on the
   left of the header; prev/next arrow buttons on the right. Five
   cards in a horizontal scroll-snap rail, each with a 4:5 portrait
   image, large Georgia title, body summary. Vanilla port of the
   Embla/shadcn Gallery6 pattern. */

.about-credo {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background: #f6f3ec !important;
  padding: clamp(80px, 11vh, 128px) 0 clamp(96px, 13vh, 144px);
  color: #2a2a2a;
  text-align: left;
}

.about-credo__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
  text-align: left;
}

/* Header — heading-block on the left, nav buttons on the right. */
.about-credo__header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(24px, 3vw, 32px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
@media (min-width: 768px) {
  .about-credo__header {
    flex-direction: row;
    align-items: flex-end;
  }
}

.about-credo__title-block {
  min-width: 0;
}

/* Newsprint masthead: meta-left, italic-eyebrow-center, meta-right. */
.about-credo__masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 2vw, 24px);
  align-items: end;
  border-bottom: 2px solid #0a0a0a;
  padding-bottom: clamp(14px, 1.8vw, 20px);
  margin-bottom: clamp(20px, 2.5vw, 28px);
  max-width: 720px;
}
.about-credo__masthead-meta {
  font-family: 'Google Sans', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: #4a4a4a;
  margin: 0;
  text-align: left;
}
.about-credo__masthead-meta--right {
  text-align: right;
}
.about-credo__masthead-eyebrow {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(14px, 1.1vw, 16px);
  color: #1f6b3a;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.about-credo__headline {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: #0a0a0a;
  margin: 0 0 clamp(12px, 1.5vw, 18px);
  max-width: 16ch;
  text-wrap: balance;
  text-align: left;
}

.about-credo__demo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Google Sans', 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 500;
  color: #1f6b3a;
  text-decoration: none;
  transition: color 200ms ease-out;
}
.about-credo__demo:hover { color: #0a0a0a; }
.about-credo__demo svg {
  width: 16px;
  height: 16px;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.about-credo__demo:hover svg { transform: translate(2px, -2px); }

/* Prev/next arrow buttons — outlined, dark-fill on hover. */
.about-credo__nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin-top: clamp(8px, 2vw, 0px);
}
.about-credo__btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #0a0a0a;
  border: 1px solid #0a0a0a;
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  transition:
    background 200ms ease-out,
    color 200ms ease-out,
    transform 200ms ease-out,
    opacity 200ms ease-out;
}
.about-credo__btn:hover:not(:disabled) {
  background: #0a0a0a;
  color: #f6f3ec;
}
.about-credo__btn:active:not(:disabled) {
  transform: scale(0.96);
}
.about-credo__btn:focus-visible {
  outline: 2px solid #1f6b3a;
  outline-offset: 3px;
}
.about-credo__btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.about-credo__btn svg { width: 20px; height: 20px; }

/* Rail — full-bleed horizontal scroll with hidden scrollbar. */
.about-credo__rail {
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.about-credo__rail::-webkit-scrollbar { display: none; }

.about-credo__track {
  list-style: none;
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  padding: 0 clamp(20px, 4vw, 32px);
  margin: 0;
}
@media (min-width: 1280px) {
  .about-credo__track {
    padding-left: max(2rem, calc(50vw - 640px + 1rem));
    padding-right: max(0rem, calc(50vw - 640px - 1rem));
  }
}

.about-credo__item {
  flex: 0 0 auto;
  width: clamp(280px, 70vw, 420px);
  scroll-snap-align: start;
}
@media (max-width: 768px) {
  .about-credo__rail { scroll-snap-type: x proximity; }
  .about-credo__item { width: clamp(260px, 78vw, 360px); }
}

.about-credo__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.about-credo__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: clamp(16px, 2vw, 22px);
  background: #ece6d6;
}
.about-credo .about-credo__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform-origin: center bottom;
  transform: scale(1) !important;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform;
  display: block;
}
.about-credo .about-credo__item:hover .about-credo__media img,
.about-credo .about-credo__card:hover .about-credo__media img {
  transform: scale(1.10) !important;
}

.about-credo__card-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #0a0a0a;
  margin: 0 0 clamp(10px, 1.2vw, 14px);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}

.about-credo__card-summary {
  font-family: 'Google Sans', 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left;
}

/* ─────────────────── ABOUT RESPONSIVE ───────────────────────── */

@media (max-width: 991px) {
  .about-origin {
    padding: clamp(72px, 10vh, 120px) clamp(20px, 4vw, 32px) clamp(56px, 8vh, 96px);
  }
  .about-origin__inner {
    gap: clamp(28px, 4vh, 40px);
  }
  .about-credo__masthead {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: left;
  }
  .about-credo__masthead-meta--right {
    text-align: left;
  }
  .about-credo__masthead-eyebrow {
    text-align: left;
    white-space: normal;
  }
}

@media (max-width: 600px) {
  .about-origin__deck {
    font-size: 10px;
    gap: 10px;
  }
  .about-origin__deck-rule {
    display: none;
  }
}

/* ─────────────────── ABOUT REDUCED MOTION ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  .about-origin__spotlight *,
  .about-manifesto__photo-band img,
  .about-credo__media img,
  .about-credo__rail {
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .about-credo__card:hover .about-credo__media img {
    transform: none;
  }
  .about-origin__spotlight:hover .about-origin__title-line,
  .about-origin__spotlight:hover .about-origin__body,
  .about-origin__spotlight:hover .about-origin__media,
  .about-origin__spotlight:hover .about-origin__photo-img,
  .about-origin__spotlight:hover .about-origin__index {
    transform: none !important;
  }
}

/* ===============================================================
   SERVICES — National Geographic editorial feature spread
   ($impeccable craft Services, confirmed)

   Asymmetric layout:
     01 / Featured (photo-right)  — School Screenings
     02 + 03 / Pair (small + small)
     04 / Featured (photo-left)   — Mobile Clinics
     05 + 06 / Compressed cross-refs

   Color: Restrained (tinted off-white type, single green accent).
   Anchor: National Geographic / Smithsonian feature spread.
   No CTAs — visitor reads and scrolls to Projects.
   =============================================================== */

.services {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background: transparent !important;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 48px);
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
  overflow: visible;
}

.services__inner {
  max-width: 1320px;
  margin: 0 auto;
  text-align: left;
}

/* ─── Section header ─────────────────────────────────────────── */

.services__header {
  max-width: 920px;
  margin: 0 0 clamp(40px, 5vw, 64px);
  text-align: left;
}

.services__eyebrow {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ov-green);
  text-shadow: var(--ov-halo-soft);
  margin: 0 0 clamp(16px, 2.4vw, 24px);
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  align-items: center;
}
.services__eyebrow-num {
  color: var(--ov-cream-low);
  font-weight: 500;
}

.services__title {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-variation-settings: 'opsz' 32;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ov-cream-pure);
  text-shadow: var(--ov-halo);
  margin: 0 0 clamp(20px, 2.8vw, 28px);
  max-width: 22ch;
  text-wrap: balance;
  text-align: left;
}
.services__title-accent {
  font-family: inherit;
  font-style: normal;
  font-weight: 900;
  color: var(--ov-gold);
  letter-spacing: inherit;
}

.services__lead {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
  font-weight: 600;
  color: var(--ov-cream-soft);
  text-shadow: var(--ov-halo-soft);
  margin: 0;
  max-width: 60ch;
  text-align: left;
}

.services__rule {
  border: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  margin: clamp(56px, 7vw, 88px) 0;
  padding: 0;
}

.services__rule--quiet {
  background: rgba(255, 255, 255, 0.12);
  margin: clamp(44px, 5vw, 64px) 0;
}

/* ─── Service block — base ───────────────────────────────────── */

.service {
  margin: 0;
  text-align: left;
}

.service__num {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-variation-settings: 'opsz' 32;
  font-style: normal;
  font-weight: 900;
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1;
  color: #a9e0b6;
  margin: 0 0 clamp(12px, 1.6vw, 18px);
  letter-spacing: -0.02em;
  text-align: left;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.service__num-label {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f6f3ec;
}

.service__name {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-variation-settings: 'opsz' 32;
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #f6f3ec;
  margin: 0 0 clamp(14px, 2vw, 20px);
  max-width: 22ch;
  text-align: left;
  text-wrap: balance;
}

.service__desc {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  font-weight: 600;
  color: #f6f3ec;
  margin: 0 0 clamp(16px, 2vw, 22px);
  max-width: 56ch;
  text-align: left;
}

.service__evidence {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: clamp(14px, 1.8vw, 18px);
  max-width: 56ch;
}

.service__evidence li {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.5;
  font-weight: 600;
  color: #f6f3ec;
  padding-left: 18px;
  position: relative;
  text-align: left;
}
.service__evidence li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 1px;
  background: #a9e0b6;
}

/* ─── Featured spreads (01 + 04) ────────────────────────────── */

.service--featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.service--photo-right .service__photo { order: 2; }
.service--photo-right .service__body { order: 1; }
.service--photo-left .service__photo { order: 1; }
.service--photo-left .service__body { order: 2; }

.service__photo {
  position: relative;
  margin: 0;
  height: clamp(320px, 50vh, 480px);
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 24px 60px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  min-width: 0;
}

.service__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: contrast(1.02) saturate(0.94);
}

.service__photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.4vw, 22px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.78) 100%);
  pointer-events: none;
  text-align: left;
}
.service__photo-caption span:first-child {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f6f3ec;
  text-align: left;
}
.service__photo-caption-meta {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.78);
  text-align: left;
}

.service__body {
  min-width: 0;
  text-align: left;
}

/* ─── Small pair (02 + 03) ──────────────────────────────────── */

.services__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.service--small .service__photo--small {
  height: clamp(220px, 30vh, 320px);
  margin: 0 0 clamp(18px, 2.4vw, 24px);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* service-classroom.jpg has the teacher at the chalkboard (upper
   portion of the source). Push object-position up so the teacher's
   face stays in frame regardless of container aspect ratio. */
.service__photo img[src*="service-classroom"] {
  object-position: center 18% !important;
}
.service--small .service__name {
  font-size: clamp(20px, 2vw, 24px);
}
.service--small .service__desc {
  font-size: clamp(14px, 0.95vw, 15.5px);
}
.service--no-photo {
  padding-top: clamp(20px, 2.6vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* ─── Compressed cross-references (05 + 06) ─────────────────── */

.services__compressed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 36px);
}

.service-link {
  display: block;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  text-align: left;
}
.service-link:hover,
.service-link:focus-visible {
  border-top-color: #a9e0b6;
  transform: translateY(-2px);
}
.service-link:focus-visible {
  outline: 2px solid #58cc6f;
  outline-offset: 6px;
}
.service-link .service__num {
  font-size: clamp(20px, 2vw, 26px);
  margin: 0 0 8px;
}
.service-link__name {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-variation-settings: 'opsz' 32;
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #f6f3ec;
  margin: 0 0 8px;
  text-align: left;
}
.service-link__hint {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  color: #f6f3ec;
  margin: 0;
  text-align: left;
}
.service-link__arrow {
  display: inline-block;
  margin-left: 4px;
  color: #a9e0b6;
  font-weight: 500;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.service-link:hover .service-link__arrow {
  transform: translateX(3px);
}

/* ─── Services responsive ────────────────────────────────────── */

@media (max-width: 991px) {
  .service--featured {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 32px);
  }
  .service--photo-right .service__photo,
  .service--photo-left .service__photo {
    order: 1;
  }
  .service--photo-right .service__body,
  .service--photo-left .service__body {
    order: 2;
  }
  .service__photo {
    height: clamp(260px, 36vh, 360px);
  }
  .services__pair {
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 40px);
  }
  .services__compressed {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 600px) {
  .service__num {
    font-size: clamp(24px, 6vw, 32px);
  }
  .service--small .service__photo--small {
    height: clamp(180px, 28vh, 240px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service__photo img,
  .service-link {
    transition: none !important;
  }
  .service-link:hover {
    transform: none !important;
  }
}

/* ===============================================================
   PROJECTS — press-release-log style activity log
   ($impeccable craft Projects, confirmed)

   3 status-grouped bands with per-band color voice:
     .proj-band--active     Committed green (loudest)
     .proj-band--completed  Restrained neutral (mid)
     .proj-band--planned    Restrained-faded (quietest)

   Each band has: sticky-style header (eyebrow + count) and a
   list of project entries. Each entry has a prominent date
   column on the left (the spine) and content on the right.

   No JS filter, no badges, no images. Press log discipline.
   Anchor: GitHub Releases / Stripe Changelog / Vercel Ship Log.
   =============================================================== */

.projects {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background: transparent !important;
  padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 48px);
  color: rgba(255, 255, 255, 0.92);
  text-align: left;
  overflow: visible;
}

.projects__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: left;
}

/* ─── Section header ─────────────────────────────────────────── */

.projects__header {
  max-width: 880px;
  margin: 0 0 clamp(48px, 6vw, 80px);
  text-align: left;
  /* Override legacy: no longer a photo-band header */
  position: static;
  isolation: auto;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

.projects__eyebrow {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ov-green);
  text-shadow: var(--ov-halo-soft);
  margin: 0 0 clamp(16px, 2.4vw, 24px);
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  align-items: center;
}
.projects__eyebrow-num {
  color: var(--ov-cream-low);
  font-weight: 500;
}

.projects__title {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-variation-settings: 'opsz' 32;
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ov-cream-pure);
  text-shadow: var(--ov-halo);
  margin: 0 0 clamp(20px, 2.8vw, 28px);
  max-width: 22ch;
  text-wrap: balance;
  text-align: left;
}
.projects__title-accent {
  font-family: inherit;
  font-style: normal;
  font-weight: 900;
  color: var(--ov-gold);
  letter-spacing: inherit;
}

.projects__lead {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.55;
  font-weight: 600;
  color: var(--ov-cream-soft);
  text-shadow: var(--ov-halo-soft);
  margin: 0;
  max-width: 60ch;
  text-align: left;
}

/* ─── Status band — base ─────────────────────────────────────── */

.proj-band {
  margin: 0 0 clamp(48px, 6vw, 72px);
  text-align: left;
}
.proj-band:last-child {
  margin-bottom: 0;
}

.proj-band__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 clamp(18px, 2vw, 24px);
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.proj-band__heading {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-variation-settings: 'opsz' 32;
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ov-cream-pure);
  text-shadow: var(--ov-halo);
  margin: 0;
  text-align: left;
}

.proj-band__count {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ov-cream-soft);
  flex: none;
  white-space: nowrap;
  text-shadow: var(--ov-halo-soft);
}

.proj-band__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ─── Project entry — base ───────────────────────────────────── */

.proj-entry {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(20px, 2.6vw, 28px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  text-align: left;
}
.proj-entry:last-child {
  border-bottom: none;
}

.proj-entry__date {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ov-cream-pure);
  text-shadow: var(--ov-halo-soft);
  margin: 0;
  white-space: nowrap;
  text-align: left;
}

.proj-entry__body {
  min-width: 0;
  text-align: left;
}

.proj-entry__category {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ov-gold);
  text-shadow: var(--ov-halo-soft);
  margin: 0 0 8px;
  text-align: left;
}

.proj-entry__name {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-variation-settings: 'opsz' 32;
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ov-cream-pure);
  text-shadow: var(--ov-halo);
  margin: 0 0 10px;
  text-align: left;
}

.proj-entry__desc {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  font-weight: 600;
  color: var(--ov-cream-soft);
  text-shadow: var(--ov-halo-soft);
  margin: 0;
  max-width: 60ch;
  text-align: left;
}

/* ─── Per-band color variation ───────────────────────────────── */

/* Active Now: Committed — gold carries the temporal energy.
   Hierarchy via gold (active markers), cream-pure (heading), cream-soft (counts/dates). */
.proj-band--active .proj-band__header {
  border-bottom-color: rgba(245, 210, 138, 0.55);   /* gold tint */
  border-bottom-width: 2px;
}
.proj-band--active .proj-band__heading {
  color: var(--ov-gold);
  text-shadow: var(--ov-halo);
}
.proj-band--active .proj-band__count {
  color: var(--ov-cream-soft);
}
.proj-band--active .proj-entry__date {
  color: var(--ov-gold);
  font-weight: 900;
  text-shadow: var(--ov-halo-soft);
}
.proj-band--active .proj-entry__date::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--ov-gold);
  border-radius: 50%;
  margin-right: 12px;
  vertical-align: 3px;
  box-shadow: 0 0 0 5px rgba(245, 210, 138, 0.18);
}

/* Recently Completed: Restrained — neutral, factual */
.proj-band--completed .proj-band__heading {
  color: var(--ov-cream-pure);
}

/* Coming Next: Restrained-faded — Inter at lower weight + opacity. */
.proj-band--planned {
  opacity: 0.85;
}
.proj-band--planned .proj-band__heading {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ov-cream-soft);
}
.proj-band--planned .proj-entry__date {
  font-family: 'Inter', 'Google Sans Flex', system-ui, sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 24px);
  color: var(--ov-cream-muted);
  letter-spacing: -0.01em;
}
.proj-band--planned .proj-entry__name {
  color: var(--ov-cream-soft);
}

/* ─── Projects responsive ────────────────────────────────────── */

@media (max-width: 768px) {
  .proj-entry {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: clamp(18px, 2.4vw, 22px) 0;
  }
  .proj-entry__date {
    margin-bottom: 4px;
  }
  .proj-band__header {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ===============================================================
   ACCESSIBILITY — skip link + visually-hidden utility
   Added by $impeccable harden P0 pass: WCAG 2.4.1 (Bypass Blocks)
   and 1.3.1 / 3.3.2 (form labels).
   =============================================================== */

/* Skip-link — first focusable element on the page. Off-screen until
   focused, then docked to the top with a visible focus surface. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
  padding: 12px 18px;
  background: #0a0a0a;
  color: #f5faf6;
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  transform: translateY(-120%);
  transition: transform 200ms ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid #58cc6f;
  outline-offset: 2px;
}

/* visually-hidden — accessible-name-only labels for inputs that have
   placeholder-only visual hints. Pattern from inclusive-components. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .proj-band--active .proj-entry__date::before {
    box-shadow: none;
  }
}

/* ===============================================================
   FAQ SECTION — two-column magazine: sticky category nav on the
   left, Q&A pairs on the right. Cream paper. Native dl/dt/dd
   semantics for the question/answer pairs.
   =============================================================== */

.faq {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background: #f6f3ec !important;
  background-color: #f6f3ec !important;
  color: #2a2a2a;
  text-align: left;
  padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 36px);
  /* Defensive: defeat any stray backdrop-filter inherited from
     surrounding sections; the FAQ is opaque cream paper. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Make sure the section is not collapsing to zero height. */
  min-height: 50vh;
}

.faq__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* — Section header --------------------------------------------- */

.faq__header {
  margin: 0 0 clamp(48px, 6vw, 72px);
  max-width: 56ch;
}
.faq__eyebrow {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1f6b3a;
  font-weight: 600;
  margin: 0 0 18px;
}
.faq__eyebrow-num {
  color: rgba(31, 107, 58, 0.55);
  font-weight: 500;
  margin-left: 6px;
}
.faq__title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: #0a0a0a;
  margin: 0 0 18px;
}
.faq__lead {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0;
}
.faq__lead a {
  color: #1f6b3a;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 200ms ease-out;
}
.faq__lead a:hover {
  text-decoration-thickness: 2px;
}

/* — Two-column body -------------------------------------------- */

.faq__body {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

/* — Sticky category nav (left column) -------------------------- */

.faq__nav {
  position: sticky;
  top: clamp(96px, 12vh, 132px);
}
.faq__nav-label {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4a4a4a;
  font-weight: 500;
  margin: 0 0 16px;
}
.faq__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: faq-nav;
}
.faq__nav-list > li {
  counter-increment: faq-nav;
}
.faq__nav-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #2a2a2a;
  text-decoration: none;
  transition: color 200ms ease-out;
}
.faq__nav-link:hover,
.faq__nav-link[aria-current="true"] {
  color: #1f6b3a;
}
.faq__nav-link:focus-visible {
  outline: 2px solid #1f6b3a;
  outline-offset: 2px;
  border-radius: 2px;
}
.faq__nav-link:last-child {
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}
.faq__nav-list > li:last-child .faq__nav-link {
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}
.faq__nav-name {
  flex: 1;
}
.faq__nav-count {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 12px;
  color: #7a7a7a;
  font-weight: 400;
}

/* — Q&A categories (right column) ------------------------------ */

.faq__categories {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 72px);
  min-width: 0;
}

.faq__category {
  scroll-margin-top: clamp(96px, 12vh, 140px);
}

.faq__category-heading {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  font-weight: 400;
  color: #1f6b3a;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid #0a0a0a;
}

.faq__list {
  margin: 0;
  padding: 0;
}
.faq__item {
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
}
.faq__item:last-child {
  border-bottom: none;
}

.faq__question {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.4;
  font-weight: 400;
  color: #0a0a0a;
  margin: 0 0 10px;
}

.faq__answer {
  font-family: 'Google Sans', system-ui, sans-serif;
  font-size: clamp(14px, 1.3vw, 15px);
  line-height: 1.65;
  color: #2a2a2a;
  margin: 0;
  max-width: 65ch;
}
.faq__answer a {
  color: #1f6b3a;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 200ms ease-out;
}
.faq__answer a:hover {
  text-decoration-thickness: 2px;
}

/* — Responsive: stack at <860px, hide sticky nav at <768px ----- */

@media (max-width: 859px) {
  .faq__body {
    grid-template-columns: 1fr;
    gap: clamp(32px, 4vw, 48px);
  }
  .faq__nav {
    position: static;
    top: auto;
  }
  .faq__nav-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  .faq__nav-list > li:nth-child(2) .faq__nav-link {
    border-top: 1px solid rgba(10, 10, 10, 0.08);
  }
}
@media (max-width: 480px) {
  .faq__nav-list {
    grid-template-columns: 1fr;
  }
  .faq__nav-list > li:nth-child(2) .faq__nav-link {
    border-top: none;
  }
}

/* ============================================================
   === MENTORS — CIRCULAR CAROUSEL ===
   Vanilla port of CircularTestimonials. Six cards wrap; three
   visible at a time (prev/center/next). Active card rebuilds the
   quote with per-word blur-in spans. Sits beneath Leadership and
   inherits the dark glass aesthetic.
   ============================================================ */
.mentors {
  position: relative;
  z-index: 2;             /* sits above fixed hero video, same as .leadership */
  isolation: isolate;
  background: transparent;
  padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 80px);
  color: var(--ov-cream-pure);
}
.mentors__inner {
  max-width: 1240px;
  margin: 0 auto;
}
.mentors__eyebrow {
  font-family: 'Google Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ov-green);
  font-weight: 600;
  margin: 0 0 12px;
  text-align: left;
  text-shadow: var(--ov-halo-soft);
}
.mentors__title {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ov-cream-pure);
  margin: 0 0 14px;
  text-align: left;
  text-shadow: var(--ov-halo);
}
.mentors__subtitle {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ov-cream-soft);
  max-width: 680px;
  margin: 0 0 56px;
  text-align: left;
  text-shadow: var(--ov-halo-soft);
}

.mentors__carousel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

/* === Stage with 3D perspective === */
.mentors__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin: 0 auto;
  perspective: 1000px;
}
.mentors__card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  opacity: 0;
  pointer-events: none;
  transition:
    transform 800ms cubic-bezier(0.4, 2, 0.3, 1),
    opacity   600ms ease;
  box-shadow: 0 18px 50px -10px rgba(0, 0, 0, 0.55);
}
/* CSS-only fallback: show the first card before JS runs.
   JS-driven .is-active / .is-prev / .is-next classes (declared below)
   override these via source-order on equal specificity. */
.mentors__card:first-child {
  opacity: 1;
  z-index: 3;
  pointer-events: auto;
  transform: translateX(0) translateY(0) scale(1) rotateY(0deg);
}
.mentors__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(0.1) saturate(0.95);
}
.mentors__card.is-active {
  opacity: 1; z-index: 3; pointer-events: auto;
  transform: translateX(0) translateY(0) scale(1) rotateY(0deg);
}
.mentors__card.is-prev {
  opacity: 1; z-index: 2; pointer-events: auto;
  transform: translateX(-22%) translateY(-8%) scale(0.85) rotateY(15deg);
}
.mentors__card.is-next {
  opacity: 1; z-index: 2; pointer-events: auto;
  transform: translateX(22%) translateY(-8%) scale(0.85) rotateY(-15deg);
}

/* === Content side === */
.mentors__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mentors__name {
  font-family: 'Fraunces', 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(26px, 2.3vw, 32px);
  line-height: 1.15;
  color: var(--ov-cream-pure);
  margin: 0 0 6px;
  text-align: left;
  text-shadow: var(--ov-halo);
}
.mentors__designation {
  font-family: 'Google Sans', sans-serif;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Accent-gold from DESIGN.md tokens — donor-grade institutional warm,
     contrasts cleanly with the green/teal hero video. */
  color: var(--ov-gold);
  font-weight: 600;
  margin: 0 0 28px;
  text-align: left;
  text-shadow: var(--ov-halo-soft);
}
.mentors__quote {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--ov-cream-soft);
  margin: 0;
  text-align: left;
  min-height: 6.5em;  /* prevent layout jump as quote length varies */
  text-shadow: var(--ov-halo-soft);
}
/* word-by-word blur-in animation (matches Framer Motion blur+y from React source) */
.mentors__quote .word {
  display: inline-block;
  filter: blur(10px);
  opacity: 0;
  transform: translateY(5px);
  animation: mentorsWordIn 380ms ease-out forwards;
}
@keyframes mentorsWordIn {
  to { filter: blur(0); opacity: 1; transform: translateY(0); }
}

.mentors__nav {
  display: flex;
  gap: 18px;
  margin-top: 36px;
}
.mentors__arrow {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: none;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #f6f3ec;
  background: rgba(246, 243, 236, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition:
    background-color 280ms ease,
    color 280ms ease,
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mentors__arrow:hover {
  background: #58cc6f;
  color: #0a0a0a;
  transform: translateY(-2px);
}
.mentors__arrow:focus-visible {
  outline: 2px solid #58cc6f;
  outline-offset: 4px;
}
.mentors__arrow svg { width: 20px; height: 20px; }

/* === Responsive === */
@media (max-width: 900px) {
  .mentors__carousel {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .mentors__stage { max-width: 360px; }
  .mentors__card.is-prev { transform: translateX(-18%) translateY(-6%) scale(0.82) rotateY(12deg); }
  .mentors__card.is-next { transform: translateX(18%) translateY(-6%) scale(0.82) rotateY(-12deg); }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .mentors__card { transition: opacity 200ms ease !important; }
  .mentors__quote .word { animation: none !important; filter: none; opacity: 1; transform: none; }
  .mentors__arrow { transition: none !important; }
}