<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Good Trust — Clean water for communities that need it.</title>
<meta name="description" content="Good Trust is a New Zealand charitable trust funding clean water and sanitation projects in the developing world. Donate, or support us through good.music and good.coffee." />
<link rel="icon" type="image/png" href="assets/good-trust-logo.png" />

<template id="__bundler_thumbnail" data-bg-color="#f6f2ea">
  <svg viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg">
    <rect width="1200" height="800" fill="#f6f2ea"/>
    <g transform="translate(600 360)">
      <circle r="180" fill="#29abe2"/>
      <path d="M 0 -110 C -70 -30 -110 30 -110 70 a 110 110 0 0 0 220 0 c 0 -40 -40 -100 -110 -180 Z" fill="#ffffff"/>
    </g>
    <text x="600" y="640" text-anchor="middle" font-family="-apple-system, system-ui, sans-serif" font-weight="700" font-size="64" fill="#0f1a22" letter-spacing="-1">Good Trust</text>
    <text x="600" y="690" text-anchor="middle" font-family="-apple-system, system-ui, sans-serif" font-weight="400" font-size="22" fill="#6b7782">Clean water. Where it's needed.</text>
  </svg>
</template>

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Mona+Sans:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />

<style>
  :root {
    --bg: #f6f2ea;
    --bg-2: #efe9dc;
    --paper: #ffffff;
    --ink: #0f1a22;
    --ink-2: #2a3742;
    --mute: #6b7782;
    --line: #d9d2c2;
    --line-soft: #e7e0d0;
    --brand: #29abe2;       /* logo cyan */
    --brand-deep: #0e7eb0;
    --brand-ink: #093f5b;
    --music: #7a3e9b;       /* good.music purple */
    --coffee: #7a3e1a;      /* good.coffee brown */
    --radius: 4px;
    --maxw: 1240px;
    --pad: clamp(20px, 5vw, 56px);
    --font: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  }

  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.45;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--brand); color: white; }

  .wrap {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  /* ─────────────────────── NAV ─────────────────────── */
  .nav {
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    background: color-mix(in oklab, var(--bg) 78%, transparent);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background .3s ease;
  }
  .nav.scrolled {
    border-bottom-color: var(--line-soft);
    background: color-mix(in oklab, var(--bg) 92%, transparent);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    height: 88px;
  }
  .brand {
    display: inline-flex; align-items: center; gap: 16px;
    font-weight: 600; font-size: 24px; letter-spacing: -.015em;
  }
  .brand img { height: 163px; width: auto; }
  .brand-word { color: var(--ink); }
  .brand-word .dot { color: var(--brand); }
  .nav-right { display: flex; align-items: center; gap: 6px; }
  .nav-links {
    display: flex; gap: 4px;
    font-size: 14px; color: var(--ink-2);
  }
  .nav-links a {
    padding: 8px 12px;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
  }
  .nav-links a:hover { background: rgba(0,0,0,0.045); color: var(--ink); }
  .nav-links a.nav-now { color: var(--brand-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 7px; }
  .nav-links a.nav-now .dot-mark { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 0 rgba(28,134,189,0.55); animation: pulseDot 2.2s ease-out infinite; }
  @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(28,134,189,0.55); } 70% { box-shadow: 0 0 0 8px rgba(28,134,189,0); } 100% { box-shadow: 0 0 0 0 rgba(28,134,189,0); } }

  .btn {
    --bg-btn: var(--ink);
    --fg-btn: white;
    display: inline-flex; align-items: center; gap: 10px;
    background: var(--bg-btn); color: var(--fg-btn);
    padding: 11px 18px;
    border-radius: 999px;
    font-weight: 600; font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
  }
  .btn:hover { transform: translateY(-1px); }
  .btn.brand-btn { --bg-btn: var(--brand); --fg-btn: white; }
  .btn.brand-btn:hover { --bg-btn: var(--brand-deep); }
  .btn.ghost { --bg-btn: transparent; --fg-btn: var(--ink); border-color: var(--ink); }
  .btn.ghost:hover { --bg-btn: var(--ink); --fg-btn: white; }
  .btn .arrow { transition: transform .2s ease; }
  .btn:hover .arrow { transform: translateX(3px); }

  .nav-inner { height: 144px; }

  .nav-toggle {
    display: none;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--line);
    border-radius: 999px; cursor: pointer;
    color: var(--ink);
    transition: background .15s ease, border-color .15s ease;
  }
  .nav-toggle:hover { background: rgba(0,0,0,0.04); }
  .nav-toggle svg .bar { transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
  .nav-toggle[aria-expanded="true"] svg .b1 { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] svg .b2 { opacity: 0; }
  .nav-toggle[aria-expanded="true"] svg .b3 { transform: translateY(-6px) rotate(-45deg); }

  @media (max-width: 720px) {
    .nav-inner { height: 96px; gap: 8px; }
    .brand img { height: 86px; }
    .brand { font-size: 0; gap: 0; }
    .brand .brand-word { display: none; }
    .nav-right { gap: 6px; }
    .nav-toggle { display: inline-flex; }
    .nav-links {
      position: fixed; left: 0; right: 0; top: 96px;
      flex-direction: column; gap: 2px;
      padding: 12px 20px 20px;
      background: color-mix(in oklab, var(--bg) 96%, transparent);
      backdrop-filter: saturate(180%) blur(14px);
      -webkit-backdrop-filter: saturate(180%) blur(14px);
      border-bottom: 1px solid var(--line-soft);
      transform: translateY(-12px); opacity: 0; pointer-events: none;
      transition: transform .25s ease, opacity .2s ease;
      font-size: 18px;
    }
    .nav-links a { padding: 12px 14px; border-radius: 8px; }
    .nav-links a.nav-now { padding-left: 14px; }
    .nav.menu-open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  }

  /* ─────────────────────── HERO ─────────────────────── */
  .hero {
    padding-top: clamp(36px, 6vw, 80px);
    padding-bottom: clamp(48px, 8vw, 120px);
    position: relative;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
  }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand-ink);
    margin-bottom: 28px;
  }
  .eyebrow::before {
    content: ""; display: inline-block;
    width: 28px; height: 1px; background: var(--brand);
  }

  .hero h1 {
    margin: 0 0 24px;
    font-size: clamp(40px, 6.4vw, 92px);
    line-height: 0.98;
    letter-spacing: -0.035em;
    font-weight: 600;
    text-wrap: balance;
  }
  .hero h1 .accent {
    font-style: italic;
    font-weight: 400;
    color: var(--brand-deep);
  }

  .hero p.lede {
    font-size: clamp(17px, 1.5vw, 20px);
    color: var(--ink-2);
    max-width: 52ch;
    margin: 0 0 36px;
    text-wrap: pretty;
  }
  .hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

  .hero-media {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow:
      0 1px 0 rgba(0,0,0,0.05),
      0 30px 60px -20px rgba(15,26,34,0.35);
  }
  .hero-media img {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.02);
  }
  .hero-tag {
    position: absolute; left: 18px; bottom: 18px; right: 18px;
    color: white;
    font-size: 13px; letter-spacing: 0.04em;
    display: flex; justify-content: space-between; align-items: end; gap: 16px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
  }
  .hero-tag strong { font-weight: 600; }

  .hero-watermark {
    position: absolute;
    top: -4%;
    right: -2%;
    width: 36vw; max-width: 540px;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
  }

  @media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .hero-media { aspect-ratio: 4 / 3.4; order: -1; }
    .hero-watermark { display: none; }
  }

  /* ─────────────────────── SECTION SHELL ─────────────────────── */
  section { position: relative; }
  .section {
    padding-top: clamp(64px, 10vw, 144px);
    padding-bottom: clamp(64px, 10vw, 144px);
  }
  .section-tag {
    display: flex; align-items: baseline; gap: 14px;
    font-size: 13px; color: var(--mute);
    margin-bottom: 28px;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .section-tag .num {
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    font-weight: 600;
  }
  .section-tag .rule {
    flex: 1; height: 1px; background: var(--line);
    transform: translateY(-3px);
  }
  .section-head h2 {
    font-size: clamp(32px, 4.4vw, 60px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    font-weight: 600;
    margin: 0 0 24px;
    max-width: 22ch;
    text-wrap: balance;
  }
  .section-head h2 em {
    font-style: italic; font-weight: 400; color: var(--brand-deep);
  }
  .section-head p {
    font-size: clamp(16px, 1.3vw, 19px);
    color: var(--ink-2);
    max-width: 60ch;
    margin: 0;
    text-wrap: pretty;
  }

  /* ─────────────────────── WHY WATER ─────────────────────── */
  .why {
    background: var(--ink);
    color: white;
    position: relative;
    overflow: hidden;
  }
  .why .section-tag { color: rgba(255,255,255,0.55); }
  .why .section-tag .num { color: white; }
  .why .section-tag .rule { background: rgba(255,255,255,0.18); }
  .why .section-head h2 { color: white; }
  .why .section-head h2 em { color: var(--brand); }
  .why .section-head p { color: rgba(255,255,255,0.7); }

  .why-bg {
    position: absolute; inset: 0;
    background-image: url('assets/kids-water-cascade.jpg');
    background-size: cover; background-position: center;
    opacity: 0.32;
    filter: saturate(1.08) contrast(1.02);
    mask-image: linear-gradient(180deg, transparent 0%, black 24%, black 78%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 24%, black 78%, transparent 100%);
  }
  .why::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,26,34,0.55) 0%, rgba(15,26,34,0.35) 50%, rgba(15,26,34,0.7) 100%);
    pointer-events: none;
  }
  .why .wrap { position: relative; z-index: 1; }

  .why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 64px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
  }
  .why-card {
    background: var(--ink);
    padding: 32px 28px;
    display: flex; flex-direction: column; gap: 12px;
    min-height: 230px;
  }
  .why-card .num {
    font-size: 13px;
    color: var(--brand);
    font-weight: 600;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
  }
  .why-card h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.15;
  }
  .why-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255,255,255,0.65);
    text-wrap: pretty;
  }

  @media (max-width: 900px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .why-grid { grid-template-columns: 1fr; }
    .why-card { min-height: 0; padding: 26px 24px; }
  }

  /* ─────────────────────── PROJECTS ─────────────────────── */
  .projects-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
  .projects-head .right { color: var(--mute); font-size: 14px; }
  .projects-head .right b { color: var(--ink); font-weight: 600; }

  .project-feature {
    margin-top: 56px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
  }
  .project-feature .pf-media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: var(--bg-2);
  }
  .project-feature .pf-media .lead {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
  }
  .project-feature .pf-media img { width: 100%; height: 100%; object-fit: cover; }
  .project-feature .pf-media .sub { aspect-ratio: 1 / 1; }

  .pf-body { padding: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; gap: 18px; }
  .pf-loc {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--brand-deep); font-weight: 600;
  }
  .pf-loc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
  .pf-body h3 {
    margin: 0;
    font-size: clamp(26px, 3vw, 40px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-weight: 600;
  }
  .pf-body > p { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; text-wrap: pretty; }
  .pf-outputs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 6px 0 0; padding: 0; list-style: none; }
  .pf-outputs li {
    display: flex; gap: 10px;
    font-size: 14.5px; color: var(--ink-2);
    padding: 8px 0;
    border-top: 1px solid var(--line-soft);
  }
  .pf-outputs li:nth-child(1), .pf-outputs li:nth-child(2) { border-top: none; }
  .pf-outputs .qty { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 1.6em; }
  .pf-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 6px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
  }
  .stat-label { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
  .stat-value { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }

  @media (max-width: 860px) {
    .project-feature { display: block; }
    .project-feature .pf-media { display: grid; grid-template-columns: 1fr 1fr; }
    .pf-body { display: block; }
    .pf-body > * { margin-bottom: 18px; }
    .pf-body > *:last-child { margin-bottom: 0; }
    .pf-outputs { grid-template-columns: 1fr; }
    .pf-outputs li { border-top: 1px solid var(--line-soft); }
    .pf-outputs li:nth-child(2) { border-top: 1px solid var(--line-soft); }
    .pf-stats { grid-template-columns: 1fr 1fr; }
  }

  /* secondary project rows */
  .project-row {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(20px, 4vw, 56px);
    align-items: center;
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px solid var(--line-soft);
  }
  .project-row.reverse { grid-template-columns: 1.1fr 1fr; }
  .project-row.reverse .pr-media { order: 2; }
  .pr-media {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  }
  .pr-media .lead { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .pr-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
  .pr-media .sub { aspect-ratio: 1 / 1; }
  .pr-body { display: flex; flex-direction: column; gap: 14px; }
  .pr-body h3 {
    margin: 0; font-size: clamp(22px, 2.4vw, 30px);
    letter-spacing: -0.02em; line-height: 1.1; font-weight: 600;
  }
  .pr-body p { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0; text-wrap: pretty; }
  .pf-stats.compact {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--line-soft);
  }
  .pf-stats.compact .stat-label { font-size: 11px; }
  .pf-stats.compact .stat-value { font-size: 17px; }
  .projects-bridge {
    margin: 56px auto 0; max-width: 880px;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 40px);
    align-items: center;
    padding-top: 56px; border-top: 1px solid var(--line-soft);
  }
  .projects-bridge img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
    display: block;
  }
  .projects-bridge .bridge-text {
    color: var(--ink-2); font-size: 14.5px; line-height: 1.65;
    text-wrap: pretty;
  }
  .projects-bridge .bridge-text b { color: var(--ink); font-weight: 600; }
  .projects-bridge .bridge-loc {
    display: block; margin-bottom: 8px;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--mute); font-weight: 600;
  }
  @media (max-width: 720px) {
    .projects-bridge { grid-template-columns: 1fr; }
  }
  @media (max-width: 860px) {
    .pf-stats.compact { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 860px) {
    .project-row, .project-row.reverse { grid-template-columns: 1fr; }
    .project-row.reverse .pr-media { order: 0; }
  }

  /* ─────────────────────── BRAND FAMILY (good.music / good.coffee) ─────────────────────── */
  .family {
    background: var(--bg-2);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }
  .family-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 56px;
  }
  .family-card {
    background: var(--paper);
    border-radius: var(--radius);
    border: 1px solid var(--line-soft);
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .family-card .fc-top {
    padding: 32px 32px 0;
    display: flex; align-items: center; gap: 18px;
  }
  .family-card .fc-top img {
    height: 78px; width: auto; object-fit: contain;
  }
  .family-card .fc-top .fc-name {
    font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--mute); font-weight: 600;
  }
  .family-card .fc-top .fc-name strong { display: block; font-size: 22px; letter-spacing: -0.01em; text-transform: none; margin-top: 2px; }
  .family-card.music .fc-top .fc-name strong { color: var(--music); }
  .family-card.coffee .fc-top .fc-name strong { color: var(--coffee); }

  .family-card .fc-body { padding: 24px 32px 8px; }
  .family-card .fc-body h3 {
    margin: 0 0 10px;
    font-size: clamp(22px, 2.2vw, 28px);
    letter-spacing: -0.015em; line-height: 1.15; font-weight: 600;
  }
  .family-card .fc-body p {
    margin: 0; font-size: 15.5px; line-height: 1.55;
    color: var(--ink-2); text-wrap: pretty;
  }

  .family-card .fc-media {
    margin: 20px 32px 0;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    border: 1px solid var(--line-soft);
  }
  .family-card .fc-media iframe { width: 100%; height: 100%; border: 0; display: block; }
  .family-card .fc-media.album { aspect-ratio: 16 / 9; background: #1a1a1a; position: relative; }
  .family-card .fc-media.album img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .family-card .fc-media.yt-poster { display: block; cursor: pointer; overflow: hidden; }
  .family-card .fc-media.yt-poster .yt-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    transition: transform .2s ease, filter .2s ease;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.4));
    pointer-events: none;
  }
  .family-card .fc-media.yt-poster:hover .yt-play { transform: translate(-50%, -50%) scale(1.08); filter: drop-shadow(0 8px 22px rgba(0,0,0,0.55)); }
  .family-card .fc-media.yt-poster img { transition: transform .5s ease; }
  .family-card .fc-media.yt-poster:hover img { transform: scale(1.03); }
  .family-card .fc-media .album-caption {
    position: absolute; left: 14px; bottom: 12px; right: 14px;
    color: white;
    display: flex; flex-direction: column; gap: 2px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.55);
  }
  .family-card .fc-media .album-caption small {
    font-size: 10.5px; letter-spacing: 0.14em;
    opacity: 0.85;
  }
  .family-card .fc-media .album-caption span { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
  .family-card .fc-media .album-caption em { font-style: italic; font-weight: 500; }
  .family-card .fc-media .placeholder {
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background:
      radial-gradient(circle at 30% 30%, rgba(41,171,226,0.25), transparent 60%),
      linear-gradient(135deg, #14222b, #0a1318);
    color: rgba(255,255,255,0.78);
    text-align: center; padding: 16px;
  }
  .family-card .fc-media .play {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,0.95); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
  }
  .family-card .fc-media .placeholder small {
    font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7;
  }

  .family-card .fc-foot {
    padding: 20px 32px 32px;
    margin-top: auto;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  }
  .family-card .fc-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600;
    padding: 10px 16px; border-radius: 999px;
    border: 1px solid var(--line); color: var(--ink);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .family-card.music .fc-link.primary { background: var(--music); color: white; border-color: var(--music); }
  .family-card.music .fc-link.primary:hover { background: #5d2c79; border-color: #5d2c79; }
  .family-card.coffee .fc-link.primary { background: var(--coffee); color: white; border-color: var(--coffee); }
  .family-card.coffee .fc-link.primary:hover { background: #5a2d14; border-color: #5a2d14; }
  .family-card .fc-link:not(.primary):hover { background: var(--ink); color: white; border-color: var(--ink); }

  @media (max-width: 860px) {
    .family-grid { grid-template-columns: 1fr; }
    .family-card .fc-top, .family-card .fc-body, .family-card .fc-foot { padding-left: 22px; padding-right: 22px; }
    .family-card .fc-media { margin-left: 22px; margin-right: 22px; }
  }

  /* ─────────────────────── RIGHT NOW (upcoming project) ─────────────────────── */
  .right-now { background: var(--paper); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
  .rn-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: end; margin-bottom: 40px; }
  .rn-head h2 { margin: 0; font-size: clamp(34px, 4.8vw, 60px); letter-spacing: -0.025em; line-height: 1.02; font-weight: 600; text-wrap: balance; }
  .rn-head h2 em { font-style: italic; font-weight: 400; color: var(--brand-ink); }
  .rn-head p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
  .rn-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
  .rn-media { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rn-media .lead { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .rn-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); display: block; }
  .rn-media .sub { aspect-ratio: 1 / 1; }
  .rn-body { display: flex; flex-direction: column; gap: 20px; }
  .rn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
  .rn-stats > div { background: var(--paper); padding: 14px 14px; }
  .rn-stat-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
  .rn-stat-value { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .rn-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px; background: var(--bg-2); border-radius: var(--radius); border: 1px solid var(--line-soft); }
  .rn-totals .total-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
  .rn-totals .total-big { font-size: clamp(28px, 3vw, 38px); font-weight: 600; letter-spacing: -0.02em; color: var(--brand-ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
  .rn-totals .total-sub { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
  .rn-levels { display: flex; flex-direction: column; }
  .rn-levels h3 { margin: 0 0 14px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); font-weight: 600; }
  .rn-level { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line-soft); }
  .rn-level:first-of-type { border-top: none; padding-top: 4px; }
  .rn-level .amt { font-size: 19px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
  .rn-level .buys { font-size: 14.5px; color: var(--ink-2); line-height: 1.45; text-wrap: pretty; }
  .rn-level .buys b { color: var(--ink); font-weight: 600; }
  .rn-cta { margin-top: 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .rn-cta .small { font-size: 13px; color: var(--mute); }

  /* progress tracker */
  .rn-progress {
    padding: 20px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
  }
  .rn-progress .pg-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
  }
  .rn-progress .pg-raised .pg-label,
  .rn-progress .pg-goal .pg-label {
    display: block;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--mute); font-weight: 600;
    margin-bottom: 4px;
  }
  .rn-progress .pg-raised { text-align: left; }
  .rn-progress .pg-goal { text-align: right; }
  .rn-progress .pg-raised .pg-amt {
    font-size: clamp(26px, 2.6vw, 32px);
    font-weight: 600; letter-spacing: -0.02em;
    color: var(--brand-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .rn-progress .pg-goal .pg-amt {
    font-size: 15px; font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .rn-progress .pg-bar {
    position: relative;
    height: 10px;
    background: var(--bg-2);
    border-radius: 999px;
    overflow: hidden;
  }
  .rn-progress .pg-fill {
    position: absolute; inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, var(--brand-deep), var(--brand));
    border-radius: 999px;
    transition: width 1.4s cubic-bezier(.2,.8,.2,1);
  }
  .rn-progress.reveal.in .pg-fill { width: var(--pg-pct, 30.48%); }
  .rn-progress .pg-meta {
    margin-top: 12px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--mute);
  }
  .rn-progress .pg-meta .pg-pct {
    color: var(--brand-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .rn-progress .pg-meta .pg-remaining b {
    color: var(--ink); font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 860px) {
    .rn-head { grid-template-columns: 1fr; align-items: start; gap: 18px; }
    .rn-grid { grid-template-columns: 1fr; }
    .rn-stats { grid-template-columns: 1fr 1fr; }
    .rn-level { grid-template-columns: 90px 1fr; gap: 14px; }
    .rn-progress .pg-top { flex-direction: row; }
  }

  /* ─────────────────────── DONATE ─────────────────────── */
  .donate {
    background: var(--brand);
    color: white;
    position: relative;
    overflow: hidden;
  }
  .donate::after {
    content: "";
    position: absolute;
    right: -8%; top: -20%;
    width: 60vw; max-width: 720px; aspect-ratio: 1;
    background:
      radial-gradient(closest-side, rgba(255,255,255,0.18), transparent 70%);
    pointer-events: none;
  }
  .donate-inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
    position: relative; z-index: 1;
  }
  .donate h2 {
    margin: 0 0 18px;
    font-size: clamp(36px, 5.6vw, 76px);
    line-height: 0.98;
    letter-spacing: -0.03em;
    font-weight: 600;
    text-wrap: balance;
  }
  .donate h2 em { font-style: italic; font-weight: 400; opacity: 0.9; }
  .donate p {
    font-size: clamp(16px, 1.4vw, 19px);
    color: rgba(255,255,255,0.88);
    margin: 0 0 28px;
    max-width: 48ch;
    text-wrap: pretty;
  }
  .donate .btn { --bg-btn: white; --fg-btn: var(--brand-ink); font-size: 15px; padding: 14px 22px; }
  .donate .btn:hover { --bg-btn: var(--ink); --fg-btn: white; }
  .donate-note {
    margin-top: 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    display: flex; align-items: center; gap: 8px;
  }
  .donate-note svg { flex-shrink: 0; }

  .donate-aside {
    border-left: 1px solid rgba(255,255,255,0.25);
    padding-left: clamp(20px, 4vw, 48px);
  }
  .donate-aside .row {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    font-size: 14.5px;
  }
  .donate-aside .row:last-child { border-bottom: none; }
  .donate-aside .row .k { opacity: 0.75; }
  .donate-aside .row .v { font-weight: 600; }
  .donate-aside h4 {
    margin: 0 0 8px;
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255,255,255,0.75); font-weight: 600;
  }

  @media (max-width: 860px) {
    .donate-inner { grid-template-columns: 1fr; }
    .donate-aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.25); padding-top: 28px; }
  }

  /* ─────────────────────── FOUNDERS (now last) ─────────────────────── */
  .founders-section {
    padding-top: clamp(72px, 10vw, 144px);
    padding-bottom: clamp(56px, 9vw, 120px);
  }
  .founders-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(28px, 5vw, 80px);
    align-items: start;
    margin-top: 48px;
  }
  .founders-body p {
    font-size: clamp(16px, 1.2vw, 18px);
    line-height: 1.6; color: var(--ink-2);
    margin: 0 0 1.1em;
    text-wrap: pretty;
  }
  .founders-body p:last-child { margin-bottom: 0; }
  .founders-body strong { color: var(--ink); font-weight: 600; }

  .founders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .founder {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    padding: 16px;
    display: flex; flex-direction: column; gap: 14px;
  }
  .founder-photo {
    aspect-ratio: 4 / 5;
    background: var(--bg-2);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--mute);
    font-size: 11.5px;
    letter-spacing: 0.1em; text-transform: uppercase;
  }
  .founder-photo img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .founder-photo.has-photo { color: transparent; }
  .founder-photo::after {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(135deg, transparent 49%, rgba(0,0,0,0.06) 49.5%, rgba(0,0,0,0.06) 50.5%, transparent 51%);
    background-size: 14px 14px;
    opacity: 0.35;
    pointer-events: none;
  }
  .founder-meta { display: flex; flex-direction: column; gap: 2px; }
  .founder-name { font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
  .founder-role { font-size: 12.5px; color: var(--mute); }

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

  /* ─────────────────────── CONTACT / FOOTER ─────────────────────── */
  .contact {
    padding-top: clamp(56px, 8vw, 96px);
    padding-bottom: clamp(40px, 6vw, 72px);
    border-top: 1px solid var(--line-soft);
  }
  .contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
    align-items: start;
  }
  .contact h2 {
    margin: 0 0 16px;
    font-size: clamp(26px, 3.2vw, 40px);
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-weight: 600;
  }
  .contact h2 em { font-style: italic; font-weight: 400; color: var(--brand-deep); }
  .contact p { margin: 0; color: var(--ink-2); font-size: 16px; max-width: 38ch; text-wrap: pretty; }
  .contact-col h4 {
    margin: 0 0 14px;
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--mute); font-weight: 600;
  }
  .contact-col a {
    display: block;
    font-size: 17px;
    letter-spacing: -0.01em;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, color .2s ease;
    color: var(--ink);
    width: max-content;
    max-width: 100%;
  }
  .contact-col a:hover { color: var(--brand-deep); border-bottom-color: var(--brand); }
  .contact-col span { display: block; font-size: 15px; color: var(--ink-2); }

  @media (max-width: 760px) {
    .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  }

  footer.foot {
    border-top: 1px solid var(--line-soft);
    padding: 24px 0 36px;
    font-size: 13px;
    color: var(--mute);
  }
  .foot-inner {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    align-items: center;
  }
  .foot-inner .brand-small {
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 500;
  }
  .foot-inner .brand-small img { height: 56px; }

  /* gentle reveal */
  .reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity .9s ease, transform .9s ease;
  }
  .reveal.in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
  }
