.phase4FoInner,
.phase5FoInner {
  width: 100%;
  height: 100%;
  position: relative;
}

.phase4FoInner {
  color: #000;
}

.phase5FoInner {
  color: #fff;
}

@font-face {
  font-family: "Galgo";
  src:
    url("./font/Galgo-Light.woff2") format("woff2"),
    url("./font/Galgo-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Galgo";
  src:
    url("./font/Galgo-Regular.woff2") format("woff2"),
    url("./font/Galgo-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Galgo";
  src:
    url("./font/Galgo-Bold.woff2?v=bold1") format("woff2"),
    url("./font/Galgo-Bold.woff?v=bold1") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Galgo";
  src:
    url("./font/Galgo-Bold.woff2?v=bold1") format("woff2"),
    url("./font/Galgo-Bold.woff?v=bold1") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000000;
  --fg: #f4f6fb;
  --muted: rgba(244, 246, 251, 0.72);
  --accent: #a78bfa;
  --build: #ECD5EB;
  --her: #E1FF2C;
  --thon: #C0B0AB;

  /* Layout "frame" (single source of truth; JS reads these) */
  --frame-top-vh: 8;
  --frame-bottom-vh: 88;

  /* Phase 3/4: shared top alignment for header + image-holder */
  --phase3-top-vh: 10;

  /* Members strip placement (kept as-is visually, but centralized) */
  --members-row-left-pct: 0.28; /* 28% */
  --members-row-bottom-vh: 5.4;
  --members-row-scale: 0.86;

  /* Unified typography sizes across slides */
  --heading-size: clamp(28px, 3.4vw, 51px);
  --heading-line-height: 0.86;
  --heading-letter-spacing: 0.01em;
  --subheading-size: clamp(13px, 1.1vw, 18px);
  --subheading-line-height: 1.08;
  --subheading-opacity: 0.7;
  --paragraph-size: clamp(9px, 0.85vw, 12px);
  --paragraph-line-height: 1.2;

  /* Shared "hero headline" and "body copy" sizing (used across slides) */
  --hero-headline-size: clamp(40px, 4.6vw, 72px);
  --hero-headline-line-height: 1.08;
  --hero-headline-letter-spacing: -0.02em;
  /* Slightly larger body copy for readability */
  --body-copy-size: clamp(13px, 1.25vw, 18px);
  --body-copy-line-height: 1.35;

  /* Responsive layout knobs (desktop defaults) */
  --members-fixed-header-offset-y: 150px;
  /* Fixed MEMBERS header: extra lift so it clears the mushroom box */
  --members-fixed-header-shift-y: -42px;
  /* Fixed MEMBERS header: keep a comfortable gutter to the portrait */
  --members-fixed-text-gap-to-image: 56px;
  --members-fixed-image-top-offset-y: 84px;
  --members-fixed-image-h: clamp(324px, 45.9vh, 621px);
  --members-fixed-image-w: calc(var(--members-fixed-image-h) * (347 / 444));
  --members-fixed-image-gap: 24px;
  --members-fixed-row-left-offset-x: 160px;
  --members-fixed-row-bottom-offset-y: 6px;
  /* Pilot header should align with Members header (same top + same lift) */
  --pilot-top-offset-y: var(--members-fixed-header-offset-y, 150px);
  --pilot-header-shift-y: var(--members-fixed-header-shift-y, 0px);
  --contact-top-offset-y: 150px;
  --contact-base-h: clamp(190px, 24vh, 290px);
  --contact-base-gap: clamp(18px, 3vh, 30px);
  /* JS will set resolved px values for exact cross-slide matching */
  --heading-px: var(--heading-size);
  --subheading-px: var(--subheading-size);
  --paragraph-px: var(--paragraph-size);

  /* Per-stage micro-alignment (tuned to match the red-frame mockups) */
  --empower-headline-shift-y: 2px; /* Empower headline UP a wee bit (smaller = higher) */
  --members-header-shift-y: -6px; /* Members text UP a wee bit */
  --project-text-shift-y: -6px; /* Project text UP a wee bit */

  /* Members image (top-right) micro-alignment */
  --members-image-shift-y: -10px; /* negative = up */

  /* Project image scale */
  --project-image-scale: 1.35;

  /* Project: how much horizontal space to reserve for the fixed image + UGANDA on the right */
  /* Slightly SMALLER reserve => wider text column, while still protecting the media zone */
  /* Pilot: right column begins at ~60% (page-2 right box constraint) */
  --project-right-reserve-w: 40%;

  /* Debug: red keyline overlay (1 = show, 0 = hide) */
  --show-keylines: 0;

  /* Frame midpoint as a CSS length (safe fallback before JS computes px) */
  --frame-mid-x: 50vw;

  /* Lime panel (3.jpg) content positioning */
  --lime-content-top: calc(clamp(240px, 28vh, 380px) - 40px);
  --lime-content-bottom: 20px;
  --lime-pattern-bottom: 32px; /* +20px up from previous */
  --lime-pattern-right: 40px;  /* +20px in from previous (was 20px) */
  /* Lime expanded slide: max text column as % of red-frame width */
  --lime-text-w: 0.62;

  /* Header: fine-tune logo docking relative to the red-frame corner */
  /* Keep the full lockup docked as before */
  /* Slide 1 requirement: logo should animate to the top-left of the red frame */
  --header-logo-offset-x: 0px;
  --header-logo-offset-y: 0px;
  /* During fold, nudge the logo left so the compact mark hugs the red line */
  --header-logo-fold-shift-x: -24px;

}

/* Fixed Project overlay (not inside SVG -> avoids non-uniform scaling distortion) */
.projectFixed {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  /* Clip is driven by JS during the reveal */
  clip-path: inset(0 0 100% 0 round 0);
}

.projectFixed__inner {
  position: absolute;
  left: calc(var(--frame-left-px, 0) * 1px);
  right: calc(var(--frame-right-inset-px, 0) * 1px);
  top: calc(var(--frame-top-px, 0) * 1px);
  bottom: calc(var(--frame-bottom-inset-px, 0) * 1px);
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0;
  isolation: isolate;
  /* containing block for absolutely-positioned UGANDA */
  position: absolute;
  overflow: visible; /* allow Pilot image to sit on viewport bottom */
}

.projectFixed__media {
  width: clamp(360px, 31vw, 640px);
  /* Let the media sit on the viewport bottom (not the red frame bottom) */
  margin-bottom: calc(var(--frame-bottom-inset-px, 0) * -1px);
  /* +10% bigger (Pilot request) */
  transform: translateX(0) scale(calc(var(--project-image-scale, 1) * 1.045 * 1.1));
  transform-origin: right bottom;
  will-change: transform;
}

.projectFixed__img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: right bottom;
  display: block;
}

.projectFixed__ugandaSvg {
  position: absolute;
  right: clamp(22px, 2.6vw, 44px);
  top: 0;
  bottom: 0;
  height: 100%;
  /* Lock an explicit width so the reserved text spacer can be tuned predictably.
     uganda.svg viewBox ratio ≈ 313.31 / 705.93 ≈ 0.444 */
  width: calc(100% * 0.444);
  max-width: clamp(140px, 13vw, 220px);
  max-height: 100%;
  /* Nudge slightly off the absolute top/bottom so it doesn't kiss the border */
  padding-block: 1%;
  z-index: 2;
  /* Hide the vertical "UGANDA" text but keep its box for JS alignment/masks */
  opacity: 0;
  visibility: hidden;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

/* Loading state: first-time visitors shouldn't see other layers flash/shift */
html.isLoading .siteHeader,
html.isLoading .introBox,
html.isLoading .membersFixed,
html.isLoading .projectFixed,
html.isLoading .phase4Layer,
html.isLoading .phase5Layer,
html.isLoading .keylineOverlay,
html.isLoading .phase2Overlay,
html.isLoading .flipFixed {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Persistent header/menu layer (sits above all scroll scenes) */
.siteHeader {
  position: fixed;
  left: calc(var(--frame-left-px, 0) * 1px);
  right: calc(var(--frame-right-inset-px, 0) * 1px);
  top: calc(var(--frame-top-px, 0) * 1px);
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none; /* let scroll interactions pass through */
  opacity: 1;
  transform: none;
  --nav-fg: rgba(255, 255, 255, 0.95);
  --nav-border: rgba(255, 255, 255, 0);
}

.siteHeader--onLime {
  --nav-fg: rgba(0, 0, 0, 0.92);
  --nav-border: rgba(0, 0, 0, 0.55);
}

.siteHeader__logoSlot {
  width: clamp(140px, 18vw, 340px);
  height: clamp(44px, 7vh, 86px);
}

.siteHeader__nav {
  display: flex;
  gap: clamp(20px, 4vw, 64px);
  pointer-events: auto;
  transform: none; /* GSAP controls slide-in */
  will-change: transform;
}

.siteHeader__link {
  font-family: "Galgo", "Manrope", system-ui, sans-serif;
  font-weight: 800;
  /* roughly 2× previous size */
  font-size: clamp(22px, 2.15vw, 40px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nav-fg);
  text-decoration: none;
  padding: 6px 14px;
  padding-bottom: 1px; /* optical centering (Galgo baseline sits low) */
  /* Keep spacing for a button outline, but only show it on the active item */
  border: 2px solid transparent;
  border-radius: 12px;
}

.siteHeader__link--active {
  border-color: var(--nav-fg);
}

.siteHeader__link:focus-visible {
  outline: 2px solid rgba(225, 255, 44, 0.9);
  outline-offset: 6px;
  border-radius: 6px;
}

/* Intro box (slides in from the right, then becomes the yellow mask later) */
.introBox {
  position: fixed;
  right: 0;
  /* Always land at 50% of screen width (stable on resize) */
  left: 50vw;
  /* Start 1/3 down the red-frame, and end on the bottom red line */
  top: calc((var(--frame-top-px, 0) * 1px) + ((var(--frame-height-px, 600) * 1px) / 3));
  bottom: 0; /* extend to the bottom of the SCREEN */
  /* Start LIME (no border) */
  border: 0;
  border-radius: 14px 0 0 0;
  background: #E1FF2C;
  color: rgba(0, 0, 0, 0.92);
  z-index: 90;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  opacity: 1;
  transform: none; /* GSAP controls slide-in */
  pointer-events: none;
  transform-origin: 100% 100%;
  overflow: hidden;
}

/* (Deprecated) .introBox__inner replaced by .introBox__panel */

.introBox__panel {
  position: absolute;
  inset: 0;
  padding: clamp(22px, 3.4vw, 44px);
  /* Keep content sitting on the bottom RED line even though the box extends to screen bottom */
  padding-bottom: calc(var(--frame-bottom-inset-px, 0) * 1px);
  display: grid;
  align-content: space-between;
}

.introBox__panel--intro {
  color: rgba(0, 0, 0, 0.92);
}

.introBox__panel--lime {
  opacity: 0;
  pointer-events: none;
  color: rgba(0, 0, 0, 0.92);
  /* Full-screen lime panel: align content to the red-frame edges (not the old box padding) */
  padding: 0;
}

.introBox__title {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--hero-headline-size);
  line-height: var(--hero-headline-line-height);
  letter-spacing: var(--hero-headline-letter-spacing);
}

.introBox__kicker {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(10px, 0.95vw, 14px);
  letter-spacing: 0.04em;
  opacity: 0.9;
  margin-bottom: 0;
}

.limePanel {
  height: 100%;
  display: grid;
  /* Make the text column a % of the red-frame width (widens on smaller screens) */
  grid-template-columns:
    minmax(
      0,
      calc(
        (100vw - (var(--frame-left-px, 0) * 1px) - (var(--frame-right-inset-px, 0) * 1px)) *
        var(--lime-text-w, 0.62)
      )
    )
    minmax(0, 1fr);
  /* Separate row/column gaps so heading→copy can be tighter */
  column-gap: clamp(26px, 4vw, 60px);
  row-gap: clamp(12px, 2vw, 28px);
  align-content: start;
  position: relative;
  padding-left: calc(var(--frame-left-px, 0) * 1px);
  padding-right: calc(var(--frame-right-inset-px, 0) * 1px);
  padding-top: var(--lime-content-top);
  padding-bottom: var(--lime-content-bottom, 20px);
}

.limePanel__title {
  grid-column: 1 / 2;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 300;
  /* Slightly smaller so the longer copy stays clear of the pink seed block */
  font-size: calc(var(--hero-headline-size) * 0.9);
  line-height: var(--hero-headline-line-height);
  letter-spacing: var(--hero-headline-letter-spacing);
  /* Prevent reflow during the reveal as the panel widens */
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

.limePanel__copy {
  grid-column: 1 / 2;
  max-width: 100%;
  /* Tighten gap under the headline */
  margin-top: clamp(9px, 1vw, 14px);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--body-copy-size);
  line-height: var(--body-copy-line-height);
  color: rgba(0, 0, 0, 0.88);
  position: relative;
  z-index: 2;
}

.limePanel__pattern {
  position: fixed;
  right: var(--lime-pattern-right, 20px);
  bottom: var(--lime-pattern-bottom, 0px);
  width: min(50vw, 760px);
  height: min(46vh, 460px);
  opacity: 0.9;
  background-image: url("./img/double-arrow.svg");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.12));
  pointer-events: none;
  z-index: 1;
}

