/* The public landing page.

   Kept separate from app.css: the signed-in application is a dense working
   tool and this is a page people read once. They share a brand colour and
   nothing else, so neither can break the other.

   The page takes its palette from the logo rather than from the application.
   The heart artwork is red line work on solid black, so the page is black:
   the image then composites into it seamlessly, with no cut-out and no
   transparency. Everything else — the crimson, the glow, the type colour —
   follows from that one decision. */

:root {
  --void: #0a0507;          /* the page, and the artwork's own background */
  --panel: #12080c;         /* raised surfaces */
  --panel-2: #180d11;
  --hair: #2c1a20;          /* hairline rules */
  --hair-lit: #4a2831;

  --blood: #f0313f;         /* the red in the logo */
  --blood-deep: #a8142a;
  --crimson: #8a1538;       /* the application's brand maroon */

  --bone: #f4ecee;          /* body text */
  --bone-dim: #c9b6bc;
  --muted: #9c868d;

  --jade: #3fc4b1;          /* prevention, and anything that is good news */
  --radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.landing {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--void);
  color: var(--bone-dim);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 1.75rem; }

h1, h2, h3 { color: var(--bone); margin: 0 0 0.75rem; line-height: 1.08; }
h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  font-weight: 800; letter-spacing: -0.035em;
}
h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.85rem);
  font-weight: 800; letter-spacing: -0.028em;
}
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1.1rem; }
a { color: var(--blood); }

.accent { color: var(--blood); }

/* A hairline rule, an index number, then the label. Used to open every
   section so the page has a spine you can feel while scrolling. */
.eyebrow {
  display: flex; align-items: center; gap: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.68rem;
  font-weight: 700; color: var(--muted); margin: 0 0 1.1rem;
}
.eyebrow .index {
  color: var(--blood); font-size: 0.75rem; letter-spacing: 0.1em;
  padding-right: 0.7rem; border-right: 1px solid var(--hair-lit);
}

/* ---------- Header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10, 5, 7, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--hair);
}
.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; max-width: 1140px; margin: 0 auto; padding: 0.75rem 1.75rem;
}

.wordmark { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
/* The artwork is a tall portrait crop, so the badge is tall too and the image
   is cropped to the heart itself rather than letterboxed. */
.wordmark-badge {
  width: 30px; height: 38px; overflow: hidden; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  color: var(--blood); flex: none;
}
.wordmark-badge img { width: 130%; height: 130%; object-fit: cover; }
.wordmark-fallback { width: 26px; height: 26px; }
.wordmark-text {
  font-weight: 800; letter-spacing: 0.12em; font-size: 0.98rem; color: var(--bone);
}
.wordmark-text em {
  font-style: normal; font-weight: 400; color: var(--muted); margin-left: 0.4rem;
}

.site-nav { display: flex; align-items: center; gap: 1.5rem; font-size: 0.86rem; }
.site-nav a { color: var(--bone-dim); text-decoration: none; }
.site-nav a:hover { color: var(--blood); }