</style>
</head>
<body>

<!-- ─────────────────────── NAV ─────────────────────── -->
<header class="nav" id="nav">
  <div class="wrap nav-inner">
    <a href="#top" class="brand" aria-label="Good Trust home">
      <img src="assets/good-trust-logo.png" alt="Good Trust logo" />
      <span class="brand-word">
</span>
    </a>
    <nav class="nav-right" aria-label="Primary">
      <button class="nav-toggle" id="nav-toggle" aria-expanded="false" aria-controls="nav-links" aria-label="Menu">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line class="bar b1" x1="4" y1="6" x2="20" y2="6"/><line class="bar b2" x1="4" y1="12" x2="20" y2="12"/><line class="bar b3" x1="4" y1="18" x2="20" y2="18"/></svg>
      </button>
      <div class="nav-links" id="nav-links">
        <a href="#right-now" class="nav-now"><span class="dot-mark" aria-hidden="true"></span>Current project</a>
        <a href="#why">Why water</a>
        <a href="#projects">Projects</a>
        <a href="#family">good.music &amp; good.coffee</a>
        <a href="#story">Our story</a>
      </div>
      <a class="btn brand-btn" href="#donate">
        Donate
        <svg class="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></svg>
      </a>
    </nav>
  </div>
</header>

<main id="top">