/* About → Pilot seed block (pink, bottom-left of red frame) */
.aboutPilotSeed {
  position: fixed;
  left: calc(var(--frame-left-px, 0) * 1px);
  bottom: calc(var(--frame-bottom-inset-px, 0) * 1px);
  width: clamp(240px, 28vw, 420px);
  /* About 1/3 of the previous seed height */
  height: clamp(30px, 4.5vh, 55px);
  background: var(--build);
  border-radius: 14px;
  z-index: 91; /* above lime panel content, below header */
  pointer-events: none;
  opacity: 0; /* enabled by JS during About */
}

/* Pilot → Members seed bar (white, aligned to UGANDA) */
.pilotMembersSeed {
  position: fixed;
  left: 0;
  top: 0;
  width: clamp(14px, 1.4vw, 22px);
  height: 100px;
  background: #fff;
  border-radius: 14px;
  z-index: 98; /* above Pilot visuals */
  pointer-events: none;
  opacity: 0; /* enabled by JS during Pilot */
  will-change: left, top, width, height, border-radius;
}

/* Members → Contact seed (mushroom block that expands) */
.membersContactSeed {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-radius: 14px;
  background: var(--thon);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 98; /* under header (100), above members */
  will-change: left, top, width, height, border-radius, opacity;
}