.button-primary, .button-ghost {
  display: inline-block; padding: 0.62rem 1.25rem; border-radius: 999px;
  font-weight: 650; text-decoration: none; font-size: 0.88rem;
  white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.button-primary {
  background: var(--blood); color: #fff;
  box-shadow: 0 6px 24px rgba(240, 49, 63, 0.28);
}
.button-primary:hover { background: #ff4351; color: #fff; }
.button-ghost { border: 1px solid var(--hair-lit); color: var(--bone); }
.button-ghost:hover { border-color: var(--blood); color: var(--blood); }
.button-lg { padding: 0.85rem 1.9rem; font-size: 0.95rem; }
.site-nav .button-primary:hover { color: #fff; }

/* ---------- Hero ---------- */

.hero { position: relative; overflow: hidden; }
/* A soft bloom behind the artwork, so the heart looks lit rather than pasted. */
.hero-glow {
  position: absolute; top: -18%; right: -8%; width: 780px; height: 780px;
  background: radial-gradient(circle,
    rgba(240, 49, 63, 0.20) 0%, rgba(168, 20, 42, 0.10) 38%, transparent 68%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: 1140px; margin: 0 auto; padding: 4.5rem 1.75rem 4rem;
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem; align-items: center;
}
.hero-copy { max-width: 40rem; }
.hero .lede {
  color: var(--bone-dim); font-size: 1.03rem; max-width: 40rem;
  margin-top: 1.5rem;
  /* A hairline down the left edge marks the mission statement as the one
     block of text on the page that is quoted exactly as written. */
  border-left: 2px solid var(--hair-lit); padding-left: 1.25rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }

.hero-art { display: flex; justify-content: center; align-items: center; }
.hero-heart {
  width: 100%; max-width: 430px; height: auto; display: block;
  filter: drop-shadow(0 0 70px rgba(240, 49, 63, 0.30));
  animation: beat 2.6s ease-in-out infinite;
  /* The artwork's black is a JPEG near-black, not the page's black, so its
     rectangle shows as a faint panel. Feathering the edges to transparent
     lets it float instead of sitting in a box. */
  -webkit-mask-image: radial-gradient(ellipse 66% 64% at 50% 50%,
                      #000 58%, rgba(0, 0, 0, 0) 88%);
  mask-image: radial-gradient(ellipse 66% 64% at 50% 50%,
              #000 58%, rgba(0, 0, 0, 0) 88%);
}
.hero-heart-fallback { color: var(--blood); }

/* A real double thump — systole, a pause, the second sound — rather than a
   single sine pulse. */
@keyframes beat {
  0%, 100% { transform: scale(1); }
  9%       { transform: scale(1.045); }
  18%      { transform: scale(1); }
  27%      { transform: scale(1.025); }
  38%      { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .hero-heart { animation: none; } }

/* ---------- Figures ---------- */

.figures { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.figures-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.figure { padding: 2.25rem 1.5rem 2.25rem 0; border-right: 1px solid var(--hair); }
.figure:last-child { border-right: 0; }
.figure + .figure { padding-left: 1.5rem; }
.figure-value {
  font-size: clamp(2.1rem, 4vw, 3rem); font-weight: 800; color: var(--bone);
  letter-spacing: -0.04em; line-height: 1;
}
.figure-value span { color: var(--blood); font-size: 0.45em; letter-spacing: 0; }
.figure-label {
  font-size: 0.82rem; color: var(--muted); margin-top: 0.65rem; line-height: 1.5;
}

/* ---------- Bands ---------- */

.band { padding: 5.5rem 0; border-bottom: 1px solid var(--hair); }
/* The header is sticky, so an anchor jump would otherwise land with the
   section heading hidden underneath it. */
.band[id] { scroll-margin-top: 5rem; }
.section-lede {
  color: var(--bone-dim); max-width: 46rem; font-size: 1.05rem; margin-top: 1.25rem;
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-top: 2.5rem; }
/* An oversized first letter opens the section — one piece of ornament, in the
   one place a reader starts. */
.drop::first-letter {
  float: left; font-size: 3.6rem; line-height: 0.82; font-weight: 800;
  color: var(--blood); margin: 0.16em 0.12em 0 0;
}
.pull {
  margin: 0; padding: 1.35rem 1.5rem;
  background: var(--panel); border-left: 3px solid var(--jade);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--bone); font-size: 1rem;
}

.diagram {
  margin: 3rem 0 0; padding: 1.5rem;
  background: var(--panel); border: 1px solid var(--hair);
  border-radius: var(--radius);
  /* A 900px-wide diagram scrolls inside its own box on a phone rather than
     forcing the whole page sideways. */
  overflow-x: auto;
}
.diagram svg { min-width: 720px; width: 100%; height: auto; display: block; }
.diagram figcaption {
  color: var(--muted); font-size: 0.87rem; margin-top: 1.1rem; max-width: 46rem;
}

/* ---------- Feature cards ---------- */

.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.1rem; margin: 3rem 0 1.5rem;
}
.feature {
  background: var(--panel); border: 1px solid var(--hair);
  border-radius: var(--radius); padding: 1.6rem 1.5rem;
  transition: border-color 0.18s, transform 0.18s;
}
.feature:hover { border-color: var(--hair-lit); transform: translateY(-2px); }
.feature-rule {
  display: block; width: 28px; height: 3px; border-radius: 2px;
  background: var(--blood); margin-bottom: 1.1rem;
}
.feature p { margin: 0; color: var(--muted); font-size: 0.92rem; }

.governance {
  background: linear-gradient(135deg, rgba(138, 21, 56, 0.30), rgba(18, 8, 12, 0.4));
  border: 1px solid var(--hair-lit); border-radius: var(--radius);
  padding: 2rem 2.1rem; margin-top: 1.75rem;
}
.governance h3 { font-size: 1.15rem; }
.governance p { margin: 0; max-width: 62rem; color: var(--bone-dim); }

/* ---------- People ---------- */

.people {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
  gap: 2.25rem; margin: 3rem 0 2.5rem;
}

/* The three photographs were taken in wildly different conditions: a garden at
   night, a studio on white, a daylight selfie. One is a dark image, one is a
   bright one — no filter reconciles that, only cropping does. So each is
   zoomed to head-and-shoulders around its own focal point, which leaves very
   little of the mismatched backgrounds in frame, and what is left is taken
   down by a vignette that falls off to the page colour. A per-photograph
   brightness nudge finishes the match. */
.portrait-frame {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius); background: var(--panel-2);
  border: 1px solid var(--hair); margin-bottom: 1.25rem;
}
.portrait {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* --fx/--fy are the face in the original; --zoom crops in around it. */
  object-position: var(--fx, 50%) var(--fy, 50%);
  transform-origin: var(--fx, 50%) var(--fy, 50%);
  transform: scale(var(--zoom, 1.02));
  filter: saturate(0.86) contrast(1.05) brightness(var(--lift, 0.95));
  transition: filter 0.35s ease, transform 0.35s ease;
}
.person:hover .portrait, .person:focus-within .portrait {
  filter: saturate(1) contrast(1.02) brightness(calc(var(--lift, 0.95) + 0.06));
  transform: scale(calc(var(--zoom, 1.02) * 1.05));
}

.portrait-nicole-wafula  { --fx: 59%; --fy: 42%; --zoom: 2.05; --lift: 1.06; }
.portrait-noel-onyango   { --fx: 38%; --fy: 24%; --zoom: 1.75; --lift: 0.82; }
.portrait-muthoni-kibunyi { --fx: 51%; --fy: 29%; --zoom: 1.6;  --lift: 0.93; }

.portrait-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(105% 85% at 50% 36%, transparent 32%, rgba(10, 5, 7, 0.82) 100%),
    linear-gradient(to top, rgba(10, 5, 7, 0.65), transparent 42%);
}
.portrait-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: rgba(138, 21, 56, 0.18); color: var(--blood);
  font-size: 2.6rem; font-weight: 800; letter-spacing: 0.05em;
}

.person .role {
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.66rem;
  font-weight: 700; color: var(--blood); margin: 0 0 0.35rem;
}
.person h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.person .bio { font-size: 0.92rem; color: var(--muted); margin: 0; }

.closing {
  max-width: 62rem; color: var(--bone-dim); font-size: 1.02rem;
  border-top: 1px solid var(--hair); padding-top: 2rem;
}

/* ---------- Call to action and footer ---------- */

.cta {
  padding: 4.5rem 0;
  background:
    radial-gradient(120% 160% at 15% 0%, rgba(138, 21, 56, 0.35), transparent 60%),
    var(--void);
  border-bottom: 1px solid var(--hair);
}
.cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.5rem; flex-wrap: wrap;
}
.cta p { color: var(--bone-dim); max-width: 42rem; margin: 0; }
.cta h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }

.site-foot { padding: 2.75rem 0 3.5rem; color: var(--muted); font-size: 0.82rem; }
.site-foot .sources { max-width: 62rem; }
.site-foot a { color: var(--bone-dim); }
.site-foot a:hover { color: var(--blood); }
.colophon { margin: 1.25rem 0 0; color: #6d585e; }

/* ---------- Narrow screens ---------- */

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; padding-top: 3rem; gap: 2.5rem; }
  /* On a phone the artwork leads, then the words. */
  .hero-art { order: -1; }
  .hero-heart { max-width: 230px; }
  .hero-glow { top: -10%; right: -40%; width: 520px; height: 520px; }
  .two-col { grid-template-columns: 1fr; gap: 0; }
  .band { padding: 4rem 0; }
  .figure { border-right: 0; border-bottom: 1px solid var(--hair); padding: 1.6rem 0; }
  .figure + .figure { padding-left: 0; }
  .figures-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 2rem; }
  .head-inner { flex-wrap: wrap; }
  .site-nav { width: 100%; justify-content: space-between; gap: 0.85rem; }
  .band[id] { scroll-margin-top: 7.5rem; }
}

@media (max-width: 420px) {
  .wrap, .head-inner, .hero-inner { padding-left: 1.15rem; padding-right: 1.15rem; }
  .site-nav { gap: 0.5rem; }
  .site-nav a:not(.button-primary) { font-size: 0.78rem; }
  .site-nav .button-primary { padding: 0.5rem 0.9rem; font-size: 0.8rem; }
  .hero .lede { padding-left: 1rem; }
  .governance { padding: 1.5rem 1.35rem; }
}