<!-- ─────────────────────── HERO ─────────────────────── -->
<section class="hero">
  <img class="hero-watermark" src="assets/good-trust-logo.png" alt="" aria-hidden="true" />
  <div class="wrap hero-grid">
    <div class="hero-copy reveal">
      <div class="eyebrow">A NEW ZEALAND CHARITABLE TRUST</div>
      <h1>
        Clean water<br/>
        <span class="accent">for communities</span><br/>
        that need it.
      </h1>
      <p class="lede">Good Trust funds water and sanitation projects where we're confident they'll have an impact. As a 100% charity, every dollar you give goes direct to the projects we fund. There are no New Zealand overheads deducted from your donation.</p>
      <div class="hero-ctas">
        <a class="btn brand-btn" href="#donate">
          Donate
          <svg class="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="M13 5l7 7-7 7"/></svg>
        </a>
        <a class="btn ghost" href="#projects">See a recent project</a>
      </div>
    </div>
    <div class="hero-media reveal">
      <img src="assets/kids-splash-hero.jpg" alt="Children laughing and splashing under the spout of a newly completed Good Trust well in rural Cambodia" />
      <div class="hero-tag">
        <span><strong></strong></span>
        <span>
</span>
      </div>
    </div>
  </div>
</section>

<!-- ─────────────────────── WHY WATER ─────────────────────── -->
<section class="section why" id="why">
  <div class="why-bg" aria-hidden="true"></div>
  <div class="wrap">
    <div class="section-tag"><span class="num">01</span><span>Why water</span><span class="rule"></span></div>
    <div class="section-head reveal">
      <h2>Start with water. <em>The rest follows.</em></h2>
      <p>Of all the needs in the developing world, we chose one. Mostly because we understood it better, but also because water is upstream of almost everything else - and a water project, once built, keeps giving for decades.</p>
    </div>

    <div class="why-grid">
      <div class="why-card reveal">
        <div class="num">— Food</div>
        <h3>Crops, livestock, livelihoods.</h3>
        <p>Reliable water turns subsistence farming into surplus, and surplus into household income.</p>
      </div>
      <div class="why-card reveal">
        <div class="num">— Education</div>
        <h3>A walk replaced with a classroom.</h3>
        <p>When the daily walk for water disappears, children — most often girls — can stay in school.</p>
      </div>
      <div class="why-card reveal">
        <div class="num">— Hygiene</div>
        <h3>Prevention, not just cure.</h3>
        <p>Clean water and proper sanitation reduce waterborne disease and infant mortality dramatically.</p>
      </div>
      <div class="why-card reveal">
        <div class="num">— Life</div>
        <h3>The thing everything else needs.</h3>
        <p>It is not a metaphor. Without it, nothing else we might build for a community can hold.</p>
      </div>
    </div>
  </div>