/* Debug: red keyline overlay (shows the computed "frame" edges) */
.keylineOverlay {
  position: fixed;
  z-index: 9998;
  pointer-events: none;

  left: calc(var(--frame-left-px, 0) * 1px);
  top: calc(var(--frame-top-px, 0) * 1px);
  width: calc(100vw - (var(--frame-left-px, 0) * 1px) - (var(--frame-right-inset-px, 0) * 1px));
  height: calc(100vh - (var(--frame-top-px, 0) * 1px) - (var(--frame-bottom-inset-px, 0) * 1px));

  border: 3px solid rgba(255, 0, 0, 0.95);
  opacity: var(--show-keylines, 1);
}

/* First page: auto-scroll prompt (bottom-center) */
.autoScrollBtn {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 26px));
  /* Must sit above ALL full-screen layers (members/masks/keylines/etc.) */
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.92);
  transition: opacity 180ms ease;
}

.autoScrollBtn__icon {
  width: 44px;
  height: 26px;
  display: block;
}

.autoScrollBtn__iconImg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Text under the arrow */
.autoScrollBtn__label {
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
}

.autoScrollBtn--onDark {
  /* First page is dark; keep the control white */
  color: rgba(255, 255, 255, 0.92);
}

.autoScrollBtn--onLight {
  /* If the timeline ever shows it on a light scene, keep it visible */
  color: rgba(0, 0, 0, 0.86);
}

.autoScrollBtn:hover {
  opacity: 0.82;
}

.autoScrollBtn--onLight:hover { opacity: 0.82; }

.autoScrollBtn:focus-visible {
  outline: 3px solid rgba(167, 139, 250, 0.65);
  outline-offset: 2px;
}

.section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 48px 20px;
}

