/* ============================================================
   RestartME, About page
   ============================================================ */

/* Hero */
.about-hero { position: relative; overflow: hidden; padding-block: clamp(8rem, 7rem + 6vw, 13rem) var(--section-y); }
.about-hero__bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0.16; filter: saturate(0.6);
}
.about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--warm-white) 0%, transparent 30%, var(--bone) 100%); }
.about-hero__inner { position: relative; z-index: 1; max-width: 880px; }
.about-hero__inner .lead { margin-top: 1.25rem; }

/* Who we are */
.who__mark { padding: var(--space-2xl); display: flex; flex-direction: column; gap: var(--space-xl); align-items: stretch; border-radius: var(--radius-xl); }
.who__mark p { font-size: var(--text-lg); color: var(--ink); font-weight: 340; line-height: 1.4; }

/* Funding-flow diagram (catalytic capital → RestartME → MFIs → entrepreneurs) */
.fund-flow__cap { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 600; color: var(--sky-ink); margin-bottom: var(--space-lg); }
.fund-flow__stages { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.9rem, 2vw, 1.4rem); }
/* The conduit the capital travels down (draws in on reveal) */
.fund-flow__stages::before {
  content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px;
  background: linear-gradient(180deg, var(--sky), var(--sky-deep)); border-radius: 2px;
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.9s var(--ease-out) 0.15s;
}
.who__mark.is-visible .fund-flow__stages::before { transform: scaleY(1); }

.fund-stage { position: relative; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: var(--space-md); }
.fund-stage__node {
  position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--sky-deep);
  background: var(--warm-white); border: 1.5px solid var(--hairline-accent);
  box-shadow: var(--shadow-xs);
  transform: scale(0); transform-origin: center;
  transition: transform 0.5s var(--ease-out) calc(var(--i) * 0.12s + 0.35s);
}
.who__mark.is-visible .fund-stage__node { transform: scale(1); }
.fund-stage--lead .fund-stage__node {
  color: #fff;
  background: linear-gradient(150deg, var(--sky), var(--sky-deep));
  border-color: color-mix(in srgb, var(--sky-deep) 60%, #fff);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--sky-deep) 35%, transparent);
}
.fund-ic { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fund-mark { width: 26px; height: 26px; object-fit: contain; filter: brightness(0) invert(1); }
.fund-stage__body { display: flex; flex-direction: column; gap: 1px; opacity: 0; transform: translateX(-6px); transition: opacity 0.5s ease calc(var(--i) * 0.12s + 0.5s), transform 0.5s var(--ease-out) calc(var(--i) * 0.12s + 0.5s); }
.who__mark.is-visible .fund-stage__body { opacity: 1; transform: none; }
.fund-stage__title { font-weight: 700; font-size: var(--text-sm); color: var(--ink); letter-spacing: 0.01em; }
.fund-stage--lead .fund-stage__title { font-family: var(--font-display); font-weight: 440; font-size: var(--text-base); }
.fund-stage__sub { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.3; }

/* Capital sparks travelling the conduit */
.fund-flow__spark {
  position: absolute; left: 16px; top: 6%; width: 7px; height: 7px; border-radius: 50%; z-index: 0;
  background: var(--sky); box-shadow: 0 0 9px var(--sky); opacity: 0;
}
.who__mark.is-visible .fund-flow__spark { animation: fundFlow 2.9s linear infinite; }
.who__mark.is-visible .fund-flow__spark.s2 { animation-delay: 0.95s; }
.who__mark.is-visible .fund-flow__spark.s3 { animation-delay: 1.9s; }
@keyframes fundFlow { 0% { top: 6%; opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } 100% { top: 92%; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .fund-flow__stages::before { transition: none; transform: scaleY(1); }
  .fund-stage__node { transition: none; transform: scale(1); }
  .fund-stage__body { transition: none; opacity: 1; transform: none; }
  .fund-flow__spark { animation: none !important; opacity: 0; }
}

/* Origin — the storm seen through a rain-struck window (the page is the glass) */
.origin { position: relative; overflow: hidden; }
.origin > .container { position: relative; z-index: 1; }

.origin__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); margin-top: var(--space-2xl); align-items: center; }
.origin__story p + p { margin-top: var(--space-md); }
.origin__story p { color: var(--text-muted); max-width: 56ch; }

/* The rainy window */
.origin__window {
  position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); isolation: isolate;
}
.origin__sat {
  position: absolute; inset: 0; background-size: cover; background-position: center 38%;
  filter: saturate(0.94) contrast(1.05) brightness(0.97);
  transform: scale(1.05);
  animation: satDrift 52s ease-in-out infinite alternate;
}
@keyframes satDrift { to { transform: scale(1.12) translate(-1.5%, -1%); } }