</section>

<!-- ─────────────────────── PROJECTS ─────────────────────── -->
<section class="section" id="projects">
  <div class="wrap">
    <div class="section-tag"><span class="num">02</span><span>Project examples</span><span class="rule"></span></div>
    <div class="projects-head">
      <div class="section-head reveal">
        <h2>What your giving <em>actually builds.</em></h2>
        <p>A few examples from across the years. We've funded work in South East Asia and East Africa since 2009. Below are some project examples to show how the projects have evolved over time. We've witnessed an incredible maturing of this space. Projects we fund now are incredibly well built, effective and durable.</p>
      </div>
      <div class="right reveal">
        <b>Latest completed:</b> 2 schools, Kampong Chhnang
      </div>
    </div>

    <article class="project-feature reveal" aria-labelledby="cw-title">
      <div class="pf-media">
        <img class="lead" src="assets/baribour-highfive.jpg" alt="James Grafas high-fiving a student outside one of the schools in Baribour District, Kampong Chhnang — January 2026 project visit" />
        <img class="sub" src="assets/baribour-group.jpg" alt="The whole student body of one of the project schools gathered in front of the new BioSand filter station" />
        <img class="sub" src="assets/baribour-tap.jpg" alt="Students filling water containers from the newly installed school BioSand filter tap" />
      </div>
      <div class="pf-body">
        <span class="pf-loc">Cambodia · School WASH for Better Health · Baribour, Kampong Chhnang · Jan 2026</span>
        <h3 id="cw-title">Two schools. Safe water, clean facilities, healthier kids.</h3>
        <p>Our most recently completed project, delivered with our partner <strong>Clear Cambodia</strong> in Baribour District: BioSand filter water stations, handwashing stations, accessible latrine blocks and waste kilns at two primary schools in Kampong Chhnang. Principals and teachers were trained on filter use and maintenance, so the hardware keeps working long after we leave.</p>

        <ul class="pf-outputs">
          <li><span class="qty">2</span><span>School BioSand Filters