.section:nth-child(odd) {
  background: radial-gradient(1200px 800px at 50% 30%, rgba(167, 139, 250, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.section:nth-child(even) {
  background: radial-gradient(1200px 800px at 50% 30%, rgba(59, 130, 246, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

.sectionInner {
  width: min(980px, 100%);
  text-align: center;
}

.section--hero {
  padding: 0;
  background: #000 !important;
  background-image: none !important;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
}

.logoStage {
  position: fixed; /* keep logo above the expanding mask */
  left: 50%;
  top: 50%;
  /* Centering is handled via GSAP xPercent/yPercent so the logo can scale + move predictably. */
  transform: none;
  /* Slide 0 requirement: logo should scale with the red frame (full frame width). */
  width: calc(
    100vw -
      (var(--frame-left-px, 0) * 1px) -
      (var(--frame-right-inset-px, 0) * 1px)
  );
  pointer-events: none;
  user-select: none;
  z-index: 260;
}

.logoStage--black {
  /* Force the multi-color SVG to black on the lime screen */
  filter: brightness(0);
}

.logoSvgHost {
  width: 100%;
  will-change: transform;
}

.logoSvgHost svg {
  display: block;
  width: 100%;
  height: auto;
}

.phase2Overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
}

.phase2Overlay svg {
  width: 100%;
  height: 100%;
  display: block;
}

.phase2HeadlineFoInner {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: "Galgo", "Manrope", system-ui, sans-serif;
  color: #000;
}

/* Headline positioning is handled by JS by moving #phase2HeadlineFo in SVG space. */

.phase2BoxFoInner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 4%;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.phase2BoxText {
  width: min(1000px, 96%);
  color: rgba(255, 255, 255, 0.92);
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: var(--body-copy-size);
  line-height: var(--body-copy-line-height);
  text-align: left;
}

.phase2Lines {
  text-transform: uppercase;
  font-size: var(--heading-size);
  font-family: "Galgo", "Manrope", system-ui, sans-serif;
  font-weight: 800;
  font-variation-settings: normal;
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  display: grid;
  gap: 2px;
  transform: translateY(var(--empower-headline-shift-y, 0px));
}

.members {
  position: relative;
  width: 100%;
  height: 100%;
  /* Align left edge with the lime sliver (same computed frame-left) */
  padding-top: 0;
  padding-right: 8vw;
  padding-bottom: 10vh;
  padding-left: 0;
  box-sizing: border-box;
  color: #000;
}

.membersHeader {
  position: absolute;
  top: calc(var(--members-header-top-pct, 0.10) * 100%);
  left: calc(var(--members-left-pct, 0.08) * 100%);
  display: grid;
  gap: 2px;
  /* Keep text clear of the top-right image-holder */
  max-width: min(70ch, 32vw);
  transform: translateY(var(--members-header-shift-y, 0px));
}

.membersEyebrow {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  line-height: 1.1;
  opacity: 0.85;
  margin-bottom: 10px;
}

.membersTitle {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(19.5px, 2.25vw, 33px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-top: 2px;
  margin-bottom: 20px;
}

.membersSub {
  font-family: "Manrope", system-ui, sans-serif;
  /* Match Pilot subheading ("In Eastern Uganda...") */
  font-weight: 300;
  font-size: clamp(12px, 1.6125vw, 25.5px);
  line-height: 1.08;
  letter-spacing: 0;
  opacity: 1;
  margin-top: 0;
  margin-bottom: 20px;
}

.membersBio {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--body-copy-size);
  line-height: var(--body-copy-line-height);
  opacity: 0;
  visibility: hidden;
  max-width: min(70ch, 32vw);
  color: rgba(0, 0, 0, 0.88);
  transition: opacity 220ms ease, visibility 220ms ease;
}

.membersBio p {
  margin: 0 0 14px;
}

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

.membersBio a {
  display: inline-block;
  margin-top: 10px;
}

.membersBio .bioLinkIcon {
  display: block;
  width: 10vw;
  height: auto;
  object-fit: contain;
}

.membersRow {
  position: absolute;
  left: calc(var(--members-row-left-pct, 0.28) * 100%);
  right: auto;
  bottom: calc(var(--members-row-bottom-vh, 4.8) * 1vh);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: 18px;
  align-items: center; /* don't stretch cards; we want lime bar visible above/below */
  width: max-content; /* so we can slide the whole strip across the screen */
  /* (Default overlay behavior) Starts offscreen-right */
  transform: translateX(120vw);
  transform-origin: left bottom;
}

.membersFixed {
  position: fixed;
  inset: 0;
  /* Keep above the full-screen lime "About" panel so the slide-in is visible */
  z-index: 95; /* under header/menu (100) */
  pointer-events: none;
  /* Members background should be solid white (per spec) */
  background: #fff;
  transform: none; /* GSAP controls slide-in */
  will-change: transform;
  /* Prevent a flash before GSAP sets initial position */
  opacity: 0;
  visibility: hidden;
}

.membersFixed .members {
  color: #000;
}

.membersFixed__limeBar {
  display: none;
}

.membersFixed__imageBox {
  position: absolute;
  /* Move the image card left ~40px from the red frame right edge */
  right: calc((var(--frame-right-inset-px, 0) * 1px) + 80px);
  /* Push down to clear the fixed menu/header */
  top: calc((var(--frame-top-px, 0) * 1px) + var(--members-fixed-image-top-offset-y, 84px));
  /* Match the portrait holder size from the mock */
  /* Slightly smaller (slideshow portrait) */
  height: var(--members-fixed-image-h, clamp(324px, 45.9vh, 621px));
  width: var(--members-fixed-image-w, calc(clamp(324px, 45.9vh, 621px) * (347 / 444)));
  border-radius: 10px;
  /* Default placeholder portrait (same ratio as real profiles) */
  background: #111 url("./img/profile-blank.jpg") center / cover no-repeat;
  /* Keep as a visible black placeholder until a card enters the hot zone */
  opacity: 1;
}

/* Sentinel end-card: mushroom grey, never becomes lime */
.membersFixed .memberCard--sentinel::before {
  background: var(--thon);
}

/* In the fixed MEMBERS layer, the card strip should enter from the LEFT */
.membersFixed .membersRow {
  /* GSAP controls x/scale during the MEMBERS phase */
  transform: none;
}

/* Phase 4: top-right image-holder flip card */
.flipFixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  /* Inside `.membersFixed`, sits above background but below the slideshow strip */
  z-index: 10;
  /* Keep perfectly aligned to the image holder (no vertical offset) */
  transform: none;
}

/* Fixed MEMBERS layout uses frame px (not % of viewport) */
.membersFixed .membersHeader {
  /* Push down to clear the fixed menu/header */
  top: calc((var(--frame-top-px, 0) * 1px) + var(--members-fixed-header-offset-y, 150px) - 10px);
  /* Align to the red frame left edge */
  left: calc((var(--frame-left-px, 0) * 1px) + 0px);
  /* Use available space up to the portrait (reduces wrapping so copy sits higher) */
  right: auto;
  width: calc(
    100vw -
      (var(--frame-left-px, 0) * 1px) -
      (var(--frame-right-inset-px, 0) * 1px) -
      80px - /* matches `.membersFixed__imageBox` right offset */
      var(--members-fixed-image-w, 0px) -
      var(--members-fixed-image-gap, 24px) -
      var(--members-fixed-text-gap-to-image, 56px)
  );
  max-width: none;
  transform: translateY(var(--members-fixed-header-shift-y, 0px));
  padding-left: 0;
}

.membersFixed .membersEyebrow {
  font-size: clamp(12px, 1.05vw, 14px);
}

.membersFixed .membersTitle {
  /* Members slideshow heading ("Meet the EMEA...") */
  font-size: clamp(18px, 2.4vw, 34px);
}

.membersFixed .membersRow {
  left: calc((var(--frame-left-px, 0) * 1px) + var(--members-fixed-row-left-offset-x, 160px));
  /* Bring cards down closer to the frame bottom */
  bottom: calc((var(--frame-bottom-inset-px, 0) * 1px) + var(--members-fixed-row-bottom-offset-y, 6px));
  /* Make on-screen card width match the image holder width (row is scaled). */
  grid-auto-columns: calc(var(--members-fixed-image-w, calc(clamp(324px, 45.9vh, 621px) * (347 / 444))) / var(--members-row-scale, 0.86));
  gap: clamp(14px, 1.4vw, 22px);
  /* Keep the strip anchored so expanded cards grow upward */
  align-items: end;
  /* Ensure the strip (and active lime card) can cover the portrait image */
  z-index: 20;
  overflow: visible;
  /* Hide until GSAP reveals after panel slide-in */
  opacity: 0;
  visibility: hidden;
  transform: none;
}

.membersFixed .membersRow,
.membersFixed .memberCard,
.membersFixed .memberCard__li {
  pointer-events: auto;
}

.membersFixed .memberCard {
  min-height: clamp(150px, 20vh, 240px);
  height: auto; /* allow active card + bio to grow (no clipping) */
  border-radius: 12px;
  padding: clamp(14px, 1.2vw, 18px) clamp(16px, 1.4vw, 22px);
  position: relative;
  overflow: visible; /* don't crop name/bio when card grows */
  background: transparent; /* background drawn by ::before so padding doesn't scale */
  transform-origin: center;
  transition: color 180ms ease;
  /* Make layout deterministic: name → role → (gap) → HR → bio */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;
}

/* Inline bio shown only on the active (lime) card */
.membersFixed .memberCard__bio {
  margin-top: 0; /* spacing is applied only when active (above the HR) */
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  /* Match the role sizing inside slideshow cards */
  font-size: var(--paragraph-size);
  line-height: 1.08;
  opacity: 0;
  visibility: hidden;
}

.membersFixed .memberCard--active .memberCard__bio {
  opacity: 1;
  visibility: visible;
  color: rgba(0, 0, 0, 0.92);
}

.membersFixed .membersHoverBio {
  margin-top: 10px;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--body-copy-size);
  line-height: var(--body-copy-line-height);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.membersFixed .membersHoverBio--show {
  opacity: 1;
  visibility: visible;
}

.membersFixed .membersHoverBio--onLime {
  color: rgba(0, 0, 0, 0.92);
}

.membersFixed .membersHoverBio--onBlack {
  color: rgba(255, 255, 255, 0.92);
}

.memberCard__li {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  z-index: 3;
}

.memberCard__liIcon {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Restore original (larger) typography for the slideshow cards */
.membersFixed {
  --subheading-size: clamp(18px, 1.7vw, 26px);
  --paragraph-size: clamp(12px, 1.05vw, 16px);
}

.membersFixed .memberName {
  font-size: var(--subheading-size);
}

.membersFixed .memberRole {
  font-size: var(--paragraph-size);
}

/* In the fixed MEMBERS panel, the body copy should not be shrunken */
.membersFixed .membersBio {
  font-size: calc(var(--body-copy-size) - 2px);
  line-height: var(--body-copy-line-height);
  max-width: 100%;
  padding-top: 0;
}

/* Card active state: black → lime when under hot zone */
.membersFixed .memberCard {
  color: rgba(255, 255, 255, 0.92);
}

.membersFixed .memberCard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #111;
  z-index: 0;
  /* Keep expansion from dipping downward */
  transform-origin: bottom center;
  transition: transform 220ms ease, background-color 180ms ease;
}

/* Sentinel end-card: mushroom grey (never becomes lime) */
.membersFixed .memberCard.memberCard--sentinel::before {
  background: var(--thon);
  transform: none;
}

/* Sentinel content: "IN PARTNERSHIP WITH" + EWB logo */
.membersFixed .memberCard--sentinel {
  /* Override the standard card layout (right-aligned) */
  align-items: center;
  text-align: center;
  justify-content: center;
}

.sentinelPartner {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 12px;
}

.sentinelPartner__label {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.1;
  color: rgba(0, 0, 0, 0.92);
}

.sentinelPartner__logo {
  width: min(62%, 220px);
  height: auto;
  object-fit: contain;
  display: block;
  filter: contrast(1.2) brightness(0.75);
}

.membersFixed .memberCard > *:not(.memberCard__li) {
  position: relative;
  z-index: 1;
}

.membersFixed .memberCard__li {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
}

.membersFixed .memberCard--active {
  color: rgba(0, 0, 0, 0.92);
  /* Keep baseline aligned; overlap is handled via layer z-index */
  transform: none;
  z-index: 30;
}

.membersFixed .memberCard--active::before {
  background: #E1FF2C;
  /* Let the card grow only as needed (bio-driven); no extra "blank" band above name */
  transform: none;
}

.membersFixed .memberCard--active .memberRole {
  opacity: 0.92;
  /* role → gap → HR */
  margin-bottom: 12px;
}

/* Bio inside card uses current text color */
.membersFixed .memberCard__bio {
  color: inherit;
}

/* Divider above bio on lime card */
.membersFixed .memberCard--active .memberCard__bio {
  margin-top: 0;
  border-top: 3px solid rgba(0, 0, 0, 0.92);
  padding-top: 8px;
}

.flipWrap {
  width: 100%;
  height: 100%;
  perspective: 1200px;
}

.flipCard {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transform-style: preserve-3d;
  position: relative;
  will-change: transform;
}

.flipFace {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  backface-visibility: hidden;
  overflow: hidden;
}

.flipFace--front {
  background: #111;
}

.flipFace--back {
  transform: rotateY(180deg);
  background: #111;
}

/* Keep the bio portrait slightly smaller with top padding (both faces can show images) */
.flipFace--front,
.flipFace--back {
  box-sizing: border-box;
  /* Images are 347x444; the holder already matches that ratio, so let the image cover fully */
  padding: 0;
}

.flipFace--front img,
.flipFace--back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.flipFace--front img {
  width: 100%;
  height: 100%;
  /* Keep consistent with back face (prevents every-other-image mismatch) */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Phase 5: Project highlight scene (revealed by pink mask expansion) */
.phase4Layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  /* Above the pink driver; clipped via JS during reveal */
  z-index: 97;
  color: #000;
  background: var(--build);
  /* JS will animate this inset to reveal the layer */
  clip-path: inset(0 0 100% 0 round 8px);
  will-change: clip-path, opacity;
}

/* Phase 6: Final CTA (black screen sliding up) */
.phase5Layer {
  position: fixed;
  inset: 0;
  background: var(--thon);
  color: rgba(0, 0, 0, 0.92);
  z-index: 99;
  pointer-events: none;
  will-change: transform;
  /* Start hidden; GSAP will handle the slide transform */
  opacity: 0;
  visibility: hidden;
}

/* Contact layout (within the red frame; base strip touches screen bottom) */
.phase5FoInner {
  position: absolute;
  inset: 0;
}

.contactInner {
  position: absolute;
  left: calc(var(--frame-left-px, 0) * 1px);
  right: calc(var(--frame-right-inset-px, 0) * 1px);
  top: calc(var(--frame-top-px, 0) * 1px);
  /* Leave room for the partner strip that touches the screen bottom */
  bottom: calc((var(--contact-base-h, 240px) * 0.66) + var(--contact-base-gap, 24px));
  pointer-events: none;
}

.contactGrid {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 0.95fr);
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
  /* Drop content down from the header logo */
  padding-top: clamp(92px, 9vh, 150px);
  box-sizing: border-box;
}

.contactLeft {
  pointer-events: none;
  position: relative;
  height: 100%;
}

.contactHeadline {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(42px, 4.2vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 14ch;
  color: rgba(0, 0, 0, 0.92);
  margin-top: clamp(54px, 6vh, 120px);
}

.contactSocial {
  /* Sit above the base strip, at the bottom of the framed area */
  position: absolute;
  left: 0;
  bottom: 0;
  margin-top: 0;
  display: flex;
  gap: 16px;
  pointer-events: auto;
}

.contactSocial__link {
  display: inline-block;
  width: 56px;
  height: 56px;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.contactSocial__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.contactForm {
  justify-self: end;
  width: min(760px, 100%);
  background: rgba(0, 0, 0, 0.92);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  pointer-events: auto;
  /* Nudge form down slightly to match comps */
  margin-top: clamp(18px, 2vh, 28px);
  /* Pull the form left off the red-frame edge */
  margin-right: clamp(40px, 3.4vw, 80px);
}

.contactForm__slider {
  width: 200%;
  display: flex;
  transform: translateX(0%);
  transition: transform 360ms ease;
}

.contactForm--showTerms .contactForm__slider {
  transform: translateX(-50%);
}

.contactForm__panel {
  width: 50%;
  padding: clamp(24px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
}

.contactForm__fields {
  display: grid;
  gap: 18px;
}

.contactForm__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 2px;
}

.contactForm__status {
  min-height: 18px;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0.9;
}

.contactForm__status--error {
  color: rgba(255, 235, 59, 0.95);
}

.contactForm__status--ok {
  color: rgba(225, 255, 44, 0.95);
}

.contactField--error .contactField__label {
  color: rgba(255, 235, 59, 0.95);
}

.contactField__input[aria-invalid="true"] {
  outline: 3px solid rgba(255, 235, 59, 0.55);
  outline-offset: 2px;
}

.contactField__error {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(255, 235, 59, 0.95);
}

.contactThanks {
  padding: clamp(24px, 3vw, 40px);
  color: rgba(255, 255, 255, 0.92);
  display: grid;
  gap: 10px;
}

.contactThanks__title {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 1.35vw, 22px);
  letter-spacing: -0.01em;
  margin: 0;
}

.contactThanks__copy {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.42;
  margin: 0;
  opacity: 0.9;
}

.contactTermsLink {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  opacity: 0.85;
}

.contactTermsLink:hover { opacity: 1; text-decoration: underline; }

.contactSubmit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.contactForm__panel--terms {
  color: rgba(255, 255, 255, 0.92);
}

.contactTerms {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1.42;
  opacity: 0.92;
  overflow: auto;
  max-height: 360px;
  padding-right: 10px;
}

.contactTerms p { margin: 0 0 14px; }
.contactTerms p:last-child { margin-bottom: 0; }

.contactTerms__link {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: underline;
}

.contactTermsAgree {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.contactTermsAgree__checkbox {
  width: 18px;
  height: 18px;
}

.contactTermsAgree__text {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
}

.contactField {
  display: grid;
  gap: 8px;
}

.contactField__label {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.95);
}

.contactField__input {
  height: 44px;
  border-radius: 10px;
  border: 0;
  background: #fff;
  padding: 0 14px;
  font: 16px "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.contactSubmit {
  justify-self: start;
  margin-top: 2px;
  height: 44px;
  padding: 0 22px;
  border-radius: 10px;
  border: 0;
  background: #fff;
  color: #000;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 18px;
}

.contactBase {
  position: absolute;
  left: calc(var(--frame-left-px, 0) * 1px);
  right: auto;
  bottom: 0;
  /* Match the social box top edge */
  height: calc(var(--contact-base-h) * 0.66);
  width: calc((100vw - (var(--frame-left-px, 0) * 1px) - (var(--frame-right-inset-px, 0) * 1px)) * 0.8);
  pointer-events: auto;
}

.contactBase__inner {
  height: 100%;
  /* Base strip touches the screen bottom -> no bottom rounding */
  border-radius: 18px 18px 0 0;
  border: 2px solid rgba(0, 0, 0, 0.35);
  background: transparent;
  padding: clamp(16px, 2.2vw, 26px);
  display: grid;
  /* 3 columns: text | spacer | stacked logos */
  grid-template-columns: minmax(240px, 1fr) 1fr auto;
  align-items: start;
  gap: clamp(18px, 2.2vw, 28px);
}

/* Social box sits to the right of the footer */
.contactSocialBox {
  position: absolute;
  right: calc(var(--frame-right-inset-px, 0) * 1px);
  bottom: 0;
  height: calc(var(--contact-base-h) * 0.66);
  width: calc((100vw - (var(--frame-left-px, 0) * 1px) - (var(--frame-right-inset-px, 0) * 1px)) * 0.18);
  max-width: 260px;
  min-width: 180px;
  border-radius: 18px 18px 0 0;
  background: rgba(0, 0, 0, 0.92);
  color: rgba(255, 255, 255, 0.92);
  padding: 16px 16px 14px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  pointer-events: auto;
}

.contactSocialBox__icons {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
}

.contactSocialBox .contactSocial__link {
  width: 44px;
  height: 44px;
}

.contactSocialBox__handle {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  font-size: 12px;
  width: 100%;
  text-align: center;
}

.contactBase__meta {
  align-self: start;
  grid-column: 1;
}

.contactBase__metaText {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.92);
  line-height: 1.25;
}

.contactBase__copyright {
  margin-top: 16px;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.88);
}

.contactBase__logo {
  max-height: 44px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: none;
  align-self: start;
}

.contactBase__spacer { grid-column: 2; }

.contactBase__logos {
  grid-column: 3;
  --contact-stacked-logo-w: clamp(108px, 9vw, 150px);
  display: grid;
  justify-items: end;
  gap: 10px;
}

.contactBase__logos .contactBase__logo {
  /* Make both stacked logos the same width (Panelle was being clamped by max-height) */
  width: var(--contact-stacked-logo-w);
  max-height: 64px;
}

.contactBase__logo--trimble { justify-self: end; }
.contactBase__logo--panelle { justify-self: end; }

/* Safety: hide debug HUD in production */
#scrollDbg {
  display: none !important;
}

.phase4Inner {
  position: absolute;
  /* Align to the same top/left as MEMBERS heading */
  left: calc(var(--frame-left-px, 0) * 1px);
  right: calc(var(--frame-right-inset-px, 0) * 1px);
  top: calc((var(--frame-top-px, 0) * 1px) + var(--pilot-top-offset-y, 150px));
  bottom: calc(var(--frame-bottom-inset-px, 0) * 1px);
  display: grid;
  /* Reserve a right spacer column (prevents text colliding with the fixed media/UGANDA) */
  grid-template-columns: minmax(0, 1fr) var(--project-right-reserve-w);
  gap: 2.2vw;
  align-items: start;
  transform: none;
}

.phase4Text {
  position: relative;
  height: 100%;
  /* Keep Phase 4 aligned with the shared frame top (no extra internal push-down) */
  padding-top: 0;
  padding-bottom: clamp(18px, 2.2vw, 34px);
  transform: translateY(var(--pilot-header-shift-y, var(--project-text-shift-y, 0px)));
  padding-right: 0;
  display: flex;
  flex-direction: column;
}

.phase4Eyebrow {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.1;
  opacity: 0.85;
  margin-bottom: 10px;
}

/* Pilot heading should match the Members slideshow heading scale */
.phase4Title {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 2.4vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}

.phase4Sub {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(12px, 1.6125vw, 25.5px);
  line-height: 1.08;
  letter-spacing: 0;
  opacity: 1;
  margin: 0 0 20px;
}

.phase4Copy {
  /* Tighten spacing under the new headline */
  margin-top: 0;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  /* Slightly smaller than site body copy (Pilot has dense text) */
  font-size: calc(var(--body-copy-size) - 2px);
  line-height: var(--body-copy-line-height);
  opacity: 0.9;
  /* Use full width of the Pilot text column (column itself protects the media zone) */
  max-width: 100%;
  display: grid;
  gap: 18px;
  justify-items: start; /* respect explicit block widths (no stretch) */
}

/* Pilot: partner box anchored to frame bottom */
.pilotPartnerBox {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  width: clamp(220px, 18vw, 320px);
  color: rgba(0, 0, 0, 0.92);
  background: #fff;
  display: grid;
  justify-items: center;
  text-align: center;
}

.pilotPartnerBox__label {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 1.1;
  margin-bottom: 10px;
}

.pilotPartnerBox__logo {
  width: min(70%, 220px);
  height: auto;
  object-fit: contain;
  display: block;
}

.phase4CopyBlock {
  max-width: 100%;
}

/* Widths are relative to the red frame width (not the text column width). */
.phase4CopyBlock--w80 {
  width: calc((100vw - (var(--frame-left-px, 0) * 1px) - (var(--frame-right-inset-px, 0) * 1px)) * 0.75);
  max-width: none;
}
.phase4CopyBlock--w60 {
  width: calc((100vw - (var(--frame-left-px, 0) * 1px) - (var(--frame-right-inset-px, 0) * 1px)) * 0.6);
  max-width: none;
}
.phase4CopyBlock--w40 {
  width: calc((100vw - (var(--frame-left-px, 0) * 1px) - (var(--frame-right-inset-px, 0) * 1px)) * 0.4);
  max-width: none;
}

.phase4CopyBlock--w50 {
  width: calc((100vw - (var(--frame-left-px, 0) * 1px) - (var(--frame-right-inset-px, 0) * 1px)) * 0.5);
  max-width: none;
}

/* Pilot page-1 copy: widen on medium laptops (e.g. 1536px wide) */
@media (max-width: 1560px) {
  .phase4CopyBlock--w50 {
    width: calc(
      (100vw - (var(--frame-left-px, 0) * 1px) - (var(--frame-right-inset-px, 0) * 1px)) * 0.6
    );
  }
  /* Pilot page-1: pull paragraph block up a bit */
  .phase4Sub {
    margin-bottom: 10px;
  }
}

.phase4Copy p {
  margin: 0 0 18px;
}

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

.phase4Copy ul {
  margin: 0 0 18px;
  padding-left: 1.15em;
}

.phase4Copy li {
  margin: 0 0 10px;
  padding-left: 0.1em;
}

.phase4Bar {
  /* Remove the black box from the Project slide */
  display: none;
}

.phase4Media {
  position: relative;
  width: 100%;
  height: 100%;
  /* Keep image + vertical label in sync */
  /* Scale up/down as needed */
  --phase4-img-w: calc(clamp(360px, 31vw, 600px) * var(--project-image-scale, 1));
  --phase4-img-h: calc(58% * var(--project-image-scale, 1));
  /* Sit the image on the red-frame bottom line */
  --phase4-img-bottom: 0px;
  /* Fine-tune the over-image "UGANDA" overlay */
  --phase4-uganda-inset-right: 42%;
  --phase4-uganda-inset-bottom: 10%;
  display: flex;
  align-items: flex-start;
  /* Page-2 right text box should stop at the 50% mark (start of this column) */
  justify-content: flex-start;
}

/* Pilot extra "page" boxes (animated in via JS; start hidden) */
.pilotSwapBox {
  width: min(52ch, 100%);
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: rgba(0, 0, 0, 0.92);
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: calc(var(--body-copy-size) - 2px);
  line-height: var(--body-copy-line-height);
  opacity: 0;
  visibility: hidden;
  box-shadow: none;
}

.pilotSwapBox p {
  margin: 0;
}

.pilotSwapBox__title {
  /* Match Pilot heading */
  font-weight: 300;
  font-size: clamp(18px, 2.4vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}

.pilotSwapBox__sub {
  /* Match Pilot subheading */
  font-weight: 300;
  font-size: clamp(12px, 1.6125vw, 25.5px);
  line-height: 1.22;
  letter-spacing: 0;
  margin: 0;
}

.pilotSwapBox--left {
  /* Place where the old Pilot copy block lived (top of the left column) */
  position: absolute;
  left: 0;
  /* Eyebrow stays pinned, so start just below it */
  top: 48px;
  width: calc(
    (100vw - (var(--frame-left-px, 0) * 1px) - (var(--frame-right-inset-px, 0) * 1px)) * 0.5
  );
  max-width: none;
}

.pilotSwapBox--left .pilotSwapBox__title {
  /* ~1.5× the base Pilot heading (was 2×) */
  font-size: clamp(27px, 3.6vw, 51px);
  line-height: 1.06;
  margin-bottom: 20px;
}

.pilotSwapBox--left .pilotSwapBox__sub {
  /* ~1.5× the base Pilot subheading (was 2×) */
  font-size: clamp(12px, calc(2.2vw - 4px), 30px);
  line-height: 1.22;
}

.pilotSwapBox--right {
  /* Align to the top of the white underline/mask */
  margin-top: calc(
    (var(--pilot-seed-top-px, 0px) - (var(--frame-top-px, 0) * 1px) - var(--pilot-top-offset-y, 150px) - 20px)
  );
  /* Within the right column (starts at ~60%), leave a gutter on the far right (underline/mask zone) */
  width: calc(100% - clamp(24px, 3vw, 56px));
  max-width: none;
  margin-right: 0;
  padding-right: 10%;
}

/* Pilot page-1 copy: widen on smaller laptop widths */
@media (max-width: 1410px) {
  .phase4CopyBlock--w50 {
    width: calc(
      (100vw - (var(--frame-left-px, 0) * 1px) - (var(--frame-right-inset-px, 0) * 1px)) * 0.65
    );
  }

  /* Pilot page-1: tighten vertical rhythm so copy clears the partner box */
  .phase4Title {
    margin-bottom: 10px;
  }
  .phase4Sub {
    margin-bottom: 2px;
  }
  .phase4Copy {
    font-size: calc(var(--body-copy-size) - 3px);
  }
}

.phase4UgandaImgPlaceholder,
.phase4UgandaWrap {
  /* Project image + UGANDA label are now rendered by `.projectFixed` (avoids SVG distortion) */
  display: none;
}

.phase4UgandaImgPlaceholder {
  position: absolute;
  right: 0;
  bottom: var(--phase4-img-bottom, 0);
  width: var(--phase4-img-w);
  height: var(--phase4-img-h);
  display: block;
  border: 0;
  background: transparent;
  object-fit: contain; /* prevent cropping (keeps rounded corners visible) */
  object-position: right bottom;
}

.phase4UgandaWrap {
  position: absolute;
  right: 0;
  width: var(--phase4-img-w);
  top: 0;
  bottom: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.phase4Uganda {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Stack letters vertically and size to span the shared frame height */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transform-origin: center;
  white-space: normal;
  will-change: transform;
  font-family: "Galgo", "Manrope", system-ui, sans-serif;
  font-weight: 800;
  /* Approx: (frameHeight / ~6 letters) */
  font-size: calc((var(--frame-bottom-vh, 88) - var(--phase3-top-vh, 10)) * 1vh * 0.155);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  z-index: 1;
}

.memberCard {
  background: #000;
  border-radius: 8px;
  padding: 10px 12px;
  /* Make each entry ~3/4 height (vs filling the row) */
  height: clamp(78px, 9.5vh, 118px);
  color: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}

.memberName {
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: calc(var(--subheading-size) * 0.85);
  line-height: 0.96;
}

.memberRole {
  margin-top: 4px;
  font-family: "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: calc(var(--paragraph-size) * 0.85);
  opacity: 0.8;
  line-height: 1.08;
}

/* Phase 2 bar is now an SVG <rect> inside the masked overlay (see main.js). */

.logoSvgHost #Bar1,
.logoSvgHost #Bar2 {
  transform-origin: left center;
  transform-box: fill-box;
}

/* Laptop tuning (keeps large-desktop unchanged, frees vertical space on 1536×800 etc.) */
@media (max-width: 1680px) and (max-height: 900px) and (min-width: 1025px) {
  :root {
    /* Slightly smaller headline so copy can sit higher */
    --hero-headline-size: clamp(28px, 3.2vw, 50px);
    /* Reduce top padding so body copy stays inside the red frame */
    --lime-content-top: calc(clamp(200px, 22vh, 320px) - 40px);
    /* Members: lift heading/copy so LinkedIn doesn't touch card strip */
    --members-fixed-header-offset-y: 124px;
    /* Pilot: tighten spacing a wee bit on laptop */
    --pilot-top-offset-y: var(--members-fixed-header-offset-y, 124px);
    /* Contact: give the form more breathing room above footer */
    --contact-base-gap: calc(clamp(18px, 3vh, 30px) + 12px);
  }

  /* Smaller centered lockup on laptops */
  .logoStage {
    /* Keep centered, but size remains tied to the red frame */
    width: calc(
      100vw -
        (var(--frame-left-px, 0) * 1px) -
        (var(--frame-right-inset-px, 0) * 1px)
    );
  }

  .limePanel__copy {
    margin-top: clamp(7px, 0.9vw, 11px);
  }

  /* Pilot: reduce subheading->copy gap + keep text off the media */
  .phase4Copy {
    margin-top: max(0px, calc(clamp(16px, 2vw, 28px) - 10px));
    max-width: 100%;
  }

  .phase4Text {
    padding-right: clamp(28px, 4vw, 64px);
  }

  /* Members: keep LinkedIn block clear of the lime sliver */
  .membersFixed .membersHeader {
    padding-left: 0;
  }

  .membersFixed .membersBio {
    font-size: clamp(14px, 1.05vw, 18px);
    line-height: 1.32;
  }

  /* Contact: lift the form so it doesn't touch the footer block */
  .contactForm {
    transform: translateY(-24px);
  }
}

/* MEMBERS typography step-down before tablet */
@media (max-width: 1140px) {
  .membersTitle {
    font-size: clamp(16.5px, 1.95vw, 28.5px);
  }
  .membersSub {
    font-size: clamp(10.5px, 1.35vw, 19.5px);
  }
  .membersFixed .membersTitle {
    font-size: clamp(16px, 2.1vw, 28px);
  }
}

@media (max-width: 1024px) {
  :root {
    --hero-headline-size: clamp(34px, 5.3vw, 66px);
    --body-copy-size: clamp(13px, 1.65vw, 17px);
    --members-fixed-header-offset-y: 130px;
    --members-fixed-image-top-offset-y: 74px;
    --members-fixed-image-h: clamp(280px, 40vh, 520px);
    --members-fixed-row-left-offset-x: 140px;
    --members-fixed-row-bottom-offset-y: 8px;
    --pilot-top-offset-y: var(--members-fixed-header-offset-y, 130px);
    --contact-top-offset-y: 130px;
    /* Lime expanded slide: widen text column */
    --lime-text-w: 0.70;
  }

  .limePanel__title {
    white-space: normal;
  }
}

@media (max-width: 720px) {
  :root {
    /* Typography scales down */
    --hero-headline-size: clamp(30px, 8vw, 54px);
    --body-copy-size: clamp(12px, 3.0vw, 16px);
    /* Layout offsets tighten */
    --members-fixed-header-offset-y: 110px;
    --members-fixed-image-top-offset-y: 64px;
    --members-fixed-image-h: clamp(240px, 34vh, 420px);
    --members-fixed-row-left-offset-x: 120px;
    --members-fixed-row-bottom-offset-y: 10px;
    --pilot-top-offset-y: var(--members-fixed-header-offset-y, 110px);
    --contact-top-offset-y: 110px;
    /* Existing: keep members scale smaller */
    --members-row-left-pct: 0.20;
    --members-row-scale: 0.78;
    /* Lime expanded slide: widest before mobile handoff */
    --lime-text-w: 0.80;
  }

  /* Allow the lime headline to wrap on mobile (prevents overflow) */
  .limePanel__title {
    white-space: normal;
  }

  .phase4Copy {
    margin-top: max(0px, calc(clamp(14px, 3vh, 26px) - 10px));
  }

  /* Contact: anchor to the red frame (px-based) */
  .phase5Inner {
    left: calc(var(--frame-left-px, 0) * 1px);
    right: calc(var(--frame-right-inset-px, 0) * 1px);
    top: calc((var(--frame-top-px, 0) * 1px) + var(--contact-top-offset-y, 110px));
    bottom: calc(var(--frame-bottom-inset-px, 0) * 1px);
    gap: 14px;
  }

  .phase5Email {
    font-size: clamp(18px, 4.2vw, 24px);
    line-height: 1.1;
  }

  /* Nav: tighter + wrap if needed */
  .siteHeader__nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 14px;
  }

  .siteHeader__link {
    font-size: clamp(16px, 3.2vw, 22px);
    padding: 4px 10px;
    border-radius: 10px;
  }

  /* Members cards: narrower columns */
  .membersFixed .membersRow {
    grid-auto-columns: calc(var(--members-fixed-image-w, calc(clamp(240px, 34vh, 420px) * (347 / 444))) / var(--members-row-scale, 0.78));
  }

  /* Let MEMBERS text use full width, but reserve space for the portrait on the right */
  .membersFixed .membersHeader {
    right: calc(var(--frame-right-inset-px, 0) * 1px);
    padding-right: calc(var(--members-fixed-image-w, 0px) + var(--members-fixed-image-gap, 24px));
  }

  .membersFixed .membersBio {
    max-width: 100%;
    padding-top: 0;
  }

  .logoStage {
    left: 50%;
    transform: none;
    /* Desktop-on-small widths still follows frame; mobile redirects at 720px anyway */
    width: calc(
      100vw -
        (var(--frame-left-px, 0) * 1px) -
        (var(--frame-right-inset-px, 0) * 1px)
    );
  }

  .membersHeader {
    max-width: 70vw;
  }

  .phase4Inner {
    grid-template-columns: 1fr;
    gap: 28px;
    align-content: start;
  }

  .phase4Media {
    --phase4-img-w: calc(min(92vw, 520px) * 0.6667);
    --phase4-img-h: calc(44vh * 0.6667);
    --phase4-uganda-inset-right: 36%;
    --phase4-uganda-inset-bottom: 3%;
  }

  .phase4Copy {
    max-width: 52ch;
  }

  /* Single-column on mobile: don't reserve the right spacer column */
  .phase4Inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  :root {
    --frame-top-vh: 7;
    --frame-bottom-vh: 90;
    --members-row-left-pct: 0.16;
    --members-row-scale: 0.72;
    --members-fixed-header-offset-y: 96px;
    --members-fixed-image-top-offset-y: 54px;
    --members-fixed-image-h: clamp(200px, 30vh, 330px);
    --members-fixed-row-left-offset-x: 96px;
    --members-fixed-row-bottom-offset-y: 12px;
    --pilot-top-offset-y: var(--members-fixed-header-offset-y, 96px);
    --contact-top-offset-y: 96px;
  }

  .membersRow {
    grid-auto-columns: 200px;
    gap: 14px;
  }

  .siteHeader__nav {
    gap: 10px;
  }

  .siteHeader__link {
    font-size: clamp(14px, 3.6vw, 18px);
    padding: 4px 8px;
  }

  /* On very small screens, don't over-reserve space for the portrait */
  .membersFixed .membersHeader {
    padding-right: 0;
  }

  .phase4Uganda {
    font-size: clamp(76px, 16vw, 160px);
  }

  .phase4Copy {
    margin-top: max(0px, calc(clamp(12px, 3vh, 22px) - 10px));
  }

  .phase5Email {
    font-size: clamp(16px, 5vw, 22px);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* nothing currently relies on motion-sensitive transitions */
}

/* Short laptop screens: reclaim vertical space without changing widths */
@media (max-height: 760px) and (min-width: 781px) {
  /* ABOUT (lime expanded): let the paragraph/copy run full width */
  .limePanel {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .limePanel__title,
  .limePanel__copy {
    grid-column: 1 / -1;
  }

  /* PILOT: drop the white partner box slightly to free text space */
  .pilotPartnerBox {
    bottom: -60px;
  }

  /* CONTACT: reduce space between last field and submit */
  .contactForm__panel--form {
    gap: 10px; /* was 18px */
  }
  .contactForm__status {
    min-height: 0; /* was 18px; saves space when empty */
  }
}