/* Glass tint + vignette so droplets read and the frame feels like a porthole */
.origin__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(135% 115% at 50% 6%, transparent 52%, rgba(14,42,59,0.30) 100%),
    linear-gradient(180deg, rgba(90,174,221,0.12), transparent 28%, transparent 68%, rgba(14,42,59,0.22));
}
.origin__glass { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

/* Beads cling to the glass and refract the storm behind them (backdrop-filter) */
.rain-bead {
  position: absolute; left: var(--l); top: var(--t);
  width: var(--s); height: calc(var(--s) * 1.12);
  border-radius: 52% 48% 50% 50% / 56% 56% 44% 44%;
  background: radial-gradient(circle at 36% 28%, rgba(255,255,255,0.65), rgba(255,255,255,0.05) 58%, transparent 72%);
  -webkit-backdrop-filter: blur(1.4px) saturate(1.25) brightness(1.08);
  backdrop-filter: blur(1.4px) saturate(1.25) brightness(1.08);
  box-shadow: inset 0 -1.5px 2px rgba(255,255,255,0.45), inset 0 1px 1.5px rgba(14,42,59,0.18), 0 1.5px 4px rgba(14,42,59,0.22);
  opacity: 0; animation: beadIn 1.1s var(--ease-out) var(--d) forwards;
}
@keyframes beadIn { to { opacity: 1; } }

/* Streaks race down and slide off the glass, trailing a wet line */
.rain-streak {
  position: absolute; left: var(--l); top: -22%; width: var(--w); height: var(--len);
  border-radius: var(--w);
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.30));
  filter: blur(0.3px); opacity: 0;
  animation: rainFall var(--dur) cubic-bezier(0.5, 0, 0.85, 0.55) var(--delay) infinite;
}
.rain-streak::after {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--w) * -1.6);
  width: calc(var(--w) * 3.2); height: calc(var(--w) * 4);
  transform: translateX(-50%); border-radius: 50% 50% 56% 56%;
  background: radial-gradient(circle at 38% 30%, rgba(255,255,255,0.92), rgba(255,255,255,0.2) 55%, transparent 72%);
  box-shadow: 0 1px 3px rgba(14,42,59,0.28);
}
@keyframes rainFall {
  0% { top: -22%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 118%; opacity: 0; }
}

/* Caption — a quiet datestamp with a pulsing signal dot */
.origin__cap {
  position: absolute; left: var(--space-lg); bottom: var(--space-md); z-index: 2;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: rgba(255,255,255,0.94); font-weight: 500; text-shadow: 0 1px 8px rgba(14,42,59,0.55);
}
.origin__cap-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 0 rgba(90,174,221,0.6); animation: capPulse 2.8s ease-out infinite; }
@keyframes capPulse { 0% { box-shadow: 0 0 0 0 rgba(90,174,221,0.55); } 70%, 100% { box-shadow: 0 0 0 9px rgba(90,174,221,0); } }

.origin__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--hairline-accent); }
.origin__stat .stat__num { color: var(--sky-deep); }

/* Retro Kodak-style film strip of real faces, above the origin story */
.origin-film { margin: 0 0 clamp(1.6rem, 3.5vw, 2.75rem); }
.film__reel {
  position: relative; overflow: hidden;
  background: var(--ink);
  border-radius: 7px;
  padding: 18px 10px;
  box-shadow: 0 16px 36px rgba(8,26,39,0.24), inset 0 0 0 1px rgba(255,255,255,0.04);
}
/* Sprocket-hole rows (bone holes punched in the ink film base) */
.film__reel::before, .film__reel::after {
  content: ""; position: absolute; left: 0; right: 0; height: 12px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='12'%3E%3Crect x='7' y='2' width='14' height='8' rx='2.4' fill='%23F6F3EC'/%3E%3C/svg%3E") repeat-x left center;
  background-size: 28px 12px;
}
.film__reel::before { top: 3px; }
.film__reel::after { bottom: 3px; }
.film__strip { display: flex; gap: 5px; }
.film__frame {
  flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 2px; background: #0b2230;
  box-shadow: inset 0 0 0 1px rgba(46,134,192,0.4);
}
.film__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film__cap {
  margin-top: 0.7rem; text-align: center;
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--stone);
}
@media (max-width: 700px) {
  .film__frame:nth-child(n+6) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .origin__sat { animation: none; }
  .rain-streak { animation: none; opacity: 0; }
  .rain-bead { animation: none; opacity: 1; }
  .origin__cap-dot { animation: none; }
}

/* Vision / Mission / Values */
.vmv__grid { align-items: stretch; }
.vmv__panel { padding: var(--space-2xl); border: 1px solid var(--divider); border-radius: var(--radius-xl); background: var(--bg-elevated); }