(1 small, 1 large)</span></li>
          <li><span class="qty">2</span><span>Handwashing stations</span></li>
          <li><span class="qty">2</span><span>Latrine blocks &mdash; 3 stalls + 4 stalls</span></li>
          <li><span class="qty">2</span><span>Garbage kilns for school waste management</span></li>
        </ul>

        <div class="pf-stats">
          <div>
            <div class="stat-label">Students served</div>
            <div class="stat-value">451</div>
          </div>
          <div>
            <div class="stat-label">Schools</div>
            <div class="stat-value">2 primary</div>
          </div>
          <div>
            <div class="stat-label">Completed</div>
            <div class="stat-value">Jan 2026</div>
          </div>
          <div>
            <div class="stat-label">Partner</div>
            <div class="stat-value">Clear Cambodia</div>
          </div>
        </div>
      </div>
    </article>

    <article class="project-row reveal">
      <div class="pr-media">
        <img class="lead" src="assets/kid-drinking-pipe.jpg" alt="A young student drinking from the pipe of a new well at a Cambodian primary school, 2015" />
        <img class="sub" src="assets/charity-water-pump.jpg" alt="A completed charity:water hand pump installation at a school" />
        <img class="sub" src="assets/girl-wet-hair.jpg" alt="A girl with wet hair smiling after washing at a new school water point" />
      </div>
      <div class="pr-body">
        <span class="pf-loc">Cambodia · with charity: water · Completed July 2015</span>
        <h3>Seven schools. Clean water for 4,132 students.</h3>
        <p>Funded with our partner charity: water: BioSand filter systems and sanitation facilities at seven primary schools across Beantey Meanchy, Cambodia. Hardware, training, ongoing monitoring — still running today.</p>
        <div class="pf-stats compact">
          <div><div class="stat-label">Students served</div><div class="stat-value">4,132</div></div>
          <div><div class="stat-label">Schools</div><div class="stat-value">7 primary</div></div>
          <div><div class="stat-label">Completed</div><div class="stat-value">Jul 2015</div></div>
          <div><div class="stat-label">Partner</div><div class="stat-value">charity: water</div></div>
        </div>
      </div>
    </article>

    <div class="projects-bridge reveal">
      <img src="assets/preah-tvea-plaque-2022.jpg" alt="Plaque at Preah Tvea Primary School: BioSand filter and hand washing station, funded by Good Trust, built by Clear Cambodia, dated 20 October 2022" />
      <div class="bridge-text">
        <span class="bridge-loc">In between · 2022 · Preah Tvea Primary School</span>
        Between the two examples above, <b>dozens of smaller projects</b> &mdash; school filters, village wells, hand washing stations, repairs and training &mdash; have rolled on year after year since 2009. This plaque is one of them: a BioSand filter and hand washing station completed with Clear Cambodia in 2022. The one below is just for fun: where we started.
      </div>
    </div>

    <article class="project-row reverse reveal">
      <div class="pr-media">
        <img class="lead" src="assets/well-digger-smile.jpg" alt="A young man emerging from a hand-dug well shaft, smiling at the camera — one of Good Trust's earliest projects in Cambodia, 2011" />
        <img class="sub" src="assets/well-deep.jpg" alt="Worker inside the hand-dug shaft, on the rope" />
        <img class="sub" src="assets/well-team.jpg" alt="Two men at the surface working the rope and pulley over the new well" />
      </div>
      <div class="pr-body">
        <span class="pf-loc">Where we started · Hand-dug well · 2011</span>
        <h3>One of our very first.</h3>
        <p>This is what the work looked like in the beginning: a village well dug by hand in 2011, with Good Trust funding the materials. We've come a long way since — today most of what we fund is delivered through partners with engineered hardware, BioSand filters and trained Water Committees. The principle hasn't changed: locally owned, built to last.</p>
      </div>
    </article>
  </div>
</section>

<!-- ─────────────────────── RIGHT NOW ─────────────────────── -->
<section class="section right-now" id="right-now">
  <div class="wrap">
    <div class="section-tag"><span class="num">03</span><span>What you can do right now</span><span class="rule"></span></div>

    <div class="rn-head reveal">
      <h2>Our next project. <em>Four schools, this winter.</em></h2>
      <p>Between May and July 2026, Good Trust is funding <strong>School WASH for Better Health</strong> &mdash; safe drinking water, handwashing stations and waste kilns at four primary schools in Kampong Chhnang province. We're delivering it with our long-standing partner, Clear Cambodia.</p>
    </div>

    <div class="rn-grid">
      <div class="rn-media reveal">
        <img class="lead" src="assets/sbsf-students-collect.jpg" alt="Students collecting safe drinking water at a sBSF water station &mdash; reference image from a previous WASH project" />
        <img class="sub" src="assets/wash-latrine-1.jpg" alt="A newly built school handwashing and sanitation block &mdash; reference image from a previous WASH project" />
        <img class="sub" src="assets/flow-rate-check.jpeg" alt="Flow-rate testing on a school BioSand filter &mdash; reference image" />
      </div>

      <div class="rn-body reveal">
        <div class="rn-stats">
          <div><div class="rn-stat-label">Schools</div><div class="rn-stat-value">4</div></div>
          <div><div class="rn-stat-label">Students</div><div class="rn-stat-value">585</div></div>
          <div><div class="rn-stat-label">Teachers</div><div class="rn-stat-value">22</div></div>
          <div><div class="rn-stat-label">Timeline</div><div class="rn-stat-value">May&ndash;Jul</div></div>
        </div>

        <div class="rn-progress reveal" role="group" aria-label="Fundraising progress" style="--pg-pct: 36.51%;">
          <div class="pg-top">
            <div class="pg-raised">
              <span class="pg-label">Raised so far</span>
              <span class="pg-amt">NZ$12,120</span>
            </div>
            <div class="pg-goal">
              <span class="pg-label">Goal</span>
              <span class="pg-amt">NZ$33,200</span>
            </div>
          </div>
          <div class="pg-bar" role="progressbar" aria-valuemin="0" aria-valuemax="33200" aria-valuenow="12120" aria-valuetext="NZ$12,120 raised of NZ$33,200 goal">
            <div class="pg-fill"></div>
          </div>
          <div class="pg-meta">
            <span class="pg-pct">37% funded</span>
            <span class="pg-remaining"><b>NZ$21,080</b> still to raise</span>
          </div>
        </div>

        <div class="rn-totals">
          <div>
            <div class="total-label">Total project cost</div>
            <div class="total-big">~NZ$33,200</div>
            <div class="total-sub">Approx. USD 20,115 at today's rate</div>
          </div>
          <div>
            <div class="total-label">What's built</div>
            <div class="total-sub" style="margin-top:8px; line-height:1.5;">4 BioSand filter water stations (3 large + 1 small), 4 handwashing stations, 3 garbage kilns &mdash; plus training for principals and teachers.</div>
          </div>
        </div>

        <div class="rn-levels">
          <h3>What your gift buys</h3>
          <div class="rn-level"><span class="amt">NZ$60</span><span class="buys">Safe water at school for one student.</span></div>
          <div class="rn-level"><span class="amt">NZ$1,200</span><span class="buys">A complete <b>handwashing station</b> at one of the schools.</span></div>
          <div class="rn-level"><span class="amt">NZ$1,500</span><span class="buys">A <b>garbage kiln</b> &mdash; safe waste management for the school.</span></div>
          <div class="rn-level"><span class="amt">NZ$5,500</span><span class="buys">A full <b>School BioSand Filter</b> water station &mdash; clean drinking water for hundreds of kids, daily.</span></div>
          <div class="rn-level"><span class="amt">NZ$8,500</span><span class="buys">Fund <b>an entire school's</b> WASH facilities &mdash; filter, handwashing station and kiln.</span></div>
          <div class="rn-level"><span class="amt">NZ$33,200</span><span class="buys">Fund <b>the whole project</b> &mdash; all four schools, all 585 students. (Or rally a group.)</span></div>
        </div>

        <div class="rn-cta">
          <a class="btn brand-btn" href="https://givealittle.co.nz/org/goodtrust" target="_blank" rel="noopener noreferrer">
            Donate via Givealittle
            <svg class="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>
          </a>
          <span class="small">Fully tax deductible in NZ.</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ─────────────────────── BRAND FAMILY ─────────────────────── -->