/* Genshin-style sigils */
.sigil {
  width: clamp(64px, 7vw, 84px); height: auto; display: block;
  color: var(--sky-deep); margin-bottom: var(--space-lg);
  filter: drop-shadow(0 2px 9px color-mix(in srgb, var(--sky) 32%, transparent));
}
.vmv__values .sigil { color: var(--sky-ink); }
.sg-ring-out, .sg-ring-in, .sg-ring-dash, .sg-stroke { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.sg-ring-out { stroke-width: 1.4; opacity: 0.85; }
.sg-ring-in { stroke-width: 1; opacity: 0.55; }
.sg-ring-dash { stroke-width: 1.2; stroke-dasharray: 2 5.5; opacity: 0.65; }
.sg-stud { fill: currentColor; opacity: 0.9; }
.sg-stroke { stroke-width: 1.6; }
.sg-fill { fill: currentColor; }
.sg-spark { fill: var(--warm-white); }
.sg-leaf { fill: currentColor; opacity: 0.92; }
.sg-leaf:nth-child(even) { fill: var(--sky); }

/* Outer ornament rotates slowly; core draws in on reveal */
.sigil-rotor { transform-box: fill-box; transform-origin: center; animation: sigilSpin 42s linear infinite; }
.sigil--mission .sigil-rotor { animation-direction: reverse; animation-duration: 54s; }
@keyframes sigilSpin { to { transform: rotate(360deg); } }

.sigil-core { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.55) rotate(-12deg); transition: opacity 0.6s ease 0.25s, transform 0.7s var(--ease-out) 0.25s; }
.vmv__panel.is-visible .sigil-core { opacity: 1; transform: none; }
.vmv__panel.is-visible .sg-spark { animation: sigilGlow 3.2s var(--ease-in-out) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sigilGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sigil-rotor { animation: none; }
  .sigil-core { transition: none; opacity: 1; transform: none; }
  .sg-spark { animation: none !important; }
}
.vmv__panel .lead { margin-top: var(--space-md); font-size: var(--text-lg); font-style: italic; color: var(--text); }
.vmv__values { background: linear-gradient(160deg, color-mix(in srgb, var(--sky-soft) 78%, var(--warm-white)), color-mix(in srgb, var(--mist) 92%, var(--warm-white))); border-color: var(--hairline-accent); }
.vmv__values .eyebrow { color: var(--sky-ink); }
.vmv__values-list { display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
.value-card { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); display: flex; align-items: baseline; gap: var(--space-md); background: color-mix(in srgb, var(--warm-white) 55%, transparent); }
.value-card__num { font-family: var(--font-display); color: var(--sky-deep); }
.value-card h3 { font-size: var(--text-lg); color: var(--ink); }
.value-card p { color: var(--text-muted); font-size: var(--text-sm); }

/* Leadership */
/* Eyebrow centring enforced in this fresh-loading file (overrides any stale base.css). */
.leadership .eyebrow, .board .eyebrow { display: block; width: 100%; text-align: center; }
.leaders { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,3vw,3rem); margin-top: var(--space-2xl); max-width: 900px; margin-inline: auto; }
.leader { text-align: center; }
.leader__media { aspect-ratio: 1/1; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); background: var(--sky-soft); }
.leader__media img { width: 100%; height: 100%; object-fit: cover; }
.leader__media img.is-placeholder { object-fit: contain; padding: 12%; opacity: 0.8; }
.leader figcaption { margin-top: var(--space-md); }
.leader__name { display: block; font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); }
.leader__role { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: 0.15rem; }

/* Board */
.trustees { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,3vw,2.5rem); margin-top: var(--space-2xl); }
.trustee { text-align: center; }
.trustee__media { aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden; background: var(--sky-soft); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base); }
.trustee:hover .trustee__media { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.trustee__media img { width: 100%; height: 100%; object-fit: cover; }
.trustee__media img.is-placeholder { object-fit: contain; padding: 18%; opacity: 0.75; }
.trustee__name { margin-top: var(--space-md); font-family: var(--font-display); font-size: var(--text-lg); color: var(--ink); }

@media (max-width: 1024px) {
  .origin__grid { grid-template-columns: 1fr; }
  .origin__window { max-width: 560px; }
  .leaders, .trustees { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  /* Lead with the funding-flow diagram, not a wall of text, on first load */
  .who .split { align-items: start; }
  .who__mark { order: -1; }
}
@media (max-width: 560px) {
  .origin__stats { grid-template-columns: 1fr; gap: var(--space-lg); }
  .leaders, .trustees { grid-template-columns: 1fr 1fr; }
  .who__mark { padding: var(--space-lg); }
}