<section class="section family" id="family">
  <div class="wrap">
    <div class="section-tag"><span class="num">04</span><span>How we fund it</span><span class="rule"></span></div>
    <div class="section-head reveal">
      <h2>Two other little ways <em>to chip in.</em></h2>
      <p>Alongside direct donations, Good Trust runs two side projects. </p>
    </div>

    <div class="family-grid">
      <!-- good.music -->
      <article class="family-card music reveal">
        <div class="fc-top">
          <img src="assets/good-music-logo.png" alt="good.music logo" />
          <div class="fc-name">
            A Good Trust project
            <strong style="font-weight: 600">good.music</strong>
          </div>
        </div>
        <div class="fc-body">
          <h3>Music that pays for water.</h3>
          <p>We partnered with Luke Thompson to record his song Water, inspired by Good Trusts work. Streams, views and downloads all fund Good Trust. And, it's a great song!</p>
        </div>
        <div class="fc-media">
          <iframe
            src="https://www.youtube-nocookie.com/embed/2RI4npfNRbg?rel=0"
            title="Luke Thompson — water (good.music)"
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
            referrerpolicy="strict-origin-when-cross-origin"
            allowfullscreen></iframe>
        </div>
        <div class="fc-foot">
          <a class="fc-link primary" href="https://www.youtube.com/watch?v=2RI4npfNRbg" target="_blank" rel="noopener">
            Watch on YouTube
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>
          </a>
          <a class="fc-link" href="#donate">Donate instead</a>
        </div>
      </article>

      <!-- good.coffee -->
      <article class="family-card coffee reveal">
        <div class="fc-top">
          <img src="assets/good-coffee-logo.png" alt="good.coffee logo" />
          <div class="fc-name">
            A Good Trust project
            <strong style="font-weight: 600">good.coffee</strong>
          </div>
        </div>
        <div class="fc-body">
          <h3>Coffee you can drink for water.</h3>
          <p>In partnership with Excelso, a New Zealand coffee roaster: every bag sold contributes to Good Trust's work. Same good coffee, but this time it makes a real difference!

</p>
        </div>
        <div class="fc-media album">
          <img src="assets/good-coffee-bags.jpg" alt="A shelf of good.coffee bags branded goodtrust.nz — every bag funds clean water in Cambodia for one person for five years" />
        </div>
        <div class="fc-foot">
          <a class="fc-link primary" href="https://excelso.co.nz/" target="_blank" rel="noopener">
            Visit Excelso
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>
          </a>
          <a class="fc-link" href="#donate">Donate instead</a>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ─────────────────────── DONATE ─────────────────────── -->
<section class="section donate" id="donate">
  <div class="wrap donate-inner">
    <div class="reveal">
      <div class="eyebrow" style="color: rgba(255,255,255,0.85);">Donate</div>
      <h2>One well. <em>One community.</em><br/>One donation away.</h2>
      <p>Donations go through Givealittle, the New Zealand donation platform. <strong>All donations to Good Trust are fully tax deductible</strong> — Givealittle issues your receipt automatically.</p>
      <a class="btn" href="https://givealittle.co.nz/org/goodtrust" target="_blank" rel="noopener noreferrer" aria-label="Donate to Good Trust via Givealittle">
        Donate via Givealittle
        <svg class="arrow" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17L17 7"/><path d="M8 7h9v9"/></svg>
      </a>
      <div class="donate-note">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>
        Secure donations via givealittle.co.nz/org/goodtrust
      </div>
    </div>

    <aside class="donate-aside reveal">
      <h4>What your donation funds</h4>
      <div class="row"><span class="k">Materials, filters &amp; pumps</span><span class="v">~ 70%</span></div>
      <div class="row"><span class="k">Local labour &amp; construction</span><span class="v">~ 20%</span></div>
      <div class="row"><span class="k">Partner oversight &amp; training</span><span class="v">~ 10%</span></div>
      <div class="row"><span class="k">NZ admin overhead</span><span class="v">0%</span></div>
      <div class="row"><span class="k">Tax deductible in NZ</span><span class="v">✓ 100%</span></div>
    </aside>
  </div>
</section>

<!-- ─────────────────────── OUR STORY (now last) ─────────────────────── -->
<section class="founders-section" id="story">
  <div class="wrap">
    <div class="section-tag"><span class="num">05</span><span>Our story</span><span class="rule"></span></div>
    <div class="section-head reveal">
      <h2>Two New Zealanders, <em>one quiet idea,</em> 2009.</h2>
      <p>Good Trust was founded by Andrew Nicol and James Grafas in 2009 — a difficult year for the New Zealand economy, and a season in which we'd both been thinking hard about needs we kept reading about in the developing world.</p>
    </div>

    <div class="founders-grid">
      <div class="founders-body reveal">
        <p>The idea was simple: find <strong>creative ways to raise money</strong> and direct it into water projects where it would do the most good. Over the years that's meant straightforward donations, partnerships with businesses big and small, and side projects of our own — like good.music and good.coffee.</p>
        <p>We chose water because we understood it, and because we believed it was foundational. Without it there is no food, no education, no hygiene. With it, almost everything else becomes possible.</p>
        <p>More than fifteen years on, the same belief still runs the trust. Quietly. One project at a time.</p>
      </div>

      <div class="founders reveal" aria-label="Founders">
        <div class="founder">
          <div class="founder-photo has-photo" data-photo="andrew" aria-label="Andrew Nicol">
            <img src="assets/andrew-nicol.jpg" alt="Andrew Nicol, Good Trust co-founder" />
          </div>
          <div class="founder-meta">
            <span class="founder-name">Andrew Nicol</span>
            <span class="founder-role">Co-founder · 2009</span>
          </div>
        </div>
        <div class="founder">
          <div class="founder-photo has-photo" data-photo="james" aria-label="James Grafas">
            <img src="assets/james-grafas.jpg" alt="James Grafas, Good Trust co-founder" />
          </div>
          <div class="founder-meta">
            <span class="founder-name">James Grafas</span>
            <span class="founder-role">Co-founder · 2009</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ─────────────────────── CONTACT ─────────────────────── -->
<section class="contact" id="contact">
  <div class="wrap">
    <div class="contact-grid">
      <div class="reveal">
        <h2>Got an idea, or want to <em>chip in?</em></h2>
        <p>Donors, supporters, businesses, the merely curious — write to either of us directly. We read everything.</p>
      </div>
      <div class="contact-col reveal">
        <h4>James Grafas</h4>
        <a class="e-link" data-u="james" data-d="goodtrust.co" href="#">email</a>
        <a href="tel:+6421461635">+64 21 461 635</a>
        <span>Co-founder</span>
      </div>
      <div class="contact-col reveal">
        <h4>Andrew Nicol</h4>
        <a class="e-link" data-u="andrew" data-d="goodtrust.co" href="#">email</a>
        <a href="tel:+642263739">+64 22 637 39</a>
        <span>Co-founder</span>
      </div>
    </div>
  </div>
</section>

</main>

<!-- ─────────────────────── FOOTER ─────────────────────── -->
<footer class="foot">
  <div class="wrap foot-inner">
    <span class="brand-small">
      <img src="assets/good-trust-logo.png" alt="" />
      good.trust
    </span>
    <span>© <span id="year">2025</span> Good Trust · A New Zealand charitable trust · Est. 2009</span>
  </div>
</footer>

<script>
  document.getElementById('year').textContent = new Date().getFullYear();

  const nav = document.getElementById('nav');
  const onScroll = () => nav.classList.toggle('scrolled', window.scrollY > 12);
  onScroll();
  window.addEventListener('scroll', onScroll, { passive: true });

  const io = new IntersectionObserver((entries) => {
    entries.forEach(e => {
      if (e.isIntersecting) {
        e.target.classList.add('in');
        io.unobserve(e.target);
      }
    });
  }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
  document.querySelectorAll('.reveal').forEach(el => io.observe(el));

  // Mobile hamburger
  const navEl = document.getElementById('nav');
  const toggle = document.getElementById('nav-toggle');
  const navLinks = document.getElementById('nav-links');
  const closeMenu = () => { navEl.classList.remove('menu-open'); toggle.setAttribute('aria-expanded', 'false'); };
  toggle.addEventListener('click', () => {
    const open = navEl.classList.toggle('menu-open');
    toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
  });
  navLinks.querySelectorAll('a').forEach(a => a.addEventListener('click', closeMenu));

  // Assemble email links at runtime so they survive auto-obfuscators / scrapers
  document.querySelectorAll('a.e-link').forEach(a => {
    const u = a.getAttribute('data-u');
    const d = a.getAttribute('data-d');
    if (!u || !d) return;
    const addr = u + String.fromCharCode(64) + d;
    a.setAttribute('href', 'mailto:' + addr);
    a.textContent = addr;
  });
</script>

</body>
</html>
